@hanifhan1f/vidstack-react 1.12.13 → 1.12.14

package/src/components/ui/title.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-
-import { useMediaState } from '../../hooks/use-media-state';
-import { Primitive, type PrimitivePropsWithRef } from '../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * Title
- * -----------------------------------------------------------------------------------------------*/
-
-export interface TitleProps extends PrimitivePropsWithRef<'span'> {}
-
-/**
- * This component is used to load and display the current media title.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/display/title}
- * @example
- * ```tsx
- * <Title />
- * ```
- */
-const Title = React.forwardRef<HTMLElement, TitleProps>(({ children, ...props }, forwardRef) => {
-  const $title = useMediaState('title');
-  return (
-    <Primitive.span {...props} ref={forwardRef as React.Ref<any>}>
-      {$title}
-      {children}
-    </Primitive.span>
-  );
-});
-
-Title.displayName = 'Title';
-export { Title };

package/src/components/ui/tooltip.tsx

@@ -1,135 +0,0 @@
-import * as React from 'react';
-
-import {
-  composeRefs,
-  createReactComponent,
-  type ReactElementProps,
-  type ReactProps,
-} from 'maverick.js/react';
-
-import {
-  TooltipContentInstance,
-  TooltipInstance,
-  TooltipTriggerInstance,
-} from '../primitives/instances';
-import { Primitive } from '../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * Tooltip
- * -----------------------------------------------------------------------------------------------*/
-
-const TooltipBridge = createReactComponent(TooltipInstance);
-
-export interface RootProps extends ReactProps<TooltipInstance> {
-  asChild?: boolean;
-  children: React.ReactNode;
-}
-
-/**
- * A contextual text bubble that displays a description for an element that appears on pointer
- * hover or keyboard focus.
- *
- * @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}
- * @example
- * ```tsx
- * <Tooltip.Root>
- *   <Tooltip.Trigger></Tooltip.Trigger>
- *   <Tooltip.Content></Tooltip.Content>
- * </Tooltip.Root>
- * ```
- */
-function Root({ children, ...props }: RootProps) {
-  return <TooltipBridge {...props}>{children}</TooltipBridge>;
-}
-
-Root.displayName = 'Tooltip';
-
-/* -------------------------------------------------------------------------------------------------
- * TooltipTrigger
- * -----------------------------------------------------------------------------------------------*/
-
-const TriggerBridge = createReactComponent(TooltipTriggerInstance);
-
-export interface TriggerProps extends ReactElementProps<TooltipTriggerInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLButtonElement>;
-}
-
-/**
- * Wraps the element that will trigger showing/hiding the tooltip on hover or keyboard focus. The
- * tooltip content is positioned relative to this element.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/tooltip}
- * @example
- * ```tsx
- * <Tooltip.Root>
- *   <Tooltip.Trigger></Tooltip.Trigger>
- *   <Tooltip.Content></Tooltip.Content>
- * </Tooltip.Root>
- * ```
- */
-const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <TriggerBridge {...(props as Omit<TriggerProps, 'ref'>)}>
-        {(props) => (
-          <Primitive.button
-            {...props}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-          >
-            {children}
-          </Primitive.button>
-        )}
-      </TriggerBridge>
-    );
-  },
-);
-
-Trigger.displayName = 'TooltipTrigger';
-
-/* -------------------------------------------------------------------------------------------------
- * TooltipContent
- * -----------------------------------------------------------------------------------------------*/
-
-const ContentBridge = createReactComponent(TooltipContentInstance);
-
-export interface ContentProps extends ReactElementProps<TooltipContentInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLElement>;
-}
-
-/**
- * This component contains the content that is visible when the tooltip trigger is interacted with.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/tooltip}
- * @example
- * ```tsx
- * <Tooltip.Root>
- *   <Tooltip.Trigger></Tooltip.Trigger>
- *   <Tooltip.Content></Tooltip.Content>
- * </Tooltip.Root>
- * ```
- */
-const Content = React.forwardRef<HTMLElement, ContentProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <ContentBridge {...(props as Omit<ContentProps, 'ref'>)}>
-        {(props) => (
-          <Primitive.div
-            {...props}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-          >
-            {children}
-          </Primitive.div>
-        )}
-      </ContentBridge>
-    );
-  },
-);
-
-Content.displayName = 'TooltipContent';
-
-export { Root, Trigger, Content };

package/src/globals.d.ts

@@ -1,3 +0,0 @@
-/// <reference path="../../vidstack/src/globals.d.ts" />
-
-export {};

package/src/hooks/create-text-track.ts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-
-import { TextTrack, type TextTrackInit } from 'vidstack';
-
-import { useMediaContext } from './use-media-context';
-
-/**
- * Creates a new `TextTrack` object and adds it to the player.
- *
- * @docs {@link https://www.vidstack.io/docs/player/api/hooks/create-text-track}
- */
-export function createTextTrack(init: TextTrackInit) {
-  const media = useMediaContext(),
-    track = React.useMemo(() => new TextTrack(init), Object.values(init));
-
-  React.useEffect(() => {
-    media.textTracks.add(track);
-    return () => void media.textTracks.remove(track);
-  }, [track]);
-
-  return track;
-}

package/src/hooks/options/use-audio-gain-options.ts

@@ -1,75 +0,0 @@
-import * as React from 'react';
-
-import { useSignal } from 'maverick.js/react';
-import { DEFAULT_AUDIO_GAINS } from 'vidstack';
-
-import { useMediaContext } from '../use-media-context';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-audio-gain-options}
- */
-export function useAudioGainOptions({
-  gains = DEFAULT_AUDIO_GAINS,
-  disabledLabel = 'disabled',
-}: UseAudioGainOptions = {}): AudioGainOptions {
-  const media = useMediaContext(),
-    { audioGain, canSetAudioGain } = media.$state;
-
-  useSignal(audioGain);
-  useSignal(canSetAudioGain);
-
-  return React.useMemo(() => {
-    const options = gains.map<AudioGainOption>((opt) => {
-      const label =
-          typeof opt === 'number'
-            ? opt === 1 && disabledLabel
-              ? disabledLabel
-              : opt * 100 + '%'
-            : opt.label,
-        gain = typeof opt === 'number' ? opt : opt.gain;
-      return {
-        label,
-        value: gain.toString(),
-        gain,
-        get selected() {
-          return audioGain() === gain;
-        },
-        select(trigger) {
-          media.remote.changeAudioGain(gain, trigger);
-        },
-      };
-    });
-
-    Object.defineProperty(options, 'disabled', {
-      get() {
-        return !canSetAudioGain() || !options.length;
-      },
-    });
-
-    Object.defineProperty(options, 'selectedValue', {
-      get() {
-        return audioGain()?.toString();
-      },
-    });
-
-    return options as AudioGainOptions;
-  }, [gains]);
-}
-
-export interface UseAudioGainOptions {
-  gains?: (number | { label: string; gain: number })[];
-  disabledLabel?: string | null;
-}
-
-export type AudioGainOptions = AudioGainOption[] & {
-  readonly disabled: boolean;
-  readonly selectedValue: string | undefined;
-};
-
-export interface AudioGainOption {
-  readonly label: string;
-  readonly value: string;
-  readonly gain: number;
-  readonly selected: boolean;
-  select(trigger?: Event): void;
-}

package/src/hooks/options/use-audio-options.ts

@@ -1,71 +0,0 @@
-import * as React from 'react';
-
-import { useSignal } from 'maverick.js/react';
-import { type AudioTrack } from 'vidstack';
-
-import { useMediaContext } from '../use-media-context';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-audio-options}
- */
-export function useAudioOptions(): AudioOptions {
-  const media = useMediaContext(),
-    { audioTracks, audioTrack } = media.$state,
-    $audioTracks = useSignal(audioTracks);
-
-  useSignal(audioTrack);
-
-  return React.useMemo(() => {
-    const options = $audioTracks.map<AudioOption>((track) => ({
-      track,
-      label: track.label,
-      value: getTrackValue(track),
-      get selected() {
-        return audioTrack() === track;
-      },
-      select(trigger) {
-        const index = audioTracks().indexOf(track);
-        if (index >= 0) media.remote.changeAudioTrack(index, trigger);
-      },
-    }));
-
-    Object.defineProperty(options, 'disabled', {
-      get() {
-        return options.length <= 1;
-      },
-    });
-
-    Object.defineProperty(options, 'selectedTrack', {
-      get() {
-        return audioTrack();
-      },
-    });
-
-    Object.defineProperty(options, 'selectedValue', {
-      get() {
-        const track = audioTrack();
-        return track ? getTrackValue(track) : undefined;
-      },
-    });
-
-    return options as AudioOptions;
-  }, [$audioTracks]);
-}
-
-export type AudioOptions = AudioOption[] & {
-  readonly disabled: boolean;
-  readonly selectedTrack: AudioTrack | null;
-  readonly selectedValue: string | undefined;
-};
-
-export interface AudioOption {
-  readonly track: AudioTrack;
-  readonly label: string;
-  readonly value: string;
-  readonly selected: boolean;
-  select(trigger?: Event): void;
-}
-
-function getTrackValue(track: AudioTrack) {
-  return track.label.toLowerCase();
-}

package/src/hooks/options/use-caption-options.ts

@@ -1,95 +0,0 @@
-import * as React from 'react';
-
-import { useSignal } from 'maverick.js/react';
-import { isString } from 'maverick.js/std';
-import { isTrackCaptionKind, type TextTrack } from 'vidstack';
-
-import { useMediaContext } from '../use-media-context';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-caption-options}
- */
-export function useCaptionOptions({ off = true }: UseCaptionOptions = {}): CaptionOptions {
-  const media = useMediaContext(),
-    { textTracks, textTrack } = media.$state,
-    $textTracks = useSignal(textTracks);
-
-  useSignal(textTrack);
-
-  return React.useMemo(() => {
-    const captionTracks = $textTracks.filter(isTrackCaptionKind),
-      options = captionTracks.map<CaptionOption>((track) => ({
-        track,
-        label: track.label,
-        value: getTrackValue(track),
-        get selected() {
-          return textTrack() === track;
-        },
-        select(trigger) {
-          const index = textTracks().indexOf(track);
-          if (index >= 0) media.remote.changeTextTrackMode(index, 'showing', trigger);
-        },
-      }));
-
-    if (off) {
-      options.unshift({
-        track: null,
-        label: isString(off) ? off : 'Off',
-        value: 'off',
-        get selected() {
-          return !textTrack();
-        },
-        select(trigger) {
-          media.remote.toggleCaptions(trigger);
-        },
-      });
-    }
-
-    Object.defineProperty(options, 'disabled', {
-      get() {
-        return !captionTracks.length;
-      },
-    });
-
-    Object.defineProperty(options, 'selectedTrack', {
-      get() {
-        return textTrack();
-      },
-    });
-
-    Object.defineProperty(options, 'selectedValue', {
-      get() {
-        const track = textTrack();
-        return track ? getTrackValue(track) : 'off';
-      },
-    });
-
-    return options as CaptionOptions;
-  }, [$textTracks]);
-}
-
-export interface UseCaptionOptions {
-  /**
-   * Whether an option should be included for turning off all captions. A string can be provided
-   * to specify the label.
-   */
-  off?: boolean | string;
-}
-
-export type CaptionOptions = CaptionOption[] & {
-  readonly disabled: boolean;
-  readonly selectedTrack: TextTrack | null;
-  readonly selectedValue: string;
-};
-
-export interface CaptionOption {
-  readonly track: TextTrack | null;
-  readonly label: string;
-  readonly value: string;
-  readonly selected: boolean;
-  select(trigger?: Event): void;
-}
-
-function getTrackValue(track: TextTrack) {
-  return track.id + ':' + track.kind + '-' + track.label.toLowerCase();
-}

package/src/hooks/options/use-chapter-options.ts

@@ -1,97 +0,0 @@
-import * as React from 'react';
-
-import { effect, type StopEffect } from 'maverick.js';
-import { useSignal } from 'maverick.js/react';
-import type { VTTCue } from 'media-captions';
-import { formatSpokenTime, formatTime } from 'vidstack';
-
-import { useActiveTextCues } from '../use-active-text-cues';
-import { useActiveTextTrack } from '../use-active-text-track';
-import { useMediaContext } from '../use-media-context';
-import { useTextCues } from '../use-text-cues';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-chapter-options}
- */
-export function useChapterOptions(): ChapterOptions {
-  const media = useMediaContext(),
-    track = useActiveTextTrack('chapters'),
-    cues = useTextCues(track),
-    $startTime = useSignal(media.$state.seekableStart),
-    $endTime = useSignal(media.$state.seekableEnd);
-
-  useActiveTextCues(track);
-
-  return React.useMemo(() => {
-    const options = track
-      ? cues
-          .filter((cue) => cue.startTime <= $endTime && cue.endTime >= $startTime)
-          .map<ChapterOption>((cue, i) => {
-            let currentRef: HTMLElement | null = null,
-              stopProgressEffect: StopEffect | undefined;
-            return {
-              cue,
-              label: cue.text,
-              value: i.toString(),
-              startTimeText: formatTime(Math.max(0, cue.startTime - $startTime)),
-              durationText: formatSpokenTime(
-                Math.min($endTime, cue.endTime) - Math.max($startTime, cue.startTime),
-              ),
-              get selected() {
-                return cue === track.activeCues[0];
-              },
-              setProgressVar(ref) {
-                if (!ref || cue !== track.activeCues[0]) {
-                  stopProgressEffect?.();
-                  stopProgressEffect = undefined;
-                  ref?.style.setProperty('--progress', '0%');
-                  currentRef = null;
-                  return;
-                }
-
-                if (currentRef === ref) return;
-                currentRef = ref;
-
-                stopProgressEffect?.();
-                stopProgressEffect = effect(() => {
-                  const { realCurrentTime } = media.$state,
-                    time = realCurrentTime(),
-                    cueStartTime = Math.max($startTime, cue.startTime),
-                    duration = Math.min($endTime, cue.endTime) - cueStartTime,
-                    progress = (Math.max(0, time - cueStartTime) / duration) * 100;
-
-                  ref.style.setProperty('--progress', progress.toFixed(3) + '%');
-                });
-              },
-              select(trigger) {
-                media.remote.seek(cue.startTime - $startTime, trigger);
-              },
-            };
-          })
-      : [];
-
-    Object.defineProperty(options, 'selectedValue', {
-      get() {
-        const index = options.findIndex((option) => option.selected);
-        return (index >= 0 ? index : 0).toString();
-      },
-    });
-
-    return options as ChapterOptions;
-  }, [cues, $startTime, $endTime]);
-}
-
-export type ChapterOptions = ChapterOption[] & {
-  readonly selectedValue: string | undefined;
-};
-
-export interface ChapterOption {
-  readonly cue: VTTCue;
-  readonly label: string;
-  readonly value: string;
-  readonly selected: boolean;
-  readonly startTimeText: string;
-  readonly durationText: string;
-  select(trigger?: Event): void;
-  setProgressVar(ref: HTMLElement | null): void;
-}

package/src/hooks/options/use-playback-rate-options.ts

@@ -1,75 +0,0 @@
-import * as React from 'react';
-
-import { useSignal } from 'maverick.js/react';
-import { DEFAULT_PLAYBACK_RATES } from 'vidstack';
-
-import { useMediaContext } from '../use-media-context';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-playback-rate-options}
- */
-export function usePlaybackRateOptions({
-  rates = DEFAULT_PLAYBACK_RATES,
-  normalLabel = 'Normal',
-}: UsePlaybackRateOptions = {}): PlaybackRateOptions {
-  const media = useMediaContext(),
-    { playbackRate, canSetPlaybackRate } = media.$state;
-
-  useSignal(playbackRate);
-  useSignal(canSetPlaybackRate);
-
-  return React.useMemo(() => {
-    const options = rates.map<PlaybackRateOption>((opt) => {
-      const label =
-          typeof opt === 'number'
-            ? opt === 1 && normalLabel
-              ? normalLabel
-              : opt + 'x'
-            : opt.label,
-        rate = typeof opt === 'number' ? opt : opt.rate;
-      return {
-        label,
-        value: rate.toString(),
-        rate,
-        get selected() {
-          return playbackRate() === rate;
-        },
-        select(trigger) {
-          media.remote.changePlaybackRate(rate, trigger);
-        },
-      };
-    });
-
-    Object.defineProperty(options, 'disabled', {
-      get() {
-        return !canSetPlaybackRate() || !options.length;
-      },
-    });
-
-    Object.defineProperty(options, 'selectedValue', {
-      get() {
-        return playbackRate().toString();
-      },
-    });
-
-    return options as PlaybackRateOptions;
-  }, [rates]);
-}
-
-export interface UsePlaybackRateOptions {
-  rates?: (number | { label: string; rate: number })[];
-  normalLabel?: string | null;
-}
-
-export type PlaybackRateOptions = PlaybackRateOption[] & {
-  readonly disabled: boolean;
-  readonly selectedValue: string | undefined;
-};
-
-export interface PlaybackRateOption {
-  readonly label: string;
-  readonly value: string;
-  readonly rate: number;
-  readonly selected: boolean;
-  select(trigger?: Event): void;
-}