@hanifhan1f/vidstack 1.12.13 → 1.12.18

package/src/components/ui/time.ts

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

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

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

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

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

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

@@ -1,52 +0,0 @@
-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;
-}