@videojs/react 10.0.0-beta.26 → 10.0.0-beta.28

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

@@ -9,19 +9,21 @@ Creates radio items from the player video rendition state and selects automatic
 tsx
 
 ```
-<Menu.RadioGroup>
-  <Menu.GroupLabel />
-  <Menu.RadioItem>
-    <Menu.ItemIndicator />
-  </Menu.RadioItem>
-</Menu.RadioGroup>
+<QualityRadioGroup
+  renderItem={(props, item) => (
+    <Menu.RadioItem {...props}>
+      {item.label}
+      <Menu.ItemIndicator checked={item.checked} />
+    </Menu.RadioItem>
+  )}
+/>
 ```
 
 ## 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.
 
-[`useQualityOptions`](./use-quality-options.md) returns `null` when the [quality feature](./feature-quality.md) is not configured. Use the returned options with [`Menu.RadioGroup`](./menu.md).
+`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.
 
 ## Styling
 
@@ -43,64 +45,67 @@ Present / absent
 
 Present when quality selection is disabled.
 
+`data-hidden`
+
+Present / absent
+
+Present when multiple renditions are unavailable.
+
 `data-availability`
 
 `"available"` / `"unavailable"`
 
 Whether multiple renditions are available.
 
+Unavailable groups receive the native `hidden` attribute.
+
 ## Accessibility
 
 The group uses the menu radio group pattern.
 
-Give `Menu.RadioGroup` an accessible name with `aria-label` or a nested `Menu.GroupLabel`.
+The component receives an accessible label from the `label` prop or defaults to `Quality`. Override it with `aria-label` or `aria-labelledby`.
 
 ## Examples
 
 ### Basic usage
 
+Quality
+
 App.tsx
 
 App.css
 
 ```
-import { createPlayer, Menu, useQualityOptions } from '@videojs/react';
+import { Container, createPlayer, Menu, QualityRadioGroup } from '@videojs/react';
 import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
 import { videoFeatures } from '@videojs/react/video';
 import type { ReactNode } from 'react';
 
-const Player = createPlayer({ features: videoFeatures });
+const { Player } = createPlayer({ features: videoFeatures });
 const src = 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4.m3u8';
 
 function QualityMenu(): ReactNode {
-  const quality = useQualityOptions();
-  if (quality?.state.availability !== 'available') return null;
-
   return (
     <Menu.Root side="top" align="end">
       <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
         Quality
       </Menu.Trigger>
       <Menu.Content className="menu">
-        <Menu.RadioGroup
+        <QualityRadioGroup
           className="menu-group"
-          value={quality.value}
-          onValueChange={quality.setValue}
-          aria-label="Quality"
-        >
-          {quality.options.map((option) => (
-            <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled} className="menu-item">
+          renderItem={(props, item) => (
+            <Menu.RadioItem {...props} className="menu-item">
               <span>
-                {option.label}
-                {option.tier ? <sup className="menu-tier">{option.tier}</sup> : null}
+                {item.label}
+                {item.tier ? <sup className="menu-tier">{item.tier}</sup> : null}
               </span>
-              {option.badge ? <span className="menu-badge">{option.badge}</span> : null}
-              <Menu.ItemIndicator checked={option.value === quality.value} forceMount className="menu-indicator">
+              {item.badge ? <span className="menu-badge">{item.badge}</span> : null}
+              <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
                 ✓
               </Menu.ItemIndicator>
             </Menu.RadioItem>
-          ))}
-        </Menu.RadioGroup>
+          )}
+        />
       </Menu.Content>
     </Menu.Root>
   );
@@ -108,14 +113,14 @@ function QualityMenu(): ReactNode {
 
 export default function BasicUsage() {
   return (
-    <Player.Provider>
-      <Player.Container className="media-container">
+    <Player>
+      <Container className="media-container">
         <HlsJsVideo src={src} autoPlay crossOrigin="anonymous" muted playsInline loop />
         <div className="menu-bar">
           <QualityMenu />
         </div>
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -205,4 +210,168 @@ export default function BasicUsage() {
 [role="menuitemradio"][aria-checked="true"] .menu-indicator {
   opacity: 1;
 }
-```
+```
+
+## API Reference
+
+### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`disabled`
+
+`boolean`
+
+`false`
+
+▸
+
+Description
+
+Whether quality selection is disabled.
+
+`formatRendition`
+
+`Text) | function`
+
+`formatRenditionLabel`
+
+▸
+
+Description
+
+Custom formatter for visible rendition labels.
+
+Type
+
+`((rendition: MediaVideoRendition) => string | Text)`
+
+`label`
+
+`Text | string | Text) | function`
+
+`''`
+
+▸
+
+Description
+
+Custom label for the options group.
+
+Type
+
+`Text | string | ((state: QualityRadioGroupState) => string | Text)`
+
+### State
+
+State is accessible via the `render`, `className`, and `style` props.
+
+Property
+
+Type
+
+Details
+
+`value`
+
+`string`
+
+▸
+
+Description
+
+Current radio-group value.
+
+`options`
+
+`QualityRadioGroupOption[]`
+
+▸
+
+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.
+
+`label`
+
+`Text | string`
+
+### 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`).

package/docs/reference/register-i18n.md

@@ -45,7 +45,7 @@ BCP 47 tag (normalized to lowercase; unicode extensions stripped for the registr
 
 Type
 
-`string & object | 'ar' | 'az' | 'bs' | 'bg' | 'bn' | 'ca' | 'cs' | 'cy' | 'da' | 'de' | 'el' | 'es' | 'et' | 'eu' | 'fa' | 'fi' | 'fr' | 'gd' | 'gl' | 'he' | 'hi' | 'hr' | 'hu' | 'it' | 'ja' | 'ko' | 'lv' | 'mr' | 'nb' | 'nl' | 'nn' | 'ne' | 'oc' | 'pl' | 'pt-BR' | 'pt-PT' | 'ro' | 'ru' | 'sk' | 'sl' | 'sr' | 'sv' | 'te' | 'th' | 'tr' | 'uk' | 'vi' | 'zh-CN' | 'zh-TW'`
+`string & object | 'ar' | 'az' | 'bs' | 'bg' | 'bn' | 'ca' | 'cs' | 'cy' | 'da' | 'de' | 'el' | 'es' | 'et' | 'eu' | 'fa' | 'fi' | 'fr' | 'gd' | 'gl' | 'he' | 'hi' | 'hr' | 'hu' | 'id' | 'it' | 'ja' | 'ko' | 'lt' | 'lv' | 'mr' | 'nb' | 'nl' | 'nn' | 'ne' | 'oc' | 'pl' | 'pt-BR' | 'pt-PT' | 'ro' | 'ru' | 'sk' | 'sl' | 'sr' | 'sv' | 'te' | 'th' | 'tr' | 'uk' | 'vi' | 'zh-CN' | 'zh-TW'`
 
 `translations*`
 

package/docs/reference/seek-button.md

@@ -29,15 +29,15 @@ App.tsx
 App.css
 
 ```
-import { createPlayer, SeekButton } from '@videojs/react';
+import { Container, createPlayer, SeekButton } from '@videojs/react';
 import { Video, videoFeatures } from '@videojs/react/video';
 
-const Player = createPlayer({ features: videoFeatures });
+const { Player } = createPlayer({ features: videoFeatures });
 
 export default function BasicUsage() {
   return (
-    <Player.Provider>
-      <Player.Container className="media-container">
+    <Player>
+      <Container className="media-container">
         <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
         <div className="buttons">
           <SeekButton
@@ -59,8 +59,8 @@ export default function BasicUsage() {
             )}
           />
         </div>
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```

package/docs/reference/slider.md

@@ -20,7 +20,7 @@ tsx
 
 ## Behavior
 
-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.
+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.
 
 The slider supports vertical orientation via the `orientation` prop (defaults to `"horizontal"`).
 

package/docs/reference/thumbnail.md

@@ -42,7 +42,7 @@ Supported source formats:
 *   JSON array: `{ url, startTime, endTime? }[]`
 *   JSON sprite array: `{ url, startTime, endTime?, width, height, coords }[]`
 
-In React, text-track mode needs `Player.Provider` because it reads track state from the player store. JSON modes (`thumbnails` prop) work without `Provider`.
+In React, text-track mode needs `Player` because it reads track state from the player store. JSON modes (`thumbnails` prop) work without a player.
 
 The component picks the latest thumbnail whose `startTime` is less than or equal to the current `time`, then scales/clips sprite tiles to fit CSS min/max constraints while preserving aspect ratio.
 
@@ -81,15 +81,15 @@ App.tsx
 App.css
 
 ```
-import { createPlayer, Thumbnail } from '@videojs/react';
+import { Container, createPlayer, Thumbnail } from '@videojs/react';
 import { Video, videoFeatures } from '@videojs/react/video';
 
-const Player = createPlayer({ features: videoFeatures });
+const { Player } = createPlayer({ features: videoFeatures });
 
 export default function TextTrackUsage() {
   return (
-    <Player.Provider>
-      <Player.Container className="demo">
+    <Player>
+      <Container className="demo">
         <Video
           className="media"
           src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
@@ -101,8 +101,8 @@ export default function TextTrackUsage() {
           <track kind="metadata" label="thumbnails" src="/docs/demos/thumbnail/basic.vtt" default />
         </Video>
         <Thumbnail className="media-thumbnail" time={12} />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```