@videojs/react 10.0.0-beta.30 → 10.0.0-beta.32

package/docs/reference/audio-track-radio-group.md

@@ -4,6 +4,14 @@ A menu radio group for selecting an audio track
 
 Creates radio items from the player audio track state and selects the enabled track.
 
+## Import
+
+tsx
+
+```
+import { AudioTrackRadioGroup } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx
@@ -90,19 +98,21 @@ function AudioMenu(): ReactNode {
       <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
         Audio
       </Menu.Trigger>
-      <Menu.Content className="menu">
-        <AudioTrackRadioGroup
-          className="menu-group"
-          renderItem={(props, item) => (
-            <Menu.RadioItem {...props} className="menu-item">
-              {item.label}
-              <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
-                ✓
-              </Menu.ItemIndicator>
-            </Menu.RadioItem>
-          )}
-        />
-      </Menu.Content>
+      <Menu.Popup className="menu">
+        <Menu.Content>
+          <AudioTrackRadioGroup
+            className="menu-group"
+            renderItem={(props, item) => (
+              <Menu.RadioItem {...props} className="menu-item">
+                {item.label}
+                <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
+                  ✓
+                </Menu.ItemIndicator>
+              </Menu.RadioItem>
+            )}
+          />
+        </Menu.Content>
+      </Menu.Popup>
     </Menu.Root>
   );
 }
@@ -224,7 +234,7 @@ Whether audio track selection is disabled.
 
 `formatTrack`
 
-`Text) | function`
+`string) | function`
 
 `formatTrackLabel`
 
@@ -236,11 +246,11 @@ Custom formatter for visible track labels.
 
 Type
 
-`((track: MediaAudioTrack) => string | Text)`
+`((track: MediaAudioTrack) => Text | string)`
 
 `label`
 
-`Text | string | Text) | function`
+`object`
 
 `''`
 
@@ -252,7 +262,7 @@ Custom label for the options group.
 
 Type
 
-`Text | string | ((state: AudioTrackRadioGroupState) => string | Text)`
+`{ key: string; text: string } | string | ((state: AudioTrackRadioGroupState) => Text | string)`
 
 ### State
 
@@ -264,6 +274,10 @@ Type
 
 Details
 
+`label`
+
+`{ key: string; text: string } | string`
+
 `value`
 
 `string`
@@ -276,7 +290,7 @@ Current radio-group value.
 
 `options`
 
-`AudioTrackRadioGroupOption[]`
+`readonly Option[]`
 
 ▸
 
@@ -314,10 +328,6 @@ Description
 
 Whether the media exposes a meaningful selection.
 
-`label`
-
-`Text | string`
-
 ### Data attributes
 
 Attribute

package/docs/reference/audio.md

@@ -0,0 +1,78 @@
+# Audio
+
+Native audio playback that can provide media to a Video.js player
+
+## Import
+
+Import `Audio` from the audio preset:
+
+tsx
+
+```
+import { Audio } from '@videojs/react/audio';
+```
+
+## Anatomy
+
+tsx
+
+```
+<Audio>
+  <source />
+</Audio>
+```
+
+## Use with a player
+
+Place `Audio` anywhere inside an `AudioPlayer`, or inside another Video.js `Player` configured for audio. It becomes that player’s media provider automatically. Outside a player, `Audio` behaves as a standalone native `<audio>`.
+
+## Native behavior
+
+Video.js does not replace the native audio API. Use `src` for one URL or add child [`<source>` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source) when the browser should choose between candidates. See [Media sources](../concepts/media-sources.md) when you need an HLS, Mux, Spotify, or other playback adapter.
+
+`Audio` forwards native attributes, event handlers, and children to the underlying `<audio>`. Its `ref` resolves to the `HTMLAudioElement`.
+
+See MDN for the complete [`<audio>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio), [`HTMLAudioElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement), and shared [`HTMLMediaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) APIs.
+
+## Examples
+
+### Basic Usage
+
+This native audio element uses a child source and browser controls while providing media to the surrounding Video.js player. The shared demo MP4 supplies its audio track, so the `<source>` does not claim an audio-only MIME type.
+
+App.tsx
+
+App.css
+
+```
+import { Container } from '@videojs/react';
+import { Audio, AudioPlayer } from '@videojs/react/audio';
+
+import './BasicUsage.css';
+
+export default function BasicUsage() {
+  return (
+    <AudioPlayer>
+      <Container className="react-audio-basic">
+        <Audio className="react-audio-basic__media" controls preload="metadata">
+          <source src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" />
+        </Audio>
+      </Container>
+    </AudioPlayer>
+  );
+}
+```
+```
+.react-audio-basic {
+  display: grid;
+  width: 100%;
+  padding: 24px;
+  background: #e5e7eb;
+  border-radius: 8px;
+  place-items: center;
+}
+
+.react-audio-basic__media {
+  width: 100%;
+}
+```

package/docs/reference/background-video.md

@@ -2,7 +2,11 @@
 
 Decorative background video element with automatic muting and looping
 
-Decorative background video. By default it’s muted, looped, and autoplaying — use the opt-out attributes below to change that. Renders a `<video>` inside a shadow DOM, positioned to fill its container.
+Decorative background video for a source the browser can play natively. By default it’s muted, looped, and autoplaying.
+
+`BackgroundVideo` renders a native `<video>`. Override the defaults with native React props such as `muted={false}`, `loop={false}`, or `autoPlay={false}`, and size the video with `className` or `style`.
+
+An HLS URL only works where the browser has native HLS playback. See [Add a background video](../how-to/add-a-background-video.md) to choose a cross-browser HLS or Mux path and set up layout, poster, and decorative semantics.
 
 ## Examples
 
@@ -17,60 +21,28 @@ import { BackgroundVideo } from '@videojs/react/media/background-video';
 
 export default function BasicUsage() {
   return (
-    <div className="container">
+    <div className="react-background-video-basic">
       <BackgroundVideo src="https://stream.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/highest.mp4" />
     </div>
   );
 }
 ```
 ```
-.container {
+.react-background-video-basic {
   position: relative;
   width: 100%;
   aspect-ratio: 16 / 9;
+  overflow: hidden;
 }
-```
-
-## API Reference
-
-### Attributes
-
-Attribute
-
-Description
-
-`src`
-
-URL of the video source.
-
-`nomuted`
-
-Opt out of muted playback. By default the video is muted.
-
-`noloop`
-
-Opt out of looped playback. By default the video loops.
 
-`noautoplay`
-
-Opt out of autoplay. By default the video autoplays.
-
-### CSS Custom Properties
-
-Variable
-
-Default
-
-Description
-
-`–media-object-fit`
-
-`inherit`
-
-Controls how the video fits its container.
-
-`–media-object-position`
+.react-background-video-basic > video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+```
 
-`50% 50%`
+## Styling
 
-Controls the position of the video within its container.
+`BackgroundVideo` is the native `<video>` element, so size and position it with regular CSS. Use `object-fit` and `object-position` to control how the video fills its box.

package/docs/reference/buffering-indicator.md

@@ -2,6 +2,14 @@
 
 Loading indicator that displays when the video player is buffering or waiting for data
 
+## Import
+
+tsx
+
+```
+import { BufferingIndicator } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx

package/docs/reference/captions-button.md

@@ -2,6 +2,14 @@
 
 Accessible captions toggle button with availability detection and state reflection
 
+## Import
+
+tsx
+
+```
+import { CaptionsButton } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx
@@ -130,7 +138,7 @@ Whether the button is disabled.
 
 `label`
 
-`Text | string | Text) | function`
+`object`
 
 `''`
 
@@ -142,7 +150,7 @@ Custom label for the button.
 
 Type
 
-`Text | string | ((state: CaptionsButtonState) => string | Text)`
+`{ key: string; text: string } | string | ((state: CaptionsButtonState) => Text | string)`
 
 `menuTrigger`
 
@@ -166,27 +174,31 @@ Type
 
 Details
 
-`availability`
+`subtitlesShowing`
 
-`'available' | 'unavailable'`
+`boolean`
 
 ▸
 
 Description
 
-Whether caption/subtitle tracks are present.
+Whether captions/subtitles are currently enabled.
 
-`disabled`
+`label`
 
-`boolean`
+`{ key: string; text: string } | string`
+
+`availability`
+
+`'available' | 'unavailable'`
 
 ▸
 
 Description
 
-Non-interactive but still focusable (mirrors `aria-disabled`).
+Whether caption/subtitle tracks are present.
 
-`hidden`
+`disabled`
 
 `boolean`
 
@@ -194,9 +206,9 @@ Non-interactive but still focusable (mirrors `aria-disabled`).
 
 Description
 
-Whether the button is hidden because no caption tracks are present.
+Non-interactive but still focusable (mirrors `aria-disabled`).
 
-`subtitlesShowing`
+`hidden`
 
 `boolean`
 
@@ -204,11 +216,7 @@ Whether the button is hidden because no caption tracks are present.
 
 Description
 
-Whether captions/subtitles are currently enabled.
-
-`label`
-
-`Text | string`
+Whether the button is hidden because no caption tracks are present.
 
 ### Data attributes
 

package/docs/reference/captions-radio-group.md

@@ -4,6 +4,14 @@ A menu radio group for selecting caption and subtitle tracks
 
 Creates radio items from the player text track state and selects the showing caption or subtitle track.
 
+## Import
+
+tsx
+
+```
+import { CaptionsRadioGroup } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx
@@ -88,19 +96,21 @@ function CaptionsMenu(): ReactNode {
       <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
         Captions
       </Menu.Trigger>
-      <Menu.Content className="menu">
-        <CaptionsRadioGroup
-          className="menu-group"
-          renderItem={(props, item) => (
-            <Menu.RadioItem {...props} className="menu-item">
-              {item.label}
-              <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
-                ✓
-              </Menu.ItemIndicator>
-            </Menu.RadioItem>
-          )}
-        />
-      </Menu.Content>
+      <Menu.Popup className="menu">
+        <Menu.Content>
+          <CaptionsRadioGroup
+            className="menu-group"
+            renderItem={(props, item) => (
+              <Menu.RadioItem {...props} className="menu-item">
+                {item.label}
+                <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
+                  ✓
+                </Menu.ItemIndicator>
+              </Menu.RadioItem>
+            )}
+          />
+        </Menu.Content>
+      </Menu.Popup>
     </Menu.Root>
   );
 }
@@ -225,7 +235,7 @@ Whether track selection is disabled.
 
 `formatTrack`
 
-`Text) | function`
+`string) | function`
 
 `formatTrackLabel`
 
@@ -237,11 +247,11 @@ Custom formatter for visible track labels.
 
 Type
 
-`((track: MediaTextTrack) => string | Text)`
+`((track: MediaTextTrack) => Text | string)`
 
 `label`
 
-`Text | string | Text) | function`
+`object`
 
 `''`
 
@@ -253,7 +263,7 @@ Custom label for the options group.
 
 Type
 
-`Text | string | ((state: CaptionsRadioGroupState) => string | Text)`
+`{ key: string; text: string } | string | ((state: CaptionsRadioGroupState) => Text | string)`
 
 ### State
 
@@ -275,6 +285,10 @@ Description
 
 Whether captions/subtitles are currently enabled.
 
+`label`
+
+`{ key: string; text: string } | string`
+
 `value`
 
 `string`
@@ -287,7 +301,7 @@ Current radio-group value.
 
 `options`
 
-`CaptionsRadioGroupOption[]`
+`readonly Option[]`
 
 ▸
 
@@ -325,10 +339,6 @@ Description
 
 Whether the media exposes a meaningful selection.
 
-`label`
-
-`Text | string`
-
 ### Data attributes
 
 Attribute

package/docs/reference/cast-button.md

@@ -2,6 +2,14 @@
 
 Accessible Cast toggle button with state reflection and keyboard support
 
+## Import
+
+tsx
+
+```
+import { CastButton } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx
@@ -20,7 +28,7 @@ The button derives its presentation from `availability`:
 *   **`"unavailable"`** — the button remains visible and focusable with `aria-disabled="true"` and `data-disabled`, but does not open the picker. This lets a tooltip explain that no Cast device is reachable.
 *   **`"available"`** — the button is fully interactive unless the `disabled` prop is set.
 
-Cast sessions come from the [Google Cast](../concepts/cast.md) component. Add it to the player next to your media element; without it the button drives the browser’s native Remote Playback API instead, which offers no receiver or load-request configuration.
+Configurable Cast sessions come from the [GoogleCast](./google-cast.md) component. Add it to the player next to your media element; without it the button drives the browser’s native Remote Playback API instead, which offers no receiver or load-request configuration. See [Cast to AirPlay and Chromecast](../how-to/cast-to-airplay-and-chromecast.md) for the complete setup.
 
 ## Styling
 
@@ -77,6 +85,7 @@ App.css
 
 ```
 import { CastButton, Container, createPlayer } from '@videojs/react';
+import { GoogleCast } from '@videojs/react/media/google-cast';
 import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
 import { videoFeatures } from '@videojs/react/video';
 
@@ -87,6 +96,7 @@ export default function BasicUsage() {
     <Player>
       <Container className="media-container">
         <HlsJsVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" autoPlay muted playsInline loop />
+        <GoogleCast />
         <CastButton
           className="media-cast-button"
           render={(props, state) => (
@@ -154,7 +164,7 @@ Whether the button is disabled.
 
 `label`
 
-`Text | string | Text) | function`
+`object`
 
 `''`
 
@@ -166,7 +176,7 @@ Custom label for the button.
 
 Type
 
-`Text | string | ((state: CastButtonState) => string | Text)`
+`{ key: string; text: string } | string | ((state: CastButtonState) => Text | string)`
 
 ### State
 
@@ -178,6 +188,10 @@ Type
 
 Details
 
+`label`
+
+`{ key: string; text: string } | string`
+
 `connection`
 
 `'disconnected' | 'connecting' | 'conn...`
@@ -194,7 +208,7 @@ Type
 
 `availability`
 
-`'available' | 'unavailable' | 'unsupp...`
+`MediaFeatureAvailability`
 
 ▸
 
@@ -202,10 +216,6 @@ Description
 
 Whether casting is `available` (a device is reachable), `unavailable` (no device), or `unsupported`.
 
-Type
-
-`'available' | 'unavailable' | 'unsupported'`
-
 `disabled`
 
 `boolean`
@@ -226,10 +236,6 @@ Description
 
 Whether the button is hidden because the feature is unsupported.
 
-`label`
-
-`Text | string`
-
 ### Data attributes
 
 Attribute
@@ -246,7 +252,7 @@ Details
 
 Description
 
-Current remote playback connection state. @see [https://developer.mozilla.org/en-US/docs/Web/API/RemotePlayback/state](https://developer.mozilla.org/en-US/docs/Web/API/RemotePlayback/state)
+Current remote playback connection state.
 
 Type
 
@@ -254,17 +260,13 @@ Type
 
 `data-availability`
 
-`'available' | 'unavailable' | 'unsupp...`
+`MediaFeatureAvailability`
 
 ▸
 
 Description
 
-Whether remote playback can be requested on this platform. @see [https://developer.mozilla.org/en-US/docs/Web/API/RemotePlayback](https://developer.mozilla.org/en-US/docs/Web/API/RemotePlayback)
-
-Type
-
-`'available' | 'unavailable' | 'unsupported'`
+Whether remote playback can be requested on this platform.
 
 `data-disabled`