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

package/docs/reference/components/fullscreen-button.md

@@ -0,0 +1,132 @@
+# FullscreenButton
+
+Accessible fullscreen toggle button with keyboard support and state reflection
+
+## Import
+
+```tsx
+import { FullscreenButton } from '@videojs/react';
+```
+
+## Anatomy
+
+```tsx
+<FullscreenButton />
+```
+
+## Behavior
+
+Toggles fullscreen mode. The button derives two state hooks from `availability`:
+
+- **`disabled`** (`true` until fullscreen is available, or when the `disabled` prop is set) — sets `aria-disabled="true"` and `data-disabled`. A prop-disabled, available button stays focusable but does not activate.
+- **`hidden`** (`true` while fullscreen is `"unavailable"` or `"unsupported"`) — the component returns `null`.
+
+## Styling
+
+You can style the button based on fullscreen state:
+
+React renders a `<button>` element. Add a `className` to style it:
+
+```css
+/* In fullscreen */
+.fullscreen-button[data-fullscreen] {
+  background: red;
+}
+
+/* Non-interactive (disabled prop) */
+.fullscreen-button[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+```
+
+The button remains hidden until fullscreen is available.
+
+The component returns `null`. No extra CSS is required.
+
+## Accessibility
+
+Renders a `<button>` with an automatic `aria-label`: “Enter fullscreen” or “Exit fullscreen”. Override with the `label` prop. Keyboard activation: Enter / Space.
+
+## Examples
+
+### Basic Usage
+
+**App.tsx**
+
+```tsx
+import { Container, createPlayer, FullscreenButton } 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 />
+        <FullscreenButton
+          className="media-fullscreen-button"
+          render={(props, state) => <button {...props}>{state.fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}</button>}
+        />
+      </Container>
+    </Player>
+  );
+}
+```
+
+**App.css**
+
+```css
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.media-fullscreen-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);
+}
+```
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `disabled` | `boolean` | `false` | Whether the button is disabled. |
+| `label` | `{ key: string; text: string } \| string \| ((state: FullscreenButtonState) => Text \| string)` | `''` | Custom label for the button. |
+
+### State
+
+State is accessible via the `render`, `className`, and `style` props.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `fullscreen` | `boolean` | Whether fullscreen mode is currently active. |
+| `label` | `{ key: string; text: string } \| string` | |
+| `availability` | `MediaFeatureAvailability` | Whether fullscreen can be requested on this platform. |
+| `disabled` | `boolean` | Non-interactive but still focusable (mirrors `aria-disabled`). |
+| `hidden` | `boolean` | Whether the button is hidden until fullscreen is available. |
+
+### Data attributes
+
+| Attribute | Type | Description |
+| --- | --- | --- |
+| `data-fullscreen` | — | Present when fullscreen mode is active. |
+| `data-availability` | `MediaFeatureAvailability` | Indicates fullscreen availability (`available`, `unavailable`, `unsupported`). |
+| `data-disabled` | — | Present when the button is non-interactive (mirrors `aria-disabled`). |
+| `data-hidden` | — | Present when the button is hidden because fullscreen is not available. |

package/docs/reference/components/gesture.md

@@ -0,0 +1,121 @@
+# Gesture
+
+Map tap and double-tap gestures to player actions
+
+## Import
+
+```tsx
+import { Gesture } from '@videojs/react';
+```
+
+## Anatomy
+
+```tsx
+<Gesture type="doubletap" region="right" pointer="touch" action="seekStep" value={10} />
+```
+
+## Behavior
+
+`Gesture` is a behavior component: it renders no visible interface. Place it inside a [Container](./player-container.md) to map a `tap` or `doubletap` gesture to a player action.
+
+A tap must use the primary pointer and complete within 250 milliseconds. When a matching double-tap gesture exists, the first tap waits briefly to see whether a second tap follows.
+
+Use `pointer` to accept only `mouse`, `touch`, or `pen` input. Use `region` to divide the container horizontally:
+
+- Left and right regions split the container into halves.
+- Left, center, and right regions split it into thirds.
+- A center-only region covers the full container.
+- A single left or right region covers that half of the container.
+
+An unregional gesture acts as a fallback outside the active regions. When several registrations match the same gesture, the first registration wins.
+
+Choose a built-in `action` from the API reference below, or use an application-defined name to call a same-named action on the player store. Pass `value` as seconds for `seekStep` or as a volume delta such as `0.05` or `-0.05` for `volumeStep`. When omitted, these actions use the 10-second or five-percentage-point default. A left-region seek gesture uses the negative step. Unknown action names do nothing and warn in development.
+
+## Accessibility
+
+Gestures supplement visible, keyboard-operable controls; they should never be the only way to perform an action. Gestures ignore pointer activity that begins on interactive controls, links, form fields, menu items, or elements marked with `data-interactive`.
+
+## Examples
+
+### Basic Usage
+
+This example follows the common video-player pattern: click to play or pause, double-click the left or right side to seek ten seconds, and double-click the center to toggle fullscreen.
+
+**App.tsx**
+
+```tsx
+import { Container, createPlayer, Gesture, PlayButton } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const { Player } = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player>
+      <Container className="react-gesture-basic">
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" muted playsInline />
+        <p className="react-gesture-basic__instructions">Click: play/pause · Double-click: −10s · fullscreen · +10s</p>
+        <PlayButton
+          className="react-gesture-basic__button"
+          render={(props, state) => (
+            <button {...props}>{state.ended ? 'Replay' : state.paused ? 'Play' : 'Pause'}</button>
+          )}
+        />
+        <Gesture type="tap" action="togglePaused" pointer="mouse" region="center" />
+        <Gesture type="doubletap" action="seekStep" value={-10} region="left" />
+        <Gesture type="doubletap" action="toggleFullscreen" region="center" />
+        <Gesture type="doubletap" action="seekStep" value={10} region="right" />
+      </Container>
+    </Player>
+  );
+}
+```
+
+**App.css**
+
+```css
+.react-gesture-basic {
+  position: relative;
+}
+
+.react-gesture-basic video {
+  width: 100%;
+}
+
+.react-gesture-basic__instructions {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  padding: 6px 10px;
+  margin: 0;
+  color: white;
+  pointer-events: none;
+  background: rgb(0 0 0 / 70%);
+  border-radius: 4px;
+}
+
+.react-gesture-basic__button {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  padding: 8px 20px;
+  color: black;
+  cursor: pointer;
+  background: rgb(255 255 255 / 80%);
+  border: 1px solid rgb(255 255 255 / 30%);
+  border-radius: 9999px;
+}
+```
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `action` (required) | `'togglePaused' \| 'toggleMuted' \| 'toggleFullscreen' \| 'toggleSubtitles' \| 'togglePictureInPicture' \| 'toggleControls' \| 'seekStep' \| 'volumeStep' \| 'speedUp' \| 'speedDown' \| string & {}` | — | Built-in player action or same-named custom store action to run when the gesture is recognized. |
+| `type` (required) | `'tap' \| 'doubletap'` | — | Gesture to recognize. |
+| `disabled` | `boolean` | — | Whether the gesture is disabled. |
+| `pointer` | `'mouse' \| 'touch' \| 'pen'` | — | Pointer type that may activate the gesture. All pointer types are accepted when omitted. |
+| `region` | `'left' \| 'center' \| 'right'` | — | Optional horizontal part of the container that may activate the gesture. |
+| `value` | `number` | — | Numeric value passed to actions such as `seekStep` and `volumeStep`. Uses their shared step when omitted. |

package/docs/reference/components/google-cast.md

@@ -0,0 +1,39 @@
+# GoogleCast
+
+Options for the Google Cast extension that configures the receiver and load request
+
+Adds the [Google Cast extension](../../guides/architecture.md) to the player’s media. It renders nothing — place it inside the player as a sibling of the media element, and pair it with a [CastButton](./cast-button.md). See [Cast to AirPlay and Chromecast](../../guides/casting.md) for the complete setup.
+
+## Import
+
+```bash
+pnpm add @videojs/react @videojs/google-cast
+```
+
+```tsx
+import { GoogleCast } from '@videojs/react/extensions/google-cast';
+```
+
+## Anatomy
+
+```tsx
+<GoogleCast />
+```
+
+## Options
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `receiver` | `string` | Cast receiver application ID. Defaults to Google’s Default Media Receiver (`CC1AD845`) |
+| `src` | `string` | Source URL loaded on the receiver. Defaults to the source the browser is playing |
+| `contentType` | `string` | MIME type of the Cast source. When unset, the receiver infers it from the URL |
+| `streamType` | `'on-demand' \| 'live'` | Stream type reported to the receiver. Falls back to the player’s stream type |
+| `customData` | `object` | Custom data sent to the receiver with each load request |
+
+When the Cast `src` is an HLS playlist, Video.js detects the segment format and sets the receiver’s `hlsSegmentFormat` and `hlsVideoSegmentFormat` load-request fields. The Default Media Receiver plays HLS natively, so no extra receiver setup is needed.
+
+## See also
+
+- [Cast to AirPlay and Chromecast](../../guides/casting.md): Add remote playback to a player
+- [CastButton component reference](./cast-button.md)
+- [Remote Playback feature reference](../api/feature-remote-playback.md)

package/docs/reference/components/hls-audio.md

@@ -0,0 +1,55 @@
+# HlsAudio
+
+Audio-only HLS element that plays the audio rendition of an HLS stream
+
+Audio-only HLS element that plays just the audio rendition of an HLS stream — even when the source is a mixed audio/video manifest. Useful for audio podcast players, background audio, and bandwidth-constrained contexts where downloading video data would be wasted. For full audio/video HLS playback, see the [HLS video component](./hls-video.md).
+
+## Import
+
+```tsx
+import { HlsAudio } from '@videojs/react/media/hls-audio';
+```
+
+## Examples
+
+### Basic Usage
+
+**App.tsx**
+
+```tsx
+import { HlsAudio } from '@videojs/react/media/hls-audio';
+
+export default function BasicUsage() {
+  return <HlsAudio className="hls-audio" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" controls />;
+}
+```
+
+**App.css**
+
+```css
+.hls-audio {
+  width: 100%;
+  height: 54px;
+}
+```
+
+## API Reference
+
+### Props
+
+Accepts the standard React props for a native `<audio>`, plus these Video.js-specific props:
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `disableRemotePlayback` | `boolean` | `false` | |
+| `preload` | `'' \| 'none' \| 'metadata' \| 'auto'` | `''` | Preload type (`'none'` / `'metadata'` / `'auto'`). |
+| `source` | `{ src?: string; type?: string; drm?: Partial<Record<string, DrmSystemConfig>> } \| null` | `null` | Structured source, the same shape the video flavor takes so one object serves either. `drm` is accepted and inert: this engine composes no EME. It is kept in the shape rather than removed so a source can be handed to both flavors — and because Mux encrypts video renditions and leaves audio clear, so a protected playback ID plays here regardless. |
+| `src` | `string` | `''` | |
+
+### Ref
+
+Forwards its ref to the rendered `<audio>`. The ref is an [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) and exposes its complete native property and method API.
+
+### Events
+
+Handle standard media events with React event props such as `onPlay` and `onTimeUpdate`. For native events without a React prop, attach a listener through the ref with `addEventListener`.

package/docs/reference/components/hls-background-video.md

@@ -0,0 +1,41 @@
+# HlsBackgroundVideo
+
+HLS background video without controls, audio, captions, or adaptive quality
+
+HlsBackgroundVideo plays an HLS source through the SPF background engine. It is fixed to muted, autoplaying, inline, looped playback and omits controls, audio, text, DRM, and adaptive rendition switching.
+
+See [Add a background video](../../guides/background-video.md) for layout, poster, accessibility, and source-choice guidance.
+
+## Import
+
+```tsx
+import { HlsBackgroundVideo } from '@videojs/react/media/hls-background-video';
+```
+
+## Source behavior
+
+`src` takes a complete HLS manifest URL. The engine starts loading when it receives the URL and pins the largest rendition that fits the screen. The ladder may be video-only, but its video renditions must use fMP4/CMAF. This engine does not include MPEG-TS transmuxing or DRM playback.
+
+```tsx
+<HlsBackgroundVideo
+  src="https://media.example.com/hero.m3u8"
+  crossOrigin="anonymous"
+  onError={handleError}
+/>
+```
+
+There is no `source` object, `preload` mode, or opt-out for muted, autoplay, and loop. Assigning a new `src` restarts playback from scratch.
+
+## API
+
+| Member | Description |
+| --- | --- |
+| `src` | HLS manifest URL |
+| `onError` | Fires on the rendered `<video>` when SPF reports a fatal source error |
+| `ref` | Ref to the rendered native `<video>` element |
+
+`onError` receives an `error` event dispatched on the rendered `<video>`. The video’s own `error` can remain `null` because SPF, rather than the browser, rejected the source.
+
+## Styling
+
+The component renders a native `<video>`. Set its size, `object-fit`, and `object-position` through `className` or `style`.

package/docs/reference/components/hls-video.md

@@ -0,0 +1,56 @@
+# HlsVideo
+
+Lightweight HLS video element with minimal bundle size
+
+The lightweight HLS video element, optimized for minimal bundle size. The [hls.js video component](./hlsjs-video.md) is the larger, more compatible alternative.
+
+## Import
+
+```tsx
+import { HlsVideo } from '@videojs/react/media/hls-video';
+```
+
+## Examples
+
+### Basic Usage
+
+**App.tsx**
+
+```tsx
+import { HlsVideo } from '@videojs/react/media/hls-video';
+
+export default function BasicUsage() {
+  return <HlsVideo className="hls-video" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" autoPlay muted playsInline loop />;
+}
+```
+
+**App.css**
+
+```css
+.hls-video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+
+## API Reference
+
+### Props
+
+Accepts the standard React props for a native `<video>`, plus these Video.js-specific props:
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `disableRemotePlayback` | `boolean` | `false` | |
+| `preload` | `'' \| 'none' \| 'metadata' \| 'auto'` | `''` | Preload type (`'none'` / `'metadata'` / `'auto'`). |
+| `source` | `{ src?: string; type?: string; drm?: Partial<Record<string, DrmSystemConfig>> } \| null` | `null` | Structured source: the manifest URL plus what a URL cannot carry, which today is the license servers for protected content. Setting it derives `src`. Assigning the same object back costs nothing — changing anything takes a new one. |
+| `src` | `string` | `''` | |
+| `streamType` | `'on-demand' \| 'live' \| 'unknown'` | `'unknown'` | The source's stream type — `'live'`, `'on-demand'`, or `'unknown'` until a media playlist has been parsed. Setting a non-`'unknown'` value pins a user override (detection stops updating it); setting `'unknown'` reverts to the engine's detected value. |
+
+### Ref
+
+Forwards its ref to the rendered `<video>`. The ref is an [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) and exposes its complete native property and method API.
+
+### Events
+
+Handle standard media events with React event props such as `onPlay` and `onTimeUpdate`. For native events without a React prop, attach a listener through the ref with `addEventListener`.

package/docs/reference/components/hlsjs-video.md

@@ -0,0 +1,70 @@
+# HlsJsVideo
+
+HLS video element powered by hls.js for adaptive bitrate streaming
+
+HLS video element powered by [hls.js](https://github.com/video-dev/hls.js/) for adaptive bitrate streaming, with full feature support across every browser. It’s more compatible than the lightweight [HLS video component](./hls-video.md), which is smaller and covers most HLS playback. For browser-native playback, see the [native HLS video component](./native-hls-video.md).
+
+## Import
+
+```bash
+pnpm add @videojs/hlsjs-video
+```
+
+```tsx
+import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
+```
+
+## Examples
+
+### Basic Usage
+
+**App.tsx**
+
+```tsx
+import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
+
+export default function BasicUsage() {
+  return <HlsJsVideo className="hlsjs-video" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" autoPlay muted playsInline loop />;
+}
+```
+
+**App.css**
+
+```css
+.hlsjs-video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+
+## API Reference
+
+### Props
+
+Accepts the standard React props for a native `<video>`, plus these Video.js-specific props:
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `disableRemotePlayback` | `unknown` | `false` | Whether remote playback (AirPlay, Google Cast) is disabled for this media. |
+| `preload` | `MediaPreloadType` | `'metadata'` | Preload type (`'none'` / `'metadata'` / `'auto'`). |
+| `source` | `{ src?: string; type?: 'application/vnd.apple.mpegurl' \| 'video/mp4'; preferPlayback?: 'mse' \| 'native'; drm?: Partial<Record<KeySystem, DrmSystemConfig>>; maxAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; capRenditionToPlayerSize?: boolean; minAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; engine?: HlsEngineConfig } \| null` | `null` | Structured source: what to play (`src`, an optional `type`) plus how to play it (`preferPlayback`, `engine`). Assigning it derives `src`. Sources are compared structurally, so reassigning an equivalent object is a no-op. Only a change to the engine options (or to the resolved content type) recreates the playback engine. |
+| `src` | `string` | `''` | Media source URL. Assigning it replaces the identity half of `source` and leaves `type` and the engine options intact, so changing the URL never disturbs engine configuration. |
+| `streamType` | `'on-demand' \| 'live' \| 'unknown'` | `'unknown'` | Current stream type (`'on-demand'` / `'live'` / `'unknown'`). |
+
+### Engine options
+
+#### `source.engine.nativeHls`
+
+When playback falls back to the browser’s own HLS, hls.js isn’t involved and its options don’t apply. This configures that path instead.
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `drmSystems` | `Partial<Record<KeySystem, DrmSystemConfig>> \| undefined` | License servers for protected content, keyed by EME key system id. An escape hatch for licensing native playback differently from every other path: naming it replaces `source.drm` here, and nowhere else. |
+
+### Ref
+
+Forwards its ref to the rendered `<video>`. The ref is an [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) and exposes its complete native property and method API.
+
+### Events
+
+Handle standard media events with React event props such as `onPlay` and `onTimeUpdate`. For native events without a React prop, attach a listener through the ref with `addEventListener`.

package/docs/reference/components/hotkey.md

@@ -0,0 +1,119 @@
+# Hotkey
+
+Register a keyboard shortcut that invokes a player action
+
+## Import
+
+```tsx
+import { Hotkey } from '@videojs/react';
+```
+
+## Anatomy
+
+```tsx
+<Hotkey keys="Space" action="togglePaused" />
+```
+
+## Behavior
+
+`Hotkey` is a behavior component: it renders no visible interface. Place it inside a [Container](./player-container.md) to register one key pattern and player action.
+
+By default, the shortcut responds while the player container has focus. Set `target="document"` only when the shortcut should apply across the entire document.
+
+Key patterns are case-insensitive and may use:
+
+- Named keys such as `Space`, `ArrowLeft`, and `ArrowRight`.
+- Exact modifiers such as `Ctrl+k`, `Shift+f`, `Alt+m`, and `Meta+k`.
+- `Mod` for `Meta` on macOS and `Ctrl` elsewhere.
+- The special `0-9` range for digit-based seeking.
+
+Choose an `action` from the API reference below. Pass `value` as seconds for `seekStep`, a volume delta such as `0.05` or `-0.05` for `volumeStep`, or a percentage from 0 to 100 for `seekToPercent`. When omitted, `seekStep` defaults to 10 seconds and `volumeStep` defaults to five percentage points; `ArrowLeft`, `j`, and `ArrowDown` use the negative step. When `value` is omitted from `seekToPercent` with `keys="0-9"`, the pressed digit supplies the percentage.
+
+Toggle actions ignore held-key repeats. Step, rate, and percentage actions may repeat. A matched shortcut prevents the browser’s default behavior. Unmodified shortcuts are ignored in editable fields, and Space or Enter still activates focused buttons, links, and sliders normally.
+
+## Accessibility
+
+Hotkeys supplement operable controls; they should never be the only way to perform an action. Built-in buttons use matching hotkey registrations to expose `aria-keyshortcuts`, and their tooltips can display the registered shortcut.
+
+## Examples
+
+### Basic Usage
+
+This player uses Space to play or pause, M to mute, and the arrow keys to seek by five seconds. Click the player first to focus its container.
+
+**App.tsx**
+
+```tsx
+import { Container, createPlayer, Hotkey, PlayButton } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const { Player } = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player>
+      <Container className="react-hotkey-basic">
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" muted playsInline />
+        <p className="react-hotkey-basic__instructions">Space: play/pause · M: mute · ←/→: seek</p>
+        <PlayButton
+          className="react-hotkey-basic__button"
+          render={(props, state) => (
+            <button {...props}>{state.ended ? 'Replay' : state.paused ? 'Play' : 'Pause'}</button>
+          )}
+        />
+        <Hotkey keys="Space" action="togglePaused" />
+        <Hotkey keys="m" action="toggleMuted" />
+        <Hotkey keys="ArrowLeft" action="seekStep" value={-5} />
+        <Hotkey keys="ArrowRight" action="seekStep" value={5} />
+      </Container>
+    </Player>
+  );
+}
+```
+
+**App.css**
+
+```css
+.react-hotkey-basic {
+  position: relative;
+}
+
+.react-hotkey-basic video {
+  width: 100%;
+}
+
+.react-hotkey-basic__instructions {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  padding: 6px 10px;
+  margin: 0;
+  color: white;
+  background: rgb(0 0 0 / 70%);
+  border-radius: 4px;
+}
+
+.react-hotkey-basic__button {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  padding: 8px 20px;
+  color: black;
+  cursor: pointer;
+  background: rgb(255 255 255 / 80%);
+  border: 1px solid rgb(255 255 255 / 30%);
+  border-radius: 9999px;
+}
+```
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `action` (required) | `'togglePaused' \| 'toggleMuted' \| 'toggleFullscreen' \| 'toggleSubtitles' \| 'togglePictureInPicture' \| 'seekStep' \| 'volumeStep' \| 'speedUp' \| 'speedDown' \| 'seekToPercent'` | — | Player action to run when the key pattern matches. |
+| `keys` (required) | `string` | — | Key pattern to match, such as `Space`, `ArrowRight`, or `Mod+k`. |
+| `disabled` | `boolean` | — | Whether the hotkey is disabled. |
+| `target` | `'player' \| 'document'` | — | Whether to listen on the player container or the document. |
+| `value` | `number` | — | Numeric value passed to actions such as `seekStep`, `volumeStep`, and `seekToPercent`. Arrow-key seek and volume actions use their shared input-action step when omitted. |

package/docs/reference/components/live-audio-minimal-skin.md

@@ -0,0 +1,36 @@
+# MinimalLiveAudioSkin
+
+The live audio preset's visually lighter skin, closer to a classic control bar
+
+The minimal skin of the live audio preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. Like the default skin, it shows a Live button in place of time controls. [LiveAudioSkin](./live-audio-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the live audio preset ships.
+
+## Import
+
+```tsx
+import { MinimalLiveAudioSkin } from '@videojs/react/live-audio';
+import '@videojs/react/live-audio/minimal-skin.css';
+```
+
+## Usage
+
+The skin goes between the player and the media element. It renders its controls around the media.
+
+```tsx
+<LiveAudioPlayer>
+  <MinimalLiveAudioSkin>
+    <MuxAudio src="live.m3u8" />
+  </MinimalLiveAudioSkin>
+</LiveAudioPlayer>
+```
+
+The examples use the [Mux audio element](./mux-audio.md): a plain `<audio>` can’t play HLS in most browsers, and this element reports the live playback state the skin’s Live button needs. See [Play live streams](../../guides/live-streams.md).
+
+## Styling
+
+Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. [Customize skins](../../guides/customize-skins.md#style-a-packaged-skin) documents the properties. For deeper changes, the Video.js registry provides the skin files.
+
+## Own the UI
+
+Packaged skins keep their controls and layout inside Video.js. When you need to add, remove, rearrange, or deeply restyle controls, use Shadcn to add the skin source to your project. Its components, layout, styles, and interactions become local files you can change.
+
+- [Install Video.js with Shadcn](../../guides/installation-shadcn.md): Add editable skin source and build a working React or HTML player