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

package/docs/reference/{feature-quality.md → api/feature-quality.md}

@@ -6,69 +6,34 @@ Tracks video renditions and selects a manual rendition or automatic adaptive bit
 
 ## Import
 
-ts
-
-```
+```ts
 import { qualityFeature } from '@videojs/html';
 ```
 
-The `videoFeatures` [feature bundle](../concepts/presets.md) includes this feature.
+The `videoFeatures` [feature bundle](../../guides/presets.md) includes this feature.
 
 ## API Reference
 
 ### State
 
-Property
-
-Type
-
-Details
-
-`videoRenditionList`
-
-`MediaVideoRendition[]`
-
-▸
-
-Description
-
-Video renditions available for manual quality selection.
-
-`activeVideoRendition`
-
-`{ id?: string; width?: number; height?: number; bitrate?: number; frameRate?: number; codec?: string; selected: boolean } | null`
-
-▸
-
-Description
-
-Video rendition currently playing, including when automatic ABR is selected.
+| Property | Type | Description |
+| --- | --- | --- |
+| `videoRenditionList` | `MediaVideoRendition[]` | Video renditions available for manual quality selection. |
+| `activeVideoRendition` | `{ id?: string; width?: number; height?: number; bitrate?: number; frameRate?: number; codec?: string; selected: boolean } \| null` | Video rendition currently playing, including when automatic ABR is selected. |
 
 ### Actions
 
-Action
-
-Type
-
-Details
-
-`selectVideoRendition`
-
-`(value: string) => void`
-
-▸
-
-Description
-
-Select a video rendition by menu value, or automatic ABR with `"auto"`.
+| Action | Type | Description |
+| --- | --- | --- |
+| `selectVideoRendition` | `(value: string) => void` | Select a video rendition by menu value, or automatic ABR with `"auto"`. |
 
 ### Selector
 
 Pass `selectQuality` to [`PlayerController`](./player-controller.md) to subscribe to quality state. Returns `undefined` if the quality feature is not configured.
 
-quality-info.ts
+**quality-info.ts**
 
-```
+```ts
 import { createPlayer, UIElement, selectQuality } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 

package/docs/reference/{feature-remote-playback.md → api/feature-remote-playback.md}

@@ -4,73 +4,38 @@ Remote playback state and actions for the player store
 
 Controls remote playback to devices like Chromecast (Chromium) and AirPlay (Safari). Exits fullscreen before initiating a remote playback session.
 
-- [Cast to AirPlay and Chromecast](../how-to/cast-to-airplay-and-chromecast.md)
+- [Cast to AirPlay and Chromecast](../../guides/casting.md)
 
 ## Import
 
-ts
-
-```
+```ts
 import { remotePlaybackFeature } from '@videojs/html';
 ```
 
-The `liveVideoFeatures` and `videoFeatures` [feature bundles](../concepts/presets.md) include this feature.
+The `liveVideoFeatures` and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
 
 ## API Reference
 
 ### State
 
-Property
-
-Type
-
-Details
-
-`remotePlaybackState`
-
-`'disconnected' | 'connecting' | 'connected'`
-
-▸
-
-Description
-
-Current remote playback connection state.
-
-`remotePlaybackAvailability`
-
-`'available' | 'unavailable' | 'unsupported'`
-
-▸
-
-Description
-
-Whether remote playback can be requested on this platform.
+| Property | Type | Description |
+| --- | --- | --- |
+| `remotePlaybackState` | `'disconnected' \| 'connecting' \| 'connected'` | Current remote playback connection state. |
+| `remotePlaybackAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether remote playback can be requested on this platform. |
 
 ### Actions
 
-Action
-
-Type
-
-Details
-
-`toggleRemotePlayback`
-
-`() => Promise<void>`
-
-▸
-
-Description
-
-Toggle the remote playback connection.
+| Action | Type | Description |
+| --- | --- | --- |
+| `toggleRemotePlayback` | `() => Promise<void>` | Toggle the remote playback connection. |
 
 ### Selector
 
 Pass `selectRemotePlayback` to [`PlayerController`](./player-controller.md) to subscribe to remote playback state. Returns `undefined` if the remote playback feature is not configured.
 
-cast-button.ts
+**cast-button.ts**
 
-```
+```ts
 import { createPlayer, UIElement, selectRemotePlayback } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 

package/docs/reference/{feature-source.md → api/feature-source.md}

@@ -6,69 +6,34 @@ Tracks the current media source and readiness.
 
 ## Import
 
-ts
-
-```
+```ts
 import { sourceFeature } from '@videojs/html';
 ```
 
-The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](../concepts/presets.md) include this feature.
+The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
 
 ## API Reference
 
 ### State
 
-Property
-
-Type
-
-Details
-
-`source`
-
-`string | null`
-
-▸
-
-Description
-
-Current media source URL (null if none).
-
-`canPlay`
-
-`boolean`
-
-▸
-
-Description
-
-Whether enough data is loaded to begin playback.
+| Property | Type | Description |
+| --- | --- | --- |
+| `source` | `string \| null` | Current media source URL (null if none). |
+| `canPlay` | `boolean` | Whether enough data is loaded to begin playback. |
 
 ### Actions
 
-Action
-
-Type
-
-Details
-
-`loadSource`
-
-`(src: string) => string`
-
-▸
-
-Description
-
-Load a new media source. Returns the new source URL.
+| Action | Type | Description |
+| --- | --- | --- |
+| `loadSource` | `(src: string) => string` | Load a new media source. Returns the new source URL. |
 
 ### Selector
 
 Pass `selectSource` to [`PlayerController`](./player-controller.md) to subscribe to source state. Returns `undefined` if the source feature is not configured.
 
-source-info.ts
+**source-info.ts**
 
-```
+```ts
 import { createPlayer, UIElement, selectSource } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 

package/docs/reference/{feature-stream-type.md → api/feature-stream-type.md}

@@ -12,43 +12,27 @@ Add `streamTypeFeature` to a custom player when you need `streamType` in player
 
 ## Import
 
-ts
-
-```
+```ts
 import { streamTypeFeature } from '@videojs/html';
 ```
 
-No packaged [feature bundle](../concepts/presets.md) includes this feature — add it to your [`createPlayer`](./html-create-player.md) features yourself.
+No packaged [feature bundle](../../guides/presets.md) includes this feature — add it to your [`createPlayer`](./html-create-player.md) features yourself.
 
 ## API Reference
 
 ### State
 
-Property
-
-Type
-
-Details
-
-`streamType`
-
-`(typeof MediaStreamTypes)[keyof typeof MediaStreamTypes]`
-
-▸
-
-Description
-
-Current stream delivery type.
-
-Components use this to show live-specific UI (for example, a live indicator or a "jump to live edge" button) or hide the time display.
+| Property | Type | Description |
+| --- | --- | --- |
+| `streamType` | `'on-demand' \| 'live' \| 'unknown'` | Current stream delivery type. Components use this to show live-specific UI (for example, a live indicator or a "jump to live edge" button) or hide the time display. |
 
 ### Selector
 
 Pass `selectStreamType` to [`PlayerController`](./player-controller.md) to subscribe to stream type state. Returns `undefined` if the stream type feature is not configured.
 
-live-indicator.ts
+**live-indicator.ts**
 
-```
+```ts
 import { createPlayer, selectStreamType, streamTypeFeature, UIElement } from '@videojs/html';
 import { liveVideoFeatures } from '@videojs/html/live-video';
 

package/docs/reference/api/feature-text-tracks.md

@@ -0,0 +1,54 @@
+# Text tracks
+
+Subtitles, captions, and chapter track state for the player store
+
+Manages subtitles, captions, chapters, and thumbnail tracks.
+
+A default `kind="chapters"` track can also divide the [time slider](../components/time-slider.md) into chapter ranges and label the chapter at the current interaction position.
+
+When a thumbnail track is present, `thumbnailTrackCrossOrigin` reports the media element’s CORS mode, or `null` when the media is not CORS-enabled. [Thumbnail](../components/thumbnail.md) reads it to fetch sprite sheets the same way the browser fetched the track.
+
+## Import
+
+```ts
+import { textTrackFeature } from '@videojs/html';
+```
+
+The `liveVideoFeatures` and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `chaptersCues` | `MediaTextCue[]` | Cues from the first `kind="chapters"` track. |
+| `thumbnailCues` | `MediaTextCue[]` | Cues from the first `kind="metadata" label="thumbnails"` track. |
+| `thumbnailTrackSrc` | `string \| null` | The `<track>` element's `src` for resolving relative cue text URLs. |
+| `thumbnailTrackCrossOrigin` | `'anonymous' \| 'use-credentials' \| null` | The media element's CORS mode, mapped through the CORS-settings-attribute rules, or `null` when it is not in CORS mode. Thumbnail UI fetches the sprite sheets the cues point at with this mode, since a cross-origin `<track>` only loads at all when the media element is CORS-enabled. |
+| `textTrackList` | `MediaTextTrack[]` | All text tracks available on the media element. |
+| `subtitlesShowing` | `boolean` | Whether captions/subtitles are currently enabled. |
+
+### Actions
+
+| Action | Type | Description |
+| --- | --- | --- |
+| `toggleSubtitles` | `(forceShow?: boolean) => boolean` | Toggle captions/subtitles visibility. Showing restores the track that was last showing, or the first caption/subtitle track when there is none. Returns the new enabled value. |
+| `selectSubtitlesTrack` | `(value: string) => void` | Select a captions/subtitles track by menu value, or disable with `"off"`. |
+
+### Selector
+
+Pass `selectTextTrack` to [`PlayerController`](./player-controller.md) to subscribe to text track state. Returns `undefined` if the text tracks feature is not configured.
+
+**captions-button.ts**
+
+```ts
+import { createPlayer, UIElement, selectTextTrack } from '@videojs/html';
+import { videoFeatures } from '@videojs/html/video';
+
+const { PlayerController } = createPlayer({ features: videoFeatures });
+
+class CaptionsButton extends UIElement {
+  readonly #textTracks = new PlayerController(this, selectTextTrack);
+}
+```

package/docs/reference/{feature-time.md → api/feature-time.md}

@@ -6,79 +6,35 @@ Tracks playback position and duration. During live playback, the browser may rep
 
 ## Import
 
-ts
-
-```
+```ts
 import { timeFeature } from '@videojs/html';
 ```
 
-The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](../concepts/presets.md) include this feature.
+The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
 
 ## API Reference
 
 ### State
 
-Property
-
-Type
-
-Details
-
-`currentTime`
-
-`number`
-
-▸
-
-Description
-
-Current playback position in seconds.
-
-`duration`
-
-`number`
-
-▸
-
-Description
-
-Total duration in seconds (0 if unknown).
-
-`seeking`
-
-`boolean`
-
-▸
-
-Description
-
-Whether a seek operation is in progress.
+| Property | Type | Description |
+| --- | --- | --- |
+| `currentTime` | `number` | Current playback position in seconds. |
+| `duration` | `number` | Total duration in seconds (0 if unknown). |
+| `seeking` | `boolean` | Whether a seek operation is in progress. |
 
 ### Actions
 
-Action
-
-Type
-
-Details
-
-`seek`
-
-`(time: number) => Promise<number>`
-
-▸
-
-Description
-
-Seek to a time in seconds. Returns the actual position after seek.
+| Action | Type | Description |
+| --- | --- | --- |
+| `seek` | `(time: number) => Promise<number>` | Seek to a time in seconds. Returns the actual position after seek. |
 
 ### Selector
 
 Pass `selectTime` to [`PlayerController`](./player-controller.md) to subscribe to time state. Returns `undefined` if the time feature is not configured.
 
-time-display.ts
+**time-display.ts**
 
-```
+```ts
 import { createPlayer, UIElement, selectTime } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 

package/docs/reference/{feature-volume.md → api/feature-volume.md}

@@ -6,91 +6,29 @@ Controls volume level and mute state. These capabilities have independent availa
 
 ## Import
 
-ts
-
-```
+```ts
 import { volumeFeature } from '@videojs/html';
 ```
 
-The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](../concepts/presets.md) include this feature.
+The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
 
 ## API Reference
 
 ### State
 
-Property
-
-Type
-
-Details
-
-`volume`
-
-`number`
-
-▸
-
-Description
-
-Volume level from 0 (silent) to 1 (max).
-
-`muted`
-
-`boolean`
-
-▸
-
-Description
-
-Whether audio is muted.
-
-`volumeAvailability`
-
-`'available' | 'unavailable' | 'unsupported'`
-
-▸
-
-Description
-
-Whether volume can be programmatically set on this platform.
-
-`mutedAvailability`
-
-`'available' | 'unavailable' | 'unsupported'`
-
-▸
-
-Description
-
-Whether the media can be muted. Separate from `volumeAvailability` because the two come apart: an embed can take a mute command while offering no way to set a level, and iOS Safari refuses a volume write on media that mutes perfectly well.
+| Property | Type | Description |
+| --- | --- | --- |
+| `volume` | `number` | Volume level from 0 (silent) to 1 (max). |
+| `muted` | `boolean` | Whether audio is muted. |
+| `volumeAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether volume can be programmatically set on this platform. |
+| `mutedAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether the media can be muted. Separate from `volumeAvailability` because the two come apart: an embed can take a mute command while offering no way to set a level, and iOS Safari refuses a volume write on media that mutes perfectly well. |
 
 ### Actions
 
-Action
-
-Type
-
-Details
-
-`setVolume`
-
-`(volume: number) => number`
-
-▸
-
-Description
-
-Set volume (clamped 0-1). Returns the clamped value.
-
-`toggleMuted`
-
-`() => boolean`
-
-▸
-
-Description
-
-Toggle mute state. Returns the new muted value.
+| Action | Type | Description |
+| --- | --- | --- |
+| `setVolume` | `(volume: number) => number` | Set volume (clamped 0-1). Returns the clamped value. |
+| `toggleMuted` | `() => boolean` | Toggle mute state. Returns the new muted value. |
 
 ### Selector
 
@@ -98,9 +36,9 @@ Pass `selectVolume` to [`PlayerController`](./player-controller.md) to subscribe
 
 Check `volumeAvailability` before showing a volume-level control, and check `mutedAvailability` before showing a mute control.
 
-volume-slider.ts
+**volume-slider.ts**
 
-```
+```ts
 import { createPlayer, UIElement, selectVolume } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 

package/docs/reference/{get-i18n-translations.md → api/get-i18n-translations.md}

@@ -4,19 +4,15 @@ Read the merged translation map for a locale using BCP 47 parent-chain fallback
 
 ## Import
 
-ts
-
-```
+```ts
 import { getI18nTranslations } from "@videojs/html/i18n";
 ```
 
 `getI18nTranslations` walks the BCP 47 lookup chain (`es-MX` → `es` → `en`) and merges registry layers into one map. Providers combine this map with lazy-loaded built-in packs and provider overrides. Call it directly when building custom UI outside built-in controls.
 
-See [Internationalize the player](../how-to/internationalize-the-player.md) for merge order and fallback rules.
-
-ts
+See [Internationalize the player](../../guides/internationalization.md) for merge order and fallback rules.
 
-```
+```ts
 import { createTranslator, getI18nTranslations } from '@videojs/html/i18n';
 
 const t = createTranslator(getI18nTranslations('pt-BR'), 'pt-BR');
@@ -25,42 +21,16 @@ t('buttons.play', { default: 'Play' });
 
 ## API Reference
 
-### Parameters
-
-Parameter
-
-Type
-
-Default
-
-Details
-
-`locale*`
-
-`(typeof LOCALES)[number] | string & o...`
+`getI18nTranslations(locale): FlatTranslations`
 
-`—`
-
-▸
-
-Description
-
-BCP 47 tag to resolve (e.g. `es-MX`, `zh-Hant-HK`).
-
-Type
+### Parameters
 
-`(typeof LOCALES)[number] | string & object`
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `locale` (required) | `(typeof LOCALES)[number] \| string & {}` | — | BCP 47 tag to resolve (e.g. `es-MX`, `zh-Hant-HK`). |
 
 ### Return Value
 
-Type
-
-Details
-
-`object`
-
-▸
-
-Type
-
-`{ [Key in TranslationKey]?: TranslationParams[Key] extends never ? string : Key extends keyof ParametricTranslations ? ParametricTranslations[Key] : string; } & Record<string, string | undefined>`
+| Type |
+| --- |
+| `{ [Key in TranslationKey]?: TranslationParams[Key] extends never ? string : Key extends keyof ParametricTranslations ? ParametricTranslations[Key] : string; } & Record<string, string \| undefined>` |

package/docs/reference/{has-registered-locale.md → api/has-registered-locale.md}

@@ -4,17 +4,13 @@ Check whether an exact locale tag exists in the global i18n registry
 
 ## Import
 
-ts
-
-```
+```ts
 import { hasRegisteredLocale } from "@videojs/html/i18n";
 ```
 
 `hasRegisteredLocale` returns whether a normalized locale tag has an explicit registry layer from [`registerI18n`](./register-i18n.md). It does **not** indicate whether a lazy built-in pack exists. Only registry entries count.
 
-ts
-
-```
+```ts
 import { hasRegisteredLocale, registerI18n } from '@videojs/html/i18n';
 
 hasRegisteredLocale('fr'); // false until registered
@@ -24,31 +20,13 @@ hasRegisteredLocale('fr'); // true
 
 ## API Reference
 
-### Parameters
-
-Parameter
-
-Type
-
-Default
+`hasRegisteredLocale(locale): boolean`
 
-Details
-
-`locale*`
-
-`(typeof LOCALES)[number] | string & o...`
-
-`—`
-
-▸
-
-Description
-
-BCP 47 tag to test.
-
-Type
+### Parameters
 
-`(typeof LOCALES)[number] | string & object`
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `locale` (required) | `(typeof LOCALES)[number] \| string & {}` | — | BCP 47 tag to test. |
 
 ### Return Value