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

package/docs/reference/get-i18n-translations.md

@@ -0,0 +1,58 @@
+# getI18nTranslations
+
+Read the merged translation map for a locale using BCP 47 parent-chain fallback
+
+`getI18nTranslations` walks the BCP 47 lookup chain (`es-MX` → `es` → `en`) and merges registry layers into one map. Providers combine this map with lazy-loaded built-in packs and provider overrides. Call it directly when building custom UI outside built-in controls.
+
+See [Internationalization](../concepts/i18n.md) for merge order and fallback rules.
+
+ts
+
+```
+import { createTranslator, getI18nTranslations } from '@videojs/react/i18n';
+
+const t = createTranslator(getI18nTranslations('pt-BR'), 'pt-BR');
+t('buttons.play', { default: 'Play' });
+```
+
+## API Reference
+
+### Parameters
+
+Parameter
+
+Type
+
+Default
+
+Details
+
+`locale*`
+
+`string & object | 'ar' | 'az' | 'bs' ...`
+
+`—`
+
+▸
+
+Description
+
+BCP 47 tag to resolve (e.g. `es-MX`, `zh-Hant-HK`).
+
+Type
+
+`string & object | 'ar' | 'az' | 'bs' | 'bg' | 'bn' | 'ca' | 'cs' | 'cy' | 'da' | 'de' | 'el' | 'es' | 'et' | 'eu' | 'fa' | 'fi' | 'fr' | 'gd' | 'gl' | 'he' | 'hi' | 'hr' | 'hu' | 'it' | 'ja' | 'ko' | 'lv' | 'mr' | 'nb' | 'nl' | 'nn' | 'ne' | 'oc' | 'pl' | 'pt-BR' | 'pt-PT' | 'ro' | 'ru' | 'sk' | 'sl' | 'sr' | 'sv' | 'te' | 'th' | 'tr' | 'uk' | 'vi' | 'zh-CN' | 'zh-TW'`
+
+### Return Value
+
+Type
+
+Details
+
+`object & Record<string, string | unde...`
+
+▸
+
+Type
+
+`object & Record<string, string | undefined>`

package/docs/reference/google-cast.md

@@ -0,0 +1,69 @@
+# GoogleCast
+
+Options for the Google Cast component that configures the receiver and load request
+
+Adds Google Cast support to the player’s media. It renders nothing — place it inside the player as a sibling of the media element, and pair it with a [CastButton](./cast-button.md). See [Google Cast](../concepts/cast.md) for how casting works.
+
+## Anatomy
+
+tsx
+
+```
+import { GoogleCast } from '@videojs/react/media/google-cast';
+
+<GoogleCast />
+```
+
+## Options
+
+Prop
+
+Type
+
+Description
+
+`receiver`
+
+`string`
+
+Cast receiver application ID. Defaults to Google’s Default Media Receiver (`CC1AD845`)
+
+`src`
+
+`string`
+
+Source URL loaded on the receiver. Defaults to the source the browser is playing
+
+`contentType`
+
+`string`
+
+MIME type of the Cast source. When unset, the receiver infers it from the URL
+
+`streamType`
+
+`'on-demand' | 'live'`
+
+Stream type reported to the receiver. Falls back to the player’s stream type
+
+`customData`
+
+`object`
+
+Custom data sent to the receiver with each load request
+
+When the Cast `src` is an HLS playlist, Video.js detects the segment format and sets the receiver’s `hlsSegmentFormat` and `hlsVideoSegmentFormat` load-request fields. The Default Media Receiver plays HLS natively, so no extra receiver setup is needed.
+
+## See also
+
+[
+
+Google Cast
+
+How casting works
+
+](../concepts/cast.md)
+
+[CastButton component reference](./cast-button.md)
+
+[Remote Playback feature reference](./feature-remote-playback.md)

package/docs/reference/has-registered-locale.md

@@ -0,0 +1,47 @@
+# hasRegisteredLocale
+
+Check whether an exact locale tag exists in the global i18n registry
+
+`hasRegisteredLocale` returns whether a normalized locale tag has an explicit registry layer from [`registerI18n`](./register-i18n.md). It does **not** indicate whether a lazy built-in pack exists. Only registry entries count.
+
+ts
+
+```
+import { hasRegisteredLocale, registerI18n } from '@videojs/react/i18n';
+
+hasRegisteredLocale('fr'); // false until registered
+registerI18n('fr', { buttons: { play: 'Lecture' } });
+hasRegisteredLocale('fr'); // true
+```
+
+## API Reference
+
+### Parameters
+
+Parameter
+
+Type
+
+Default
+
+Details
+
+`locale*`
+
+`string & object | 'ar' | 'az' | 'bs' ...`
+
+`—`
+
+▸
+
+Description
+
+BCP 47 tag to test.
+
+Type
+
+`string & object | 'ar' | 'az' | 'bs' | 'bg' | 'bn' | 'ca' | 'cs' | 'cy' | 'da' | 'de' | 'el' | 'es' | 'et' | 'eu' | 'fa' | 'fi' | 'fr' | 'gd' | 'gl' | 'he' | 'hi' | 'hr' | 'hu' | 'it' | 'ja' | 'ko' | 'lv' | 'mr' | 'nb' | 'nl' | 'nn' | 'ne' | 'oc' | 'pl' | 'pt-BR' | 'pt-PT' | 'ro' | 'ru' | 'sk' | 'sl' | 'sr' | 'sv' | 'te' | 'th' | 'tr' | 'uk' | 'vi' | 'zh-CN' | 'zh-TW'`
+
+### Return Value
+
+`boolean`

package/docs/reference/hlsjs-video.md

@@ -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,30 +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`
@@ -83,44 +52,6 @@ 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`
@@ -151,124 +82,10 @@ 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).
+### Ref
 
-`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`
+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`

package/docs/reference/menu.md

@@ -48,11 +48,11 @@ tsx
 
 ## Behavior
 
-Menus open from a trigger and close when you select an item, click outside, move focus away, or press Escape. Root menus are positioned against their trigger with `side` and `align`.
+Menus open from a trigger and close when you select an item, click outside, move focus away, or press Escape. Root menus use `side` and `align` as their preferred placement. When the preferred side overflows the positioning boundary, the menu uses the opposite side if it has more space.
 
 Create a submenu by putting another menu inside the root menu’s content. Its trigger stays in the root list, and its content becomes the next view. In HTML, give the submenu a matching `id` and point the trigger at it with `commandfor`. Wrap the root list in `Menu.View` or `<media-menu-view>` when the root list and submenus share one animated viewport.
 
-Set `type="playback-rate"`, `type="quality"`, `type="audio-track"`, or `type="captions"` on a submenu trigger when it represents a media setting. `Menu.ItemValue` and `<media-menu-item-value>` read that setting context and display the current value, such as `1.5x`, `Auto`, `English`, or `Off`. See [QualityRadioGroup](./quality-radio-group.md) and [AudioTrackRadioGroup](./audio-track-radio-group.md) for the generated option groups.
+Set `type="playback-rate"`, `type="quality"`, `type="audio-track"`, or `type="captions"` on a submenu trigger when it represents a media setting. `Menu.ItemValue` and `<media-menu-item-value>` read that setting context and display the current value, such as `1.5x`, `Auto`, `English`, or `Off`. See [PlaybackRateRadioGroup](./playback-rate-radio-group.md), [QualityRadioGroup](./quality-radio-group.md), [AudioTrackRadioGroup](./audio-track-radio-group.md), and [CaptionsRadioGroup](./captions-radio-group.md) for the generated option groups.
 
 ## Styling
 
@@ -60,6 +60,8 @@ Use data attributes to style open state, highlighted items, selected radio items
 
 `data-highlighted` is added to the current menu item. The highlighted item is the item that keyboard selection will act on. It changes when the menu opens, when the pointer moves over another item, when the user presses arrow keys, or when type-ahead search finds a match.
 
+On root menu content, `data-side` reflects the rendered side and can differ from the preferred `side` prop after collision handling. Submenus do not have `data-side`.
+
 css
 
 ```
@@ -114,7 +116,7 @@ import { videoFeatures } from '@videojs/react/video';
 import type { ReactNode } from 'react';
 
 const Player = createPlayer({ features: videoFeatures });
-const src = 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4.m3u8';
+const src = 'https://stream.mux.com/s41JYeqIpBMBzE4OzxDyGR2yrp2hD1CQ6gJN9SlVGDQ.m3u8';
 
 function SettingsMenu(): ReactNode {
   const playbackRate = usePlaybackRateOptions();
@@ -619,7 +621,7 @@ Controlled open state.
 
 Description
 
-Which side of the trigger the menu appears on. Root menus only.
+Preferred side of the trigger for the menu. Root menus only.
 
 #### State
 
@@ -645,6 +647,10 @@ Details
 
 ▸
 
+Description
+
+Preferred side of the trigger for the menu. Root menus only.
+
 Type
 
 `'top' | 'bottom' | 'left' | 'right' | undefined`
@@ -707,7 +713,7 @@ Present when the menu is open.
 
 Description
 
-Popover positioning side. Absent on submenus.
+Rendered positioning side after collision handling. Absent on submenus.
 
 Type
 
@@ -787,7 +793,7 @@ Details
 
 `label`
 
-`string`
+`string | Text`
 
 `—`
 
@@ -849,6 +855,30 @@ Description
 
 Called when the checked state should change.
 
+#### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-item`
+
+▸
+
+Description
+
+Present on all navigable item types: Item, RadioItem, CheckboxItem, and the Trigger when acting as a submenu trigger inside a parent menu. Use `[data-item]` as a shared selector to target all item types at once.
+
+`data-highlighted`
+
+▸
+
+Description
+
+Present when the item has keyboard or pointer focus (via roving tabindex).
+
 ### 
 
 Content
@@ -879,7 +909,7 @@ Present when the menu is open.
 
 Description
 
-Popover positioning side. Absent on submenus.
+Rendered positioning side after collision handling. Absent on submenus.
 
 Type
 
@@ -967,6 +997,30 @@ Description
 
 Setting kind for submenu triggers (`playback-rate`, `quality`, `audio-track`, or `captions`).
 
+#### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-item`
+
+▸
+
+Description
+
+Present on all navigable item types: Item, RadioItem, CheckboxItem, and the Trigger when acting as a submenu trigger inside a parent menu. Use `[data-item]` as a shared selector to target all item types at once.
+
+`data-highlighted`
+
+▸
+
+Description
+
+Present when the item has keyboard or pointer focus (via roving tabindex).
+
 ### 
 
 ItemIndicator
@@ -1037,7 +1091,7 @@ Present when the menu is open.
 
 Description
 
-Popover positioning side. Absent on submenus.
+Rendered positioning side after collision handling. Absent on submenus.
 
 Type
 
@@ -1141,6 +1195,30 @@ Description
 
 The value this item represents.
 
+#### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-item`
+
+▸
+
+Description
+
+Present on all navigable item types: Item, RadioItem, CheckboxItem, and the Trigger when acting as a submenu trigger inside a parent menu. Use `[data-item]` as a shared selector to target all item types at once.
+
+`data-highlighted`
+
+▸
+
+Description
+
+Present when the item has keyboard or pointer focus (via roving tabindex).
+
 ### 
 
 Separator
@@ -1187,6 +1265,30 @@ Description
 
 Setting kind for submenu triggers (`playback-rate`, `quality`, `audio-track`, or `captions`).
 
+#### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-item`
+
+▸
+
+Description
+
+Present on all navigable item types: Item, RadioItem, CheckboxItem, and the Trigger when acting as a submenu trigger inside a parent menu. Use `[data-item]` as a shared selector to target all item types at once.
+
+`data-highlighted`
+
+▸
+
+Description
+
+Present when the item has keyboard or pointer focus (via roving tabindex).
+
 ### 
 
 View

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