@hanifhan1f/vidstack-react 1.12.13

package/src/components/ui/sliders/time-slider.tsx

@@ -0,0 +1,379 @@
+import * as React from 'react';
+
+import { effect, signal, type WriteSignal } from 'maverick.js';
+import {
+  composeRefs,
+  createReactComponent,
+  useSignal,
+  useStateContext,
+  type ReactElementProps,
+} from 'maverick.js/react';
+import type { VTTCue } from 'media-captions';
+import { mediaState } from 'vidstack';
+
+import { createVTTCue } from '../../../utils';
+import {
+  SliderChaptersInstance,
+  SliderThumbnailInstance,
+  SliderVideoInstance,
+  TimeSliderInstance,
+} from '../../primitives/instances';
+import { Primitive, type PrimitivePropsWithRef } from '../../primitives/nodes';
+import * as ThumbnailBase from '../thumbnail';
+import { sliderCallbacks } from './slider-callbacks';
+
+/* -------------------------------------------------------------------------------------------------
+ * TimeSliderContext
+ * -----------------------------------------------------------------------------------------------*/
+
+const TimeSliderContext = React.createContext<TimeSliderContext>({
+  $chapters: signal<SliderChaptersInstance | null>(null),
+});
+
+interface TimeSliderContext {
+  $chapters: WriteSignal<SliderChaptersInstance | null>;
+}
+
+TimeSliderContext.displayName = 'TimeSliderContext';
+
+/* -------------------------------------------------------------------------------------------------
+ * TimeSlider
+ * -----------------------------------------------------------------------------------------------*/
+
+const TimeSliderBridge = createReactComponent(TimeSliderInstance, {
+  events: sliderCallbacks,
+  domEventsRegex: /^onMedia/,
+});
+
+export interface RootProps extends ReactElementProps<TimeSliderInstance> {
+  asChild?: boolean;
+  children?: React.ReactNode;
+  ref?: React.Ref<TimeSliderInstance>;
+}
+
+/**
+ * Versatile and user-friendly input time control designed for seamless cross-browser and provider
+ * compatibility and accessibility with ARIA support. It offers a smooth user experience for both
+ * mouse and touch interactions and is highly customizable in terms of styling. Users can
+ * effortlessly change the current playback time within the range 0 to seekable end.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/time-slider}
+ * @example
+ * ```tsx
+ * <TimeSlider.Root>
+ *   <TimeSlider.Track>
+ *     <TimeSlider.TrackFill />
+ *     <TimeSlider.Progress />
+ *   </TimeSlider.Track>
+ *   <TimeSlider.Thumb />
+ * </TimeSlider.Root>
+ * ```
+ */
+const Root = React.forwardRef<TimeSliderInstance, RootProps>(
+  ({ children, ...props }, forwardRef) => {
+    const $chapters = React.useMemo(() => signal<SliderChaptersInstance | null>(null), []);
+    return (
+      <TimeSliderContext.Provider value={{ $chapters }}>
+        <TimeSliderBridge {...props} ref={forwardRef}>
+          {(props) => <Primitive.div {...props}>{children}</Primitive.div>}
+        </TimeSliderBridge>
+      </TimeSliderContext.Provider>
+    );
+  },
+);
+
+Root.displayName = 'TimeSlider';
+
+/* -------------------------------------------------------------------------------------------------
+ * SliderChapters
+ * -----------------------------------------------------------------------------------------------*/
+
+const SliderChaptersBridge = createReactComponent(SliderChaptersInstance);
+
+export interface ChaptersProps extends Omit<ReactElementProps<SliderChaptersInstance>, 'children'> {
+  children: (cues: VTTCue[], forwardRef: React.RefCallback<HTMLElement>) => React.ReactNode;
+}
+
+/**
+ * Used to create predefined sections within a time slider interface based on the currently
+ * active chapters text track.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/slider-chapters}
+ * @example
+ * ```tsx
+ * <TimeSlider.Root>
+ *   <TimeSlider.Chapters>
+ *     {(cues, forwardRef) =>
+ *       cues.map((cue) => (
+ *         <div key={cue.startTime} ref={forwardRef}>
+ *           <TimeSlider.Track>
+ *             <TimeSlider.TrackFill />
+ *             <TimeSlider.Progress />
+ *           </TimeSlider.Track>
+ *        </div>
+ *     ))}
+ *   </TimeSlider.Chapters>
+ * </TimeSlider.Root>
+ * ```
+ */
+const Chapters = React.forwardRef<HTMLDivElement, ChaptersProps>(
+  ({ children, ...props }, forwardRef) => {
+    return (
+      <SliderChaptersBridge {...props}>
+        {(props, instance) => (
+          <Primitive.div
+            {...props}
+            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
+          >
+            <ChapterTracks instance={instance}>{children}</ChapterTracks>
+          </Primitive.div>
+        )}
+      </SliderChaptersBridge>
+    );
+  },
+);
+
+Chapters.displayName = 'SliderChapters';
+
+interface ChapterTracksProps {
+  instance: SliderChaptersInstance;
+  children: ChaptersProps['children'];
+}
+
+function ChapterTracks({ instance, children }: ChapterTracksProps) {
+  const $cues = useSignal(() => instance.cues, instance),
+    refs = React.useRef<HTMLElement[]>([]),
+    emptyCue = React.useRef<VTTCue>(null!),
+    { $chapters } = React.useContext(TimeSliderContext);
+
+  if (!emptyCue.current) {
+    emptyCue.current = createVTTCue();
+  }
+
+  React.useEffect(() => {
+    $chapters.set(instance);
+    return () => void $chapters.set(null);
+  }, [instance]);
+
+  React.useEffect(() => {
+    instance.setRefs(refs.current);
+  }, [$cues]);
+
+  return children($cues.length ? $cues : [emptyCue.current], (el) => {
+    if (!el) {
+      refs.current.length = 0;
+      return;
+    }
+
+    refs.current.push(el);
+  });
+}
+
+ChapterTracks.displayName = 'SliderChapterTracks';
+
+/* -------------------------------------------------------------------------------------------------
+ * SliderChapterTitle
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface ChapterTitleProps extends PrimitivePropsWithRef<'div'> {}
+
+/**
+ * Used to display the active cue text based on the slider value and preview value.
+ *
+ * @example
+ * ```tsx
+ * <TimeSlider.Root>
+ *   <TimeSlider.Preview>
+ *     <TimeSlider.Chapter />
+ *   </TimeSlider.Preview>
+ * </TimeSlider.Root>
+ * ```
+ */
+const ChapterTitle = React.forwardRef<HTMLElement, ChapterTitleProps>(
+  ({ children, ...props }, forwardRef) => {
+    const { $chapters } = React.useContext(TimeSliderContext)!,
+      [title, setTitle] = React.useState<string>();
+
+    React.useEffect(() => {
+      return effect(() => {
+        const chapters = $chapters(),
+          cue = chapters?.activePointerCue || chapters?.activeCue;
+        setTitle(cue?.text || '');
+      });
+    }, []);
+
+    return (
+      <Primitive.div {...props} ref={forwardRef as React.Ref<any>}>
+        {title}
+        {children}
+      </Primitive.div>
+    );
+  },
+);
+
+ChapterTitle.displayName = 'SliderChapterTitle';
+
+/* -------------------------------------------------------------------------------------------------
+ * SliderProgress
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface ProgressProps extends PrimitivePropsWithRef<'div'> {}
+
+/**
+ * Visual element inside the slider that serves as a horizontal or vertical bar, providing a
+ * visual reference for the range of playback that has buffered/loaded.
+ *
+ * @example
+ * ```tsx
+ * <TimeSlider.Root>
+ *   <TimeSlider.Track>
+ *     <TimeSlider.Progress />
+ *   </TimeSlider.Track>
+ * </TimeSlider.Root>
+ * ```
+ */
+const Progress = React.forwardRef<HTMLElement, ProgressProps>((props, forwardRef) => (
+  <Primitive.div {...props} ref={forwardRef as React.Ref<any>} />
+));
+
+Progress.displayName = 'SliderProgress';
+
+/* -------------------------------------------------------------------------------------------------
+ * SliderThumbnail
+ * -----------------------------------------------------------------------------------------------*/
+
+const SliderThumbnailBridge = createReactComponent(SliderThumbnailInstance);
+
+export interface ThumbnailProps extends ReactElementProps<SliderThumbnailInstance, HTMLElement> {
+  asChild?: boolean;
+  children?: React.ReactNode;
+  ref?: React.Ref<HTMLElement>;
+}
+
+export type ThumbnailImgProps = ThumbnailBase.ImgProps;
+
+/**
+ * Used to display preview thumbnails when the user is hovering or dragging the time slider.
+ * The time ranges in the WebVTT file will automatically be matched based on the current slider
+ * pointer position.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/slider-thumbnail}
+ *
+ * @example
+ * ```tsx
+ * <TimeSlider.Root>
+ *   <TimeSlider.Preview>
+ *     <TimeSlider.Thumbnail.Root src="thumbnails.vtt">
+ *       <TimeSlider.Thumbnail.Img />
+ *     </TimeSlider.Thumbnail.Root>
+ *   </TimeSlider.Preview>
+ * </TimeSlider.Root>
+ * ```
+ */
+const ThumbnailRoot = React.forwardRef<HTMLElement, ThumbnailProps>(
+  ({ children, ...props }, forwardRef) => {
+    return (
+      <SliderThumbnailBridge {...(props as Omit<ThumbnailProps, 'ref'>)}>
+        {(props) => (
+          <Primitive.div {...props} ref={composeRefs(props.ref as React.Ref<any>, forwardRef)}>
+            {children}
+          </Primitive.div>
+        )}
+      </SliderThumbnailBridge>
+    );
+  },
+);
+
+ThumbnailRoot.displayName = 'SliderThumbnail';
+
+const Thumbnail = {
+  Root: ThumbnailRoot,
+  Img: ThumbnailBase.Img,
+} as const;
+
+/* -------------------------------------------------------------------------------------------------
+ * SliderVideo
+ * -----------------------------------------------------------------------------------------------*/
+
+const VideoBridge = createReactComponent(SliderVideoInstance, {
+  events: ['onCanPlay', 'onError'],
+});
+
+export interface VideoProps extends ReactElementProps<SliderVideoInstance, HTMLVideoElement> {
+  asChild?: boolean;
+  children?: React.ReactNode;
+  ref?: React.Ref<HTMLVideoElement>;
+}
+
+/**
+ * Used to load a low-resolution video to be displayed when the user is hovering over or dragging
+ * the time slider. The preview video will automatically be updated to be in-sync with the current
+ * preview position, so ensure it has the same length as the original media (i.e., same duration).
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/slider-video}
+ * @example
+ * ```tsx
+ * <TimeSlider.Root>
+ *   <TimeSlider.Preview>
+ *     <TimeSlider.Video src="preview.mp4" />
+ *   </TimeSlider.Preview>
+ * </TimeSlider.Root>
+ * ```
+ */
+const Video = React.forwardRef<HTMLVideoElement, VideoProps>(
+  ({ children, ...props }, forwardRef) => {
+    return (
+      <VideoBridge {...(props as Omit<VideoProps, 'ref'>)}>
+        {(props, instance) => (
+          <VideoProvider
+            {...props}
+            instance={instance}
+            ref={composeRefs(props.ref as React.Ref<any>, forwardRef)}
+          >
+            {children}
+          </VideoProvider>
+        )}
+      </VideoBridge>
+    );
+  },
+);
+
+Video.displayName = 'SliderVideo';
+
+/* -------------------------------------------------------------------------------------------------
+ * SliderVideoProvider
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface VideoProviderProps {
+  instance: SliderVideoInstance;
+  children?: React.ReactNode;
+}
+
+const VideoProvider = React.forwardRef<HTMLVideoElement, VideoProviderProps>(
+  ({ instance, children, ...props }, forwardRef) => {
+    const { canLoad } = useStateContext(mediaState),
+      { src, video, crossOrigin } = instance.$state,
+      $src = useSignal(src),
+      $canLoad = useSignal(canLoad),
+      $crossOrigin = useSignal(crossOrigin);
+    return (
+      <Primitive.video
+        style={{ maxWidth: 'unset' }}
+        {...props}
+        src={$src || undefined}
+        muted
+        playsInline
+        preload={$canLoad ? 'auto' : 'none'}
+        crossOrigin={$crossOrigin || undefined}
+        ref={composeRefs(video.set as any, forwardRef)}
+      >
+        {children}
+      </Primitive.video>
+    );
+  },
+);
+
+VideoProvider.displayName = 'SliderVideoProvider';
+
+export * from './slider';
+export { Root, Progress, Thumbnail, Video, Chapters, ChapterTitle };

package/src/components/ui/sliders/volume-slider.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import { createReactComponent, type ReactElementProps } from 'maverick.js/react';
+
+import { VolumeSliderInstance } from '../../primitives/instances';
+import { Primitive } from '../../primitives/nodes';
+import { Value } from './slider';
+import { sliderCallbacks } from './slider-callbacks';
+
+/* -------------------------------------------------------------------------------------------------
+ * VolumeSlider
+ * -----------------------------------------------------------------------------------------------*/
+
+const VolumeSliderBridge = createReactComponent(VolumeSliderInstance, {
+  events: sliderCallbacks,
+  domEventsRegex: /^onMedia/,
+});
+
+export interface RootProps extends ReactElementProps<VolumeSliderInstance> {
+  asChild?: boolean;
+  children?: React.ReactNode;
+  ref?: React.Ref<VolumeSliderInstance>;
+}
+
+/**
+ * Versatile and user-friendly input volume control designed for seamless cross-browser and provider
+ * compatibility and accessibility with ARIA support. It offers a smooth user experience for both
+ * mouse and touch interactions and is highly customizable in terms of styling. Users can
+ * effortlessly change the volume level within the range 0 (muted) to 100.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/volume-slider}
+ * @example
+ * ```tsx
+ * <VolumeSlider.Root>
+ *   <VolumeSlider.Track>
+ *     <VolumeSlider.TrackFill />
+ *   </VolumeSlider.Track>
+ *   <VolumeSlider.Thumb />
+ * </VolumeSlider.Root>
+ * ```
+ */
+const Root = React.forwardRef<VolumeSliderInstance, RootProps>(
+  ({ children, ...props }, forwardRef) => {
+    return (
+      <VolumeSliderBridge {...props} ref={forwardRef}>
+        {(props) => <Primitive.div {...props}>{children}</Primitive.div>}
+      </VolumeSliderBridge>
+    );
+  },
+);
+
+Root.displayName = 'VolumeSlider';
+
+export * from './slider';
+export { Root, Value };

package/src/components/ui/spinner.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+
+/* -------------------------------------------------------------------------------------------------
+ * Spinner
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface RootProps
+  extends React.PropsWithoutRef<React.SVGProps<SVGSVGElement>>,
+    React.RefAttributes<SVGElement | SVGSVGElement> {
+  /**
+   * The horizontal (width) and vertical (height) length of the spinner.
+   *
+   * @defaultValue 96
+   */
+  size?: number;
+}
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/player/components/display/buffering-indicator}
+ * @example
+ * ```html
+ * <Spinner.Root>
+ *   <Spinner.Track />
+ *   <Spinner.TrackFill />
+ * </Spinner>
+ * ```
+ */
+const Root = React.forwardRef<SVGElement | SVGSVGElement, RootProps>(
+  ({ size = 96, children, ...props }: RootProps, forwardRef) => {
+    return (
+      <svg
+        width={size}
+        height={size}
+        fill="none"
+        viewBox="0 0 120 120"
+        aria-hidden="true"
+        data-part="root"
+        {...props}
+        ref={forwardRef as React.Ref<any>}
+      >
+        {children}
+      </svg>
+    );
+  },
+);
+
+/* -------------------------------------------------------------------------------------------------
+ * Track
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface TrackProps
+  extends React.PropsWithoutRef<React.SVGProps<SVGCircleElement>>,
+    React.RefAttributes<SVGCircleElement> {}
+
+const Track = React.forwardRef<SVGCircleElement, TrackProps>(
+  ({ width = 8, children, ...props }, ref) => (
+    <circle
+      cx="60"
+      cy="60"
+      r="54"
+      stroke="currentColor"
+      strokeWidth={width}
+      data-part="track"
+      {...props}
+      ref={ref}
+    >
+      {children}
+    </circle>
+  ),
+);
+
+/* -------------------------------------------------------------------------------------------------
+ * TrackFill
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface TrackFillProps
+  extends React.PropsWithoutRef<React.SVGProps<SVGCircleElement>>,
+    React.RefAttributes<SVGCircleElement> {
+  /**
+   * The percentage of the track that should be filled.
+   */
+  fillPercent?: number;
+}
+
+const TrackFill = React.forwardRef<SVGCircleElement, TrackFillProps>(
+  ({ width = 8, fillPercent = 50, children, ...props }, ref) => (
+    <circle
+      cx="60"
+      cy="60"
+      r="54"
+      stroke="currentColor"
+      pathLength="100"
+      strokeWidth={width}
+      strokeDasharray={100}
+      strokeDashoffset={100 - fillPercent}
+      data-part="track-fill"
+      {...props}
+      ref={ref}
+    >
+      {children}
+    </circle>
+  ),
+);
+
+export { Root, Track, TrackFill };

package/src/components/ui/thumbnail.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+
+import type { WriteSignal } from 'maverick.js';
+import {
+  composeRefs,
+  createReactComponent,
+  useSignal,
+  useStateContext,
+  type ReactElementProps,
+} from 'maverick.js/react';
+import { mediaState } from 'vidstack';
+
+import { ThumbnailInstance } from '../primitives/instances';
+import { Primitive, type PrimitivePropsWithRef } from '../primitives/nodes';
+
+/* -------------------------------------------------------------------------------------------------
+ * Thumbnail
+ * -----------------------------------------------------------------------------------------------*/
+
+const ThumbnailBridge = createReactComponent(ThumbnailInstance);
+
+export interface RootProps extends ReactElementProps<ThumbnailInstance, HTMLElement> {
+  asChild?: boolean;
+  children?: React.ReactNode;
+  ref?: React.Ref<HTMLElement>;
+}
+
+/**
+ * Used to load and display a preview thumbnail at the given `time`.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/display/thumbnail}
+ * @example
+ * ```tsx
+ * <Thumbnail.Root src="thumbnails.vtt" time={10} >
+ *   <Thumbnail.Img />
+ * </Thumbnail.Root>
+ * ```
+ */
+const Root = React.forwardRef<HTMLElement, RootProps>(({ children, ...props }, forwardRef) => {
+  return (
+    <ThumbnailBridge {...(props as Omit<RootProps, 'ref'>)}>
+      {(props) => (
+        <Primitive.div
+          {...props}
+          ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
+        >
+          {children}
+        </Primitive.div>
+      )}
+    </ThumbnailBridge>
+  );
+});
+
+Root.displayName = 'Thumbnail';
+
+/* -------------------------------------------------------------------------------------------------
+ * ThumbnailImg
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface ImgProps extends PrimitivePropsWithRef<'img'> {
+  children?: React.ReactNode;
+}
+
+const Img = React.forwardRef<HTMLImageElement, ImgProps>(({ children, ...props }, forwardRef) => {
+  const { src, img, crossOrigin } = useStateContext(ThumbnailInstance.state),
+    $src = useSignal(src),
+    $crossOrigin = useSignal(crossOrigin);
+  return (
+    <Primitive.img
+      crossOrigin={$crossOrigin as '' | undefined}
+      {...props}
+      src={$src || undefined}
+      ref={composeRefs((img as any).set, forwardRef)}
+    >
+      {children}
+    </Primitive.img>
+  );
+});
+
+Img.displayName = 'ThumbnailImg';
+
+export { Root, Img };

package/src/components/ui/time.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+import {
+  composeRefs,
+  createReactComponent,
+  useSignal,
+  type ReactElementProps,
+} from 'maverick.js/react';
+
+import { TimeInstance } from '../primitives/instances';
+import { Primitive } from '../primitives/nodes';
+
+/* -------------------------------------------------------------------------------------------------
+ * Time
+ * -----------------------------------------------------------------------------------------------*/
+
+const TimeBridge = createReactComponent(TimeInstance);
+
+export interface TimeProps extends ReactElementProps<TimeInstance> {
+  asChild?: boolean;
+  children?: React.ReactNode;
+  ref?: React.Ref<HTMLElement>;
+}
+
+/**
+ * Outputs a media duration (eg: `currentTime`, `duration`, `bufferedAmount`, etc.) value as time
+ * formatted text.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/display/time}
+ * @example
+ * ```tsx
+ * <Time type="current" />
+ * ```
+ */
+const Time = React.forwardRef<HTMLElement, TimeProps>(({ children, ...props }, forwardRef) => {
+  return (
+    <TimeBridge {...(props as Omit<TimeProps, 'ref'>)}>
+      {(props, instance) => (
+        <TimeText
+          {...props}
+          instance={instance}
+          ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
+        >
+          {children}
+        </TimeText>
+      )}
+    </TimeBridge>
+  );
+});
+
+Time.displayName = 'Time';
+export { Time };
+
+/* -------------------------------------------------------------------------------------------------
+ * TimeText
+ * -----------------------------------------------------------------------------------------------*/
+
+interface TimeTextProps extends Record<string, any> {
+  instance: TimeInstance;
+  children?: React.ReactNode;
+  ref?: React.Ref<HTMLElement>;
+}
+
+const TimeText = React.forwardRef<HTMLElement, TimeTextProps>(
+  ({ instance, children, ...props }, forwardRef) => {
+    const { timeText } = instance.$state,
+      $timeText = useSignal(timeText);
+    return (
+      <Primitive.div {...props} ref={forwardRef as React.Ref<any>}>
+        {$timeText}
+        {children}
+      </Primitive.div>
+    );
+  },
+);
+
+TimeText.displayName = 'TimeText';