@videojs/react 10.0.0-beta.25 → 10.0.0-beta.27

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

@@ -9,24 +9,21 @@ Creates radio items from the player video rendition state and selects automatic
 tsx
 
 ```
-const quality = useQualityOptions();
-
-<Menu.RadioGroup value={quality.value} onValueChange={quality.setValue}>
-  <Menu.GroupLabel>Quality</Menu.GroupLabel>
-  {quality.options.map((option) => (
-    <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled}>
-      {option.label}
-      <Menu.ItemIndicator checked={option.value === quality.value} />
+<QualityRadioGroup
+  renderItem={(props, item) => (
+    <Menu.RadioItem {...props}>
+      {item.label}
+      <Menu.ItemIndicator checked={item.checked} />
     </Menu.RadioItem>
-  ))}
-</Menu.RadioGroup>
+  )}
+/>
 ```
 
 ## 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` 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
 
@@ -48,12 +45,333 @@ 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. It receives an accessible label from the `label` prop or defaults to `Quality`.
+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`.
+
+## Examples
+
+### Basic usage
+
+Quality
+
+App.tsx
+
+App.css
+
+```
+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 src = 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4.m3u8';
+
+function QualityMenu(): ReactNode {
+  return (
+    <Menu.Root side="top" align="end">
+      <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
+        Quality
+      </Menu.Trigger>
+      <Menu.Content className="menu">
+        <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.Root>
+  );
+}
+
+export default function BasicUsage() {
+  return (
+    <Player>
+      <Container className="media-container">
+        <HlsJsVideo src={src} autoPlay crossOrigin="anonymous" muted playsInline loop />
+        <div className="menu-bar">
+          <QualityMenu />
+        </div>
+      </Container>
+    </Player>
+  );
+}
+```
+```
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.menu-bar {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
+
+.settings-trigger {
+  padding: 6px 16px;
+  color: black;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  border-radius: 9999px;
+  backdrop-filter: blur(10px);
+}
+
+.menu {
+  --media-menu-side-offset: 8px;
+  box-sizing: border-box;
+  display: grid;
+  gap: 2px;
+  min-width: 180px;
+  max-width: var(--media-menu-available-width, var(--media-popover-available-width, none));
+  max-height: var(--media-menu-available-height, var(--media-popover-available-height, none));
+  padding: 6px;
+  margin: 0;
+  overflow: auto;
+  overscroll-behavior: none;
+  font-size: 14px;
+  color: white;
+  background: rgba(0, 0, 0, 0.88);
+  border: 0;
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+}
+
+.menu-group {
+  display: grid;
+  gap: 2px;
+}
+
+.menu-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 32px;
+  padding: 0 10px;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 6px;
+}
+
+.menu-item[data-highlighted] {
+  background: rgba(255, 255, 255, 0.16);
+}
+
+.menu-tier {
+  margin-left: 2px;
+  font-size: 10px;
+}
+
+.menu-badge {
+  margin-left: auto;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.menu-indicator {
+  opacity: 0;
+}
+
+[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

@@ -0,0 +1,64 @@
+# registerI18n
+
+Register or merge translation strings for a BCP 47 locale tag in the global i18n registry
+
+`registerI18n` merges a partial translation map into the process-wide registry for a locale tag. Components carry their own English fallback text. Built-in non-English packs lazy-load automatically; call `registerI18n` for custom locales, CDN locale modules, or patched shipped packs before the provider renders.
+
+Keys are nested semantic names such as `buttons.play` and `buttons.pause`. See [Translation keys](./translation-phrases.md) for the complete catalog.
+
+ts
+
+```
+import { registerI18n } from '@videojs/react/i18n';
+
+registerI18n('es', {
+  buttons: {
+    play: 'Reproducir',
+    pause: 'Pausar',
+  },
+});
+```
+
+## API Reference
+
+### Parameters
+
+Parameter
+
+Type
+
+Default
+
+Details
+
+`locale*`
+
+`string & object | 'ar' | 'az' | 'bs' ...`
+
+`—`
+
+▸
+
+Description
+
+BCP 47 tag (normalized to lowercase; unicode extensions stripped for the registry key).
+
+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' | '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*`
+
+`Partial<Translations>`
+
+`—`
+
+▸
+
+Description
+
+Partial nested locale values; merges with any existing layer for the tag.
+
+### Return Value
+
+`void`

package/docs/reference/seek-button.md

@@ -29,22 +29,16 @@ 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">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+    <Player>
+      <Container className="media-container">
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
         <div className="buttons">
           <SeekButton
             seconds={-5}
@@ -65,8 +59,8 @@ export default function BasicUsage() {
             )}
           />
         </div>
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -126,7 +120,7 @@ Whether the button is disabled.
 
 `label`
 
-`string | function`
+`Text | string | Text) | function`
 
 `''`
 
@@ -138,7 +132,7 @@ Custom label for the button.
 
 Type
 
-`string | ((state: SeekButtonState) => string)`
+`Text | string | ((state: SeekButtonState) => string | Text)`
 
 `seconds`
 
@@ -184,7 +178,7 @@ Whether the button seeks forward or backward.
 
 `label`
 
-`string`
+`Text | string`
 
 ### Data attributes
 

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"`).
 
@@ -301,7 +301,7 @@ Whether the slider is non-interactive.
 
 `label`
 
-`string | function`
+`Text | string | Text) | function`
 
 `''`
 
@@ -313,7 +313,7 @@ Custom label for the slider.
 
 Type
 
-`string | ((state: SliderState) => string)`
+`Text | string | ((state: SliderState) => string | Text)`
 
 `largeStep`
 

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>
   );
 }
 ```
@@ -305,7 +305,7 @@ The thumbnail image failed to load.
 
 Description
 
-No thumbnail is available and not loading — the component should be hidden.
+Whether the component is hidden because no thumbnail is available and it is not loading.
 
 ### Data attributes