@hanifhan1f/vidstack 1.12.13

package/src/core/api/src-types.ts

@@ -0,0 +1,97 @@
+import { isNumber, isString } from 'maverick.js/std';
+import type { SetRequired } from 'type-fest';
+
+export type MediaSrc = string | AudioSrc | VideoSrc | HLSSrc | DASHSrc | YouTubeSrc | VimeoSrc;
+
+export type MediaSrcObject = MediaStream | MediaSource | Blob;
+
+export type HTMLMediaSrc = string | MediaSrcObject;
+
+export interface Src<T = unknown> {
+  src: T;
+  type: string;
+}
+
+export interface AudioSrc extends AudioSrcMeta {
+  src: HTMLMediaSrc;
+  type: AudioMimeType;
+}
+
+export type AudioMimeType =
+  | 'audio/mpeg'
+  | 'audio/ogg'
+  | 'audio/3gp'
+  | 'audio/mp3'
+  | 'audio/webm'
+  | 'audio/flac'
+  | 'audio/object';
+
+export interface AudioSrcMeta {
+  id?: string;
+  bitrate?: number;
+  channels?: number;
+}
+
+export interface VideoSrc extends VideoSrcMeta {
+  src: HTMLMediaSrc;
+  type: VideoMimeType;
+}
+
+export type VideoMimeType =
+  | 'video/mp4'
+  | 'video/webm'
+  | 'video/3gp'
+  | 'video/ogg'
+  | 'video/avi'
+  | 'video/mpeg'
+  | 'video/object';
+
+export interface VideoSrcMeta {
+  id?: string;
+  width?: number;
+  height?: number;
+  bitrate?: number;
+  framerate?: number;
+  codec?: string;
+}
+
+export interface HLSSrc {
+  src: string;
+  type: HLSMimeType;
+}
+
+export type HLSMimeType =
+  | 'application/vnd.apple.mpegurl'
+  | 'audio/mpegurl'
+  | 'audio/x-mpegurl'
+  | 'application/x-mpegurl'
+  | 'video/x-mpegurl'
+  | 'video/mpegurl'
+  | 'application/mpegurl';
+
+export interface DASHSrc {
+  src: string;
+  type: DASHMimeType;
+}
+
+export type DASHMimeType = 'application/dash+xml';
+
+export interface YouTubeSrc {
+  src: string;
+  type: 'video/youtube';
+}
+
+export interface VimeoSrc {
+  src: string;
+  type: 'video/vimeo';
+}
+
+export function isVideoQualitySrc(src: Src): src is SetRequired<VideoSrc, 'width' | 'height'> {
+  return (
+    !isString(src) &&
+    'width' in src &&
+    'height' in src &&
+    isNumber(src.width) &&
+    isNumber(src.height)
+  );
+}

package/src/core/api/types.ts

@@ -0,0 +1,69 @@
+/**
+ * The current media type.
+ */
+export type MediaType = 'unknown' | 'audio' | 'video';
+
+/**
+ * The current media stream type.
+ */
+export type MediaStreamType =
+  | 'unknown'
+  | 'on-demand'
+  | 'live'
+  | 'live:dvr'
+  | 'll-live'
+  | 'll-live:dvr';
+
+export type MediaCrossOrigin = '' | 'anonymous' | 'use-credentials';
+
+export type RemotePlaybackType = 'airplay' | 'google-cast' | 'none';
+
+export interface RemotePlaybackInfo {
+  deviceName?: string;
+}
+
+/**
+ * Indicates the current view type which determines how the media will be presented.
+ */
+export type MediaViewType = 'unknown' | 'audio' | 'video';
+
+/**
+ * Indicates the type of strategy that should be used to initiate the loading process.
+ *
+ * @docs {@see https://www.vidstack.io/docs/player/core-concepts/loading#load-strategies}
+ */
+export type MediaLoadingStrategy = 'eager' | 'idle' | 'visible' | 'custom' | 'play';
+
+/**
+ * Indicates the type of strategy that should be used to initiate the poster loading process.
+ *
+ * @docs {@see https://www.vidstack.io/docs/player/core-concepts/loading#load-strategies}
+ */
+export type MediaPosterLoadingStrategy = 'eager' | 'idle' | 'visible' | 'custom';
+
+/**
+ * A number which represents the general type of error that occurred.
+ *
+ * - *Abort Error Code (1):* The fetching of the associated resource was aborted by the user's
+ * request.
+ *
+ * - *Network Error Code (2):* Some kind of network error occurred which prevented the media from
+ * being successfully fetched, despite having previously been available.
+ *
+ * - *Decode Error Code (3):* Despite having previously been determined to be usable, an error
+ * occurred while trying to decode the media resource, resulting in an error.
+ *
+ * - *Invalid Resource Error Code (4):* The associated resource or media provider object (such as
+ * a `MediaStream`) has been found to be unsuitable.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaError
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaError/code
+ */
+export type MediaErrorCode = 1 | 2 | 3 | 4;
+
+export interface MediaErrorDetail {
+  message: string;
+  code?: MediaErrorCode;
+  error?: Error;
+  mediaError?: MediaError;
+}

package/src/core/controls.ts

@@ -0,0 +1,251 @@
+import { effect, signal } from 'maverick.js';
+import { DOMEvent, EventsController, isKeyboardEvent } from 'maverick.js/std';
+
+import { isTouchPinchEvent } from '../utils/dom';
+import { MediaPlayerController } from './api/player-controller';
+
+export class MediaControls extends MediaPlayerController {
+  #idleTimer = -2;
+  #pausedTracking = false;
+  #hideOnMouseLeave = signal(false);
+  #isMouseOutside = signal(false);
+  #focusedItem: HTMLElement | null = null;
+  #canIdle = signal(true);
+
+  /**
+   * The default amount of delay in milliseconds while media playback is progressing without user
+   * activity to indicate an idle state (i.e., hide controls).
+   *
+   * @defaultValue 2000
+   */
+  defaultDelay = 2000;
+
+  /**
+   * Whether controls can hide after a delay in user interaction. If this is false, controls will
+   * not hide and be user controlled.
+   */
+  get canIdle() {
+    return this.#canIdle();
+  }
+
+  set canIdle(canIdle: boolean) {
+    this.#canIdle.set(canIdle);
+  }
+
+  /**
+   * Whether controls visibility should be toggled when the mouse enters and leaves the player
+   * container.
+   *
+   * @defaultValue false
+   */
+  get hideOnMouseLeave() {
+    const { hideControlsOnMouseLeave } = this.$props;
+    return this.#hideOnMouseLeave() || hideControlsOnMouseLeave();
+  }
+
+  set hideOnMouseLeave(hide) {
+    this.#hideOnMouseLeave.set(hide);
+  }
+
+  /**
+   * Whether media controls are currently visible.
+   */
+  get showing() {
+    return this.$state.controlsVisible();
+  }
+
+  /**
+   * Show controls.
+   */
+  show(delay = 0, trigger?: Event) {
+    this.#clearIdleTimer();
+    if (!this.#pausedTracking) {
+      this.#changeVisibility(true, delay, trigger);
+    }
+  }
+
+  /**
+   * Hide controls.
+   */
+  hide(delay = this.defaultDelay, trigger?: Event) {
+    this.#clearIdleTimer();
+    if (!this.#pausedTracking) {
+      this.#changeVisibility(false, delay, trigger);
+    }
+  }
+
+  /**
+   * Whether all idle tracking on controls should be paused until resumed again.
+   */
+  pause(trigger?: Event) {
+    this.#pausedTracking = true;
+    this.#clearIdleTimer();
+    this.#changeVisibility(true, 0, trigger);
+  }
+
+  resume(trigger?: Event) {
+    this.#pausedTracking = false;
+    if (this.$state.paused()) return;
+    this.#changeVisibility(false, this.defaultDelay, trigger);
+  }
+
+  protected override onConnect() {
+    effect(this.#init.bind(this));
+  }
+
+  #init() {
+    const { viewType } = this.$state;
+
+    if (!this.el || !this.#canIdle()) return;
+
+    if (viewType() === 'audio') {
+      this.show();
+      return;
+    }
+
+    effect(this.#watchMouse.bind(this));
+    effect(this.#watchPaused.bind(this));
+
+    const onPlay = this.#onPlay.bind(this),
+      onPause = this.#onPause.bind(this),
+      onEnd = this.#onEnd.bind(this);
+
+    new EventsController(this.el as unknown as MediaPlayerController)
+      .add('can-play', (event) => this.show(0, event))
+      .add('play', onPlay)
+      .add('pause', onPause)
+      .add('end', onEnd)
+      .add('auto-play-fail', onPause);
+  }
+
+  #watchMouse() {
+    if (!this.el) return;
+
+    const { started, pointer, paused } = this.$state;
+    if (!started() || pointer() !== 'fine') return;
+
+    const events = new EventsController(this.el),
+      shouldHideOnMouseLeave = this.hideOnMouseLeave;
+
+    if (!shouldHideOnMouseLeave || !this.#isMouseOutside()) {
+      effect(() => {
+        if (!paused()) events.add('pointermove', this.#onStopIdle.bind(this));
+      });
+    }
+
+    if (shouldHideOnMouseLeave) {
+      events
+        .add('mouseenter', this.#onMouseEnter.bind(this))
+        .add('mouseleave', this.#onMouseLeave.bind(this));
+    }
+  }
+
+  #watchPaused() {
+    const { paused, started, autoPlayError } = this.$state;
+    if (paused() || (autoPlayError() && !started())) return;
+
+    const onStopIdle = this.#onStopIdle.bind(this);
+
+    effect(() => {
+      if (!this.el) return;
+
+      const pointer = this.$state.pointer(),
+        isTouch = pointer === 'coarse',
+        events = new EventsController(this.el),
+        eventTypes = [isTouch ? 'touchend' : 'pointerup', 'keydown'] as const;
+
+      for (const eventType of eventTypes) {
+        events.add(eventType, onStopIdle, { passive: false });
+      }
+    });
+  }
+
+  #onPlay(event: DOMEvent) {
+    // Looping.
+    if (event.triggers.hasType('ended')) return;
+    this.show(0, event);
+    this.hide(undefined, event);
+  }
+
+  #onPause(event: DOMEvent) {
+    this.show(0, event);
+  }
+
+  #onEnd(event: DOMEvent) {
+    const { loop } = this.$state;
+    if (loop()) this.hide(0, event);
+  }
+
+  #onMouseEnter(event: Event) {
+    this.#isMouseOutside.set(false);
+    this.show(0, event);
+    this.hide(undefined, event);
+  }
+
+  #onMouseLeave(event: Event) {
+    this.#isMouseOutside.set(true);
+    this.hide(0, event);
+  }
+
+  #clearIdleTimer() {
+    window.clearTimeout(this.#idleTimer);
+    this.#idleTimer = -1;
+  }
+
+  #onStopIdle(event: Event) {
+    if (
+      // @ts-expect-error
+      event.MEDIA_GESTURE ||
+      this.#pausedTracking ||
+      isTouchPinchEvent(event)
+    ) {
+      return;
+    }
+
+    if (isKeyboardEvent(event)) {
+      if (event.key === 'Escape') {
+        this.el?.focus();
+        this.#focusedItem = null;
+      } else if (this.#focusedItem) {
+        event.preventDefault();
+        requestAnimationFrame(() => {
+          this.#focusedItem?.focus();
+          this.#focusedItem = null;
+        });
+      }
+    }
+
+    this.show(0, event);
+    this.hide(this.defaultDelay, event);
+  }
+
+  #changeVisibility(visible: boolean, delay: number, trigger?: Event) {
+    if (delay === 0) {
+      this.#onChange(visible, trigger);
+      return;
+    }
+
+    this.#idleTimer = window.setTimeout(() => {
+      if (!this.scope) return;
+      this.#onChange(visible && !this.#pausedTracking, trigger);
+    }, delay);
+  }
+
+  #onChange(visible: boolean, trigger?: Event) {
+    if (this.$state.controlsVisible() === visible) return;
+
+    this.$state.controlsVisible.set(visible);
+
+    if (!visible && document.activeElement && this.el?.contains(document.activeElement)) {
+      this.#focusedItem = document.activeElement as HTMLElement;
+      requestAnimationFrame(() => {
+        this.el?.focus({ preventScroll: true });
+      });
+    }
+
+    this.dispatch('controls-change', {
+      detail: visible,
+      trigger,
+    });
+  }
+}

package/src/core/font/font-options.ts

@@ -0,0 +1,106 @@
+import { signal, type WriteSignal } from 'maverick.js';
+import { camelToKebabCase, isString } from 'maverick.js/std';
+
+import type { DefaultLayoutTranslations } from '../../components/layouts/default/translations';
+
+export const FONT_COLOR_OPTION: FontOption = {
+  type: 'color',
+};
+
+export const FONT_FAMILY_OPTION: FontOption = {
+  type: 'radio',
+  values: {
+    'Monospaced Serif': 'mono-serif',
+    'Proportional Serif': 'pro-serif',
+    'Monospaced Sans-Serif': 'mono-sans',
+    'Proportional Sans-Serif': 'pro-sans',
+    Casual: 'casual',
+    Cursive: 'cursive',
+    'Small Capitals': 'capitals',
+  },
+};
+
+export const FONT_SIZE_OPTION: FontSliderOption = {
+  type: 'slider',
+  min: 0,
+  max: 400,
+  step: 25,
+  upIcon: null,
+  downIcon: null,
+};
+
+export const FONT_OPACITY_OPTION: FontSliderOption = {
+  type: 'slider',
+  min: 0,
+  max: 100,
+  step: 5,
+  upIcon: null,
+  downIcon: null,
+};
+
+export const FONT_TEXT_SHADOW_OPTION: FontOption = {
+  type: 'radio',
+  values: ['None', 'Drop Shadow', 'Raised', 'Depressed', 'Outline'],
+};
+
+export const FONT_DEFAULTS = {
+  fontFamily: 'pro-sans',
+  fontSize: '100%',
+  textColor: '#ffffff',
+  textOpacity: '100%',
+  textShadow: 'none',
+  textBg: '#000000',
+  textBgOpacity: '100%',
+  displayBg: '#000000',
+  displayBgOpacity: '0%',
+} as const;
+
+export const FONT_SIGNALS = Object.keys(FONT_DEFAULTS).reduce(
+  (prev, type) => ({
+    ...prev,
+    [type]: signal(FONT_DEFAULTS[type]),
+  }),
+  {} as Record<FontSignal, WriteSignal<string>>,
+);
+
+export type FontSignal = keyof typeof FONT_DEFAULTS;
+
+if (!__SERVER__) {
+  for (const type of Object.keys(FONT_SIGNALS)) {
+    const value = localStorage.getItem(`vds-player:${camelToKebabCase(type)}`);
+    if (isString(value)) FONT_SIGNALS[type].set(value);
+  }
+}
+
+export function onFontReset() {
+  for (const type of Object.keys(FONT_SIGNALS)) {
+    const defaultValue = FONT_DEFAULTS[type];
+    FONT_SIGNALS[type].set(defaultValue);
+  }
+}
+
+export interface FontRadioOption {
+  type: 'radio';
+  values: string[] | Record<string, string>;
+}
+
+export interface FontSliderOption {
+  type: 'slider';
+  min: number;
+  max: number;
+  step: number;
+  upIcon: unknown;
+  downIcon: unknown;
+}
+
+export interface FontColorOption {
+  type: 'color';
+}
+
+export type FontOption = FontRadioOption | FontSliderOption | FontColorOption;
+
+export interface DefaultFontSettingProps {
+  label: keyof DefaultLayoutTranslations;
+  type: FontSignal;
+  option: FontOption;
+}

package/src/core/font/font-vars.ts

@@ -0,0 +1,107 @@
+import { effect, onDispose, scoped } from 'maverick.js';
+import { camelToKebabCase, keysOf } from 'maverick.js/std';
+
+import type { MediaPlayer } from '../../components/player';
+import { hexToRgb } from '../../utils/color';
+import { useMediaContext } from '../api/media-context';
+import { FONT_DEFAULTS, FONT_SIGNALS, type FontSignal } from './font-options';
+
+let isWatchingVars = false,
+  players = new Set<MediaPlayer>();
+
+export function updateFontCssVars() {
+  if (__SERVER__) return;
+
+  const { player } = useMediaContext();
+  players.add(player);
+  onDispose(() => players.delete(player));
+
+  if (!isWatchingVars) {
+    scoped(() => {
+      for (const type of keysOf(FONT_SIGNALS)) {
+        const $value = FONT_SIGNALS[type],
+          defaultValue = FONT_DEFAULTS[type],
+          varName = `--media-user-${camelToKebabCase(type)}`,
+          storageKey = `vds-player:${camelToKebabCase(type)}`;
+
+        effect(() => {
+          const value = $value(),
+            isDefaultVarValue = value === defaultValue,
+            varValue = !isDefaultVarValue ? getCssVarValue(player, type, value) : null;
+
+          for (const player of players) {
+            player.el?.style.setProperty(varName, varValue);
+          }
+
+          if (isDefaultVarValue) {
+            localStorage.removeItem(storageKey);
+          } else {
+            localStorage.setItem(storageKey, value);
+          }
+        });
+      }
+    }, null);
+
+    isWatchingVars = true;
+  }
+}
+
+function getCssVarValue(player: MediaPlayer, type: FontSignal, value: string) {
+  switch (type) {
+    case 'fontFamily':
+      const fontVariant = value === 'capitals' ? 'small-caps' : '';
+      player.el?.style.setProperty('--media-user-font-variant', fontVariant);
+      return getFontFamilyCSSVarValue(value);
+    case 'fontSize':
+    case 'textOpacity':
+    case 'textBgOpacity':
+    case 'displayBgOpacity':
+      return percentToRatio(value);
+    case 'textColor':
+      return `rgb(${hexToRgb(value)} / var(--media-user-text-opacity, 1))`;
+    case 'textShadow':
+      return getTextShadowCssVarValue(value);
+    case 'textBg':
+      return `rgb(${hexToRgb(value)} / var(--media-user-text-bg-opacity, 1))`;
+    case 'displayBg':
+      return `rgb(${hexToRgb(value)} / var(--media-user-display-bg-opacity, 1))`;
+  }
+}
+
+function percentToRatio(value: string) {
+  return (parseInt(value) / 100).toString();
+}
+
+function getFontFamilyCSSVarValue(value: string) {
+  switch (value) {
+    case 'mono-serif':
+      return '"Courier New", Courier, "Nimbus Mono L", "Cutive Mono", monospace';
+    case 'mono-sans':
+      return '"Deja Vu Sans Mono", "Lucida Console", Monaco, Consolas, "PT Mono", monospace';
+    case 'pro-sans':
+      return 'Roboto, "Arial Unicode Ms", Arial, Helvetica, Verdana, "PT Sans Caption", sans-serif';
+    case 'casual':
+      return '"Comic Sans MS", Impact, Handlee, fantasy';
+    case 'cursive':
+      return '"Monotype Corsiva", "URW Chancery L", "Apple Chancery", "Dancing Script", cursive';
+    case 'capitals':
+      return '"Arial Unicode Ms", Arial, Helvetica, Verdana, "Marcellus SC", sans-serif + font-variant=small-caps';
+    default:
+      return '"Times New Roman", Times, Georgia, Cambria, "PT Serif Caption", serif';
+  }
+}
+
+function getTextShadowCssVarValue(value: string) {
+  switch (value) {
+    case 'drop shadow':
+      return 'rgb(34, 34, 34) 1.86389px 1.86389px 2.79583px, rgb(34, 34, 34) 1.86389px 1.86389px 3.72778px, rgb(34, 34, 34) 1.86389px 1.86389px 4.65972px';
+    case 'raised':
+      return 'rgb(34, 34, 34) 1px 1px, rgb(34, 34, 34) 2px 2px';
+    case 'depressed':
+      return 'rgb(204, 204, 204) 1px 1px, rgb(34, 34, 34) -1px -1px';
+    case 'outline':
+      return 'rgb(34, 34, 34) 0px 0px 1.86389px, rgb(34, 34, 34) 0px 0px 1.86389px, rgb(34, 34, 34) 0px 0px 1.86389px, rgb(34, 34, 34) 0px 0px 1.86389px, rgb(34, 34, 34) 0px 0px 1.86389px';
+    default:
+      return '';
+  }
+}

package/src/core/keyboard/aria-shortcuts.ts

@@ -0,0 +1,42 @@
+import { onDispose, ViewController } from 'maverick.js';
+import { isArray, isString } from 'maverick.js/std';
+
+import { useMediaContext } from '../api/media-context';
+
+export class ARIAKeyShortcuts extends ViewController {
+  #shortcut: string;
+
+  constructor(shortcut: string) {
+    super();
+    this.#shortcut = shortcut;
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    const { $props, ariaKeys } = useMediaContext(),
+      keys = el.getAttribute('aria-keyshortcuts');
+
+    if (keys) {
+      ariaKeys[this.#shortcut] = keys;
+
+      if (!__SERVER__) {
+        onDispose(() => {
+          delete ariaKeys[this.#shortcut];
+        });
+      }
+
+      return;
+    }
+
+    const shortcuts = $props.keyShortcuts()[this.#shortcut];
+
+    if (shortcuts) {
+      const keys = isArray(shortcuts)
+        ? shortcuts.join(' ')
+        : isString(shortcuts)
+          ? shortcuts
+          : shortcuts?.keys;
+
+      el.setAttribute('aria-keyshortcuts', isArray(keys) ? keys.join(' ') : keys);
+    }
+  }
+}