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

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

@@ -16,7 +16,7 @@ player.tsx
 import { createPlayer, features } from '@videojs/react';
 import { videoFeatures } from '@videojs/react/video';
 
-export const Player = createPlayer({
+export const { Player } = createPlayer({
   features: [...videoFeatures, features.orientationLock],
 });
 ```
@@ -27,7 +27,7 @@ portrait-player.tsx
 import { createPlayer, features } from '@videojs/react';
 import { videoFeatures } from '@videojs/react/video';
 
-export const Player = createPlayer({
+export const { Player } = createPlayer({
   features: [...videoFeatures, features.orientationLock({ type: 'portrait' })],
 });
 ```

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

@@ -4,6 +4,8 @@ Subtitles, captions, and chapter track state for the player store
 
 Manages subtitles, captions, chapters, and thumbnail tracks.
 
+A default `kind="chapters"` track can also divide the [time slider](./time-slider.md) into chapter ranges and label the chapter at the current interaction position.
+
 ## API Reference
 
 ### State
@@ -80,7 +82,7 @@ Details
 
 Description
 
-Toggle captions/subtitles visibility. Returns the new enabled value.
+Toggle captions/subtitles visibility. Showing restores the track that was last showing, or the first caption/subtitle track when there is none. Returns the new enabled value.
 
 `selectSubtitlesTrack`
 
@@ -94,15 +96,15 @@ 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/feature-volume.md

@@ -44,6 +44,16 @@ Description
 
 Whether volume can be programmatically set on this platform.
 
+`mutedAvailability`
+
+`'available' | 'unavailable' | 'unsupported'`
+
+▸
+
+Description
+
+Whether the media can be muted. Separate from `volumeAvailability` because the two come apart: an embed can take a mute command while offering no way to set a level, and iOS Safari refuses a volume write on media that mutes perfectly well.
+
 ### Actions
 
 Action

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,35 +48,27 @@ Renders a `<button>` with an automatic `aria-label`: “Enter fullscreen” or
 
 ### Basic Usage
 
-Fullscreen
-
 App.tsx
 
 App.css
 
 ```
-import { createPlayer, FullscreenButton } from '@videojs/react';
+import { Container, createPlayer, FullscreenButton } from '@videojs/react';
 import { Video, videoFeatures } from '@videojs/react/video';
 
-const Player = createPlayer({ features: videoFeatures });
+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
-        />
+    <Player>
+      <Container className="media-container">
+        <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>}
         />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -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' | 'id' | 'it' | 'ja' | 'ko' | 'lt' | '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' | 'id' | 'it' | 'ja' | 'ko' | 'lt' | '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/hls-audio.md

@@ -0,0 +1,41 @@
+# HlsAudio
+
+Audio-only HLS element that plays the audio rendition of an HLS stream
+
+Audio-only HLS element that plays just the audio rendition of an HLS stream — even when the source is a mixed audio/video manifest. Useful for audio podcast players, background audio, and bandwidth-constrained contexts where downloading video data would be wasted. For full audio/video HLS playback, see [HlsVideo](/docs/framework/html/reference/hls-video/).
+
+## Examples
+
+### Basic Usage
+
+App.tsx
+
+App.css
+
+```
+import { HlsAudio } from '@videojs/react/media/hls-audio';
+
+export default function BasicUsage() {
+  return <HlsAudio className="hls-audio" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" controls />;
+}
+```
+```
+.hls-audio {
+  width: 100%;
+  height: 54px;
+}
+```
+
+## API Reference
+
+### Props
+
+Accepts the standard React props for a native `<audio>`.
+
+### Ref
+
+Forwards its ref to the rendered `<audio>`. The ref is an [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) 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/hls-video.md

@@ -0,0 +1,41 @@
+# HlsVideo
+
+Lightweight HLS video element with minimal bundle size
+
+Lightweight HLS video element optimized for minimal bundle size. For full hls.js feature support, use [HlsJsVideo](/docs/framework/html/reference/hlsjs-video/) instead.
+
+## Examples
+
+### Basic Usage
+
+App.tsx
+
+App.css
+
+```
+import { HlsVideo } from '@videojs/react/media/hls-video';
+
+export default function BasicUsage() {
+  return <HlsVideo className="hls-video" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" autoPlay muted playsInline loop />;
+}
+```
+```
+.hls-video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+
+## API Reference
+
+### Props
+
+Accepts the standard React props for a native `<video>`.
+
+### 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`.