@hanifhan1f/vidstack 1.12.13

package/src/components/ui/time.ts

@@ -0,0 +1,191 @@
+import { Component, effect, onDispose, signal, State } from 'maverick.js';
+import { setAttribute } from 'maverick.js/std';
+
+import { useMediaContext, type MediaContext } from '../../core/api/media-context';
+import { IntersectionObserverController } from '../../foundation/observers/intersection-observer';
+import { observeVisibility, onPress } from '../../utils/dom';
+import { formatTime } from '../../utils/time';
+
+/**
+ * Outputs a media duration (eg: `currentTime`, `duration`, `bufferedAmount`, etc.) value as time
+ * formatted text.
+ *
+ * @attr data-type - The type prop setting (current, duration, etc.).
+ * @attr data-remainder - Whether time remaining is being shown.
+ * @docs {@link https://www.vidstack.io/docs/player/components/display/time}
+ */
+export class Time extends Component<TimeProps, TimeState> {
+  static props: TimeProps = {
+    type: 'current',
+    showHours: false,
+    padHours: null,
+    padMinutes: null,
+    remainder: false,
+    toggle: false,
+    hidden: false,
+  };
+
+  static state = new State<TimeState>({
+    timeText: '',
+    hidden: false,
+  });
+
+  #media!: MediaContext;
+  #invert = signal<boolean | null>(null);
+  #isVisible = signal(true);
+  #isIntersecting = signal(true);
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+    this.#watchTime();
+
+    const { type } = this.$props;
+    this.setAttributes({
+      'data-type': type,
+      'data-remainder': this.#shouldInvert.bind(this),
+    });
+
+    new IntersectionObserverController({
+      callback: this.#onIntersectionChange.bind(this),
+    }).attach(this);
+  }
+
+  protected override onAttach(el: HTMLElement) {
+    if (!el.hasAttribute('role')) effect(this.#watchRole.bind(this));
+    effect(this.#watchTime.bind(this));
+  }
+
+  protected override onConnect(el: HTMLElement): void {
+    onDispose(observeVisibility(el, this.#isVisible.set));
+
+    effect(this.#watchHidden.bind(this));
+    effect(this.#watchToggle.bind(this));
+  }
+
+  #onIntersectionChange(entries: IntersectionObserverEntry[]) {
+    this.#isIntersecting.set(entries[0].isIntersecting);
+  }
+
+  #watchHidden() {
+    const { hidden } = this.$props;
+    this.$state.hidden.set(hidden() || !this.#isVisible() || !this.#isIntersecting());
+  }
+
+  #watchToggle() {
+    if (!this.$props.toggle()) {
+      this.#invert.set(null);
+      return;
+    }
+
+    if (this.el) {
+      onPress(this.el, this.#onToggle.bind(this));
+    }
+  }
+
+  #watchTime() {
+    const { hidden, timeText } = this.$state,
+      { duration } = this.#media.$state;
+
+    if (hidden()) return;
+
+    const { type, padHours, padMinutes, showHours } = this.$props,
+      seconds = this.#getSeconds(type()),
+      $duration = duration(),
+      shouldInvert = this.#shouldInvert();
+
+    if (!Number.isFinite(seconds + $duration)) {
+      timeText.set('LIVE');
+      return;
+    }
+
+    const time = shouldInvert ? Math.max(0, $duration - seconds) : seconds,
+      formattedTime = formatTime(time, {
+        padHrs: padHours(),
+        padMins: padMinutes(),
+        showHrs: showHours(),
+      });
+
+    timeText.set((shouldInvert ? '-' : '') + formattedTime);
+  }
+
+  #watchRole() {
+    if (!this.el) return;
+    const { toggle } = this.$props;
+    setAttribute(this.el, 'role', toggle() ? 'timer' : null);
+    setAttribute(this.el, 'tabindex', toggle() ? 0 : null);
+  }
+
+  #getSeconds(type: TimeProps['type']) {
+    const { bufferedEnd, duration, currentTime } = this.#media.$state;
+    switch (type) {
+      case 'buffered':
+        return bufferedEnd();
+      case 'duration':
+        return duration();
+      default:
+        return currentTime();
+    }
+  }
+
+  #shouldInvert() {
+    return this.$props.remainder() && this.#invert() !== false;
+  }
+
+  #onToggle(event: Event) {
+    event.preventDefault();
+
+    if (this.#invert() === null) {
+      this.#invert.set(!this.$props.remainder());
+      return;
+    }
+
+    this.#invert.set((v) => !v);
+  }
+}
+
+export interface TimeProps {
+  /**
+   * The type of media time to track.
+   */
+  type: 'current' | 'buffered' | 'duration';
+  /**
+   * Whether the time should always show the hours unit, even if the time is less than
+   * 1 hour.
+   *
+   * @example `20:30 -> 0:20:35`
+   */
+  showHours: boolean;
+  /**
+   * Whether the hours unit should be padded with zeroes to a length of 2.
+   *
+   * @example `1:20:03 -> 01:20:03`
+   */
+  padHours: boolean | null;
+  /**
+   * Whether the minutes unit should be padded with zeroes to a length of 2.
+   *
+   * @example `5:22 -> 05:22`
+   */
+  padMinutes: boolean | null;
+  /**
+   * Whether to display the remaining time from the current type, until the duration is reached.
+   *
+   * @example `duration` - `currentTime`
+   */
+  remainder: boolean;
+  /**
+   * Whether on press the time should invert showing the remaining time (i.e., toggle the
+   * `remainder` prop).
+   */
+  toggle: boolean;
+  /**
+   * Provides a hint that the time is not visible and stops all events and updates to be more
+   * power efficient.
+   */
+  hidden: boolean;
+}
+
+export interface TimeState {
+  timeText: string;
+  hidden: boolean;
+}

package/src/components/ui/tooltip/tooltip-content.ts

@@ -0,0 +1,105 @@
+import { Component, effect, onDispose, useContext } from 'maverick.js';
+
+import { FocusVisibleController } from '../../../foundation/observers/focus-visible';
+import { autoPlacement, requestScopedAnimationFrame } from '../../../utils/dom';
+import { tooltipContext } from './tooltip-context';
+
+/**
+ * This component contains the content that is visible when the tooltip trigger is interacted with.
+ *
+ * @attr data-visible - Whether tooltip is visible.
+ * @attr data-placement - The placement prop setting.
+ * @attr data-hocus - Whether tooltip is being keyboard focused or hovered over.
+ * @docs {@link https://www.vidstack.io/docs/player/components/tooltip}
+ */
+export class TooltipContent extends Component<TooltipContentProps> {
+  static props: TooltipContentProps = {
+    placement: 'top center',
+    offset: 0,
+    alignOffset: 0,
+  };
+
+  constructor() {
+    super();
+    new FocusVisibleController();
+
+    const { placement } = this.$props;
+    this.setAttributes({
+      'data-placement': placement,
+    });
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    this.#attach(el);
+
+    Object.assign(el.style, {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: 'max-content',
+    });
+  }
+
+  protected override onConnect(el: HTMLElement): void {
+    this.#attach(el);
+
+    const tooltip = useContext(tooltipContext);
+    onDispose(() => tooltip.detachContent(el));
+
+    onDispose(
+      requestScopedAnimationFrame(() => {
+        if (!this.connectScope) return;
+        effect(this.#watchPlacement.bind(this));
+      }),
+    );
+  }
+
+  #attach(el: HTMLElement) {
+    const tooltip = useContext(tooltipContext);
+    tooltip.attachContent(el);
+  }
+
+  #watchPlacement() {
+    const { showing } = useContext(tooltipContext);
+    if (!showing()) return;
+
+    const { placement, offset: mainOffset, alignOffset } = this.$props;
+    return autoPlacement(this.el, this.#getTrigger(), placement(), {
+      offsetVarName: 'media-tooltip',
+      xOffset: alignOffset(),
+      yOffset: mainOffset(),
+    });
+  }
+
+  #getTrigger() {
+    return useContext(tooltipContext).trigger();
+  }
+}
+
+export type TooltipPlacement =
+  | TooltipPlacementSide
+  | `${TooltipPlacementSide} ${TooltipPlacementAlign}`;
+
+export type TooltipPlacementSide = 'top' | 'right' | 'bottom' | 'left';
+export type TooltipPlacementAlign = 'start' | 'center' | 'end';
+
+export interface TooltipContentProps {
+  /**
+   * A space-separated list which specifies the side and alignment of the tooltip content relative
+   * to the trigger.
+   *
+   * @example `top center`
+   * @example `bottom end`
+   */
+  placement: TooltipPlacement;
+  /**
+   * The distance in pixels between the content and the tooltip trigger. You can also set
+   * the CSS variable `--media-tooltip-y-offset` to adjust this offset.
+   */
+  offset: number;
+  /**
+   * The offset in pixels from the start/center/end aligned position. You can also set
+   * the CSS variable `--media-tooltip-x-offset` to adjust this offset.
+   */
+  alignOffset: number;
+}

package/src/components/ui/tooltip/tooltip-context.ts

@@ -0,0 +1,13 @@
+import { createContext, type ReadSignal } from 'maverick.js';
+
+export interface TooltipContext {
+  trigger: ReadSignal<HTMLElement | null>;
+  content: ReadSignal<HTMLElement | null>;
+  showing: ReadSignal<boolean>;
+  attachTrigger(el: HTMLElement): void;
+  detachTrigger(el: HTMLElement): void;
+  attachContent(el: HTMLElement): void;
+  detachContent(el: HTMLElement): void;
+}
+
+export const tooltipContext = createContext<TooltipContext>();

package/src/components/ui/tooltip/tooltip-trigger.ts

@@ -0,0 +1,49 @@
+import { Component, onDispose, useContext } from 'maverick.js';
+
+import { FocusVisibleController } from '../../../foundation/observers/focus-visible';
+import { requestScopedAnimationFrame } from '../../../utils/dom';
+import { tooltipContext } from './tooltip-context';
+
+/**
+ * Wraps the element that will trigger showing/hiding the tooltip on hover or keyboard focus. The
+ * tooltip content is positioned relative to this element.
+ *
+ * @attr data-visible - Whether tooltip is visible.
+ * @attr data-hocus - Whether tooltip is being keyboard focused or hovered over.
+ * @docs {@link https://www.vidstack.io/docs/player/components/tooltip}
+ */
+export class TooltipTrigger extends Component {
+  constructor() {
+    super();
+    new FocusVisibleController();
+  }
+
+  protected override onConnect(el: HTMLElement): void {
+    onDispose(
+      requestScopedAnimationFrame(() => {
+        if (!this.connectScope) return;
+        this.#attach();
+        const tooltip = useContext(tooltipContext);
+        onDispose(() => {
+          const button = this.#getButton();
+          button && tooltip.detachTrigger(button);
+        });
+      }),
+    );
+  }
+
+  #attach() {
+    const button = this.#getButton(),
+      tooltip = useContext(tooltipContext);
+    button && tooltip.attachTrigger(button);
+  }
+
+  #getButton() {
+    const candidate = this.el!.firstElementChild;
+    return (
+      candidate?.localName === 'button' || candidate?.getAttribute('role') === 'button'
+        ? candidate
+        : this.el!
+    ) as HTMLElement | null;
+  }
+}

package/src/components/ui/tooltip/tooltip.ts

@@ -0,0 +1,127 @@
+import { Component, effect, provideContext, signal } from 'maverick.js';
+import { EventsController, listenEvent, setAttribute } from 'maverick.js/std';
+
+import { $keyboard, FocusVisibleController } from '../../../foundation/observers/focus-visible';
+import { setAttributeIfEmpty } from '../../../utils/dom';
+import { Popper } from '../popper/popper';
+import { tooltipContext, type TooltipContext } from './tooltip-context';
+
+let id = 0;
+
+/**
+ * A contextual text bubble that displays a description for an element that appears on pointer
+ * hover or keyboard focus.
+ *
+ * @attr data-visible - Whether tooltip is visible.
+ * @attr data-hocus - Whether tooltip is being keyboard focused or hovered over.
+ * @docs {@link https://www.vidstack.io/docs/player/components/tooltip}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role}
+ */
+export class Tooltip extends Component<TooltipProps> {
+  static props: TooltipProps = {
+    showDelay: 700,
+  };
+
+  #id = `media-tooltip-${++id}`;
+
+  #trigger = signal<HTMLElement | null>(null);
+  #content = signal<HTMLElement | null>(null);
+  #showing = signal(false);
+
+  constructor() {
+    super();
+
+    new FocusVisibleController();
+
+    const { showDelay } = this.$props;
+
+    new Popper({
+      trigger: this.#trigger,
+      content: this.#content,
+      showDelay: showDelay,
+      listen(trigger, show, hide) {
+        effect(() => {
+          if ($keyboard()) listenEvent(trigger, 'focus', show);
+          listenEvent(trigger, 'blur', hide);
+        });
+
+        new EventsController(trigger)
+          .add('touchstart', (e) => e.preventDefault(), { passive: false })
+          .add('mouseenter', show)
+          .add('mouseleave', hide);
+      },
+
+      onChange: this.#onShowingChange.bind(this),
+    });
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    el.style.setProperty('display', 'contents');
+  }
+
+  protected override onSetup(): void {
+    provideContext(tooltipContext, {
+      trigger: this.#trigger,
+      content: this.#content,
+      showing: this.#showing,
+      attachTrigger: this.#attachTrigger.bind(this),
+      detachTrigger: this.#detachTrigger.bind(this),
+      attachContent: this.#attachContent.bind(this),
+      detachContent: this.#detachContent.bind(this),
+    });
+  }
+
+  #attachTrigger(el: HTMLElement) {
+    this.#trigger.set(el);
+
+    let tooltipName = el.getAttribute('data-media-tooltip');
+    if (tooltipName) {
+      this.el?.setAttribute(`data-media-${tooltipName}-tooltip`, '');
+    }
+
+    setAttribute(el, 'data-describedby', this.#id);
+  }
+
+  #detachTrigger(el: HTMLElement) {
+    el.removeAttribute('data-describedby');
+    el.removeAttribute('aria-describedby');
+    this.#trigger.set(null);
+  }
+
+  #attachContent(el: HTMLElement) {
+    el.setAttribute('id', this.#id);
+    el.style.display = 'none';
+
+    setAttributeIfEmpty(el, 'role', 'tooltip');
+
+    this.#content.set(el);
+  }
+
+  #detachContent(el: HTMLElement) {
+    el.removeAttribute('id');
+    el.removeAttribute('role');
+    this.#content.set(null);
+  }
+
+  #onShowingChange(isShowing: boolean) {
+    const trigger = this.#trigger(),
+      content = this.#content();
+
+    if (trigger) {
+      setAttribute(trigger, 'aria-describedby', isShowing ? this.#id : null);
+    }
+
+    for (const el of [this.el, trigger, content]) {
+      el && setAttribute(el, 'data-visible', isShowing);
+    }
+
+    this.#showing.set(isShowing);
+  }
+}
+
+export interface TooltipProps {
+  /**
+   * The amount of time in milliseconds to wait before showing a tooltip.
+   */
+  showDelay: number;
+}

package/src/core/api/media-attrs.ts

@@ -0,0 +1,35 @@
+import type { MediaState } from './player-state';
+
+export const MEDIA_ATTRIBUTES = Symbol(__DEV__ ? 'MEDIA_ATTRIBUTES' : 0);
+
+export const mediaAttributes: (keyof MediaState)[] = [
+  'autoPlay',
+  'canAirPlay',
+  'canFullscreen',
+  'canGoogleCast',
+  'canLoad',
+  'canLoadPoster',
+  'canPictureInPicture',
+  'canPlay',
+  'canSeek',
+  'ended',
+  'fullscreen',
+  'isAirPlayConnected',
+  'isGoogleCastConnected',
+  'live',
+  'liveEdge',
+  'loop',
+  'mediaType',
+  'muted',
+  'paused',
+  'pictureInPicture',
+  'playing',
+  'playsInline',
+  'remotePlaybackState',
+  'remotePlaybackType',
+  'seeking',
+  'started',
+  'streamType',
+  'viewType',
+  'waiting',
+];

package/src/core/api/media-context.ts

@@ -0,0 +1,52 @@
+import {
+  createContext,
+  useContext,
+  type ReadSignal,
+  type ReadSignalRecord,
+  type WriteSignal,
+} from 'maverick.js';
+
+import type { MediaPlayer } from '../../components/player';
+import type { Logger } from '../../foundation/logger/controller';
+import type { MediaProviderAdapter } from '../../providers/types';
+import type { MediaKeyShortcuts } from '../keyboard/types';
+import type { VideoQualityList } from '../quality/video-quality';
+import type { MediaPlayerDelegate } from '../state/media-player-delegate';
+import type { MediaStorage } from '../state/media-storage';
+import type { MediaRemoteControl } from '../state/remote-control';
+import type { AudioTrackList } from '../tracks/audio/audio-tracks';
+import type { TextRenderers } from '../tracks/text/render/text-renderer';
+import type { TextTrackList } from '../tracks/text/text-tracks';
+import type { MediaPlayerProps } from './player-props';
+import type { PlayerStore } from './player-state';
+
+export interface MediaContext {
+  player: MediaPlayer;
+  storage: MediaStorage | null;
+  remote: MediaRemoteControl;
+  delegate: MediaPlayerDelegate;
+  qualities: VideoQualityList;
+  audioTracks: AudioTrackList;
+  textTracks: TextTrackList;
+  textRenderers: TextRenderers;
+  ariaKeys: MediaKeyShortcuts;
+  logger?: Logger;
+  $provider: WriteSignal<MediaProviderAdapter | null>;
+  $providerSetup: WriteSignal<boolean>;
+  $props: ReadSignalRecord<MediaPlayerProps>;
+  $state: PlayerStore;
+  activeMenu?: {
+    close(trigger?: Event): void;
+  } | null;
+  notify: MediaPlayerDelegate['notify'];
+}
+
+export const mediaContext = createContext<MediaContext>();
+
+export function useMediaContext(): MediaContext {
+  return useContext(mediaContext);
+}
+
+export function useMediaState() {
+  return useMediaContext().$state;
+}