@hanifhan1f/vidstack 1.12.13

package/src/components/ui/buttons/toggle-button.ts

@@ -0,0 +1,49 @@
+import { Component, prop, signal } from 'maverick.js';
+
+import { ToggleButtonController } from './toggle-button-controller';
+
+export interface ToggleButtonProps {
+  /**
+   * Whether it should start in the on (pressed) state.
+   */
+  defaultPressed: boolean;
+  /**
+   * Whether the button should be disabled (non-interactive).
+   */
+  disabled: boolean;
+}
+
+/**
+ * A toggle button is a two-state button that can be either off (not pressed) or on (pressed).
+ *
+ * @attr data-pressed - Whether the toggle is in an "on" state (pressed).
+ * @attr aria-pressed - Same as `data-pressed` but `"true"` or `"false"`.
+ * @attr data-focus - Whether button is being keyboard focused.
+ * @attr data-hocus - Whether button is being keyboard focused or hovered over.
+ * @docs {@link https://www.vidstack.io/docs/player/components/buttons/toggle-button}
+ */
+export class ToggleButton<
+  Props extends ToggleButtonProps = ToggleButtonProps,
+> extends Component<Props> {
+  static props: ToggleButtonProps = {
+    disabled: false,
+    defaultPressed: false,
+  };
+
+  #pressed = signal(false);
+
+  /**
+   * Whether the toggle is currently in a `pressed` state.
+   */
+  @prop
+  get pressed() {
+    return this.#pressed();
+  }
+
+  constructor() {
+    super();
+    new ToggleButtonController({
+      isPresssed: this.#pressed,
+    });
+  }
+}

package/src/components/ui/captions/captions-renderer.ts

@@ -0,0 +1,63 @@
+import { EventsController } from 'maverick.js/std';
+import type { CaptionsRenderer } from 'media-captions';
+
+import type { TextRenderer } from '../../../core/tracks/text/render/text-renderer';
+import type { TextTrack } from '../../../core/tracks/text/text-track';
+
+export class CaptionsTextRenderer implements TextRenderer {
+  readonly priority = 10;
+
+  #track: TextTrack | null = null;
+  #renderer: CaptionsRenderer;
+  #events?: EventsController<TextTrack>;
+
+  constructor(renderer: CaptionsRenderer) {
+    this.#renderer = renderer;
+  }
+
+  attach() {
+    // no-op
+  }
+
+  canRender(): boolean {
+    return true;
+  }
+
+  detach(): void {
+    this.#events?.abort();
+    this.#events = undefined;
+    this.#renderer.reset();
+    this.#track = null;
+  }
+
+  changeTrack(track: TextTrack | null): void {
+    if (!track || this.#track === track) return;
+
+    this.#events?.abort();
+    this.#events = new EventsController(track);
+
+    if (track.readyState < 2) {
+      this.#renderer.reset();
+      this.#events.add('load', () => this.#changeTrack(track), { once: true });
+    } else {
+      this.#changeTrack(track);
+    }
+
+    this.#events
+      .add('add-cue', (event) => {
+        this.#renderer.addCue(event.detail);
+      })
+      .add('remove-cue', (event) => {
+        this.#renderer.removeCue(event.detail);
+      });
+
+    this.#track = track;
+  }
+
+  #changeTrack(track: TextTrack) {
+    this.#renderer.changeTrack({
+      cues: [...track.cues],
+      regions: [...track.regions],
+    });
+  }
+}

package/src/components/ui/captions/captions.ts

@@ -0,0 +1,227 @@
+import { Component, effect, peek, signal } from 'maverick.js';
+import { listenEvent, setAttribute } from 'maverick.js/std';
+import type { CaptionsRenderer } from 'media-captions';
+
+import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
+import { isTrackCaptionKind } from '../../../core/tracks/text/text-track';
+import { $ariaBool } from '../../../utils/aria';
+import { CaptionsTextRenderer } from './captions-renderer';
+
+export interface CaptionsProps {
+  /*
+   * Text direction:
+   * - left-to-right (ltr)
+   * - right-to-left (rtl)
+   */
+  textDir: 'ltr' | 'rtl';
+  /**
+   * The text to be displayed when an example caption is being shown.
+   */
+  exampleText: string;
+}
+
+/**
+ * Renders and displays captions/subtitles. This will be an overlay for video and a simple
+ * captions box for audio.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/display/captions}
+ */
+export class Captions extends Component<CaptionsProps> {
+  static props: CaptionsProps = {
+    textDir: 'ltr',
+    exampleText: 'Captions look like this.',
+  };
+
+  #media!: MediaContext;
+
+  static lib = signal<typeof import('media-captions') | null>(null);
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+    this.setAttributes({
+      'aria-hidden': $ariaBool(this.#isHidden.bind(this)),
+    });
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    el.style.setProperty('pointer-events', 'none');
+  }
+
+  protected override onConnect(el: HTMLElement) {
+    if (!Captions.lib()) {
+      import('media-captions').then((lib) => Captions.lib.set(lib));
+    }
+
+    effect(this.#watchViewType.bind(this));
+  }
+
+  #isHidden() {
+    const { textTrack, remotePlaybackState, iOSControls } = this.#media.$state,
+      track = textTrack();
+
+    return (
+      iOSControls() || remotePlaybackState() === 'connected' || !track || !isTrackCaptionKind(track)
+    );
+  }
+
+  #watchViewType() {
+    if (!Captions.lib()) return;
+
+    const { viewType } = this.#media.$state;
+
+    if (viewType() === 'audio') {
+      return this.#setupAudioView();
+    } else {
+      return this.#setupVideoView();
+    }
+  }
+
+  #setupAudioView() {
+    effect(this.#onTrackChange.bind(this));
+
+    this.#listenToFontStyleChanges(null);
+
+    return () => {
+      this.el!.textContent = '';
+    };
+  }
+
+  #onTrackChange() {
+    if (this.#isHidden()) return;
+
+    this.#onCueChange();
+
+    const { textTrack } = this.#media.$state;
+    listenEvent(textTrack()!, 'cue-change', this.#onCueChange.bind(this));
+
+    effect(this.#onUpdateTimedNodes.bind(this));
+  }
+
+  #onCueChange() {
+    this.el!.textContent = '';
+
+    if (this.#hideExampleTimer >= 0) {
+      this.#removeExample();
+    }
+
+    const { realCurrentTime, textTrack } = this.#media.$state,
+      { renderVTTCueString } = Captions.lib()!,
+      time = peek(realCurrentTime),
+      activeCues = peek(textTrack)!.activeCues;
+
+    for (const cue of activeCues) {
+      const displayEl = this.#createCueDisplayElement(),
+        cueEl = this.#createCueElement();
+
+      cueEl.innerHTML = renderVTTCueString(cue, time);
+
+      displayEl.append(cueEl);
+      this.el!.append(cueEl);
+    }
+  }
+
+  #onUpdateTimedNodes() {
+    const { realCurrentTime } = this.#media.$state,
+      { updateTimedVTTCueNodes } = Captions.lib()!;
+
+    updateTimedVTTCueNodes(this.el!, realCurrentTime());
+  }
+
+  #setupVideoView() {
+    const { CaptionsRenderer } = Captions.lib()!,
+      renderer = new CaptionsRenderer(this.el!),
+      textRenderer = new CaptionsTextRenderer(renderer);
+
+    this.#media.textRenderers.add(textRenderer);
+
+    effect(this.#watchTextDirection.bind(this, renderer));
+    effect(this.#watchMediaTime.bind(this, renderer));
+
+    this.#listenToFontStyleChanges(renderer);
+
+    return () => {
+      this.el!.textContent = '';
+      this.#media.textRenderers.remove(textRenderer);
+      renderer.destroy();
+    };
+  }
+
+  #watchTextDirection(renderer: CaptionsRenderer) {
+    renderer.dir = this.$props.textDir();
+  }
+
+  #watchMediaTime(renderer: CaptionsRenderer) {
+    if (this.#isHidden()) return;
+
+    const { realCurrentTime, textTrack } = this.#media.$state;
+
+    renderer.currentTime = realCurrentTime();
+
+    if (this.#hideExampleTimer >= 0 && textTrack()?.activeCues[0]) {
+      this.#removeExample();
+    }
+  }
+
+  #listenToFontStyleChanges(renderer: CaptionsRenderer | null) {
+    const player = this.#media.player;
+    if (!player) return;
+
+    const onChange = this.#onFontStyleChange.bind(this, renderer);
+    listenEvent(player, 'vds-font-change', onChange);
+  }
+
+  #onFontStyleChange(renderer: CaptionsRenderer | null) {
+    if (this.#hideExampleTimer >= 0) {
+      this.#hideExample();
+      return;
+    }
+
+    const { textTrack } = this.#media.$state;
+
+    if (!textTrack()?.activeCues[0]) {
+      this.#showExample();
+    } else {
+      renderer?.update(true);
+    }
+  }
+
+  #showExample() {
+    const display = this.#createCueDisplayElement();
+    setAttribute(display, 'data-example', '');
+
+    const cue = this.#createCueElement();
+    setAttribute(cue, 'data-example', '');
+    cue.textContent = this.$props.exampleText();
+
+    display?.append(cue);
+    this.el?.append(display);
+
+    this.el?.setAttribute('data-example', '');
+
+    this.#hideExample();
+  }
+
+  #hideExampleTimer = -1;
+  #hideExample() {
+    window.clearTimeout(this.#hideExampleTimer);
+    this.#hideExampleTimer = window.setTimeout(this.#removeExample.bind(this), 2500);
+  }
+
+  #removeExample() {
+    this.el?.removeAttribute('data-example');
+    if (this.el?.querySelector('[data-example]')) this.el.textContent = '';
+    this.#hideExampleTimer = -1;
+  }
+
+  #createCueDisplayElement() {
+    const el = document.createElement('div');
+    setAttribute(el, 'data-part', 'cue-display');
+    return el;
+  }
+
+  #createCueElement() {
+    const el = document.createElement('div');
+    setAttribute(el, 'data-part', 'cue');
+    return el;
+  }
+}

package/src/components/ui/controls-group.ts

@@ -0,0 +1,13 @@
+import { Component } from 'maverick.js';
+import { setStyle } from 'maverick.js/std';
+
+/**
+ * This component creates a container for media controls.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/media/controls#group}
+ */
+export class ControlsGroup extends Component {
+  protected override onAttach(el: HTMLElement): void {
+    if (!el.style.pointerEvents) setStyle(el, 'pointer-events', 'auto');
+  }
+}

package/src/components/ui/controls.ts

@@ -0,0 +1,101 @@
+import { Component, effect } from 'maverick.js';
+import { DOMEvent, setAttribute, setStyle } from 'maverick.js/std';
+
+import { useMediaContext, type MediaContext } from '../../core/api/media-context';
+import { setAttributeIfEmpty } from '../../utils/dom';
+
+/**
+ * This component creates a container for control groups.
+ *
+ * @attr data-visible - Whether controls should be visible.
+ * @attr data-pip - Whether picture-in-picture mode is active.
+ * @attr data-fullscreen - Whether fullscreen mode is active.
+ * @docs {@link https://www.vidstack.io/docs/player/components/media/controls}
+ */
+export class Controls extends Component<ControlsProps, {}, ControlsEvents> {
+  static props: ControlsProps = {
+    hideDelay: 2000,
+    hideOnMouseLeave: false,
+  };
+
+  #media!: MediaContext;
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+    effect(this.#watchProps.bind(this));
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    const { pictureInPicture, fullscreen } = this.#media.$state;
+
+    setStyle(el, 'pointer-events', 'none');
+    setAttributeIfEmpty(el, 'role', 'group');
+
+    this.setAttributes({
+      'data-visible': this.#isShowing.bind(this),
+      'data-fullscreen': fullscreen,
+      'data-pip': pictureInPicture,
+    });
+
+    effect(() => {
+      this.dispatch('change', { detail: this.#isShowing() });
+    });
+
+    effect(this.#hideControls.bind(this));
+
+    effect(() => {
+      const isFullscreen = fullscreen();
+      for (const side of ['top', 'right', 'bottom', 'left']) {
+        setStyle(el, `padding-${side}`, isFullscreen && `env(safe-area-inset-${side})`);
+      }
+    });
+  }
+
+  #hideControls() {
+    if (!this.el) return;
+
+    const { nativeControls } = this.#media.$state,
+      isHidden = nativeControls();
+
+    setAttribute(this.el, 'aria-hidden', isHidden ? 'true' : null);
+    setStyle(this.el, 'display', isHidden ? 'none' : null);
+  }
+
+  #watchProps() {
+    const { controls } = this.#media.player,
+      { hideDelay, hideOnMouseLeave } = this.$props;
+
+    // Use controls delay prop on player if this is the default value.
+    controls.defaultDelay = hideDelay() === 2000 ? this.#media.$props.controlsDelay() : hideDelay();
+    controls.hideOnMouseLeave = hideOnMouseLeave();
+  }
+
+  #isShowing() {
+    const { controlsVisible } = this.#media.$state;
+    return controlsVisible();
+  }
+}
+
+export interface ControlsProps {
+  /**
+   * The default amount of delay in milliseconds while media playback is progressing without user
+   * activity to hide the controls.
+   */
+  hideDelay: number;
+  /**
+   * Whether controls visibility should be toggled when the mouse enters and leaves the player
+   * container.
+   */
+  hideOnMouseLeave: boolean;
+}
+
+export interface ControlsEvents {
+  change: ControlsChangeEvent;
+}
+
+/**
+ * Fired when the active state of the controls change.
+ *
+ * @detail isVisible
+ */
+export interface ControlsChangeEvent extends DOMEvent<boolean> {}

package/src/components/ui/gesture.ts

@@ -0,0 +1,252 @@
+import { Component, effect, peek } from 'maverick.js';
+import {
+  DOMEvent,
+  isMouseEvent,
+  isPointerEvent,
+  isTouchEvent,
+  kebabToCamelCase,
+  listenEvent,
+} from 'maverick.js/std';
+
+import { useMediaContext, type MediaContext } from '../../core/api/media-context';
+import { isTouchPinchEvent } from '../../utils/dom';
+
+/**
+ * This component enables actions to be performed on the media based on user gestures.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/media/gesture}
+ */
+export class Gesture extends Component<GestureProps, {}, GestureEvents> {
+  static props: GestureProps = {
+    disabled: false,
+    event: undefined,
+    action: undefined,
+  };
+
+  #media!: MediaContext;
+  #provider: HTMLElement | null = null;
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+    const { event, action } = this.$props;
+    this.setAttributes({
+      event,
+      action,
+    });
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    el.setAttribute('data-media-gesture', '');
+    el.style.setProperty('pointer-events', 'none');
+  }
+
+  protected override onConnect(el: HTMLElement) {
+    this.#provider = this.#media.player!.el?.querySelector(
+      '[data-media-provider]',
+    ) as HTMLElement | null;
+    effect(this.#attachListener.bind(this));
+  }
+
+  #attachListener() {
+    let eventType = this.$props.event(),
+      disabled = this.$props.disabled();
+
+    if (!this.#provider || !eventType || disabled) return;
+
+    if (/^dbl/.test(eventType)) {
+      eventType = eventType.split(/^dbl/)[1] as keyof HTMLElementEventMap;
+    }
+
+    if (eventType === 'pointerup' || eventType === 'pointerdown') {
+      const pointer = this.#media.$state.pointer();
+      if (pointer === 'coarse') {
+        eventType = eventType === 'pointerup' ? 'touchend' : 'touchstart';
+      }
+    }
+
+    listenEvent(
+      this.#provider,
+      eventType as keyof HTMLElementEventMap,
+      this.#acceptEvent.bind(this),
+      { passive: false },
+    );
+  }
+
+  #presses = 0;
+  #pressTimerId = -1;
+
+  #acceptEvent(event: Event) {
+    if (
+      this.$props.disabled() ||
+      (isPointerEvent(event) && (event.button !== 0 || this.#media.activeMenu)) ||
+      (isTouchEvent(event) && this.#media.activeMenu) ||
+      isTouchPinchEvent(event) ||
+      !this.#inBounds(event)
+    ) {
+      return;
+    }
+
+    // @ts-expect-error
+    event.MEDIA_GESTURE = true;
+    event.preventDefault();
+
+    const eventType = peek(this.$props.event),
+      isDblEvent = eventType?.startsWith('dbl');
+
+    if (!isDblEvent) {
+      if (this.#presses === 0) {
+        setTimeout(() => {
+          if (this.#presses === 1) this.#handleEvent(event);
+        }, 250);
+      }
+    } else if (this.#presses === 1) {
+      queueMicrotask(() => this.#handleEvent(event));
+      clearTimeout(this.#pressTimerId);
+      this.#presses = 0;
+      return;
+    }
+
+    if (this.#presses === 0) {
+      this.#pressTimerId = window.setTimeout(() => {
+        this.#presses = 0;
+      }, 275);
+    }
+
+    this.#presses++;
+  }
+
+  #handleEvent(event: Event) {
+    this.el!.setAttribute('data-triggered', '');
+    requestAnimationFrame(() => {
+      if (this.#isTopLayer()) {
+        this.#performAction(peek(this.$props.action), event);
+      }
+      requestAnimationFrame(() => {
+        this.el!.removeAttribute('data-triggered');
+      });
+    });
+  }
+
+  /** Validate event occurred in gesture bounds. */
+  #inBounds(event: Event) {
+    if (!this.el) return false;
+
+    if (isPointerEvent(event) || isMouseEvent(event) || isTouchEvent(event)) {
+      const touch = isTouchEvent(event) ? (event.changedTouches[0] ?? event.touches[0]) : undefined;
+
+      const clientX = touch?.clientX ?? (event as MouseEvent).clientX;
+      const clientY = touch?.clientY ?? (event as MouseEvent).clientY;
+      const rect = this.el.getBoundingClientRect();
+
+      const inBounds =
+        clientY >= rect.top &&
+        clientY <= rect.bottom &&
+        clientX >= rect.left &&
+        clientX <= rect.right;
+
+      return event.type.includes('leave') ? !inBounds : inBounds;
+    }
+
+    return true;
+  }
+
+  /** Validate gesture has the highest z-index in this triggered group. */
+  #isTopLayer() {
+    const gestures = this.#media.player!.el!.querySelectorAll(
+      '[data-media-gesture][data-triggered]',
+    ) as NodeListOf<HTMLElement>;
+
+    return (
+      Array.from(gestures).sort(
+        (a, b) => +getComputedStyle(b).zIndex - +getComputedStyle(a).zIndex,
+      )[0] === this.el
+    );
+  }
+
+  #performAction(action: string | undefined, trigger: Event) {
+    if (!action) return;
+
+    const willTriggerEvent = new DOMEvent<string>('will-trigger', {
+      detail: action,
+      cancelable: true,
+      trigger,
+    });
+
+    this.dispatchEvent(willTriggerEvent);
+    if (willTriggerEvent.defaultPrevented) return;
+
+    const [method, value] = action.replace(/:([a-z])/, '-$1').split(':');
+
+    if (action.includes(':fullscreen')) {
+      this.#media.remote.toggleFullscreen('prefer-media', trigger);
+    } else if (action.includes('seek:')) {
+      this.#media.remote.seek(peek(this.#media.$state.currentTime) + (+value || 0), trigger);
+    } else {
+      this.#media.remote[kebabToCamelCase(method)](trigger);
+    }
+
+    this.dispatch('trigger', {
+      detail: action as GestureAction,
+      trigger,
+    });
+  }
+}
+
+export interface GestureProps {
+  /**
+   * Whether this gesture should not be triggered.
+   */
+  disabled: boolean;
+  /**
+   * The DOM event type that will trigger this gesture. It can be any valid DOM event type. Any
+   * event can be prefixed with `dbl` to ensure it occurs twice in succession (max 200ms gap).
+   *
+   * @example 'pointerup'
+   * @example 'dblpointerup'
+   * @example 'mouseleave'
+   */
+  event: GestureEventType | undefined;
+  /**
+   * An action describes the type of media request event that will be dispatched, which will
+   * ultimately perform some operation on the player.
+   *
+   * @example 'play'
+   * @example 'seek:30'
+   * @example 'seek:-30'
+   * @example 'toggle:paused'
+   */
+  action: GestureAction | undefined;
+}
+
+export type GestureEventType = keyof HTMLElementEventMap | `dbl${keyof HTMLElementEventMap}`;
+
+export type GestureAction =
+  | 'play'
+  | 'pause'
+  | `seek:${number}`
+  | `toggle:${'paused' | 'muted' | 'fullscreen' | 'controls'}`;
+
+export interface GestureEvents {
+  'will-trigger': GestureWillTriggerEvent;
+  trigger: GestureTriggerEvent;
+}
+
+export interface GestureEvent<Detail = unknown> extends DOMEvent<Detail> {
+  target: Gesture;
+}
+
+/**
+ * This event will fire before the gesture action is triggered. Calling `event.preventDefault()`
+ * will stop the action from being triggered.
+ *
+ * @detail action
+ * @cancelable
+ */
+export interface GestureWillTriggerEvent extends GestureEvent<GestureAction> {}
+
+/**
+ * This event will fire after the gesture action has been triggered.
+ *
+ * @detail action
+ */
+export interface GestureTriggerEvent extends GestureEvent<GestureAction> {}