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

package/docs/reference/mute-button.md

@@ -0,0 +1,276 @@
+# MuteButton
+
+Accessible mute/unmute button with keyboard support and volume state reflection
+
+## Anatomy
+
+tsx
+
+```
+<MuteButton />
+```
+
+## Behavior
+
+Toggles mute on and off, and exposes a derived `volumeLevel` based on the current volume and mute state.
+
+## Styling
+
+Style the button based on muted state:
+
+React renders a `<button>` element. Add a `className` to style it:
+
+css
+
+```
+.mute-button[data-muted] .icon-muted { display: inline; }
+.mute-button:not([data-muted]) .icon-unmuted { display: inline; }
+```
+
+Use `data-volume-level` for multi-level icon switching:
+
+css
+
+```
+.mute-button[data-volume-level="off"] .icon-off { display: inline; }
+.mute-button[data-volume-level="low"] .icon-low { display: inline; }
+.mute-button[data-volume-level="medium"] .icon-medium { display: inline; }
+.mute-button[data-volume-level="high"] .icon-high { display: inline; }
+```
+
+## Accessibility
+
+Renders a `<button>` with an automatic `aria-label`: “Unmute” when muted, “Mute” when unmuted. Override with the `label` prop. Keyboard activation: Enter / Space.
+
+## Examples
+
+### Basic Usage
+
+Mute
+
+App.tsx
+
+App.css
+
+```
+import { createPlayer, MuteButton } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+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
+        />
+        <MuteButton
+          className="media-mute-button"
+          render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
+```
+```
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.media-mute-button {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  padding-block: 8px;
+  padding-inline: 20px;
+  color: black;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  backdrop-filter: blur(10px);
+}
+```
+
+### Volume Levels
+
+High
+
+App.tsx
+
+App.css
+
+```
+import { createPlayer, MuteButton } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+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
+        />
+        <MuteButton
+          className="media-mute-button"
+          render={(props, state) => (
+            <button {...props}>
+              {state.volumeLevel === 'off'
+                ? 'Off'
+                : state.volumeLevel === 'low'
+                  ? 'Low'
+                  : state.volumeLevel === 'medium'
+                    ? 'Medium'
+                    : 'High'}
+            </button>
+          )}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
+```
+```
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.media-mute-button {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  padding-block: 8px;
+  padding-inline: 20px;
+  color: black;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  backdrop-filter: blur(10px);
+}
+```
+
+## API Reference
+
+### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`disabled`
+
+`boolean`
+
+`false`
+
+▸
+
+Description
+
+Whether the button is disabled.
+
+`label`
+
+`string | function`
+
+`''`
+
+▸
+
+Description
+
+Custom label for the button.
+
+Type
+
+`string | ((state: MuteButtonState) => string)`
+
+### State
+
+State is accessible via the `render`, `className`, and `style` props.
+
+Property
+
+Type
+
+Details
+
+`volumeLevel`
+
+`'off' | 'low' | 'medium' | 'high'`
+
+▸
+
+Description
+
+Derived volume level:
+
+*   `off`: muted or volume is 0
+*   `low`: volume < 0.5
+*   `medium`: volume < 0.75
+*   `high`: volume >= 0.75
+
+`muted`
+
+`boolean`
+
+▸
+
+Description
+
+Whether audio is muted.
+
+`label`
+
+`string`
+
+### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-muted`
+
+▸
+
+Description
+
+Present when the media is muted.
+
+`data-volume-level`
+
+`'off' | 'medium' | 'low' | 'high'`
+
+▸
+
+Description
+
+Indicates the volume level.

package/docs/reference/mux-audio.md

@@ -0,0 +1,218 @@
+# MuxAudio
+
+Audio element for Mux-hosted HLS streams
+
+Audio element for playing Mux-hosted HLS streams. Built on hls.js with Mux-specific optimizations.
+
+## 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
+
+### 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.