mr/VideoBase-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show API errors, Implement metadata editing (WIP)

Browse Source
This commit is contained in:
MrLetsplay 2025-02-12 23:40:37 +01:00
parent 8d8cd9aa2b
commit 389e5d02f2
Signed by: mr
SSH Key Fingerprint: SHA256:92jBH80vpXyaZHjaIl47pjRq+Yt7XGTArqQg1V7hSqg
9 changed files with 172 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -8,6 +8,7 @@
<script src="js/config.js" defer></script> <script src="js/config.js" defer></script>
<script src="js/api.js" defer></script> <script src="js/api.js" defer></script>
<script src="js/components.js" defer></script> <script src="js/components.js" defer></script>
<script src="js/base.js" defer></script>
<script src="js/index.js" defer></script> <script src="js/index.js" defer></script>
<link rel="stylesheet" href="style/base.css"> <link rel="stylesheet" href="style/base.css">
@ -18,6 +19,7 @@
<body> <body>
<noscript>Unfortunately, this page requires JavaScript to work correctly</noscript> <noscript>Unfortunately, this page requires JavaScript to work correctly</noscript>
<div id="loading">Loading...</div> <div id="loading">Loading...</div>
<div id="error" style="display: none;"></div>
<h1>Library</h1> <h1>Library</h1>

27
js/api.js
View File

@ -70,6 +70,15 @@ class API {
return await this.call("GET", "/library/video/" + encodeURIComponent(id), null, null); return await this.call("GET", "/library/video/" + encodeURIComponent(id), null, null);
} }
/**
* @param {string} id
* @returns {Video}
* @throws {APIError}
*/
async getVideoMetadata(id) {
return await this.call("GET", "/library/video/" + encodeURIComponent(id) + "/metadata", null, null);
}
} }
class APIError { class APIError {
@ -89,13 +98,16 @@ class APIError {
} }
class Library { class Library {
/** /**
* @type {Object<string, Video[]>} * @type {Object<string, Video[]>}
*/ */
videos; videos;
} }
class Video { class Video {
/** /**
* @type {string} * @type {string}
*/ */
@ -105,8 +117,23 @@ class Video {
* @type {VideoMetadata} * @type {VideoMetadata}
*/ */
metadata; metadata;
} }
/** /**
* @typedef {{series:string, title: string, author: string, index: number, [key: string]: any}} VideoMetadata * @typedef {{series:string, title: string, author: string, index: number, [key: string]: any}} VideoMetadata
*/ */
/**
* @param {any} error
* @returns {string}
*/
function errorToString(error) {
if (typeof error == 'string') {
return error;
} else if (error.toString) {
return error.toString();
} else {
return 'Unknown error';
}
}

19
js/base.js Normal file
View File

@ -0,0 +1,19 @@
const errorElement = document.getElementById("error");
const loadingElement = document.getElementById("loading");
/**
* @param {any} error
*/
function showError(error) {
while (errorElement.children.length > 0) {
errorElement.removeChild(errorElement.firstChild);
}
errorElement.appendChild(components.error(error));
errorElement.style.display = null;
console.log(error);
}
function finishedLoading() {
loadingElement.style.display = 'none';
}

40
js/components.js
View File

@ -72,13 +72,49 @@ const components = {
}; };
return element("div", { classNames: ["player"] }, [ return element("div", { classNames: ["player"] }, [
element("video", { attributes: { "width": "960", "height": "540", "poster": API_URL + "/library/video/" + encodeURIComponent(video.id) + "/thumbnail" } }, [ element("div", { content: video.metadata.title, classNames: ["player-title"] }),
element("div", { content: video.metadata.author, classNames: ["player-author"] }),
element("video", { attributes: { "poster": API_URL + "/library/video/" + encodeURIComponent(video.id) + "/thumbnail" } }, [
element("source", { attributes: { "src": streamURL } }) element("source", { attributes: { "src": streamURL } })
]), ]),
element("button", { onClick: downloadVideo }, [ element("button", { onClick: downloadVideo }, [
element("img", { attributes: { "src": "/icon/download.svg", "width": "24", "height": "24" } }), element("img", { attributes: { "src": "/icon/download.svg", "width": "24", "height": "24" } }),
element("span", { content: "Download" }), element("span", { content: "Download" }),
]) ]),
components.videoMetadata(video)
]);
},
/**
* @param {Video} video
* @returns {HTMLElement}
*/
videoMetadata(video) {
return element("details", { classNames: ["video-metadata"] }, [
element("summary", { content: "Metadata" }),
element("div", { classNames: ["video-metadata-table"] }, [
element("span", { content: "Title" }),
element("input", { attributes: { "value": video.metadata.title } }),
element("span", { content: "Series" }),
element("input", { attributes: { "value": video.metadata.series } }),
element("span", { content: "Author" }),
element("input", { attributes: { "value": video.metadata.author } }),
element("span", { content: "Index" }),
element("input", { attributes: { "value": video.metadata.index } }),
]),
element("button", { content: "Update" })
]);
},
/**
* @param {any} error
* @returns {HTMLElement}
*/
error(error) {
return element("div", { classNames: ["error"] }, [
element("b", { content: "Oops, an unexpected error occurred" }),
element("span", { content: errorToString(error) }),
element("button", { content: "Reload", onClick: () => window.location.reload() })
]); ]);
} }

10
js/index.js
View File

@ -3,13 +3,19 @@ const api = new API(API_URL);
const root = document.getElementById("root"); const root = document.getElementById("root");
async function init() { async function init() {
let library = await api.getLibrary("series"); let library;
try {
library = await api.getLibrary("series");
} catch (e) {
showError(e);
return;
}
for (let group in library.videos) { for (let group in library.videos) {
root.appendChild(components.series(group, library.videos[group])); root.appendChild(components.series(group, library.videos[group]));
} }
document.getElementById("loading").style.display = 'none'; finishedLoading();
} }
init(); init();

2
js/watch.js
View File

@ -8,7 +8,7 @@ async function init() {
let video = await api.getVideo(query.get("id")); let video = await api.getVideo(query.get("id"));
root.appendChild(components.player(video)); root.appendChild(components.player(video));
document.getElementById("loading").style.display = 'none'; finishedLoading();
} }
init(); init();

31
style/base.css
View File

@ -78,11 +78,36 @@ a:hover {
} }
#loading { #loading {
background-color: var(--accent);
padding: 5px;
border-radius: 5px;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: var(--accent);
padding: 5px;
border-radius: 5px;
}
#error {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
background-color: var(--error);
padding: 5px;
border-radius: 5px;
min-width: 200px;
min-height: 100px;
}
.error {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.error>button {
align-self: flex-end;
} }

46
style/components.css
View File

@ -54,7 +54,51 @@
gap: 5px; gap: 5px;
background-color: var(--foreground); background-color: var(--foreground);
max-width: min-content; max-width: max-content;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
} }
.player>video {
max-width: 100%;
}
.player-title {
font-size: 1.2em;
font-weight: bold;
}
.player-author {
color: var(--text-alternative);
}
.video-metadata {
width: 100%;
}
.video-metadata>:first-child {
font-weight: bold;
font-size: 1.2em;
margin-top: 10px;
}
.video-metadata-table {
display: grid;
grid-template-columns: max-content auto;
gap: 5px;
width: 100%;
margin-top: 5px;
}
.video-metadata-table>* {
align-self: center;
}
.video-metadata-table>span {
font-weight: bold;
}
.video-metadata>button {
margin-top: 5px;
}

4
watch.html
View File

@ -3,9 +3,12 @@
<head> <head>
<title>VideoBase</title> <title>VideoBase</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="js/config.js" defer></script> <script src="js/config.js" defer></script>
<script src="js/api.js" defer></script> <script src="js/api.js" defer></script>
<script src="js/components.js" defer></script> <script src="js/components.js" defer></script>
<script src="js/base.js" defer></script>
<script src="js/watch.js" defer></script> <script src="js/watch.js" defer></script>
<link rel="stylesheet" href="style/base.css"> <link rel="stylesheet" href="style/base.css">
@ -16,6 +19,7 @@
<body> <body>
<noscript>Unfortunately, this page requires JavaScript to work correctly</noscript> <noscript>Unfortunately, this page requires JavaScript to work correctly</noscript>
<div id="loading">Loading...</div> <div id="loading">Loading...</div>
<div id="error" style="display: none;"></div>
<div id="root"></div> <div id="root"></div>
</body> </body>