player: show chapters

1 files changed, 12 insertions, 6 deletions

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) {