feat(player): thumbnails now support json

mihar-22 · mihar-22 · commit 16bdd0db85cf · 2023-10-30T13:57:46.000+11:00
diff --git a/packages/vidstack/src/components/ui/thumbnails/thumbnail-loader.ts b/packages/vidstack/src/components/ui/thumbnails/thumbnail-loader.ts
@@ -1,8 +1,8 @@
 import { effect, onDispose, peek, signal, type ReadSignal } from 'maverick.js';
-import { noop } from 'maverick.js/std';
 import type { VTTCue } from 'media-captions';
 
 import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
+import { parseJSONCaptionsFile } from '../../../core/tracks/text/text-track';
 import { getRequestCredentials } from '../../../utils/network';
 
 const cache = new Map<string, VTTCue[]>(),
@@ -12,9 +12,9 @@ const cache = new Map<string, VTTCue[]>(),
 export class ThumbnailsLoader {
   readonly $cues = signal<VTTCue[]>([]);
 
-  static create(src: ReadSignal<string>) {
+  static create($src: ReadSignal<string>) {
     const media = useMediaContext();
-    return new ThumbnailsLoader(src, media);
+    return new ThumbnailsLoader($src, media);
   }
 
   constructor(
@@ -52,24 +52,30 @@ export class ThumbnailsLoader {
       this.$cues.set(cache.get(src)!);
     } else if (!pending.has(src)) {
       pending.add(src);
-      import('media-captions').then(({ parseResponse }) => {
-        parseResponse(
-          fetch(src, {
-            signal: controller.signal,
-            credentials: getRequestCredentials(crossorigin()),
-          }),
-        )
-          .then(({ cues }) => {
-            this.$cues.set(cues);
-
-            for (const t of registry) {
-              if (peek(t.$src) === src) t.$cues.set(cues);
+      import('media-captions').then(async ({ parseResponse }) => {
+        try {
+          const response = await fetch(src, {
+              signal: controller.signal,
+              credentials: getRequestCredentials(crossorigin()),
+            }),
+            isJSON = response.headers.get('content-type') === 'application/json';
+
+          if (isJSON) {
+            try {
+              const { cues } = parseJSONCaptionsFile(await response.text(), window.VTTCue);
+              this._updateCues(src, cues);
+            } catch (e) {
+              // no-op
             }
 
-            cache.set(src, cues);
-            pending.delete(src);
-          })
-          .catch(noop);
+            return;
+          }
+
+          const { cues } = await parseResponse(response);
+          this._updateCues(src, cues);
+        } catch (e) {
+          // no-op
+        }
       });
     }
 
@@ -78,4 +84,15 @@ export class ThumbnailsLoader {
       this.$cues.set([]);
     };
   }
+
+  private _updateCues(currentSrc: string, cues: VTTCue[]) {
+    this.$cues.set(cues);
+
+    for (const t of registry) {
+      if (peek(t.$src) === currentSrc) t.$cues.set(cues);
+    }
+
+    cache.set(currentSrc, cues);
+    pending.delete(currentSrc);
+  }
 }
diff --git a/packages/vidstack/src/core/tracks/text/text-track.ts b/packages/vidstack/src/core/tracks/text/text-track.ts
@@ -1,4 +1,4 @@
-import { DOMEvent, EventsTarget, isNumber } from 'maverick.js/std';
+import { DOMEvent, EventsTarget, isArray, isNumber } from 'maverick.js/std';
 import type {
   CaptionsFileFormat,
   CaptionsParserFactory,
@@ -264,17 +264,9 @@ export class TextTrack extends EventsTarget<TextTrackEvents> {
 
   private _parseJSON(json, VTTCue, VTTRegion) {
     try {
-      json = JSON.parse(json);
-
-      if (json.regions) {
-        this._regions = json.regions.map((json) => Object.assign(new VTTRegion(), json));
-      }
-
-      if (json.cues) {
-        this._cues = json.cues
-          .filter((json) => isNumber(json.startTime) && isNumber(json.endTime))
-          .map((json) => Object.assign(new VTTCue(0, 0, ''), json));
-      }
+      const { regions, cues } = parseJSONCaptionsFile(json, VTTCue, VTTRegion);
+      this._regions = regions;
+      this._cues = cues;
     } catch (error) {
       if (__DEV__) {
         console.error(`[vidstack] failed to parse JSON captions at: \`${this.src}\`\n\n`, error);
@@ -405,3 +397,22 @@ const captionRE = /captions|subtitles/;
 export function isTrackCaptionKind(track: TextTrack): boolean {
   return captionRE.test(track.kind);
 }
+
+export function parseJSONCaptionsFile(json: string, Cue: typeof VTTCue, Region?: typeof VTTRegion) {
+  const content = JSON.parse(json);
+
+  let regions: VTTRegion[] = [],
+    cues: VTTCue[] = [];
+
+  if (content.regions && Region) {
+    regions = content.regions.map((region) => Object.assign(new Region(), region));
+  }
+
+  if (content.cues || isArray(content)) {
+    cues = (isArray(content) ? content : content.cues)
+      .filter((content) => isNumber(content.startTime) && isNumber(content.endTime))
+      .map((cue) => Object.assign(new Cue(0, 0, ''), cue));
+  }
+
+  return { regions, cues };
+}
