@hanifhan1f/vidstack-react 1.12.13 → 1.12.15

package/src/components/ui/buttons/play-button.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-
-import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { PlayButtonInstance } from '../../primitives/instances';
-import { Primitive } from '../../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * PlayButton
- * -----------------------------------------------------------------------------------------------*/
-
-const PlayButtonBridge = createReactComponent(PlayButtonInstance, {
-  domEventsRegex: /^onMedia/,
-});
-
-export interface PlayButtonProps extends ReactElementProps<PlayButtonInstance, HTMLButtonElement> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLButtonElement>;
-}
-
-/**
- * A button for toggling the playback state (play/pause) of the current media.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/buttons/play-button}
- * @example
- * ```tsx
- * const isPaused = useMediaState('paused');
- *
- * <PlayButton>
- *   {isPaused ? <PlayIcon /> : <PauseIcon />}
- * </PlayButton>
- * ```
- */
-const PlayButton = React.forwardRef<HTMLButtonElement, PlayButtonProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <PlayButtonBridge {...(props as Omit<PlayButtonProps, 'ref'>)}>
-        {(props) => (
-          <Primitive.button
-            {...props}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-          >
-            {children}
-          </Primitive.button>
-        )}
-      </PlayButtonBridge>
-    );
-  },
-);
-
-PlayButton.displayName = 'PlayButton';
-export { PlayButton };

package/src/components/ui/buttons/seek-button.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-
-import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { SeekButtonInstance } from '../../primitives/instances';
-import { Primitive } from '../../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * SeekButton
- * -----------------------------------------------------------------------------------------------*/
-
-const SeekButtonBridge = createReactComponent(SeekButtonInstance, {
-  domEventsRegex: /^onMedia/,
-});
-
-export interface SeekButtonProps extends ReactElementProps<SeekButtonInstance, HTMLButtonElement> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLButtonElement>;
-}
-
-/**
- * A button for seeking the current media playback forwards or backwards by a specified amount.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/buttons/seek-button}
- * @example
- * ```tsx
- * <SeekButton seconds={-10}>
- *   <SeekBackwardIcon />
- * </SeekButton>
- *
- * <SeekButton seconds={10}>
- *   <SeekForwardIcon />
- * </SeekButton>
- * ```
- */
-const SeekButton = React.forwardRef<HTMLButtonElement, SeekButtonProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <SeekButtonBridge {...(props as Omit<SeekButtonProps, 'ref'>)}>
-        {(props) => (
-          <Primitive.button
-            {...props}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-          >
-            {children}
-          </Primitive.button>
-        )}
-      </SeekButtonBridge>
-    );
-  },
-);
-
-SeekButton.displayName = 'SeekButton';
-export { SeekButton };

package/src/components/ui/buttons/toggle-button.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react';
-
-import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { ToggleButtonInstance } from '../../primitives/instances';
-import { Primitive } from '../../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * ToggleButton
- * -----------------------------------------------------------------------------------------------*/
-
-const ToggleButtonBridge = createReactComponent(ToggleButtonInstance);
-
-export interface ToggleButtonProps
-  extends ReactElementProps<ToggleButtonInstance, HTMLButtonElement> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLButtonElement>;
-}
-
-/**
- * A toggle button is a two-state button that can be either off (not pressed) or on (pressed).
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/buttons/toggle-button}
- * @example
- * ```tsx
- * <ToggleButton aria-label="...">
- *   <OnIcon />
- *   <OffIcon />
- * </ToggleButton>
- * ```
- */
-const ToggleButton = React.forwardRef<HTMLButtonElement, ToggleButtonProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <ToggleButtonBridge {...(props as Omit<ToggleButtonProps, 'ref'>)}>
-        {(props) => (
-          <Primitive.button
-            {...props}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-          >
-            {children}
-          </Primitive.button>
-        )}
-      </ToggleButtonBridge>
-    );
-  },
-);
-
-ToggleButton.displayName = 'ToggleButton';
-export { ToggleButton };

package/src/components/ui/caption.tsx

@@ -1,70 +0,0 @@
-import * as React from 'react';
-
-import type { VTTCue } from 'media-captions';
-
-import { useMediaState } from '../../hooks/use-media-state';
-import { Primitive, type PrimitivePropsWithRef } from '../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * Caption
- * -----------------------------------------------------------------------------------------------*/
-
-export interface RootProps extends PrimitivePropsWithRef<'div'> {
-  children?: React.ReactNode;
-}
-
-const Root = React.forwardRef<HTMLElement, RootProps>(({ children, ...props }, forwardRef) => {
-  return (
-    <Primitive.div
-      translate="yes"
-      aria-live="off"
-      aria-atomic="true"
-      {...props}
-      ref={forwardRef as React.Ref<any>}
-    >
-      {children}
-    </Primitive.div>
-  );
-});
-
-Root.displayName = 'Caption';
-export { Root };
-
-/* -------------------------------------------------------------------------------------------------
- * CaptionText
- * -----------------------------------------------------------------------------------------------*/
-
-export interface TextProps extends PrimitivePropsWithRef<'span'> {}
-
-const Text = React.forwardRef<HTMLElement, TextProps>((props, forwardRef) => {
-  const textTrack = useMediaState('textTrack'),
-    [activeCue, setActiveCue] = React.useState<VTTCue | undefined>();
-
-  React.useEffect(() => {
-    if (!textTrack) return;
-
-    function onCueChange() {
-      setActiveCue(textTrack?.activeCues[0]);
-    }
-
-    textTrack.addEventListener('cue-change', onCueChange);
-    return () => {
-      textTrack.removeEventListener('cue-change', onCueChange);
-      setActiveCue(undefined);
-    };
-  }, [textTrack]);
-
-  return (
-    <Primitive.span
-      {...props}
-      data-part="cue"
-      dangerouslySetInnerHTML={{
-        __html: activeCue?.text || '',
-      }}
-      ref={forwardRef as React.Ref<any>}
-    />
-  );
-});
-
-Text.displayName = 'CaptionText';
-export { Text };

package/src/components/ui/captions.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-
-import { createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { CaptionsInstance } from '../primitives/instances';
-import { Primitive } from '../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * Captions
- * -----------------------------------------------------------------------------------------------*/
-
-const CaptionsBridge = createReactComponent(CaptionsInstance);
-
-export interface CaptionsProps extends ReactElementProps<CaptionsInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<CaptionsInstance>;
-}
-
-/**
- * Renders and displays captions/subtitles. This will be an overlay for video and a simple
- * captions box for audio.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/display/captions}
- * @example
- * ```tsx
- * <Captions />
- * ```
- */
-const Captions = React.forwardRef<CaptionsInstance, CaptionsProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <CaptionsBridge {...props} ref={forwardRef}>
-        {(props) => <Primitive.div {...props}>{children}</Primitive.div>}
-      </CaptionsBridge>
-    );
-  },
-);
-
-Captions.displayName = 'Captions';
-export { Captions };

package/src/components/ui/chapter-title.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-
-import { useChapterTitle } from '../../hooks/use-chapter-title';
-import { Primitive, type PrimitivePropsWithRef } from '../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * Chapter Title
- * -----------------------------------------------------------------------------------------------*/
-
-export interface ChapterTitleProps extends PrimitivePropsWithRef<'span'> {
-  /**
-   * Specify text to be displayed when no chapter title is available.
-   */
-  defaultText?: string;
-}
-
-/**
- * This component is used to load and display the current chapter title based on the text tracks
- * provided.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/display/chapter-title}
- * @example
- * ```tsx
- * <ChapterTitle />
- * ```
- */
-const ChapterTitle = React.forwardRef<HTMLElement, ChapterTitleProps>(
-  ({ defaultText = '', children, ...props }, forwardRef) => {
-    const $chapterTitle = useChapterTitle();
-    return (
-      <Primitive.span {...props} ref={forwardRef as React.Ref<any>}>
-        {$chapterTitle || defaultText}
-        {children}
-      </Primitive.span>
-    );
-  },
-);
-
-ChapterTitle.displayName = 'ChapterTitle';
-export { ChapterTitle };

package/src/components/ui/controls.tsx

@@ -1,90 +0,0 @@
-import * as React from 'react';
-
-import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { ControlsGroupInstance, ControlsInstance } from '../primitives/instances';
-import { Primitive } from '../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * Controls
- * -----------------------------------------------------------------------------------------------*/
-
-const ControlsBridge = createReactComponent(ControlsInstance);
-
-export interface RootProps extends ReactElementProps<ControlsInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLElement>;
-}
-
-/**
- * This component creates a container for control groups.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/media/controls}
- * @example
- * ```tsx
- * <Controls.Root>
- *   <Controls.Group></Controls.Group>
- *   <Controls.Group></Controls.Group>
- * <Controls.Root>
- * ```
- */
-const Root = React.forwardRef<HTMLElement, RootProps>(({ children, ...props }, forwardRef) => {
-  return (
-    <ControlsBridge {...(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>
-      )}
-    </ControlsBridge>
-  );
-});
-
-Root.displayName = 'Controls';
-
-/* -------------------------------------------------------------------------------------------------
- * ControlsGroup
- * -----------------------------------------------------------------------------------------------*/
-
-const ControlsGroupBridge = createReactComponent(ControlsGroupInstance);
-
-export interface GroupProps extends ReactElementProps<ControlsGroupInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLElement>;
-}
-
-/**
- * This component creates a container for media controls.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/media/controls#group}
- * @example
- * ```tsx
- * <Controls.Root>
- *   <Controls.Group></Controls.Group>
- *   <Controls.Group></Controls.Group>
- * <Controls.Root>
- * ```
- */
-const Group = React.forwardRef<HTMLElement, GroupProps>(({ children, ...props }, forwardRef) => {
-  return (
-    <ControlsGroupBridge {...(props as Omit<GroupProps, 'ref'>)}>
-      {(props) => (
-        <Primitive.div
-          {...props}
-          ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-        >
-          {children}
-        </Primitive.div>
-      )}
-    </ControlsGroupBridge>
-  );
-});
-
-Group.displayName = 'ControlsGroup';
-
-export { Root, Group };

package/src/components/ui/gesture.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react';
-
-import { createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { GestureInstance } from '../primitives/instances';
-import { Primitive } from '../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * Gesture
- * -----------------------------------------------------------------------------------------------*/
-
-const GestureBridge = createReactComponent(GestureInstance, {
-  events: ['onWillTrigger', 'onTrigger'],
-});
-
-export interface GestureProps extends ReactElementProps<GestureInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<GestureInstance>;
-}
-
-/**
- * This component enables actions to be performed on the media based on user gestures.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/media/gesture}
- * @example
- * ```tsx
- * <Gesture event="pointerup" action="toggle:paused" />
- * <Gesture event="dblpointerup" action="toggle:fullscreen" />
- * ```
- */
-const Gesture = React.forwardRef<GestureInstance, GestureProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <GestureBridge {...props} ref={forwardRef}>
-        {(props) => <Primitive.div {...props}>{children}</Primitive.div>}
-      </GestureBridge>
-    );
-  },
-);
-
-Gesture.displayName = 'Gesture';
-export { Gesture };

package/src/components/ui/menu.tsx

@@ -1,251 +0,0 @@
-import * as React from 'react';
-
-import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
-import { isString } from 'maverick.js/std';
-import { createPortal } from 'react-dom';
-
-import { useMediaState } from '../../hooks/use-media-state';
-import {
-  MenuButtonInstance,
-  MenuInstance,
-  MenuItemInstance,
-  MenuItemsInstance,
-  MenuPortalInstance,
-} from '../primitives/instances';
-import { Primitive } from '../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * Menu
- * -----------------------------------------------------------------------------------------------*/
-
-const MenuBridge = createReactComponent(MenuInstance, {
-  events: ['onOpen', 'onClose'],
-  domEventsRegex: /^onMedia/,
-});
-
-export interface RootProps extends ReactElementProps<MenuInstance> {
-  asChild?: boolean;
-  children: React.ReactNode;
-  ref?: React.Ref<MenuInstance>;
-}
-
-/**
- * Root menu container used to hold and manage a menu button and menu items. This component is
- * used to display options in a floating panel. They can be nested to create submenus.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/menu/menu}
- * @example
- * ```tsx
- * <Menu.Root>
- *   <Menu.Button></Menu.Button>
- *   <Menu.Content placement="top end"></Menu.Content>
- * </Menu.Root>
- * ```
- */
-const Root = React.forwardRef<MenuInstance, RootProps>(({ children, ...props }, forwardRef) => {
-  return (
-    <MenuBridge {...props} ref={forwardRef}>
-      {(props, instance) => (
-        <Primitive.div
-          {...props}
-          style={{ display: !instance.isSubmenu ? 'contents' : undefined, ...props.style }}
-        >
-          {children}
-        </Primitive.div>
-      )}
-    </MenuBridge>
-  );
-});
-
-Root.displayName = 'Menu';
-
-/* -------------------------------------------------------------------------------------------------
- * MenuButton
- * -----------------------------------------------------------------------------------------------*/
-
-const ButtonBridge = createReactComponent(MenuButtonInstance, {
-  events: ['onSelect'],
-});
-
-export interface ButtonProps extends ReactElementProps<MenuButtonInstance, HTMLButtonElement> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLButtonElement>;
-}
-
-/**
- * A button that controls the opening and closing of a menu component. The button will become a
- * `menuitem` when used inside a submenu.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/menu/menu}
- * @example
- * ```tsx
- * <Menu.Root>
- *   <Menu.Button></Menu.Button>
- *   <Menu.Content placement="top end"></Menu.Content>
- * </Menu.Root>
- * ```
- */
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <ButtonBridge {...(props as Omit<ButtonProps, 'ref'>)}>
-        {(props) => (
-          <Primitive.button
-            {...props}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-          >
-            {children}
-          </Primitive.button>
-        )}
-      </ButtonBridge>
-    );
-  },
-);
-
-Button.displayName = 'MenuButton';
-
-/* -------------------------------------------------------------------------------------------------
- * Portal
- * -----------------------------------------------------------------------------------------------*/
-
-export interface PortalProps extends ReactElementProps<MenuPortalInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLElement>;
-}
-
-/**
- * Portals menu items into the given container.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/menu#portal}
- * @example
- * ```tsx
- * <Menu.Root>
- *   <Menu.Button></Menu.Button>
- *   <Menu.Portal>
- *     <Menu.Content placement="top end"></Menu.Content>
- *   </Menu.Portal>
- * </Menu.Root>
- * ```
- */
-const Portal = React.forwardRef<HTMLElement, PortalProps>(
-  ({ container = null, disabled = false, children, ...props }, forwardRef) => {
-    let fullscreen = useMediaState('fullscreen'),
-      shouldPortal = disabled === 'fullscreen' ? !fullscreen : !disabled;
-
-    const target = React.useMemo(() => {
-      if (__SERVER__) return null;
-      const node = isString(container) ? document.querySelector(container) : container;
-      return node ?? document.body;
-    }, [container]);
-
-    return !target || !shouldPortal
-      ? children
-      : createPortal(
-          <Primitive.div
-            {...props}
-            style={{ display: 'contents', ...props.style }}
-            ref={forwardRef as React.Ref<any>}
-          >
-            {children}
-          </Primitive.div>,
-          target,
-        );
-  },
-);
-
-Portal.displayName = 'MenuPortal';
-
-/* -------------------------------------------------------------------------------------------------
- * MenuItems
- * -----------------------------------------------------------------------------------------------*/
-
-const ItemsBridge = createReactComponent(MenuItemsInstance);
-
-export interface ItemsProps extends ReactElementProps<MenuItemsInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLElement>;
-}
-
-/**
- * Used to group and display settings or arbitrary content in a floating panel.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/menu/menu}
- * @example
- * ```tsx
- * <Menu.Root>
- *   <Menu.Button></Menu.Button>
- *   <Menu.Items placement="top end"></Menu.Items>
- * </Menu.Root>
- * ```
- */
-const Items = React.forwardRef<HTMLElement, ItemsProps>(({ children, ...props }, forwardRef) => {
-  return (
-    <ItemsBridge {...(props as Omit<ItemsProps, 'ref'>)}>
-      {(props) => (
-        <Primitive.div
-          {...props}
-          ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-        >
-          {children}
-        </Primitive.div>
-      )}
-    </ItemsBridge>
-  );
-});
-
-Items.displayName = 'MenuItems';
-
-/* -------------------------------------------------------------------------------------------------
- * MenuItem
- * -----------------------------------------------------------------------------------------------*/
-
-const ItemBridge = createReactComponent(MenuItemInstance);
-
-export interface ItemProps extends ReactElementProps<MenuItemInstance> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLElement>;
-}
-
-/**
- * Represents a specific option or action, typically displayed as a text label or icon, which
- * users can select to access or perform a particular function or view related content.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/menu/menu}
- * @example
- * ```tsx
- * <Menu.Root>
- *   <Menu.Button></Menu.Button>
- *   <Menu.Content placement="top end">
- *     <Menu.Item></Menu.Item>
- *   </Menu.Content>
- * </Menu.Root>
- * ```
- */
-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 = 'MenuItem';
-
-export { Root, Button, Portal, Items, Items as Content, type ItemsProps as ContentProps, Item };
-export {
-  Root as RadioGroup,
-  Item as Radio,
-  type RootProps as RadioGroupProps,
-  type ItemProps as RadioProps,
-} from './radio-group';