@hanifhan1f/vidstack-react 1.12.13 → 1.12.15

package/src/components/ui/poster.tsx

@@ -1,101 +0,0 @@
-import * as React from 'react';
-
-import {
-  composeRefs,
-  createReactComponent,
-  useSignal,
-  type ReactElementProps,
-} from 'maverick.js/react';
-
-import { PosterInstance } from '../primitives/instances';
-import { Primitive } from '../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * Poster
- * -----------------------------------------------------------------------------------------------*/
-
-const PosterBridge = createReactComponent(PosterInstance);
-
-export interface PosterProps extends ReactElementProps<PosterInstance, HTMLImageElement> {
-  alt?: string;
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLImageElement>;
-}
-
-/**
- * Loads and displays the current media poster image. By default, the media provider's
- * loading strategy is respected meaning the poster won't load until the media can.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/media/poster}
- * @example
- * ```tsx
- * <MediaPlayer>
- *   <MediaProvider>
- *     <Poster src="..." alt="..." />
- *   </MediaProvider>
- * </MediaPlayer>
- * ```
- */
-const Poster = React.forwardRef<HTMLImageElement, PosterProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <PosterBridge
-        src={
-          props.asChild && React.isValidElement(children)
-            ? (children.props as React.ComponentProps<'img'>).src
-            : undefined
-        }
-        {...(props as Omit<PosterProps, 'ref'>)}
-      >
-        {(props, instance) => (
-          <PosterImg
-            {...props}
-            instance={instance}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as any)}
-          >
-            {children}
-          </PosterImg>
-        )}
-      </PosterBridge>
-    );
-  },
-);
-
-Poster.displayName = 'Poster';
-export { Poster };
-
-/* -------------------------------------------------------------------------------------------------
- * PosterImg
- * -----------------------------------------------------------------------------------------------*/
-
-interface PosterImgProps {
-  instance: PosterInstance;
-  children?: React.ReactNode;
-  asChild?: boolean;
-  ref?: React.LegacyRef<HTMLImageElement>;
-}
-
-const PosterImg = React.forwardRef<HTMLImageElement, PosterImgProps>(
-  ({ instance, children, ...props }, forwardRef) => {
-    const { src, img, alt, crossOrigin, hidden } = instance.$state,
-      $src = useSignal(src),
-      $alt = useSignal(alt),
-      $crossOrigin = useSignal(crossOrigin),
-      $hidden = useSignal(hidden);
-    return (
-      <Primitive.img
-        {...props}
-        src={$src || undefined}
-        alt={$alt || undefined}
-        crossOrigin={$crossOrigin || undefined}
-        ref={composeRefs(img.set as any, forwardRef)}
-        style={{ display: $hidden ? 'none' : undefined }}
-      >
-        {children}
-      </Primitive.img>
-    );
-  },
-);
-
-PosterImg.displayName = 'PosterImg';

package/src/components/ui/radio-group.tsx

@@ -1,88 +0,0 @@
-/* -------------------------------------------------------------------------------------------------
- * RadioGroup
- * -----------------------------------------------------------------------------------------------*/
-
-import * as React from 'react';
-
-import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { RadioGroupInstance, RadioInstance } from '../primitives/instances';
-import { Primitive } from '../primitives/nodes';
-
-const RadioGroupBridge = createReactComponent(RadioGroupInstance, {
-  events: ['onChange'],
-});
-
-export interface RootProps extends ReactElementProps<RadioGroupInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<RadioGroupInstance>;
-}
-
-/**
- * A radio group consists of options where only one of them can be checked. Each option is
- * provided as a radio (i.e., a selectable element).
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/menu/radio-group}
- * @example
- * ```tsx
- * <RadioGroup.Root>
- *   <RadioGroup.Item value="1080">1080p</RadioGroup.Item>
- *   <RadioGroup.Item value="720">720p</RadioGroup.Item>
- * </RadioGroup.Root>
- * ```
- */
-const Root = React.forwardRef<RadioGroupInstance, RootProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <RadioGroupBridge {...props} ref={forwardRef}>
-        {(props) => <Primitive.div {...props}>{children}</Primitive.div>}
-      </RadioGroupBridge>
-    );
-  },
-);
-
-Root.displayName = 'RadioGroup';
-
-/* -------------------------------------------------------------------------------------------------
- * RadioItem
- * -----------------------------------------------------------------------------------------------*/
-
-const ItemBridge = createReactComponent(RadioInstance, {
-  events: ['onChange', 'onSelect'],
-});
-
-export interface ItemProps extends ReactElementProps<RadioInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLElement>;
-}
-
-/**
- * A radio represents a option that a user can select inside of a radio group. Only one radio
- * can be checked in a group.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/menu/radio}
- * @example
- * ```tsx
- * <RadioGroup.Item value="1080">1080p</RadioGroup.Item>
- * ```
- */
-const Item = React.forwardRef<HTMLElement, ItemProps>(({ children, ...props }, forwardRef) => {
-  return (
-    <ItemBridge {...(props as Omit<ItemProps, 'ref'>)}>
-      {(props) => (
-        <Primitive.div
-          {...props}
-          ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-        >
-          {children}
-        </Primitive.div>
-      )}
-    </ItemBridge>
-  );
-});
-
-Item.displayName = 'RadioItem';
-
-export { Root, Item };

package/src/components/ui/sliders/audio-gain-slider.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-
-import { createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { AudioGainSliderInstance } from '../../primitives/instances';
-import { Primitive } from '../../primitives/nodes';
-import { Value } from './slider';
-import { sliderCallbacks } from './slider-callbacks';
-
-/* -------------------------------------------------------------------------------------------------
- * AudioGainSlider
- * -----------------------------------------------------------------------------------------------*/
-
-const AudioGainSliderBridge = createReactComponent(AudioGainSliderInstance, {
-  events: sliderCallbacks,
-  domEventsRegex: /^onMedia/,
-});
-
-export interface RootProps extends ReactElementProps<AudioGainSliderInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<AudioGainSliderInstance>;
-}
-
-/**
- * Versatile and user-friendly audio boost 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 audio gain within the range 0 to 100.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/sliders/audio-gain-slider}
- * @example
- * ```tsx
- * <AudioGainSlider.Root>
- *   <AudioGainSlider.Track>
- *     <AudioGainSlider.TrackFill />
- *   </AudioGainSlider.Track>
- *   <AudioGainSlider.Thumb />
- * </AudioGainSlider.Root>
- * ```
- */
-const Root = React.forwardRef<AudioGainSliderInstance, RootProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <AudioGainSliderBridge {...props} ref={forwardRef}>
-        {(props) => <Primitive.div {...props}>{children}</Primitive.div>}
-      </AudioGainSliderBridge>
-    );
-  },
-);
-
-Root.displayName = 'AudioGainSlider';
-
-export * from './slider';
-export { Root, Value };

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

@@ -1,54 +0,0 @@
-import * as React from 'react';
-
-import { createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { QualitySliderInstance } from '../../primitives/instances';
-import { Primitive } from '../../primitives/nodes';
-import { Value } from './slider';
-import { sliderCallbacks } from './slider-callbacks';
-
-/* -------------------------------------------------------------------------------------------------
- * QualitySlider
- * -----------------------------------------------------------------------------------------------*/
-
-const QualitySliderBridge = createReactComponent(QualitySliderInstance, {
-  events: sliderCallbacks,
-  domEventsRegex: /^onMedia/,
-});
-
-export interface RootProps extends ReactElementProps<QualitySliderInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<QualitySliderInstance>;
-}
-
-/**
- * Versatile and user-friendly input video quality 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.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/sliders/quality-slider}
- * @example
- * ```tsx
- * <QualitySlider.Root>
- *   <QualitySlider.Track>
- *     <QualitySlider.TrackFill />
- *   </QualitySlider.Track>
- *   <QualitySlider.Thumb />
- * </QualitySlider.Root>
- * ```
- */
-const Root = React.forwardRef<QualitySliderInstance, RootProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <QualitySliderBridge {...props} ref={forwardRef}>
-        {(props) => <Primitive.div {...props}>{children}</Primitive.div>}
-      </QualitySliderBridge>
-    );
-  },
-);
-
-Root.displayName = 'QualitySlider';
-
-export * from './slider';
-export { Root, Value };

package/src/components/ui/sliders/slider-callbacks.ts

@@ -1,14 +0,0 @@
-import type { InferComponentEvents } from 'maverick.js';
-import type { ReactEventCallbacks } from 'maverick.js/react';
-
-import type { SliderInstance } from '../../primitives/instances';
-
-type SliderCallbacks = keyof ReactEventCallbacks<InferComponentEvents<SliderInstance>>;
-
-export const sliderCallbacks: SliderCallbacks[] = [
-  'onDragStart',
-  'onDragEnd',
-  'onDragValueChange',
-  'onValueChange',
-  'onPointerValueChange',
-];

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

@@ -1,13 +0,0 @@
-import * as React from 'react';
-
-import { createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { SliderValueInstance } from '../../primitives/instances';
-
-export const SliderValueBridge = createReactComponent(SliderValueInstance);
-
-export interface SliderValueProps extends ReactElementProps<SliderValueInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLElement>;
-}

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

@@ -1,254 +0,0 @@
-import * as React from 'react';
-
-import {
-  composeRefs,
-  createReactComponent,
-  useSignal,
-  type ReactElementProps,
-} from 'maverick.js/react';
-
-import { useSliderState } from '../../../hooks/use-slider-state';
-import { SliderInstance, SliderPreviewInstance } from '../../primitives/instances';
-import { Primitive, type PrimitivePropsWithRef } from '../../primitives/nodes';
-import { sliderCallbacks } from './slider-callbacks';
-import { SliderValueBridge, type SliderValueProps } from './slider-value';
-
-/* -------------------------------------------------------------------------------------------------
- * Slider
- * -----------------------------------------------------------------------------------------------*/
-
-const SliderBridge = createReactComponent(SliderInstance, {
-  events: sliderCallbacks,
-});
-
-export interface RootProps extends ReactElementProps<SliderInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<SliderInstance>;
-}
-
-/**
- * Versatile and user-friendly input control designed for seamless cross-browser 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 input numeric
- * values within a specified range, defined by a minimum and maximum value.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/sliders/slider}
- * @example
- * ```tsx
- * <Slider.Root>
- *   <Slider.Track>
- *     <Slider.TrackFill />
- *   </Slider.Track>
- *   <Slider.Thumb />
- * </Slider.Root>
- * ```
- */
-const Root = React.forwardRef<SliderInstance, RootProps>(({ children, ...props }, forwardRef) => {
-  return (
-    <SliderBridge {...props} ref={forwardRef}>
-      {(props) => <Primitive.div {...props}>{children}</Primitive.div>}
-    </SliderBridge>
-  );
-});
-
-Root.displayName = 'Slider';
-
-/* -------------------------------------------------------------------------------------------------
- * SliderThumb
- * -----------------------------------------------------------------------------------------------*/
-
-export interface ThumbProps extends PrimitivePropsWithRef<'div'> {}
-
-/**
- * Purely visual element used to display a draggable handle to the user for adjusting the value
- * on the slider component.
- *
- * @example
- * ```tsx
- * <Slider.Root>
- *   <Slider.Thumb />
- * </Slider.Root>
- * ```
- */
-const Thumb = React.forwardRef<HTMLElement, ThumbProps>((props, forwardRef) => (
-  <Primitive.div {...props} ref={forwardRef as React.Ref<any>} />
-));
-
-Thumb.displayName = 'SliderThumb';
-
-/* -------------------------------------------------------------------------------------------------
- * SliderTrack
- * -----------------------------------------------------------------------------------------------*/
-
-export interface TrackProps extends PrimitivePropsWithRef<'div'> {}
-
-/**
- * Visual element inside the slider that serves as a horizontal or vertical bar, providing a
- * visual reference for the range or values that can be selected by moving the slider thumb along
- * it. Users can interact with the slider by dragging the thumb along the track to set a specific
- * value.
- *
- * @example
- * ```tsx
- * <Slider.Root>
- *   <Slider.Track>
- *     <Slider.TrackFill />
- *   </Slider.Track>
- * </Slider.Root>
- * ```
- */
-const Track = React.forwardRef<HTMLElement, TrackProps>((props, forwardRef) => (
-  <Primitive.div {...props} ref={forwardRef as React.Ref<any>} />
-));
-
-Track.displayName = 'SliderTrack';
-
-/* -------------------------------------------------------------------------------------------------
- * SliderTrackFill
- * -----------------------------------------------------------------------------------------------*/
-
-export interface TrackFillProps extends PrimitivePropsWithRef<'div'> {}
-
-/**
- * Portion of the slider track that is visually filled or highlighted to indicate the selected or
- * currently chosen range or value. As the slider thumb is moved along the track, the track
- * fill dynamically adjusts to visually represent the portion of the track that corresponds to the
- * selected value or range, providing users with a clear visual indication of their selection.
- *
- * @example
- * ```tsx
- * <Slider.Root>
- *   <Slider.Track>
- *     <Slider.TrackFill />
- *   </Slider.Track>
- * </Slider.Root>
- * ```
- */
-const TrackFill = React.forwardRef<HTMLElement, TrackFillProps>((props, forwardRef) => (
-  <Primitive.div {...props} ref={forwardRef as React.Ref<any>} />
-));
-
-TrackFill.displayName = 'SliderTrackFill';
-
-/* -------------------------------------------------------------------------------------------------
- * SliderPreview
- * -----------------------------------------------------------------------------------------------*/
-
-const PreviewBridge = createReactComponent(SliderPreviewInstance);
-
-export interface PreviewProps extends ReactElementProps<SliderPreviewInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLElement>;
-}
-
-/**
- * Used to provide users with a real-time or interactive preview of the value or selection they
- * are making as they move the slider thumb. This can include displaying the current pointer
- * value numerically, or displaying a thumbnail over the time slider.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/slider#preview}
- * @example
- * ```tsx
- * <Slider.Root>
- *   <Slider.Preview>
- *     <Slider.Value />
- *   </Slider.Preview>
- * </Slider.Root>
- * ```
- */
-const Preview = React.forwardRef<HTMLElement, PreviewProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <PreviewBridge {...(props as Omit<PreviewProps, 'ref'>)}>
-        {(props) => (
-          <Primitive.div
-            {...props}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-          >
-            {children}
-          </Primitive.div>
-        )}
-      </PreviewBridge>
-    );
-  },
-);
-
-Preview.displayName = 'SliderPreview';
-
-/* -------------------------------------------------------------------------------------------------
- * SliderValue
- * -----------------------------------------------------------------------------------------------*/
-
-export interface ValueProps extends SliderValueProps {}
-
-/**
- * Displays the specific numeric representation of the current or pointer value of the slider.
- * When a user interacts with a slider by moving its thumb along the track, the slider value
- * changes accordingly.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/slider#preview}
- * @example
- * ```tsx
- * <Slider.Root>
- *   <Slider.Preview>
- *     <Slider.Value />
- *   </Slider.Preview>
- * </Slider.Root>
- * ```
- */
-const Value = React.forwardRef<HTMLElement, ValueProps>(({ children, ...props }, forwardRef) => {
-  return (
-    <SliderValueBridge {...(props as Omit<ValueProps, 'ref'>)}>
-      {(props, instance) => {
-        const $text = useSignal(() => instance.getValueText(), instance);
-        return (
-          <Primitive.div {...props} ref={forwardRef as React.Ref<any>}>
-            {$text}
-            {children}
-          </Primitive.div>
-        );
-      }}
-    </SliderValueBridge>
-  );
-});
-
-Value.displayName = 'SliderValue';
-
-/* -------------------------------------------------------------------------------------------------
- * SliderSteps
- * -----------------------------------------------------------------------------------------------*/
-
-export interface StepsProps extends Omit<PrimitivePropsWithRef<'div'>, 'children'> {
-  children: (step: number) => React.ReactNode;
-}
-
-/**
- * Visual markers that can be used to indicate value steps on the slider track.
- *
- * @example
- * ```tsx
- * <Slider.Root>
- *   <Slider.Steps className="steps">
- *     {(step) => <div className="step" key={String(step)}></div>}
- *   </Slider.Steps>
- * </Slider.Root>
- * ```
- */
-const Steps = React.forwardRef<HTMLElement, StepsProps>(({ children, ...props }, forwardRef) => {
-  const $min = useSliderState('min'),
-    $max = useSliderState('max'),
-    $step = useSliderState('step'),
-    steps = ($max - $min) / $step;
-
-  return (
-    <Primitive.div {...props} ref={forwardRef as React.Ref<any>}>
-      {Array.from({ length: Math.floor(steps) + 1 }).map((_, step) => children(step))}
-    </Primitive.div>
-  );
-});
-
-Steps.displayName = 'SliderSteps';
-
-export { Root, Thumb, Track, TrackFill, Preview, Value, Steps };

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

@@ -1,54 +0,0 @@
-import * as React from 'react';
-
-import { createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { SpeedSliderInstance } from '../../primitives/instances';
-import { Primitive } from '../../primitives/nodes';
-import { Value } from './slider';
-import { sliderCallbacks } from './slider-callbacks';
-
-/* -------------------------------------------------------------------------------------------------
- * SpeedSlider
- * -----------------------------------------------------------------------------------------------*/
-
-const SpeedSliderBridge = createReactComponent(SpeedSliderInstance, {
-  events: sliderCallbacks,
-  domEventsRegex: /^onMedia/,
-});
-
-export interface RootProps extends ReactElementProps<SpeedSliderInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<SpeedSliderInstance>;
-}
-
-/**
- * Versatile and user-friendly input playback rate 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.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/sliders/speed-slider}
- * @example
- * ```tsx
- * <SpeedSlider.Root>
- *   <SpeedSlider.Track>
- *     <SpeedSlider.TrackFill />
- *   </SpeedSlider.Track>
- *   <SpeedSlider.Thumb />
- * </SpeedSlider.Root>
- * ```
- */
-const Root = React.forwardRef<SpeedSliderInstance, RootProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <SpeedSliderBridge {...props} ref={forwardRef}>
-        {(props) => <Primitive.div {...props}>{children}</Primitive.div>}
-      </SpeedSliderBridge>
-    );
-  },
-);
-
-Root.displayName = 'SpeedSlider';
-
-export * from './slider';
-export { Root, Value };