@videojs/react 10.0.0-beta.30 → 10.0.0-beta.32

package/dist/dev/ui/audio-track/use-audio-track-options.d.ts

@@ -14,8 +14,8 @@ interface AudioTrackOptionsResult {
   setValue: (value: string) => void;
 }
 /**
- * Create audio track menu options from the player audio track state. Returns
- * `null` when the audio track feature is not configured.
+ * Create audio track menu options from the player audio track state. Returns `null` when the audio track feature is not
+ * configured.
  *
  * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.
  */

package/dist/dev/ui/audio-track/use-audio-track-options.js

@@ -9,8 +9,8 @@ const useAudioTrackRadioOptions = createRadioOptionsHook({
 	createCore: () => new AudioTrackRadioGroupCore()
 });
 /**
-* Create audio track menu options from the player audio track state. Returns
-* `null` when the audio track feature is not configured.
+* Create audio track menu options from the player audio track state. Returns `null` when the audio track feature is not
+* configured.
 *
 * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.
 */

package/dist/dev/ui/audio-track/use-audio-track-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-audio-track-options.js","names":[],"sources":["../../../../src/ui/audio-track/use-audio-track-options.ts"],"sourcesContent":["import { AudioTrackRadioGroupCore, type AudioTrackRadioGroupOption } from '@videojs/core';\nimport { selectAudioTrack } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface AudioTrackOptionsProps extends AudioTrackRadioGroupCore.Props {}\n\nexport type AudioTrackOption = TranslatedRadioOption<AudioTrackRadioGroupOption>;\n\nexport interface AudioTrackOptionsResult {\n  state: AudioTrackRadioGroupCore.State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: AudioTrackOption[];\n  disabled: boolean;\n  hidden: boolean;\n  setValue: (value: string) => void;\n}\n\nconst useAudioTrackRadioOptions = createRadioOptionsHook({\n  name: 'useAudioTrackOptions',\n  feature: 'audioTrack',\n  selector: selectAudioTrack,\n  createCore: () => new AudioTrackRadioGroupCore(),\n});\n\n/**\n * Create audio track menu options from the player audio track state. Returns\n * `null` when the audio track feature is not configured.\n *\n * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.\n */\nexport function useAudioTrackOptions(props?: AudioTrackOptionsProps): AudioTrackOptionsResult | null {\n  'use no memo';\n\n  return useAudioTrackRadioOptions(props);\n}\n\nexport namespace useAudioTrackOptions {\n  export type Props = AudioTrackOptionsProps;\n  export type Result = AudioTrackOptionsResult;\n  export type Option = AudioTrackOption;\n}\n"],"mappings":";;;;AAoBA,MAAM,4BAA4B,uBAAuB;CACvD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,yBAAyB;AACjD,CAAC;;;;;;;AAQD,SAAgB,qBAAqB,OAAgE;CACnG;CAEA,OAAO,0BAA0B,KAAK;AACxC"}
+{"version":3,"file":"use-audio-track-options.js","names":[],"sources":["../../../../src/ui/audio-track/use-audio-track-options.ts"],"sourcesContent":["import { AudioTrackRadioGroupCore, type AudioTrackRadioGroupOption } from '@videojs/core';\nimport { selectAudioTrack } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface AudioTrackOptionsProps extends AudioTrackRadioGroupCore.Props {}\n\nexport type AudioTrackOption = TranslatedRadioOption<AudioTrackRadioGroupOption>;\n\nexport interface AudioTrackOptionsResult {\n  state: AudioTrackRadioGroupCore.State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: AudioTrackOption[];\n  disabled: boolean;\n  hidden: boolean;\n  setValue: (value: string) => void;\n}\n\nconst useAudioTrackRadioOptions = createRadioOptionsHook({\n  name: 'useAudioTrackOptions',\n  feature: 'audioTrack',\n  selector: selectAudioTrack,\n  createCore: () => new AudioTrackRadioGroupCore(),\n});\n\n/**\n * Create audio track menu options from the player audio track state. Returns `null` when the audio track feature is not\n * configured.\n *\n * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.\n */\nexport function useAudioTrackOptions(props?: AudioTrackOptionsProps): AudioTrackOptionsResult | null {\n  'use no memo';\n\n  return useAudioTrackRadioOptions(props);\n}\n\nexport namespace useAudioTrackOptions {\n  export type Props = AudioTrackOptionsProps;\n  export type Result = AudioTrackOptionsResult;\n  export type Option = AudioTrackOption;\n}\n"],"mappings":";;;;AAoBA,MAAM,4BAA4B,uBAAuB;CACvD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,yBAAyB;AACjD,CAAC;;;;;;;AAQD,SAAgB,qBAAqB,OAAgE;CACnG;CAEA,OAAO,0BAA0B,KAAK;AACxC"}

package/dist/dev/ui/audio-track-radio-group/audio-track-radio-group.d.ts

@@ -20,16 +20,16 @@ interface AudioTrackRadioGroupProps extends Omit<UIComponentProps<'div', AudioTr
  * Renders menu radio options for the player's audio tracks.
  *
  * @example
- * ```tsx
- * <AudioTrackRadioGroup
- *   renderItem={(props, item) => (
- *     <Menu.RadioItem {...props}>
- *       {item.label}
- *       <Menu.ItemIndicator checked={item.checked} />
- *     </Menu.RadioItem>
- *   )}
- * />
- * ```
+ *   ```tsx
+ *   <AudioTrackRadioGroup
+ *     renderItem={(props, item) => (
+ *       <Menu.RadioItem {...props}>
+ *         {item.label}
+ *         <Menu.ItemIndicator checked={item.checked} />
+ *       </Menu.RadioItem>
+ *     )}
+ *   />;
+ *   ```;
  */
 declare const AudioTrackRadioGroup: import("react").ForwardRefExoticComponent<Omit<AudioTrackRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace AudioTrackRadioGroup {

package/dist/dev/ui/audio-track-radio-group/audio-track-radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"audio-track-radio-group.d.ts","names":[],"sources":["../../../../src/ui/audio-track-radio-group/audio-track-radio-group.tsx"],"mappings":";;;;;;KAeY,gCAAgC;;EAE1C;;UAGe,sCAAsC,KAAK;;EAE1D;;UAGe,kCACP,KAAK,wBAAwB,yBAAyB,qBAC5D;;EAEF,aAAa,OAAO,+BAA+B,OAAO,kCAAkC;;;;;;;;;;;;;;;;;cAkBjF,sCAAoB,0BAAA,KAAA,oDAAA,cAAA;kBAyDhB;OACH,QAAQ;OACR,QAAQ,yBAAyB;OACjC,YAAY;OACZ,YAAY"}
+{"version":3,"file":"audio-track-radio-group.d.ts","names":[],"sources":["../../../../src/ui/audio-track-radio-group/audio-track-radio-group.tsx"],"mappings":";;;;;;KAeY,gCAAgC;;EAE1C;;UAGe,sCAAsC,KAAK;;EAE1D;;UAGe,kCACP,KAAK,wBAAwB,yBAAyB,qBAAqB;;EAEnF,aAAa,OAAO,+BAA+B,OAAO,kCAAkC;;;;;;;;;;;;;;;;;cAkBjF,sCAAoB,0BAAA,KAAA,oDAAA,cAAA;kBAyDhB;OACH,QAAQ;OACR,QAAQ,yBAAyB;OACjC,YAAY;OACZ,YAAY"}

package/dist/dev/ui/audio-track-radio-group/audio-track-radio-group.js

@@ -3,23 +3,23 @@ import { MenuRadioGroup } from "../menu/menu-radio-group.js";
 import { getStateDataAttrs } from "@videojs/core/dom";
 import { Fragment, forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { isFunction } from "@videojs/utils/predicate";
 import { AudioTrackRadioGroupDataAttrs } from "@videojs/core";
+import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/audio-track-radio-group/audio-track-radio-group.tsx
 /**
 * Renders menu radio options for the player's audio tracks.
 *
 * @example
-* ```tsx
-* <AudioTrackRadioGroup
-*   renderItem={(props, item) => (
-*     <Menu.RadioItem {...props}>
-*       {item.label}
-*       <Menu.ItemIndicator checked={item.checked} />
-*     </Menu.RadioItem>
-*   )}
-* />
-* ```
+*   ```tsx
+*   <AudioTrackRadioGroup
+*     renderItem={(props, item) => (
+*       <Menu.RadioItem {...props}>
+*         {item.label}
+*         <Menu.ItemIndicator checked={item.checked} />
+*       </Menu.RadioItem>
+*     )}
+*   />;
+*   ```;
 */
 const AudioTrackRadioGroup = forwardRef(function AudioTrackRadioGroup(componentProps, forwardedRef) {
 	const { renderItem, render, className, style, label, formatTrack, disabled, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;

package/dist/dev/ui/audio-track-radio-group/audio-track-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"audio-track-radio-group.js","names":[],"sources":["../../../../src/ui/audio-track-radio-group/audio-track-radio-group.tsx"],"sourcesContent":["import { type AudioTrackRadioGroupCore, AudioTrackRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport {\n  type AudioTrackOption,\n  type AudioTrackOptionsProps,\n  useAudioTrackOptions,\n} from '../audio-track/use-audio-track-options';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\n\nexport type AudioTrackRadioGroupItemState = AudioTrackOption & {\n  /** Whether this option is the currently enabled audio track. */\n  checked: boolean;\n};\n\nexport interface AudioTrackRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Audio track value represented by the option. */\n  'data-track': string;\n}\n\nexport interface AudioTrackRadioGroupProps\n  extends Omit<UIComponentProps<'div', AudioTrackRadioGroupCore.State>, 'children'>,\n    AudioTrackOptionsProps {\n  /** Render one consumer-owned menu radio item for every audio track. */\n  renderItem: (props: AudioTrackRadioGroupItemProps, state: AudioTrackRadioGroupItemState) => ReactElement;\n}\n\n/**\n * Renders menu radio options for the player's audio tracks.\n *\n * @example\n * ```tsx\n * <AudioTrackRadioGroup\n *   renderItem={(props, item) => (\n *     <Menu.RadioItem {...props}>\n *       {item.label}\n *       <Menu.ItemIndicator checked={item.checked} />\n *     </Menu.RadioItem>\n *   )}\n * />\n * ```\n */\nexport const AudioTrackRadioGroup = forwardRef<HTMLDivElement, AudioTrackRadioGroupProps>(\n  function AudioTrackRadioGroup(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      label,\n      formatTrack,\n      disabled,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const audioTrack = useAudioTrackOptions({ label, formatTrack, disabled });\n    if (!audioTrack) return null;\n\n    const { state, value, options, setValue } = audioTrack;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? audioTrack.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, AudioTrackRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-track': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\nexport namespace AudioTrackRadioGroup {\n  export type Props = AudioTrackRadioGroupProps;\n  export type State = AudioTrackRadioGroupCore.State;\n  export type ItemProps = AudioTrackRadioGroupItemProps;\n  export type ItemState = AudioTrackRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,uBAAuB,WAClC,SAAS,qBAAqB,gBAAgB,cAAc;CAC1D,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,aACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,aAAa,qBAAqB;EAAE;EAAO;EAAa;CAAS,CAAC;CACxE,IAAI,CAAC,YAAY,OAAO;CAExB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,WAAW,QAAQ,KAAA;CAEtF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,6BAA6B;EAC1D,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,cAAc,OAAO;IACrB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}
+{"version":3,"file":"audio-track-radio-group.js","names":[],"sources":["../../../../src/ui/audio-track-radio-group/audio-track-radio-group.tsx"],"sourcesContent":["import { type AudioTrackRadioGroupCore, AudioTrackRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport {\n  type AudioTrackOption,\n  type AudioTrackOptionsProps,\n  useAudioTrackOptions,\n} from '../audio-track/use-audio-track-options';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\n\nexport type AudioTrackRadioGroupItemState = AudioTrackOption & {\n  /** Whether this option is the currently enabled audio track. */\n  checked: boolean;\n};\n\nexport interface AudioTrackRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Audio track value represented by the option. */\n  'data-track': string;\n}\n\nexport interface AudioTrackRadioGroupProps\n  extends Omit<UIComponentProps<'div', AudioTrackRadioGroupCore.State>, 'children'>, AudioTrackOptionsProps {\n  /** Render one consumer-owned menu radio item for every audio track. */\n  renderItem: (props: AudioTrackRadioGroupItemProps, state: AudioTrackRadioGroupItemState) => ReactElement;\n}\n\n/**\n * Renders menu radio options for the player's audio tracks.\n *\n * @example\n *   ```tsx\n *   <AudioTrackRadioGroup\n *     renderItem={(props, item) => (\n *       <Menu.RadioItem {...props}>\n *         {item.label}\n *         <Menu.ItemIndicator checked={item.checked} />\n *       </Menu.RadioItem>\n *     )}\n *   />;\n *   ```;\n */\nexport const AudioTrackRadioGroup = forwardRef<HTMLDivElement, AudioTrackRadioGroupProps>(\n  function AudioTrackRadioGroup(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      label,\n      formatTrack,\n      disabled,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const audioTrack = useAudioTrackOptions({ label, formatTrack, disabled });\n    if (!audioTrack) return null;\n\n    const { state, value, options, setValue } = audioTrack;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? audioTrack.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, AudioTrackRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-track': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\nexport namespace AudioTrackRadioGroup {\n  export type Props = AudioTrackRadioGroupProps;\n  export type State = AudioTrackRadioGroupCore.State;\n  export type ItemProps = AudioTrackRadioGroupItemProps;\n  export type ItemState = AudioTrackRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,uBAAuB,WAClC,SAAS,qBAAqB,gBAAgB,cAAc;CAC1D,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,aACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,aAAa,qBAAqB;EAAE;EAAO;EAAa;CAAS,CAAC;CACxE,IAAI,CAAC,YAAY,OAAO;CAExB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,WAAW,QAAQ,KAAA;CAEtF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,6BAA6B;EAC1D,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,cAAc,OAAO;IACrB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}

package/dist/dev/ui/buffering-indicator/buffering-indicator.d.ts

@@ -8,17 +8,17 @@ interface BufferingIndicatorProps extends UIComponentProps<'div', BufferingIndic
  * Visibility is delayed (default 500ms) to avoid flashing on quick buffers.
  *
  * @example
- * ```tsx
- * <BufferingIndicator />
+ *   ```tsx
+ *   <BufferingIndicator />
  *
- * <BufferingIndicator delay={1000} />
+ *   <BufferingIndicator delay={1000} />
  *
- * <BufferingIndicator
+ *   <BufferingIndicator
  *   render={(props, state) => (
- *     <div {...props}>{state.visible && <Spinner />}</div>
+ *   <div {...props}>{state.visible && <Spinner />}</div>
  *   )}
- * />
- * ```
+ *   />
+ *   ```;
  */
 declare const BufferingIndicator: import("react").ForwardRefExoticComponent<Omit<BufferingIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace BufferingIndicator {

package/dist/dev/ui/buffering-indicator/buffering-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buffering-indicator.d.ts","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"mappings":";;;UAUiB,gCACP,wBAAwB,uBAAuB,QACrD,uBAAuB;;;;;;;;;;;;;;;;;;;cAoBd,oCAAkB,0BAAA,KAAA,kDAAA,cAAA;kBAqCd;OACH,QAAQ;OACR,QAAQ,uBAAuB"}
+{"version":3,"file":"buffering-indicator.d.ts","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"mappings":";;;UAUiB,gCACP,wBAAwB,uBAAuB,QAAQ,uBAAuB;;;;;;;;;;;;;;;;;;;cAoB3E,oCAAkB,0BAAA,KAAA,kDAAA,cAAA;kBAuCd;OACH,QAAQ;OACR,QAAQ,uBAAuB"}

package/dist/dev/ui/buffering-indicator/buffering-indicator.js

@@ -11,17 +11,17 @@ import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from "@videojs/co
 * Visibility is delayed (default 500ms) to avoid flashing on quick buffers.
 *
 * @example
-* ```tsx
-* <BufferingIndicator />
+*   ```tsx
+*   <BufferingIndicator />
 *
-* <BufferingIndicator delay={1000} />
+*   <BufferingIndicator delay={1000} />
 *
-* <BufferingIndicator
+*   <BufferingIndicator
 *   render={(props, state) => (
-*     <div {...props}>{state.visible && <Spinner />}</div>
+*   <div {...props}>{state.visible && <Spinner />}</div>
 *   )}
-* />
-* ```
+*   />
+*   ```;
 */
 const BufferingIndicator = forwardRef(function BufferingIndicator(componentProps, forwardedRef) {
 	const { render, className, style, delay, ...elementProps } = componentProps;

package/dist/dev/ui/buffering-indicator/buffering-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"buffering-indicator.js","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"sourcesContent":["import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState, useSyncExternalStore } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface BufferingIndicatorProps\n  extends UIComponentProps<'div', BufferingIndicatorCore.State>,\n    BufferingIndicatorCore.Props {}\n\n/**\n * Displays a buffering indicator when media is waiting for data.\n *\n * Visibility is delayed (default 500ms) to avoid flashing on quick buffers.\n *\n * @example\n * ```tsx\n * <BufferingIndicator />\n *\n * <BufferingIndicator delay={1000} />\n *\n * <BufferingIndicator\n *   render={(props, state) => (\n *     <div {...props}>{state.visible && <Spinner />}</div>\n *   )}\n * />\n * ```\n */\nexport const BufferingIndicator = forwardRef(function BufferingIndicator(\n  componentProps: BufferingIndicatorProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, delay, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new BufferingIndicatorCore());\n  useDestroy(core);\n  core.setProps({ delay });\n\n  if (playback) core.update(playback);\n\n  const state = useSyncExternalStore(\n    (cb) => core.state.subscribe(cb),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('BufferingIndicator', 'playback');\n    return null;\n  }\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: BufferingIndicatorDataAttrs,\n      ref: [forwardedRef],\n      props: [elementProps],\n    }\n  );\n});\n\nexport namespace BufferingIndicator {\n  export type Props = BufferingIndicatorProps;\n  export type State = BufferingIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,qBAAqB,WAAW,SAAS,mBACpD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,GAAG,iBAAiB;CAE7D,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;CAC1D,WAAW,IAAI;CACf,KAAK,SAAS,EAAE,MAAM,CAAC;CAEvB,IAAI,UAAU,KAAK,OAAO,QAAQ;CAElC,MAAM,QAAQ,sBACX,OAAO,KAAK,MAAM,UAAU,EAAE,SACzB,KAAK,MAAM,eACX,KAAK,MAAM,OACnB;CAEA,IAAI,CAAC,UAAU;EACA,kBAAkB,sBAAsB,UAAU;EAC/D,OAAO;CACT;CAEA,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,YAAY;CACtB,CACF;AACF,CAAC"}
+{"version":3,"file":"buffering-indicator.js","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"sourcesContent":["import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState, useSyncExternalStore } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface BufferingIndicatorProps\n  extends UIComponentProps<'div', BufferingIndicatorCore.State>, BufferingIndicatorCore.Props {}\n\n/**\n * Displays a buffering indicator when media is waiting for data.\n *\n * Visibility is delayed (default 500ms) to avoid flashing on quick buffers.\n *\n * @example\n *   ```tsx\n *   <BufferingIndicator />\n *\n *   <BufferingIndicator delay={1000} />\n *\n *   <BufferingIndicator\n *   render={(props, state) => (\n *   <div {...props}>{state.visible && <Spinner />}</div>\n *   )}\n *   />\n *   ```;\n */\nexport const BufferingIndicator = forwardRef(function BufferingIndicator(\n  componentProps: BufferingIndicatorProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, delay, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new BufferingIndicatorCore());\n\n  useDestroy(core);\n  core.setProps({ delay });\n\n  if (playback) core.update(playback);\n\n  const state = useSyncExternalStore(\n    (cb) => core.state.subscribe(cb),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('BufferingIndicator', 'playback');\n\n    return null;\n  }\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: BufferingIndicatorDataAttrs,\n      ref: [forwardedRef],\n      props: [elementProps],\n    }\n  );\n});\n\nexport namespace BufferingIndicator {\n  export type Props = BufferingIndicatorProps;\n  export type State = BufferingIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,qBAAqB,WAAW,SAAS,mBACpD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,GAAG,iBAAiB;CAE7D,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;CAE1D,WAAW,IAAI;CACf,KAAK,SAAS,EAAE,MAAM,CAAC;CAEvB,IAAI,UAAU,KAAK,OAAO,QAAQ;CAElC,MAAM,QAAQ,sBACX,OAAO,KAAK,MAAM,UAAU,EAAE,SACzB,KAAK,MAAM,eACX,KAAK,MAAM,OACnB;CAEA,IAAI,CAAC,UAAU;EACA,kBAAkB,sBAAsB,UAAU;EAE/D,OAAO;CACT;CAEA,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,YAAY;CACtB,CACF;AACF,CAAC"}

package/dist/dev/ui/captions-button/captions-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"captions-button.d.ts","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"mappings":";;;UAMiB,4BACP,2BAA2B,mBAAmB,QACpD,mBAAmB;;cAGV,gCAAc,0BAAA,sCAAA,cAAA;kBAUV;OACH,QAAQ;OACR,QAAQ,mBAAmB"}
+{"version":3,"file":"captions-button.d.ts","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"mappings":";;;UAMiB,4BACP,2BAA2B,mBAAmB,QAAQ,mBAAmB;;cAGtE,gCAAc,0BAAA,sCAAA,cAAA;kBAUV;OACH,QAAQ;OACR,QAAQ,mBAAmB"}

package/dist/dev/ui/captions-button/captions-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"captions-button.js","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"sourcesContent":["import { CaptionsButtonCore, CaptionsButtonDataAttrs } from '@videojs/core';\nimport { selectTextTrack } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface CaptionsButtonProps\n  extends UIComponentProps<'button', CaptionsButtonCore.State>,\n    CaptionsButtonCore.Props {}\n\n/** A button that toggles captions. */\nexport const CaptionsButton = createMediaButton<CaptionsButtonCore, CaptionsButtonProps>({\n  displayName: 'CaptionsButton',\n  core: CaptionsButtonCore,\n  stateAttrMap: CaptionsButtonDataAttrs,\n  selector: selectTextTrack,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'toggleSubtitles',\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace CaptionsButton {\n  export type Props = CaptionsButtonProps;\n  export type State = CaptionsButtonCore.State;\n}\n"],"mappings":";;;;;AAWA,MAAa,iBAAiB,kBAA2D;CACvF,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}
+{"version":3,"file":"captions-button.js","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"sourcesContent":["import { CaptionsButtonCore, CaptionsButtonDataAttrs } from '@videojs/core';\nimport { selectTextTrack } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface CaptionsButtonProps\n  extends UIComponentProps<'button', CaptionsButtonCore.State>, CaptionsButtonCore.Props {}\n\n/** A button that toggles captions. */\nexport const CaptionsButton = createMediaButton<CaptionsButtonCore, CaptionsButtonProps>({\n  displayName: 'CaptionsButton',\n  core: CaptionsButtonCore,\n  stateAttrMap: CaptionsButtonDataAttrs,\n  selector: selectTextTrack,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'toggleSubtitles',\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace CaptionsButton {\n  export type Props = CaptionsButtonProps;\n  export type State = CaptionsButtonCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,iBAAiB,kBAA2D;CACvF,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}

package/dist/dev/ui/captions-radio-group/captions-radio-group.d.ts

@@ -20,16 +20,16 @@ interface CaptionsRadioGroupProps extends Omit<UIComponentProps<'div', CaptionsR
  * Renders menu radio items for the player's captions and subtitles tracks.
  *
  * @example
- * ```tsx
- * <CaptionsRadioGroup
- *   renderItem={(props, item) => (
- *     <Menu.RadioItem {...props}>
- *       {item.label}
- *       <Menu.ItemIndicator checked={item.checked} />
- *     </Menu.RadioItem>
- *   )}
- * />
- * ```
+ *   ```tsx
+ *   <CaptionsRadioGroup
+ *     renderItem={(props, item) => (
+ *       <Menu.RadioItem {...props}>
+ *         {item.label}
+ *         <Menu.ItemIndicator checked={item.checked} />
+ *       </Menu.RadioItem>
+ *     )}
+ *   />;
+ *   ```;
  */
 declare const CaptionsRadioGroup: import("react").ForwardRefExoticComponent<Omit<CaptionsRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace CaptionsRadioGroup {

package/dist/dev/ui/captions-radio-group/captions-radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"captions-radio-group.d.ts","names":[],"sources":["../../../../src/ui/captions-radio-group/captions-radio-group.tsx"],"mappings":";;;;;;KAWY,8BAA8B;;EAExC;;UAGe,oCAAoC,KAAK;;EAExD;;UAGe,gCACP,KAAK,wBAAwB,uBAAuB,qBAC1D;;EAEF,aAAa,OAAO,6BAA6B,OAAO,gCAAgC;;;;;;;;;;;;;;;;;cAkB7E,oCAAkB,0BAAA,KAAA,kDAAA,cAAA;kBAyDd;OACH,QAAQ;OACR,QAAQ,uBAAuB;OAC/B,YAAY;OACZ,YAAY"}
+{"version":3,"file":"captions-radio-group.d.ts","names":[],"sources":["../../../../src/ui/captions-radio-group/captions-radio-group.tsx"],"mappings":";;;;;;KAWY,8BAA8B;;EAExC;;UAGe,oCAAoC,KAAK;;EAExD;;UAGe,gCACP,KAAK,wBAAwB,uBAAuB,qBAAqB;;EAEjF,aAAa,OAAO,6BAA6B,OAAO,gCAAgC;;;;;;;;;;;;;;;;;cAkB7E,oCAAkB,0BAAA,KAAA,kDAAA,cAAA;kBAyDd;OACH,QAAQ;OACR,QAAQ,uBAAuB;OAC/B,YAAY;OACZ,YAAY"}

package/dist/dev/ui/captions-radio-group/captions-radio-group.js

@@ -3,23 +3,23 @@ import { useCaptionsOptions } from "./use-captions-options.js";
 import { getStateDataAttrs } from "@videojs/core/dom";
 import { Fragment, forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { isFunction } from "@videojs/utils/predicate";
 import { CaptionsRadioGroupDataAttrs } from "@videojs/core";
+import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/captions-radio-group/captions-radio-group.tsx
 /**
 * Renders menu radio items for the player's captions and subtitles tracks.
 *
 * @example
-* ```tsx
-* <CaptionsRadioGroup
-*   renderItem={(props, item) => (
-*     <Menu.RadioItem {...props}>
-*       {item.label}
-*       <Menu.ItemIndicator checked={item.checked} />
-*     </Menu.RadioItem>
-*   )}
-* />
-* ```
+*   ```tsx
+*   <CaptionsRadioGroup
+*     renderItem={(props, item) => (
+*       <Menu.RadioItem {...props}>
+*         {item.label}
+*         <Menu.ItemIndicator checked={item.checked} />
+*       </Menu.RadioItem>
+*     )}
+*   />;
+*   ```;
 */
 const CaptionsRadioGroup = forwardRef(function CaptionsRadioGroup(componentProps, forwardedRef) {
 	const { renderItem, render, className, style, label, formatTrack, disabled, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;

package/dist/dev/ui/captions-radio-group/captions-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"captions-radio-group.js","names":[],"sources":["../../../../src/ui/captions-radio-group/captions-radio-group.tsx"],"sourcesContent":["import { type CaptionsRadioGroupCore, CaptionsRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport { type CaptionsOption, type CaptionsOptionsProps, useCaptionsOptions } from './use-captions-options';\n\nexport type CaptionsRadioGroupItemState = CaptionsOption & {\n  /** Whether this option is currently selected. */\n  checked: boolean;\n};\n\nexport interface CaptionsRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Text track value represented by the item. */\n  'data-track': string;\n}\n\nexport interface CaptionsRadioGroupProps\n  extends Omit<UIComponentProps<'div', CaptionsRadioGroupCore.State>, 'children'>,\n    CaptionsOptionsProps {\n  /** Render one consumer-owned menu radio item for every captions option. */\n  renderItem: (props: CaptionsRadioGroupItemProps, state: CaptionsRadioGroupItemState) => ReactElement;\n}\n\n/**\n * Renders menu radio items for the player's captions and subtitles tracks.\n *\n * @example\n * ```tsx\n * <CaptionsRadioGroup\n *   renderItem={(props, item) => (\n *     <Menu.RadioItem {...props}>\n *       {item.label}\n *       <Menu.ItemIndicator checked={item.checked} />\n *     </Menu.RadioItem>\n *   )}\n * />\n * ```\n */\nexport const CaptionsRadioGroup = forwardRef<HTMLDivElement, CaptionsRadioGroupProps>(\n  function CaptionsRadioGroup(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      label,\n      formatTrack,\n      disabled,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const captions = useCaptionsOptions({ label, formatTrack, disabled });\n    if (!captions) return null;\n\n    const { state, value, options, setValue } = captions;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? captions.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, CaptionsRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-track': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\nexport namespace CaptionsRadioGroup {\n  export type Props = CaptionsRadioGroupProps;\n  export type State = CaptionsRadioGroupCore.State;\n  export type ItemProps = CaptionsRadioGroupItemProps;\n  export type ItemState = CaptionsRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,gBAAgB,cAAc;CACxD,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,aACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,WAAW,mBAAmB;EAAE;EAAO;EAAa;CAAS,CAAC;CACpE,IAAI,CAAC,UAAU,OAAO;CAEtB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,SAAS,QAAQ,KAAA;CAEpF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,2BAA2B;EACxD,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,cAAc,OAAO;IACrB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}
+{"version":3,"file":"captions-radio-group.js","names":[],"sources":["../../../../src/ui/captions-radio-group/captions-radio-group.tsx"],"sourcesContent":["import { type CaptionsRadioGroupCore, CaptionsRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport { type CaptionsOption, type CaptionsOptionsProps, useCaptionsOptions } from './use-captions-options';\n\nexport type CaptionsRadioGroupItemState = CaptionsOption & {\n  /** Whether this option is currently selected. */\n  checked: boolean;\n};\n\nexport interface CaptionsRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Text track value represented by the item. */\n  'data-track': string;\n}\n\nexport interface CaptionsRadioGroupProps\n  extends Omit<UIComponentProps<'div', CaptionsRadioGroupCore.State>, 'children'>, CaptionsOptionsProps {\n  /** Render one consumer-owned menu radio item for every captions option. */\n  renderItem: (props: CaptionsRadioGroupItemProps, state: CaptionsRadioGroupItemState) => ReactElement;\n}\n\n/**\n * Renders menu radio items for the player's captions and subtitles tracks.\n *\n * @example\n *   ```tsx\n *   <CaptionsRadioGroup\n *     renderItem={(props, item) => (\n *       <Menu.RadioItem {...props}>\n *         {item.label}\n *         <Menu.ItemIndicator checked={item.checked} />\n *       </Menu.RadioItem>\n *     )}\n *   />;\n *   ```;\n */\nexport const CaptionsRadioGroup = forwardRef<HTMLDivElement, CaptionsRadioGroupProps>(\n  function CaptionsRadioGroup(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      label,\n      formatTrack,\n      disabled,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const captions = useCaptionsOptions({ label, formatTrack, disabled });\n    if (!captions) return null;\n\n    const { state, value, options, setValue } = captions;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? captions.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, CaptionsRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-track': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\nexport namespace CaptionsRadioGroup {\n  export type Props = CaptionsRadioGroupProps;\n  export type State = CaptionsRadioGroupCore.State;\n  export type ItemProps = CaptionsRadioGroupItemProps;\n  export type ItemState = CaptionsRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,gBAAgB,cAAc;CACxD,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,aACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,WAAW,mBAAmB;EAAE;EAAO;EAAa;CAAS,CAAC;CACpE,IAAI,CAAC,UAAU,OAAO;CAEtB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,SAAS,QAAQ,KAAA;CAEpF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,2BAA2B;EACxD,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,cAAc,OAAO;IACrB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}

package/dist/dev/ui/captions-radio-group/use-captions-options.d.ts

@@ -15,9 +15,8 @@ interface CaptionsOptionsResult {
   setValue: (value: string) => void;
 }
 /**
- * Create captions menu options (including an `Off` option) from the player
- * text track state. Returns `null` when the text tracks feature is not
- * configured.
+ * Create captions menu options (including an `Off` option) from the player text track state. Returns `null` when the
+ * text tracks feature is not configured.
  *
  * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.
  */

package/dist/dev/ui/captions-radio-group/use-captions-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-captions-options.d.ts","names":[],"sources":["../../../../src/ui/captions-radio-group/use-captions-options.ts"],"mappings":";;;UAKiB,6BAA6B,uBAAuB;KAEzD,iBAAiB,sBAAsB;UAElC;EACf,OAAO,uBAAuB;EAC9B;EACA;EACA;EACA,SAAS;EACT;EACA;EACA;EACA,WAAW;;;;;;;;;iBAiBG,mBAAmB,QAAQ,uBAAuB;kBASjD;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}
+{"version":3,"file":"use-captions-options.d.ts","names":[],"sources":["../../../../src/ui/captions-radio-group/use-captions-options.ts"],"mappings":";;;UAKiB,6BAA6B,uBAAuB;KAEzD,iBAAiB,sBAAsB;UAElC;EACf,OAAO,uBAAuB;EAC9B;EACA;EACA;EACA,SAAS;EACT;EACA;EACA;EACA,WAAW;;;;;;;;iBAgBG,mBAAmB,QAAQ,uBAAuB;kBASjD;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}

package/dist/dev/ui/captions-radio-group/use-captions-options.js

@@ -9,9 +9,8 @@ const useCaptionsRadioOptions = createRadioOptionsHook({
 	createCore: () => new CaptionsRadioGroupCore()
 });
 /**
-* Create captions menu options (including an `Off` option) from the player
-* text track state. Returns `null` when the text tracks feature is not
-* configured.
+* Create captions menu options (including an `Off` option) from the player text track state. Returns `null` when the
+* text tracks feature is not configured.
 *
 * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.
 */

package/dist/dev/ui/captions-radio-group/use-captions-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-captions-options.js","names":[],"sources":["../../../../src/ui/captions-radio-group/use-captions-options.ts"],"sourcesContent":["import { CaptionsRadioGroupCore, type CaptionsRadioGroupOption } from '@videojs/core';\nimport { selectTextTrack } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface CaptionsOptionsProps extends CaptionsRadioGroupCore.Props {}\n\nexport type CaptionsOption = TranslatedRadioOption<CaptionsRadioGroupOption>;\n\nexport interface CaptionsOptionsResult {\n  state: CaptionsRadioGroupCore.State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: CaptionsOption[];\n  disabled: boolean;\n  hidden: boolean;\n  showMenu: boolean;\n  setValue: (value: string) => void;\n}\n\nconst useCaptionsRadioOptions = createRadioOptionsHook({\n  name: 'useCaptionsOptions',\n  feature: 'textTrack',\n  selector: selectTextTrack,\n  createCore: () => new CaptionsRadioGroupCore(),\n});\n\n/**\n * Create captions menu options (including an `Off` option) from the player\n * text track state. Returns `null` when the text tracks feature is not\n * configured.\n *\n * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.\n */\nexport function useCaptionsOptions(props?: CaptionsOptionsProps): CaptionsOptionsResult | null {\n  'use no memo';\n\n  const result = useCaptionsRadioOptions(props);\n  if (!result) return null;\n\n  return { ...result, showMenu: result.state.options.length > 2 };\n}\n\nexport namespace useCaptionsOptions {\n  export type Props = CaptionsOptionsProps;\n  export type Result = CaptionsOptionsResult;\n  export type Option = CaptionsOption;\n}\n"],"mappings":";;;;AAqBA,MAAM,0BAA0B,uBAAuB;CACrD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,uBAAuB;AAC/C,CAAC;;;;;;;;AASD,SAAgB,mBAAmB,OAA4D;CAC7F;CAEA,MAAM,SAAS,wBAAwB,KAAK;CAC5C,IAAI,CAAC,QAAQ,OAAO;CAEpB,OAAO;EAAE,GAAG;EAAQ,UAAU,OAAO,MAAM,QAAQ,SAAS;CAAE;AAChE"}
+{"version":3,"file":"use-captions-options.js","names":[],"sources":["../../../../src/ui/captions-radio-group/use-captions-options.ts"],"sourcesContent":["import { CaptionsRadioGroupCore, type CaptionsRadioGroupOption } from '@videojs/core';\nimport { selectTextTrack } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface CaptionsOptionsProps extends CaptionsRadioGroupCore.Props {}\n\nexport type CaptionsOption = TranslatedRadioOption<CaptionsRadioGroupOption>;\n\nexport interface CaptionsOptionsResult {\n  state: CaptionsRadioGroupCore.State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: CaptionsOption[];\n  disabled: boolean;\n  hidden: boolean;\n  showMenu: boolean;\n  setValue: (value: string) => void;\n}\n\nconst useCaptionsRadioOptions = createRadioOptionsHook({\n  name: 'useCaptionsOptions',\n  feature: 'textTrack',\n  selector: selectTextTrack,\n  createCore: () => new CaptionsRadioGroupCore(),\n});\n\n/**\n * Create captions menu options (including an `Off` option) from the player text track state. Returns `null` when the\n * text tracks feature is not configured.\n *\n * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.\n */\nexport function useCaptionsOptions(props?: CaptionsOptionsProps): CaptionsOptionsResult | null {\n  'use no memo';\n\n  const result = useCaptionsRadioOptions(props);\n  if (!result) return null;\n\n  return { ...result, showMenu: result.state.options.length > 2 };\n}\n\nexport namespace useCaptionsOptions {\n  export type Props = CaptionsOptionsProps;\n  export type Result = CaptionsOptionsResult;\n  export type Option = CaptionsOption;\n}\n"],"mappings":";;;;AAqBA,MAAM,0BAA0B,uBAAuB;CACrD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,uBAAuB;AAC/C,CAAC;;;;;;;AAQD,SAAgB,mBAAmB,OAA4D;CAC7F;CAEA,MAAM,SAAS,wBAAwB,KAAK;CAC5C,IAAI,CAAC,QAAQ,OAAO;CAEpB,OAAO;EAAE,GAAG;EAAQ,UAAU,OAAO,MAAM,QAAQ,SAAS;CAAE;AAChE"}

package/dist/dev/ui/controls/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/controls/context.tsx"],"sourcesContent":["import type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst ControlsContext = createContext<ControlsContextValue | null>(null);\n\nexport const ControlsContextProvider = ControlsContext.Provider;\n\nexport function useControlsContext(): ControlsContextValue {\n  const ctx = useContext(ControlsContext);\n  if (!ctx) throw new Error('Controls compound components must be used within a Controls.Root');\n  return ctx;\n}\n\nexport function useOptionalControlsContext(): ControlsContextValue | null {\n  return useContext(ControlsContext);\n}\n"],"mappings":";;AAQA,MAAM,kBAAkB,cAA2C,IAAI;AAEvE,MAAa,0BAA0B,gBAAgB;AAEvD,SAAgB,qBAA2C;CACzD,MAAM,MAAM,WAAW,eAAe;CACtC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,kEAAkE;CAC5F,OAAO;AACT;AAEA,SAAgB,6BAA0D;CACxE,OAAO,WAAW,eAAe;AACnC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/controls/context.tsx"],"sourcesContent":["import type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst ControlsContext = createContext<ControlsContextValue | null>(null);\n\nexport const ControlsContextProvider = ControlsContext.Provider;\n\nexport function useControlsContext(): ControlsContextValue {\n  const ctx = useContext(ControlsContext);\n  if (!ctx) throw new Error('Controls compound components must be used within a Controls.Root');\n\n  return ctx;\n}\n\nexport function useOptionalControlsContext(): ControlsContextValue | null {\n  return useContext(ControlsContext);\n}\n"],"mappings":";;AAQA,MAAM,kBAAkB,cAA2C,IAAI;AAEvE,MAAa,0BAA0B,gBAAgB;AAEvD,SAAgB,qBAA2C;CACzD,MAAM,MAAM,WAAW,eAAe;CACtC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,kEAAkE;CAE5F,OAAO;AACT;AAEA,SAAgB,6BAA0D;CACxE,OAAO,WAAW,eAAe;AACnC"}

package/dist/dev/ui/controls/controls-backdrop.d.ts

@@ -0,0 +1,16 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { ControlsCore } from "@videojs/core";
+//#region src/ui/controls/controls-backdrop.d.ts
+interface ControlsBackdropProps extends UIComponentProps<'div', ControlsCore.State> {}
+/**
+ * Presentational layer behind player controls. Renders a `<div>` with the controls state data attributes so skins can
+ * style it without reaching across sibling components.
+ */
+declare const ControlsBackdrop: import("react").ForwardRefExoticComponent<Omit<ControlsBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace ControlsBackdrop {
+  type Props = ControlsBackdropProps;
+  type State = ControlsCore.State;
+}
+//#endregion
+export { ControlsBackdrop, ControlsBackdropProps };
+//# sourceMappingURL=controls-backdrop.d.ts.map

package/dist/dev/ui/controls/controls-backdrop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls-backdrop.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-backdrop.tsx"],"mappings":";;;UAOiB,8BAA8B,wBAAwB,aAAa;;;;;cAMvE,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBAkBZ;OACH,QAAQ;OACR,QAAQ,aAAa"}

package/dist/dev/ui/controls/controls-backdrop.js

@@ -0,0 +1,28 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useControlsContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/controls/controls-backdrop.tsx
+/**
+* Presentational layer behind player controls. Renders a `<div>` with the controls state data attributes so skins can
+* style it without reaching across sibling components.
+*/
+const ControlsBackdrop = forwardRef(function ControlsBackdrop({ render, className, style, ...elementProps }, forwardedRef) {
+	const { state, stateAttrMap } = useControlsContext();
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef],
+		props: [{
+			role: "presentation",
+			"aria-hidden": true
+		}, elementProps]
+	});
+});
+//#endregion
+export { ControlsBackdrop };
+
+//# sourceMappingURL=controls-backdrop.js.map

package/dist/dev/ui/controls/controls-backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls-backdrop.js","names":[],"sources":["../../../../src/ui/controls/controls-backdrop.tsx"],"sourcesContent":["import type { ControlsCore } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useControlsContext } from './context';\n\nexport interface ControlsBackdropProps extends UIComponentProps<'div', ControlsCore.State> {}\n\n/**\n * Presentational layer behind player controls. Renders a `<div>` with the controls state data attributes so skins can\n * style it without reaching across sibling components.\n */\nexport const ControlsBackdrop = forwardRef<HTMLDivElement, ControlsBackdropProps>(function ControlsBackdrop(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap } = useControlsContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef],\n      props: [{ role: 'presentation', 'aria-hidden': true }, elementProps],\n    }\n  );\n});\n\nexport namespace ControlsBackdrop {\n  export type Props = ControlsBackdropProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,mBAAmB,WAAkD,SAAS,iBACzF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,OAAO,iBAAiB,mBAAmB;CAEnD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC;GAAE,MAAM;GAAgB,eAAe;EAAK,GAAG,YAAY;CACrE,CACF;AACF,CAAC"}

package/dist/dev/ui/controls/controls-content.d.ts

@@ -0,0 +1,16 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { ReactNode } from "react";
+import { ControlsCore } from "@videojs/core";
+//#region src/ui/controls/controls-content.d.ts
+interface ControlsContentProps extends UIComponentProps<'div', ControlsCore.State> {
+  children?: ReactNode | undefined;
+}
+/** Renders the interactive controls surface. */
+declare const ControlsContent: import("react").ForwardRefExoticComponent<Omit<ControlsContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace ControlsContent {
+  type Props = ControlsContentProps;
+  type State = ControlsCore.State;
+}
+//#endregion
+export { ControlsContent, ControlsContentProps };
+//# sourceMappingURL=controls-content.d.ts.map

package/dist/dev/ui/controls/controls-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls-content.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-content.tsx"],"mappings":";;;;UAQiB,6BAA6B,wBAAwB,aAAa;EACjF,WAAW;;;cAIA,iCAAe,0BAAA,KAAA,+CAAA,cAAA;kBAmBX;OACH,QAAQ;OACR,QAAQ,aAAa"}

package/dist/dev/ui/controls/controls-content.js

@@ -0,0 +1,27 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useControlsContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/controls/controls-content.tsx
+/** Renders the interactive controls surface. */
+const ControlsContent = forwardRef(function ControlsContent(componentProps, forwardedRef) {
+	const { render, className, style, children, ...elementProps } = componentProps;
+	const { state, stateAttrMap } = useControlsContext();
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef],
+		props: [
+			{ children },
+			elementProps,
+			{ "data-interactive": "" }
+		]
+	});
+});
+//#endregion
+export { ControlsContent };
+
+//# sourceMappingURL=controls-content.js.map

package/dist/dev/ui/controls/controls-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls-content.js","names":[],"sources":["../../../../src/ui/controls/controls-content.tsx"],"sourcesContent":["import type { ControlsCore } from '@videojs/core';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useControlsContext } from './context';\n\nexport interface ControlsContentProps extends UIComponentProps<'div', ControlsCore.State> {\n  children?: ReactNode | undefined;\n}\n\n/** Renders the interactive controls surface. */\nexport const ControlsContent = forwardRef(function ControlsContent(\n  componentProps: ControlsContentProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n  const { state, stateAttrMap } = useControlsContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef],\n      props: [{ children }, elementProps, { 'data-interactive': '' }],\n    }\n  );\n});\n\nexport namespace ControlsContent {\n  export type Props = ControlsContentProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;AAaA,MAAa,kBAAkB,WAAW,SAAS,gBACjD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAChE,MAAM,EAAE,OAAO,iBAAiB,mBAAmB;CAEnD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,YAAY;EAClB,OAAO;GAAC,EAAE,SAAS;GAAG;GAAc,EAAE,oBAAoB,GAAG;EAAC;CAChE,CACF;AACF,CAAC"}

package/dist/dev/ui/controls/controls-root.d.ts

@@ -1,12 +1,11 @@
-import { UIComponentProps } from "../../utils/types.js";
 import { ReactNode } from "react";
 import { ControlsCore } from "@videojs/core";
 //#region src/ui/controls/controls-root.d.ts
-interface ControlsRootProps extends UIComponentProps<'div', ControlsCore.State> {
+interface ControlsRootProps {
   children?: ReactNode | undefined;
 }
-/** Root container for player controls state and rendered control content. */
-declare const ControlsRoot: import("react").ForwardRefExoticComponent<Omit<ControlsRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Manages controls state and provides it to the compound parts. Does not render an element. */
+declare function ControlsRoot({ children }: ControlsRootProps): ReactNode;
 declare namespace ControlsRoot {
   type Props = ControlsRootProps;
   type State = ControlsCore.State;

package/dist/dev/ui/controls/controls-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controls-root.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"mappings":";;;;UAUiB,0BAA0B,wBAAwB,aAAa;EAC9E,WAAW;;;cAIA,8BAAY,0BAAA,KAAA,4CAAA,cAAA;kBAkCR;OACH,QAAQ;OACR,QAAQ,aAAa"}
+{"version":3,"file":"controls-root.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"mappings":";;;UAQiB;EACf,WAAW;;;iBAIG,eAAe,YAAY,oBAAoB;kBAkB9C;OACH,QAAQ;OACR,QAAQ,aAAa"}

package/dist/dev/ui/controls/controls-root.js

@@ -1,14 +1,12 @@
 import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
 import { ControlsContextProvider } from "./context.js";
 import { logMissingFeature, selectControls } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
+import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { ControlsCore, ControlsDataAttrs } from "@videojs/core";
 //#region src/ui/controls/controls-root.tsx
-/** Root container for player controls state and rendered control content. */
-const ControlsRoot = forwardRef(function ControlsRoot(componentProps, forwardedRef) {
-	const { render, className, style, children, ...elementProps } = componentProps;
+/** Manages controls state and provides it to the compound parts. Does not render an element. */
+function ControlsRoot({ children }) {
 	const controls = usePlayer(selectControls);
 	const [core] = useState(() => new ControlsCore());
 	if (!controls) {
@@ -22,22 +20,9 @@ const ControlsRoot = forwardRef(function ControlsRoot(componentProps, forwardedR
 			state,
 			stateAttrMap: ControlsDataAttrs
 		},
-		children: renderElement("div", {
-			render,
-			className,
-			style
-		}, {
-			state,
-			stateAttrMap: ControlsDataAttrs,
-			ref: [forwardedRef],
-			props: [
-				{ children },
-				elementProps,
-				{ "data-interactive": "" }
-			]
-		})
+		children
 	});
-});
+}
 //#endregion
 export { ControlsRoot };
 

package/dist/dev/ui/controls/controls-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls-root.js","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { ControlsContextProvider } from './context';\n\nexport interface ControlsRootProps extends UIComponentProps<'div', ControlsCore.State> {\n  children?: ReactNode | undefined;\n}\n\n/** Root container for player controls state and rendered control content. */\nexport const ControlsRoot = forwardRef(function ControlsRoot(\n  componentProps: ControlsRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const controls = usePlayer(selectControls);\n\n  const [core] = useState(() => new ControlsCore());\n\n  if (!controls) {\n    if (__DEV__) logMissingFeature('Controls.Root', 'controls');\n    return null;\n  }\n\n  core.setMedia(controls);\n  const state = core.getState();\n\n  return (\n    <ControlsContextProvider value={{ state, stateAttrMap: ControlsDataAttrs }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: ControlsDataAttrs,\n          ref: [forwardedRef],\n          props: [{ children }, elementProps, { 'data-interactive': '' }],\n        }\n      )}\n    </ControlsContextProvider>\n  );\n});\n\nexport namespace ControlsRoot {\n  export type Props = ControlsRootProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;;AAeA,MAAa,eAAe,WAAW,SAAS,aAC9C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,aAAa,CAAC;CAEhD,IAAI,CAAC,UAAU;EACA,kBAAkB,iBAAiB,UAAU;EAC1D,OAAO;CACT;CAEA,KAAK,SAAS,QAAQ;CACtB,MAAM,QAAQ,KAAK,SAAS;CAE5B,OACE,oBAAC,yBAAD;EAAyB,OAAO;GAAE;GAAO,cAAc;EAAkB;EACtE,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,YAAY;GAClB,OAAO;IAAC,EAAE,SAAS;IAAG;IAAc,EAAE,oBAAoB,GAAG;GAAC;EAChE,CACF;CACuB,CAAA;AAE7B,CAAC"}
+{"version":3,"file":"controls-root.js","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { ControlsContextProvider } from './context';\n\nexport interface ControlsRootProps {\n  children?: ReactNode | undefined;\n}\n\n/** Manages controls state and provides it to the compound parts. Does not render an element. */\nexport function ControlsRoot({ children }: ControlsRootProps): ReactNode {\n  const controls = usePlayer(selectControls);\n  const [core] = useState(() => new ControlsCore());\n\n  if (!controls) {\n    if (__DEV__) logMissingFeature('Controls.Root', 'controls');\n\n    return null;\n  }\n\n  core.setMedia(controls);\n  const state = core.getState();\n\n  return (\n    <ControlsContextProvider value={{ state, stateAttrMap: ControlsDataAttrs }}>{children}</ControlsContextProvider>\n  );\n}\n\nexport namespace ControlsRoot {\n  export type Props = ControlsRootProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,aAAa,EAAE,YAA0C;CACvE,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,CAAC,QAAQ,eAAe,IAAI,aAAa,CAAC;CAEhD,IAAI,CAAC,UAAU;EACA,kBAAkB,iBAAiB,UAAU;EAE1D,OAAO;CACT;CAEA,KAAK,SAAS,QAAQ;CACtB,MAAM,QAAQ,KAAK,SAAS;CAE5B,OACE,oBAAC,yBAAD;EAAyB,OAAO;GAAE;GAAO,cAAc;EAAkB;EAAI;CAAkC,CAAA;AAEnH"}

package/dist/dev/ui/controls/index.parts.d.ts

@@ -1,8 +1,10 @@
+import { ControlsBackdrop, ControlsBackdropProps } from "./controls-backdrop.js";
+import { ControlsContent, ControlsContentProps } from "./controls-content.js";
 import { ControlsGroup, ControlsGroupProps } from "./controls-group.js";
 import { ControlsRoot, ControlsRootProps } from "./controls-root.js";
 declare namespace index_parts_d_exports {
-  export { ControlsGroup as Group, ControlsGroupProps as GroupProps, ControlsRoot as Root, ControlsRootProps as RootProps };
+  export { ControlsBackdrop as Backdrop, ControlsBackdropProps as BackdropProps, ControlsContent as Content, ControlsContentProps as ContentProps, ControlsGroup as Group, ControlsGroupProps as GroupProps, ControlsRoot as Root, ControlsRootProps as RootProps };
 }
 //#endregion
-export { ControlsGroup as Group, type ControlsGroupProps as GroupProps, ControlsRoot as Root, type ControlsRootProps as RootProps, index_parts_d_exports };
+export { ControlsBackdrop as Backdrop, type ControlsBackdropProps as BackdropProps, ControlsContent as Content, type ControlsContentProps as ContentProps, ControlsGroup as Group, type ControlsGroupProps as GroupProps, ControlsRoot as Root, type ControlsRootProps as RootProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

package/dist/dev/ui/controls/index.parts.js

@@ -1,12 +1,16 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { ControlsBackdrop } from "./controls-backdrop.js";
+import { ControlsContent } from "./controls-content.js";
 import { ControlsGroup } from "./controls-group.js";
 import { ControlsRoot } from "./controls-root.js";
 //#region src/ui/controls/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Backdrop: () => ControlsBackdrop,
+	Content: () => ControlsContent,
 	Group: () => ControlsGroup,
 	Root: () => ControlsRoot
 });
 //#endregion
-export { ControlsGroup as Group, ControlsRoot as Root, index_parts_exports };
+export { ControlsBackdrop as Backdrop, ControlsContent as Content, ControlsGroup as Group, ControlsRoot as Root, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map