@hanifhan1f/vidstack-react 1.12.13

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,251 @@
+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';