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

package/docs/reference/mute-button.md

@@ -62,13 +62,7 @@ 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
-        />
+        <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>}
@@ -120,13 +114,7 @@ export default function VolumeLevels() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
         <MuteButton
           className="media-mute-button"
           render={(props, state) => (
@@ -196,7 +184,7 @@ Whether the button is disabled.
 
 `label`
 
-`string | function`
+`Text | string | Text) | function`
 
 `''`
 
@@ -208,7 +196,7 @@ Custom label for the button.
 
 Type
 
-`string | ((state: MuteButtonState) => string)`
+`Text | string | ((state: MuteButtonState) => string | Text)`
 
 ### State
 
@@ -247,7 +235,7 @@ Whether audio is muted.
 
 `label`
 
-`string`
+`Text | string`
 
 ### Data attributes
 

package/docs/reference/mux-audio.md

@@ -0,0 +1,153 @@
+# MuxAudio
+
+Audio element for Mux-hosted HLS streams
+
+Audio element for playing Mux-hosted HLS streams. Built on hls.js with Mux-specific optimizations.
+
+## Analytics and casting
+
+MuxAudio plays Mux streams. It doesn’t monitor them or cast them — [Mux Data](../concepts/mux-data.md) and [Google Cast](../concepts/cast.md) are separate components you add to the player alongside it. Mux Data needs no environment key here, since Mux attributes the views to the environment that owns the playback ID:
+
+tsx
+
+```
+import { GoogleCast } from '@videojs/react/media/google-cast';
+import { MuxAudio } from '@videojs/react/media/mux-audio';
+import { MuxData } from '@videojs/react/media/mux-data';
+
+<MuxAudio source={{ playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM' }} />
+<MuxData playerSoftwareName="mux-audio" />
+<GoogleCast />
+```
+
+[Mux Data — metadata, options, and configuration](../concepts/mux-data.md)
+
+[Google Cast — receivers, load requests, and session state](../concepts/cast.md)
+
+## Examples
+
+### Basic Usage
+
+App.tsx
+
+App.css
+
+```
+import { MuxAudio } from '@videojs/react/media/mux-audio';
+
+export default function BasicUsage() {
+  return <MuxAudio className="mux-audio" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" crossOrigin="anonymous" controls />;
+}
+```
+```
+.mux-audio {
+  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-data.md

@@ -0,0 +1,93 @@
+# MuxData
+
+Options for the Mux Data component that monitors playback quality
+
+Adds [Mux Data](https://data.mux.com) monitoring to the player’s media. It renders nothing — place it inside the player as a sibling of the media element. See [Mux Data](../concepts/mux-data.md) for how monitoring works.
+
+## Anatomy
+
+tsx
+
+```
+import { MuxData } from '@videojs/react/media/mux-data';
+
+<MuxData />
+```
+
+## Options
+
+Prop
+
+Type
+
+Description
+
+`envKey`
+
+`string`
+
+Mux Data environment key the beacons are sent to. Optional for Mux-hosted playback
+
+`metadata`
+
+`object`
+
+Mux Data metadata for the view
+
+`playerSoftwareName`
+
+`string`
+
+Player name reported to Mux Data
+
+`playerSoftwareVersion`
+
+`string`
+
+Player version reported to Mux Data. Defaults to the Video.js version
+
+`playerInitTime`
+
+`number`
+
+Epoch milliseconds the player was initialized. Defaults to when the component was created
+
+`beaconCollectionDomain`
+
+`string`
+
+Custom domain the beacons are sent to
+
+`disableCookies`
+
+`boolean`
+
+Stops the SDK from setting cookies
+
+`debug`
+
+`boolean`
+
+Turns on SDK debug logging
+
+`MuxDataSdk`
+
+`object`
+
+SDK used for monitoring. Set it to `undefined` to switch monitoring off
+
+Changing `MuxDataSdk`, `beaconCollectionDomain`, `debug`, or `disableCookies` restarts monitoring, which ends the current view and starts a new one. The rest update the view in place.
+
+## See also
+
+[
+
+Mux Data
+
+How monitoring works
+
+](../concepts/mux-data.md)
+
+[MuxVideo element reference](./mux-video.md)
+
+[MuxAudio element reference](./mux-audio.md)

package/docs/reference/mux-video.md

@@ -0,0 +1,226 @@
+# MuxVideo
+
+Video element for Mux-hosted HLS streams
+
+Video element for playing Mux-hosted HLS streams. Built on hls.js with Mux-specific optimizations.
+
+## Load a source
+
+The `source` param builds the URL for you from a playback ID, an optional custom domain, and `playback` params. Playback params are just camelCased [Mux playback query params](https://www.mux.com/docs/api-reference/stream/streaming/get-hls-manifest); for example, `max_resolution` becomes `maxResolution`.
+
+tsx
+
+```
+<MuxVideo
+  source={{ 
+    playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM',
+    customDomain: 'media.example.com',
+    playback: { maxResolution: '1080p' }
+  }} 
+/>
+```
+
+If for some reason you need a bit more control, you can use the `src` param with a plain ’ol URL, too:
+
+tsx
+
+```
+<MuxVideo
+  src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+/>
+```
+
+MuxVideo fires a `sourcechange` event when the source actually changes. Setting the same values again, like a fresh object on a React re-render, doesn’t fire it.
+
+## Thumbnails and storyboards
+
+`thumbnail` and `storyboard` default to URLs derived from `source`: the poster image and the storyboard VTT that drives hover previews on the time slider. MuxVideo injects the storyboard `<track>` automatically, skipping it for live streams. Set either prop to a URL to override the derived one.
+
+## Signed playback
+
+For [signed playback](https://www.mux.com/docs/guides/secure-video-playback), put the playback token on `source.playback.token`. The token replaces every other playback param, so bake modifiers like resolution and time bounds into the token when you sign it.
+
+Thumbnail and storyboard URLs need their own audience-scoped tokens, `source.thumbnail.token` (`aud: 't'`) and `source.storyboard.token` (`aud: 's'`). Without a matching image token, MuxVideo derives no thumbnail or storyboard URL, since an unsigned request would be rejected.
+
+tsx
+
+```
+<MuxVideo
+  source={{
+    playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM',
+    playback: { token: playbackToken },
+    thumbnail: { token: thumbnailToken },
+    storyboard: { token: storyboardToken },
+  }}
+/>
+```
+
+## Analytics and casting
+
+MuxVideo plays Mux streams. It doesn’t monitor them or cast them — [Mux Data](../concepts/mux-data.md) and [Google Cast](../concepts/cast.md) are separate components you add to the player alongside it. Mux Data needs no environment key here, since Mux attributes the views to the environment that owns the playback ID:
+
+tsx
+
+```
+import { GoogleCast } from '@videojs/react/media/google-cast';
+import { MuxData } from '@videojs/react/media/mux-data';
+import { MuxVideo } from '@videojs/react/media/mux-video';
+
+<MuxVideo source={{ playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM' }} playsInline />
+<MuxData playerSoftwareName="mux-video" />
+<GoogleCast />
+```
+
+[
+
+Mux Data
+
+Metadata, options, and configuration
+
+](../concepts/mux-data.md)
+
+[
+
+Google Cast
+
+Receivers, load requests, and session state
+
+](../concepts/cast.md)
+
+## Examples
+
+### Basic Usage
+
+App.tsx
+
+App.css
+
+```
+import { MuxVideo } from '@videojs/react/media/mux-video';
+
+export default function BasicUsage() {
+  return (
+    <MuxVideo
+      className="mux-video"
+      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+      autoPlay
+      muted
+      playsInline
+      loop
+      crossOrigin="anonymous"
+    />
+  );
+}
+```
+```
+.mux-video {
+  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

@@ -0,0 +1,79 @@
+# NativeHlsVideo
+
+HLS video element using the browser's built-in HLS support
+
+HLS video element that relies on the browser’s native HLS support. Works on Safari and other browsers with built-in HLS playback. For cross-browser HLS support, use [HlsJsVideo](/docs/framework/html/reference/hlsjs-video/) instead.
+
+## Examples
+
+### Basic Usage
+
+App.tsx
+
+App.css
+
+```
+import { NativeHlsVideo } from '@videojs/react/media/native-hls-video';
+
+export default function BasicUsage() {
+  return <NativeHlsVideo className="native-hls-video" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" autoPlay muted playsInline loop />;
+}
+```
+```
+.native-hls-video {
+  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
+
+`preload`
+
+`PreloadType`
+
+`'metadata'`
+
+▸
+
+Description
+
+Preload type (`'none'` / `'metadata'` / `'auto'`).
+
+`src`
+
+`string`
+
+`''`
+
+`streamType`
+
+`MediaStreamType`
+
+`'unknown'`
+
+▸
+
+Description
+
+Current stream type (`'on-demand'` / `'live'` / `'unknown'`).
+
+### 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/on-i18n-registry-change.md

@@ -0,0 +1,49 @@
+# onI18nRegistryChange
+
+Subscribe to global i18n registry mutations
+
+`onI18nRegistryChange` registers a callback that runs whenever any locale layer changes, for example after `registerI18n` or browser translation prefetch. Returns an unsubscribe function.
+
+React `I18nProvider` uses this to invalidate translators when the registry updates.
+
+## API Reference
+
+### Parameters
+
+Parameter
+
+Type
+
+Default
+
+Details
+
+`callback*`
+
+`function`
+
+`—`
+
+▸
+
+Description
+
+Invoked when any locale layer changes.
+
+Type
+
+`(() => void)`
+
+### Return Value
+
+Type
+
+Details
+
+`function`
+
+▸
+
+Type
+
+`(() => void)`