@hanifhan1f/vidstack 1.12.13 → 1.12.14

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

@@ -1,49 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,227 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,252 +0,0 @@
-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> {}