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

package/docs/llms.txt

@@ -18,7 +18,9 @@ Guides for moving an existing player integration to Video.js v10, one per player
 - [Overview](./concepts/overview.md): How Video.js players are structured — state, UI, and media
 - [Build with AI](./how-to/build-with-ai.md): How to give AI tools the context they need to build Video.js players alongside you
 - [v10 Roadmap](./concepts/v10-roadmap.md): Timeline and milestones for Video.js v10 rebuild and the future of v8
-- [Browser Support](./concepts/browser-support.md): Which browsers Video.js 10 supports and how it handles newer platform features
+- [Browser support](./concepts/browser-support.md): Browsers and rendering environments supported by Video.js 10
+- [TypeScript](./concepts/typescript.md): TypeScript version and module resolution requirements for Video.js packages
+- [Bundlers](./concepts/bundlers.md): Bundler requirements for Video.js package exports, CSS, and wrapper libraries
 
 ## Concepts
 
@@ -27,28 +29,33 @@ Understanding-oriented pages that explain how and why things work. Read these to
 - [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.
+- [UI components](./concepts/ui-components.md): How Video.js UI components use focused elements, 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
 
-Task-oriented guides with step-by-step instructions to achieve a specific outcome by applying one or more concepts. Each guide may assume you already understand the relevant concepts.
+Task-oriented guides that each answer one goal in the reader's words. Some cover custom player UI; others configure a preset, skin, media component, or integration. Guides lead with the recommended path, then the constraints and variations needed to apply it.
 
-- [Customize skins](./how-to/customize-skins.md): Learn how to customize Video.js v10 skins by copying and modifying them
-- [Add a poster placeholder](./how-to/add-a-poster-placeholder.md): Show a lightweight placeholder while the poster image loads
+- [Customize skins](./how-to/customize-skins.md): Learn the public customization surface for packaged Video.js skins and when to eject
 - [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
-
-- [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
+- [Add a poster and loading placeholder](./how-to/add-a-poster-and-loading-placeholder.md): Set the image shown before playback, then add a lightweight placeholder while it loads
+- [Autoplay](./how-to/autoplay.md): Start playback automatically and handle browser autoplay restrictions.
+- [Automatically show and hide controls](./how-to/show-and-hide-controls.md): Show controls while the user is active, hide them during playback, and toggle them by touch.
+- [Show captions and subtitles](./how-to/show-captions-and-subtitles.md): Show captions and subtitles, and let users turn them on and pick a language.
+- [Add keyboard shortcuts and gestures](./how-to/add-keyboard-shortcuts-and-gestures.md): Add keyboard shortcuts, tap and double-tap gestures, and on-screen feedback for input actions.
+- [Play live streams](./how-to/play-live-streams.md): Play live streams with live-edge tracking, DVR windows, and stream-type detection.
+- [Add a quality selector](./how-to/add-quality-selector.md): Read available renditions, let the engine adapt automatically, and offer manual quality selection.
+- [Go fullscreen and lock orientation](./how-to/go-fullscreen-and-lock-orientation.md): Present the player fullscreen with custom controls intact, and lock screen orientation on mobile.
+- [Use picture-in-picture](./how-to/use-picture-in-picture.md): Pop the video into a floating window, with availability detection and state that tracks every entry path.
+- [Show timeline thumbnail previews](./how-to/show-timeline-thumbnail-previews.md): Preview frames along the timeline while the user scrubs, powered by a storyboard track.
+- [Cast to AirPlay and Chromecast](./how-to/cast-to-airplay-and-chromecast.md): Send playback to AirPlay and Google Cast devices, with availability detection and connection state.
+- [Handle playback errors](./how-to/handle-playback-errors.md): Surface terminal playback errors and give users a useful next step.
+- [Remember user preferences](./how-to/remember-user-preferences.md): Persist volume, caption, and quality preferences across sessions by subscribing to player state.
+- [Add a background video](./how-to/add-a-background-video.md): Add an accessible background video from an MP4, WebM, HLS, or Mux source
+- [Internationalize the player](./how-to/internationalize-the-player.md): Translate player labels and announcements: shipped locale packs, custom translations, runtime switching, and server rendering.
 
 ## API Reference
 
@@ -58,18 +65,23 @@ Reference for every public export, grouped by what it is: UI components, media c
 
 API Reference for UI components for building media player interfaces.
 
-- [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.
+- [Player](./reference/player.md): The state boundary — creates a store and broadcasts it to all descendants.
+- [Container](./reference/player-container.md): The player's visual and interaction surface for layout, fullscreen, focus, and user activity.
 - [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
+- [AlertDialog](./reference/alert-dialog.md): A modal alert dialog for urgent messages that require acknowledgement
 - [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
+- [Dialog](./reference/dialog.md): A modal dialog for application content, including players opened from a thumbnail
+- [ErrorDialog](./reference/error-dialog.md): An alert dialog that presents and dismisses playback errors
 - [FullscreenButton](./reference/fullscreen-button.md): Accessible fullscreen toggle button with keyboard support and state reflection
+- [Gesture](./reference/gesture.md): Map tap and double-tap gestures to player actions
 - [GoogleCast](./reference/google-cast.md): Options for the Google Cast component that configures the receiver and load request
+- [Hotkey](./reference/hotkey.md): Register a keyboard shortcut that invokes a player action
 - [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
@@ -81,31 +93,40 @@ API Reference for UI components for building media player interfaces.
 - [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
 - [SeekButton](./reference/seek-button.md): Accessible seek button for skipping forward or backward by a configurable number of seconds
+- [SeekIndicator](./reference/seek-indicator.md): A temporary visual indicator for keyboard and gesture seeking
 - [Slider](./reference/slider.md): A composable slider component with track, fill, thumb, preview, and value parts
+- [StatusAnnouncer](./reference/status-announcer.md): Announce player state changes through a persistent status live region
+- [StatusIndicator](./reference/status-indicator.md): Display temporary visual feedback for keyboard and gesture actions
 - [Thumbnail](./reference/thumbnail.md): Time-based thumbnail preview component for timeline scrubbing and hover previews
 - [Time](./reference/time.md): Time display components for showing current time, duration, and remaining time in a video player
 - [TimeSlider](./reference/time-slider.md): A slider component for seeking through media playback time
 - [Title](./reference/title.md): Displays the resolved content title for the current media
 - [Tooltip](./reference/tooltip.md): A tooltip component for displaying contextual labels on hover and focus
+- [VolumeIndicator](./reference/volume-indicator.md): Display temporary visual feedback for keyboard and gesture volume actions
+- [VolumePopover](./reference/volume-popover.md): A volume-aware popover that keeps mute available when volume level controls are unavailable
 - [VolumeSlider](./reference/volume-slider.md): A slider component for controlling media playback volume
 
 ### Media Components
 
 API Reference for media components that handle streaming protocols and media playback.
 
+- [Audio](./reference/audio.md): Native audio playback that can provide media to a Video.js player
 - [BackgroundVideo](./reference/background-video.md): Decorative background video element with automatic muting and looping
 - [CloudflareVideo](./reference/cloudflare-video.md): Video component that plays Cloudflare Stream videos through the Stream player
 - [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
+- [HlsBackgroundVideo](./reference/hls-background-video.md): HLS background video without controls, audio, captions, or adaptive quality
 - [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
+- [MuxBackgroundVideo](./reference/mux-background-video.md): Mux-specific name for the HLS background video component
 - [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
 - [ShakaVideo](./reference/shaka-video.md): Video element powered by Shaka Player for DASH, HLS, and progressive playback with DRM
 - [SpotifyAudio](./reference/spotify-audio.md): Audio component that plays Spotify tracks, episodes, playlists, and shows through the Spotify embed
 - [TikTokVideo](./reference/tiktok-video.md): Video component that plays TikTok videos through the TikTok embed player
 - [TwitchVideo](./reference/twitch-video.md): Video component that plays Twitch videos and live channels through the Twitch embed player
+- [Video](./reference/video.md): Native video playback that can provide media to a Video.js player
 - [VimeoVideo](./reference/vimeo-video.md): Video component that plays Vimeo videos and live events through the Vimeo player
 - [YouTubeVideo](./reference/youtube-video.md): Video component that plays YouTube videos and playlists through the YouTube IFrame player
 
@@ -140,23 +161,48 @@ API reference for the hooks, utilities, controllers, and mixins used to integrat
 - [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
+- [useContainer](./reference/use-container.md): Hook to access the media container from the nearest 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
+#### Advanced
+
+- [Translation phrases](./reference/translation-phrases.md): Semantic i18n keys, their English defaults, and the player UI that uses them
 - [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
+- [I18nContext](./reference/i-18-n-context.md): React context carrying the active translator and locale
+- [mergeProps](./reference/merge-props.md): Utility for combining React props with predictable handler, class, and style precedence
 - [renderElement](./reference/render-element.md): Utility for rendering UI component elements with state-driven props and render prop support
+- [useAttachMedia](./reference/use-attach-media.md): Hook that attaches an HTML media element to a media engine host
 - [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
+- [useComposedRefs](./reference/use-composed-refs.md): Hook that updates multiple React refs through one stable callback ref
 - [useContainerAttach](./reference/use-container-attach.md): Hook to register a custom container element with the player context
+- [useDestroy](./reference/use-destroy.md): Hook that destroys an imperative instance after a real React unmount
+- [useDialogContext](./reference/use-dialog-context.md): Hook to access the nearest dialog compound-component context
+- [useDoubleTapGesture](./reference/use-double-tap-gesture.md): Hook that registers a double-tap gesture for the current Player
+- [useErrorDialogContext](./reference/use-error-dialog-context.md): Hook to access the nearest ErrorDialog compound-component context
+- [useHotkey](./reference/use-hotkey.md): Hook that registers a keyboard shortcut for the current Player
+- [useHotkeyShortcut](./reference/use-hotkey-shortcut.md): Hook that reads display and ARIA metadata for a registered Player hotkey
+- [useLatestRef](./reference/use-latest-ref.md): Hook that exposes the latest rendered value through a stable ref
 - [useMediaAttach](./reference/use-media-attach.md): Hook to register a custom media element with the player context
+- [useMediaComponent](./reference/use-media-component.md): Hook that registers a media component with the current Player media host
+- [useMediaInstance](./reference/use-media-instance.md): Hook that owns a media instance within the current Player
+- [useMenuContext](./reference/use-menu-context.md): Hook to access the nearest Menu compound-component context
+- [useOptionalContainer](./reference/use-optional-container.md): Hook to access a Player container when one is available
+- [useOptionalMenuContext](./reference/use-optional-menu-context.md): Hook to access a Menu context when one is available
+- [useOptionalPlayer](./reference/use-optional-player.md): Hook to access or select Player state when a Player is available
 - [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
+- [usePopoverContext](./reference/use-popover-context.md): Hook to access the nearest Popover compound-component context
 - [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
+- [useSlider](./reference/use-slider.md): Hook for connecting slider input behavior to custom React elements
+- [useSnapshot](./reference/use-snapshot.md): Hook to subscribe to a State container's current value
+- [useTapGesture](./reference/use-tap-gesture.md): Hook that registers a tap gesture for the current Player
+- [useTooltipContext](./reference/use-tooltip-context.md): Hook to access the nearest Tooltip compound-component context

package/docs/reference/airplay-button.md

@@ -2,6 +2,14 @@
 
 Accessible AirPlay toggle button that opens the WebKit playback target picker and reflects session state
 
+## Import
+
+tsx
+
+```
+import { AirPlayButton } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx
@@ -169,7 +177,7 @@ Whether the button is disabled.
 
 `label`
 
-`Text | string | Text) | function`
+`object`
 
 `''`
 
@@ -181,7 +189,7 @@ Custom label for the button.
 
 Type
 
-`Text | string | ((state: AirPlayButtonState) => string | Text)`
+`{ key: string; text: string } | string | ((state: AirPlayButtonState) => Text | string)`
 
 ### State
 
@@ -193,6 +201,10 @@ Type
 
 Details
 
+`label`
+
+`{ key: string; text: string } | string`
+
 `state`
 
 `'disconnected' | 'connecting' | 'conn...`
@@ -209,7 +221,7 @@ Type
 
 `availability`
 
-`'available' | 'unavailable' | 'unsupp...`
+`MediaFeatureAvailability`
 
 ▸
 
@@ -217,10 +229,6 @@ Description
 
 Whether AirPlay is available on the active platform and media.
 
-Type
-
-`'available' | 'unavailable' | 'unsupported'`
-
 `disabled`
 
 `boolean`
@@ -241,10 +249,6 @@ Description
 
 Whether the button is hidden until AirPlay is available.
 
-`label`
-
-`Text | string`
-
 ### Data attributes
 
 Attribute
@@ -261,7 +265,7 @@ Details
 
 Description
 
-Current AirPlay 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 AirPlay connection state.
 
 Type
 
@@ -269,17 +273,13 @@ Type
 
 `data-availability`
 
-`'available' | 'unavailable' | 'unsupp...`
+`MediaFeatureAvailability`
 
 ▸
 
 Description
 
-Whether AirPlay is available on the active platform and media. @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 AirPlay is available on the active platform and media.
 
 `data-disabled`