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

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

@@ -4,8 +4,8 @@ Live edge state for the player store
 
 Tracks when playback is at the live edge and what kind of live window the stream provides.
 
-*   `liveEdgeStart` is the playback time where the live edge begins. Playback counts as live when `currentTime` reaches this value.
-*   `targetLiveWindow` describes the kind of live window. Despite its name, it does not report a number of seconds: `0` means a sliding live window, `Infinity` means a live event with playback history, and `NaN` means on-demand or not known yet.
+- `liveEdgeStart` is the playback time where the live edge begins. Playback counts as live when `currentTime` reaches this value.
+- `targetLiveWindow` describes the kind of live window. Despite its name, it does not report a number of seconds: `0` means a sliding live window, `Infinity` means a live event with playback history, and `NaN` means on-demand or not known yet.
 
 Both values are `NaN` when the media does not provide live-edge information.
 
@@ -17,55 +17,28 @@ The [time feature](./feature-time.md) reports the end of the available live vide
 
 ## Import
 
-ts
-
-```
+```ts
 import { liveFeature } from '@videojs/html';
 ```
 
-The `liveAudioFeatures` and `liveVideoFeatures` [feature bundles](../concepts/presets.md) include this feature.
+The `liveAudioFeatures` and `liveVideoFeatures` [feature bundles](../../guides/presets.md) include this feature.
 
 ## API Reference
 
 ### State
 
-Property
-
-Type
-
-Details
-
-`liveEdgeStart`
-
-`number`
-
-▸
-
-Description
-
-Playback time where the live edge begins.
-
-Playback is live when `currentTime >= liveEdgeStart`. `NaN` when the stream is not live or the value is unknown.
-
-`targetLiveWindow`
-
-`number`
-
-▸
-
-Description
-
-Describes the kind of live window available. This value is not a duration.
-
-`0` for a sliding live window, `Infinity` for a live event with playback history, and `NaN` for on-demand or unknown.
+| Property | Type | Description |
+| --- | --- | --- |
+| `liveEdgeStart` | `number` | Playback time where the live edge begins. Playback is live when `currentTime >= liveEdgeStart`. `NaN` when the stream is not live or the value is unknown. |
+| `targetLiveWindow` | `number` | Describes the kind of live window available. This value is not a duration. `0` for a sliding live window, `Infinity` for a live event with playback history, and `NaN` for on-demand or unknown. |
 
 ### Selector
 
 Pass `selectLive` to [`PlayerController`](./player-controller.md) to subscribe to live state. Returns `undefined` if the live feature is not configured.
 
-live-edge-button.ts
+**live-edge-button.ts**
 
-```
+```ts
 import { createPlayer, UIElement, selectLive } from '@videojs/html';
 import { liveVideoFeatures } from '@videojs/html/live-video';
 
@@ -80,9 +53,9 @@ class LiveEdgeButton extends UIElement {
 
 Use the packaged live button for the usual jump-to-live behavior. It combines the live, time, and buffer features, then seeks to the end of the last `seekable` range. It also manages its accessible label and disabled state.
 
-index.html
+**index.html**
 
-```
+```html
 <script type="module">
   import '@videojs/html/ui/live-button';
 </script>
@@ -94,8 +67,8 @@ Put the button in your custom controls and style it there. Do not calculate the
 
 If you need different behavior, you can combine the same public features yourself:
 
-*   Read `targetLiveWindow` from `selectLive` to check that the source is live.
-*   Read the newest available time from the last range returned by `selectBuffer`.
-*   Call the `seek()` action returned by `selectTime` with that time.
+- Read `targetLiveWindow` from `selectLive` to check that the source is live.
+- Read the newest available time from the last range returned by `selectBuffer`.
+- Call the `seek()` action returned by `selectTime` with that time.
 
 Read the same three selectors with [`PlayerController`](./player-controller.md). Call `selectTime`’s `seek()` action with the last end time from `selectBuffer` when `selectLive` reports a live source.

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

@@ -6,19 +6,17 @@ Resolves what is playing into two values your UI can render: `title` and `poster
 
 `title` and `poster` each resolve independently through the same two tiers: the value you set, then the value the media reports. The first tier that holds a value wins; when neither does, the resolved value is an empty string. Because the tiers stay separate, clearing the value you set reveals the media’s, and a source that reports a poster but no title contributes to one while leaving the other empty.
 
-An empty string counts as a value and stops the chain: set `title` to `''` and the resolved title is `''`. Pass `null` to clear your value.
+An empty string counts as a value and stops the chain: `content-title=""` resolves the title to `''`. Remove the attribute to clear your value.
 
-The metadata feature is included by the `videoFeatures`, `audioFeatures`, `liveVideoFeatures`, and `liveAudioFeatures` [presets](../concepts/presets.md); apps that build a custom preset can compose it in directly.
+The metadata feature is included by the `videoFeatures`, `audioFeatures`, `liveVideoFeatures`, and `liveAudioFeatures` [presets](../../guides/presets.md); apps that build a custom preset can compose it in directly.
 
 ## Import
 
-ts
-
-```
+```ts
 import { metadataFeature } 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
 
@@ -26,83 +24,27 @@ The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeature
 
 Attributes and matching properties the player element accepts. They exist only while this feature is selected.
 
-Prop
-
-Type
-
-Default
-
-Details
-
-`contentTitle`
-
-`MediaContentValue`
-
-`—`
-
-▸
-
-Attribute
-
-`content-title`
-
-Description
-
-The title to display. Takes precedence over the title the media carries.
-
-`poster`
-
-`MediaContentValue`
-
-`—`
-
-▸
-
-Attribute
-
-`poster`
-
-Description
-
-The poster to display. Takes precedence over the poster the media carries.
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `contentTitle` (attribute `content-title`) | `undefined \| null \| string` | — | The title to display. Takes precedence over the title the media carries. |
+| `poster` | `undefined \| null \| string` | — | The poster to display. Takes precedence over the poster the media carries. |
 
 ### State
 
-Property
-
-Type
-
-Details
-
-`title`
-
-`string`
-
-▸
-
-Description
-
-The resolved content title. Set it through the player, not through the store.
-
-`poster`
-
-`string`
-
-▸
-
-Description
-
-The resolved poster URL, independent of the media element's own `poster`. Set it through the player, not through the store.
+| Property | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | The resolved content title. Set it through the player, not through the store. |
+| `poster` | `string` | The resolved poster URL, independent of the media element's own `poster`. Set it through the player, not through the store. |
 
 ### Selector
 
-To just show the name of what is playing, drop in the [Title component](./title.md) — it reads this feature for you. Reach for the selector when building your own UI.
+To just show the name of what is playing, drop in the [Title component](../components/title.md) — it reads this feature for you. Reach for the selector when building your own UI.
 
 Pass `selectMetadata` to [`PlayerController`](./player-controller.md) to subscribe to metadata state. Returns `undefined` if the metadata feature is not configured.
 
-content-title.ts
+**content-title.ts**
 
-```
+```ts
 import { createPlayer, UIElement, selectMetadata } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 
@@ -117,13 +59,11 @@ class ContentTitle extends UIElement {
 
 The store publishes the resolved values and takes no writes. A player input is the only way to set one.
 
-Every input is an attribute on [`<video-player>`](./player.md), each with a matching property. A player built without the metadata feature observes none of them.
+Every input is an attribute on [`<video-player>`](../components/player.md), each with a matching property. A player built without the metadata feature observes none of them.
 
 `title` already means the tooltip on an HTML element, so the title input goes by `content-title` in markup, and by `contentTitle` as a property. The other inputs use their own names.
 
-html
-
-```
+```html
 <video-player content-title="The Pilot" poster="/episode-art.jpg">
   <media-container>
     <video src="episode.mp4"></video>
@@ -133,9 +73,9 @@ html
 
 Removing an attribute clears your value, so it falls through to what the media reports.
 
-title-controls.ts
+**title-controls.ts**
 
-```
+```ts
 const player = document.querySelector('video-player');
 
 player?.setAttribute('content-title', 'The Pilot');
@@ -150,4 +90,4 @@ The media tier comes from media that reports content data and announces changes
 
 `poster` is the feature’s own resolved value, not the media element’s `poster` attribute. Setting one does not set the other.
 
-A low-resolution stand-in to show while the poster loads is not part of this feature. The [poster](./poster.md) renders an `<img>` you control, so give it a `background-image` and that shows until the poster itself paints over it. [Add a poster and loading placeholder](../how-to/add-a-poster-and-loading-placeholder.md) walks through that technique for each framework.
+A low-resolution stand-in to show while the poster loads is not part of this feature. The [poster](../components/poster.md) renders an `<img>` you control, so give it a `background-image` and that shows until the poster itself paints over it. [Add a poster and loading placeholder](../../guides/poster.md) walks through that technique for each framework.

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

@@ -6,13 +6,11 @@ Locks screen orientation while fullscreen is active.
 
 ## Import
 
-ts
-
-```
+```ts
 import { orientationLockFeature } 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
 
@@ -20,73 +18,29 @@ No packaged [feature bundle](../concepts/presets.md) includes this feature — a
 
 Attributes and matching properties the player element accepts. They exist only while this feature is selected.
 
-Prop
-
-Type
-
-Default
-
-Details
-
-`orientationLockType`
-
-`undefined | null | 'any' | 'landscape' | 'landscape-primary' | 'landscape-secondary' | 'natural' | 'portrait' | 'portrait-primary' | 'portrait-secondary'`
-
-`'landscape'`
-
-▸
-
-Attribute
-
-`orientation-lock-type`
-
-Description
-
-Screen orientation type to lock while fullscreen is active.
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `orientationLockType` (attribute `orientation-lock-type`) | `undefined \| null \| 'any' \| 'landscape' \| 'landscape-primary' \| 'landscape-secondary' \| 'natural' \| 'portrait' \| 'portrait-primary' \| 'portrait-secondary'` | `'landscape'` | Screen orientation type to lock while fullscreen is active. |
 
 ### State
 
-Property
-
-Type
-
-Details
-
-`orientationLockType`
-
-`'any' | 'landscape' | 'landscape-primary' | 'landscape-secondary' | 'natural' | 'portrait' | 'portrait-primary' | 'portrait-secondary'`
-
-▸
-
-Description
-
-Screen orientation type locked while fullscreen is active.
+| Property | Type | Description |
+| --- | --- | --- |
+| `orientationLockType` | `'any' \| 'landscape' \| 'landscape-primary' \| 'landscape-secondary' \| 'natural' \| 'portrait' \| 'portrait-primary' \| 'portrait-secondary'` | Screen orientation type locked while fullscreen is active. |
 
 ### Actions
 
-Action
-
-Type
-
-Details
-
-`setOrientationLockType`
-
-`(value: 'any' | 'landscape' | 'landscape-primary' | 'landscape-secondary' | 'natural' | 'portrait' | 'portrait-primary' | 'portrait-secondary' | null | undefined) => void`
-
-▸
-
-Description
-
-Sets the locked orientation type. Absent input — nullish, or the empty string a valueless HTML attribute produces — restores the default.
+| Action | Type | Description |
+| --- | --- | --- |
+| `setOrientationLockType` | `(value: 'any' \| 'landscape' \| 'landscape-primary' \| 'landscape-secondary' \| 'natural' \| 'portrait' \| 'portrait-primary' \| 'portrait-secondary' \| null \| undefined) => void` | Sets the locked orientation type. A missing value, including an empty one, restores the default. |
 
 ### Usage
 
 Selecting the feature adds it to the player.
 
-player.ts
+**player.ts**
 
-```
+```ts
 import { createPlayer, features } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 
@@ -101,9 +55,7 @@ customElements.define('my-player', MyPlayer);
 
 The feature locks to `landscape` unless the provider sets another Screen Orientation API type. The value can change while the player is running; if the screen is already locked, it re-locks to the new type.
 
-html
-
-```
+```html
 <my-player orientation-lock-type="portrait">
   <video src="/video.mp4"></video>
 </my-player>
@@ -117,9 +69,9 @@ Clearing the value restores `landscape`.
 
 Pass `selectOrientationLock` to [`PlayerController`](./player-controller.md) to subscribe to the lock state. Returns `undefined` if the orientation lock feature is not configured.
 
-orientation-toggle.ts
+**orientation-toggle.ts**
 
-```
+```ts
 import { createPlayer, features, UIElement, selectOrientationLock } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 

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

@@ -6,89 +6,36 @@ Controls picture-in-picture mode.
 
 ## Import
 
-ts
-
-```
+```ts
 import { pipFeature } 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
-
-`pip`
-
-`boolean`
-
-▸
-
-Description
-
-Whether picture-in-picture mode is currently active.
-
-`pipAvailability`
-
-`'available' | 'unavailable' | 'unsupported'`
-
-▸
-
-Description
-
-Whether picture-in-picture can be requested on this platform.
+| Property | Type | Description |
+| --- | --- | --- |
+| `pip` | `boolean` | Whether picture-in-picture mode is currently active. |
+| `pipAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether picture-in-picture can be requested on this platform. |
 
 ### Actions
 
-Action
-
-Type
-
-Details
-
-`requestPictureInPicture`
-
-`() => Promise<void>`
-
-▸
-
-Description
-
-Enter picture-in-picture mode.
-
-`exitPictureInPicture`
-
-`() => Promise<void>`
-
-▸
-
-Description
-
-Exit picture-in-picture mode.
-
-`togglePictureInPicture`
-
-`() => Promise<void>`
-
-▸
-
-Description
-
-Toggle picture-in-picture mode.
+| Action | Type | Description |
+| --- | --- | --- |
+| `requestPictureInPicture` | `() => Promise<void>` | Enter picture-in-picture mode. |
+| `exitPictureInPicture` | `() => Promise<void>` | Exit picture-in-picture mode. |
+| `togglePictureInPicture` | `() => Promise<void>` | Toggle picture-in-picture mode. |
 
 ### Selector
 
 Pass `selectPiP` to [`PlayerController`](./player-controller.md) to subscribe to picture-in-picture state. Returns `undefined` if the PiP feature is not configured.
 
-pip-button.ts
+**pip-button.ts**
 
-```
+```ts
 import { createPlayer, UIElement, selectPiP } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 

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

@@ -6,69 +6,34 @@ Controls speed of playback.
 
 ## Import
 
-ts
-
-```
+```ts
 import { playbackRateFeature } from '@videojs/html';
 ```
 
-The `audioFeatures` and `videoFeatures` [feature bundles](../concepts/presets.md) include this feature.
+The `audioFeatures` and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
 
 ## API Reference
 
 ### State
 
-Property
-
-Type
-
-Details
-
-`playbackRates`
-
-`readonly number[]`
-
-▸
-
-Description
-
-Available playback rates.
-
-`playbackRate`
-
-`number`
-
-▸
-
-Description
-
-Current playback rate.
+| Property | Type | Description |
+| --- | --- | --- |
+| `playbackRates` | `readonly number[]` | Available playback rates. |
+| `playbackRate` | `number` | Current playback rate. |
 
 ### Actions
 
-Action
-
-Type
-
-Details
-
-`setPlaybackRate`
-
-`(rate: number) => void`
-
-▸
-
-Description
-
-Set the playback rate.
+| Action | Type | Description |
+| --- | --- | --- |
+| `setPlaybackRate` | `(rate: number) => void` | Set the playback rate. |
 
 ### Selector
 
 Pass `selectPlaybackRate` to [`PlayerController`](./player-controller.md) to subscribe to playback rate state. Returns `undefined` if the playback rate feature is not configured.
 
-rate-display.ts
+**rate-display.ts**
 
-```
+```ts
 import { createPlayer, UIElement, selectPlaybackRate } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 

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

@@ -6,109 +6,38 @@ Controls play/pause state and tracks whether playback has started or is stalled.
 
 ## Import
 
-ts
-
-```
+```ts
 import { playbackFeature } 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
-
-`paused`
-
-`boolean`
-
-▸
-
-Description
-
-Whether playback is paused.
-
-`ended`
-
-`boolean`
-
-▸
-
-Description
-
-Whether playback has reached the end.
-
-`started`
-
-`boolean`
-
-▸
-
-Description
-
-Whether playback has started (played or seeked).
-
-`waiting`
-
-`boolean`
-
-▸
-
-Description
-
-Whether playback is stalled waiting for data.
+| Property | Type | Description |
+| --- | --- | --- |
+| `paused` | `boolean` | Whether playback is paused. |
+| `ended` | `boolean` | Whether playback has reached the end. |
+| `started` | `boolean` | Whether playback has started (played or seeked). |
+| `waiting` | `boolean` | Whether playback is stalled waiting for data. |
 
 ### Actions
 
-Action
-
-Type
-
-Details
-
-`play`
-
-`() => Promise<void>`
-
-▸
-
-Description
-
-Start playback.
-
-`pause`
-
-`() => void`
-
-▸
-
-Description
-
-Pause playback.
-
-`togglePaused`
-
-`() => boolean`
-
-▸
-
-Description
-
-Toggle play/pause. Returns `true` if playback started.
+| Action | Type | Description |
+| --- | --- | --- |
+| `play` | `() => Promise<void>` | Start playback. |
+| `pause` | `() => void` | Pause playback. |
+| `togglePaused` | `() => boolean` | Toggle play/pause. Returns `true` if playback started. |
 
 ### Selector
 
 Pass `selectPlayback` to [`PlayerController`](./player-controller.md) to subscribe to playback state. Returns `undefined` if the playback feature is not configured.
 
-play-button.ts
+**play-button.ts**
 
-```
+```ts
 import { createPlayer, UIElement, selectPlayback } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';