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

package/docs/reference/mute-button.md

@@ -46,35 +46,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">
-        <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 />
         <MuteButton
           className="media-mute-button"
           render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
         />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -104,29 +96,21 @@ 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">
-        <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 />
         <MuteButton
           className="media-mute-button"
           render={(props, state) => (
@@ -141,8 +125,8 @@ export default function VolumeLevels() {
             </button>
           )}
         />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -196,7 +180,7 @@ Whether the button is disabled.
 
 `label`
 
-`string | function`
+`Text | string | Text) | function`
 
 `''`
 
@@ -208,7 +192,7 @@ Custom label for the button.
 
 Type
 
-`string | ((state: MuteButtonState) => string)`
+`Text | string | ((state: MuteButtonState) => string | Text)`
 
 ### State
 
@@ -235,6 +219,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`
@@ -247,7 +255,7 @@ Whether audio is muted.
 
 `label`
 
-`string`
+`Text | string`
 
 ### Data attributes
 
@@ -267,10 +275,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

@@ -4,6 +4,26 @@ 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
@@ -16,14 +36,7 @@ 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
-    />
-  );
+  return <MuxAudio className="mux-audio" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" crossOrigin="anonymous" controls />;
 }
 ```
 ```
@@ -31,188 +44,4 @@ export default function BasicUsage() {
   width: 100%;
   height: 54px;
 }
-```
-
-## API Reference
-
-### Host Properties
-
-Property
-
-Type
-
-Default
-
-Details
-
-`audioRenditions`
-
-`AudioRenditionListLike | undefined`
-
-`—`
-
-▸
-
-Description
-
-Read-only. Selectable audio variants, populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
-
-`audioTracks`
-
-`AudioTrackListLike | undefined`
-
-`—`
-
-▸
-
-Description
-
-Read-only. Populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
-
-`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.
-
-`engine`
-
-`Hls | null`
-
-`—`
-
-▸
-
-Description
-
-Read-only. Underlying playback engine — the hls.js `Hls` instance when playing via MSE, otherwise `null`. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods.
-
-`error`
-
-`(ErrorLike & MediaError) | null`
-
-`—`
-
-▸
-
-Description
-
-Read-only.
-
-`liveEdgeStart`
-
-`number`
-
-`—`
-
-▸
-
-Description
-
-Read-only. Presentation time marking the start of the Live Edge Window.
-
-Derived from the delegate on every read; `NaN` when no delegate is attached or the stream is not live.
-
-`preload`
-
-`PreloadType`
-
-`'metadata'`
-
-▸
-
-Description
-
-Preload type (`'none'` / `'metadata'` / `'auto'`).
-
-`src`
-
-`string`
-
-`''`
-
-`streamType`
-
-`StreamType`
-
-`'unknown'`
-
-▸
-
-Description
-
-Current stream type (`'on-demand'` / `'live'` / `'unknown'`).
-
-`targetLiveWindow`
-
-`number`
-
-`—`
-
-▸
-
-Description
-
-Read-only. Seekable range size for live content. `0` for standard live, `Infinity` for DVR, `NaN` for on-demand or unknown. Fires `targetlivewindowchange` when the value changes (bridged from the delegate).
-
-`videoRenditions`
-
-`VideoRenditionListLike | undefined`
-
-`—`
-
-▸
-
-Description
-
-Read-only. Selectable quality levels, populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
-
-`videoTracks`
-
-`VideoTrackListLike | undefined`
-
-`—`
-
-▸
-
-Description
-
-Read-only. Populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
-
-### Attributes
-
-Renders a native `<audio>` element and accepts these media attributes as React props. The standard ones behave as described in the [MDN media attributes reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio): `autopictureinpicture``autoPlay``controls``controlslist``crossOrigin``disablepictureinpicture``disableremoteplayback``loading``loop``muted``playsInline``poster``preload``src``stream-type`
-
-### Events
-
-Handle these media events with React event props (e.g. `onPlay`, `onTimeUpdate`). See [media events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#events): `abort``canplay``canplaythrough``durationchange``emptied``ended``error``loadeddata``loadedmetadata``loadstart``pause``play``playing``progress``ratechange``seeked``seeking``stalled``suspend``timeupdate``volumechange``waiting`
-
-These media events have no React prop — attach a listener through a `ref` with `addEventListener`: `addtrack``change``removetrack`
-
-Beyond the media events above, this element emits:
-
-Event
-
-Description
-
-`streamtypechange`
-
-Fired when the detected stream type changes. Read \`streamType\` for the new value.
-
-`targetlivewindowchange`
-
-Fired when the target live window changes. Read \`targetLiveWindow\` for the new value.
-
-These events have no built-in React prop. Attach a listener to the element through a `ref` with `addEventListener`.
-
-### Methods
-
-Supports these methods from the native media API. See [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) for the core methods: `addTextTrack``canPlayType``load``pause``play`
-
-In React, call these through a `ref` to the element.
+```

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)