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

package/docs/reference/mute-button.md

@@ -14,8 +14,40 @@ tsx
 
 Toggles mute on and off, and exposes a derived `volumeLevel` based on the current volume and mute state.
 
+Mute availability is separate from volume-level availability because some media can accept a mute command without supporting volume changes. When mute is unavailable or unsupported, the HTML custom element receives the native `hidden` attribute and the React component returns `null`. Toggling is also ignored while mute is unavailable.
+
 ## Styling
 
+Attribute
+
+Values
+
+Description
+
+`data-muted`
+
+Present / absent
+
+Present when the media is muted
+
+`data-volume-level`
+
+`"off"` | `"low"` | `"medium"` | `"high"`
+
+Current volume level
+
+`data-availability`
+
+`"available"` | `"unavailable"` | `"unsupported"`
+
+Whether the media can be muted
+
+`data-hidden`
+
+Present / absent
+
+Present on the HTML element while mute is unavailable or unsupported
+
 Style the button based on muted state:
 
 React renders a `<button>` element. Add a `className` to style it:
@@ -38,6 +70,8 @@ css
 .mute-button[data-volume-level="high"] .icon-high { display: inline; }
 ```
 
+Unavailable and unsupported buttons are hidden automatically. No availability selector or extra hiding CSS is required.
+
 ## Accessibility
 
 Renders a `<button>` with an automatic `aria-label`: “Unmute” when muted, “Mute” when unmuted. Override with the `label` prop. Keyboard activation: Enter / Space.
@@ -46,29 +80,27 @@ Renders a `<button>` with an automatic `aria-label`: “Unmute” when muted,
 
 ### Basic Usage
 
-Mute
-
 App.tsx
 
 App.css
 
 ```
-import { createPlayer, MuteButton } from '@videojs/react';
+import { Container, createPlayer, MuteButton } 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 />
         <MuteButton
           className="media-mute-button"
           render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
         />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -98,22 +130,20 @@ export default function BasicUsage() {
 
 ### Volume Levels
 
-High
-
 App.tsx
 
 App.css
 
 ```
-import { createPlayer, MuteButton } from '@videojs/react';
+import { Container, createPlayer, MuteButton } from '@videojs/react';
 import { Video, videoFeatures } from '@videojs/react/video';
 
-const Player = createPlayer({ features: videoFeatures });
+const { Player } = createPlayer({ features: videoFeatures });
 
 export default function VolumeLevels() {
   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 />
         <MuteButton
           className="media-mute-button"
@@ -129,8 +159,8 @@ export default function VolumeLevels() {
             </button>
           )}
         />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -223,6 +253,30 @@ Derived volume level:
 *   `medium`: volume < 0.75
 *   `high`: volume >= 0.75
 
+`availability`
+
+`'available' | 'unavailable' | 'unsupp...`
+
+▸
+
+Description
+
+Whether the media can be muted at all.
+
+Type
+
+`'available' | 'unavailable' | 'unsupported'`
+
+`hidden`
+
+`boolean`
+
+▸
+
+Description
+
+Whether the button is hidden because the media has no mute to toggle.
+
 `muted`
 
 `boolean`
@@ -255,10 +309,32 @@ Present when the media is muted.
 
 `data-volume-level`
 
-`'off' | 'medium' | 'low' | 'high'`
+`'off' | 'low' | 'medium' | 'high'`
+
+▸
+
+Description
+
+Indicates the volume level.
+
+`data-availability`
+
+`'available' | 'unavailable' | 'unsupp...`
+
+▸
+
+Description
+
+Indicates mute availability (`available`, `unavailable`, `unsupported`).
+
+Type
+
+`'available' | 'unavailable' | 'unsupported'`
+
+`data-hidden`
 
 ▸
 
 Description
 
-Indicates the volume level.
+Present when the button is hidden because the media has no mute to toggle.

package/docs/reference/mux-audio.md

@@ -44,110 +44,4 @@ export default function BasicUsage() {
   width: 100%;
   height: 54px;
 }
-```
-
-## API Reference
-
-### Props
-
-Accepts the standard React props for a native `<audio>`, plus these Video.js-specific props:
-
-Prop
-
-Type
-
-Default
-
-Details
-
-`config`
-
-`HlsMediaConfig`
-
-`{}`
-
-▸
-
-Description
-
-Playback configuration: a preferred playback path, an explicit content type, and options forwarded to hls.js. Reassigning reloads the engine when an engine-relevant option changes.
-
-`preload`
-
-`PreloadType`
-
-`'metadata'`
-
-▸
-
-Description
-
-Preload type (`'none'` / `'metadata'` / `'auto'`).
-
-`source`
-
-`MuxSource | null`
-
-`null`
-
-▸
-
-Description
-
-Structured Mux source. Setting it derives `src` from the playback ID, custom domain, and `playback` params (appended as `snake_case` query params). A `playback.token` replaces all other params — signed URLs bake them into the token.
-
-`src`
-
-`string`
-
-`''`
-
-▸
-
-Description
-
-Media source URL. Setting a Mux stream URL (`https://stream.mux.com/<playback-id>.m3u8?...`) extracts the playback ID and query params into `source`; other URLs pass through unchanged.
-
-`storyboard`
-
-`string`
-
-`''`
-
-▸
-
-Description
-
-Storyboard (thumbnail sprite) VTT URL. Falls back to one derived from `source`.
-
-`streamType`
-
-`StreamType`
-
-`'unknown'`
-
-▸
-
-Description
-
-Current stream type (`'on-demand'` / `'live'` / `'unknown'`).
-
-`thumbnail`
-
-`string`
-
-`''`
-
-▸
-
-Description
-
-Thumbnail image URL. Falls back to one derived from `source`.
-
-### Ref
-
-Forwards its ref to the rendered `<audio>`. The ref is an [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) and exposes its complete native property and method API.
-
-### Events
-
-Handle standard media events with React event props such as `onPlay` and `onTimeUpdate`. For native events without a React prop, attach a listener through the ref with `addEventListener`.
+```

package/docs/reference/mux-video.md

@@ -117,110 +117,4 @@ export default function BasicUsage() {
   width: 100%;
   aspect-ratio: 16 / 9;
 }
-```
-
-## API Reference
-
-### Props
-
-Accepts the standard React props for a native `<video>`, plus these Video.js-specific props:
-
-Prop
-
-Type
-
-Default
-
-Details
-
-`config`
-
-`HlsMediaConfig`
-
-`{}`
-
-▸
-
-Description
-
-Playback configuration: a preferred playback path, an explicit content type, and options forwarded to hls.js. Reassigning reloads the engine when an engine-relevant option changes.
-
-`preload`
-
-`PreloadType`
-
-`'metadata'`
-
-▸
-
-Description
-
-Preload type (`'none'` / `'metadata'` / `'auto'`).
-
-`source`
-
-`MuxSource | null`
-
-`null`
-
-▸
-
-Description
-
-Structured Mux source. Setting it derives `src` from the playback ID, custom domain, and `playback` params (appended as `snake_case` query params). A `playback.token` replaces all other params — signed URLs bake them into the token.
-
-`src`
-
-`string`
-
-`''`
-
-▸
-
-Description
-
-Media source URL. Setting a Mux stream URL (`https://stream.mux.com/<playback-id>.m3u8?...`) extracts the playback ID and query params into `source`; other URLs pass through unchanged.
-
-`storyboard`
-
-`string`
-
-`''`
-
-▸
-
-Description
-
-Storyboard (thumbnail sprite) VTT URL. Falls back to one derived from `source`.
-
-`streamType`
-
-`StreamType`
-
-`'unknown'`
-
-▸
-
-Description
-
-Current stream type (`'on-demand'` / `'live'` / `'unknown'`).
-
-`thumbnail`
-
-`string`
-
-`''`
-
-▸
-
-Description
-
-Thumbnail image URL. Falls back to one derived from `source`.
-
-### 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.
-
-### Events
-
-Handle standard media events with React event props such as `onPlay` and `onTimeUpdate`. For native events without a React prop, attach a listener through the ref with `addEventListener`.
+```

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

@@ -52,12 +52,36 @@ Description
 
 Preload type (`'none'` / `'metadata'` / `'auto'`).
 
+`source`
+
+`NativeHlsSource | null`
+
+`null`
+
+▸
+
+Description
+
+Structured source: what to play (`src`) plus how to play it (`engine.nativeHls`). Assigning it derives `src`.
+
+Only a new URL reaches the element, so reassigning an equivalent source — an inline React prop, for instance — neither reloads nor disturbs key exchange. Use `src` or `load()` to reload what is already playing.
+
+Unlike `HlsJsMedia`, this does not announce a `sourcechange`. It is also the delegate `HlsJsMedia` plays native sources through, and every event it dispatches is re-dispatched there — which already announces its own.
+
 `src`
 
 `string`
 
 `''`
 
+▸
+
+Description
+
+Media source URL. Assigning it replaces the identity half of `source` and leaves `engine` intact, so changing the URL never disturbs key exchange.
+
+Like the element's own `src`, assigning it always loads — including the URL already playing. This is the imperative half of the API, and what `HlsJsMedia` loads its native delegate through.
+
 `streamType`
 
 `MediaStreamType`

package/docs/reference/pip-button.md

@@ -53,22 +53,22 @@ App.tsx
 App.css
 
 ```
-import { createPlayer, PiPButton } from '@videojs/react';
+import { Container, createPlayer, PiPButton } 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 />
         <PiPButton
           className="media-pip-button"
           render={(props, state) => <button {...props}>{state.pip ? 'Exit PiP' : 'Enter PiP'}</button>}
         />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```

package/docs/reference/play-button.md

@@ -57,15 +57,15 @@ App.tsx
 App.css
 
 ```
-import { createPlayer, PlayButton } from '@videojs/react';
+import { Container, createPlayer, PlayButton } 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 />
         <PlayButton
           className="media-play-button"
@@ -73,8 +73,8 @@ export default function BasicUsage() {
             <button {...props}>{state.ended ? 'Replay' : state.paused ? 'Play' : 'Pause'}</button>
           )}
         />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```

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

@@ -47,22 +47,22 @@ App.tsx
 App.css
 
 ```
-import { createPlayer, PlaybackRateButton } from '@videojs/react';
+import { Container, createPlayer, PlaybackRateButton } 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 />
         <PlaybackRateButton
           className="media-playback-rate-button"
           render={(props, state) => <button {...props}>{Math.round(state.rate * 10) / 10}&times;</button>}
         />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```