player: show chapters

3 files changed, 32 insertions, 8 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) {
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%;
+}