1 files changed, 18 insertions, 3 deletions

diff --git a/web/script/player/player.ts b/web/script/player/player.ts
index a5bccdb..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,11 +18,13 @@ 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();
 
     public position = new OVar(0)
     public duration = new OVar(1)
+    public volume = new OVar(0)
     public playing = new OVar(false)
     public canplay = new OVar(false)
     public error = new OVar<string | undefined>(undefined)
@@ -34,6 +36,17 @@ export class Player {
     }
 
     constructor(public node_id: string, public logger?: Logger<string>) {
+        this.volume.value = this.video.volume
+        let skip_change = false;
+        this.volume.onchange(v => {
+            if (!skip_change) this.video.volume = v
+            skip_change = false
+        })
+        this.video.onvolumechange = () => {
+            skip_change = true;
+            this.volume.value = this.video.volume
+        }
+
         this.video.onloadedmetadata = () => { }
         this.video.ondurationchange = () => { }
         this.video.ontimeupdate = () => {
@@ -101,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...")
@@ -129,7 +144,7 @@ export class Player {
             this.set_pers()
         })
     }
-    
+
     async update(newt?: number) {
         await Promise.all(this.active_tracks.value.map(t => t.update(newt ?? this.video.currentTime)))
     }