@hanifhan1f/vidstack-react 1.12.13

package/src/components/ui/title.tsx

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

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

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

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

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

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

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

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

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

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