@hanifhan1f/vidstack 1.12.13

package/src/core/time-ranges.ts

@@ -0,0 +1,130 @@
+/**
+ * @see https://github.com/videojs/video.js/blob/main/src/js/utils/time-ranges.js
+ */
+import { isArray, isNumber, isUndefined } from 'maverick.js/std';
+
+export type TimeInterval = [start: number, end: number];
+
+export class TimeRange implements TimeRanges {
+  readonly #ranges: TimeInterval[];
+
+  get length() {
+    return this.#ranges.length;
+  }
+
+  constructor(start?: number | TimeInterval[], end?: number) {
+    if (isArray(start)) {
+      this.#ranges = start;
+    } else if (!isUndefined(start) && !isUndefined(end)) {
+      this.#ranges = [[start, end]];
+    } else {
+      this.#ranges = [];
+    }
+  }
+
+  start(index: number): number {
+    if (__DEV__) throwIfEmpty(this.#ranges.length);
+    if (__DEV__) throwIfOutOfRange('start', index, this.#ranges.length - 1);
+    return this.#ranges[index][0] ?? Infinity;
+  }
+
+  end(index: number): number {
+    if (__DEV__) throwIfEmpty(this.#ranges.length);
+    if (__DEV__) throwIfOutOfRange('end', index, this.#ranges.length - 1);
+    return this.#ranges[index][1] ?? Infinity;
+  }
+}
+
+export function getTimeRangesStart(range: TimeRanges) {
+  if (!range.length) return null;
+
+  let min = range.start(0);
+
+  for (let i = 1; i < range.length; i++) {
+    const value = range.start(i);
+    if (value < min) min = value;
+  }
+
+  return min;
+}
+
+export function getTimeRangesEnd(range: TimeRanges) {
+  if (!range.length) return null;
+
+  let max = range.end(0);
+
+  for (let i = 1; i < range.length; i++) {
+    const value = range.end(i);
+    if (value > max) max = value;
+  }
+
+  return max;
+}
+
+function throwIfEmpty(length: number) {
+  if (!__DEV__) return;
+  if (!length) throw new Error(__DEV__ ? '`TimeRanges` object is empty.' : 'empty');
+}
+
+function throwIfOutOfRange(fnName: 'start' | 'end', index: number, end: number) {
+  if (!__DEV__) return;
+  if (!isNumber(index) || index < 0 || index > end) {
+    throw new Error(
+      `Failed to execute '${fnName}' on 'TimeRanges': The index provided (${index}) is non-numeric or out of bounds (0-${end}).`,
+    );
+  }
+}
+
+export function normalizeTimeIntervals(intervals: TimeInterval[]): TimeInterval[] {
+  if (intervals.length <= 1) {
+    return intervals;
+  }
+
+  // Sort intervals based on the starting time.
+  intervals.sort((a, b) => a[0] - b[0]);
+
+  let normalized: TimeInterval[] = [],
+    current: TimeInterval = intervals[0];
+
+  for (let i = 1; i < intervals.length; i++) {
+    const next = intervals[i];
+
+    // If the next interval overlaps or is adjacent, merge them.
+    if (current[1] >= next[0] - 1) {
+      current = [current[0], Math.max(current[1], next[1])];
+    } else {
+      normalized.push(current);
+      current = next;
+    }
+  }
+
+  // Push the last interval.
+  normalized.push(current);
+
+  return normalized;
+}
+
+export function updateTimeIntervals(
+  intervals: TimeInterval[],
+  interval: TimeInterval,
+  value: number,
+): TimeInterval {
+  let start = interval[0],
+    end = interval[1];
+
+  if (value < start) {
+    return [value, -1];
+  } else if (value === start) {
+    return interval;
+  } else if (start === -1) {
+    interval[0] = value;
+    return interval;
+  } else if (value > start) {
+    interval[1] = value;
+    if (end === -1) intervals.push(interval);
+  }
+
+  normalizeTimeIntervals(intervals);
+
+  return interval;
+}

package/src/core/tracks/audio/audio-tracks.ts

@@ -0,0 +1,33 @@
+import { SelectList, type SelectListItem } from '../../../foundation/list/select-list';
+import type { AudioTrackListEvents } from './events';
+
+/**
+ * @see {@link https://vidstack.io/docs/player/api/audio-tracks}
+ */
+export class AudioTrackList extends SelectList<AudioTrack, AudioTrackListEvents> {}
+
+/**
+ * @see {@link https://vidstack.io/docs/player/api/audio-tracks}
+ */
+export interface AudioTrack extends SelectListItem {
+  /**
+   * A string which uniquely identifies the track within the media.
+   */
+  readonly id: string;
+  /**
+   * A human-readable label for the track, or an empty string if unknown.
+   */
+  readonly label: string;
+  /**
+   * A string specifying the audio track's primary language, or an empty string if unknown. The
+   * language is specified as a BCP 47 (RFC 5646) language code, such as "en-US" or "pt-BR".
+   */
+  readonly language: string;
+  /**
+   * A string specifying the category into which the track falls. For example, the main audio
+   * track would have a kind of "main".
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/AudioTrack/kind}
+   */
+  readonly kind: string;
+}

package/src/core/tracks/audio/events.ts

@@ -0,0 +1,41 @@
+import type { DOMEvent } from 'maverick.js/std';
+
+import type { ListReadonlyChangeEvent } from '../../../foundation/list/list';
+import type { AudioTrack, AudioTrackList } from './audio-tracks';
+
+export interface AudioTrackListEvents {
+  add: AudioTrackAddEvent;
+  remove: AudioTrackRemoveEvent;
+  change: AudioTrackChangeEvent;
+  'readonly-change': ListReadonlyChangeEvent;
+}
+
+export interface AudioTrackListEvent<T> extends DOMEvent<T> {
+  target: AudioTrackList;
+}
+
+/**
+ * Fired when an audio track has been added to the list.
+ *
+ * @detail newTrack
+ */
+export interface AudioTrackAddEvent extends AudioTrackListEvent<AudioTrack> {}
+
+/**
+ * Fired when an audio track has been removed from the list.
+ *
+ * @detail removedTrack
+ */
+export interface AudioTrackRemoveEvent extends AudioTrackListEvent<AudioTrack> {}
+
+/**
+ * Fired when the selected audio track has changed.
+ *
+ * @detail change
+ */
+export interface AudioTrackChangeEvent extends AudioTrackListEvent<ChangeAudioTrackEventDetail> {}
+
+export interface ChangeAudioTrackEventDetail {
+  prev: AudioTrack | null;
+  current: AudioTrack;
+}

package/src/core/tracks/text/events.ts

@@ -0,0 +1,52 @@
+import type { DOMEvent } from 'maverick.js/std';
+
+import type { TextTrack } from './text-track';
+
+export interface TextTrackEvents {
+  'load-start': TextTrackLoadStartEvent;
+  load: TextTrackLoadEvent;
+  error: TextTrackErrorEvent;
+  'add-cue': TextTrackAddCueEvent;
+  'remove-cue': TextTrackRemoveCueEvent;
+  'cue-change': TextTrackCueChangeEvent;
+  'mode-change': TextTrackModeChangeEvent;
+}
+
+export interface TextTrackEvent<T> extends DOMEvent<T> {
+  target: TextTrack;
+}
+
+/**
+ * Fired when the text track begins the loading/parsing process.
+ */
+export interface TextTrackLoadStartEvent extends TextTrackEvent<void> {}
+
+/**
+ * Fired when the text track has finished loading/parsing.
+ */
+export interface TextTrackLoadEvent extends TextTrackEvent<void> {}
+
+/**
+ * Fired when loading or parsing the text track fails.
+ */
+export interface TextTrackErrorEvent extends TextTrackEvent<Error> {}
+
+/**
+ * Fired when a cue is added to the text track.
+ */
+export interface TextTrackAddCueEvent extends TextTrackEvent<VTTCue> {}
+
+/**
+ * Fired when a cue is removed from the text track.
+ */
+export interface TextTrackRemoveCueEvent extends TextTrackEvent<VTTCue> {}
+
+/**
+ * Fired when the active cues for the current text track have changed.
+ */
+export interface TextTrackCueChangeEvent extends TextTrackEvent<void> {}
+
+/**
+ * Fired when the text track mode (showing/hidden/disabled) has changed.
+ */
+export interface TextTrackModeChangeEvent extends TextTrackEvent<TextTrack> {}

package/src/core/tracks/text/render/libass-text-renderer.ts

@@ -0,0 +1,246 @@
+import { DOMEvent, EventsController, EventsTarget, isString } from 'maverick.js/std';
+
+import { TextTrackSymbol } from '../symbols';
+import type { TextTrack } from '../text-track';
+import type { TextRenderer } from './text-renderer';
+
+export class LibASSTextRenderer implements TextRenderer {
+  readonly priority = 1;
+
+  #instance: LibASSInstance | null = null;
+  #track: TextTrack | null = null;
+  #typeRE = /(ssa|ass)$/;
+
+  constructor(
+    public readonly loader: LibASSModuleLoader,
+    public config?: LibASSConfig,
+  ) {}
+
+  canRender(track: TextTrack, video: HTMLVideoElement | null): boolean {
+    return (
+      !!video &&
+      !!track.src &&
+      ((isString(track.type) && this.#typeRE.test(track.type)) || this.#typeRE.test(track.src))
+    );
+  }
+
+  attach(video: HTMLVideoElement | null) {
+    if (!video) return;
+
+    this.loader().then(async (mod) => {
+      this.#instance = new mod.default({
+        ...this.config,
+        video,
+        subUrl: this.#track?.src || '',
+      });
+
+      new EventsController(this.#instance)
+        .add('ready', () => {
+          const canvas = this.#instance?._canvas;
+          if (canvas) canvas.style.pointerEvents = 'none';
+        })
+        .add('error', (event) => {
+          if (!this.#track) return;
+          this.#track[TextTrackSymbol.readyState] = 3;
+          this.#track.dispatchEvent(
+            new DOMEvent('error', {
+              trigger: event,
+              detail: event.error,
+            }),
+          );
+        });
+    });
+  }
+
+  changeTrack(track: TextTrack | null) {
+    if (!track || track.readyState === 3) {
+      this.#freeTrack();
+    } else if (this.#track !== track) {
+      this.#instance?.setTrackByUrl(track.src!);
+      this.#track = track;
+    }
+  }
+
+  detach(): void {
+    this.#freeTrack();
+  }
+
+  #freeTrack() {
+    this.#instance?.freeTrack();
+    this.#track = null;
+  }
+}
+
+export interface LibASSModuleLoader {
+  (): Promise<{
+    default: LibASSConstructor;
+  }>;
+}
+
+export interface LibASSConstructor {
+  new (
+    config?: {
+      video: HTMLVideoElement;
+      canvas?: HTMLCanvasElement;
+      subUrl?: string;
+    } & LibASSConfig,
+  ): LibASSInstance;
+}
+
+export interface LibASSInstance extends EventsTarget<LibASSInstanceEvents> {
+  _video: HTMLVideoElement;
+  _canvas: HTMLVideoElement | null;
+  setTrackByUrl(url: string): void;
+  setCurrentTime(time: number): void;
+  freeTrack(): void;
+  destroy(): void;
+}
+
+export interface LibASSInstanceEvents {
+  ready: LibASSReadyEvent;
+  error: LibASSErrorEvent;
+}
+
+export interface LibASSReadyEvent extends Event {}
+
+export interface LibASSErrorEvent extends ErrorEvent {}
+
+/**
+ * @see {@link https://github.com/ThaUnknown/jassub/tree/main#options}
+ */
+export interface LibASSConfig {
+  /**
+   * Which image blending mode to use. WASM will perform better on lower end devices, JS will
+   * perform better if the device and browser supports hardware acceleration.
+   *
+   * @defaultValue "js"
+   */
+  blendMode?: 'js' | 'wasm';
+  /**
+   * Whether or not to use async rendering, which offloads the CPU by creating image bitmaps on
+   * the GPU.
+   *
+   * @defaultValue true
+   */
+  asyncRender?: boolean;
+  /**
+   * Whether or not to render things fully on the worker, greatly reduces CPU usage.
+   *
+   * @defaultValue true
+   */
+  offscreenRender?: boolean;
+  /**
+   * Whether or not to render subtitles as the video player renders frames, rather than predicting
+   * which frame the player is on using events.
+   *
+   * @defaultValue true
+   */
+  onDemandRender?: boolean;
+  /**
+   * Target FPS to render subtitles at. Ignored when onDemandRender is enabled.
+   *
+   * @defaultValue 24
+   */
+  targetFps?: number;
+  /**
+   * Subtitle time offset in seconds.
+   *
+   * @defaultValue 0
+   */
+  timeOffset?: number;
+  /**
+   * Whether or not to print debug information.
+   *
+   * @defaultValue false
+   */
+  debug?: boolean;
+  /**
+   * Scale down (< 1.0) the subtitles canvas to improve performance at the expense of quality, or
+   * scale it up (> 1.0).
+   *
+   * @defaultValue 1.0
+   */
+  prescaleFactor?: number;
+  /**
+   * The height in pixels beyond which the subtitles canvas won't be pre-scaled.
+   *
+   * @defaultValue 1080
+   */
+  prescaleHeightLimit?: number;
+  /**
+   * The maximum rendering height in pixels of the subtitles canvas. Beyond this subtitles will
+   * be up-scaled by the browser.
+   *
+   * @defaultValue 0
+   */
+  maxRenderHeight?: number;
+  /**
+   * Attempt to discard all animated tags. Enabling this may severely mangle complex subtitles
+   * and should only be considered as an last ditch effort of uncertain success for hardware
+   * otherwise incapable of displaying anything. Will not reliably work with manually edited or
+   * allocated events.
+   *
+   * @defaultValue false
+   */
+  dropAllAnimations?: boolean;
+  /**
+   * The URL of the worker.
+   *
+   * @defaultValue "jassub-worker.js"
+   */
+  workerUrl?: string;
+  /**
+   * The URL of the legacy worker. Only loaded if the browser doesn't support WASM.
+   *
+   * @defaultValue "jassub-worker-legacy.js"
+   */
+  legacyWorkerUrl?: string;
+  /**
+   * The URL of the subtitle file to play.
+   *
+   */
+  subUrl?: string;
+  /**
+   * The content of the subtitle file to play.
+   *
+   */
+  subContent?: string;
+  /**
+   * An array of links or `Uint8Array` to the fonts used in the subtitle. If `Uint8Array` is used
+   * the array is copied, not referenced. This forces all the fonts in this array to be loaded
+   * by the renderer, regardless of if they are used.
+   *
+   */
+  fonts?: string[] | Uint8Array[];
+  /**
+   * Object with all available fonts. Key is font family in lower case, value is link or
+   * `Uint8Array`. These fonts are selectively loaded if detected as used in the current
+   * subtitle track.
+   *
+   * @defaultValue {'liberation sans': './default.woff2'}}
+   */
+  availableFonts?: Record<string, string>;
+  /**
+   * The font family key of the fallback font in `availableFonts` to use if the other font
+   * for the style is missing special glyphs or unicode.
+   *
+   * @defaultValue "liberation sans"
+   */
+  fallbackFont?: string;
+  /**
+   * If the Local Font Access API is enabled `[chrome://flags/#font-access]`, the library will
+   * query for permissions to use local fonts and use them if any are missing. The permission can
+   * be queried beforehand using `navigator.permissions.request({ name: 'local-fonts' })`.
+   *
+   * @defaultValue true
+   */
+  useLocalFonts?: boolean;
+  /**
+   * libass bitmap cache memory limit in MiB (approximate).
+   */
+  libassMemoryLimit?: number;
+  /**
+   * libass glyph cache memory limit in MiB (approximate).
+   */
+  libassGlyphLimit?: number;
+}

package/src/core/tracks/text/render/native-text-renderer.ts

@@ -0,0 +1,106 @@
+import { isHTMLElement } from '../../../../utils/dom';
+import { TextTrackSymbol } from '../symbols';
+import type { TextTrack as VdsTextTrack } from '../text-track';
+import type { TextRenderer } from './text-renderer';
+
+export class NativeTextRenderer implements TextRenderer {
+  readonly priority = 0;
+
+  #display = true;
+  #video: HTMLVideoElement | null = null;
+  #track: VdsTextTrack | null = null;
+  #tracks = new Set<VdsTextTrack>();
+
+  canRender(_, video: HTMLVideoElement | null) {
+    return !!video;
+  }
+
+  attach(video: HTMLVideoElement | null) {
+    this.#video = video;
+    if (video) video.textTracks.onchange = this.#onChange.bind(this);
+  }
+
+  addTrack(track: VdsTextTrack): void {
+    this.#tracks.add(track);
+    this.#attachTrack(track);
+  }
+
+  removeTrack(track: VdsTextTrack): void {
+    track[TextTrackSymbol.native]?.remove?.();
+    track[TextTrackSymbol.native] = null;
+    this.#tracks.delete(track);
+  }
+
+  changeTrack(track: VdsTextTrack | null): void {
+    const current = track?.[TextTrackSymbol.native];
+
+    if (current && current.track.mode !== 'showing') {
+      current.track.mode = 'showing';
+    }
+
+    this.#track = track;
+  }
+
+  setDisplay(display: boolean) {
+    this.#display = display;
+    this.#onChange();
+  }
+
+  detach() {
+    if (this.#video) this.#video.textTracks.onchange = null;
+    for (const track of this.#tracks) this.removeTrack(track);
+    this.#tracks.clear();
+    this.#video = null;
+    this.#track = null;
+  }
+
+  #attachTrack(track: VdsTextTrack): void {
+    if (!this.#video) return;
+    const el = (track[TextTrackSymbol.native] ??= this.#createTrackElement(track));
+    if (isHTMLElement(el)) {
+      this.#video.append(el);
+      el.track.mode = el.default ? 'showing' : 'disabled';
+    }
+  }
+
+  #createTrackElement(track: VdsTextTrack): HTMLTrackElement {
+    const el = document.createElement('track'),
+      isDefault = track.default || track.mode === 'showing',
+      isSupported = track.src && track.type === 'vtt';
+
+    el.id = track.id;
+    el.src = isSupported ? track.src! : '';
+    el.label = track.label;
+    el.kind = track.kind;
+    el.default = isDefault;
+    track.language && (el.srclang = track.language);
+
+    if (isDefault && !isSupported) {
+      this.#copyCues(track, el.track);
+    }
+
+    return el;
+  }
+
+  #copyCues(track: VdsTextTrack, native: Partial<TextTrack>) {
+    if ((track.src && track.type === 'vtt') || native.cues?.length) return;
+    for (const cue of track.cues) native.addCue!(cue as any);
+  }
+
+  #onChange(event?: Event) {
+    for (const track of this.#tracks) {
+      const native = track[TextTrackSymbol.native];
+
+      if (!native) continue;
+
+      if (!this.#display) {
+        native.track.mode = native.managed ? 'hidden' : 'disabled';
+        continue;
+      }
+
+      const isShowing = native.track.mode === 'showing';
+      if (isShowing) this.#copyCues(track, native.track);
+      track.setMode(isShowing ? 'showing' : 'disabled', event);
+    }
+  }
+}