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

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

@@ -14,7 +14,9 @@ Using a pre-built [skin](../concepts/skins.md)? It already includes the controls
 
 ## 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.
+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 slider thumbnail reads the pointer time from the slider, so you never pass `time`; it otherwise accepts the same props as the standalone [Thumbnail](../reference/thumbnail.md).
+
+`<media-slider-thumbnail>` draws its own image unless you supply an `<img>` child; set `crossorigin`, `loading`, or `fetchpriority` on the element itself.
 
 index.html
 
@@ -149,6 +151,7 @@ Regenerate the storyboard with a larger frame size, or split giant sprite sheets
 ## Related components
 
 *   [Thumbnail](../reference/thumbnail.md)
+*   [Slider](../reference/slider.md)
 *   [Time slider](../reference/time-slider.md)
 
 ## Related API

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

@@ -17,7 +17,7 @@ The import registers the skin and every UI element it composes. The [CDN](../con
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/audio-minimal.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/audio-minimal.js"></script>
 ```
 
 ## Usage

package/docs/reference/audio-skin.md

@@ -17,7 +17,7 @@ The import registers the skin and every UI element it composes. The [CDN](../con
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/audio.js"></script>
 ```
 
 ## Usage

package/docs/reference/audio-track-radio-group.md

@@ -207,7 +207,181 @@ import '@videojs/html/ui/audio-track-radio-group';
 
 media-audio-track-radio-group
 
-Displays the selected audio-track label.
+Owns audio-track option state and shares it with an enclosing menu. Does not render a DOM element.
+
+#### 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)`
+
+#### 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.
+
+#### 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`).
 
 #### Events
 

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

@@ -17,7 +17,7 @@ The import registers the skin and every UI element it composes. The [CDN](../con
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/background.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/background.js"></script>
 ```
 
 ## Usage

package/docs/reference/background-video.md

@@ -21,7 +21,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/background-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/background-video.js"></script>
 ```
 
 ## Examples

package/docs/reference/captions-radio-group.md

@@ -199,7 +199,189 @@ import '@videojs/html/ui/captions-radio-group';
 
 media-captions-radio-group
 
-Displays the selected captions label.
+Owns captions option state and shares it with an enclosing menu. Does not render a DOM element.
+
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`disabled`
+
+`boolean`
+
+`false`
+
+▸
+
+Attribute
+
+`disabled`
+
+Description
+
+Whether track selection is disabled.
+
+`formatTrack`
+
+`string) | function`
+
+`formatTrackLabel`
+
+▸
+
+Attribute
+
+`format-track`
+
+Description
+
+Custom formatter for visible track labels.
+
+Type
+
+`((track: MediaTextTrack) => Text | string)`
+
+`label`
+
+`object`
+
+`''`
+
+▸
+
+Attribute
+
+`label`
+
+Description
+
+Custom label for the options group.
+
+Type
+
+`{ key: string; text: string } | string | ((state: CaptionsRadioGroupState) => Text | string)`
+
+#### State
+
+State is reflected as data attributes for CSS styling.
+
+Property
+
+Type
+
+Details
+
+`subtitlesShowing`
+
+`boolean`
+
+▸
+
+Description
+
+Whether captions/subtitles are currently enabled.
+
+`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.
+
+#### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-active`
+
+▸
+
+Description
+
+Present when captions are enabled.
+
+`data-disabled`
+
+▸
+
+Description
+
+Present when track selection is disabled.
+
+`data-hidden`
+
+▸
+
+Description
+
+Present when track selection is unavailable.
+
+`data-availability`
+
+`'available' | 'unavailable'`
+
+▸
+
+Description
+
+Indicates captions availability (`available` or `unavailable`).
 
 #### Events
 

package/docs/reference/cloudflare-video.md

@@ -23,7 +23,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/cloudflare-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/cloudflare-video.js"></script>
 ```
 
 ## Load a source

package/docs/reference/controls.md

@@ -31,6 +31,16 @@ If the user is active, or if the video is paused, this component will show contr
 
 User activity is tracked via pointer movement, keyboard input, and focus events on the player container. On touch devices, a quick tap toggles visibility. `mouseleave` immediately sets the user as inactive.
 
+`visibility` selects between the two modes. The default, `auto`, follows the player’s controls visibility state as described above. `always` keeps the controls visible and reports the user as active regardless of playback or idle state, and works without the controls feature. The idle delay itself is not configurable.
+
+html
+
+```
+<media-controls visibility="always">
+  <media-controls-content>...</media-controls-content>
+</media-controls>
+```
+
 ## Styling
 
 `Controls.Root` is a state and context provider. `Controls.Content` / `<media-controls-content>` renders the interactive controls surface and receives its DOM props, ref, and controls state data attributes.

package/docs/reference/dash-video.md

@@ -25,7 +25,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/dash-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/dash-video.js"></script>
 ```
 
 ## Examples

package/docs/reference/error-dialog.md

@@ -55,7 +55,11 @@ media-dialog-popup[data-ending-style] {
 
 ## Accessibility
 
-The popup uses `role="alertdialog"` and `aria-modal="true"`. Its title and description are connected with `aria-labelledby` and `aria-describedby`. Focus stays within the popup and content outside it is inert while the error is open. Pressing Escape or activating the close part dismisses the error.
+The popup uses `role="alertdialog"`. Its title and description are connected with `aria-labelledby` and `aria-describedby`.
+
+Modality is scoped to the player container rather than the page. While the error is open, the rest of the container is inert and focus that lands elsewhere inside it returns to the popup, but content outside the player stays interactive and `aria-modal` is omitted. Only when the popup renders outside the container does the dialog fall back to document-wide modality: `aria-modal="true"`, Tab cycling within the popup, and everything outside it inert.
+
+Pressing Escape or activating the close part dismisses the error.
 
 ## Examples
 

package/docs/reference/google-cast.md

@@ -23,7 +23,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/extensions/google-cast.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/extensions/google-cast.js"></script>
 ```
 
 ## Anatomy

package/docs/reference/hls-audio.md

@@ -17,7 +17,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/hls-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/hls-audio.js"></script>
 ```
 
 ## Examples

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

@@ -19,7 +19,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/hls-background-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/hls-background-video.js"></script>
 ```
 
 ## Source behavior

package/docs/reference/hls-video.md

@@ -17,7 +17,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/hls-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/hls-video.js"></script>
 ```
 
 ## Examples

package/docs/reference/hlsjs-video.md

@@ -23,7 +23,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/hlsjs-video.js"></script>
 ```
 
 ## Examples

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

@@ -17,7 +17,7 @@ The import registers the skin and every UI element it composes. The [CDN](../con
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/live-audio-minimal.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/live-audio-minimal.js"></script>
 ```
 
 ## Usage

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

@@ -17,7 +17,7 @@ The import registers the skin and every UI element it composes. The [CDN](../con
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/live-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/live-audio.js"></script>
 ```
 
 ## Usage

package/docs/reference/live-button.md

@@ -22,6 +22,8 @@ html
 
 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 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.
 
 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.
@@ -52,18 +54,25 @@ Present / absent
 
 Present when playback is at the live edge
 
-Use `data-live-edge` to color the button red at the edge and gray behind it:
+`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
 
 ```
 media-live-button { color: gray; }
 media-live-button[data-live-edge] { color: red; }
+media-live-button[data-disabled] { opacity: 0.5; }
 ```
 
 ## Accessibility
 
-Renders a `<button>` with an automatic `aria-label` that updates based on state: “Playing live” at the live edge, “Seek to live edge” while behind it. Override with the `label` prop, which accepts a text descriptor, literal string, or function returning either. A text descriptor contains an opaque translation key and English fallback, for example `{ key: 'live.playing', text: 'Playing live' }`. When the button is disabled or playback is at the live edge, `aria-disabled="true"` is set. Keyboard activation: Enter / Space.
+Renders a `<button>` with an automatic `aria-label` that updates based on state: “Playing live” at the live edge, “Seek to live edge” while behind it. Override with the `label` prop, which accepts a text descriptor, literal string, or function returning either. A text descriptor contains an opaque translation key and English fallback, for example `{ key: 'live.playing', text: 'Playing live' }`. When the button is disabled — explicitly, or because no live-edge seek target is available yet — or playback is at the live edge, `aria-disabled="true"` is set and activation is ignored. Keyboard activation: Enter / Space.
 
 ## Examples
 
@@ -232,6 +241,16 @@ Description
 
 Whether playback is at the live edge.
 
+`disabled`
+
+`boolean`
+
+▸
+
+Description
+
+Whether seeking to the live edge is temporarily unavailable.
+
 ### Data attributes
 
 Attribute
@@ -254,4 +273,12 @@ Present when the stream is live (or DVR).
 
 Description
 
-Present when playback is at the live edge.
+Present when playback is at the live edge.
+
+`data-disabled`
+
+▸
+
+Description
+
+Present when the button is non-interactive (mirrors `aria-disabled`).

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

@@ -17,7 +17,7 @@ The import registers the skin and every UI element it composes. The [CDN](../con
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/live-video-minimal.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/live-video-minimal.js"></script>
 ```
 
 ## Usage

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

@@ -17,7 +17,7 @@ The import registers the skin and every UI element it composes. The [CDN](../con
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/live-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/live-video.js"></script>
 ```
 
 ## Usage

package/docs/reference/menu.md

@@ -58,7 +58,18 @@ Root menus inside a [Container](./player-container.md) join its popup group. Ope
 
 In React, create a submenu by nesting another `Menu.Root` in the parent `Menu.Content`; its `Menu.Trigger` behaves as a parent item and its `Menu.Content` becomes the active Content. In HTML, add another `<media-menu-content>` as a sibling, give it an `id`, and point the parent `<media-menu-item>` at it with `commandfor`.
 
-Media option groups can render the current selection beside a submenu trigger. See [PlaybackRateRadioGroup](./playback-rate-radio-group.md), [QualityRadioGroup](./quality-radio-group.md), [AudioTrackRadioGroup](./audio-track-radio-group.md), and [CaptionsRadioGroup](./captions-radio-group.md).
+Media option groups share their option state with the enclosing menu: the selected value, and whether the options are disabled, hidden, or available. The menu’s trigger inherits the disabled and hidden state and exposes `data-availability`, and the menu closes if its options disappear while open. See [PlaybackRateRadioGroup](./playback-rate-radio-group.md), [QualityRadioGroup](./quality-radio-group.md), [AudioTrackRadioGroup](./audio-track-radio-group.md), and [CaptionsRadioGroup](./captions-radio-group.md).
+
+The generated radio group publishes its state to the `<media-menu>` that contains it. Add an element with `data-part="hint"` inside the parent `<media-menu-item>` and the menu writes the selected label into it:
+
+html
+
+```
+<media-menu-item commandfor="quality-menu">
+  Quality
+  <span data-part="hint"></span>
+</media-menu-item>
+```
 
 ## Styling
 

package/docs/reference/mux-audio.md

@@ -23,7 +23,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/mux-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/mux-audio.js"></script>
 ```
 
 ## Analytics and casting

package/docs/reference/mux-background-video.md

@@ -19,7 +19,7 @@ Or load it from the [CDN](../concepts/cdn.md):
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/mux-background-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/mux-background-video.js"></script>
 ```
 
 ## Load a Mux source