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

package/docs/reference/controls.md

@@ -1,375 +0,0 @@
-# media-controls
-
-Container component for composing and auto-hiding video player controls on user interaction
-
-## Import
-
-ts
-
-```
-import '@videojs/html/ui/controls';
-```
-
-## Anatomy
-
-Import the component and assemble its parts:
-
-html
-
-```
-<media-controls>
-  <media-controls-backdrop></media-controls-backdrop>
-  <media-controls-content>
-    <media-controls-group></media-controls-group>
-  </media-controls-content>
-</media-controls>
-```
-
-## Behavior
-
-If the user is active, or if the video is paused, this component will show controls. Otherwise, it will hide them after a short delay.
-
-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.
-
-## 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.
-
-`Controls.Backdrop` / `<media-controls-backdrop>` is an optional presentational sibling of Content. It receives the same controls state data attributes, allowing its styling and transitions to be authored independently from the controls surface.
-
-By default, controls have the following styles:
-
-css
-
-```
-/* Click-through: clicks pass through controls to video beneath */
-media-controls-content {
-  pointer-events: none;
-}
-
-media-controls-group {
-  pointer-events: auto;
-}
-
-media-controls-backdrop {
-  position: absolute;
-  inset: 0;
-  transition: opacity 0.35s;
-}
-
-/* Fade transition */
-media-controls-content {
-  transition: opacity 0.25s;
-}
-
-media-controls-content:not([data-visible]) {
-  opacity: 0;
-}
-
-media-controls-backdrop:not([data-visible]) {
-  opacity: 0;
-}
-```
-
-## Accessibility
-
-No ARIA role is applied to `<media-controls>` or `<media-controls-content>` — they provide state and layout, not a landmark. `<media-controls-backdrop>` is always hidden from assistive technology. `<media-controls-group>` automatically receives `role="group"` when an `aria-label` or `aria-labelledby` attribute is provided; otherwise no role is assigned.
-
-## Examples
-
-### Basic Usage
-
-Play Pause
-
-index.html
-
-index.css
-
-index.ts
-
-```
-<video-player class="video-player">
-  <media-container>
-    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoplay muted playsinline loop></video>
-
-    <media-controls>
-      <media-controls-backdrop class="controls-backdrop"></media-controls-backdrop>
-      <media-controls-content class="media-controls">
-        <media-controls-group class="controls-group" aria-label="Playback controls">
-          <media-play-button class="button media-play-button">
-            <span class="paused">Play</span>
-            <span class="playing">Pause</span>
-          </media-play-button>
-          <media-time class="time" type="current"></media-time>
-        </media-controls-group>
-      </media-controls-content>
-    </media-controls>
-  </media-container>
-</video-player>
-```
-```
-.video-player media-container {
-  position: relative;
-  display: block;
-}
-
-.video-player media-container video {
-  width: 100%;
-}
-
-.media-controls {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: flex-end;
-  padding: 12px;
-  pointer-events: none;
-  transition: opacity 0.25s;
-}
-
-.controls-backdrop {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 45%);
-  opacity: 1;
-  transition: opacity 0.35s;
-}
-
-.controls-backdrop:not([data-visible]),
-.media-controls:not([data-visible]) {
-  opacity: 0;
-}
-
-.controls-group {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  pointer-events: auto;
-}
-
-.time {
-  display: inline-flex;
-  gap: 4px;
-  align-items: center;
-  padding-block: 8px;
-  padding-inline: 16px;
-  font-size: 14px;
-  color: black;
-  background: rgba(255, 255, 255, 0.75);
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  border-radius: 9999px;
-  backdrop-filter: blur(10px);
-}
-
-.button {
-  padding-block: 8px;
-  padding-inline: 16px;
-  font-size: 14px;
-  color: black;
-  cursor: pointer;
-  background: rgba(255, 255, 255, 0.75);
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  border-radius: 9999px;
-  backdrop-filter: blur(10px);
-}
-
-.button .paused,
-.button .playing {
-  display: none;
-}
-
-.media-play-button[data-paused] .paused {
-  display: inline;
-}
-
-.media-play-button:not([data-paused]) .playing {
-  display: inline;
-}
-```
-```
-import '@videojs/html/video/player';
-import '@videojs/html/ui/container';
-import '@videojs/html/ui/controls';
-import '@videojs/html/ui/play-button';
-import '@videojs/html/ui/time';
-```
-
-## API Reference
-
-### 
-
-media-controls
-
-Manages controls state and provides it to the compound parts. Does not render an element.
-
-#### Props
-
-Prop
-
-Type
-
-Default
-
-Details
-
-`visibility`
-
-`'auto' | 'always'`
-
-`'auto'`
-
-▸
-
-Attribute
-
-`visibility`
-
-Description
-
-Whether controls follow player visibility state or remain visible.
-
-#### State
-
-State is reflected as data attributes for CSS styling.
-
-Property
-
-Type
-
-Details
-
-`visible`
-
-`boolean`
-
-▸
-
-Description
-
-Whether the controls are visible.
-
-`userActive`
-
-`boolean`
-
-▸
-
-Description
-
-Whether the user has recently interacted with the player.
-
-#### Data attributes
-
-Attribute
-
-Type
-
-Details
-
-`data-visible`
-
-▸
-
-Description
-
-Present when controls are visible.
-
-`data-user-active`
-
-▸
-
-Description
-
-Present when the user has recently interacted.
-
-### 
-
-media-controls-backdrop
-
-Presentational layer behind player controls. Renders a `<div>` with the controls state data attributes so skins can style it without reaching across sibling components.
-
-#### Data attributes
-
-Attribute
-
-Type
-
-Details
-
-`data-visible`
-
-▸
-
-Description
-
-Present when controls are visible.
-
-`data-user-active`
-
-▸
-
-Description
-
-Present when the user has recently interacted.
-
-### 
-
-media-controls-content
-
-Renders the interactive controls surface.
-
-#### Data attributes
-
-Attribute
-
-Type
-
-Details
-
-`data-visible`
-
-▸
-
-Description
-
-Present when controls are visible.
-
-`data-user-active`
-
-▸
-
-Description
-
-Present when the user has recently interacted.
-
-### 
-
-media-controls-group
-
-Layout group for related controls; sets `role="group"` when labeled.
-
-#### Data attributes
-
-Attribute
-
-Type
-
-Details
-
-`data-visible`
-
-▸
-
-Description
-
-Present when controls are visible.
-
-`data-user-active`
-
-▸
-
-Description
-
-Present when the user has recently interacted.

package/docs/reference/create-i18n.md

@@ -1,79 +0,0 @@
-# createI18n
-
-Factory that creates framework i18n helpers with custom loading options
-
-## Import
-
-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
-
-```
-import { ReactiveElement } from '@videojs/element';
-import { createI18n } from '@videojs/html/i18n';
-
-const { ProviderMixin, TextMixin } = createI18n();
-
-class LocalizedRoot extends ProviderMixin(ReactiveElement) {}
-class LocalizedText extends TextMixin(ReactiveElement) {}
-```
-
-## API Reference
-
-### Parameters
-
-Parameter
-
-Type
-
-Default
-
-Details
-
-`options`
-
-`{ loader?: LocaleLoader }`
-
-`—`
-
-### 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)`

package/docs/reference/create-selector.md

@@ -1,67 +0,0 @@
-# createSelector
-
-Create a type-safe selector for a store slice's state
-
-## Import
-
-ts
-
-```
-import { createSelector } from "@videojs/store";
-```
-
-`createSelector` is also re-exported from `@videojs/react` and `@videojs/html`.
-
-`createSelector` creates a type-safe selector function for a given slice. The returned selector extracts that slice’s state from the full store state, or returns `undefined` if the slice is not configured.
-
-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
-
-```
-import { createSelector } from '@videojs/store';
-import { myCustomSlice } from './my-custom-slice';
-
-const selectCustom = createSelector(myCustomSlice);
-
-// Use with usePlayer (React) or PlayerController (HTML)
-const state = selectCustom(store.state);
-```
-
-Pass selectors to [`PlayerController`](./player-controller.md) or [`StoreController`](./store-controller.md) for reactive subscriptions.
-
-## API Reference
-
-### Parameters
-
-Parameter
-
-Type
-
-Default
-
-Details
-
-`slice*`
-
-`S`
-
-`—`
-
-▸
-
-Description
-
-The slice to create a selector for.
-
-### Return Value
-
-Property
-
-Type
-
-Details
-
-`displayName`
-
-`string`

package/docs/reference/create-translator.md

@@ -1,81 +0,0 @@
-# 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
-
-### Parameters
-
-Parameter
-
-Type
-
-Default
-
-Details
-
-`translations*`
-
-`object`
-
-`—`
-
-▸
-
-Description
-
-Merged translation map for the active locale.
-
-Type
-
-`{ [Key in TranslationKey]?: TranslationParams[Key] extends never ? string : Key extends keyof ParametricTranslations ? ParametricTranslations[Key] : string; } & Record<string, string | undefined>`
-
-`locale*`
-
-`(typeof LOCALES)[number] | string & o...`
-
-`—`
-
-▸
-
-Description
-
-BCP 47 tag associated with the map (reserved for future locale-aware behavior).
-
-Type
-
-`(typeof LOCALES)[number] | string & object`
-
-### Return Value
-
-Type
-
-Details
-
-`object`
-
-▸
-
-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; }`