@videojs/html 10.0.0-rc.2 → 10.0.0-rc.4

package/docs/reference/{hotkey.md → components/hotkey.md}

@@ -4,30 +4,28 @@ Register a keyboard shortcut that invokes a player action
 
 ## Import
 
-ts
-
-```
+```ts
 import '@videojs/html/ui/hotkey';
 ```
 
 ## Anatomy
 
-html
-
-```
+```html
 <media-hotkey keys="Space" action="togglePaused"></media-hotkey>
 ```
 
 ## 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.
+`<media-hotkey>` is a behavior component: it renders no visible interface. Place it inside a [`<media-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.
+- 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.
 
@@ -41,19 +39,11 @@ Hotkeys supplement operable controls; they should never be the only way to perfo
 
 ### Basic Usage
 
-This player uses Space to play or pause, M to mute, and the arrow keys to seek by ten seconds. Click the player first to focus its container.
-
-Space: play/pause · M: mute · ←/→: seek
-
-Play Pause Replay
-
-index.html
+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.
 
-index.css
+**index.html**
 
-index.ts
-
-```
+```html
 <video-player>
   <media-container class="html-hotkey-basic">
     <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" muted playsinline></video>
@@ -70,7 +60,10 @@ index.ts
   </media-container>
 </video-player>
 ```
-```
+
+**index.css**
+
+```css
 .html-hotkey-basic {
   position: relative;
 }
@@ -114,8 +107,12 @@ index.ts
   display: inline;
 }
 ```
-```
+
+**index.ts**
+
+```ts
 import '@videojs/html/video/player';
+import '@videojs/html/ui/container';
 import '@videojs/html/ui/hotkey';
 import '@videojs/html/ui/play-button';
 ```
@@ -124,94 +121,10 @@ import '@videojs/html/ui/play-button';
 
 ### Props
 
-Prop
-
-Type
-
-Default
-
-Details
-
-`action*`
-
-`'togglePaused' | 'toggleMuted' | 'tog...`
-
-`—`
-
-▸
-
-Attribute
-
-`action`
-
-Description
-
-Player action to run when the key pattern matches.
-
-Type
-
-`'togglePaused' | 'toggleMuted' | 'toggleFullscreen' | 'toggleSubtitles' | 'togglePictureInPicture' | 'seekStep' | 'volumeStep' | 'speedUp' | 'speedDown' | 'seekToPercent'`
-
-`keys*`
-
-`string`
-
-`—`
-
-▸
-
-Attribute
-
-`keys`
-
-Description
-
-Key pattern to match, such as `Space`, `ArrowRight`, or `Mod+k`.
-
-`disabled`
-
-`boolean`
-
-`—`
-
-▸
-
-Attribute
-
-`disabled`
-
-Description
-
-Whether the hotkey is disabled.
-
-`target`
-
-`'player' | 'document'`
-
-`—`
-
-▸
-
-Attribute
-
-`target`
-
-Description
-
-Whether to listen on the player container or the document.
-
-`value`
-
-`number`
-
-`—`
-
-▸
-
-Attribute
-
-`value`
-
-Description
-
-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.
+| 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/{live-audio-minimal-skin.md → components/live-audio-minimal-skin.md}

@@ -2,31 +2,25 @@
 
 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](../concepts/skins.md) for how packaged skins work and [Presets](../concepts/presets.md) for what the live audio preset ships.
+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
 
-ts
-
-```
+```ts
 import '@videojs/html/live-audio/minimal-skin';
 ```
 
-The import registers the skin and every UI element it composes. The [CDN](../concepts/cdn.md) player bundle registers this skin together with its player:
+The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
-html
-
-```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/live-audio-minimal.js"></script>
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/live-audio-minimal.js"></script>
 ```
 
 ## Usage
 
 The skin goes between the player and the media element. It renders its controls around the media.
 
-html
-
-```
+```html
 <live-audio-player>
   <live-audio-minimal-skin>
     <mux-audio src="live.m3u8"></mux-audio>
@@ -34,12 +28,14 @@ html
 </live-audio-player>
 ```
 
-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](../how-to/play-live-streams.md).
+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](../how-to/customize-skins.md#style-a-packaged-skin) documents the properties. When you need deeper changes, eject the skin.
+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
 
-## Eject the skin
+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.
 
-The `@videojs/live-audio-minimal` skin installs under `components/videojs/skins/live-audio/minimal`. The player and media remain package imports. Follow [Customize skins](../how-to/customize-skins.md#set-up-the-shadcn-cli) to set up the CLI, install the skin, and use the copied files.
+- [Install Video.js with Shadcn](../../guides/installation-shadcn.md#choose-how-to-install): Add editable skin source and build a working React or HTML player

package/docs/reference/{live-audio-skin.md → components/live-audio-skin.md}

@@ -2,31 +2,25 @@
 
 The live audio preset's default skin, which swaps time controls for a Live button
 
-The default skin of the live audio preset: the audio layout with the time slider and time displays swapped for a Live button. [MinimalLiveAudioSkin](./live-audio-minimal-skin.md) is the same preset’s other variant. See [Skins](../concepts/skins.md) for how packaged skins work and [Presets](../concepts/presets.md) for what the live audio preset ships.
+The default skin of the live audio preset: the audio layout with the time slider and time displays swapped for a Live button. [MinimalLiveAudioSkin](./live-audio-minimal-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
 
-ts
-
-```
+```ts
 import '@videojs/html/live-audio/skin';
 ```
 
-The import registers the skin and every UI element it composes. The [CDN](../concepts/cdn.md) player bundle registers this skin together with its player:
+The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
-html
-
-```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/live-audio.js"></script>
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/live-audio.js"></script>
 ```
 
 ## Usage
 
 The skin goes between the player and the media element. It renders its controls around the media.
 
-html
-
-```
+```html
 <live-audio-player>
   <live-audio-skin>
     <mux-audio src="live.m3u8"></mux-audio>
@@ -34,12 +28,14 @@ html
 </live-audio-player>
 ```
 
-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](../how-to/play-live-streams.md).
+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](../how-to/customize-skins.md#style-a-packaged-skin) documents the properties. When you need deeper changes, eject the skin.
+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
 
-## Eject the skin
+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.
 
-The `@videojs/live-audio` skin installs under `components/videojs/skins/live-audio`. The player and media remain package imports. Follow [Customize skins](../how-to/customize-skins.md#set-up-the-shadcn-cli) to set up the CLI, install the skin, and use the copied files.
+- [Install Video.js with Shadcn](../../guides/installation-shadcn.md#choose-how-to-install): Add editable skin source and build a working React or HTML player

package/docs/reference/{live-button.md → components/live-button.md}

@@ -4,27 +4,23 @@ Accessible live indicator button that seeks to the live edge when pressed
 
 ## Import
 
-ts
-
-```
+```ts
 import '@videojs/html/ui/live-button';
 ```
 
 ## Anatomy
 
-html
-
-```
+```html
 <media-live-button></media-live-button>
 ```
 
 ## Behavior
 
-LiveButton indicates whether playback is at the live edge and acts as a “go to live” control. While playback is behind the edge, clicking seeks to the live edge — the end of the last `seekable` range. At the edge the button goes inactive (`aria-disabled`) and clicking is a no-op.
+The live button indicates whether playback is at the live edge and acts as a “go to live” control. While playback is behind the edge, clicking seeks to the live edge — the end of the last `seekable` range. At the edge the button goes inactive (`aria-disabled`) and clicking is a no-op.
 
 The button is also disabled whenever it has no live edge to seek to: the media is not live, the `seekable` ranges are still empty (before metadata loads, for example), or the last range ends at `Infinity`. It reports `disabled` in its state, sets `data-disabled`, and ignores activation until a seek target exists. Passing `disabled` forces the same state.
 
-The button combines three player features: [live](./feature-live.md) for `liveEdgeStart` and `targetLiveWindow`, [time](./feature-time.md) for `currentTime` and the `seek()` action, and [buffer](./feature-buffer.md) for `seekable`. All three are included in the `liveVideoFeatures` and `liveAudioFeatures` presets, and the packaged live skins include the button.
+The button combines three player features: [live](../api/feature-live.md) for `liveEdgeStart` and `targetLiveWindow`, [time](../api/feature-time.md) for `currentTime` and the `seek()` action, and [buffer](../api/feature-buffer.md) for `seekable`. All three are included in the `liveVideoFeatures` and `liveAudioFeatures` presets, and the packaged live skins include the button.
 
 Media counts as live while `targetLiveWindow` is not `NaN`. That value is how far behind the live edge viewers can seek: `0` means the stream is watchable only at the edge, and `Infinity` means the stream keeps its recording seekable so viewers can rewind and catch up, like a DVR. For on-demand media the button reports neither `live` nor `liveEdge` and stays inert.
 
@@ -32,39 +28,19 @@ The live edge is not a single instant: it begins 5 seconds before `liveEdgeStart
 
 Without children, the button renders the translated “Live” badge text.
 
-See [Play live streams](../how-to/play-live-streams.md) for how live state flows through the player.
+See [Play live streams](../../guides/live-streams.md) for how live state flows through the player.
 
 ## Styling
 
-Attribute
-
-Values
-
-Description
-
-`data-live`
-
-Present / absent
-
-Present when the stream is live (or DVR)
-
-`data-live-edge`
-
-Present / absent
-
-Present when playback is at the live edge
-
-`data-disabled`
-
-Present / absent
-
-Present when the button is non-interactive (mirrors `aria-disabled`)
+| Attribute | Values | Description |
+| --- | --- | --- |
+| `data-live` | Present / absent | Present when the stream is live (or DVR) |
+| `data-live-edge` | Present / absent | Present when playback is at the live edge |
+| `data-disabled` | Present / absent | Present when the button is non-interactive (mirrors `aria-disabled`) |
 
 Use `data-live-edge` to color the button red at the edge and gray behind it, and `data-disabled` to fade it while no live-edge target is available:
 
-css
-
-```
+```css
 media-live-button { color: gray; }
 media-live-button[data-live-edge] { color: red; }
 media-live-button[data-disabled] { opacity: 0.5; }
@@ -80,15 +56,9 @@ Renders a `<button>` with an automatic `aria-label` that updates based on state:
 
 The demo plays a continuously running live stream. Seek backward to move behind the live edge, then press the Live button to jump back to it.
 
-⏪ 30s Live
-
-index.html
-
-index.css
+**index.html**
 
-index.ts
-
-```
+```html
 <live-video-player class="html-live-button-basic">
   <media-container>
     <hlsjs-video src="https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8" autoplay muted playsinline></hlsjs-video>
@@ -102,7 +72,10 @@ index.ts
   </media-container>
 </live-video-player>
 ```
-```
+
+**index.css**
+
+```css
 .html-live-button-basic media-container {
   position: relative;
 }
@@ -151,7 +124,10 @@ index.ts
   background: red;
 }
 ```
-```
+
+**index.ts**
+
+```ts
 import '@videojs/html/live-video/player';
 import '@videojs/html/ui/container';
 import '@videojs/html/media/hlsjs-video';
@@ -163,122 +139,26 @@ import '@videojs/html/ui/seek-button';
 
 ### Props
 
-Prop
-
-Type
-
-Default
-
-Details
-
-`disabled`
-
-`boolean`
-
-`false`
-
-▸
-
-Attribute
-
-`disabled`
-
-Description
-
-Whether the button is disabled.
-
-`label`
-
-`object`
-
-`''`
-
-▸
-
-Attribute
-
-`label`
-
-Description
-
-Custom label for the button.
-
-Type
-
-`{ key: string; text: string } | string | ((state: LiveButtonState) => Text | string)`
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `disabled` | `boolean` | `false` | Whether the button is disabled. |
+| `label` | `{ key: string; text: string } \| string \| ((state: LiveButtonState) => Text \| string)` | `''` | Custom label for the button. |
 
 ### State
 
 State is reflected as data attributes for CSS styling.
 
-Property
-
-Type
-
-Details
-
-`label`
-
-`{ key: string; text: string } | string`
-
-`live`
-
-`boolean`
-
-▸
-
-Description
-
-Whether the stream is live (or DVR).
-
-`liveEdge`
-
-`boolean`
-
-▸
-
-Description
-
-Whether playback is at the live edge.
-
-`disabled`
-
-`boolean`
-
-▸
-
-Description
-
-Whether seeking to the live edge is temporarily unavailable.
+| Property | Type | Description |
+| --- | --- | --- |
+| `label` | `{ key: string; text: string } \| string` | |
+| `live` | `boolean` | Whether the stream is live (or DVR). |
+| `liveEdge` | `boolean` | Whether playback is at the live edge. |
+| `disabled` | `boolean` | Whether seeking to the live edge is temporarily unavailable. |
 
 ### Data attributes
 
-Attribute
-
-Type
-
-Details
-
-`data-live`
-
-▸
-
-Description
-
-Present when the stream is live (or DVR).
-
-`data-live-edge`
-
-▸
-
-Description
-
-Present when playback is at the live edge.
-
-`data-disabled`
-
-▸
-
-Description
-
-Present when the button is non-interactive (mirrors `aria-disabled`).
+| Attribute | Description |
+| --- | --- |
+| `data-live` | Present when the stream is live (or DVR). |
+| `data-live-edge` | Present when playback is at the live edge. |
+| `data-disabled` | Present when the button is non-interactive (mirrors `aria-disabled`). |

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

@@ -0,0 +1,47 @@
+# live-video-minimal-skin
+
+The live video preset's visually lighter skin, closer to a classic control bar
+
+The minimal skin of the live video 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. [LiveVideoSkin](./live-video-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 video preset ships.
+
+## Import
+
+```ts
+import '@videojs/html/live-video/minimal-skin';
+```
+
+The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/live-video-minimal.js"></script>
+```
+
+## Usage
+
+The skin goes between the player and the media element. It renders its controls around the media.
+
+```html
+<live-video-player>
+  <live-video-minimal-skin>
+    <hls-video src="live.m3u8"></hls-video>
+  </live-video-minimal-skin>
+</live-video-player>
+```
+
+The examples use the lightweight [HLS video element](./hls-video.md) because most browsers can’t play HLS streams with a plain `<video>`. See [Play live streams](../../guides/live-streams.md).
+
+## Poster
+
+The skin renders a poster image before playback starts. An element with `slot="poster"` replaces it.
+
+See [Add a poster and loading placeholder](../../guides/poster.md) for complete examples.
+
+## 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#choose-how-to-install): Add editable skin source and build a working React or HTML player

package/docs/reference/components/live-video-skin.md

@@ -0,0 +1,47 @@
+# live-video-skin
+
+The live video preset's default skin, which swaps time controls for a Live button
+
+The default skin of the live video preset: the video layout with the time slider and time displays swapped for a Live button. [MinimalLiveVideoSkin](./live-video-minimal-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 video preset ships.
+
+## Import
+
+```ts
+import '@videojs/html/live-video/skin';
+```
+
+The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/live-video.js"></script>
+```
+
+## Usage
+
+The skin goes between the player and the media element. It renders its controls around the media.
+
+```html
+<live-video-player>
+  <live-video-skin>
+    <hls-video src="live.m3u8"></hls-video>
+  </live-video-skin>
+</live-video-player>
+```
+
+The examples use the lightweight [HLS video element](./hls-video.md) because most browsers can’t play HLS streams with a plain `<video>`. See [Play live streams](../../guides/live-streams.md).
+
+## Poster
+
+The skin renders a poster image before playback starts. An element with `slot="poster"` replaces it.
+
+See [Add a poster and loading placeholder](../../guides/poster.md) for complete examples.
+
+## 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#choose-how-to-install): Add editable skin source and build a working React or HTML player