track select ui in jsp-

1 files changed, 7 insertions, 5 deletions

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();
         });