From 07ba96295df7fa9d5d1708ed9a6b7f3e0c44874d Mon Sep 17 00:00:00 2001 From: Reimar Date: Mon, 12 Feb 2024 19:37:02 +0100 Subject: [PATCH] Create upload queue page in frontend --- index.js | 4 +-- public/helpers.js | 8 ++++++ public/queue/index.html | 31 ++++++++++++++++++++++ public/queue/script.js | 57 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 public/helpers.js create mode 100644 public/queue/index.html create mode 100644 public/queue/script.js diff --git a/index.js b/index.js index 954b832..bf0a67b 100644 --- a/index.js +++ b/index.js @@ -237,9 +237,9 @@ app.post("/api/upload-video", authorized(), fileUpload({ limits: { fileSize: 2 * app.get("/api/video-queue", authorized(), (req, res) => { const userId = req.user.id; - const videos = videoQueue.filter(item => item.userId === userId); + const queue = videoQueue.filter(item => item.userId === userId); - return res.status(200).json({ ok: true, videos }); + return res.status(200).json({ ok: true, queue }); }); app.get("/api/video-info", async (req, res) => { diff --git a/public/helpers.js b/public/helpers.js new file mode 100644 index 0000000..9427a93 --- /dev/null +++ b/public/helpers.js @@ -0,0 +1,8 @@ +function error(message) { + const errorContainer = document.getElementById("mao-error"); + const errorElement = document.getElementById("mao-error-message"); + + errorElement.innerText = message || "unknown error"; + errorContainer.classList.remove("hidden"); +} + diff --git a/public/queue/index.html b/public/queue/index.html new file mode 100644 index 0000000..713e3f2 --- /dev/null +++ b/public/queue/index.html @@ -0,0 +1,31 @@ + + + + + MaoTube + + + + + + +

MaoTube

+
+

Uploading videos

+
+
+
+ + +
+ + + diff --git a/public/queue/script.js b/public/queue/script.js new file mode 100644 index 0000000..de0f090 --- /dev/null +++ b/public/queue/script.js @@ -0,0 +1,57 @@ +function readableMicroseconds(us) { + const min = parseInt(us / 60_000_000); + const sec = parseInt((us % 60_000_000) / 1_000_000); + + if (!min) { + return `${sec}s`; + } + + return `${min}m ${sec}s`; +} + +async function main() { + const response = await fetch(`/api/video-queue`); + if (!response.ok) { + error("something went wrong"); + return; + } + + const json = await response.json(); + if (!json.ok) { + error(json.error); + } + + const queue = json.queue; + + document.getElementById("result").innerHTML = + `

Currently processing ${queue.length} video(s)

` + + `"; +} + +main(); +