make track creation instant

1 files changed, 28 insertions, 24 deletions

diff --git a/web/script/player/track/vtt.ts b/web/script/player/track/vtt.ts
index efdafe0..4dddbc7 100644
--- a/web/script/player/track/vtt.ts
+++ b/web/script/player/track/vtt.ts
@@ -2,40 +2,26 @@ import { SourceTrack, JvttCue } from "../jhls.d.ts";
 import { Player } from "../player.ts";
 import { PlayerTrack } from "./mod.ts";
 
-export async function create_vtt_track(player: Player, node_id: string, track_index: number, metadata: SourceTrack): Promise<VttPlayerTrack | undefined> {
-  let index: JvttCue[];
-  try {
-    const res = await fetch(`/n/${encodeURIComponent(player.node_id)}/stream?format=jvtt&tracks=${track_index}`, { headers: { "Accept": "application/json" } });
-    if (!res.ok) return player.error.value = "Cannot download index.", undefined;
-    let ai!: JvttCue[] & { error: string; };
-    try { ai = await res.json(); }
-    catch (_) { player.set_pers("Error: Failed to fetch node"); }
-    if (ai.error) return player.set_pers("server error: " + ai.error), undefined;
-    index = ai;
-  } catch (e) {
-    if (e instanceof TypeError) {
-      player.set_pers("Cannot download subtitles: Network Error");
-      return undefined
-    } else throw e;
-  }
-  const t = new VttPlayerTrack(player, node_id, track_index, metadata, index);
-  return t;
-}
-
 export class VttPlayerTrack extends PlayerTrack {
   private track: TextTrack;
+  public cues?: JvttCue[]
 
   constructor(
     private player: Player,
     private node_id: string,
     track_index: number,
     private metadata: SourceTrack,
-    public cues: JvttCue[]
   ) {
     super(track_index);
-    this.buffered.value = [{ start: 0, end: player.duration.value, status: "buffered" }]
-    this.track = this.player.video.addTextTrack("subtitles", metadata.name, metadata.language);
-    for (const cue of cues) {
+    this.track = this.player.video.addTextTrack("subtitles", this.metadata.name, this.metadata.language);
+    this.buffered.value = [{ start: 0, end: this.player.duration.value, status: "loading" }]
+    this.init()
+  }
+
+  private on_ready() {
+    if (!this.cues) return
+    this.buffered.value = [{ start: 0, end: this.player.duration.value, status: "buffered" }]
+    for (const cue of this.cues) {
       this.track.addCue(create_cue(cue));
     }
     this.track.mode = "showing";
@@ -44,6 +30,24 @@ export class VttPlayerTrack extends PlayerTrack {
       this.track.mode = "hidden";
     });
   }
+
+  async init() {
+    try {
+      const res = await fetch(`/n/${encodeURIComponent(this.node_id)}/stream?format=jvtt&tracks=${this.track_index}`, { headers: { "Accept": "application/json" } });
+      if (!res.ok) return this.player.error.value = "Cannot download index.", undefined;
+      let ai!: JvttCue[] & { error: string; };
+      try { ai = await res.json(); }
+      catch (_) { this.player.set_pers("Error: Failed to fetch node"); }
+      if (ai.error) return this.player.set_pers("server error: " + ai.error), undefined;
+      this.cues = ai;
+    } catch (e) {
+      if (e instanceof TypeError) {
+        this.player.set_pers("Cannot download subtitles: Network Error");
+        return undefined
+      } else throw e;
+    }
+    this.on_ready()
+  }
 }
 
 function create_cue(cue: JvttCue): VTTCue {