npm - @videojs/react - Versions diffs - 10.0.0-rc.1 → 10.0.0-rc.3 - Mend

@videojs/react 10.0.0-rc.1 → 10.0.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2773) hide show

package/docs/reference/api/get-i18n-translations.md ADDED Viewed

@@ -0,0 +1,36 @@
+# getI18nTranslations
+Read the merged translation map for a locale using BCP 47 parent-chain fallback
+## Import
+```tsx
+import { getI18nTranslations } from "@videojs/react/i18n";
+```
+`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 [Internationalize the player](../../guides/internationalization.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
+`getI18nTranslations(locale): FlatTranslations`
+### Parameters
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `locale` (required) | `(typeof LOCALES)[number] \| string & {}` | — | BCP 47 tag to resolve (e.g. `es-MX`, `zh-Hant-HK`). |
+### Return Value
+| Type |
+| --- |
+| `{ [Key in TranslationKey]?: TranslationParams[Key] extends never ? string : Key extends keyof ParametricTranslations ? ParametricTranslations[Key] : string; } & Record<string, string \| undefined>` |

package/docs/reference/api/has-registered-locale.md ADDED Viewed

@@ -0,0 +1,33 @@
+# hasRegisteredLocale
+Check whether an exact locale tag exists in the global i18n registry
+## Import
+```tsx
+import { hasRegisteredLocale } from "@videojs/react/i18n";
+```
+`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
+`hasRegisteredLocale(locale): boolean`
+### Parameters
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `locale` (required) | `(typeof LOCALES)[number] \| string & {}` | — | BCP 47 tag to test. |
+### Return Value
+`boolean`

package/docs/reference/api/i18n-provider.md ADDED Viewed

@@ -0,0 +1,37 @@
+# I18nProvider
+React provider that resolves locale and supplies a typed translator to descendants
+## Import
+```tsx
+import { I18nProvider } from "@videojs/react";
+```
+`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 [Internationalize the player](../../guides/internationalization.md) for merge priority, browser translation fallback, and SSR guidance.
+## API Reference
+`I18nProvider(props): ReactNode`
+### Parameters
+| Parameter | Type | Default |
+| --- | --- | --- |
+| `props` (required) | `{ locale?: (typeof LOCALES)[number] \| string & {}; langRootRef?: RefObject<Element \| null>; translations?: Partial<Translations>; children: ReactNode; onActiveLocaleChange?: ((locale: Locale) => void) }` | — |
+### Return Value
+`ReactNode`

package/docs/reference/api/llms.txt ADDED Viewed

@@ -0,0 +1,102 @@
+# Video.js v10 — React API
+> API reference for the player factory, store, features, menus, gestures, translation tools, and utilities. Bundled with `@videojs/react` v10.0.0-rc.3. Links are relative paths to files in this directory.
+## Player
+API reference for creating a player and reaching it and its container from your own code.
+- [createPlayer](./create-player.md): Factory function that creates a typed Player component and hooks
+- [usePlayer](./use-player.md): Hook to access the player store from within a Player
+- [useOptionalPlayer](./use-optional-player.md): Hook to access or select Player state when a Player is available
+- [useContainer](./use-container.md): Hook to access the media container from the nearest Player
+- [useOptionalContainer](./use-optional-container.md): Hook to access a Player container when one is available
+- [useContainerAttach](./use-container-attach.md): Hook to register a custom container element with the player context
+## Store
+API reference for reading and subscribing to player state: selectors, the store hooks, and snapshots.
+- [createSelector](./create-selector.md): Create a type-safe selector for a store slice's state
+- [useStore](./use-store.md): Hook to access store state and actions with optional selector-based subscriptions
+- [useSelector](./use-selector.md): Low-level hook for subscribing to derived state with customizable equality checks
+- [useSnapshot](./use-snapshot.md): Hook to subscribe to a State container's current value
+## Features
+API reference for the feature modules passed to createPlayer, which provide player capabilities and state.
+- [Buffer](./feature-buffer.md): Buffered and seekable time range state for the player store
+- [Controls](./feature-controls.md): User activity and controls visibility state for the player store
+- [Error](./feature-error.md): Media error state and actions for the player store
+- [Fullscreen](./feature-fullscreen.md): Fullscreen state and actions for the player store
+- [Live](./feature-live.md): Live edge state for the player store
+- [Metadata](./feature-metadata.md): Resolved title and poster values for the player store
+- [Orientation lock](./feature-orientation-lock.md): Screen orientation locking while fullscreen is active
+- [Picture-in-picture](./feature-pip.md): Picture-in-picture state and actions for the player store
+- [Playback](./feature-playback.md): Play/pause state and actions for the player store
+- [Playback rate](./feature-playback-rate.md): Playback speed state and actions for the player store
+- [Quality](./feature-quality.md): Video rendition state and actions for the player store
+- [Audio track](./feature-audio-track.md): Audio track state and actions for the player store
+- [Remote Playback](./feature-remote-playback.md): Remote playback state and actions for the player store
+- [Source](./feature-source.md): Media source state and actions for the player store
+- [Stream type](./feature-stream-type.md): Stream delivery type (live / on-demand) state for the player store
+- [Text tracks](./feature-text-tracks.md): Subtitles, captions, and chapter track state for the player store
+- [Time](./feature-time.md): Playback position and duration state for the player store
+- [Volume](./feature-volume.md): Volume level and mute state for the player store
+## Menu
+API reference for the option lists behind the track, quality, and speed menus.
+- [useAudioTrackOptions](./use-audio-track-options.md): Hook to build audio track menu options from the player audio track state
+- [useCaptionsOptions](./use-captions-options.md): Hook to build captions menu options from the player text track state
+- [usePlaybackRateOptions](./use-playback-rate-options.md): Hook to build playback rate menu options from the player playback rate state
+- [useQualityOptions](./use-quality-options.md): Hook to build video quality menu options from the player rendition state
+## Gestures
+API reference for tap and double-tap gestures and keyboard hotkeys.
+- [useTapGesture](./use-tap-gesture.md): Hook that registers a tap gesture for the current Player
+- [useDoubleTapGesture](./use-double-tap-gesture.md): Hook that registers a double-tap gesture for the current Player
+- [useHotkey](./use-hotkey.md): Hook that registers a keyboard shortcut for the current Player
+- [useHotkeyShortcut](./use-hotkey-shortcut.md): Hook that reads display and ARIA metadata for a registered Player hotkey
+## i18n
+API reference for translating the player: the provider, hooks, and the phrase registry.
+- [I18nProvider](./i18n-provider.md): React provider that resolves locale and supplies a typed translator to descendants
+- [createI18n](./create-i18n.md): Factory that creates framework i18n helpers with custom loading options
+- [useTranslator](./use-translator.md): React hook that returns the typed translator for the nearest I18nProvider
+- [useLocale](./use-locale.md): React hook that returns the active BCP 47 locale from the nearest I18nProvider
+- [Translation phrases](./translation-phrases.md): Semantic i18n keys, their English defaults, and the player UI that uses them
+- [registerI18n](./register-i18n.md): Register or merge translation strings for a BCP 47 locale tag in the global i18n registry
+- [getI18nTranslations](./get-i18n-translations.md): Read the merged translation map for a locale using BCP 47 parent-chain fallback
+- [hasRegisteredLocale](./has-registered-locale.md): Check whether an exact locale tag exists in the global i18n registry
+- [onI18nRegistryChange](./on-i18n-registry-change.md): Subscribe to global i18n registry mutations
+- [createTranslator](./create-translator.md): Build a typed translator from a resolved translation map
+## Utils
+Lower-level building blocks for custom components: refs, buttons, sliders, and rendering.
+- [useButton](./use-button.md): Hook for creating accessible button components with keyboard and pointer interaction
+- [useSlider](./use-slider.md): Hook for connecting slider input behavior to custom React elements
+- [useComposedRefs](./use-composed-refs.md): Hook that updates multiple React refs through one stable callback ref
+- [useLatestRef](./use-latest-ref.md): Hook that exposes the latest rendered value through a stable ref
+- [useDestroy](./use-destroy.md): Hook that destroys an imperative instance after a real React unmount
+- [mergeProps](./merge-props.md): Utility for combining React props with predictable handler, class, and style precedence
+- [renderElement](./render-element.md): Utility for rendering UI component elements with state-driven props and render prop support
+## Error codes
+Reference for codes thrown when Video.js 8 APIs are used with the Video.js 10 package.
+- [Error Codes](./error-codes.md): Error codes emitted by the video.js package and how to resolve them
+- [VJS8_LEGACY_INIT](./vjs8-legacy-init.md): Legacy Video.js 8 player initialization error
+- [VJS8_LEGACY_PLUGIN](./vjs8-legacy-plugin.md): Legacy Video.js 8 plugin registration error
+- [VJS8_LEGACY_COMPONENT](./vjs8-legacy-component.md): Legacy Video.js 8 component registration error
+- [VJS8_LEGACY_GET_PLAYER](./vjs8-legacy-get-player.md): Legacy Video.js 8 player lookup error
+- [VJS8_LEGACY_OPTIONS](./vjs8-legacy-options.md): Legacy Video.js 8 global options error

package/docs/reference/api/merge-props.md ADDED Viewed

@@ -0,0 +1,38 @@
+# mergeProps
+Utility for combining React props with predictable handler, class, and style precedence
+## Import
+```tsx
+import { mergeProps } from "@videojs/react";
+```
+## Usage
+Pass props in increasing precedence order. Event handlers run right to left, class names concatenate right to left, and rightmost style and other prop values win conflicts.
+```tsx
+const props = mergeProps(
+  { className: "base", onClick: logInternal },
+  { className: "custom", onClick: onClick, style: { color: "red" } },
+);
+return <button {...props}>Play</button>;
+```
+`mergeProps` does not compose refs; a rightmost `ref` replaces earlier refs. Use `useComposedRefs` when every ref needs the element.
+## API Reference
+`mergeProps<T extends ElementType>(...propSets): ComponentPropsWithRef<T>`
+### Parameters
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `propSets` | `(ComponentPropsWithRef<T> \| undefined)[]` | — | Props objects to merge in order. |
+### Return Value
+`ComponentPropsWithRef<T>`

package/docs/reference/api/on-i18n-registry-change.md ADDED Viewed

@@ -0,0 +1,29 @@
+# onI18nRegistryChange
+Subscribe to global i18n registry mutations
+## Import
+```tsx
+import { onI18nRegistryChange } from "@videojs/react/i18n";
+```
+`onI18nRegistryChange` registers a callback that runs whenever any locale layer changes, for example after `registerI18n` or browser translation prefetch. Returns an unsubscribe function.
+React `I18nProvider` uses this to invalidate translators when the registry updates.
+## API Reference
+`onI18nRegistryChange(callback): (() => void)`
+### Parameters
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `callback` (required) | `(() => void)` | — | Invoked when any locale layer changes. |
+### Return Value
+| Type |
+| --- |
+| `(() => void)` |

package/docs/reference/api/register-i18n.md ADDED Viewed

@@ -0,0 +1,39 @@
+# registerI18n
+Register or merge translation strings for a BCP 47 locale tag in the global i18n registry
+## Import
+```tsx
+import { registerI18n } from "@videojs/react/i18n";
+```
+`registerI18n` merges a partial translation map into the process-wide registry for a locale tag. Components carry their own English fallback text. Built-in non-English packs lazy-load automatically; call `registerI18n` for custom locales, CDN locale modules, or patched shipped packs before the provider renders.
+Keys are nested semantic names such as `buttons.play` and `buttons.pause`. See [Translation phrases](./translation-phrases.md) for the complete catalog.
+```ts
+import { registerI18n } from '@videojs/react/i18n';
+registerI18n('es', {
+  buttons: {
+    play: 'Reproducir',
+    pause: 'Pausar',
+  },
+});
+```
+## API Reference
+`registerI18n(locale, translations): void`
+### Parameters
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `locale` (required) | `(typeof LOCALES)[number] \| string & {}` | — | BCP 47 tag (normalized to lowercase; unicode extensions stripped for the registry key). |
+| `translations` (required) | `Partial<Translations>` | — | Partial nested locale values; merges with any existing layer for the tag. |
+### Return Value
+`void`

package/docs/reference/api/render-element.md ADDED Viewed

@@ -0,0 +1,180 @@
+# renderElement
+Utility for rendering UI component elements with state-driven props and render prop support
+## Import
+```tsx
+import { renderElement } from "@videojs/react";
+```
+`renderElement` renders a UI component element, handling default tag rendering, render props (element or function), props merging, ref composition, and state-driven `className`/`style`.
+**PlayButton.tsx**
+```tsx
+import { useRef } from "react";
+import { renderElement } from "@videojs/react";
+function PlayButton({ className, style, render, ...props }) {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const state = { paused: true };
+  return renderElement(
+    "button",
+    { className, style, render },
+    {
+      state,
+      ref: buttonRef,
+      props: [{ type: "button", "aria-label": "Play" }, props],
+    },
+  );
+}
+```
+The `className` and `style` component props accept either static values or functions that receive the current state:
+```tsx
+<PlayButton
+  className={(state) => (state.paused ? "paused" : "playing")}
+  style={(state) => ({ opacity: state.paused ? 0.5 : 1 })}
+/>
+```
+The `render` prop lets consumers fully customize the rendered element while preserving all internal props and refs:
+```tsx
+<PlayButton
+  render={(props, state) => (
+    <button {...props}>{state.paused ? "Play" : "Pause"}</button>
+  )}
+/>
+```
+## Examples
+### Basic Usage
+**App.tsx**
+```tsx
+import { renderElement } from '@videojs/react';
+import { type ReactNode, useState } from 'react';
+interface TagState {
+  active: boolean;
+}
+function Tag({
+  className,
+  style,
+  render,
+  active,
+  children,
+}: renderElement.ComponentProps<TagState> & { active: boolean; children?: ReactNode }) {
+  const state: TagState = { active };
+  return renderElement(
+    'span',
+    { className, style, render },
+    {
+      state,
+      props: { children },
+      stateAttrMap: { active: 'data-active' },
+    }
+  );
+}
+export default function BasicUsage() {
+  const [active, setActive] = useState(false);
+  const className = (state: TagState) => `tag${state.active ? ' tag--active' : ''}`;
+  const style = (state: TagState) => ({
+    fontSize: state.active ? '1.125rem' : '0.875rem',
+  });
+  return (
+    <div className="demo">
+      <button type="button" className="toggle" onClick={() => setActive((prev) => !prev)}>
+        {active ? 'Deactivate' : 'Activate'}
+      </button>
+      <div className="tags">
+        <Tag active={active} className={className} style={style}>
+          Default &lt;span&gt;
+        </Tag>
+        <Tag active={active} className={className} style={style} render={<strong />}>
+          Element &lt;strong&gt;
+        </Tag>
+        <Tag
+          active={active}
+          className={className}
+          style={style}
+          render={(props, state) => <em {...props}>{state.active ? 'Active!' : 'Inactive'}</em>}
+        />
+      </div>
+    </div>
+  );
+}
+```
+**App.css**
+```css
+.demo {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+}
+.toggle {
+  align-self: flex-start;
+  padding: 6px 16px;
+  color: #111827;
+  cursor: pointer;
+  background: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+}
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 12px;
+  color: #374151;
+  background: #e5e7eb;
+  border-radius: 9999px;
+  transition: all 0.2s ease;
+}
+.tag--active {
+  color: white;
+  background: #3b82f6;
+}
+```
+## API Reference
+`renderElement<State extends object, RenderedElementType extends Element, TagName extends keyof React.JSX.IntrinsicElements>(element, componentProps, params): ReactElement | null`
+### Parameters
+| Parameter | Type | Default |
+| --- | --- | --- |
+| `element` (required) | `TagName` | — |
+| `componentProps` (required) | `{ className?: string \| ((state: State) => string \| undefined); style?: CSSProperties \| ((state: State) => CSSProperties \| undefined); render?: ReactElement \| ((props: HTMLProps, state: State) => ReactElement \| null) }` | — |
+| `params` (required) | `{ state: State; ref?: Ref<RenderedElementType> \| Ref<RenderedElementType>[]; props?: object \| object[]; stateAttrMap?: { [Key in keyof State]?: string; } }` | — |
+### Return Value
+`ReactElement | null`

package/docs/reference/api/translation-phrases.md ADDED Viewed

@@ -0,0 +1,107 @@
+# Translation phrases
+Semantic i18n keys, their English defaults, and the player UI that uses them
+Video.js uses opaque semantic keys so English copy can change without breaking translation packs. English defaults are defined in `packages/core/src/core/i18n/locales/en.ts`. Both HTML and React controls use the same keys.
+Locale packs and provider overrides use nested objects, so `buttons.play` is authored as `{ buttons: { play: '…' } }`. Translators use the dotted form.
+## Playback controls
+| Key | English default | Used by |
+| --- | --- | --- |
+| `buttons.play` | Play | Play button and its tooltip |
+| `buttons.pause` | Pause | Play button and its tooltip |
+| `buttons.replay` | Replay | Play button and its tooltip |
+| `buttons.mute` | Mute | Mute button and its tooltip |
+| `buttons.unmute` | Unmute | Mute button and its tooltip |
+| `seek.forward` | Seek forward `{seconds}` seconds | Seek-forward button and its tooltip |
+| `seek.backward` | Seek backward `{seconds}` seconds | Seek-backward button and its tooltip |
+| `fullscreen.enter` | Enter fullscreen | Fullscreen button |
+| `fullscreen.exit` | Exit fullscreen | Fullscreen button |
+| `captions.enable` | Enable captions | Captions button and captions selection control |
+| `captions.disable` | Disable captions | Captions button and captions selection control |
+| `pip.enter` | Enter picture-in-picture | Picture-in-picture button |
+| `pip.exit` | Exit picture-in-picture | Picture-in-picture button |
+| `live.playing` | Playing live | Live button |
+| `live.seekToEdge` | Seek to live edge | Live button |
+| `live.badge` | Live | Live button badge |
+| `cast.start` | Start casting | Cast button |
+| `cast.stop` | Stop casting | Cast button |
+| `cast.connecting` | Connecting | Cast button |
+| `airplay.start` | Start AirPlay | AirPlay button |
+| `airplay.stop` | Stop AirPlay | AirPlay button |
+| `container.label` | Media player | Player container aria label |
+## Time and volume
+| Key | English default | Used by |
+| --- | --- | --- |
+| `slider.seek` | Seek | Time slider aria label |
+| `time.current` | Current time | Current-time display aria label |
+| `time.duration` | Duration | Duration display aria label |
+| `time.remaining` | Remaining | Remaining-time display aria label |
+| `time.elapsedSuffix` | `{duration} elapsed` | Elapsed time in a toggleable display aria label |
+| `time.durationSuffix` | `{duration} duration` | Duration in a toggleable display aria label |
+| `time.remainingSuffix` | `{duration} remaining` | Remaining time display |
+| `time.showElapsed` | `Show elapsed time, {duration}.` | Toggleable time display aria label |
+| `time.showDuration` | `Show duration, {duration}.` | Toggleable time display aria label |
+| `time.showRemaining` | `Show remaining time, {duration}.` | Toggleable time display aria label |
+| `time.toggleElapsed` | `Toggle between elapsed and remaining time.` | Elapsed-time toggle aria description |
+| `time.toggleDuration` | `Toggle between duration and remaining time.` | Duration toggle aria description |
+| `time.position` | `{current} of {duration}` | Time slider value text |
+| `time.unknown` | Media not loaded, unknown time. | Time display aria label and time slider value text before a duration is known |
+| `playback.rate` | Playback rate `{rate}` | Playback-rate button and radio group |
+| `volume.mutedValue` | `{percent}, muted` | Muted volume slider value text |
+| `volume.muted` | Muted | Volume input feedback |
+| `volume.label` | Volume | Volume slider aria label |
+| `volume.value` | Volume `{value}` | Volume input feedback |
+## Playback feedback
+| Key | English default | Used by |
+| --- | --- | --- |
+| `status.captionsOn` | Captions on | Input feedback after enabling captions |
+| `status.captionsOff` | Captions off | Input feedback after disabling captions |
+| `status.paused` | Paused | Input feedback after pausing |
+| `status.playing` | Playing | Input feedback after starting playback |
+| `status.fullscreen` | Fullscreen | Input feedback after entering fullscreen |
+| `status.pip` | Picture in picture | Input feedback after entering picture-in-picture |
+| `status.exitPip` | Exit picture in picture | Input feedback after exiting picture-in-picture |
+| `status.seekedTo` | Seeked to `{time}` | Status announcer after a seek |
+## Errors
+| Key | English default | Used by |
+| --- | --- | --- |
+| `errors.aborted` | You stopped media playback before it finished. | Media error dialog for `MEDIA_ERR_ABORTED` |
+| `errors.network` | This media could not be loaded due to a network or server issue. | Media error dialog for `MEDIA_ERR_NETWORK` |
+| `errors.decode` | This media could not be played. It may be corrupted, or your browser may not support its format. | Media error dialog for `MEDIA_ERR_DECODE` |
+| `errors.source` | This media could not be loaded. It may be unavailable, or your browser may not support its format. | Media error dialog for `MEDIA_ERR_SRC_NOT_SUPPORTED` |
+| `errors.encrypted` | This media could not be played because it could not be decrypted. | Media error dialog for `MEDIA_ERR_ENCRYPTED` |
+| `errors.unplayable` | This media is unsupported by the player. | Media error dialog when the player cannot play a source the browser supports |
+| `errors.title` | Something went wrong. | Generic media error dialog title |
+| `errors.unexpected` | An unexpected error occurred. | Generic media error dialog fallback description |
+| `common.empty` | `''` | Empty description for a custom media error |
+| `common.ok` | OK | Error dialog confirmation button |
+## Settings and track menus
+| Key | English default | Used by |
+| --- | --- | --- |
+| `menu.settings` | Settings | Video settings menu trigger |
+| `menu.quality` | Quality | Quality menu |
+| `menu.audio` | Audio | Audio-track menu and fallback track label |
+| `menu.default` | Default | Reserved default-option label; no stock control currently emits it |
+| `menu.speed` | Speed | Playback-rate menu |
+| `menu.captions` | Captions | Captions menu |
+| `menu.playbackRate` | Playback rate | Playback-rate radio group |
+| `menu.back` | Back | Nested settings-menu back button |
+| `menu.off` | Off | Captions menu option |
+| `menu.auto` | Auto | Automatic-quality option |
+| `menu.autoWithLabel` | Auto (`{label}`) | Automatic-quality option with the active rendition |
+| `menu.subtitles` | Subtitles | Subtitles track option |
+## Related pages
+- [Internationalize the player](../../guides/internationalization.md): Translate player labels and announcements: shipped locale packs, custom translations, runtime switching, and server rendering.

package/docs/reference/api/use-audio-track-options.md ADDED Viewed

@@ -0,0 +1,60 @@
+# useAudioTrackOptions
+Hook to build audio track menu options from the player audio track state
+## Import
+```tsx
+import { useAudioTrackOptions } from "@videojs/react";
+```
+`useAudioTrackOptions` returns the currently enabled audio track, the available options, and a `setValue` callback for wiring track selection into a menu. It returns `null` when the [audio track feature](./feature-audio-track.md) is not configured.
+**AudioMenu.tsx**
+```tsx
+import { Menu, useAudioTrackOptions } from "@videojs/react";
+function AudioMenu() {
+  const audioTrack = useAudioTrackOptions();
+  if (audioTrack?.state.availability !== "available") return null;
+  return (
+    <Menu.RadioGroup value={audioTrack.value} onValueChange={audioTrack.setValue} aria-label="Audio">
+      {audioTrack.options.map((option) => (
+        <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled}>
+          {option.label}
+          <Menu.ItemIndicator checked={option.value === audioTrack.value} />
+        </Menu.RadioItem>
+      ))}
+    </Menu.RadioGroup>
+  );
+}
+```
+Option labels use the track label, then language, then kind. Pass `formatTrack` to customize the visible labels.
+See [AudioTrackRadioGroup](../components/audio-track-radio-group.md) for the component-level pattern, and [Menu](../components/menu.md) for a complete settings menu example.
+## API Reference
+`useAudioTrackOptions(props?): AudioTrackOptionsResult | null`
+### Parameters
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `props` | `{ label?: Text \| string \| ((state: AudioTrackRadioGroupState) => Text \| string); formatTrack?: ((track: MediaAudioTrack) => Text \| string); disabled?: boolean }` | — | Optional `label`, `formatTrack`, and `disabled` overrides. |
+### Return Value
+| Property | Type |
+| --- | --- |
+| `state` | `{ label: Text \| string; value: string; options: readonly Option[]; disabled: boolean; hidden: boolean; availability: 'available' \| 'unavailable' }` |
+| `label` | `string` |
+| `value` | `string` |
+| `selectedLabel` | `string` |
+| `options` | `AudioTrackOption[]` |
+| `disabled` | `boolean` |
+| `hidden` | `boolean` |
+| `setValue` | `((value: string) => void)` |