@videojs/react 10.0.0-beta.9 → 10.0.0-rc.1

package/docs/how-to/show-timeline-thumbnail-previews.md

@@ -0,0 +1,163 @@
+# Show timeline thumbnail previews
+
+Preview frames along the timeline while the user scrubs, powered by a storyboard track.
+
+Show preview frames along the timeline while the user scrubs, like YouTube’s seek previews.
+
+Using Mux?
+
+With [MuxVideo](../reference/mux-video.md), the storyboard track is wired up for you — skip adding the track and go straight to the slider thumbnail. For other services, generate the storyboard on their platform and add the track yourself.
+
+Note
+
+Using a pre-built [skin](../concepts/skins.md)? It already includes the controls shown here. You may still need the media or player setup in this guide. The component examples are for building your own player UI from individual [components](../concepts/ui-components.md).
+
+## Recommended approach
+
+Add a `kind="metadata"` track labeled `thumbnails` whose cues reference storyboard images, then put a slider thumbnail inside the [TimeSlider](../reference/time-slider.md). Scrubbing shows the frame under the pointer; the thumbnail reads the pointer time from the slider, so it takes no props.
+
+App.tsx
+
+App.css
+
+```
+import { Container, createPlayer, Slider, TimeSlider } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const { Player } = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player>
+      <Container className="media-container">
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop crossOrigin="anonymous">
+          <track kind="metadata" label="thumbnails" src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.vtt" default />
+        </Video>
+        <TimeSlider.Root className="media-time-slider">
+          <TimeSlider.Track className="media-slider-track">
+            <TimeSlider.Fill className="media-slider-fill" />
+          </TimeSlider.Track>
+          <Slider.Thumbnail className="media-slider-thumbnail" />
+        </TimeSlider.Root>
+      </Container>
+    </Player>
+  );
+}
+```
+```
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.media-time-slider {
+  position: absolute;
+  right: 10px;
+  bottom: 6px;
+  left: 10px;
+  display: flex;
+  align-items: center;
+  height: 20px;
+  cursor: pointer;
+}
+
+.media-slider-track {
+  position: absolute;
+  right: 0;
+  left: 0;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  transition: height 150ms ease;
+}
+
+.media-time-slider[data-interactive] .media-slider-track {
+  height: 6px;
+}
+
+.media-slider-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--media-slider-fill);
+  height: 100%;
+  background: white;
+  border-radius: 9999px;
+}
+
+/* Reveal the preview over the pointer while it is on the slider. */
+.media-slider-thumbnail {
+  position: absolute;
+  bottom: 100%;
+  left: var(--media-slider-pointer);
+  max-width: 160px;
+  margin-bottom: 8px;
+  pointer-events: none;
+  border-radius: 4px;
+  opacity: 0;
+  transform: translateX(-50%);
+  transition: opacity 150ms ease;
+}
+
+.media-time-slider[data-pointing] .media-slider-thumbnail {
+  opacity: 1;
+}
+
+.media-slider-thumbnail[data-hidden] {
+  display: none;
+}
+```
+
+## How it works
+
+*   Previews come from a storyboard: a `kind="metadata"` text track labeled `thumbnails` whose WebVTT cues map time ranges to image URLs (optionally with sprite coordinates). The [text track feature](../reference/feature-text-tracks.md) exposes these as `thumbnailCues` and `thumbnailTrackSrc`.
+*   The slider thumbnail renders the storyboard frame for the slider’s pointer position. While the pointer is over the slider, the slider sets `data-pointing` and the `--media-slider-pointer` CSS variable; the demo’s CSS uses them to reveal the preview and position it over the pointer.
+*   To render a storyboard frame outside the slider — a fixed preview for a chapter list, for example — use the standalone [Thumbnail](../reference/thumbnail.md) component with an explicit `time`.
+
+Each cue’s text is an image URL. An optional `#xywh=x,y,w,h` fragment crops one frame out of a sprite sheet:
+
+storyboard.vtt
+
+```
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+storyboard.jpg#xywh=0,0,256,160
+
+00:00:05.000 --> 00:00:10.000
+storyboard.jpg#xywh=256,0,256,160
+```
+
+## Availability and constraints
+
+*   Thumbnails require a storyboard asset generated alongside the media; the player doesn’t extract frames from the video itself.
+*   Cross-origin storyboards need CORS headers, and `crossOrigin` on the media element for the track to load.
+*   Cues load asynchronously. The track appears before its cues are parsed, so previews fill in when the track finishes loading.
+*   Storyboard images download on demand; oversized sprite sheets hurt seek-preview responsiveness more than they help quality.
+
+## Troubleshooting
+
+### Thumbnails don’t appear while scrubbing
+
+Confirm the storyboard track is `kind="metadata"` with `label="thumbnails"` and has the `default` attribute — the browser leaves a non-default track disabled and never loads its cues. Then confirm the VTT loads (network panel) and cross-origin assets have CORS headers with `crossOrigin` set on the media element.
+
+### Thumbnails are blurry or slow
+
+Regenerate the storyboard with a larger frame size, or split giant sprite sheets into smaller images.
+
+## Related components
+
+*   [Thumbnail](../reference/thumbnail.md)
+*   [Time slider](../reference/time-slider.md)
+
+## Related API
+
+*   [Text track feature](../reference/feature-text-tracks.md)
+
+## Related guides
+
+*   [Add a poster and loading placeholder](./add-a-poster-and-loading-placeholder.md)
+*   [Show captions and subtitles](./show-captions-and-subtitles.md)

package/docs/how-to/use-picture-in-picture.md

@@ -0,0 +1,150 @@
+# Use picture-in-picture
+
+Pop the video into a floating window, with availability detection and state that tracks every entry path.
+
+Pop the video into a floating always-on-top window so it keeps playing while the user does something else.
+
+Note
+
+Using a pre-built [skin](../concepts/skins.md)? It already includes the controls shown here. You may still need the media or player setup in this guide. The component examples are for building your own player UI from individual [components](../concepts/ui-components.md).
+
+## Recommended approach
+
+Add a [PiPButton](../reference/pip-button.md). It requests and exits picture-in-picture, reflects the current state, and renders nothing when picture-in-picture is unsupported.
+
+App.tsx
+
+App.css
+
+```
+import { Container, createPlayer, PiPButton } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const { Player } = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player>
+      <Container className="media-container">
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
+        <PiPButton
+          className="media-pip-button"
+          render={(props, state) => <button {...props}>{state.pip ? 'Exit PiP' : 'Enter PiP'}</button>}
+        />
+      </Container>
+    </Player>
+  );
+}
+```
+```
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.media-pip-button {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  padding-block: 8px;
+  padding-inline: 20px;
+  color: black;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  backdrop-filter: blur(10px);
+}
+```
+
+## How it works
+
+The [picture-in-picture feature](../reference/feature-pip.md) puts three things in player state.
+
+`pip` is `true` while the video is in a floating window. It tracks every way in and out — your button, the native controls, or a control the browser adds on its own.
+
+`pipAvailability` answers “can I offer this?” It starts as `'unavailable'`. Once the feature attaches to a media element, it settles to `'available'` or `'unsupported'`.
+
+`requestPictureInPicture()`, `exitPictureInPicture()`, and `togglePictureInPicture()` change the presentation. If the browser blocks a request, the returned promise rejects. In a browser with no picture-in-picture API, the actions resolve without changing anything.
+
+Picture-in-picture and fullscreen are exclusive: requesting one exits the other first.
+
+## Availability and constraints
+
+*   Show picture-in-picture controls only when `pipAvailability` is `'available'`. PiPButton handles this for you.
+*   Requests must come from a user gesture; browsers reject requests outside one.
+*   Firefox 153 (July 2026) added the programmatic picture-in-picture API. Earlier versions, including Firefox ESR 140, report `'unsupported'` even though they offer their own built-in picture-in-picture toggle to users.
+*   On iOS, picture-in-picture is supported on iPhone and iPad through the WebKit presentation mode; the player handles this path for you.
+*   The browser owns the floating window: its size, position, and built-in controls aren’t yours to style.
+*   The user can close the window or return the video at any time. React to `pip` state instead of assuming your button is the only entry and exit.
+
+## Common variations
+
+### Request picture-in-picture from app logic
+
+Enter picture-in-picture when the user scrolls the player out of view or navigates within your app. This still requires a recent user gesture in most browsers, so tie it to an interaction:
+
+tsx
+
+```
+import { Container } from '@videojs/react';
+import { usePlayer, Video, VideoPlayer } from '@videojs/react/video';
+
+function WatchElsewhereButton() {
+  const store = usePlayer();
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        store.requestPictureInPicture().catch(() => {
+          // Rejected: no video data yet, or blocked by the browser.
+        });
+      }}
+    >
+      Keep watching while you browse
+    </button>
+  );
+}
+
+export default function App() {
+  return (
+    <VideoPlayer>
+      <Container>
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" muted playsInline />
+        <WatchElsewhereButton />
+      </Container>
+    </VideoPlayer>
+  );
+}
+```
+
+## Troubleshooting
+
+### The picture-in-picture button doesn’t render
+
+`pipAvailability` is `'unsupported'` — the browser has no programmatic picture-in-picture API (Firefox before 153), or the media isn’t a video.
+
+### The request rejects
+
+The video has no data yet (wait for it to be ready), the call wasn’t tied to a user gesture, or the browser blocked it. Handle the rejection rather than assuming entry succeeded.
+
+### State is wrong after the user closes the floating window
+
+Read `pip` from player state instead of tracking entry and exit yourself; it stays in sync with every path in and out of picture-in-picture.
+
+## Related components
+
+*   [PiP button](../reference/pip-button.md)
+
+## Related API
+
+*   [Picture-in-picture feature](../reference/feature-pip.md)
+
+## Related guides
+
+*   [Go fullscreen and lock orientation](./go-fullscreen-and-lock-orientation.md)
+*   [Cast to AirPlay and Chromecast](./cast-to-airplay-and-chromecast.md)

package/docs/llms.txt

@@ -0,0 +1,239 @@
+# Video.js v10 — React Documentation
+
+## Start here
+
+Install Video.js, understand its main pieces, or move an existing player to Video.js 10.
+
+- [Installation](./how-to/installation.md): Install Video.js and build your first player with streaming support and accessible controls
+- [Overview](./concepts/overview.md): How Video.js players are structured — state, UI, media, and extensions
+- [Why Video.js?](./concepts/why-videojs.md): The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
+- [v10 Roadmap](./concepts/v10-roadmap.md): Timeline and milestones for Video.js v10 rebuild and the future of v8
+### Migrate to Video.js 10
+
+Guides for moving an existing player integration to Video.js v10, one per player you might be coming from.
+
+- [Migrate from Video.js 8](./how-to/migrate-from-video-js-8.md): Move a Video.js 8 integration to v10, mapping the options object, techs, plugins, and player API onto composed components
+- [Migrate from Mux Player](./how-to/migrate-from-mux-player.md): Move a Mux Player embed to Video.js v10, splitting one element into a player, a media, and a skin
+- [Migrate from Plyr](./how-to/migrate-from-plyr.md): Move an existing Plyr integration to Video.js v10, mapping Plyr options and its instance API onto components and player state
+- [Migrate from Media Chrome](./how-to/migrate-from-media-chrome.md): Map Media Chrome's controller, elements, and attributes onto Video.js v10, where most of the work is renaming and reshaping rather than rewriting
+
+## Tooling
+
+Guidance for AI tools, browser support, TypeScript, bundlers, and loading Video.js from a CDN.
+
+- [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
+- [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
+
+Understanding-oriented pages that explain how and why things work. Read these to build a mental model of the library.
+
+- [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 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
+- [Mux Data](./concepts/mux-data.md): Monitor playback quality and viewer experience by adding the Mux Data extension to a player
+- [Security](./concepts/security.md): How to configure Content Security Policy for your video player
+
+## How to
+
+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 extension. Guides lead with the recommended path, then the constraints and variations needed to apply it.
+
+- [Customize skins](./how-to/customize-skins.md): Style a packaged Video.js skin or copy its source to change controls, layout, styles, and interactions
+- [Build your own UI component](./how-to/build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.
+- [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.
+
+## Components
+
+API reference for skins, interface components, media components, and service integrations.
+
+### Skins
+
+API reference for the packaged skins each preset ships.
+
+- [VideoSkin](./reference/video-skin.md): The video preset's default skin with the modern, frosted look
+- [MinimalVideoSkin](./reference/video-minimal-skin.md): The video preset's visually lighter skin, closer to a classic control bar
+- [AudioSkin](./reference/audio-skin.md): The audio preset's default skin with the modern, frosted look
+- [MinimalAudioSkin](./reference/audio-minimal-skin.md): The audio preset's visually lighter skin, closer to a classic control bar
+- [LiveVideoSkin](./reference/live-video-skin.md): The live video preset's default skin, which swaps time controls for a Live button
+- [MinimalLiveVideoSkin](./reference/live-video-minimal-skin.md): The live video preset's visually lighter skin, closer to a classic control bar
+- [LiveAudioSkin](./reference/live-audio-skin.md): The live audio preset's default skin, which swaps time controls for a Live button
+- [MinimalLiveAudioSkin](./reference/live-audio-minimal-skin.md): The live audio preset's visually lighter skin, closer to a classic control bar
+- [BackgroundVideoSkin](./reference/background-video-skin.md): The background preset's chrome-less skin for ambient video
+
+### UI
+
+API reference for components used to build a media player interface.
+
+- [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
+- [Hotkey](./reference/hotkey.md): Register a keyboard shortcut that invokes a player action
+- [LiveButton](./reference/live-button.md): Accessible live indicator button that seeks to the live edge when pressed
+- [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
+- [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
+- [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
+
+API reference for media components that handle streaming protocols and 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
+- [WistiaVideo](./reference/wistia-video.md): Video component that plays Wistia-hosted videos through Wistia's web component
+- [YouTubeVideo](./reference/youtube-video.md): Video component that plays YouTube videos and playlists through the YouTube IFrame player
+
+### Extensions
+
+API reference for extensions that connect external services to the player.
+
+- [GoogleCast](./reference/google-cast.md): Options for the Google Cast extension that configures the receiver and load request
+- [MuxData](./reference/mux-data.md): Options for the Mux Data extension that monitors playback quality
+
+## Helpers
+
+Reference for player features and lower-level tools used to build or extend a player.
+
+### Player Features
+
+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
+- [Controls](./reference/feature-controls.md): User activity and controls visibility state for the player store
+- [Error](./reference/feature-error.md): Media error state and actions for the player store
+- [Fullscreen](./reference/feature-fullscreen.md): Fullscreen state and actions for the player store
+- [Live](./reference/feature-live.md): Live edge state for the player store
+- [Metadata](./reference/feature-metadata.md): Resolved title and poster values for the player store
+- [Orientation lock](./reference/feature-orientation-lock.md): Screen orientation locking while fullscreen is active
+- [Picture-in-picture](./reference/feature-pip.md): Picture-in-picture state and actions for the player store
+- [Playback](./reference/feature-playback.md): Play/pause state and actions for the player store
+- [Playback rate](./reference/feature-playback-rate.md): Playback speed state and actions for the player store
+- [Quality](./reference/feature-quality.md): Video rendition state and actions for the player store
+- [Audio track](./reference/feature-audio-track.md): Audio track state and actions for the player store
+- [Remote Playback](./reference/feature-remote-playback.md): Remote playback state and actions for the player store
+- [Source](./reference/feature-source.md): Media source state and actions for the player store
+- [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
+
+### 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
+- [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
+
+Lower-level translation, player context, lifecycle, attachment, and state tools.
+
+- [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 playback adapter
+- [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
+- [useMediaExtension](./reference/use-media-extension.md): Hook for registering a custom extension with the current Player media adapter
+- [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
+- [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