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-13 00:07:28 +01:00
parent 07ba96295d
commit 3f1648da32
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
5 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
database.sqlite3
View File

Binary file not shown.

4
index.js
View File

@ -181,6 +181,9 @@ app.get("/api/logout", authorized(), (req, res) => {
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; const { title } = req.body;
if (!title) {
return res.status(400).json({ ok: false, error: "bad request" });
}
if (!req.files || !req.files.video) { if (!req.files || !req.files.video) {
return res.status(400).json({ ok: false, error: "bad request" }); return res.status(400).json({ ok: false, error: "bad request" });
@ -206,6 +209,7 @@ app.post("/api/upload-video", authorized(), fileUpload({ limits: { fileSize: 2 *
const queueItem = { const queueItem = {
videoId: id, videoId: id,
userId, userId,
title,
errors: [], errors: [],
progress: 0, progress: 0,
duration, duration,

6
public/queue/script.js
View File

@ -36,11 +36,11 @@ async function main() {
<li> <li>
<div class="video-item"> <div class="video-item">
<div class="video-image"> <div class="video-image">
<img class="shadow" src="/videos/${vid.id}.png" alt=""> <img class="shadow" src="/videos/${vid.videoId}.png" alt="">
<img class="non-shadow" src="/videos/${vid.id}.png" alt=""> <img class="non-shadow" src="/videos/${vid.videoId}.png" alt="">
</div> </div>
<span class="video-info"> <span class="video-info">
${vid.title} <b>${vid.title}</b>
<br> <br>
<p>Uploaded ${uploadedTime} of ${totalTime} (${percentage}%)</p> <p>Uploaded ${uploadedTime} of ${totalTime} (${percentage}%)</p>
<progress max="${vid.duration}" value="${vid.progress}">${percentage}%</progress> <progress max="${vid.duration}" value="${vid.progress}">${percentage}%</progress>

18
public/upload/index.html
View File

@ -4,19 +4,21 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>MaoTube</title> <title>MaoTube</title>
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<script defer src="/header.js"></script>
<script defer src="script.js"></script>
</head> </head>
<body> <body>
<h1>MaoTube</h1> <h1>MaoTube</h1>
<form action="/api/upload-video" method="POST" enctype="multipart/form-data"> <form id="upload-form" method="POST" action="/api/upload-video" enctype="multipart/form-data">
<label for="username"><p>Title</p></label> <label for="title"><p>Title</p></label>
<input type="text" name="title" autofocus> <input type="text" name="title" id="title" required autofocus>
<label for="password"><p>Video</p></label> <label for="video"><p>Video</p></label>
<input type="file" name="video"> <input type="file" name="video" id="video" required>
<br> <br><br>
<br>
<input type="submit" id="submit" value="Upload"> <input type="submit" id="submit" value="Upload">
<br><br>
<a href="/queue">View upload queue</a>
</form> </form>
<script src="/header.js"></script>
</body> </body>
</html> </html>

14
public/upload/script.js Normal file
View File

@ -0,0 +1,14 @@
document.getElementById("upload-form").addEventListener("submit", async event => {
event.preventDefault();
const data = new FormData(event.target);
console.log(data);
await fetch("/api/upload-video", {
method: "POST",
body: data,
});
location.href = "/queue";
});