@hanifhan1f/vidstack 1.12.13

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

@@ -0,0 +1,68 @@
+import { Component } from 'maverick.js';
+
+import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
+import type { MediaRequestEvents } from '../../../core/api/media-request-events';
+import { isTrackCaptionKind } from '../../../core/tracks/text/text-track';
+import { $ariaBool } from '../../../utils/aria';
+import { setARIALabel } from '../../../utils/dom';
+import {
+  ToggleButtonController,
+  type ToggleButtonControllerProps,
+} from './toggle-button-controller';
+
+export interface CaptionButtonProps extends ToggleButtonControllerProps {}
+
+export interface CaptionButtonEvents
+  extends Pick<MediaRequestEvents, 'media-text-track-change-request'> {}
+
+/**
+ * A button for toggling the showing state of the captions.
+ *
+ * @attr data-supported - Whether captions/subtitles are available.
+ * @attr data-active - Whether closed captions or subtitles are on.
+ * @docs {@link https://www.vidstack.io/docs/player/components/buttons/caption-button}
+ */
+export class CaptionButton extends Component<CaptionButtonProps, {}, CaptionButtonEvents> {
+  static props: CaptionButtonProps = ToggleButtonController.props;
+
+  #media!: MediaContext;
+
+  constructor() {
+    super();
+    new ToggleButtonController({
+      isPresssed: this.#isPressed.bind(this),
+      keyShortcut: 'toggleCaptions',
+      onPress: this.#onPress.bind(this),
+    });
+  }
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+
+    this.setAttributes({
+      'data-active': this.#isPressed.bind(this),
+      'data-supported': () => !this.#isHidden(),
+      'aria-hidden': $ariaBool(this.#isHidden.bind(this)),
+    });
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    el.setAttribute('data-media-tooltip', 'caption');
+    setARIALabel(el, 'Captions');
+  }
+
+  #onPress(event: Event) {
+    this.#media.remote.toggleCaptions(event);
+  }
+
+  #isPressed() {
+    const { textTrack } = this.#media.$state,
+      track = textTrack();
+    return !!track && isTrackCaptionKind(track);
+  }
+
+  #isHidden() {
+    const { hasCaptions } = this.#media.$state;
+    return !hasCaptions();
+  }
+}

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

@@ -0,0 +1,90 @@
+import { Component } from 'maverick.js';
+
+import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
+import type {
+  MediaFullscreenRequestTarget,
+  MediaRequestEvents,
+} from '../../../core/api/media-request-events';
+import { $ariaBool } from '../../../utils/aria';
+import { setARIALabel } from '../../../utils/dom';
+import {
+  ToggleButtonController,
+  type ToggleButtonControllerProps,
+} from './toggle-button-controller';
+
+export interface FullscreenButtonProps extends ToggleButtonControllerProps {
+  /**
+   * The target element on which to request fullscreen on. The target can be `media`
+   * (i.e., `<media-player>`) or `provider`. The `prefer-media` option will first see if the native
+   * fullscreen API is available, if not it'll try the media provider.
+   */
+  target: MediaFullscreenRequestTarget | undefined;
+}
+
+export interface FullscreenButtonEvents
+  extends Pick<
+    MediaRequestEvents,
+    'media-enter-fullscreen-request' | 'media-exit-fullscreen-request'
+  > {}
+
+/**
+ * A button for toggling the fullscreen mode of the player.
+ *
+ * @attr data-active - Whether fullscreen mode is active.
+ * @attr data-supported - Whether fullscreen mode is supported.
+ * @docs {@link https://www.vidstack.io/docs/player/components/buttons/fullscreen-button}
+ * @see {@link https://www.vidstack.io/docs/player/api/fullscreen}
+ */
+export class FullscreenButton extends Component<FullscreenButtonProps, {}, FullscreenButtonEvents> {
+  static props: FullscreenButtonProps = {
+    ...ToggleButtonController.props,
+    target: 'prefer-media',
+  };
+
+  #media!: MediaContext;
+
+  constructor() {
+    super();
+    new ToggleButtonController({
+      isPresssed: this.#isPressed.bind(this),
+      keyShortcut: 'toggleFullscreen',
+      onPress: this.#onPress.bind(this),
+    });
+  }
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+
+    const { fullscreen } = this.#media.$state,
+      isSupported = this.#isSupported.bind(this);
+
+    this.setAttributes({
+      'data-active': fullscreen,
+      'data-supported': isSupported,
+      'aria-hidden': $ariaBool(() => !isSupported()),
+    });
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    el.setAttribute('data-media-tooltip', 'fullscreen');
+    setARIALabel(el, 'Fullscreen');
+  }
+
+  #onPress(event: Event) {
+    const remote = this.#media.remote,
+      target = this.$props.target();
+    this.#isPressed()
+      ? remote.exitFullscreen(target, event)
+      : remote.enterFullscreen(target, event);
+  }
+
+  #isPressed() {
+    const { fullscreen } = this.#media.$state;
+    return fullscreen();
+  }
+
+  #isSupported() {
+    const { canFullscreen } = this.#media.$state;
+    return canFullscreen();
+  }
+}

package/src/components/ui/buttons/google-cast-button.ts

@@ -0,0 +1,75 @@
+import { Component } from 'maverick.js';
+
+import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
+import type { MediaRequestEvents } from '../../../core/api/media-request-events';
+import { $ariaBool } from '../../../utils/aria';
+import { setARIALabel } from '../../../utils/dom';
+import {
+  ToggleButtonController,
+  type ToggleButtonControllerProps,
+} from './toggle-button-controller';
+
+export interface GoogleCastButtonProps extends ToggleButtonControllerProps {}
+
+export interface GoogleCastButtonEvents
+  extends Pick<MediaRequestEvents, 'media-google-cast-request'> {}
+
+/**
+ * A button for requesting remote playback via Google Cast.
+ *
+ * @attr data-active - Whether Google Cast is connected.
+ * @attr data-supported - Whether Google Cast is available.
+ * @attr data-state - Current connection state.
+ * @see {@link https://developers.google.com/cast/docs/overview}
+ * @docs {@link https://www.vidstack.io/docs/player/components/buttons/google-cast-button}
+ */
+export class GoogleCastButton extends Component<GoogleCastButtonProps, {}, GoogleCastButtonEvents> {
+  static props: GoogleCastButtonProps = ToggleButtonController.props;
+
+  #media!: MediaContext;
+
+  constructor() {
+    super();
+    new ToggleButtonController({
+      isPresssed: this.#isPressed.bind(this),
+      onPress: this.#onPress.bind(this),
+    });
+  }
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+
+    const { canGoogleCast, isGoogleCastConnected } = this.#media.$state;
+    this.setAttributes({
+      'data-active': isGoogleCastConnected,
+      'data-supported': canGoogleCast,
+      'data-state': this.#getState.bind(this),
+      'aria-hidden': $ariaBool(() => !canGoogleCast()),
+    });
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    el.setAttribute('data-media-tooltip', 'google-cast');
+    setARIALabel(el, this.#getDefaultLabel.bind(this));
+  }
+
+  #onPress(event: Event) {
+    const remote = this.#media.remote;
+    remote.requestGoogleCast(event);
+  }
+
+  #isPressed() {
+    const { remotePlaybackType, remotePlaybackState } = this.#media.$state;
+    return remotePlaybackType() === 'google-cast' && remotePlaybackState() !== 'disconnected';
+  }
+
+  #getState() {
+    const { remotePlaybackType, remotePlaybackState } = this.#media.$state;
+    return remotePlaybackType() === 'google-cast' && remotePlaybackState();
+  }
+
+  #getDefaultLabel() {
+    const { remotePlaybackState } = this.#media.$state;
+    return `Google Cast ${remotePlaybackState()}`;
+  }
+}

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

@@ -0,0 +1,76 @@
+import { Component } from 'maverick.js';
+
+import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
+import type { MediaRequestEvents } from '../../../core/api/media-request-events';
+import { FocusVisibleController } from '../../../foundation/observers/focus-visible';
+import { $ariaBool } from '../../../utils/aria';
+import { onPress, setAttributeIfEmpty } from '../../../utils/dom';
+
+export interface LiveButtonProps {
+  /**
+   * Whether the button should be disabled (non-interactive). This will prevent seeking to the
+   * live edge when pressed.
+   */
+  disabled: boolean;
+}
+
+export interface LiveButtonEvents extends Pick<MediaRequestEvents, 'media-live-edge-request'> {}
+
+/**
+ * This component displays the current live status of the stream. This includes whether it's
+ * live, at the live edge, or not live. In addition, when this button is pressed it will skip
+ * ahead to the live edge.
+ *
+ * @attr data-edge - Playback is at the live edge.
+ * @attr data-hidden - Whether current media is _not_ live.
+ * @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/live-button}
+ */
+export class LiveButton extends Component<LiveButtonProps, {}, LiveButtonEvents> {
+  static props: LiveButtonProps = {
+    disabled: false,
+  };
+
+  #media!: MediaContext;
+
+  constructor() {
+    super();
+    new FocusVisibleController();
+  }
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+
+    const { disabled } = this.$props,
+      { live, liveEdge } = this.#media.$state,
+      isHidden = () => !live();
+
+    this.setAttributes({
+      'data-edge': liveEdge,
+      'data-hidden': isHidden,
+      'aria-disabled': $ariaBool(() => disabled() || liveEdge()),
+      'aria-hidden': $ariaBool(isHidden),
+    });
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    setAttributeIfEmpty(el, 'tabindex', '0');
+    setAttributeIfEmpty(el, 'role', 'button');
+    setAttributeIfEmpty(el, 'type', 'button');
+    el.setAttribute('data-media-tooltip', 'live');
+  }
+
+  protected override onConnect(el: HTMLElement) {
+    onPress(el, this.#onPress.bind(this));
+  }
+
+  #onPress(event: Event) {
+    const { disabled } = this.$props,
+      { liveEdge } = this.#media.$state;
+
+    if (disabled() || liveEdge()) return;
+
+    this.#media.remote.seekToLiveEdge(event);
+  }
+}

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

@@ -0,0 +1,69 @@
+import { Component } from 'maverick.js';
+
+import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
+import type { MediaRequestEvents } from '../../../core/api/media-request-events';
+import { setARIALabel } from '../../../utils/dom';
+import {
+  ToggleButtonController,
+  type ToggleButtonControllerProps,
+} from './toggle-button-controller';
+
+export interface MuteButtonProps extends ToggleButtonControllerProps {}
+
+export interface MuteButtonEvents
+  extends Pick<MediaRequestEvents, 'media-mute-request' | 'media-unmute-request'> {}
+
+/**
+ * A button for toggling the muted state of the player.
+ *
+ * @attr data-muted - Whether volume is muted (0).
+ * @attr data-state - Current volume setting (low/high/muted).
+ * @docs {@link https://www.vidstack.io/docs/player/components/buttons/mute-button}
+ */
+export class MuteButton extends Component<MuteButtonProps, {}, MuteButtonEvents> {
+  static props: MuteButtonProps = ToggleButtonController.props;
+
+  #media!: MediaContext;
+
+  constructor() {
+    super();
+    new ToggleButtonController({
+      isPresssed: this.#isPressed.bind(this),
+      keyShortcut: 'toggleMuted',
+      onPress: this.#onPress.bind(this),
+    });
+  }
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+
+    this.setAttributes({
+      'data-muted': this.#isPressed.bind(this),
+      'data-state': this.#getState.bind(this),
+    });
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    el.setAttribute('data-media-mute-button', '');
+    el.setAttribute('data-media-tooltip', 'mute');
+    setARIALabel(el, 'Mute');
+  }
+
+  #onPress(event: Event) {
+    const remote = this.#media.remote;
+    this.#isPressed() ? remote.unmute(event) : remote.mute(event);
+  }
+
+  #isPressed() {
+    const { muted, volume } = this.#media.$state;
+    return muted() || volume() === 0;
+  }
+
+  #getState() {
+    const { muted, volume } = this.#media.$state,
+      $volume = volume();
+    if (muted() || $volume === 0) return 'muted';
+    else if ($volume >= 0.5) return 'high';
+    else if ($volume < 0.5) return 'low';
+  }
+}

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

@@ -0,0 +1,71 @@
+import { Component } from 'maverick.js';
+
+import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
+import type { MediaRequestEvents } from '../../../core/api/media-request-events';
+import { $ariaBool } from '../../../utils/aria';
+import { setARIALabel } from '../../../utils/dom';
+import {
+  ToggleButtonController,
+  type ToggleButtonControllerProps,
+} from './toggle-button-controller';
+
+export interface PIPButtonProps extends ToggleButtonControllerProps {}
+
+export interface PIPButtonEvents
+  extends Pick<MediaRequestEvents, 'media-enter-pip-request' | 'media-exit-pip-request'> {}
+
+/**
+ * A button for toggling the picture-in-picture (PIP) mode of the player.
+ *
+ * @attr data-active - Whether picture-in-picture mode is active.
+ * @attr data-supported - Whether picture-in-picture mode is available.
+ * @docs {@link https://www.vidstack.io/docs/player/components/buttons/pip-button}
+ * @see {@link https://www.vidstack.io/docs/player/api/picture-in-picture}
+ */
+export class PIPButton extends Component<PIPButtonProps, {}, PIPButtonEvents> {
+  static props: PIPButtonProps = ToggleButtonController.props;
+
+  #media!: MediaContext;
+
+  constructor() {
+    super();
+    new ToggleButtonController({
+      isPresssed: this.#isPressed.bind(this),
+      keyShortcut: 'togglePictureInPicture',
+      onPress: this.#onPress.bind(this),
+    });
+  }
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+
+    const { pictureInPicture } = this.#media.$state,
+      isSupported = this.#isSupported.bind(this);
+
+    this.setAttributes({
+      'data-active': pictureInPicture,
+      'data-supported': isSupported,
+      'aria-hidden': $ariaBool(() => !isSupported()),
+    });
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    el.setAttribute('data-media-tooltip', 'pip');
+    setARIALabel(el, 'PiP');
+  }
+
+  #onPress(event: Event) {
+    const remote = this.#media.remote;
+    this.#isPressed() ? remote.exitPictureInPicture(event) : remote.enterPictureInPicture(event);
+  }
+
+  #isPressed() {
+    const { pictureInPicture } = this.#media.$state;
+    return pictureInPicture();
+  }
+
+  #isSupported() {
+    const { canPictureInPicture } = this.#media.$state;
+    return canPictureInPicture();
+  }
+}

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

@@ -0,0 +1,62 @@
+import { Component } from 'maverick.js';
+
+import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
+import type { MediaRequestEvents } from '../../../core/api/media-request-events';
+import { setARIALabel } from '../../../utils/dom';
+import {
+  ToggleButtonController,
+  type ToggleButtonControllerProps,
+} from './toggle-button-controller';
+
+export interface PlayButtonProps extends ToggleButtonControllerProps {}
+
+export interface PlayButtonEvents
+  extends Pick<MediaRequestEvents, 'media-play-request' | 'media-pause-request'> {}
+
+/**
+ * A button for toggling the playback state (play/pause) of the current media.
+ *
+ * @attr data-paused - Whether playback has stopped.
+ * @attr data-ended - Whether playback has ended.
+ * @docs {@link https://www.vidstack.io/docs/player/components/buttons/play-button}
+ */
+export class PlayButton extends Component<PlayButtonProps, {}, PlayButtonEvents> {
+  static props: PlayButtonProps = ToggleButtonController.props;
+
+  #media!: MediaContext;
+
+  constructor() {
+    super();
+
+    new ToggleButtonController({
+      isPresssed: this.#isPressed.bind(this),
+      keyShortcut: 'togglePaused',
+      onPress: this.#onPress.bind(this),
+    });
+  }
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+    const { paused, ended } = this.#media.$state;
+
+    this.setAttributes({
+      'data-paused': paused,
+      'data-ended': ended,
+    });
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    el.setAttribute('data-media-tooltip', 'play');
+    setARIALabel(el, 'Play');
+  }
+
+  #onPress(event: Event) {
+    const remote = this.#media.remote;
+    this.#isPressed() ? remote.pause(event) : remote.play(event);
+  }
+
+  #isPressed() {
+    const { paused } = this.#media.$state;
+    return !paused();
+  }
+}

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

@@ -0,0 +1,92 @@
+import { Component } from 'maverick.js';
+
+import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
+import type { MediaRequestEvents } from '../../../core/api/media-request-events';
+import { FocusVisibleController } from '../../../foundation/observers/focus-visible';
+import { $ariaBool } from '../../../utils/aria';
+import { onPress, setARIALabel, setAttributeIfEmpty } from '../../../utils/dom';
+
+export interface SeekButtonProps {
+  /**
+   * Whether the button should be disabled (non-interactive).
+   */
+  disabled: boolean;
+  /**
+   * The amount to seek the media playback forwards (positive number) or backwards (negative number)
+   * when the seek button is pressed.
+   */
+  seconds: number;
+}
+
+export interface SeekButtonEvents extends Pick<MediaRequestEvents, 'media-seek-request'> {}
+
+/**
+ * A button for seeking the current media playback forwards or backwards by a specified amount.
+ *
+ * @attr data-seeking - Whether a seeking operation is in progress.
+ * @attr data-supported - Whether seeking operations are permitted.
+ * @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/seek-button}
+ */
+export class SeekButton extends Component<SeekButtonProps, {}, SeekButtonEvents> {
+  static props: SeekButtonProps = {
+    disabled: false,
+    seconds: 30,
+  };
+
+  #media!: MediaContext;
+
+  constructor() {
+    super();
+    new FocusVisibleController();
+  }
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+
+    const { seeking } = this.#media.$state,
+      { seconds } = this.$props,
+      isSupported = this.#isSupported.bind(this);
+
+    this.setAttributes({
+      seconds,
+      'data-seeking': seeking,
+      'data-supported': isSupported,
+      'aria-hidden': $ariaBool(() => !isSupported()),
+    });
+  }
+
+  protected override onAttach(el: HTMLElement) {
+    setAttributeIfEmpty(el, 'tabindex', '0');
+    setAttributeIfEmpty(el, 'role', 'button');
+    setAttributeIfEmpty(el, 'type', 'button');
+    el.setAttribute('data-media-tooltip', 'seek');
+    setARIALabel(el, this.#getDefaultLabel.bind(this));
+  }
+
+  protected override onConnect(el: HTMLElement) {
+    onPress(el, this.#onPress.bind(this));
+  }
+
+  #isSupported() {
+    const { canSeek } = this.#media.$state;
+    return canSeek();
+  }
+
+  #getDefaultLabel() {
+    const { seconds } = this.$props;
+    return `Seek ${seconds() > 0 ? 'forward' : 'backward'} ${seconds()} seconds`;
+  }
+
+  #onPress(event: Event) {
+    const { seconds, disabled } = this.$props;
+
+    if (disabled()) return;
+
+    const { currentTime } = this.#media.$state,
+      seekTo = currentTime() + seconds();
+
+    this.#media.remote.seek(seekTo, event);
+  }
+}

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

@@ -0,0 +1,92 @@
+import { isWriteSignal, ViewController, type ReadSignal } from 'maverick.js';
+import { ariaBool } from 'maverick.js/std';
+
+import { ARIAKeyShortcuts } from '../../../core/keyboard/aria-shortcuts';
+import { FocusVisibleController } from '../../../foundation/observers/focus-visible';
+import { onPress, setAttributeIfEmpty } from '../../../utils/dom';
+
+export interface ToggleButtonControllerProps {
+  /**
+   * Whether the button should be disabled (non-interactive).
+   */
+  disabled: boolean;
+}
+
+export interface ToggleButtonDelegate {
+  isPresssed: ReadSignal<boolean>;
+  keyShortcut?: string;
+  onPress?(event: Event): void;
+}
+
+export class ToggleButtonController extends ViewController<ToggleButtonControllerProps> {
+  static props: ToggleButtonControllerProps = {
+    disabled: false,
+  };
+
+  #delegate: ToggleButtonDelegate;
+
+  constructor(delegate: ToggleButtonDelegate) {
+    super();
+    this.#delegate = delegate;
+    new FocusVisibleController();
+    if (delegate.keyShortcut) {
+      new ARIAKeyShortcuts(delegate.keyShortcut);
+    }
+  }
+
+  protected override onSetup(): void {
+    const { disabled } = this.$props;
+    this.setAttributes({
+      'data-pressed': this.#delegate.isPresssed,
+      'aria-pressed': this.#isARIAPressed.bind(this),
+      'aria-disabled': () => (disabled() ? 'true' : null),
+    });
+  }
+
+  protected override onAttach(el: HTMLElement) {
+    setAttributeIfEmpty(el, 'tabindex', '0');
+    setAttributeIfEmpty(el, 'role', 'button');
+    setAttributeIfEmpty(el, 'type', 'button');
+  }
+
+  protected override onConnect(el: HTMLElement) {
+    const events = onPress(el, this.#onMaybePress.bind(this));
+
+    // Prevent these events too when toggle is disabled.
+    for (const type of ['click', 'touchstart'] as const) {
+      events.add(type, this.#onInteraction.bind(this), {
+        passive: true,
+      });
+    }
+  }
+
+  #isARIAPressed() {
+    return ariaBool(this.#delegate.isPresssed());
+  }
+
+  #onPressed(event: Event) {
+    if (isWriteSignal(this.#delegate.isPresssed)) {
+      this.#delegate.isPresssed.set((p) => !p);
+    }
+  }
+
+  #onMaybePress(event: Event) {
+    const disabled = this.$props.disabled() || this.el!.hasAttribute('data-disabled');
+
+    if (disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      return;
+    }
+
+    event.preventDefault();
+    (this.#delegate.onPress ?? this.#onPressed).call(this, event);
+  }
+
+  #onInteraction(event: Event) {
+    if (this.$props.disabled()) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+}