@hanifhan1f/vidstack 1.12.13

package/src/exports/components.ts

@@ -0,0 +1,79 @@
+export * from '../components/player';
+export * from '../components/provider/provider';
+export * from '../components/aria/announcer';
+
+// Controls
+export * from '../components/ui/controls';
+export * from '../components/ui/controls-group';
+
+// Buttons
+export * from '../components/ui/tooltip/tooltip';
+export * from '../components/ui/tooltip/tooltip-trigger';
+export * from '../components/ui/tooltip/tooltip-content';
+export * from '../components/ui/buttons/toggle-button';
+export * from '../components/ui/buttons/airplay-button';
+export * from '../components/ui/buttons/google-cast-button';
+export * from '../components/ui/buttons/play-button';
+export * from '../components/ui/buttons/caption-button';
+export * from '../components/ui/buttons/fullscreen-button';
+export * from '../components/ui/buttons/mute-button';
+export * from '../components/ui/buttons/pip-button';
+export * from '../components/ui/buttons/seek-button';
+export * from '../components/ui/buttons/live-button';
+
+// Slider
+export type * from '../components/ui/sliders/slider/api/events';
+export type * from '../components/ui/sliders/slider/api/cssvars';
+export * from '../components/ui/sliders/slider/api/state';
+export * from '../components/ui/sliders/slider/slider';
+export * from '../components/ui/sliders/slider/slider-controller';
+export * from '../components/ui/sliders/slider/types';
+export * from '../components/ui/sliders/slider-thumbnail';
+export * from '../components/ui/sliders/slider-video';
+export * from '../components/ui/sliders/slider-value';
+export * from '../components/ui/sliders/slider-preview';
+export * from '../components/ui/sliders/volume-slider';
+export * from '../components/ui/sliders/audio-gain-slider';
+export * from '../components/ui/sliders/speed-slider';
+export * from '../components/ui/sliders/quality-slider';
+export * from '../components/ui/sliders/time-slider/time-slider';
+export * from '../components/ui/sliders/time-slider/slider-chapters';
+export { sliderContext, type SliderContext } from '../components/ui/sliders/slider/slider-context';
+
+// Menu
+export * from '../components/ui/menu/menu';
+export * from '../components/ui/menu/menu-button';
+export * from '../components/ui/menu/menu-item';
+export * from '../components/ui/menu/menu-portal';
+export * from '../components/ui/menu/menu-items';
+export * from '../components/ui/menu/radio/radio-group';
+export * from '../components/ui/menu/radio/radio';
+export * from '../components/ui/menu/radio-groups/chapters-radio-group';
+export * from '../components/ui/menu/radio-groups/audio-radio-group';
+export * from '../components/ui/menu/radio-groups/audio-gain-radio-group';
+export * from '../components/ui/menu/radio-groups/captions-radio-group';
+export * from '../components/ui/menu/radio-groups/speed-radio-group';
+export * from '../components/ui/menu/radio-groups/quality-radio-group';
+
+// Media UI
+export * from '../components/ui/gesture';
+
+// Display
+export * from '../components/ui/captions/captions';
+export * from '../components/ui/poster';
+export * from '../components/ui/time';
+export * from '../components/ui/thumbnails/thumbnail';
+export * from '../components/ui/thumbnails/thumbnail-loader';
+
+// Layouts
+export type { DefaultLayoutProps } from '../components/layouts/default/props';
+export type {
+  DefaultLayoutWord,
+  DefaultLayoutTranslations,
+} from '../components/layouts/default/translations';
+export type { PlyrLayoutProps, PlyrMarker, PlyrControl } from '../components/layouts/plyr/props';
+export type {
+  PlyrLayoutWord,
+  PlyrLayoutTranslations,
+} from '../components/layouts/plyr/translations';
+export { usePlyrLayoutClasses } from '../components/layouts/plyr/plyr-layout';

package/src/exports/core.ts

@@ -0,0 +1,41 @@
+// API
+export type * from '../core/api/media-events';
+export type * from '../core/api/media-request-events';
+export type * from '../core/api/types';
+export * from '../core/api/src-types';
+export * from '../core/api/player-state';
+export * from '../core/api/player-events';
+export { type MediaContext, mediaContext } from '../core/api/media-context';
+export type { MediaPlayerProps, MediaStateAccessors, PlayerSrc } from '../core/api/player-props';
+
+// State
+export { MediaRemoteControl } from '../core/state/remote-control';
+export {
+  type MediaStorage,
+  LocalMediaStorage,
+  type SerializedVideoQuality,
+} from '../core/state/media-storage';
+
+// Tracks
+export * from '../core/tracks/audio/audio-tracks';
+export * from '../core/tracks/text/render/libass-text-renderer';
+export * from '../core/tracks/text/render/text-renderer';
+export * from '../core/tracks/text/text-track';
+export * from '../core/tracks/text/text-tracks';
+export * from '../core/tracks/text/utils';
+export type * from '../core/tracks/audio/events';
+export type * from '../core/tracks/text/events';
+
+// Quality
+export * from '../core/quality/video-quality';
+export type * from '../core/quality/events';
+export * from '../core/quality/utils';
+
+// Keyboard
+export type * from '../core/keyboard/types';
+export { MEDIA_KEY_SHORTCUTS } from '../core/keyboard/controller';
+export { ARIAKeyShortcuts } from '../core/keyboard/aria-shortcuts';
+
+// Misc
+export * from '../core/time-ranges';
+export { MediaControls } from '../core/controls';

package/src/exports/events.ts

@@ -0,0 +1,46 @@
+export type * from '../core/api/media-events';
+export type * from '../core/api/media-request-events';
+export type * from '../core/api/player-events';
+export type * from '../core/tracks/audio/events';
+export type * from '../core/tracks/text/events';
+export type * from '../core/quality/events';
+
+export type * from '../foundation/fullscreen/events';
+export type * from '../foundation/logger/events';
+export type * from '../foundation/orientation/events';
+
+export type * from '../providers/hls/events';
+export type * from '../providers/dash/events';
+export type * from '../providers/google-cast/events';
+export type * from '../providers/video/presentation/events';
+
+export type * from '../components/ui/sliders/slider/api/events';
+
+export type { AirPlayButtonEvents } from '../components/ui/buttons/airplay-button';
+export type { AudioGainSliderEvents } from '../components/ui/sliders/audio-gain-slider';
+export type { CaptionButtonEvents } from '../components/ui/buttons/caption-button';
+export type { ControlsEvents, ControlsChangeEvent } from '../components/ui/controls';
+export type { FullscreenButtonEvents } from '../components/ui/buttons/fullscreen-button';
+export type {
+  GestureEvent,
+  GestureEventType,
+  GestureEvents,
+  GestureTriggerEvent,
+  GestureWillTriggerEvent,
+} from '../components/ui/gesture';
+export type { GoogleCastButtonEvents } from '../components/ui/buttons/google-cast-button';
+export type { MediaAnnouncerEvents } from '../components/aria/announcer';
+export type { MuteButtonEvents } from '../components/ui/buttons/mute-button';
+export type { PIPButtonEvents } from '../components/ui/buttons/pip-button';
+export type { PlayButtonEvents } from '../components/ui/buttons/play-button';
+export type { QualitySliderEvents } from '../components/ui/sliders/quality-slider';
+export type { RadioChangeEvent, RadioSelectEvent } from '../components/ui/menu/radio/radio';
+export type { SeekButtonEvents } from '../components/ui/buttons/seek-button';
+export type {
+  SliderVideoEvents,
+  SliderVideoErrorEvent,
+  SliderVideoCanPlayEvent,
+} from '../components/ui/sliders/slider-video';
+export type { SpeedSliderEvents } from '../components/ui/sliders/speed-slider';
+export type { TimeSliderEvents } from '../components/ui/sliders/time-slider/time-slider';
+export type { VolumeSliderEvents } from '../components/ui/sliders/volume-slider';

package/src/exports/font.ts

@@ -0,0 +1,3 @@
+// Font
+export * from '../core/font/font-options';
+export { updateFontCssVars } from '../core/font/font-vars';

package/src/exports/foundation.ts

@@ -0,0 +1,8 @@
+export { Logger } from '../foundation/logger/controller';
+export * from '../foundation/list/list';
+export * from '../foundation/fullscreen/controller';
+export * from '../foundation/fullscreen/events';
+export * from '../foundation/logger/events';
+export * from '../foundation/orientation/controller';
+export * from '../foundation/orientation/events';
+export * from '../foundation/orientation/types';

package/src/exports/maverick.ts

@@ -0,0 +1,9 @@
+export {
+  hasTriggerEvent,
+  walkTriggerEventChain,
+  findTriggerEvent,
+  appendTriggerEvent,
+  isPointerEvent,
+  isKeyboardClick,
+  isKeyboardEvent,
+} from 'maverick.js/std';

package/src/exports/providers.ts

@@ -0,0 +1,42 @@
+export type {
+  AnyMediaProvider,
+  MediaProviderAdapter,
+  MediaFullscreenAdapter,
+  MediaProviderLoader,
+} from '../providers/types';
+
+export * from '../providers/type-check';
+
+// Audio
+export { AudioProviderLoader } from '../providers/audio/loader';
+export type { AudioProvider } from '../providers/audio/provider';
+
+// Video
+export type * from '../providers/video/presentation/events';
+export { VideoProviderLoader } from '../providers/video/loader';
+export type { VideoProvider } from '../providers/video/provider';
+
+// HLS
+export type * from '../providers/hls/events';
+export type * from '../providers/hls/types';
+export type { HLSProvider } from '../providers/hls/provider';
+export { HLSProviderLoader } from '../providers/hls/loader';
+
+// DASH
+export type * from '../providers/dash/events';
+export type * from '../providers/dash/types';
+export { DASHProviderLoader } from '../providers/dash/loader';
+export type { DASHProvider } from '../providers/dash/provider';
+
+// Google Cast
+export type { GoogleCastLoader } from '../providers/google-cast/loader';
+export type { GoogleCastProvider } from '../providers/google-cast/provider';
+export type * from '../providers/google-cast/events';
+
+// Vimeo
+export { VimeoProviderLoader } from '../providers/vimeo/loader';
+export type { VimeoProvider } from '../providers/vimeo/provider';
+
+// YouTube
+export { YouTubeProviderLoader } from '../providers/youtube/loader';
+export type { YouTubeProvider } from '../providers/youtube/provider';

package/src/exports/utils.ts

@@ -0,0 +1,18 @@
+// Network
+export { getDownloadFile, type FileDownloadInfo } from '../utils/network';
+
+// Time
+export { formatTime, formatSpokenTime } from '../utils/time';
+
+// MIME
+export * from '../utils/mime';
+
+// Support
+export {
+  canChangeVolume,
+  canOrientScreen,
+  canPlayHLSNatively,
+  canUsePictureInPicture,
+  canUseVideoPresentation,
+  canRotateScreen,
+} from '../utils/support';

package/src/foundation/fullscreen/controller.ts

@@ -0,0 +1,128 @@
+import fscreen from 'fscreen';
+import { onDispose, ViewController } from 'maverick.js';
+import { EventsController, listenEvent } from 'maverick.js/std';
+
+import type { FullscreenEvents } from './events';
+
+const CAN_FULLSCREEN = fscreen.fullscreenEnabled;
+
+export class FullscreenController
+  extends ViewController<{}, {}, FullscreenEvents>
+  implements FullscreenAdapter
+{
+  /**
+   * Tracks whether we're the active fullscreen event listener. Fullscreen events can only be
+   * listened to globally on the document so we need to know if they relate to the current host
+   * element or not.
+   */
+  #listening = false;
+
+  #active = false;
+
+  get active() {
+    return this.#active;
+  }
+
+  get supported() {
+    return CAN_FULLSCREEN;
+  }
+
+  protected override onConnect() {
+    new EventsController(fscreen as unknown as EventTarget)
+      .add('fullscreenchange', this.#onChange.bind(this))
+      .add('fullscreenerror', this.#onError.bind(this));
+
+    onDispose(this.#onDisconnect.bind(this));
+  }
+
+  async #onDisconnect() {
+    if (CAN_FULLSCREEN) await this.exit();
+  }
+
+  #onChange(event: Event) {
+    const active = isFullscreen(this.el);
+    if (active === this.#active) return;
+    if (!active) this.#listening = false;
+    this.#active = active;
+    this.dispatch('fullscreen-change', { detail: active, trigger: event });
+  }
+
+  #onError(event: Event) {
+    if (!this.#listening) return;
+    this.dispatch('fullscreen-error', { detail: null, trigger: event });
+    this.#listening = false;
+  }
+
+  async enter() {
+    try {
+      this.#listening = true;
+      if (!this.el || isFullscreen(this.el)) return;
+      assertFullscreenAPI();
+      return fscreen.requestFullscreen(this.el);
+    } catch (error) {
+      this.#listening = false;
+      throw error;
+    }
+  }
+
+  async exit() {
+    if (!this.el || !isFullscreen(this.el)) return;
+    assertFullscreenAPI();
+    return fscreen.exitFullscreen();
+  }
+}
+
+export function canFullscreen(): boolean {
+  return CAN_FULLSCREEN;
+}
+
+function isFullscreen(host?: HTMLElement | null): boolean {
+  if (fscreen.fullscreenElement === host) return true;
+  try {
+    // Throws in iOS Safari...
+    return host!.matches(
+      // @ts-expect-error - `fullscreenPseudoClass` is missing from `@types/fscreen`.
+      fscreen.fullscreenPseudoClass,
+    );
+  } catch (error) {
+    return false;
+  }
+}
+
+function assertFullscreenAPI() {
+  if (CAN_FULLSCREEN) return;
+  throw Error(
+    __DEV__
+      ? '[vidstack] fullscreen API is not enabled or supported in this environment'
+      : '[vidstack] no fullscreen API',
+  );
+}
+
+export interface FullscreenAdapter {
+  /**
+   * Whether the host element is in fullscreen mode.
+   */
+  readonly active: boolean;
+  /**
+   * Whether the native browser fullscreen API is available, or the current provider can
+   * toggle fullscreen mode. This does not mean that the operation is guaranteed to be successful,
+   * only that it can be attempted.
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API}
+   */
+  readonly supported: boolean;
+  /**
+   * Request to display the current host element in fullscreen.
+   *
+   * @throws Error - if fullscreen API is not available.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen}
+   */
+  enter(): Promise<void>;
+  /**
+   * Attempt to exit fullscreen on the current host element.
+   *
+   * @throws Error - if fullscreen API is not available.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen}
+   */
+  exit(): Promise<void>;
+}

package/src/foundation/fullscreen/events.ts

@@ -0,0 +1,26 @@
+import type { DOMEvent } from 'maverick.js/std';
+
+export interface FullscreenEvents {
+  'fullscreen-change': FullscreenChangeEvent;
+  'fullscreen-error': FullscreenErrorEvent;
+}
+
+/**
+ * Fired when an element enters/exits fullscreen. The event detail is a `boolean` indicating
+ * if fullscreen was entered (`true`) or exited (`false`).
+ *
+ * @bubbles
+ * @composed
+ * @detail isFullscreen
+ */
+export interface FullscreenChangeEvent extends DOMEvent<boolean> {}
+
+/**
+ * Fired when an error occurs either entering or exiting fullscreen. This will generally occur
+ * if the user has not interacted with the page yet.
+ *
+ * @bubbles
+ * @composed
+ * @detail error
+ */
+export interface FullscreenErrorEvent extends DOMEvent<unknown> {}

package/src/foundation/list/list.ts

@@ -0,0 +1,127 @@
+import { DOMEvent, EventsTarget } from 'maverick.js/std';
+
+import { ListSymbol } from './symbols';
+
+export interface ListItem {
+  id: string;
+}
+
+export class List<Item extends ListItem, Events extends ListEvents>
+  extends EventsTarget<Events>
+  implements Iterable<Item>
+{
+  [index: number]: Item | undefined;
+
+  protected items: Item[] = [];
+
+  /** @internal */
+  protected [ListSymbol.readonly] = false;
+  /** @internal */
+  protected [ListSymbol.onReset]?(trigger?: Event): void;
+  /** @internal */
+  protected [ListSymbol.onRemove]?(item: Item, trigger?: Event): void;
+
+  get length() {
+    return this.items.length;
+  }
+
+  get readonly() {
+    return this[ListSymbol.readonly];
+  }
+
+  /**
+   * Returns the index of the first occurrence of the given item, or -1 if it is not present.
+   */
+  indexOf(item: Item) {
+    return this.items.indexOf(item);
+  }
+
+  /**
+   * Returns an item matching the given `id`, or `null` if not present.
+   */
+  getById(id: string): Item | null {
+    if (id === '') return null;
+    return this.items.find((item) => item.id === id) ?? null;
+  }
+
+  /**
+   * Transform list to an array.
+   */
+  toArray(): Item[] {
+    return [...this.items];
+  }
+
+  [Symbol.iterator]() {
+    return this.items.values();
+  }
+
+  /** @internal */
+  [ListSymbol.add](item: Item, trigger?: Event): void {
+    const index = this.items.length;
+
+    if (!('' + index in this)) {
+      Object.defineProperty(this, index, {
+        get() {
+          return this.items[index];
+        },
+      });
+    }
+
+    if (this.items.includes(item as Item)) return;
+
+    this.items.push(item as Item);
+    this.dispatchEvent(new DOMEvent<any>('add', { detail: item, trigger }));
+  }
+
+  /** @internal */
+  [ListSymbol.remove](item: Item, trigger?: Event): void {
+    const index = this.items.indexOf(item);
+    if (index >= 0) {
+      this[ListSymbol.onRemove]?.(item, trigger);
+      this.items.splice(index, 1);
+      this.dispatchEvent(new DOMEvent<any>('remove', { detail: item, trigger }));
+    }
+  }
+
+  /** @internal */
+  [ListSymbol.reset](trigger?: Event): void {
+    for (const item of [...this.items]) this[ListSymbol.remove](item, trigger);
+    this.items = [];
+    this[ListSymbol.setReadonly](false, trigger);
+    this[ListSymbol.onReset]?.();
+  }
+
+  /** @internal */
+  [ListSymbol.setReadonly](readonly: boolean, trigger?: Event) {
+    if (this[ListSymbol.readonly] === readonly) return;
+    this[ListSymbol.readonly] = readonly;
+    this.dispatchEvent(new DOMEvent<any>('readonly-change', { detail: readonly, trigger }));
+  }
+}
+
+export interface ListEvents<Item extends ListItem = ListItem> {
+  add: ListAddEvent<Item>;
+  remove: ListRemoveEvent<Item>;
+  'readonly-change': ListReadonlyChangeEvent;
+}
+
+/**
+ * Fired when an item has been added to the list.
+ *
+ * @detail item
+ */
+export interface ListAddEvent<Item extends ListItem> extends DOMEvent<Item> {}
+
+/**
+ * Fired when an item has been removed from the list.
+ *
+ * @detail item
+ */
+export interface ListRemoveEvent<Item extends ListItem> extends DOMEvent<Item> {}
+
+/**
+ * Fired when the readonly state of the list has changed.
+ *
+ * @detail isReadonly
+ */
+export interface ListReadonlyChangeEvent extends DOMEvent<boolean> {}

package/src/foundation/list/select-list.ts

@@ -0,0 +1,86 @@
+import { DOMEvent } from 'maverick.js/std';
+
+import { List, type ListEvents, type ListItem } from './list';
+import { ListSymbol } from './symbols';
+
+const SELECTED = Symbol(__DEV__ ? 'SELECTED' : 0);
+
+export interface SelectListItem extends ListItem {
+  selected: boolean;
+}
+
+export class SelectList<
+  Item extends SelectListItem,
+  Events extends SelectListEvents<Item>,
+> extends List<Item, Events> {
+  get selected() {
+    return this.items.find((item) => item.selected) ?? null;
+  }
+
+  get selectedIndex() {
+    return this.items.findIndex((item) => item.selected);
+  }
+
+  /** @internal */
+  protected override [ListSymbol.onRemove](item: Item, trigger?: Event): void {
+    this[ListSymbol.select](item, false, trigger);
+  }
+
+  /** @internal */
+  protected [ListSymbol.onUserSelect]?(): void;
+
+  /** @internal */
+  override [ListSymbol.add](item: Omit<Item, 'selected'>, trigger?: Event) {
+    item[SELECTED] = false;
+    Object.defineProperty(item, 'selected', {
+      get() {
+        return this[SELECTED]!;
+      },
+      set: (selected: boolean) => {
+        if (this.readonly) return;
+        this[ListSymbol.onUserSelect]?.();
+        this[ListSymbol.select](item as Item, selected);
+      },
+    });
+
+    super[ListSymbol.add](item as Item, trigger);
+  }
+
+  /** @internal */
+  [ListSymbol.select](item: Item | undefined, selected: boolean, trigger?: Event) {
+    if (selected === item?.[SELECTED]) return;
+
+    const prev = this.selected;
+    if (item) item[SELECTED] = selected;
+
+    const changed = !selected ? prev === item : prev !== item;
+    if (changed) {
+      if (prev) prev[SELECTED] = false;
+      this.dispatchEvent(
+        new DOMEvent<SelectListChangeEventDetail<Item>>('change', {
+          detail: {
+            prev,
+            current: this.selected,
+          },
+          trigger,
+        }),
+      );
+    }
+  }
+}
+
+export interface SelectListEvents<Item extends SelectListItem = SelectListItem>
+  extends ListEvents<Item> {
+  change: SelectListChangeEvent<Item>;
+}
+
+/**
+ * @detail change
+ */
+export interface SelectListChangeEvent<Item extends SelectListItem>
+  extends DOMEvent<SelectListChangeEventDetail<Item>> {}
+
+export interface SelectListChangeEventDetail<Item extends SelectListItem> {
+  prev: Item | null;
+  current: Item | null;
+}

package/src/foundation/list/symbols.ts

@@ -0,0 +1,22 @@
+const ADD = Symbol(__DEV__ ? 'LIST_ADD' : 0),
+  REMOVE = Symbol(__DEV__ ? 'LIST_REMOVE' : 0),
+  RESET = Symbol(__DEV__ ? 'LIST_RESET' : 0),
+  SELECT = Symbol(__DEV__ ? 'LIST_SELECT' : 0),
+  READONLY = Symbol(__DEV__ ? 'LIST_READONLY' : 0),
+  SET_READONLY = Symbol(__DEV__ ? 'LIST_SET_READONLY' : 0),
+  ON_RESET = Symbol(__DEV__ ? 'LIST_ON_RESET' : 0),
+  ON_REMOVE = Symbol(__DEV__ ? 'LIST_ON_REMOVE' : 0),
+  ON_USER_SELECT = Symbol(__DEV__ ? 'LIST_ON_USER_SELECT' : 0);
+
+/** @internal */
+export const ListSymbol = {
+  add: ADD,
+  remove: REMOVE,
+  reset: RESET,
+  select: SELECT,
+  readonly: READONLY,
+  setReadonly: SET_READONLY,
+  onReset: ON_RESET,
+  onRemove: ON_REMOVE,
+  onUserSelect: ON_USER_SELECT,
+} as const;

package/src/foundation/logger/colors.ts

@@ -0,0 +1,33 @@
+const LOCAL_STORAGE_KEY = '@vidstack/log-colors';
+
+const savedColors = init();
+
+export function getLogColor(key: string): string | undefined {
+  return savedColors.get(key);
+}
+
+export function saveLogColor(key: string, { color = generateColor(), overwrite = false } = {}) {
+  if (!__DEV__) return;
+  if (!savedColors.has(key) || overwrite) {
+    savedColors.set(key, color);
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(Object.entries(savedColors)));
+  }
+}
+
+function generateColor() {
+  return `hsl(${Math.random() * 360}, 55%, 70%)`;
+}
+
+function init(): Map<string, string> {
+  if (!__DEV__) return new Map();
+
+  let colors;
+
+  try {
+    colors = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)!);
+  } catch {
+    // no-op
+  }
+
+  return new Map(Object.entries(colors ?? {}));
+}