From c2e50cef75712a119f9b6cafc9c12d2ed677d21e Mon Sep 17 00:00:00 2001
From: metamuffin <metamuffin@disroot.org>
Date: Wed, 7 Feb 2024 17:32:18 +0100
Subject: player: improve volume slider, fix native player button

---
 web/style/js-player.css | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

(limited to 'web/style/js-player.css')

diff --git a/web/style/js-player.css b/web/style/js-player.css
index 1d205a8..e2c5c10 100644
--- a/web/style/js-player.css
+++ b/web/style/js-player.css
@@ -207,3 +207,32 @@ ul.jsp-track-list {
 ul.jsp-track-list li.active {
     background-color: #047a0073;
 }
+
+.jsp-volumecontrol input {
+    appearance: none;
+    width: 100%;
+    height: 24px;
+    background-color: black;
+    opacity: 0.5;
+    outline: none;
+}
+.jsp-volumecontrol input:hover {
+    opacity: 1;
+}
+.jsp-volumecontrol input::-webkit-slider-thumb,
+.jsp-volumecontrol input::-moz-range-thumb {
+    width: 24px;
+    height: 24px;
+    border-radius: 0px;
+    background-color: #06ad00;
+    cursor: ew-resize;
+    border: 0px solid transparent;
+}
+
+.jsp-volume {
+    display: inline-block;
+    margin-left: 2em;
+    font-family: monospace;
+    font-size: large;
+    width: 20em;
+}
-- 
cgit v1.2.3-70-g09d2


From ae8bed70a17eaf8308486aa060cade89d283c6d8 Mon Sep 17 00:00:00 2001
From: metamuffin <metamuffin@disroot.org>
Date: Sat, 16 Mar 2024 18:26:36 +0100
Subject: player: show chapters

---
 web/script/player/mod.ts    | 18 ++++++++++++------
 web/script/player/player.ts |  7 +++++--
 web/style/js-player.css     | 15 +++++++++++++++
 3 files changed, 32 insertions(+), 8 deletions(-)

(limited to 'web/style/js-player.css')

diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts
index 77e8346..3774c62 100644
--- a/web/script/player/mod.ts
+++ b/web/script/player/mod.ts
@@ -61,9 +61,6 @@ function initialize_player(el: HTMLElement, node_id: string) {
     const toggle_playing = () => player.playing.value ? player.pause() : player.play()
     const pri_map = (v: number) => (v / player.duration.value * 100) + "%"
 
-
-
-
     let pri_current: HTMLElement;
     let pri: HTMLElement;
 
@@ -179,6 +176,15 @@ function initialize_player(el: HTMLElement, node_id: string) {
         ),
         pri = e("div", { class: "jsp-pri" },
             pri_current = e("div", { class: "jsp-pri-current" }),
+            player.chapters.map(
+                chapters => e("div", ...chapters.map(chap => e("div", {
+                    class: "jsp-chapter",
+                    style: {
+                        left: pri_map(chap.time_start ?? 0),
+                        width: pri_map((chap.time_end ?? player.duration.value) - (chap.time_start ?? 0))
+                    }
+                }, e("p", chap.labels[0][1]))))
+            ),
             player.active_tracks.map(
                 tracks => e("div", ...tracks.map((t, i) => t.buffered.map(
                     ranges => e("div", ...ranges.map(
@@ -304,9 +310,9 @@ function send_player_progress(node_id: string, player: Player) {
 function mouse_idle(e: HTMLElement, timeout: number): OVar<boolean> {
     let ct: number;
     const idle = new OVar(false)
-    // e.onmouseleave = () => { 
-    //     clearTimeout(ct)
-    // }
+    e.onmouseleave = () => { 
+        clearTimeout(ct)
+    }
     e.onmousemove = () => {
         clearTimeout(ct)
         if (idle) {
diff --git a/web/script/player/player.ts b/web/script/player/player.ts
index 367ae04..3d35c49 100644
--- a/web/script/player/player.ts
+++ b/web/script/player/player.ts
@@ -9,7 +9,7 @@ import { NodePublic, NodeUserData, SourceTrack, TimeRange } from "./jhls.d.ts";
 import { SegmentDownloader } from "./download.ts";
 import { PlayerTrack } from "./track/mod.ts";
 import { Logger } from "../jshelper/src/log.ts";
-import { WatchedState } from "./jhls.d.ts";
+import { WatchedState, Chapter } from "./jhls.d.ts";
 import { get_track_kind } from "./mediacaps.ts";
 import { create_track } from "./track/create.ts";
 
@@ -18,6 +18,7 @@ export class Player {
     public video = e("video")
     public media_source = new MediaSource();
     public tracks?: SourceTrack[];
+    public chapters = new OVar<Chapter[]>([]);
     public active_tracks = new OVar<PlayerTrack[]>([]);
     public downloader: SegmentDownloader = new SegmentDownloader();
 
@@ -113,9 +114,11 @@ export class Player {
         if (userdata.error) return this.set_pers("server error: " + metadata.error)
 
         this.set_pers()
+        //! bad code: assignment order is important because chapter callbacks use duration
+        this.duration.value = metadata.media!.duration
+        this.chapters.value = metadata.media!.chapters
         this.tracks = metadata.media!.tracks
 
-        this.duration.value = metadata.media!.duration
         this.video.src = URL.createObjectURL(this.media_source)
         this.media_source.addEventListener("sourceopen", async () => {
             this.set_pers("Downloading track indecies...")
diff --git a/web/style/js-player.css b/web/style/js-player.css
index e2c5c10..2dedb9c 100644
--- a/web/style/js-player.css
+++ b/web/style/js-player.css
@@ -236,3 +236,18 @@ ul.jsp-track-list li.active {
     font-size: large;
     width: 20em;
 }
+
+.jsp-chapter {
+    position: absolute;
+    height: var(--csize);
+    padding-left: 2px;
+    border-left: 2px solid rgba(255, 161, 55, 0.548);
+}
+.jsp-chapter p {
+    font-size: small;
+    text-overflow: ellipsis;
+    overflow: visible;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+}
-- 
cgit v1.2.3-70-g09d2