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

package/docs/llms.txt

@@ -15,12 +15,16 @@ Installation, project setup, and introductory guides.
 
 Understanding-oriented pages that explain how and why things work. Read these to build a mental model of the library.
 
-- [Google Cast](./concepts/cast.md): How to add Chromecast support to your Video.js player — lazy SDK loading, session lifecycle, and configuration options
 - [Features](./concepts/features.md): The state and actions each feature adds to the player
 - [Skins](./concepts/skins.md): Packaged player designs that include both UI components and their styles.
 - [Presets](./concepts/presets.md): Pre-packaged player configurations that bundle state management, skins, and media elements for specific use cases.
 - [UI components](./concepts/ui-components.md): How Video.js UI components work — one element per component, data attributes for state, and compound composition.
 - [Accessibility](./concepts/accessibility.md): How Video.js approaches accessibility, and what you should consider if you're deeply customizing your player
+- [Media sources](./concepts/media-sources.md): Set what a media element plays and how its engine plays it with the structured source property
+- [Google Cast](./concepts/cast.md): Cast playback to Chromecast devices with the Google Cast component, and configure the receiver and load request
+- [Mux Data](./concepts/mux-data.md): Monitor playback quality and viewer experience by adding the Mux Data component to a player
+- [Security](./concepts/security.md): How to configure Content Security Policy for your video player
+- [Internationalization](./concepts/i18n.md): How Video.js chooses a language and translates built-in player text
 
 ## How to
 
@@ -28,25 +32,41 @@ Task-oriented guides with step-by-step instructions to achieve a specific outcom
 
 - [Customize skins](./how-to/customize-skins.md): Learn how to customize Video.js v10 skins by copying and modifying them
 - [Build your own UI component](./how-to/build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.
+### Internationalization
 
-## Components
+- [Translation phrases](./reference/translation-phrases.md): Semantic i18n keys, their English defaults, and the player UI that uses them
+- [Register a custom locale](./how-to/i18n-register-locale.md): Register translation packs for HTML, React, and CDN players
+- [Override translations](./how-to/i18n-override-translations.md): Patch individual i18n strings without replacing an entire locale pack
+- [Switch locale dynamically](./how-to/i18n-switch-locale.md): Change the player language at runtime in HTML and React
+- [SSR and locale](./how-to/i18n-ssr.md): Render translated player UI on the server without a flash of English
+
+## API Reference
+
+Reference for every public export, grouped by what it is: UI components, media components, player features, and utilities.
+
+### UI Components
 
 API Reference for UI components for building media player interfaces.
 
-- [Player.Provider](./reference/player-provider.md): The state boundary — creates a store and broadcasts it to all descendants.
-- [Player.Container](./reference/player-container.md): The player's interaction surface — handles layout, fullscreen, media attachment, and user activity detection.
+- [Player](./reference/player-provider.md): The state boundary — creates a store and broadcasts it to all descendants.
+- [Container](./reference/player-container.md): The player's interaction surface — handles layout, fullscreen, media attachment, and user activity detection.
+- [I18nProvider](./reference/i18n-provider.md): React provider that resolves locale and supplies a typed translator to descendants
 - [AirPlayButton](./reference/airplay-button.md): Accessible AirPlay toggle button that opens the WebKit playback target picker and reflects session state
 - [AudioTrackRadioGroup](./reference/audio-track-radio-group.md): A menu radio group for selecting an audio track
 - [BufferingIndicator](./reference/buffering-indicator.md): Loading indicator that displays when the video player is buffering or waiting for data
 - [CaptionsButton](./reference/captions-button.md): Accessible captions toggle button with availability detection and state reflection
+- [CaptionsRadioGroup](./reference/captions-radio-group.md): A menu radio group for selecting caption and subtitle tracks
 - [CastButton](./reference/cast-button.md): Accessible Cast toggle button with state reflection and keyboard support
 - [Controls](./reference/controls.md): Container component for composing and auto-hiding video player controls on user interaction
 - [FullscreenButton](./reference/fullscreen-button.md): Accessible fullscreen toggle button with keyboard support and state reflection
+- [GoogleCast](./reference/google-cast.md): Options for the Google Cast component that configures the receiver and load request
 - [Menu](./reference/menu.md): A composable menu component for settings, option selection, and actions
 - [MuteButton](./reference/mute-button.md): Accessible mute/unmute button with keyboard support and volume state reflection
+- [MuxData](./reference/mux-data.md): Options for the Mux Data component that monitors playback quality
 - [PiPButton](./reference/pip-button.md): Accessible picture-in-picture toggle button with keyboard support and state reflection
 - [PlayButton](./reference/play-button.md): Accessible play/pause button with keyboard support and customizable rendering
 - [PlaybackRateButton](./reference/playback-rate-button.md): A button that cycles through playback speed rates
+- [PlaybackRateRadioGroup](./reference/playback-rate-radio-group.md): A menu radio group for selecting playback speed
 - [Popover](./reference/popover.md): A popover component for displaying contextual content anchored to a trigger
 - [Poster](./reference/poster.md): Poster image component that displays a thumbnail until video playback starts
 - [QualityRadioGroup](./reference/quality-radio-group.md): A menu radio group for selecting video quality
@@ -58,40 +78,22 @@ API Reference for UI components for building media player interfaces.
 - [Tooltip](./reference/tooltip.md): A tooltip component for displaying contextual labels on hover and focus
 - [VolumeSlider](./reference/volume-slider.md): A slider component for controlling media playback volume
 
-## Media Elements
+### Media Components
 
-API Reference for media elements that handle streaming protocols and media playback.
+API Reference for media components that handle streaming protocols and media playback.
 
 - [BackgroundVideo](./reference/background-video.md): Decorative background video element with automatic muting and looping
 - [DashVideo](./reference/dash-video.md): DASH video element powered by dash.js for adaptive bitrate streaming
+- [HlsAudio](./reference/hls-audio.md): Audio-only HLS element that plays the audio rendition of an HLS stream
+- [HlsVideo](./reference/hls-video.md): Lightweight HLS video element with minimal bundle size
 - [HlsJsVideo](./reference/hlsjs-video.md): HLS video element powered by hls.js for adaptive bitrate streaming
 - [MuxAudio](./reference/mux-audio.md): Audio element for Mux-hosted HLS streams
 - [MuxVideo](./reference/mux-video.md): Video element for Mux-hosted HLS streams
 - [NativeHlsVideo](./reference/native-hls-video.md): HLS video element using the browser's built-in HLS support
-- [SimpleHlsAudioOnly](./reference/simple-hls-audio-only.md): Audio-only HLS element that plays the audio rendition of an HLS stream
-- [SimpleHlsVideo](./reference/simple-hls-video.md): Lightweight HLS video element with minimal bundle size
-
-## Hooks & Utilities
-
-API Reference for React hooks and utilities for player integration.
-
-- [createPlayer](./reference/create-player.md): Factory function that creates a player instance with typed store, Provider component, Container, and hooks
-- [Player.usePlayer](./reference/use-player.md): Hook to access the player store from within a Player.Provider
-- [Player.useMedia](./reference/use-media.md): Hook to access the media object from within a Player.Provider
-- [useStore](./reference/use-store.md): Hook to access store state and actions with optional selector-based subscriptions
-### Advanced
-
-- [renderElement](./reference/render-element.md): Utility for rendering UI component elements with state-driven props and render prop support
-- [useButton](./reference/use-button.md): Hook for creating accessible button components with keyboard and pointer interaction
-- [useContainerAttach](./reference/use-container-attach.md): Hook to register a custom container element with the player context
-- [useMediaAttach](./reference/use-media-attach.md): Hook to register a custom media element with the player context
-- [usePlayerContext](./reference/use-player-context.md): Hook to access the full player context including store, media element, and media setter
-- [useSelector](./reference/use-selector.md): Low-level hook for subscribing to derived state with customizable equality checks
-- [useSnapshot](./reference/use-snapshot.md): Hook to subscribe to a State container's current value
 
-## Features
+### Player Features
 
-API reference for feature modules that provide player capabilities and state.
+API reference for the feature modules passed to createPlayer, which provide player capabilities and state.
 
 - [createSelector](./reference/create-selector.md): Create a type-safe selector for a store slice's state
 - [Buffer](./reference/feature-buffer.md): Buffered and seekable time range state for the player store
@@ -110,4 +112,32 @@ API reference for feature modules that provide player capabilities and state.
 - [Stream type](./reference/feature-stream-type.md): Stream delivery type (live / on-demand) state for the player store
 - [Text tracks](./reference/feature-text-tracks.md): Subtitles, captions, and chapter track state for the player store
 - [Time](./reference/feature-time.md): Playback position and duration state for the player store
-- [Volume](./reference/feature-volume.md): Volume level and mute state for the player store
+- [Volume](./reference/feature-volume.md): Volume level and mute state for the player store
+
+### Utilities
+
+API reference for the hooks, utilities, controllers, and mixins used to integrate a player into an application.
+
+- [createPlayer](./reference/create-player.md): Factory function that creates a typed Player component and hooks
+- [usePlayer](./reference/use-player.md): Hook to access the player store from within a Player
+- [useMedia](./reference/use-media.md): Hook to access the media object from within a Player
+- [useStore](./reference/use-store.md): Hook to access store state and actions with optional selector-based subscriptions
+- [createI18n](./reference/create-i18n.md): Factory that creates framework i18n helpers with custom loading options
+- [useTranslator](./reference/use-translator.md): React hook that returns the typed translator for the nearest I18nProvider
+- [useLocale](./reference/use-locale.md): React hook that returns the active BCP 47 locale from the nearest I18nProvider
+- [registerI18n](./reference/register-i18n.md): Register or merge translation strings for a BCP 47 locale tag in the global i18n registry
+- [getI18nTranslations](./reference/get-i18n-translations.md): Read the merged translation map for a locale using BCP 47 parent-chain fallback
+- [hasRegisteredLocale](./reference/has-registered-locale.md): Check whether an exact locale tag exists in the global i18n registry
+- [onI18nRegistryChange](./reference/on-i18n-registry-change.md): Subscribe to global i18n registry mutations
+- [createTranslator](./reference/create-translator.md): Build a typed translator from a resolved translation map
+- [renderElement](./reference/render-element.md): Utility for rendering UI component elements with state-driven props and render prop support
+- [useAudioTrackOptions](./reference/use-audio-track-options.md): Hook to build audio track menu options from the player audio track state
+- [useButton](./reference/use-button.md): Hook for creating accessible button components with keyboard and pointer interaction
+- [useCaptionsOptions](./reference/use-captions-options.md): Hook to build captions menu options from the player text track state
+- [useContainerAttach](./reference/use-container-attach.md): Hook to register a custom container element with the player context
+- [useMediaAttach](./reference/use-media-attach.md): Hook to register a custom media element with the player context
+- [usePlaybackRateOptions](./reference/use-playback-rate-options.md): Hook to build playback rate menu options from the player playback rate state
+- [usePlayerContext](./reference/use-player-context.md): Hook to access the full player context value
+- [useQualityOptions](./reference/use-quality-options.md): Hook to build video quality menu options from the player rendition state
+- [useSelector](./reference/use-selector.md): Low-level hook for subscribing to derived state with customizable equality checks
+- [useSnapshot](./reference/use-snapshot.md): Hook to subscribe to a State container's current value

package/docs/reference/airplay-button.md

@@ -14,7 +14,7 @@ tsx
 
 Opens the WebKit AirPlay playback target picker and reflects session state. AirPlay is a WebKit-only feature, so the button reports `availability: "unsupported"` outside Safari (macOS and iOS). On supported platforms availability flips to `"available"` once Safari discovers at least one AirPlay receiver on the local network, and `"unavailable"` otherwise.
 
-The toggle is a no-op unless `availability` is `"available"` — clicking the button while `"unsupported"` or `"unavailable"` will not open the picker. Style the button accordingly (see [Styling](#styling) below) so its appearance matches its actual behavior.
+The button is hidden until `availability` is `"available"`: the HTML custom element receives the native `hidden` attribute, and the React component returns `null`. An explicitly disabled, otherwise available button stays visible and focusable with `aria-disabled="true"` and `data-disabled`, but does not open the picker.
 
 The component consumes the unified [`remotePlayback`](./feature-remote-playback.md) store feature alongside `CastButton`: both buttons drive their state from the same feature, but each only surfaces on its supported platform (WebKit for AirPlay, Chromium for Cast).
 
@@ -40,6 +40,18 @@ Current AirPlay session state
 
 Whether AirPlay is reachable on the current platform
 
+`data-disabled`
+
+Present / absent
+
+Present when the button is non-interactive
+
+`data-hidden`
+
+Present / absent
+
+Present on the HTML element while AirPlay is unavailable or unsupported
+
 Use `data-airplay-state` to swap icons or labels based on the session state:
 
 React renders a `<button>` element. Add a `className` and use it as the selector:
@@ -53,16 +65,19 @@ css
 }
 ```
 
-Consider hiding the button on platforms where AirPlay isn’t supported:
+Use `data-disabled` to style an explicitly disabled, available button:
 
 css
 
 ```
-.airplay-button[data-availability="unsupported"] {
-  display: none;
+.airplay-button[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 ```
 
+Unavailable and unsupported buttons are hidden automatically. No availability selector or extra hiding CSS is required.
+
 ## Accessibility
 
 Renders a `<button>` with an automatic `aria-label`: “Start AirPlay” when disconnected, “Stop AirPlay” when connected. (The component also supports a `"Connecting"` label, but WebKit AirPlay never emits a `connecting` state, so that label is unreachable in practice.) Override with the `label` prop — either a string or a function that receives the current state. Keyboard activation: Enter / Space.
@@ -71,45 +86,29 @@ Renders a `<button>` with an automatic `aria-label`: “Start AirPlay” when di
 
 ### Basic Usage
 
-AirPlay not supported
-
 App.tsx
 
 App.css
 
 ```
-import { AirPlayButton, createPlayer } from '@videojs/react';
+import { AirPlayButton, Container, createPlayer } 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 />
         <AirPlayButton
           className="media-airplay-button"
-          render={(props, state) => {
-            const label =
-              state.availability === 'unsupported'
-                ? 'AirPlay not supported'
-                : state.state === 'connected'
-                  ? 'Stop AirPlay'
-                  : state.availability === 'unavailable'
-                    ? 'No AirPlay devices found'
-                    : 'Start AirPlay';
-            return <button {...props}>{label}</button>;
-          }}
+          render={(props, state) => (
+            <button {...props}>{state.state === 'connected' ? 'Stop AirPlay' : 'Start AirPlay'}</button>
+          )}
         />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -136,9 +135,8 @@ export default function BasicUsage() {
   backdrop-filter: blur(10px);
 }
 
-/* Inactive states: the toggle is a no-op unless availability is "available". */
-.media-airplay-button[data-availability="unavailable"],
-.media-airplay-button[data-availability="unsupported"] {
+/* Explicitly disabled while AirPlay is available. */
+.media-airplay-button[data-disabled] {
   cursor: not-allowed;
   opacity: 0.5;
   filter: grayscale(1);
@@ -171,7 +169,7 @@ Whether the button is disabled.
 
 `label`
 
-`string | function`
+`Text | string | Text) | function`
 
 `''`
 
@@ -183,7 +181,7 @@ Custom label for the button.
 
 Type
 
-`string | ((state: AirPlayButtonState) => string)`
+`Text | string | ((state: AirPlayButtonState) => string | Text)`
 
 ### State
 
@@ -223,9 +221,29 @@ Type
 
 `'available' | 'unavailable' | 'unsupported'`
 
+`disabled`
+
+`boolean`
+
+▸
+
+Description
+
+Non-interactive but still focusable (mirrors `aria-disabled`).
+
+`hidden`
+
+`boolean`
+
+▸
+
+Description
+
+Whether the button is hidden until AirPlay is available.
+
 `label`
 
-`string`
+`Text | string`
 
 ### Data attributes
 
@@ -261,4 +279,20 @@ Whether AirPlay is available on the active platform and media. @see [https://dev
 
 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 AirPlay is unavailable.

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

@@ -9,24 +9,21 @@ Creates radio items from the player audio track state and selects the enabled tr
 tsx
 
 ```
-const audioTrack = useAudioTrackOptions();
-
-<Menu.RadioGroup value={audioTrack.value} onValueChange={audioTrack.setValue}>
-  <Menu.GroupLabel>Audio</Menu.GroupLabel>
-  {audioTrack.options.map((option) => (
-    <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled}>
-      {option.label}
-      <Menu.ItemIndicator checked={option.value === audioTrack.value} />
+<AudioTrackRadioGroup
+  renderItem={(props, item) => (
+    <Menu.RadioItem {...props}>
+      {item.label}
+      <Menu.ItemIndicator checked={item.checked} />
     </Menu.RadioItem>
-  ))}
-</Menu.RadioGroup>
+  )}
+/>
 ```
 
 ## Behavior
 
 The group is available when the configured media exposes more than one audio track. Labels use the track label, then language, then kind. Pass `formatTrack` to customize the visible labels.
 
-`useAudioTrackOptions` returns `null` when the [audio track feature](./feature-audio-track.md) is not configured. Use the returned options with [`Menu.RadioGroup`](./menu.md).
+`AudioTrackRadioGroup` uses [`useAudioTrackOptions`](./use-audio-track-options.md) to own selection and generate each item. Its required `renderItem` callback renders the [`Menu.RadioItem`](./menu.md) root and receives item state containing the translated `label` and current `checked` value. It returns `null` when the [audio track feature](./feature-audio-track.md) is not configured.
 
 ## Styling
 
@@ -48,12 +45,319 @@ Present / absent
 
 Present when audio track selection is disabled.
 
+`data-hidden`
+
+Present / absent
+
+Present when multiple audio tracks are unavailable.
+
 `data-availability`
 
 `"available"` / `"unavailable"`
 
 Whether multiple audio tracks are available.
 
+Unavailable groups receive the native `hidden` attribute.
+
 ## Accessibility
 
-The group uses the menu radio group pattern. It receives an accessible label from the `label` prop or defaults to `Audio`.
+The group uses the menu radio group pattern.
+
+The component receives an accessible label from the `label` prop or defaults to `Audio`. Override it with `aria-label` or `aria-labelledby`.
+
+## Examples
+
+### Basic usage
+
+Audio
+
+App.tsx
+
+App.css
+
+```
+import { AudioTrackRadioGroup, Container, createPlayer, Menu } from '@videojs/react';
+import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
+import { videoFeatures } from '@videojs/react/video';
+import type { ReactNode } from 'react';
+
+const { Player } = createPlayer({ features: videoFeatures });
+const src = 'https://stream.mux.com/s41JYeqIpBMBzE4OzxDyGR2yrp2hD1CQ6gJN9SlVGDQ.m3u8';
+
+function AudioMenu(): ReactNode {
+  return (
+    <Menu.Root side="top" align="end">
+      <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.Root>
+  );
+}
+
+export default function BasicUsage() {
+  return (
+    <Player>
+      <Container className="media-container">
+        <HlsJsVideo src={src} autoPlay crossOrigin="anonymous" muted playsInline loop />
+        <div className="menu-bar">
+          <AudioMenu />
+        </div>
+      </Container>
+    </Player>
+  );
+}
+```
+```
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.menu-bar {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
+
+.settings-trigger {
+  padding: 6px 16px;
+  color: black;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  border-radius: 9999px;
+  backdrop-filter: blur(10px);
+}
+
+.menu {
+  --media-menu-side-offset: 8px;
+  box-sizing: border-box;
+  display: grid;
+  gap: 2px;
+  min-width: 180px;
+  max-width: var(--media-menu-available-width, var(--media-popover-available-width, none));
+  max-height: var(--media-menu-available-height, var(--media-popover-available-height, none));
+  padding: 6px;
+  margin: 0;
+  overflow: auto;
+  overscroll-behavior: none;
+  font-size: 14px;
+  color: white;
+  background: rgba(0, 0, 0, 0.88);
+  border: 0;
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+}
+
+.menu-group {
+  display: grid;
+  gap: 2px;
+}
+
+.menu-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 32px;
+  padding: 0 10px;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 6px;
+}
+
+.menu-item[data-highlighted] {
+  background: rgba(255, 255, 255, 0.16);
+}
+
+.menu-indicator {
+  opacity: 0;
+}
+
+[role="menuitemradio"][aria-checked="true"] .menu-indicator {
+  opacity: 1;
+}
+```
+
+## API Reference
+
+### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`disabled`
+
+`boolean`
+
+`false`
+
+▸
+
+Description
+
+Whether audio track selection is disabled.
+
+`formatTrack`
+
+`Text) | function`
+
+`formatTrackLabel`
+
+▸
+
+Description
+
+Custom formatter for visible track labels.
+
+Type
+
+`((track: MediaAudioTrack) => string | Text)`
+
+`label`
+
+`Text | string | Text) | function`
+
+`''`
+
+▸
+
+Description
+
+Custom label for the options group.
+
+Type
+
+`Text | string | ((state: AudioTrackRadioGroupState) => string | Text)`
+
+### State
+
+State is accessible via the `render`, `className`, and `style` props.
+
+Property
+
+Type
+
+Details
+
+`value`
+
+`string`
+
+▸
+
+Description
+
+Current radio-group value.
+
+`options`
+
+`AudioTrackRadioGroupOption[]`
+
+▸
+
+Description
+
+Ordered options displayed by platform adapters.
+
+`disabled`
+
+`boolean`
+
+▸
+
+Description
+
+Whether the entire option group is disabled.
+
+`hidden`
+
+`boolean`
+
+▸
+
+Description
+
+Whether the option group is hidden because no meaningful selection is available.
+
+`availability`
+
+`'available' | 'unavailable'`
+
+▸
+
+Description
+
+Whether the media exposes a meaningful selection.
+
+`label`
+
+`Text | string`
+
+### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-audio-track`
+
+`string`
+
+▸
+
+Description
+
+Current audio track value.
+
+`data-disabled`
+
+▸
+
+Description
+
+Present when audio track selection is disabled.
+
+`data-hidden`
+
+▸
+
+Description
+
+Present when audio track selection is unavailable.
+
+`data-availability`
+
+`'available' | 'unavailable'`
+
+▸
+
+Description
+
+Indicates audio track availability (`available` or `unavailable`).