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

package/docs/reference/hlsjs-video.md

@@ -2,7 +2,7 @@
 
 HLS video element powered by hls.js for adaptive bitrate streaming
 
-HLS video element powered by [hls.js](https://github.com/video-dev/hls.js/) for adaptive bitrate streaming. It’s the recommended choice for HLS playback: full feature support across every browser. For alternatives, see [NativeHlsVideo](/docs/framework/html/reference/native-hls-video/) (browser-native HLS) or [SimpleHlsVideo](/docs/framework/html/reference/simple-hls-video/) (lightweight HLS).
+HLS video element powered by [hls.js](https://github.com/video-dev/hls.js/) for adaptive bitrate streaming. It’s the recommended choice for HLS playback: full feature support across every browser. For alternatives, see [NativeHlsVideo](/docs/framework/html/reference/native-hls-video/) (browser-native HLS) or [HlsVideo](/docs/framework/html/reference/hls-video/) (lightweight HLS).
 
 ## Examples
 
@@ -16,16 +16,7 @@ App.css
 import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
 
 export default function BasicUsage() {
-  return (
-    <HlsJsVideo
-      className="hlsjs-video"
-      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
-      autoPlay
-      muted
-      playsInline
-      loop
-    />
-  );
+  return <HlsJsVideo className="hlsjs-video" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" autoPlay muted playsInline loop />;
 }
 ```
 ```
@@ -37,9 +28,11 @@ export default function BasicUsage() {
 
 ## API Reference
 
-### Host Properties
+### Props
 
-Property
+Accepts the standard React props for a native `<video>`, plus these Video.js-specific props:
+
+Prop
 
 Type
 
@@ -47,80 +40,6 @@ 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`
@@ -133,142 +52,48 @@ Description
 
 Preload type (`'none'` / `'metadata'` / `'auto'`).
 
-`src`
-
-`string`
-
-`''`
-
-`streamType`
+`source`
 
-`StreamType`
+`HlsSource | null`
 
-`'unknown'`
+`null`
 
 ▸
 
 Description
 
-Current stream type (`'on-demand'` / `'live'` / `'unknown'`).
-
-`targetLiveWindow`
-
-`number`
+Structured source: what to play (`src`, an optional `type`) plus how to play it (`preferPlayback`, `engine`). Assigning it derives `src`.
 
-`—`
-
-▸
+Sources are compared structurally, so reassigning an equivalent object — an inline React prop, for instance — is a no-op. Only a change to the engine options (or to the resolved content type) recreates the playback engine.
 
-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`
+`src`
 
-`VideoRenditionListLike | undefined`
+`string`
 
-`—`
+`''`
 
 ▸
 
 Description
 
-Read-only. Selectable quality levels, populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
+Media source URL. Assigning it replaces the identity half of `source` and leaves `type` and the engine options intact, so changing the URL never disturbs engine configuration.
 
-`videoTracks`
+`streamType`
 
-`VideoTrackListLike | undefined`
+`StreamType`
 
-`—`
+`'unknown'`
 
 ▸
 
 Description
 
-Read-only. Populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
+Current stream type (`'on-demand'` / `'live'` / `'unknown'`).
 
-### Attributes
+### Ref
 
-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`
+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 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.
+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/i18n-provider.md

@@ -0,0 +1,25 @@
+# I18nProvider
+
+React provider that resolves locale and supplies a typed translator to descendants
+
+`I18nProvider` resolves the active locale, lazy-loads built-in packs, merges registry and provider layers, and exposes a translator through context. Wrap it around a player or custom controls that should translate.
+
+Wrap custom controls or force a locale explicitly:
+
+tsx
+
+```
+import { I18nProvider } from '@videojs/react/i18n';
+
+<I18nProvider locale="de" translations={{ buttons: { play: 'Abspielen' } }}>
+  <MyControls />
+</I18nProvider>
+```
+
+Omit `locale` to inherit the nearest `lang` attribute (via `langRootRef` or `<html lang>`). English is the fallback when no non-English locale is active or no translation layer supplies a string. See [Internationalization](../concepts/i18n.md) for merge priority, browser translation fallback, and SSR guidance.
+
+## API Reference
+
+### Return Value
+
+`unknown`