@videojs/react 10.0.0-rc.1 → 10.0.0-rc.2

package/docs/reference/quality-radio-group.md

@@ -9,7 +9,7 @@ Creates radio items from the player video rendition state and selects automatic
 tsx
 
 ```
-import { QualityRadioGroup } from '@videojs/react';
+import { QualityRadioGroup } from '@videojs/react/ui/quality-radio-group';
 ```
 
 ## Anatomy
@@ -17,21 +17,30 @@ import { QualityRadioGroup } from '@videojs/react';
 tsx
 
 ```
-<QualityRadioGroup
-  renderItem={(props, item) => (
-    <Menu.RadioItem {...props}>
-      {item.label}
-      <Menu.ItemIndicator checked={item.checked} />
-    </Menu.RadioItem>
-  )}
-/>
+<QualityRadioGroup.Root>
+  <Menu.Trigger>
+    <QualityRadioGroup.Value />
+  </Menu.Trigger>
+  <Menu.Content>
+    <QualityRadioGroup.Options
+      renderItem={(props, item) => (
+        <Menu.RadioItem {...props}>
+          {item.label}
+          <Menu.ItemIndicator checked={item.checked} />
+        </Menu.RadioItem>
+      )}
+    />
+  </Menu.Content>
+</QualityRadioGroup.Root>
 ```
 
 ## Behavior
 
 The group is available when the configured media exposes more than one video rendition. The first generated option is `Auto`; selecting it returns control to adaptive bitrate selection. Pass `formatRendition` to customize visible rendition labels.
 
-`QualityRadioGroup` uses [`useQualityOptions`](./use-quality-options.md) to own selection and generate each item. Its required `renderItem` callback renders the [`Menu.RadioItem`](./menu.md) root and receives item state containing the translated `label`, optional `tier` and `badge`, and current `checked` value. It returns `null` when the [quality feature](./feature-quality.md) is not configured.
+`QualityRadioGroup.Root` uses [`useQualityOptions`](./use-quality-options.md) to own selection and renders no element. Wrap the menu’s `Menu.Trigger` and `Menu.Content` in it so the trigger inherits the group’s disabled and hidden state and exposes `data-availability`. `QualityRadioGroup.Options` renders the items: its required `renderItem` callback renders the [`Menu.RadioItem`](./menu.md) root and receives item state containing the translated `label`, optional `tier` and `badge`, and current `checked` value. `QualityRadioGroup.Value` displays the selected label, typically inside the trigger. `Options` and `Value` render `null` when the [quality feature](./feature-quality.md) is not configured.
+
+The `QualityRadioGroup` export from the `@videojs/react` root is a compatibility component that composes `Root` and `Options` behind the former single-component props. Prefer the parts for new code.
 
 ## Styling
 
@@ -71,21 +80,22 @@ Unavailable groups receive the native `hidden` attribute.
 
 The group uses the menu radio group pattern.
 
-The component receives an accessible label from the `label` prop or defaults to `Quality`. Override it with `aria-label` or `aria-labelledby`.
+`QualityRadioGroup.Options` receives its accessible label from the `label` prop on `QualityRadioGroup.Root` or defaults to `Quality`. Override it with `aria-label` or `aria-labelledby` on `QualityRadioGroup.Options`.
 
 ## Examples
 
 ### Basic usage
 
-Quality
+QualityAuto
 
 App.tsx
 
 App.css
 
 ```
-import { Container, createPlayer, Menu, QualityRadioGroup } from '@videojs/react';
+import { Container, createPlayer, Menu } from '@videojs/react';
 import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
+import { QualityRadioGroup } from '@videojs/react/ui/quality-radio-group';
 import { videoFeatures } from '@videojs/react/video';
 import type { ReactNode } from 'react';
 
@@ -95,28 +105,31 @@ const src = 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4.
 function QualityMenu(): ReactNode {
   return (
     <Menu.Root side="top" align="end">
-      <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
-        Quality
-      </Menu.Trigger>
-      <Menu.Popup className="menu">
-        <Menu.Content>
-          <QualityRadioGroup
-            className="menu-group"
-            renderItem={(props, item) => (
-              <Menu.RadioItem {...props} className="menu-item">
-                <span>
-                  {item.label}
-                  {item.tier ? <sup className="menu-tier">{item.tier}</sup> : null}
-                </span>
-                {item.badge ? <span className="menu-badge">{item.badge}</span> : null}
-                <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
-                  ✓
-                </Menu.ItemIndicator>
-              </Menu.RadioItem>
-            )}
-          />
-        </Menu.Content>
-      </Menu.Popup>
+      <QualityRadioGroup.Root>
+        <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
+          Quality
+          <QualityRadioGroup.Value className="menu-hint" />
+        </Menu.Trigger>
+        <Menu.Popup className="menu">
+          <Menu.Content>
+            <QualityRadioGroup.Options
+              className="menu-group"
+              renderItem={(props, item) => (
+                <Menu.RadioItem {...props} className="menu-item">
+                  <span>
+                    {item.label}
+                    {item.tier ? <sup className="menu-tier">{item.tier}</sup> : null}
+                  </span>
+                  {item.badge ? <span className="menu-badge">{item.badge}</span> : null}
+                  <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
+                    ✓
+                  </Menu.ItemIndicator>
+                </Menu.RadioItem>
+              )}
+            />
+          </Menu.Content>
+        </Menu.Popup>
+      </QualityRadioGroup.Root>
     </Menu.Root>
   );
 }
@@ -159,6 +172,15 @@ export default function BasicUsage() {
   backdrop-filter: blur(10px);
 }
 
+.menu-hint {
+  margin-left: 8px;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.menu-hint:empty {
+  display: none;
+}
+
 .menu {
   --media-menu-side-offset: 8px;
   box-sizing: border-box;
@@ -226,6 +248,238 @@ export default function BasicUsage() {
 
 ### 
 
+Root
+
+Owns quality option state and shares it with an enclosing menu. Does not render a DOM element.
+
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`disabled`
+
+`boolean`
+
+`false`
+
+▸
+
+Description
+
+Whether quality selection is disabled.
+
+`formatRendition`
+
+`string) | function`
+
+`formatRenditionLabel`
+
+▸
+
+Description
+
+Custom formatter for visible rendition labels.
+
+Type
+
+`((rendition: MediaVideoRendition) => Text | string)`
+
+`label`
+
+`object`
+
+`''`
+
+▸
+
+Description
+
+Custom label for the options group.
+
+Type
+
+`{ key: string; text: string } | string | ((state: QualityRadioGroupState) => Text | string)`
+
+#### State
+
+State is accessible via the `render`, `className`, and `style` props.
+
+Property
+
+Type
+
+Details
+
+`label`
+
+`{ key: string; text: string } | string`
+
+`value`
+
+`string`
+
+▸
+
+Description
+
+Current radio-group value.
+
+`options`
+
+`readonly Option[]`
+
+▸
+
+Description
+
+Ordered options displayed by platform adapters.
+
+`disabled`
+
+`boolean`
+
+▸
+
+Description
+
+Whether the entire option group is disabled.
+
+`hidden`
+
+`boolean`
+
+▸
+
+Description
+
+Whether the option group is hidden because no meaningful selection is available.
+
+`availability`
+
+`'available' | 'unavailable'`
+
+▸
+
+Description
+
+Whether the media exposes a meaningful selection.
+
+#### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-quality`
+
+`string`
+
+▸
+
+Description
+
+Current quality value.
+
+`data-disabled`
+
+▸
+
+Description
+
+Present when quality selection is disabled.
+
+`data-hidden`
+
+▸
+
+Description
+
+Present when quality selection is unavailable.
+
+`data-availability`
+
+`'available' | 'unavailable'`
+
+▸
+
+Description
+
+Indicates quality availability (`available` or `unavailable`).
+
+### 
+
+Options
+
+Renders menu radio items for the player's video renditions.
+
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`className`
+
+`string | ((state: QualityRadioGroupCore.State) => string | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Class name or function returning class name from state.
+
+`render`
+
+`ReactElement | ((props: HTMLProps, state: QualityRadioGroupCore.State) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`renderItem`
+
+`((props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement)`
+
+`—`
+
+▸
+
+Description
+
+Render one consumer-owned menu radio item for every quality option.
+
+`style`
+
+`CSSProperties | ((state: QualityRadioGroupCore.State) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.
+
+### 
+
 Value
 
 Displays the selected quality label.

package/docs/reference/slider.md

@@ -21,6 +21,9 @@ tsx
   </Slider.Track>
   <Slider.Thumb />
   <Slider.Preview>
+    <Slider.Thumbnail.Root>
+      <Slider.Thumbnail.Image />
+    </Slider.Thumbnail.Root>
     <Slider.Value type="pointer" />
   </Slider.Preview>
 </Slider.Root>
@@ -30,6 +33,8 @@ tsx
 
 The base Slider provides a generic range input. It manages value, pointer tracking, and drag interactions. Domain-specific sliders like [TimeSlider](./time-slider.md) and [VolumeSlider](./volume-slider.md) extend this with media-specific bindings. TimeSlider also provides parts for rendering chapter ranges and the chapter at the current interaction position.
 
+`Slider.Thumbnail.Root` supplies the pointer value to the thumbnail. Render `Slider.Thumbnail.Image` inside it for the controlled image; other children can provide loading indicators or overlays.
+
 The slider supports vertical orientation via the `orientation` prop (defaults to `"horizontal"`).
 
 ## Styling
@@ -897,7 +902,9 @@ Present when the slider is non-interactive.
 
 ### 
 
-Thumbnail
+Track
+
+Contains the slider's visual track and interactive hit zone.
 
 #### Props
 
@@ -911,7 +918,7 @@ Details
 
 `className`
 
-`string | ((state: ThumbnailCore.State) => string | undefined)`
+`string | ((state: SliderState) => string | undefined)`
 
 `—`
 
@@ -923,7 +930,7 @@ Class name or function returning class name from state.
 
 `render`
 
-`ReactElement | ((props: HTMLProps, state: ThumbnailCore.State) => ReactElement | null)`
+`ReactElement | ((props: HTMLProps, state: SliderState) => ReactElement | null)`
 
 `—`
 
@@ -935,7 +942,7 @@ Render prop for custom element.
 
 `style`
 
-`CSSProperties | ((state: ThumbnailCore.State) => CSSProperties | undefined)`
+`CSSProperties | ((state: SliderState) => CSSProperties | undefined)`
 
 `—`
 
@@ -945,23 +952,11 @@ Description
 
 Style or function returning style from state.
 
-`thumbnails`
-
-`ThumbnailImage[]`
-
-`—`
-
-▸
-
-Description
-
-Pre-parsed thumbnail images — bypasses the automatic `<track>` detection.
-
 ### 
 
-Track
+Value
 
-Contains the slider's visual track and interactive hit zone.
+Displays a formatted text representation of the slider value. Renders an `<output>` element.
 
 #### Props
 
@@ -985,6 +980,18 @@ Description
 
 Class name or function returning class name from state.
 
+`format`
+
+`((value: number) => string)`
+
+`—`
+
+▸
+
+Description
+
+Custom formatter for the displayed value. Overrides the root's `formatValue`.
+
 `render`
 
 `ReactElement | ((props: HTMLProps, state: SliderState) => ReactElement | null)`
@@ -1009,11 +1016,75 @@ Description
 
 Style or function returning style from state.
 
+`type`
+
+`'current' | 'pointer'`
+
+`—`
+
+▸
+
+Description
+
+Which slider value to display: the current position or the pointer position.
+
+#### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-dragging`
+
+▸
+
+Description
+
+Present when the user is actively dragging.
+
+`data-pointing`
+
+▸
+
+Description
+
+Present when the pointer is over the slider.
+
+`data-interactive`
+
+▸
+
+Description
+
+Present when dragging, pointing, or focus is active.
+
+`data-orientation`
+
+`'horizontal' | 'vertical'`
+
+▸
+
+Description
+
+Current axis of slider movement (`horizontal` or `vertical`).
+
+`data-disabled`
+
+▸
+
+Description
+
+Present when the slider is non-interactive.
+
 ### 
 
-Value
+Thumbnail.Root
 
-Displays a formatted text representation of the slider value. Renders an `<output>` element.
+Resolves, sizes, and clips the thumbnail at the slider pointer.
+
+Render `Slider.Thumbnail.Image` inside it for the controlled image. Other children can provide loading indicators, overlays, or temporary presentation layers.
 
 #### Props
 
@@ -1027,7 +1098,7 @@ Details
 
 `className`
 
-`string | ((state: SliderState) => string | undefined)`
+`string | ((state: ThumbnailCore.State) => string | undefined)`
 
 `—`
 
@@ -1037,9 +1108,9 @@ Description
 
 Class name or function returning class name from state.
 
-`format`
+`render`
 
-`((value: number) => string)`
+`ReactElement | ((props: HTMLProps, state: ThumbnailCore.State) => ReactElement | null)`
 
 `—`
 
@@ -1047,11 +1118,11 @@ Class name or function returning class name from state.
 
 Description
 
-Custom formatter for the displayed value. Overrides the root's `formatValue`.
+Render prop for custom element.
 
-`render`
+`style`
 
-`ReactElement | ((props: HTMLProps, state: SliderState) => ReactElement | null)`
+`CSSProperties | ((state: ThumbnailCore.State) => CSSProperties | undefined)`
 
 `—`
 
@@ -1059,23 +1130,29 @@ Custom formatter for the displayed value. Overrides the root's `formatValue`.
 
 Description
 
-Render prop for custom element.
+Style or function returning style from state.
 
-`style`
+### 
 
-`CSSProperties | ((state: SliderState) => CSSProperties | undefined)`
+Thumbnail.Image
 
-`—`
+Displays the image selected and measured by `Thumbnail.Root`.
 
-▸
+Renders an `img`, so native image attributes and the `render` escape hatch remain available without replacing the root that owns thumbnail state.
 
-Description
+#### Props
 
-Style or function returning style from state.
+Prop
 
-`type`
+Type
 
-`'current' | 'pointer'`
+Default
+
+Details
+
+`className`
+
+`string | ((state: ThumbnailCore.State) => string | undefined)`
 
 `—`
 
@@ -1083,54 +1160,64 @@ Style or function returning style from state.
 
 Description
 
-Which slider value to display: the current position or the pointer position.
-
-#### Data attributes
-
-Attribute
+Class name or function returning class name from state.
 
-Type
+`crossOrigin`
 
-Details
+`ThumbnailCore.ImageProps['crossOrigin']`
 
-`data-dragging`
+`—`
 
 ▸
 
 Description
 
-Present when the user is actively dragging.
+CORS setting for the selected image. Leave unset to follow the media element, or pass `null` to opt out.
 
-`data-pointing`
+`fetchPriority`
+
+`ThumbnailCore.ImageProps['fetchPriority']`
+
+`—`
 
 ▸
 
 Description
 
-Present when the pointer is over the slider.
+Image fetch priority hint.
 
-`data-interactive`
+`loading`
+
+`ThumbnailCore.ImageProps['loading']`
+
+`—`
 
 ▸
 
 Description
 
-Present when dragging, pointing, or focus is active.
+Image loading strategy.
 
-`data-orientation`
+`render`
 
-`'horizontal' | 'vertical'`
+`ReactElement | ((props: HTMLProps, state: ThumbnailCore.State) => ReactElement | null)`
+
+`—`
 
 ▸
 
 Description
 
-Current axis of slider movement (`horizontal` or `vertical`).
+Render prop for custom element.
 
-`data-disabled`
+`style`
+
+`CSSProperties | ((state: ThumbnailCore.State) => CSSProperties | undefined)`
+
+`—`
 
 ▸
 
 Description
 
-Present when the slider is non-interactive.
+Style or function returning style from state.