@hanifhan1f/vidstack-react 1.12.13

package/src/components/ui/poster.tsx

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

@@ -0,0 +1,88 @@
+/* -------------------------------------------------------------------------------------------------
+ * 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

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

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

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

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

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

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