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

package/docs/reference/playback-rate-radio-group.md

@@ -9,19 +9,21 @@ Creates radio items from the player playback rate state and selects the playback
 tsx
 
 ```
-<Menu.RadioGroup>
-  <Menu.GroupLabel />
-  <Menu.RadioItem>
-    <Menu.ItemIndicator />
-  </Menu.RadioItem>
-</Menu.RadioGroup>
+<PlaybackRateRadioGroup
+  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 playback rates. Option labels default to the rate followed by a multiplication sign (e.g. `1.5×`); pass `formatRate` to customize them.
 
-[`usePlaybackRateOptions`](./use-playback-rate-options.md) returns `null` when the [playback rate feature](./feature-playback-rate.md) is not configured. Use the returned options with [`Menu.RadioGroup`](./menu.md).
+`PlaybackRateRadioGroup` uses [`usePlaybackRateOptions`](./use-playback-rate-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` and current `checked` value. It returns `null` when the [playback rate feature](./feature-playback-rate.md) is not configured.
 
 ## Styling
 
@@ -43,17 +45,25 @@ Present / absent
 
 Present when playback rate selection is disabled.
 
+`data-hidden`
+
+Present / absent
+
+Present when playback-rate selection is unavailable.
+
 `data-availability`
 
 `"available"` / `"unavailable"`
 
 Whether playback rates 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 `Playback rate`. Override it with `aria-label` or `aria-labelledby`.
 
 ## Examples
 
@@ -66,37 +76,30 @@ App.tsx
 App.css
 
 ```
-import { createPlayer, Menu, usePlaybackRateOptions } from '@videojs/react';
+import { Container, createPlayer, Menu, PlaybackRateRadioGroup } from '@videojs/react';
 import { Video, videoFeatures } from '@videojs/react/video';
 import type { ReactNode } from 'react';
 
-const Player = createPlayer({ features: videoFeatures });
+const { Player } = createPlayer({ features: videoFeatures });
 
 function SpeedMenu(): ReactNode {
-  const playbackRate = usePlaybackRateOptions();
-  if (playbackRate?.state.availability !== 'available') return null;
-
   return (
     <Menu.Root side="top" align="end">
       <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
         Speed
       </Menu.Trigger>
       <Menu.Content className="menu">
-        <Menu.RadioGroup
+        <PlaybackRateRadioGroup
           className="menu-group"
-          value={playbackRate.value}
-          onValueChange={playbackRate.setValue}
-          aria-label="Speed"
-        >
-          {playbackRate.options.map((option) => (
-            <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled} className="menu-item">
-              {option.label}
-              <Menu.ItemIndicator checked={option.value === playbackRate.value} forceMount className="menu-indicator">
+          renderItem={(props, item) => (
+            <Menu.RadioItem {...props} className="menu-item">
+              {item.label}
+              <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
                 ✓
               </Menu.ItemIndicator>
             </Menu.RadioItem>
-          ))}
-        </Menu.RadioGroup>
+          )}
+        />
       </Menu.Content>
     </Menu.Root>
   );
@@ -104,14 +107,14 @@ function SpeedMenu(): ReactNode {
 
 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="menu-bar">
           <SpeedMenu />
         </div>
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -191,4 +194,172 @@ 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 playback rate selection is disabled.
+
+`formatRate`
+
+`function`
+
+`formatPlaybackRate`
+
+▸
+
+Description
+
+Custom formatter for visible playback rate labels.
+
+Type
+
+`((rate: number) => string)`
+
+`label`
+
+`Text | string | Text) | function`
+
+`''`
+
+▸
+
+Description
+
+Custom label for the options group.
+
+Type
+
+`Text | string | ((state: PlaybackRateRadioGroupState) => string | Text)`
+
+### State
+
+State is accessible via the `render`, `className`, and `style` props.
+
+Property
+
+Type
+
+Details
+
+`rate`
+
+`number`
+
+`value`
+
+`string`
+
+▸
+
+Description
+
+Current radio-group value.
+
+`options`
+
+`PlaybackRateRadioGroupOption[]`
+
+▸
+
+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-rate`
+
+`number`
+
+▸
+
+Description
+
+Current playback rate.
+
+`data-disabled`
+
+▸
+
+Description
+
+Present when playback rate selection is disabled.
+
+`data-hidden`
+
+▸
+
+Description
+
+Present when playback rate selection is unavailable.
+
+`data-availability`
+
+`'available' | 'unavailable'`
+
+▸
+
+Description
+
+Indicates playback rate availability (`available` or `unavailable`).

package/docs/reference/player-container.md

@@ -1,33 +1,33 @@
-# Player.Container
+# Container
 
 The player's interaction surface — handles layout, fullscreen, media attachment, and user activity detection.
 
-The `Player.Container` is the player’s physical surface. It defines the visual boundary, attaches the media element, and detects user interaction like activity and (eventually) gestures and keyboard input. It lives inside a [`Player.Provider`](./player-provider.md).
+The `Container` is the player’s physical surface. It defines the visual boundary, attaches the media element, and detects user interaction like activity and (eventually) gestures and keyboard input. It lives inside a [`Player`](./player-provider.md).
 
 tsx
 
 ```
-<Player.Provider>
-  <Player.Container>
+<Player>
+  <Container>
     <video src="video.mp4" />
     <Controls.Root>
       {/* ... */}
     </Controls.Root>
-  </Player.Container>
-</Player.Provider>
+  </Container>
+</Player>
 ```
 
 ## How it’s created
 
-The `Player.Container` comes from the same `createPlayer()` call that creates the `Player.Provider`. They’re a matched pair wired to the same feature set.
+Import `Container` from the main React package. It connects to whichever `Player` contains it, so it does not need to be created for a specific feature set.
 
 tsx
 
 ```
-import { createPlayer } from '@videojs/react';
+import { Container, createPlayer } from '@videojs/react';
 import { videoFeatures } from '@videojs/react/video';
 
-const Player = createPlayer({ features: videoFeatures });
+const { Player } = createPlayer({ features: videoFeatures });
 ```
 
 [`createPlayer` reference](./create-player.md)
@@ -36,24 +36,24 @@ const Player = createPlayer({ features: videoFeatures });
 
 ### Layout & fullscreen
 
-The container is the visual box around your media and controls. Sizing, aspect ratio, and visual boundaries all go here — on the container, not the provider.
+The container is the visual box around your media and controls. Sizing, aspect ratio, and visual boundaries all go here — on `Container`, not `Player`.
 
 tsx
 
 ```
-<Player.Container style={{ width: 640, aspectRatio: '16/9' }}>
+<Container style={{ width: 640, aspectRatio: '16/9' }}>
   <video src="video.mp4" />
   <Controls.Root>
     {/* ... */}
   </Controls.Root>
-</Player.Container>
+</Container>
 ```
 
 When the user goes fullscreen, the **container** goes fullscreen — not the video element. This keeps controls and other UI visible on top of the video, since they’re children of the container.
 
 ### Media attachment
 
-Media discovery is handled by the provider, not the container. When a media component like `<Video>` registers itself via context, the provider wires it to the store and all of the player’s features.
+Media discovery is handled by `Player`, not `Container`. When a media component like `<Video>` registers itself via context, `Player` wires it to the store and all of the player’s features.
 
 ### Interaction surface
 
@@ -71,39 +71,39 @@ tsx
 
 ```
 {/* Packaged skin — container is inside VideoSkin */}
-<Player.Provider>
+<Player>
   <VideoSkin>
     <Video src="video.mp4" />
   </VideoSkin>
-</Player.Provider>
+</Player>
 
-{/* Custom UI — you use Player.Container directly */}
-<Player.Provider>
-  <Player.Container>
+{/* Custom UI — you use Container directly */}
+<Player>
+  <Container>
     <video src="video.mp4" />
     <PlayButton />
-  </Player.Container>
-</Player.Provider>
+  </Container>
+</Player>
 ```
 
 ## Inside vs. outside the container
 
-The [provider](./player-provider.md) gives components access to state and actions. The container layers on physical behaviors — fullscreen, activity detection, gesture handling. Components work in both places; the container just adds those extras.
+[`Player`](./player-provider.md) gives components access to state and actions. `Container` layers on physical behaviors — fullscreen, activity detection, and gesture handling. Components work in both places; the container just adds those extras.
 
 tsx
 
 ```
-<Player.Provider>
-  <Player.Container>
+<Player>
+  <Container>
     <video src="video.mp4" />
     <Controls.Root>          {/* fullscreen, activity detection, gestures */}
       {/* ... */}
     </Controls.Root>
-  </Player.Container>
+  </Container>
 
   <Transcript />          {/* state & actions, but no container behaviors */}
   <PlaylistSidebar />     {/* state & actions, but no container behaviors */}
-</Player.Provider>
+</Player>
 ```
 
 A play button outside the container still reads playback state and can toggle play/pause — it just won’t go fullscreen with the player or respond to the container’s idle state.

package/docs/reference/player-provider.md

@@ -1,40 +1,40 @@
-# Player.Provider
+# Player
 
 The state boundary — creates a store and broadcasts it to all descendants.
 
-The `Player.Provider` is the state boundary of your player. It creates a store and makes it available to every component inside it via context. Every player needs exactly one.
+The `Player` is the state boundary of your player. It creates a store and makes it available to every component inside it via context. Every player needs exactly one.
 
 App.tsx
 
 ```
 import { videoFeatures } from '@videojs/react/video';
-import { createPlayer } from '@videojs/react';
+import { Container, createPlayer } from '@videojs/react';
 
-const Player = createPlayer({ features: videoFeatures });
+const { Player } = createPlayer({ features: videoFeatures });
 
 function App() {
   return (
-    <Player.Provider>
+    <Player>
       {/* Everything inside can access the player store */}
-      <Player.Container>
+      <Container>
         <video src="video.mp4" />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
 
 ## How it’s created
 
-Call `createPlayer()` with a `features` array. The returned object contains `Provider`, `Container`, `usePlayer`, and `useMedia` — everything you need for one player instance.
+Call `createPlayer()` with a `features` array. It returns `Player`, `usePlayer`, and `useMedia`. Import the shared `Container` separately when building a custom layout.
 
 tsx
 
 ```
-import { createPlayer } from '@videojs/react';
+import { Container, createPlayer } from '@videojs/react';
 import { videoFeatures } from '@videojs/react/video';
 
-const Player = createPlayer({
+const { Player, usePlayer, useMedia } = createPlayer({
   features: videoFeatures,
 });
 ```
@@ -45,33 +45,33 @@ The [features](../concepts/features.md) you pass determine what state is availab
 
 ## What lives inside it
 
-Everything that needs player state goes inside the provider: skins, containers, UI components, and your own custom components. Anything inside can access the store.
+Everything that needs player state goes inside `Player`: skins, containers, UI components, and your own custom components. Anything inside can access the store.
 
 tsx
 
 ```
-<Player.Provider>
+<Player>
   <VideoSkin>           {/* skin — includes container + controls */}
     <Video src="..." /> {/* media element */}
   </VideoSkin>
-  <MyCustomOverlay />   {/* your own component — can use Player.usePlayer() */}
-</Player.Provider>
+  <MyCustomOverlay />   {/* your own component — can use usePlayer() */}
+</Player>
 ```
 
 ## No visual presence
 
-The `Provider` renders no visible element of its own — it’s purely a state wrapper. Sizing, borders, and background go on the [`Container`](./player-container.md), not the Provider.
+`Player` renders no visible element of its own — it’s purely a state wrapper. Sizing, borders, and background go on the [`Container`](./player-container.md), not `Player`.
 
 ## Accessing state
 
-Use `Player.usePlayer` to read state or call actions from any component inside the Provider:
+Use `usePlayer` to read state or call actions from any component inside `Player`:
 
 PlayPauseButton.tsx
 
 ```
 function PlayPauseButton() {
-  const paused = Player.usePlayer(selectPlayback).paused;
-  const store = Player.usePlayer();
+  const paused = usePlayer(selectPlayback).paused;
+  const store = usePlayer();
 
   return (
     <button onClick={() => store.dispatch('toggle-playback')}>
@@ -85,20 +85,20 @@ function PlayPauseButton() {
 
 ## Extended player layouts
 
-The provider’s scope can extend beyond the fullscreen target. Playlists, transcripts, sidebars, and other supplementary UI can live inside the provider but outside the container. They still have full access to the store, they just won’t go fullscreen with the video.
+The player’s scope can extend beyond the fullscreen target. Playlists, transcripts, sidebars, and other supplementary UI can live inside `Player` but outside `Container`. They still have full access to the store, but they won’t go fullscreen with the video.
 
 tsx
 
 ```
-<Player.Provider>
-  <Player.Container>
+<Player>
+  <Container>
     <video src="video.mp4" />
     <Controls.Root>          {/* goes fullscreen with the video */}
       {/* ... */}
     </Controls.Root>
-  </Player.Container>
+  </Container>
 
   <Transcript />          {/* outside container — still has store access */}
   <PlaylistSidebar />     {/* outside container — still has store access */}
-</Player.Provider>
+</Player>
 ```

package/docs/reference/popover.md

@@ -79,15 +79,15 @@ App.tsx
 App.css
 
 ```
-import { createPlayer, Popover } from '@videojs/react';
+import { Container, createPlayer, Popover } 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="bar">
           <Popover.Root>
@@ -98,8 +98,8 @@ export default function BasicUsage() {
             </Popover.Popup>
           </Popover.Root>
         </div>
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```

package/docs/reference/poster.md

@@ -47,15 +47,15 @@ App.tsx
 App.css
 
 ```
-import { createPlayer, PlayButton, Poster } from '@videojs/react';
+import { Container, createPlayer, PlayButton, Poster } 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" playsInline />
 
         <Poster className="media-poster" src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg" />
@@ -64,8 +64,8 @@ export default function BasicUsage() {
           className="media-play-button"
           render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
         />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```