From 8852a6f0c3150ba0ad626de51f9843ab59c6eedf Mon Sep 17 00:00:00 2001 From: Reimar Date: Mon, 12 Feb 2024 16:02:00 +0100 Subject: [PATCH] Add video title and author to watch page --- index.js | 58 ++++++++++++++++++++++++++++------------ public/header.js | 2 +- public/style.css | 14 +++++++--- public/upload/index.html | 2 +- public/watch/index.html | 12 +++++---- public/watch/script.js | 45 ++++++++++++++++++++++--------- 6 files changed, 92 insertions(+), 41 deletions(-) diff --git a/index.js b/index.js index 7e9d494..0109216 100644 --- a/index.js +++ b/index.js @@ -14,15 +14,19 @@ let sessions = []; const db = new sqlite3.Database("database.sqlite3"); function dbGet(query, ...parameters) { - return new Promise((resolve, reject) => db.get(query, parameters, (err, data) => err ? reject(err) : resolve(data))); + return new Promise((resolve, reject) => db.get(query, parameters, (err, data) => err ? reject(err) : resolve(data))); } function dbAll(query, ...parameters) { - return new Promise((resolve, reject) => db.all(query, parameters, (err, data) => err ? reject(err) : resolve(data))); + return new Promise((resolve, reject) => db.all(query, parameters, (err, data) => err ? reject(err) : resolve(data))); } function dbRun(query, ...parameters) { - return new Promise((resolve, reject) => db.run(query, parameters, (err, data) => err ? reject(err) : resolve(data))); + return new Promise((resolve, reject) => db.run(query, parameters, (err, data) => err ? reject(err) : resolve(data))); +} + +function videoPath(id) { + return `videos/${id}.webm`; } function randomString(length) { @@ -54,7 +58,7 @@ app.post("/api/register", async (req, res) => { return res.status(400).json({ ok: false, error: "bad request" }); } - const existingUser = await dbGet("SELECT * FROM users WHERE username = ?", username); + const existingUser = await dbGet("SELECT * FROM users WHERE username = ?", username); if (existingUser !== undefined) { return res.status(400).json({ ok: false, error: "username taken" }); @@ -62,7 +66,7 @@ app.post("/api/register", async (req, res) => { const passwordHash = await bcrypt.hash(password, 10); - await dbGet("INSERT INTO users (username, password) VALUES (?, ?)", username, passwordHash); + await dbGet("INSERT INTO users (username, password) VALUES (?, ?)", username, passwordHash); return res.status(200).json({ ok: true }); }); @@ -107,16 +111,16 @@ app.get("/api/search", async (req, res) => { } const [start, end] = [20 * page, 20]; - const videos = await dbAll(` - SELECT videos.*, users.username AS author - FROM videos - JOIN users ON users.id = videos.user_id - WHERE title LIKE CONCAT('%', ?, '%') - LIMIT ? - OFFSET ? - `, search, end, start); + const videos = await dbAll(` + SELECT videos.*, users.username AS author + FROM videos + JOIN users ON users.id = videos.user_id + WHERE title LIKE CONCAT('%', ?, '%') + LIMIT ? + OFFSET ? + `, search, end, start); - const { total } = await dbGet("SELECT COUNT(*) AS total FROM videos"); + const { total } = await dbGet("SELECT COUNT(*) AS total FROM videos"); return res.status(200).json({ ok: true, videos, total }); }); @@ -155,7 +159,7 @@ app.get("/api/logout", authorized(), (req, res) => { return res.status(200).json({ ok: true }); }); -app.post("/api/upload_video", authorized(), fileUpload({ limits: { fileSize: 2 ** 26 }, useTempFiles: true }), async (req, res) => { +app.post("/api/upload-video", authorized(), fileUpload({ limits: { fileSize: 2 ** 26 }, useTempFiles: true }), async (req, res) => { const { title } = req.body; if (!req.files || !req.files.video) { @@ -169,7 +173,7 @@ app.post("/api/upload_video", authorized(), fileUpload({ limits: { fileSize: 2 * const userId = req.user.id; const id = randomString(4); const tempPath = req.files.video.tempFilePath; - const newPath = path.join(dirname(), "videos", `${id}.mp4`); + const newPath = path.join(dirname(), videoPath(id)); const thumbnailPath = path.join(dirname(), "videos", `${id}.png`); console.log(newPath); @@ -197,7 +201,27 @@ app.post("/api/upload_video", authorized(), fileUpload({ limits: { fileSize: 2 * await dbRun("INSERT INTO videos (id, user_id, title) VALUES (?, ?, ?)", id, userId, title); return res.status(200).json({ ok: true }); -}) +}); + +app.get("/api/video-info", async (req, res) => { + const id = req.query["id"]; + + const video = await dbGet(` + SELECT videos.id, videos.title, users.username AS author + FROM videos + JOIN users ON users.id = videos.user_id + WHERE videos.id = ? + LIMIT 1 + `, id); + + if (!video) { + return res.status(404).json({ ok: false, error: "video not found" }); + } + + video.path = path.join("/", videoPath(id)); + + return res.status(200).json({ ok: true, video }); +}); app.use((err, req, res, next) => { console.error(err); diff --git a/public/header.js b/public/header.js index a4f7a57..05053ac 100644 --- a/public/header.js +++ b/public/header.js @@ -35,7 +35,7 @@ function displayHeader() { ${links} -
- +
diff --git a/public/style.css b/public/style.css index 279c6f2..d51fd76 100644 --- a/public/style.css +++ b/public/style.css @@ -72,7 +72,16 @@ input::file-selector-button { } #video-player { - max-height: 80vh; + height: 60vh; + width: 100%; + background-color: black; +} + +#video-result { + width: 106vh; + display: none; + text-align: left; + margin: auto; } .video-item { @@ -130,6 +139,3 @@ a { color: var(--red); } -a:visited { - color: #FF5722; -} diff --git a/public/upload/index.html b/public/upload/index.html index 5927e78..4f24573 100644 --- a/public/upload/index.html +++ b/public/upload/index.html @@ -7,7 +7,7 @@

MaoTube

-
+ diff --git a/public/watch/index.html b/public/watch/index.html index 5ef78bb..a4294e9 100644 --- a/public/watch/index.html +++ b/public/watch/index.html @@ -7,19 +7,21 @@

MaoTube

- - - - -

+
+ +

+ +
+ +