track select ui in jsp-

3 files changed, 19 insertions, 12 deletions

diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts
index 08193a7..fdb4e4a 100644
--- a/web/script/player/mod.ts
+++ b/web/script/player/mod.ts
@@ -60,8 +60,12 @@ function initialize_player(el: HTMLElement, node_id: string) {
                     .filter(({ track }) => get_track_kind(track.kind) == kind)
                     .map(({ track, index }): HTMLElement => {
                         const active = player.active_tracks.value.find(ts => ts.track_index == index) !== undefined
+                        const onclick = (button: HTMLElement) => {
+                            button.textContent = "…"
+                            player.set_track_enabled(index, !active)
+                        }
                         return e("div",
-                            e("span", { class: "jsp-track-stae" }, active ? "active" : ""), " ",
+                            e("button", { class: "jsp-track-state", onclick }, active ? "-" : "+"), " ",
                             e("span", { class: "jsp-track-name" }, track.name), " ",
                             e("span", { class: "jsp-track-lang" }, track.language)
                         )
diff --git a/web/script/player/player.ts b/web/script/player/player.ts
index d76d8cb..2ba2e1d 100644
--- a/web/script/player/player.ts
+++ b/web/script/player/player.ts
@@ -93,8 +93,8 @@ export class Player {
         this.video.src = URL.createObjectURL(this.media_source)
         this.media_source.addEventListener("sourceopen", async () => {
             this.set_pers("Downloading track indecies...")
-            await this.set_track_enabled(0, true)
-            await this.set_track_enabled(1, true)
+            await this.set_track_enabled(0, true, false)
+            await this.set_track_enabled(1, true, false)
             this.set_pers("Downloading initial segments...")
             this.update()
             await this.canplay.wait_for(true)
@@ -105,14 +105,15 @@ export class Player {
         await Promise.all(this.active_tracks.value.map(t => t.update(newt ?? this.video.currentTime)))
     }
 
-    async set_track_enabled(index: number, state: boolean) {
+    async set_track_enabled(index: number, state: boolean, update = true) {
         console.log(`(${index}) set enabled ${state}`);
         const active_index = this.active_tracks.value.findIndex(t => t.track_index == index)
-        if (!state && active_index !== undefined) {
+        if (!state && active_index != -1) {
             const [track] = this.active_tracks.value.splice(active_index, 1)
-            track.destroy()
-        } else if (state && active_index === undefined) {
+            track.abort.abort()
+        } else if (state && active_index == -1) {
             this.active_tracks.value.push((await PlayerTrack.new(this, this.node_id, index, this.tracks![index]))!)
+            if (update) await this.update()
         }
         this.active_tracks.change()
     }
diff --git a/web/script/player/track.ts b/web/script/player/track.ts
index f40730f..735aab3 100644
--- a/web/script/player/track.ts
+++ b/web/script/player/track.ts
@@ -23,6 +23,7 @@ export class PlayerTrack {
     private append_queue: AppendRange[] = [];
     public profile = new OVar<EncodingProfileExt | undefined>(undefined);
     public profile_selector: ProfileSelector
+    public abort = new AbortController()
 
     public static async new(player: Player, node_id: string, track_index: number, metadata: SourceTrack): Promise<PlayerTrack | undefined> {
         try {
@@ -56,8 +57,13 @@ export class PlayerTrack {
         const ct = track_to_content_type(this.track_from_profile())!
         console.log(`track ${this.track_index} source buffer content-type: ${ct}`);
         this.source_buffer = this.player.media_source.addSourceBuffer(ct);
+        this.abort.signal.addEventListener("abort", () => {
+            console.log(`destroy source buffer for track ${this.track_index}`);
+            this.player.media_source.removeSourceBuffer(this.source_buffer)
+        })
         this.source_buffer.mode = "segments";
         this.source_buffer.addEventListener("updateend", () => {
+            if (this.abort.signal.aborted) return
             if (this.current_load) {
                 this.current_load.cb();
                 this.loading.delete(this.current_load.index);
@@ -73,11 +79,6 @@ export class PlayerTrack {
             console.error("sourcebuffer abort", e);
         });
     }
-    destroy() {
-        console.log(`destroy source buffer for track ${this.track_index}`);
-        this.player.media_source.removeSourceBuffer(this.source_buffer)
-    }
-
     track_from_profile(): SourceTrack {
         if (this.profile.value) return profile_to_partial_track(this.profile.value)
         else return this.metadata
@@ -128,6 +129,7 @@ export class PlayerTrack {
         const url = `/n/${encodeURIComponent(this.node_id)}/stream?format=snippet&webm=true&tracks=${this.track_index}&index=${index}${this.profile.value ? `&profile=${this.profile.value.id}` : ""}`;
         const buf = await this.player.downloader.download(url);
         await new Promise<void>(cb => {
+            if (this.abort.signal.aborted) return
             this.append_queue.push({ buf, ...this.index.segments[index], index, cb });
             this.tick_append();
         });