diff --git a/index.html b/index.html
index 8449626..df90917 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
+
@@ -18,6 +19,7 @@
Loading...
+
Library
diff --git a/js/api.js b/js/api.js
index 0f154e5..87f5a58 100644
--- a/js/api.js
+++ b/js/api.js
@@ -70,6 +70,15 @@ class API {
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 {
@@ -89,13 +98,16 @@ class APIError {
}
class Library {
+
/**
* @type {Object}
*/
videos;
+
}
class Video {
+
/**
* @type {string}
*/
@@ -105,8 +117,23 @@ class Video {
* @type {VideoMetadata}
*/
metadata;
+
}
/**
* @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';
+ }
+}
diff --git a/js/base.js b/js/base.js
new file mode 100644
index 0000000..fc5c3c6
--- /dev/null
+++ b/js/base.js
@@ -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';
+}
diff --git a/js/components.js b/js/components.js
index 1add218..ac66b99 100644
--- a/js/components.js
+++ b/js/components.js
@@ -72,13 +72,49 @@ const components = {
};
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("button", { onClick: downloadVideo }, [
element("img", { attributes: { "src": "/icon/download.svg", "width": "24", "height": "24" } }),
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() })
]);
}
diff --git a/js/index.js b/js/index.js
index 4675a96..9db2a7b 100644
--- a/js/index.js
+++ b/js/index.js
@@ -3,13 +3,19 @@ const api = new API(API_URL);
const root = document.getElementById("root");
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) {
root.appendChild(components.series(group, library.videos[group]));
}
- document.getElementById("loading").style.display = 'none';
+ finishedLoading();
}
init();
diff --git a/js/watch.js b/js/watch.js
index ebe6182..8542bc1 100644
--- a/js/watch.js
+++ b/js/watch.js
@@ -8,7 +8,7 @@ async function init() {
let video = await api.getVideo(query.get("id"));
root.appendChild(components.player(video));
- document.getElementById("loading").style.display = 'none';
+ finishedLoading();
}
init();
diff --git a/style/base.css b/style/base.css
index a4b3952..8f7c8f1 100644
--- a/style/base.css
+++ b/style/base.css
@@ -78,11 +78,36 @@ a:hover {
}
#loading {
- background-color: var(--accent);
- padding: 5px;
- border-radius: 5px;
position: absolute;
top: 50%;
left: 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;
}
diff --git a/style/components.css b/style/components.css
index 4057f72..a3ec20b 100644
--- a/style/components.css
+++ b/style/components.css
@@ -54,7 +54,51 @@
gap: 5px;
background-color: var(--foreground);
- max-width: min-content;
+ max-width: max-content;
padding: 10px;
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;
+}
diff --git a/watch.html b/watch.html
index 9f14612..a5329bc 100644
--- a/watch.html
+++ b/watch.html
@@ -3,9 +3,12 @@
VideoBase
+
+
+
@@ -16,6 +19,7 @@
Loading...
+