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

package/docs/reference/{audio-track-radio-group.md → components/audio-track-radio-group.md}

@@ -6,17 +6,15 @@ Creates radio items from the player audio track state and selects the enabled tr
 
 ## Import
 
-ts
-
-```
+```ts
 import '@videojs/html/ui/audio-track-radio-group';
+import '@videojs/html/ui/menu-radio-item';
+import '@videojs/html/ui/menu-item-indicator';
 ```
 
 ## Anatomy
 
-html
-
-```
+```html
 <media-audio-track-radio-group>
   <template>
     <media-menu-radio-item>
@@ -35,35 +33,12 @@ The group is available when the configured media exposes more than one audio tra
 
 ## Styling
 
-Attribute
-
-Values
-
-Description
-
-`data-audio-track`
-
-`string`
-
-Current audio track value.
-
-`data-disabled`
-
-Present / absent
-
-Present when audio track selection is disabled.
-
-`data-hidden`
-
-Present / absent
-
-Present when multiple audio tracks are unavailable.
-
-`data-availability`
-
-`"available"` / `"unavailable"`
-
-Whether multiple audio tracks are available.
+| Attribute | Values | Description |
+| --- | --- | --- |
+| `data-audio-track` | `string` | Current audio track value. |
+| `data-disabled` | Present / absent | Present when audio track selection is disabled. |
+| `data-hidden` | Present / absent | Present when multiple audio tracks are unavailable. |
+| `data-availability` | `"available"` / `"unavailable"` | Whether multiple audio tracks are available. |
 
 Unavailable groups receive the native `hidden` attribute.
 
@@ -77,15 +52,9 @@ The element receives an accessible label from the `label` property or defaults t
 
 ### Basic usage
 
-Audio
-
-index.html
-
-index.css
-
-index.ts
+**index.html**
 
-```
+```html
 <video-player class="video-player">
   <media-container>
     <hlsjs-video
@@ -115,7 +84,10 @@ index.ts
   </media-container>
 </video-player>
 ```
-```
+
+**index.css**
+
+```css
 .video-player media-container {
   position: relative;
   display: block;
@@ -193,202 +165,58 @@ media-menu-radio-item[aria-checked="true"] .menu-indicator {
   opacity: 1;
 }
 ```
-```
+
+**index.ts**
+
+```ts
 import '@videojs/html/video/player';
 import '@videojs/html/ui/container';
 import '@videojs/html/media/hlsjs-video';
 import '@videojs/html/ui/menu';
+import '@videojs/html/ui/menu-content';
+import '@videojs/html/ui/menu-radio-item';
+import '@videojs/html/ui/menu-item-indicator';
 import '@videojs/html/ui/audio-track-radio-group';
 ```
 
 ## API Reference
 
-### 
+### media-audio-track-radio-group
 
-media-audio-track-radio-group
-
-Owns audio-track option state and shares it with an enclosing menu. Does not render a DOM element.
+Menu radio group that generates a `<media-menu-radio-item>` per available audio track and shares the selected label and availability with an enclosing menu. An optional `<template>` holding one `<media-menu-radio-item>` customizes each generated item.
 
 #### Props
 
-Prop
-
-Type
-
-Default
-
-Details
-
-`disabled`
-
-`boolean`
-
-`false`
-
-▸
-
-Attribute
-
-`disabled`
-
-Description
-
-Whether audio track selection is disabled.
-
-`formatTrack`
-
-`string) | function`
-
-`formatTrackLabel`
-
-▸
-
-Attribute
-
-`format-track`
-
-Description
-
-Custom formatter for visible track labels.
-
-Type
-
-`((track: MediaAudioTrack) => Text | string)`
-
-`label`
-
-`object`
-
-`''`
-
-▸
-
-Attribute
-
-`label`
-
-Description
-
-Custom label for the options group.
-
-Type
-
-`{ key: string; text: string } | string | ((state: AudioTrackRadioGroupState) => Text | string)`
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `disabled` | `boolean` | `false` | Whether audio track selection is disabled. |
+| `formatTrack` (attribute `format-track`) | `((track: MediaAudioTrack) => Text \| string)` | `formatTrackLabel` | Custom formatter for visible track labels. |
+| `label` | `{ key: string; text: string } \| string \| ((state: AudioTrackRadioGroupState) => Text \| string)` | `''` | Custom label for the options group. |
 
 #### State
 
 State is reflected as data attributes for CSS styling.
 
-Property
-
-Type
-
-Details
-
-`label`
-
-`{ key: string; text: string } | string`
-
-`value`
-
-`string`
-
-▸
-
-Description
-
-Current radio-group value.
-
-`options`
-
-`readonly Option[]`
-
-▸
-
-Description
-
-Ordered options displayed by platform adapters.
-
-`disabled`
-
-`boolean`
-
-▸
-
-Description
-
-Whether the entire option group is disabled.
-
-`hidden`
-
-`boolean`
-
-▸
-
-Description
-
-Whether the option group is hidden because no meaningful selection is available.
-
-`availability`
-
-`'available' | 'unavailable'`
-
-▸
-
-Description
-
-Whether the media exposes a meaningful selection.
+| Property | Type | Description |
+| --- | --- | --- |
+| `label` | `{ key: string; text: string } \| string` | |
+| `value` | `string` | Current radio-group value. |
+| `options` | `readonly Option[]` | Ordered options displayed by platform adapters. |
+| `disabled` | `boolean` | Whether the entire option group is disabled. |
+| `hidden` | `boolean` | Whether the option group is hidden because no meaningful selection is available. |
+| `availability` | `'available' \| 'unavailable'` | Whether the media exposes a meaningful selection. |
 
 #### Data attributes
 
-Attribute
-
-Type
-
-Details
-
-`data-audio-track`
-
-`string`
-
-▸
-
-Description
-
-Current audio track value.
-
-`data-disabled`
-
-▸
-
-Description
-
-Present when audio track selection is disabled.
-
-`data-hidden`
-
-▸
-
-Description
-
-Present when audio track selection is unavailable.
-
-`data-availability`
-
-`'available' | 'unavailable'`
-
-▸
-
-Description
-
-Indicates audio track availability (`available` or `unavailable`).
+| Attribute | Type | Description |
+| --- | --- | --- |
+| `data-audio-track` | `string` | Current audio track value. |
+| `data-disabled` | — | Present when audio track selection is disabled. |
+| `data-hidden` | — | Present when audio track selection is unavailable. |
+| `data-availability` | `'available' \| 'unavailable'` | Indicates audio track availability (`available` or `unavailable`). |
 
 #### Events
 
-Event
-
-Description
-
-`value-change`
-
-Fired when the selected value changes.
+| Event | Description |
+| --- | --- |
+| `value-change` | Fired when the selected value changes. |

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

@@ -6,17 +6,13 @@ Native audio playback that can provide media to a Video.js player
 
 The media element is the browser’s native `<audio>`. Import the audio player registration when it should provide media to Video.js:
 
-ts
-
-```
+```ts
 import '@videojs/html/audio/player';
 ```
 
 ## Anatomy
 
-html
-
-```
+```html
 <audio>
   <source />
 </audio>
@@ -28,7 +24,7 @@ Place a native `<audio>` anywhere inside `<audio-player>`. It becomes that playe
 
 ## Native behavior
 
-Video.js does not replace the native audio API. Use `src` for one URL or add child [`<source>` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source) when the browser should choose between candidates. See [Media sources](../concepts/media-sources.md) when you need an HLS, Mux, Spotify, or other playback adapter.
+Video.js does not replace the native audio API. Use `src` for one URL or add child [`<source>` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source) when the browser should choose between candidates. See [Media sources](../../guides/media-sources.md) when you need an HLS, Mux, Spotify, or other playback adapter.
 
 `<audio>` is the native element itself. Set its attributes and properties, listen for native media events, and access it through an `HTMLAudioElement` reference.
 
@@ -38,24 +34,23 @@ See MDN for the complete [`<audio>` element](https://developer.mozilla.org/en-US
 
 ### Basic Usage
 
-This native audio element uses a child source and browser controls while providing media to the surrounding Video.js player. The shared demo MP4 supplies its audio track, so the `<source>` does not claim an audio-only MIME type.
+This native audio element uses a child source and browser controls while providing media to the surrounding Video.js player.
 
-index.html
+**index.html**
 
-index.css
-
-index.ts
-
-```
+```html
 <audio-player>
   <media-container class="html-audio-basic">
     <audio class="html-audio-basic__media" controls preload="metadata">
-      <source src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" />
+      <source src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/audio.m4a" />
     </audio>
   </media-container>
 </audio-player>
 ```
-```
+
+**index.css**
+
+```css
 .html-audio-basic {
   display: grid;
   width: 100%;
@@ -69,6 +64,10 @@ index.ts
   width: 100%;
 }
 ```
-```
+
+**index.ts**
+
+```ts
 import '@videojs/html/audio/player';
+import '@videojs/html/ui/container';
 ```

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

@@ -0,0 +1,37 @@
+# background-video-skin
+
+The background preset's chrome-less skin for ambient video
+
+The only skin of the background preset: a chrome-less surface that sizes ambient video with no visible controls. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the background preset ships.
+
+## Import
+
+```ts
+import '@videojs/html/background/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/background.js"></script>
+```
+
+## Usage
+
+The skin goes between the player and the media element. It sizes the ambient video and renders no visible controls.
+
+```html
+<background-video-player>
+  <background-video-skin>
+    <background-video src="video.mp4"></background-video>
+  </background-video-skin>
+</background-video-player>
+```
+
+## 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.
+
+## Own the UI
+
+Owning the UI means keeping its components, layout, styles, and interactions as local files you can change. The [Shadcn installation guide](../../guides/installation-shadcn.md) adds that source for supported skins. The registry does not provide background video skin source because it has no control UI. Follow [Add a background video](../../guides/background-video.md) to compose the media directly, then add only the UI your use case needs.

package/docs/reference/{background-video.md → components/background-video.md}

@@ -6,47 +6,45 @@ Decorative background video for a source the browser can play natively. By defau
 
 `<background-video>` renders a `<video>` inside shadow DOM and fills the box you give the component. Use the opt-out attributes in the [API reference](#api-reference) to change its playback defaults.
 
-An HLS URL only works where the browser has native HLS playback. See [Add a background video](../how-to/add-a-background-video.md) to choose a cross-browser HLS or Mux path and set up layout, poster, and decorative semantics.
+An HLS URL only works where the browser has native HLS playback. See [Add a background video](../../guides/background-video.md) to choose a cross-browser HLS or Mux path and set up layout, poster, and decorative semantics.
 
 ## Import
 
-ts
-
-```
+```ts
 import '@videojs/html/media/background-video';
 ```
 
-Or load it from the [CDN](../concepts/cdn.md):
+Or load it from the [CDN](../../guides/cdn.md):
 
-html
-
-```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/background-video.js"></script>
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/media/background-video.js"></script>
 ```
 
 ## Examples
 
 ### Basic Usage
 
-index.html
+**index.html**
 
-index.css
-
-index.ts
-
-```
+```html
 <div class="container">
   <background-video src="https://stream.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/highest.mp4"></background-video>
 </div>
 ```
-```
+
+**index.css**
+
+```css
 .container {
   display: grid;
   width: 100%;
   aspect-ratio: 16 / 9;
 }
 ```
-```
+
+**index.ts**
+
+```ts
 import '@videojs/html/media/background-video';
 ```
 
@@ -54,42 +52,16 @@ import '@videojs/html/media/background-video';
 
 ### Attributes
 
-Attribute
-
-Description
-
-`src`
-
-URL of a video the browser can play directly, such as an MP4 or WebM file.
-
-`nomuted`
-
-Opt out of muted playback. By default the video is muted.
-
-`noloop`
-
-Opt out of looped playback. By default the video loops.
-
-`noautoplay`
-
-Opt out of autoplay. By default the video autoplays.
+| Attribute | Description |
+| --- | --- |
+| `src` | URL of a video the browser can play directly, such as an MP4 or WebM file. |
+| `nomuted` | Opt out of muted playback. By default the video is muted. |
+| `noloop` | Opt out of looped playback. By default the video loops. |
+| `noautoplay` | Opt out of autoplay. By default the video autoplays. |
 
 ### CSS Custom Properties
 
-Variable
-
-Default
-
-Description
-
-`–media-object-fit`
-
-`inherit`
-
-Controls how the video fits its container.
-
-`–media-object-position`
-
-`50% 50%`
-
-Controls the position of the video within its container.
+| Variable | Default | Description |
+| --- | --- | --- |
+| `--media-object-fit` | `inherit` | Controls how the video fits its container. |
+| `--media-object-position` | `50% 50%` | Controls the position of the video within its container. |

package/docs/reference/{buffering-indicator.md → components/buffering-indicator.md}

@@ -4,17 +4,13 @@ Loading indicator that displays when the video player is buffering or waiting fo
 
 ## Import
 
-ts
-
-```
+```ts
 import '@videojs/html/ui/buffering-indicator';
 ```
 
 ## Anatomy
 
-html
-
-```
+```html
 <media-buffering-indicator></media-buffering-indicator>
 ```
 
@@ -30,13 +26,9 @@ Hide and show the indicator based on the `data-visible` attribute.
 
 ### Basic Usage
 
-index.html
-
-index.css
+**index.html**
 
-index.ts
-
-```
+```html
 <video-player class="video-player">
   <media-container>
     <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoplay muted playsinline loop></video>
@@ -46,7 +38,10 @@ index.ts
   </media-container>
 </video-player>
 ```
-```
+
+**index.css**
+
+```css
 .video-player media-container {
   position: relative;
   display: flex;
@@ -84,7 +79,10 @@ index.ts
   }
 }
 ```
-```
+
+**index.ts**
+
+```ts
 import '@videojs/html/video/player';
 import '@videojs/html/ui/container';
 import '@videojs/html/ui/buffering-indicator';
@@ -94,62 +92,20 @@ import '@videojs/html/ui/buffering-indicator';
 
 ### Props
 
-Prop
-
-Type
-
-Default
-
-Details
-
-`delay`
-
-`number`
-
-`500`
-
-▸
-
-Attribute
-
-`delay`
-
-Description
-
-Delay in milliseconds before the indicator becomes visible.
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `delay` | `number` | `500` | Delay in milliseconds before the indicator becomes visible. |
 
 ### State
 
 State is reflected as data attributes for CSS styling.
 
-Property
-
-Type
-
-Details
-
-`visible`
-
-`boolean`
-
-▸
-
-Description
-
-Whether the indicator should be visible. True after the delay elapses while media is waiting and not paused.
+| Property | Type | Description |
+| --- | --- | --- |
+| `visible` | `boolean` | Whether the indicator should be visible. True after the delay elapses while media is waiting and not paused. |
 
 ### Data attributes
 
-Attribute
-
-Type
-
-Details
-
-`data-visible`
-
-▸
-
-Description
-
-Present when the buffering indicator is visible (after delay).
+| Attribute | Description |
+| --- | --- |
+| `data-visible` | Present when the buffering indicator is visible (after delay). |