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

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

@@ -4,17 +4,13 @@ Factory that creates framework i18n helpers with custom loading options
 
 ## Import
 
-ts
-
-```
+```ts
 import { createI18n } from "@videojs/html/i18n";
 ```
 
 `createI18n` returns a context-bound `ProviderMixin`, `TextMixin`, and `I18nController` for custom elements. Use it when you need a custom locale loader or custom i18n elements. Most apps use `<media-i18n>` and `<media-text>` from `@videojs/html/i18n`.
 
-ts
-
-```
+```ts
 import { ReactiveElement } from '@videojs/element';
 import { createI18n } from '@videojs/html/i18n';
 
@@ -26,54 +22,19 @@ class LocalizedText extends TextMixin(ReactiveElement) {}
 
 ## API Reference
 
-### Parameters
-
-Parameter
-
-Type
+`createI18n(options?): CreateI18nResult`
 
-Default
-
-Details
-
-`options`
-
-`{ loader?: LocaleLoader }`
+### Parameters
 
-`—`
+| Parameter | Type | Default |
+| --- | --- | --- |
+| `options` | `{ loader?: ((tag: string) => Promise<Partial<FlatTranslations> \| undefined>) }` | — |
 
 ### Return Value
 
-Property
-
-Type
-
-Details
-
-`context`
-
-`Context<symbol, I18nContextValue>`
-
-`I18nController`
-
-`typeof I18nController`
-
-`ProviderMixin`
-
-`function`
-
-▸
-
-Type
-
-`((Base: Base) => Constructor<ReactiveElement> & Base)`
-
-`TextMixin`
-
-`function`
-
-▸
-
-Type
-
-`((Base: Base) => Constructor<ReactiveElement> & Base)`
+| Property | Type |
+| --- | --- |
+| `context` | `Context<symbol, I18nContextValue>` |
+| `I18nController` | `typeof I18nController` |
+| `ProviderMixin` | `(<Base extends ReactiveElementMixinBase>(Base: Base) => Constructor<ReactiveElement> & Base)` |
+| `TextMixin` | `(<Base extends ReactiveElementMixinBase>(Base: Base) => Constructor<ReactiveElement> & Base)` |

package/docs/reference/{create-selector.md → api/create-selector.md}

@@ -4,9 +4,7 @@ Create a type-safe selector for a store slice's state
 
 ## Import
 
-ts
-
-```
+```ts
 import { createSelector } from "@videojs/store";
 ```
 
@@ -16,9 +14,9 @@ import { createSelector } from "@videojs/store";
 
 The built-in selectors ([`selectPlayback`](./feature-playback.md), [`selectBuffer`](./feature-buffer.md), etc.) are all created with `createSelector`. Use it to create selectors for custom slices.
 
-my-custom-selector.ts
+**my-custom-selector.ts**
 
-```
+```ts
 import { createSelector } from '@videojs/store';
 import { myCustomSlice } from './my-custom-slice';
 
@@ -32,36 +30,16 @@ Pass selectors to [`PlayerController`](./player-controller.md) or [`StoreControl
 
 ## API Reference
 
-### Parameters
-
-Parameter
-
-Type
-
-Default
-
-Details
-
-`slice*`
+`createSelector<S extends AnySlice>(slice): Selector<object, InferSliceState<S> | undefined>`
 
-`S`
-
-`—`
-
-▸
-
-Description
+### Parameters
 
-The slice to create a selector for.
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `slice` (required) | `S` | — | The slice to create a selector for. |
 
 ### Return Value
 
-Property
-
-Type
-
-Details
-
-`displayName`
-
-`string`
+| Type |
+| --- |
+| `{ (state: object): (S extends Slice<any, infer State, infer Derived> ? Simplify<PublicSourceState<State> & Derived> : never) \| undefined; displayName?: string }` |

package/docs/reference/api/create-translator.md

@@ -0,0 +1,36 @@
+# createTranslator
+
+Build a typed translator from a resolved translation map
+
+## Import
+
+```ts
+import { createTranslator } from "@videojs/html/i18n";
+```
+
+`createTranslator` wraps the flat map returned by `getI18nTranslations` and returns a typed translator. Providers call this internally after merging registry, lazy-loaded built-in packs, browser-translated fallback copy, and provider layers. Use it directly for custom UI outside built-in controls.
+
+```ts
+import { createTranslator, getI18nTranslations } from '@videojs/html/i18n';
+
+const t = createTranslator(getI18nTranslations('fr'), 'fr');
+t('buttons.play', { default: 'Play' });
+t('seek.forward', { seconds: 5, default: 'Seek forward {seconds} seconds' });
+```
+
+## API Reference
+
+`createTranslator(translations, locale): Translator`
+
+### Parameters
+
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `translations` (required) | `{ [Key in TranslationKey]?: TranslationParams[Key] extends never ? string : Key extends keyof ParametricTranslations ? ParametricTranslations[Key] : string; } & Record<string, string \| undefined>` | — | Merged translation map for the active locale. |
+| `locale` (required) | `(typeof LOCALES)[number] \| string & {}` | — | BCP 47 tag associated with the map (reserved for future locale-aware behavior). |
+
+### Return Value
+
+| Type |
+| --- |
+| `{ <Key extends string>(key: Key, ...args: Key extends TranslationKey ? TranslationParams[Key] extends never ? [params?: TranslationOptions] : [params: TranslationParams[Key] & TranslationOptions] : [params?: TextParams & TranslationOptions]): string; (text: Text, params?: TextParams): string }` |

package/docs/reference/api/error-codes.md

@@ -0,0 +1,25 @@
+# Error Codes
+
+Error codes emitted by the video.js package and how to resolve them
+
+Playback failures use the [error feature](./feature-error.md) instead. See [Handle playback errors](../../guides/playback-errors.md) for application handling.
+
+## Video.js 8 Error Codes
+
+The `video.js` package throws these `VJS8_LEGACY_*` errors when code calls a Video.js 8 API that does not exist in Video.js 10. Each code identifies the old API and its Video.js 10 equivalent.
+
+- [VJS8_LEGACY_INIT](./vjs8-legacy-init.md)
+
+  `videojs()` was the Video.js 8 API. Video.js 10 has no factory; players are components you compose.
+- [VJS8_LEGACY_PLUGIN](./vjs8-legacy-plugin.md)
+
+  `videojs.registerPlugin()` was the Video.js 8 plugin system. Video.js 10 has no plugin registry.
+- [VJS8_LEGACY_COMPONENT](./vjs8-legacy-component.md)
+
+  `videojs.registerComponent()` was the Video.js 8 component tree. Video.js 10 components are custom elements and React components.
+- [VJS8_LEGACY_GET_PLAYER](./vjs8-legacy-get-player.md)
+
+  `videojs.getPlayer()` looked players up by id. Video.js 10 has no registry; hold a reference to the element.
+- [VJS8_LEGACY_OPTIONS](./vjs8-legacy-options.md)
+
+  `videojs.options` held Video.js 8 global defaults. Video.js 10 has no global; configuration lives on the components you render.

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

@@ -6,59 +6,33 @@ Tracks available audio tracks and selects the enabled track.
 
 ## Import
 
-ts
-
-```
+```ts
 import { audioTrackFeature } 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
-
-`audioTrackList`
-
-`MediaAudioTrack[]`
-
-▸
-
-Description
-
-Audio tracks available for manual track selection.
+| Property | Type | Description |
+| --- | --- | --- |
+| `audioTrackList` | `MediaAudioTrack[]` | Audio tracks available for manual track selection. |
 
 ### Actions
 
-Action
-
-Type
-
-Details
-
-`selectAudioTrack`
-
-`(value: string) => void`
-
-▸
-
-Description
-
-Select an audio track by menu value.
+| Action | Type | Description |
+| --- | --- | --- |
+| `selectAudioTrack` | `(value: string) => void` | Select an audio track by menu value. |
 
 ### Selector
 
 Pass `selectAudioTrack` to [`PlayerController`](./player-controller.md) to subscribe to audio track state. Returns `undefined` if the audio track feature is not configured.
 
-audio-track-info.ts
+**audio-track-info.ts**
 
-```
+```ts
 import { createPlayer, UIElement, selectAudioTrack } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 

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

@@ -8,51 +8,28 @@ During live playback, `seekable` tells you which times remain available. The fir
 
 ## Import
 
-ts
-
-```
+```ts
 import { bufferFeature } 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
-
-`buffered`
-
-`[number, number][]`
-
-▸
-
-Description
-
-Buffered time ranges as \[start, end\] tuples.
-
-`seekable`
-
-`[number, number][]`
-
-▸
-
-Description
-
-Seekable time ranges as \[start, end\] tuples.
+| Property | Type | Description |
+| --- | --- | --- |
+| `buffered` | `[number, number][]` | Buffered time ranges as \[start, end\] tuples. |
+| `seekable` | `[number, number][]` | Seekable time ranges as \[start, end\] tuples. |
 
 ### Selector
 
 Pass `selectBuffer` to [`PlayerController`](./player-controller.md) to subscribe to buffer state. Returns `undefined` if the buffer feature is not configured.
 
-buffer-bar.ts
+**buffer-bar.ts**
 
-```
+```ts
 import { createPlayer, UIElement, selectBuffer } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 

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

@@ -6,81 +6,35 @@ Read-only — tracks user activity for showing and hiding controls.
 
 ## Import
 
-ts
-
-```
+```ts
 import { controlsFeature } 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
-
-`userActive`
-
-`boolean`
-
-▸
-
-Description
-
-Whether the user has recently interacted with the player.
-
-`controlsVisible`
-
-`boolean`
-
-▸
-
-Description
-
-Whether controls should be visible.
+| Property | Type | Description |
+| --- | --- | --- |
+| `userActive` | `boolean` | Whether the user has recently interacted with the player. |
+| `controlsVisible` | `boolean` | Whether controls should be visible. |
 
 ### Actions
 
-Action
-
-Type
-
-Details
-
-`requestControlsLock`
-
-`() => (() => void)`
-
-▸
-
-Description
-
-Keep controls visible during a sustained interaction.
-
-The returned function releases the lock. Multiple concurrent locks are supported and each release function is idempotent.
-
-`toggleControls`
-
-`() => boolean`
-
-▸
-
-Description
-
-Toggle controls visibility. Returns the new `controlsVisible` value.
+| Action | Type | Description |
+| --- | --- | --- |
+| `requestControlsLock` | `() => (() => void)` | Keep controls visible during a sustained interaction. The returned function releases the lock. Multiple concurrent locks are supported and each release function is idempotent. |
+| `toggleControls` | `() => boolean` | Toggle controls visibility. Returns the new `controlsVisible` value. |
 
 ### Selector
 
 Pass `selectControls` to [`PlayerController`](./player-controller.md) to subscribe to controls state. Returns `undefined` if the controls feature is not configured.
 
-controls-overlay.ts
+**controls-overlay.ts**
 
-```
+```ts
 import { createPlayer, UIElement, selectControls } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 

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

@@ -6,59 +6,33 @@ Tracks media errors.
 
 ## Import
 
-ts
-
-```
+```ts
 import { errorFeature } 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
-
-`error`
-
-`{ code: number; message: string } | null`
-
-▸
-
-Description
-
-The current media error, or null if none.
+| Property | Type | Description |
+| --- | --- | --- |
+| `error` | `{ code: number; message: string } \| null` | The current media error, or null if none. |
 
 ### Actions
 
-Action
-
-Type
-
-Details
-
-`dismissError`
-
-`() => void`
-
-▸
-
-Description
-
-Dismiss the current error by clearing it.
+| Action | Type | Description |
+| --- | --- | --- |
+| `dismissError` | `() => void` | Dismiss the current error by clearing it. |
 
 ### Selector
 
 Pass `selectError` to [`PlayerController`](./player-controller.md) to subscribe to error state. Returns `undefined` if the error feature is not configured.
 
-error-display.ts
+**error-display.ts**
 
-```
+```ts
 import { createPlayer, UIElement, selectError } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 

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

@@ -6,89 +6,36 @@ Controls fullscreen mode. Tries the container element first, falls back to the m
 
 ## Import
 
-ts
-
-```
+```ts
 import { fullscreenFeature } 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
-
-`fullscreen`
-
-`boolean`
-
-▸
-
-Description
-
-Whether fullscreen mode is currently active.
-
-`fullscreenAvailability`
-
-`'available' | 'unavailable' | 'unsupported'`
-
-▸
-
-Description
-
-Whether fullscreen can be requested on this platform.
+| Property | Type | Description |
+| --- | --- | --- |
+| `fullscreen` | `boolean` | Whether fullscreen mode is currently active. |
+| `fullscreenAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether fullscreen can be requested on this platform. |
 
 ### Actions
 
-Action
-
-Type
-
-Details
-
-`requestFullscreen`
-
-`() => Promise<void>`
-
-▸
-
-Description
-
-Enter fullscreen mode. Tries container first, falls back to media element.
-
-`exitFullscreen`
-
-`() => Promise<void>`
-
-▸
-
-Description
-
-Exit fullscreen mode.
-
-`toggleFullscreen`
-
-`() => Promise<void>`
-
-▸
-
-Description
-
-Toggle fullscreen mode.
+| Action | Type | Description |
+| --- | --- | --- |
+| `requestFullscreen` | `() => Promise<void>` | Enter fullscreen mode. Tries container first, falls back to media element. |
+| `exitFullscreen` | `() => Promise<void>` | Exit fullscreen mode. |
+| `toggleFullscreen` | `() => Promise<void>` | Toggle fullscreen mode. |
 
 ### Selector
 
 Pass `selectFullscreen` to [`PlayerController`](./player-controller.md) to subscribe to fullscreen state. Returns `undefined` if the fullscreen feature is not configured.
 
-fullscreen-button.ts
+**fullscreen-button.ts**
 
-```
+```ts
 import { createPlayer, UIElement, selectFullscreen } from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 
@@ -105,9 +52,7 @@ Add [`features.orientationLock`](./feature-orientation-lock.md) to lock screen o
 
 The feature locks to `landscape` unless the provider sets another Screen Orientation API type.
 
-html
-
-```
+```html
 <my-player orientation-lock-type="portrait">
   <video src="/video.mp4"></video>
 </my-player>