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

package/docs/reference/create-i18n.md

@@ -0,0 +1,84 @@
+# createI18n
+
+Factory that creates framework i18n helpers with custom loading options
+
+`createI18n` returns an `I18nProvider`, `useTranslator`, and `useLocale` wired to the shared React i18n context used by the stock skins and controls. Use it when you need options such as a custom locale loader. Most apps use the default exports from `@videojs/react/i18n`.
+
+tsx
+
+```
+import { createI18n } from '@videojs/react/i18n';
+
+const loaders = {
+  ja: () => import('@videojs/react/i18n/locales/ja'),
+};
+
+const { I18nProvider, useTranslator } = createI18n({
+  loader: async (tag) => {
+    const load = loaders[tag as keyof typeof loaders];
+    return load ? (await load()).default : undefined;
+  },
+});
+
+function App() {
+  return (
+    <I18nProvider locale="ja">
+      <Controls />
+    </I18nProvider>
+  );
+}
+```
+
+## API Reference
+
+### Parameters
+
+Parameter
+
+Type
+
+Default
+
+Details
+
+`options`
+
+`CreateI18nOptions`
+
+`—`
+
+▸
+
+Description
+
+Optional hooks such as custom built-in locale loading.
+
+### Return Value
+
+Property
+
+Type
+
+Details
+
+`I18nContext`
+
+`Context<I18nContextValue | null>`
+
+`I18nProvider`
+
+`function`
+
+▸
+
+Type
+
+`((props: I18nProviderProps) => ReactNode)`
+
+`useTranslator`
+
+`useTranslator`
+
+`useLocale`
+
+`useLocale`

package/docs/reference/create-player.md

@@ -51,12 +51,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
-        />
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline />
         <Controls />
       </Player.Container>
     </Player.Provider>

package/docs/reference/create-translator.md

@@ -0,0 +1,63 @@
+# createTranslator
+
+Build a typed translator from a resolved translation map
+
+`createTranslator` wraps the flat map returned by `getI18nTranslations` and returns a typed translator. Providers call this internally after merging registry, lazy-loaded built-in packs, browser-translated fallback copy, and provider layers. Use it directly for custom UI outside built-in controls.
+
+ts
+
+```
+import { createTranslator, getI18nTranslations } from '@videojs/react/i18n';
+
+const t = createTranslator(getI18nTranslations('fr'), 'fr');
+t('buttons.play', { default: 'Play' });
+t('seek.forward', { seconds: 5, default: 'Seek forward {seconds} seconds' });
+```
+
+## API Reference
+
+### Parameters
+
+Parameter
+
+Type
+
+Default
+
+Details
+
+`translations*`
+
+`object & Record<string, string | unde...`
+
+`—`
+
+▸
+
+Description
+
+Merged translation map for the active locale.
+
+Type
+
+`object & Record<string, string | undefined>`
+
+`locale*`
+
+`string & object | 'ar' | 'az' | 'bs' ...`
+
+`—`
+
+▸
+
+Description
+
+BCP 47 tag associated with the map (reserved for future locale-aware behavior).
+
+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
+
+`Translator`

package/docs/reference/dash-video.md

@@ -0,0 +1,55 @@
+# DashVideo
+
+DASH video element powered by dash.js for adaptive bitrate streaming
+
+DASH video element powered by [dash.js](https://github.com/Dash-Industry-Forum/dash.js/) for MPEG-DASH adaptive bitrate streaming.
+
+## Examples
+
+### Basic Usage
+
+App.tsx
+
+App.css
+
+```
+import { DashVideo } from '@videojs/react/media/dash-video';
+
+export default function BasicUsage() {
+  return <DashVideo className="dash-video" src="https://dash.akamaized.net/akamai/streamroot/050714/Spring_4Ktest.mpd" autoPlay muted playsInline loop />;
+}
+```
+```
+.dash-video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+
+## API Reference
+
+### Props
+
+Accepts the standard React props for a native `<video>`, plus these Video.js-specific props:
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`src`
+
+`string`
+
+`''`
+
+### Ref
+
+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 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/feature-audio-track.md

@@ -0,0 +1,60 @@
+# Audio track
+
+Audio track state and actions for the player store
+
+Tracks available audio tracks and selects the enabled track.
+
+## API Reference
+
+### State
+
+Property
+
+Type
+
+Details
+
+`audioTrackList`
+
+`MediaAudioTrack[]`
+
+▸
+
+Description
+
+Audio tracks available for manual track selection.
+
+### Actions
+
+Action
+
+Type
+
+Details
+
+`selectAudioTrack`
+
+`(value: string) => void`
+
+▸
+
+Description
+
+Select an audio track by menu value.
+
+### Selector
+
+Pass `selectAudioTrack` to [`usePlayer`](./use-player.md) to subscribe to audio track state. Returns `undefined` if the audio track feature is not configured.
+
+AudioTrackInfo.tsx
+
+```
+import { selectAudioTrack, usePlayer } from '@videojs/react';
+
+function AudioTrackInfo() {
+  const audioTrack = usePlayer(selectAudioTrack);
+  if (!audioTrack) return null;
+
+  return <span>{audioTrack.audioTrackList.length} audio tracks</span>;
+}
+```

package/docs/reference/feature-error.md

@@ -16,7 +16,7 @@ Details
 
 `error`
 
-`null | MediaError`
+`null | ErrorLike`
 
 ▸
 

package/docs/reference/feature-fullscreen.md

@@ -83,12 +83,29 @@ import { selectFullscreen, usePlayer } from '@videojs/react';
 
 function FullscreenButton() {
   const fs = usePlayer(selectFullscreen);
-  if (!fs || fs.availability !== 'available') return null;
+  if (!fs || fs.fullscreenAvailability !== 'available') return null;
 
   return (
-    <button onClick={fs.toggle}>
-      {fs.active ? 'Exit fullscreen' : 'Fullscreen'}
+    <button onClick={fs.toggleFullscreen}>
+      {fs.fullscreen ? 'Exit fullscreen' : 'Fullscreen'}
     </button>
   );
 }
+```
+
+### Screen orientation
+
+Add [`features.orientationLock`](./feature-orientation-lock.md) to lock screen orientation while fullscreen is active. Unsupported browsers and rejected lock requests are ignored, so iOS Safari continues to use its normal fullscreen behavior.
+
+By default, the feature locks to `landscape`. Pass a Screen Orientation API type to customize it:
+
+ts
+
+```
+import { createPlayer, features } from '@videojs/react';
+import { videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({
+  features: [...videoFeatures, features.orientationLock({ type: 'portrait' })],
+});
 ```

package/docs/reference/feature-orientation-lock.md

@@ -0,0 +1,35 @@
+# Orientation lock
+
+Screen orientation locking while fullscreen is active
+
+Locks screen orientation while fullscreen is active. Add it explicitly to a feature list; it is not included in the default video presets.
+
+## API Reference
+
+### Usage
+
+By default, the feature locks to `landscape`. Pass a Screen Orientation API type to customize it.
+
+player.tsx
+
+```
+import { createPlayer, features } from '@videojs/react';
+import { videoFeatures } from '@videojs/react/video';
+
+export const Player = createPlayer({
+  features: [...videoFeatures, features.orientationLock],
+});
+```
+
+portrait-player.tsx
+
+```
+import { createPlayer, features } from '@videojs/react';
+import { videoFeatures } from '@videojs/react/video';
+
+export const Player = createPlayer({
+  features: [...videoFeatures, features.orientationLock({ type: 'portrait' })],
+});
+```
+
+Unsupported browsers and rejected lock requests are ignored.

package/docs/reference/feature-quality.md

@@ -0,0 +1,70 @@
+# Quality
+
+Video rendition state and actions for the player store
+
+Tracks video renditions and selects a manual rendition or automatic adaptive bitrate.
+
+## API Reference
+
+### State
+
+Property
+
+Type
+
+Details
+
+`videoRenditionList`
+
+`MediaVideoRendition[]`
+
+▸
+
+Description
+
+Video renditions available for manual quality selection.
+
+`activeVideoRendition`
+
+`null | MediaVideoRendition`
+
+▸
+
+Description
+
+Video rendition currently playing, including when automatic ABR is selected.
+
+### Actions
+
+Action
+
+Type
+
+Details
+
+`selectVideoRendition`
+
+`(value: string) => void`
+
+▸
+
+Description
+
+Select a video rendition by menu value, or automatic ABR with `"auto"`.
+
+### Selector
+
+Pass `selectQuality` to [`usePlayer`](./use-player.md) to subscribe to quality state. Returns `undefined` if the quality feature is not configured.
+
+QualityInfo.tsx
+
+```
+import { selectQuality, usePlayer } from '@videojs/react';
+
+function QualityInfo() {
+  const quality = usePlayer(selectQuality);
+  if (!quality) return null;
+
+  return <span>{quality.videoRenditionList.length} renditions</span>;
+}
+```

package/docs/reference/feature-remote-playback.md

@@ -2,7 +2,9 @@
 
 Remote playback state and actions for the player store
 
-Controls remote playback to devices like Chromecast. Exits fullscreen before initiating a remote playback session.
+Controls remote playback to devices like Chromecast (Chromium) and AirPlay (Safari). Exits fullscreen before initiating a remote playback session.
+
+[Google Cast concept guide — setup, configuration, and HLS](../concepts/cast.md)
 
 ## API Reference
 

package/docs/reference/feature-text-tracks.md

@@ -82,17 +82,27 @@ Description
 
 Toggle captions/subtitles visibility. Returns the new enabled value.
 
+`selectSubtitlesTrack`
+
+`(value: string) => void`
+
+▸
+
+Description
+
+Select a captions/subtitles track by menu value, or disable with `"off"`.
+
 ### Selector
 
-Pass `selectTextTracks` to [`usePlayer`](./use-player.md) to subscribe to text track state. Returns `undefined` if the text tracks feature is not configured.
+Pass `selectTextTrack` to [`usePlayer`](./use-player.md) to subscribe to text track state. Returns `undefined` if the text tracks feature is not configured.
 
 CaptionsButton.tsx
 
 ```
-import { selectTextTracks, usePlayer } from '@videojs/react';
+import { selectTextTrack, usePlayer } from '@videojs/react';
 
 function CaptionsButton() {
-  const tracks = usePlayer(selectTextTracks);
+  const tracks = usePlayer(selectTextTrack);
   if (!tracks) return null;
 
   return (

package/docs/reference/fullscreen-button.md

@@ -12,7 +12,10 @@ tsx
 
 ## Behavior
 
-Toggles fullscreen mode. Detects platform support through `availability` — when fullscreen is `"unsupported"`, the toggle does nothing.
+Toggles fullscreen mode. The button derives two state hooks from `availability`:
+
+*   **`disabled`** (`true` until fullscreen is available, or when the `disabled` prop is set) — sets `aria-disabled="true"` and `data-disabled`. A prop-disabled, available button stays focusable but does not activate.
+*   **`hidden`** (`true` while fullscreen is `"unavailable"` or `"unsupported"`) — applies the native HTML `hidden` attribute on the custom element; the React component returns `null`.
 
 ## Styling
 
@@ -27,18 +30,16 @@ css
 .fullscreen-button[data-fullscreen] {
   background: red;
 }
-```
-
-Consider hiding the button when unsupported:
-
-css
 
-```
-.fullscreen-button[data-availability="unsupported"] {
-  display: none;
+/* Non-interactive (disabled prop) */
+.fullscreen-button[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 ```
 
+The button remains hidden until fullscreen is available. The HTML element receives the native `hidden` attribute, and the React component returns `null`. No extra CSS is required.
+
 ## Accessibility
 
 Renders a `<button>` with an automatic `aria-label`: “Enter fullscreen” or “Exit fullscreen”. Override with the `label` prop. Keyboard activation: Enter / Space.
@@ -47,8 +48,6 @@ Renders a `<button>` with an automatic `aria-label`: “Enter fullscreen” or
 
 ### Basic Usage
 
-Fullscreen
-
 App.tsx
 
 App.css
@@ -63,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 />
         <FullscreenButton
           className="media-fullscreen-button"
           render={(props, state) => <button {...props}>{state.fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}</button>}
@@ -129,7 +122,7 @@ Whether the button is disabled.
 
 `label`
 
-`string | function`
+`Text | string | Text) | function`
 
 `''`
 
@@ -141,7 +134,7 @@ Custom label for the button.
 
 Type
 
-`string | ((state: FullscreenButtonState) => string)`
+`Text | string | ((state: FullscreenButtonState) => string | Text)`
 
 ### State
 
@@ -167,6 +160,26 @@ Type
 
 `'available' | 'unavailable' | 'unsupported'`
 
+`disabled`
+
+`boolean`
+
+▸
+
+Description
+
+Non-interactive but still focusable (mirrors `aria-disabled`).
+
+`hidden`
+
+`boolean`
+
+▸
+
+Description
+
+Whether the button is hidden until fullscreen is available.
+
 `fullscreen`
 
 `boolean`
@@ -179,7 +192,7 @@ Whether fullscreen mode is currently active.
 
 `label`
 
-`string`
+`Text | string`
 
 ### Data attributes
 
@@ -205,8 +218,24 @@ Present when fullscreen mode is active.
 
 Description
 
-Indicates fullscreen availability (`available` or `unsupported`).
+Indicates fullscreen availability (`available`, `unavailable`, `unsupported`).
 
 Type
 
-`'available' | 'unavailable' | 'unsupported'`
+`'available' | 'unavailable' | 'unsupported'`
+
+`data-disabled`
+
+▸
+
+Description
+
+Present when the button is non-interactive (mirrors `aria-disabled`).
+
+`data-hidden`
+
+▸
+
+Description
+
+Present when the button is hidden because fullscreen is not available.

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>`