video player

This commit is contained in:
Theis Pieter Hollebeek 2024-01-19 04:22:22 +01:00
parent cd6c8c88b5
commit 484b343b83
5 changed files with 73 additions and 7 deletions

View File

@ -79,9 +79,10 @@ app.get("/api/search", async (req, res) => {
return res.status(400).json({ ok: false, error: "bad request" }); return res.status(400).json({ ok: false, error: "bad request" });
} }
const [start, end] = [20 * page, 20 * (page + 1)]; const [start, end] = [20 * page, 20 * (page + 1)];
const returnedVideos = videos const withDistance = videos
.map(video => ({dist: levenshtein(search, video.title), ...video})) .map(video => ({dist: levenshtein(search, video.title), ...video}));
.toSorted((a, b) => a.dist - b.dist) withDistance.sort((a, b) => a.dist - b.dist);
const returnedVideos = withDistance
.slice(start, end) .slice(start, end)
.map(video => { .map(video => {
const user = users.find(user => user.id === video.userId); const user = users.find(user => user.id === video.userId);
@ -151,9 +152,7 @@ app.post("/api/upload_video", authorized(), fileUpload({ limits: { fileSize: 2 *
}) })
}) })
if (exitCode !== 0) { if (exitCode !== 0) {
console.log(":/"); throw new Error("handbrake failed");
// throw new Error("handbrake failed");
return res.status(500).json({ ok: false, error: "server error" });
} }
const video = { const video = {

View File

@ -22,7 +22,7 @@ function displayResponse(response) {
+ "<ul id='video-list'>" + "<ul id='video-list'>"
+ videos + videos
.map(v => { .map(v => {
return `<li><p><a href="${v.path}">${v.title}</a> - ${v.author}</p></li>` return `<li><p><a href="/watch?id=${v.id}">${v.title}</a> - ${v.author}</p></li>`
}) })
.join("") .join("")
+ "</ul>"; + "</ul>";

View File

@ -53,3 +53,7 @@ ul#video-list {
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
#video-player {
max-height: 80vh;
}

32
public/watch/index.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MaoTube</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>MaoTube</h1>
<form method="GET" target="_self" action="/search">
<label for="query"><p>Search</p></label>
<input type="text" id="query" name="query" placeholder="...">
<input type="submit" value="Search">
</form>
<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>
<script src="script.js"></script>
<script src="/header.js"></script>
</body>
</html>

31
public/watch/script.js Normal file
View File

@ -0,0 +1,31 @@
function error(message) {
const errorContainer = document.getElementById("mao-error");
const errorElement = document.getElementById("mao-error-message");
errorElement.innerText = message;
errorContainer.classList.remove("hidden");
}
function main() {
const params = new URLSearchParams(window.location.search);
const id = params.get("id");
if (!id) {
error("invalid id parameter");
return;
}
const result = document.getElementById("result");
const video = document.createElement("video");
video.controls = true;
video.id = "video-player";
video.src = `/videos/${id}.mp4`;
result.appendChild(video);
video.onerror = () => {
video.remove();
error("invalid id parameter");
}
}
main();