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

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.

package/docs/reference/mux-video.md

@@ -0,0 +1,275 @@
+# MuxVideo
+
+Video element for Mux-hosted HLS streams
+
+Video element for playing Mux-hosted HLS streams. Built on hls.js with Mux-specific optimizations.
+
+## 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
+
+### 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 `<video>` 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/video): `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``resize``seeked``seeking``stalled``suspend``timeupdate``volumechange``waiting`
+
+These media events have no React prop — attach a listener through a `ref` with `addEventListener`: `addtrack``change``enterpictureinpicture``leavepictureinpicture``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``exitFullscreen``exitPictureInPicture``load``pause``play``requestFullscreen``requestPictureInPicture`
+
+In React, call these through a `ref` to the element.
+
+### CSS Custom Properties
+
+Variable
+
+Details
+
+`--media-video-border-radius`
+
+▸
+
+Description
+
+Border radius of the video element.
+
+`--media-object-fit`
+
+▸
+
+Description
+
+Object fit for the video.
+
+`--media-object-position`
+
+▸
+
+Description
+
+Object position for the video.
+
+`--media-caption-track-duration`
+
+▸
+
+Description
+
+Duration of the caption track transition.
+
+`--media-caption-track-delay`
+
+▸
+
+Description
+
+Delay before the caption track transition.
+
+`--media-caption-track-y`
+
+▸
+
+Description
+
+Vertical offset of the caption track.

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

@@ -0,0 +1,212 @@
+# 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
+
+### Host Properties
+
+Property
+
+Type
+
+Default
+
+Details
+
+`engine`
+
+`null`
+
+`—`
+
+▸
+
+Description
+
+Read-only. Underlying playback engine — always `null`. Native HLS has no JS engine; the browser handles playback directly.
+
+`error`
+
+`MediaError | null`
+
+`—`
+
+▸
+
+Description
+
+Read-only.
+
+`liveEdgeStart`
+
+`number`
+
+`—`
+
+▸
+
+Description
+
+Read-only. Presentation time marking the start of the Live Edge Window. Derived on each read from the current `seekable.end` and cached offset; `NaN` when the stream is not live or the offset is unavailable.
+
+`preload`
+
+`PreloadType`
+
+`'metadata'`
+
+▸
+
+Description
+
+Preload type (`'none'` / `'metadata'` / `'auto'`).
+
+`src`
+
+`string`
+
+`''`
+
+`streamType`
+
+`MediaStreamType`
+
+`'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.
+
+### Attributes
+
+Renders a native `<video>` 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/video): `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``resize``seeked``seeking``stalled``suspend``timeupdate``volumechange``waiting`
+
+These media events have no React prop — attach a listener through a `ref` with `addEventListener`: `addtrack``change``enterpictureinpicture``leavepictureinpicture``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``exitFullscreen``exitPictureInPicture``load``pause``play``requestFullscreen``requestPictureInPicture`
+
+In React, call these through a `ref` to the element.
+
+### CSS Custom Properties
+
+Variable
+
+Details
+
+`--media-video-border-radius`
+
+▸
+
+Description
+
+Border radius of the video element.
+
+`--media-object-fit`
+
+▸
+
+Description
+
+Object fit for the video.
+
+`--media-object-position`
+
+▸
+
+Description
+
+Object position for the video.
+
+`--media-caption-track-duration`
+
+▸
+
+Description
+
+Duration of the caption track transition.
+
+`--media-caption-track-delay`
+
+▸
+
+Description
+
+Delay before the caption track transition.
+
+`--media-caption-track-y`
+
+▸
+
+Description
+
+Vertical offset of the caption track.

package/docs/reference/play-button.md

@@ -12,7 +12,7 @@ tsx
 
 ## Behavior
 
-PlayButton is a three-state button: **play** , **pause** , and **replay** . When media reaches the end (`ended` state), clicking restarts playback from the beginning.
+PlayButton is a three-state button: **play**, **pause**, and **replay**. When media reaches the end (`ended` state), clicking restarts playback from the beginning.
 
 ## Styling