mmonk/opal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
the-m-monk
2025-12-30 00:29:05 +10:00
parent 32da27c404
commit 60edd082af
7 changed files with 74 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
internal/httpserver/api/hls.go Normal file
View File

@@ -0,0 +1,5 @@
package api
func RegisterHlsEndpoints() {
}

1
internal/httpserver/start.go
View File

@@ -14,6 +14,7 @@ func Start() {
api.RegisterMiscEndpoints() api.RegisterMiscEndpoints()
api.RegisterAuthEndpoints() api.RegisterAuthEndpoints()
api.RegisterLibraryEndpoints() api.RegisterLibraryEndpoints()
api.RegisterHlsEndpoints()
RegisterWebui() RegisterWebui()

3
web/js/api/libraries.js
View File

@@ -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' import ky from 'https://cdn.jsdelivr.net/npm/ky@1.14.1/+esm'
export async function ls(library, path) { export async function ls(library, path) {
//fix: remove double slashes from path
path = path.replace("//", "/")
try { try {
const response = await ky.get(`/libraries/${library}/${path}`, { const response = await ky.get(`/libraries/${library}/${path}`, {
headers: { headers: {

32
web/js/pages/library_viewer.js
View File

@@ -1,4 +1,34 @@
import * as lib from '/web/js/api/libraries.js'; import * as lib from '/web/js/api/libraries.js';
import { url_params } from '/web/js/lib/search_params.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);
}

16
web/js/pages/video_player.js Normal file
View File

@@ -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()
})

5
web/library_viewer.html
View File

@@ -8,7 +8,12 @@
<body> <body>
<h2 id="library-viewer-header">Library viewer:</h2> <h2 id="library-viewer-header">Library viewer:</h2>
<div id="library-file-list-container"></div>
<!-- begin templates --> <!-- begin templates -->
<template id="library-generic-item-template">
<a class="library-generic-item-href"></a>
</template>
<!-- end templates --> <!-- end templates -->
<!-- begin js --> <!-- begin js -->

13
web/video_player.html Normal file
View File

@@ -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>