npm - @videojs/html - Versions diffs - 10.0.0-rc.1 → 10.0.0-rc.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2259) hide show

package/docs/reference/feature-volume.md DELETED Viewed

@@ -1,112 +0,0 @@
-# Volume
-Volume level and mute state for the player store
-Controls volume level and mute state. These capabilities have independent availability values because media can support mute without supporting volume-level changes.
-## Import
-ts
-```
-import { volumeFeature } from '@videojs/html';
-```
-The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](../concepts/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.
-### 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.
-### Selector
-Pass `selectVolume` to [`PlayerController`](./player-controller.md) to subscribe to volume state. Returns `undefined` if the volume feature is not configured.
-Check `volumeAvailability` before showing a volume-level control, and check `mutedAvailability` before showing a mute control.
-volume-slider.ts
-```
-import { createPlayer, UIElement, selectVolume } from '@videojs/html';
-import { videoFeatures } from '@videojs/html/video';
-const { PlayerController } = createPlayer({ features: videoFeatures });
-class VolumeSlider extends UIElement {
-  readonly #volume = new PlayerController(this, selectVolume);
-}
-```

package/docs/reference/fullscreen-button.md DELETED Viewed

@@ -1,261 +0,0 @@
-# media-fullscreen-button
-Accessible fullscreen toggle button with keyboard support and state reflection
-## Import
-ts
-```
-import '@videojs/html/ui/fullscreen-button';
-```
-## Anatomy
-html
-```
-<media-fullscreen-button></media-fullscreen-button>
-```
-## Behavior
-Toggles fullscreen mode. The button derives two state hooks from `availability`:
-*   **`disabled`** (`true` until fullscreen is available, or when the `disabled` prop is set) — sets `aria-disabled="true"` and `data-disabled`. A prop-disabled, available button stays focusable but does not activate.
-*   **`hidden`** (`true` while fullscreen is `"unavailable"` or `"unsupported"`) — applies the native HTML `hidden` attribute on the custom element; the React component returns `null`.
-## Styling
-You can style the button based on fullscreen state:
-css
-```
-/* In fullscreen */
-media-fullscreen-button[data-fullscreen] {
-  background: red;
-}
-/* Non-interactive (disabled prop) */
-media-fullscreen-button[data-disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-```
-The button remains hidden until fullscreen is available. The HTML element receives the native `hidden` attribute, and the React component returns `null`. No extra CSS is required.
-## Accessibility
-Renders a `<button>` with an automatic `aria-label`: “Enter fullscreen” or “Exit fullscreen”. Override with the `label` prop. Keyboard activation: Enter / Space.
-## Examples
-### Basic Usage
-Exit Fullscreen Fullscreen
-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-fullscreen-button class="media-fullscreen-button">
-      <span class="fullscreen">Exit Fullscreen</span>
-      <span class="not-fullscreen">Fullscreen</span>
-    </media-fullscreen-button>
-  </media-container>
-</video-player>
-```
-```
-.video-player media-container {
-  position: relative;
-  display: block;
-}
-.video-player media-container video {
-  width: 100%;
-}
-.media-fullscreen-button {
-  position: absolute;
-  right: 10px;
-  bottom: 10px;
-  padding-block: 8px;
-  padding-inline: 20px;
-  color: black;
-  cursor: pointer;
-  background: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 9999px;
-  backdrop-filter: blur(10px);
-}
-.media-fullscreen-button .fullscreen {
-  display: none;
-}
-.media-fullscreen-button .not-fullscreen {
-  display: none;
-}
-.media-fullscreen-button[data-fullscreen] .fullscreen {
-  display: inline;
-}
-.media-fullscreen-button:not([data-fullscreen]) .not-fullscreen {
-  display: inline;
-}
-```
-```
-import '@videojs/html/video/player';
-import '@videojs/html/ui/container';
-import '@videojs/html/ui/fullscreen-button';
-```
-## API Reference
-### Props
-Prop
-Type
-Default
-Details
-`disabled`
-`boolean`
-`false`
-▸
-Attribute
-`disabled`
-Description
-Whether the button is disabled.
-`label`
-`object`
-`''`
-▸
-Attribute
-`label`
-Description
-Custom label for the button.
-Type
-`{ key: string; text: string } | string | ((state: FullscreenButtonState) => Text | string)`
-### State
-State is reflected as data attributes for CSS styling.
-Property
-Type
-Details
-`fullscreen`
-`boolean`
-▸
-Description
-Whether fullscreen mode is currently active.
-`label`
-`{ key: string; text: string } | string`
-`availability`
-`MediaFullscreenState['fullscreenAvailability']`
-▸
-Description
-Whether fullscreen can be requested on this platform.
-`disabled`
-`boolean`
-▸
-Description
-Non-interactive but still focusable (mirrors `aria-disabled`).
-`hidden`
-`boolean`
-▸
-Description
-Whether the button is hidden until fullscreen is available.
-### Data attributes
-Attribute
-Type
-Details
-`data-fullscreen`
-▸
-Description
-Present when fullscreen mode is active.
-`data-availability`
-`MediaFullscreenState['fullscreenAvailability']`
-▸
-Description
-Indicates fullscreen availability (`available`, `unavailable`, `unsupported`).
-`data-disabled`
-▸
-Description
-Present when the button is non-interactive (mirrors `aria-disabled`).
-`data-hidden`
-▸
-Description
-Present when the button is hidden because fullscreen is not available.

package/docs/reference/gesture.md DELETED Viewed

@@ -1,240 +0,0 @@
-# media-gesture
-Map tap and double-tap gestures to player actions
-## Import
-ts
-```
-import '@videojs/html/ui/gesture';
-```
-## Anatomy
-html
-```
-<media-gesture
-  type="doubletap"
-  region="right"
-  pointer="touch"
-  action="seekStep"
-  value="10"
-></media-gesture>
-```
-## Behavior
-`Gesture` is a behavior component: it renders no visible interface. Place it inside a [Container](./player-container.md) to map a `tap` or `doubletap` gesture to a player action. A tap must use the primary pointer and complete within 250 milliseconds. When a matching double-tap gesture exists, the first tap waits briefly to see whether a second tap follows.
-Use `pointer` to accept only `mouse`, `touch`, or `pen` input. Use `region` to divide the container horizontally:
-*   Left and right regions split the container into halves.
-*   Left, center, and right regions split it into thirds.
-*   A center-only region covers the full container.
-*   A single left or right region covers that half of the container.
-An unregional gesture acts as a fallback outside the active regions. When several registrations match the same gesture, the first registration wins.
-Choose a built-in `action` from the API reference below, or use an application-defined name to call a same-named action on the player store. Pass `value` as seconds for `seekStep` or as a volume delta such as `0.05` or `-0.05` for `volumeStep`. When omitted, these actions use the 10-second or five-percentage-point default. A left-region seek gesture uses the negative step. Unknown action names do nothing and warn in development.
-## Accessibility
-Gestures supplement visible, keyboard-operable controls; they should never be the only way to perform an action. Gestures ignore pointer activity that begins on interactive controls, links, form fields, menu items, or elements marked with `data-interactive`.
-## Examples
-### Basic Usage
-This example follows the common video-player pattern: click to play or pause, double-click the left or right side to seek ten seconds, and double-click the center to toggle fullscreen.
-Click: play/pause · Double-click: −10s · fullscreen · +10s
-Play Pause Replay
-index.html
-index.css
-index.ts
-```
-<video-player>
-  <media-container class="html-gesture-basic">
-    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" muted playsinline></video>
-    <p class="html-gesture-basic__instructions">Click: play/pause · Double-click: −10s · fullscreen · +10s</p>
-    <media-play-button class="html-gesture-basic__button">
-      <span class="show-when-paused">Play</span>
-      <span class="show-when-playing">Pause</span>
-      <span class="show-when-ended">Replay</span>
-    </media-play-button>
-    <media-gesture type="tap" action="togglePaused" pointer="mouse" region="center"></media-gesture>
-    <media-gesture type="doubletap" action="seekStep" value="-10" region="left"></media-gesture>
-    <media-gesture type="doubletap" action="toggleFullscreen" region="center"></media-gesture>
-    <media-gesture type="doubletap" action="seekStep" value="10" region="right"></media-gesture>
-  </media-container>
-</video-player>
-```
-```
-.html-gesture-basic {
-  position: relative;
-}
-.html-gesture-basic video {
-  width: 100%;
-}
-.html-gesture-basic__instructions {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  padding: 6px 10px;
-  margin: 0;
-  color: white;
-  pointer-events: none;
-  background: rgb(0 0 0 / 70%);
-  border-radius: 4px;
-}
-.html-gesture-basic__button {
-  position: absolute;
-  bottom: 10px;
-  left: 10px;
-  padding: 8px 20px;
-  color: black;
-  cursor: pointer;
-  background: rgb(255 255 255 / 80%);
-  border: 1px solid rgb(255 255 255 / 30%);
-  border-radius: 9999px;
-}
-.html-gesture-basic__button .show-when-paused,
-.html-gesture-basic__button .show-when-playing,
-.html-gesture-basic__button .show-when-ended {
-  display: none;
-}
-.html-gesture-basic__button[data-paused]:not([data-ended]) .show-when-paused,
-.html-gesture-basic__button:not([data-paused]) .show-when-playing,
-.html-gesture-basic__button[data-ended] .show-when-ended {
-  display: inline;
-}
-```
-```
-import '@videojs/html/video/player';
-import '@videojs/html/ui/gesture';
-import '@videojs/html/ui/play-button';
-```
-## API Reference
-### Props
-Prop
-Type
-Default
-Details
-`action*`
-`'togglePaused' | 'toggleMuted' | 'tog...`
-`—`
-▸
-Attribute
-`action`
-Description
-Built-in player action or same-named custom store action to run when the gesture is recognized.
-Type
-`'togglePaused' | 'toggleMuted' | 'toggleFullscreen' | 'toggleSubtitles' | 'togglePictureInPicture' | 'toggleControls' | 'seekStep' | 'volumeStep' | 'speedUp' | 'speedDown' | string & object`
-`type*`
-`'tap' | 'doubletap'`
-`—`
-▸
-Attribute
-`type`
-Description
-Gesture to recognize.
-`disabled`
-`boolean`
-`—`
-▸
-Attribute
-`disabled`
-Description
-Whether the gesture is disabled.
-`pointer`
-`'mouse' | 'touch' | 'pen'`
-`—`
-▸
-Attribute
-`pointer`
-Description
-Pointer type that may activate the gesture. All pointer types are accepted when omitted.
-`region`
-`'left' | 'center' | 'right'`
-`—`
-▸
-Attribute
-`region`
-Description
-Optional horizontal part of the container that may activate the gesture.
-`value`
-`number`
-`—`
-▸
-Attribute
-`value`
-Description
-Numeric value passed to actions such as `seekStep` and `volumeStep`. Uses their shared step when omitted.

package/docs/reference/get-i18n-translations.md DELETED Viewed

@@ -1,66 +0,0 @@
-# getI18nTranslations
-Read the merged translation map for a locale using BCP 47 parent-chain fallback
-## Import
-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
-```
-import { createTranslator, getI18nTranslations } from '@videojs/html/i18n';
-const t = createTranslator(getI18nTranslations('pt-BR'), 'pt-BR');
-t('buttons.play', { default: 'Play' });
-```
-## API Reference
-### Parameters
-Parameter
-Type
-Default
-Details
-`locale*`
-`(typeof LOCALES)[number] | string & o...`
-`—`
-▸
-Description
-BCP 47 tag to resolve (e.g. `es-MX`, `zh-Hant-HK`).
-Type
-`(typeof LOCALES)[number] | string & object`
-### 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>`