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

package/docs/reference/native-hls-video.md

@@ -42,7 +42,7 @@ Details
 
 `preload`
 
-`PreloadType`
+`MediaPreloadType`
 
 `'metadata'`
 
@@ -54,7 +54,7 @@ Preload type (`'none'` / `'metadata'` / `'auto'`).
 
 `source`
 
-`NativeHlsSource | null`
+`{ src?: string; drm?: DrmSystemsConfig; engine?: NativeHlsEngineConfig } | null`
 
 `null`
 
@@ -84,7 +84,7 @@ Like the element's own `src`, assigning it always loads — including the URL al
 
 `streamType`
 
-`MediaStreamType`
+`(typeof MediaStreamTypes)[keyof typeof MediaStreamTypes]`
 
 `'unknown'`
 
@@ -94,6 +94,47 @@ Description
 
 Current stream type (`'on-demand'` / `'live'` / `'unknown'`).
 
+### Engine options
+
+#### `source.engine.nativeHls`
+
+This element hands playback to the browser, so there’s no JavaScript engine to configure. This carries the one thing native playback still needs from you. [Media Sources](../concepts/media-sources.md) covers how engine options fit into a structured source.
+
+tsx
+
+```
+<NativeHlsVideo
+  source={{
+    src: 'https://example.com/playlist.m3u8',
+    engine: {
+      nativeHls: {
+        drmSystems: { 'com.apple.fps': { licenseUrl: 'https://example.com/license' } },
+      },
+    },
+  }}
+/>
+```
+
+Option
+
+Type
+
+Details
+
+`drmSystems`
+
+`Partial<Record<KeySystem, DrmSystemCo...`
+
+▸
+
+Description
+
+License servers for protected content, keyed by EME key system id. An escape hatch for licensing native playback differently from every other path: naming it replaces `source.drm` here, and nowhere else.
+
+Type
+
+`Partial<Record<KeySystem, DrmSystemConfig>> | undefined`
+
 ### Ref
 
 Forwards its ref to the rendered `<video>`. The ref is an [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) and exposes its complete native property and method API.

package/docs/reference/pip-button.md

@@ -2,6 +2,14 @@
 
 Accessible picture-in-picture toggle button with keyboard support and state reflection
 
+## Import
+
+tsx
+
+```
+import { PiPButton } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx
@@ -122,7 +130,7 @@ Whether the button is disabled.
 
 `label`
 
-`Text | string | Text) | function`
+`object`
 
 `''`
 
@@ -134,7 +142,7 @@ Custom label for the button.
 
 Type
 
-`Text | string | ((state: PiPButtonState) => string | Text)`
+`{ key: string; text: string } | string | ((state: PiPButtonState) => Text | string)`
 
 ### State
 
@@ -146,31 +154,31 @@ Type
 
 Details
 
-`availability`
+`pip`
 
-`'available' | 'unavailable' | 'unsupp...`
+`boolean`
 
 ▸
 
 Description
 
-Whether picture-in-picture can be requested on this platform.
+Whether picture-in-picture mode is currently active.
 
-Type
+`label`
 
-`'available' | 'unavailable' | 'unsupported'`
+`{ key: string; text: string } | string`
 
-`disabled`
+`availability`
 
-`boolean`
+`MediaPictureInPictureState['pipAvailability']`
 
 ▸
 
 Description
 
-Non-interactive but still focusable (mirrors `aria-disabled`).
+Whether picture-in-picture can be requested on this platform.
 
-`hidden`
+`disabled`
 
 `boolean`
 
@@ -178,9 +186,9 @@ Non-interactive but still focusable (mirrors `aria-disabled`).
 
 Description
 
-Whether the button is hidden until picture-in-picture is available.
+Non-interactive but still focusable (mirrors `aria-disabled`).
 
-`pip`
+`hidden`
 
 `boolean`
 
@@ -188,11 +196,7 @@ Whether the button is hidden until picture-in-picture is available.
 
 Description
 
-Whether picture-in-picture mode is currently active.
-
-`label`
-
-`Text | string`
+Whether the button is hidden until picture-in-picture is available.
 
 ### Data attributes
 
@@ -212,7 +216,7 @@ Present when picture-in-picture mode is active.
 
 `data-availability`
 
-`'available' | 'unavailable' | 'unsupp...`
+`MediaPictureInPictureState['pipAvailability']`
 
 ▸
 
@@ -220,10 +224,6 @@ Description
 
 Indicates picture-in-picture availability (`available`, `unavailable`, `unsupported`).
 
-Type
-
-`'available' | 'unavailable' | 'unsupported'`
-
 `data-disabled`
 
 ▸

package/docs/reference/play-button.md

@@ -2,6 +2,14 @@
 
 Accessible play/pause button with keyboard support and customizable rendering
 
+## Import
+
+tsx
+
+```
+import { PlayButton } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx
@@ -128,7 +136,7 @@ Whether the button is disabled.
 
 `label`
 
-`Text | string | Text) | function`
+`object`
 
 `''`
 
@@ -140,7 +148,7 @@ Custom label for the button.
 
 Type
 
-`Text | string | ((state: PlayButtonState) => string | Text)`
+`{ key: string; text: string } | string | ((state: PlayButtonState) => Text | string)`
 
 ### State
 
@@ -184,7 +192,7 @@ Whether playback has started (played or seeked).
 
 `label`
 
-`Text | string`
+`{ key: string; text: string } | string`
 
 ### Data attributes
 

package/docs/reference/playback-rate-button.md

@@ -2,6 +2,14 @@
 
 A button that cycles through playback speed rates
 
+## Import
+
+tsx
+
+```
+import { PlaybackRateButton } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx
@@ -116,7 +124,7 @@ Whether the button is disabled.
 
 `label`
 
-`Text | string | Text) | function`
+`object`
 
 `''`
 
@@ -128,7 +136,7 @@ Custom label for the button.
 
 Type
 
-`Text | string | ((state: PlaybackRateButtonState) => string | Text)`
+`{ key: string; text: string } | string | ((state: PlaybackRateButtonState) => Text | string)`
 
 `menuTrigger`
 
@@ -152,13 +160,13 @@ Type
 
 Details
 
-`rate`
+`label`
 
-`number`
+`{ key: string; text: string } | string`
 
-`label`
+`rate`
 
-`Text | string`
+`number`
 
 ### Data attributes
 

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

@@ -4,6 +4,14 @@ A menu radio group for selecting playback speed
 
 Creates radio items from the player playback rate state and selects the playback speed.
 
+## Import
+
+tsx
+
+```
+import { PlaybackRateRadioGroup } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx
@@ -88,19 +96,21 @@ function SpeedMenu(): ReactNode {
       <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
         Speed
       </Menu.Trigger>
-      <Menu.Content className="menu">
-        <PlaybackRateRadioGroup
-          className="menu-group"
-          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.Content>
+      <Menu.Popup className="menu">
+        <Menu.Content>
+          <PlaybackRateRadioGroup
+            className="menu-group"
+            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.Content>
+      </Menu.Popup>
     </Menu.Root>
   );
 }
@@ -238,7 +248,7 @@ Type
 
 `label`
 
-`Text | string | Text) | function`
+`object`
 
 `''`
 
@@ -250,7 +260,7 @@ Custom label for the options group.
 
 Type
 
-`Text | string | ((state: PlaybackRateRadioGroupState) => string | Text)`
+`{ key: string; text: string } | string | ((state: PlaybackRateRadioGroupState) => Text | string)`
 
 ### State
 
@@ -262,9 +272,9 @@ Type
 
 Details
 
-`rate`
+`label`
 
-`number`
+`{ key: string; text: string } | string`
 
 `value`
 
@@ -278,7 +288,7 @@ Current radio-group value.
 
 `options`
 
-`PlaybackRateRadioGroupOption[]`
+`readonly Option[]`
 
 ▸
 
@@ -316,9 +326,9 @@ Description
 
 Whether the media exposes a meaningful selection.
 
-`label`
+`rate`
 
-`Text | string`
+`number`
 
 ### Data attributes
 

package/docs/reference/player-container.md

@@ -1,17 +1,17 @@
 # Container
 
-The player's interaction surface — handles layout, fullscreen, media attachment, and user activity detection.
+The player's visual and interaction surface for layout, fullscreen, focus, and user activity.
 
-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).
+The `Container` is the player’s physical surface. It defines the visual boundary, registers the fullscreen and activity target, and gives gesture and hotkey components a shared interaction surface. It lives inside a [`Player`](./player.md).
 
 tsx
 
 ```
 <Player>
   <Container>
-    <video src="video.mp4" />
+    <Video src="video.mp4" />
     <Controls.Root>
-      {/* ... */}
+      <Controls.Content>{/* ... */}</Controls.Content>
     </Controls.Root>
   </Container>
 </Player>
@@ -25,7 +25,7 @@ tsx
 
 ```
 import { Container, createPlayer } from '@videojs/react';
-import { videoFeatures } from '@videojs/react/video';
+import { Video, videoFeatures } from '@videojs/react/video';
 
 const { Player } = createPlayer({ features: videoFeatures });
 ```
@@ -34,23 +34,25 @@ const { Player } = createPlayer({ features: videoFeatures });
 
 ## What it does
 
-### Layout & fullscreen
+### Layout and fullscreen
 
-The container is the visual box around your media and controls. Sizing, aspect ratio, and visual boundaries all go here — on `Container`, not `Player`.
+The container is the visual box around your media and controls. Put sizing, aspect ratio, positioning, and visual boundaries here — on `Container`, not `Player`. Place overlays inside it, use it as their positioning context, and measure it when your app needs the rendered player size.
 
 tsx
 
 ```
-<Container style={{ width: 640, aspectRatio: '16/9' }}>
-  <video src="video.mp4" />
+<Container style={{ position: 'relative', width: 640, aspectRatio: '16/9' }}>
+  <Video src="video.mp4" />
   <Controls.Root>
-    {/* ... */}
+    <Controls.Content>{/* ... */}</Controls.Content>
   </Controls.Root>
 </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.
 
+React media components such as `MuxVideo` render a native media element, so the media itself has a box. The container remains the shared layout and fullscreen target for the media and its overlays.
+
 ### Media attachment
 
 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.
@@ -60,44 +62,33 @@ Media discovery is handled by `Player`, not `Container`. When a media component
 The container is where user intent enters the player. It listens for physical interaction on its surface and translates that into player behavior:
 
 *   **User activity** — Mouse movement, touch, and keyboard activity within the container drive idle detection. This is how controls know when to show and hide.
-*   **Gestures** — Click-to-play, double-click fullscreen, swipe to seek, and other touch/mouse gestures. Configured via the `Gesture` component.
+*   **Gestures** — Tap and double-tap actions, optionally limited by pointer type and left, center, or right region. Configured via the [`Gesture`](./gesture.md) component.
 *   **Keyboard controls** — Spacebar to play/pause, arrow keys to seek, and other keyboard shortcuts scoped to the container. Configured via the `Hotkey` component.
 
+### Popup coordination
+
+Each container owns one popup group. Opening a root [menu](./menu.md) or [popover](./popover.md) closes the previously open popup in that container. A popup rendered outside the container still manages its own open state, but it does not participate in the container’s group.
+
 ## Relationship to skins
 
 A [skin](../concepts/skins.md) is a container plus UI controls. When you use a packaged skin, the container is built in — you don’t need to add one yourself.
 
-tsx
-
-```
-{/* Packaged skin — container is inside VideoSkin */}
-<Player>
-  <VideoSkin>
-    <Video src="video.mp4" />
-  </VideoSkin>
-</Player>
+Style `VideoSkin` for the player’s outer size and aspect ratio. Its `skin.css` import makes the built-in container fill that space and positions the media, controls, poster, and overlays.
 
-{/* Custom UI — you use Container directly */}
-<Player>
-  <Container>
-    <video src="video.mp4" />
-    <PlayButton />
-  </Container>
-</Player>
-```
+If you omit `VideoSkin` to build custom UI, render and style `Container` yourself. See [Layout and fullscreen](#layout-and-fullscreen) for the complete layout example.
 
 ## Inside vs. outside the container
 
-[`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.
+[`Player`](./player.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>
   <Container>
-    <video src="video.mp4" />
+    <Video src="video.mp4" />
     <Controls.Root>          {/* fullscreen, activity detection, gestures */}
-      {/* ... */}
+      <Controls.Content>{/* ... */}</Controls.Content>
     </Controls.Root>
   </Container>
 

package/docs/reference/{player-provider.md → player.md}

@@ -7,7 +7,7 @@ The `Player` is the state boundary of your player. It creates a store and makes
 App.tsx
 
 ```
-import { videoFeatures } from '@videojs/react/video';
+import { Video, videoFeatures } from '@videojs/react/video';
 import { Container, createPlayer } from '@videojs/react';
 
 const { Player } = createPlayer({ features: videoFeatures });
@@ -17,7 +17,7 @@ function App() {
     <Player>
       {/* Everything inside can access the player store */}
       <Container>
-        <video src="video.mp4" />
+        <Video src="video.mp4" />
       </Container>
     </Player>
   );
@@ -60,7 +60,7 @@ tsx
 
 ## No visual presence
 
-`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`.
+`Player` renders no DOM element of its own — it’s purely a state wrapper. Put sizing, positioning, borders, backgrounds, and DOM measurements on the [`Container`](./player-container.md), not `Player`.
 
 ## Accessing state
 
@@ -69,13 +69,15 @@ Use `usePlayer` to read state or call actions from any component inside `Player`
 PlayPauseButton.tsx
 
 ```
+import { selectPlayback, usePlayer } from '@videojs/react';
+
 function PlayPauseButton() {
-  const paused = usePlayer(selectPlayback).paused;
-  const store = usePlayer();
+  const playback = usePlayer(selectPlayback);
+  if (!playback) return null;
 
   return (
-    <button onClick={() => store.dispatch('toggle-playback')}>
-      {paused ? 'Play' : 'Pause'}
+    <button onClick={() => playback.togglePaused()}>
+      {playback.paused ? 'Play' : 'Pause'}
     </button>
   );
 }
@@ -92,9 +94,9 @@ tsx
 ```
 <Player>
   <Container>
-    <video src="video.mp4" />
+    <Video src="video.mp4" />
     <Controls.Root>          {/* goes fullscreen with the video */}
-      {/* ... */}
+      <Controls.Content>{/* ... */}</Controls.Content>
     </Controls.Root>
   </Container>