Implemented HLS player (client-side), added scaffold for server-side HLS streamer

2025-12-30 00:29:05 +10:00
parent 32da27c404
commit 60edd082af
7 changed files with 74 additions and 1 deletions
--- a/web/js/api/libraries.js
+++ b/web/js/api/libraries.js
@@ -2,6 +2,9 @@ import * as auth from '/web/js/api/auth.js';
 import ky from 'https://cdn.jsdelivr.net/npm/ky@1.14.1/+esm'

 export async function ls(library, path) {
+    //fix: remove double slashes from path
+    path = path.replace("//", "/")
+
    try {
        const response = await ky.get(`/libraries/${library}/${path}`, {
            headers: {
--- a/web/js/pages/library_viewer.js
+++ b/web/js/pages/library_viewer.js
@@ -1,4 +1,34 @@
 import * as lib from '/web/js/api/libraries.js';
 import { url_params } from '/web/js/lib/search_params.js'

-console.log(await lib.ls(url_params.get("lib"), url_params.get("path")))
+const library_listing = (await lib.ls(url_params.get("lib"), url_params.get("path"))).Listing
+
+const container = document.getElementById("library-file-list-container");
+const template = document.getElementById("library-generic-item-template");
+
+container.innerHTML = "";
+
+//non-fatal error if listing is empty
+for (const file_entry of library_listing) {
+    const clone = template.content.cloneNode(true);
+    const link = clone.querySelector(".library-generic-item-href");
+
+    if (file_entry.Type === "directory") {
+        link.textContent = `<DIR> ${file_entry.Name}`
+        //TODO/BUGFIX: occurence of double slash when referencing the path as root, replace with proper bugfix
+        if (url_params.get("path").endsWith("/")) {
+            link.href = `/web/library_viewer?lib=${url_params.get("lib")}&path=${url_params.get("path")}${file_entry.Name}`
+        } else {
+            link.href = `/web/library_viewer?lib=${url_params.get("lib")}&path=${url_params.get("path")}/${file_entry.Name}`
+        }
+    }
+
+    if (file_entry.Type === "video") {
+        link.textContent = `<VID> ${file_entry.Name}`
+        link.href = `/web/video_player?lib=${url_params.get("lib")}&path=${url_params.get("path")}/${file_entry.Name}`
+    }
+
+    //TODO: add generic file listings
+
+    container.appendChild(clone);
+}
--- a/web/js/pages/video_player.js
+++ b/web/js/pages/video_player.js
@@ -0,0 +1,16 @@
+import { url_params } from '/web/js/lib/search_params.js'
+
+const src = `/hls/index.m3u8?lib=${url_params.get("lib")}&path=${url_params.get("path")}`
+
+const player = videojs('video-player', {
+  autoplay: true,
+})
+
+
+player.ready(() => {
+  player.src({
+    src,
+    type: 'application/x-mpegURL'
+  })
+  player.play()
+})
--- a/web/library_viewer.html
+++ b/web/library_viewer.html
@@ -8,7 +8,12 @@
 <body>
    <h2 id="library-viewer-header">Library viewer:</h2>

+    <div id="library-file-list-container"></div>
+
 <!-- begin templates -->
+    <template id="library-generic-item-template">
+        <a class="library-generic-item-href"></a>
+    </template>
 <!-- end templates -->

 <!-- begin js -->
--- a/web/video_player.html
+++ b/web/video_player.html
@@ -0,0 +1,13 @@
+<link href="https://vjs.zencdn.net/8.23.4/video-js.css" rel="stylesheet" />
+
+<video
+  id="video-player"
+  class="video-js vjs-default-skin"
+  controls
+  width="600"
+  height="300"
+  preload="auto"
+></video>
+
+<script src="https://vjs.zencdn.net/8.23.4/video.min.js"></script>
+<script type="module" src="/web/js/pages/video_player.js"></script>