sfja.skp/maotube
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Create upload queue page in frontend

Browse Source
This commit is contained in:
Reimar 2024-02-12 19:37:02 +01:00
parent cd124f916e
commit 07ba96295d
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
4 changed files with 98 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.js
View File

@ -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) => {

8
public/helpers.js Normal file
View File

@ -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");
}

31
public/queue/index.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MaoTube</title>
<link rel="stylesheet" href="/style.css">
<script defer src="/helpers.js"></script>
<script defer src="script.js"></script>
<script defer src="/header.js"></script>
</head>
<body>
<h1>MaoTube</h1>
<div>
<h1>Uploading videos</h1>
</div>
<br>
<div id="result">
<noscript>
<div class="mao-error">
<p>javascript not enabled</p>
<p>bottom text</p>
</div>
</noscript>
<div id="mao-error" class="mao-error hidden">
<p id="mao-error-message"></p>
<p>bottom text</p>
</div>
</div>
</body>
</html>

57
public/queue/script.js Normal file
View File

@ -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 =
`<p>Currently processing ${queue.length} video(s)</p>`
+ `<ul id="video-list">`
+ queue
.map(vid => {
const percentage = parseInt(vid.progress / vid.duration * 100);
const uploadedTime = readableMicroseconds(vid.progress);
const totalTime = readableMicroseconds(vid.duration);
return `
<li>
<div class="video-item">
<div class="video-image">
<img class="shadow" src="/videos/${vid.id}.png" alt="">
<img class="non-shadow" src="/videos/${vid.id}.png" alt="">
</div>
<span class="video-info">
${vid.title}
<br>
<p>Uploaded ${uploadedTime} of ${totalTime} (${percentage}%)</p>
<progress max="${vid.duration}" value="${vid.progress}">${percentage}%</progress>
</span>
</div>
</li>
`;
})
.join("")
+ "</ul>";
}
main();