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

package/docs/reference/gesture.md

@@ -1,201 +0,0 @@
-# Gesture
-
-Map tap and double-tap gestures to player actions
-
-## Import
-
-tsx
-
-```
-import { Gesture } from '@videojs/react';
-```
-
-## Anatomy
-
-tsx
-
-```
-<Gesture type="doubletap" region="right" pointer="touch" action="seekStep" value={10} />
-```
-
-## 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
-
-App.tsx
-
-App.css
-
-```
-import { Container, createPlayer, Gesture, PlayButton } from '@videojs/react';
-import { Video, videoFeatures } from '@videojs/react/video';
-
-const { Player } = createPlayer({ features: videoFeatures });
-
-export default function BasicUsage() {
-  return (
-    <Player>
-      <Container className="react-gesture-basic">
-        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" muted playsInline />
-        <p className="react-gesture-basic__instructions">Click: play/pause · Double-click: −10s · fullscreen · +10s</p>
-        <PlayButton
-          className="react-gesture-basic__button"
-          render={(props, state) => (
-            <button {...props}>{state.ended ? 'Replay' : state.paused ? 'Play' : 'Pause'}</button>
-          )}
-        />
-        <Gesture type="tap" action="togglePaused" pointer="mouse" region="center" />
-        <Gesture type="doubletap" action="seekStep" value={-10} region="left" />
-        <Gesture type="doubletap" action="toggleFullscreen" region="center" />
-        <Gesture type="doubletap" action="seekStep" value={10} region="right" />
-      </Container>
-    </Player>
-  );
-}
-```
-```
-.react-gesture-basic {
-  position: relative;
-}
-
-.react-gesture-basic video {
-  width: 100%;
-}
-
-.react-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;
-}
-
-.react-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;
-}
-```
-
-## API Reference
-
-### Props
-
-Prop
-
-Type
-
-Default
-
-Details
-
-`action*`
-
-`'togglePaused' | 'toggleMuted' | 'tog...`
-
-`—`
-
-▸
-
-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'`
-
-`—`
-
-▸
-
-Description
-
-Gesture to recognize.
-
-`disabled`
-
-`boolean`
-
-`—`
-
-▸
-
-Description
-
-Whether the gesture is disabled.
-
-`pointer`
-
-`'mouse' | 'touch' | 'pen'`
-
-`—`
-
-▸
-
-Description
-
-Pointer type that may activate the gesture. All pointer types are accepted when omitted.
-
-`region`
-
-`'left' | 'center' | 'right'`
-
-`—`
-
-▸
-
-Description
-
-Optional horizontal part of the container that may activate the gesture.
-
-`value`
-
-`number`
-
-`—`
-
-▸
-
-Description
-
-Numeric value passed to actions such as `seekStep` and `volumeStep`. Uses their shared step when omitted.

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

@@ -1,66 +0,0 @@
-# getI18nTranslations
-
-Read the merged translation map for a locale using BCP 47 parent-chain fallback
-
-## Import
-
-tsx
-
-```
-import { getI18nTranslations } from "@videojs/react/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/react/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>`

package/docs/reference/google-cast.md

@@ -1,73 +0,0 @@
-# GoogleCast
-
-Options for the Google Cast extension that configures the receiver and load request
-
-Adds the [Google Cast extension](../concepts/overview.md) to the player’s media. It renders nothing — place it inside the player as a sibling of the media element, and pair it with a [CastButton](./cast-button.md). See [Cast to AirPlay and Chromecast](../how-to/cast-to-airplay-and-chromecast.md) for the complete setup.
-
-## Import
-
-bash
-
-```
-pnpm add @videojs/react @videojs/google-cast
-```
-
-tsx
-
-```
-import { GoogleCast } from '@videojs/react/extensions/google-cast';
-```
-
-## Anatomy
-
-tsx
-
-```
-<GoogleCast />
-```
-
-## Options
-
-Prop
-
-Type
-
-Description
-
-`receiver`
-
-`string`
-
-Cast receiver application ID. Defaults to Google’s Default Media Receiver (`CC1AD845`)
-
-`src`
-
-`string`
-
-Source URL loaded on the receiver. Defaults to the source the browser is playing
-
-`contentType`
-
-`string`
-
-MIME type of the Cast source. When unset, the receiver infers it from the URL
-
-`streamType`
-
-`'on-demand' | 'live'`
-
-Stream type reported to the receiver. Falls back to the player’s stream type
-
-`customData`
-
-`object`
-
-Custom data sent to the receiver with each load request
-
-When the Cast `src` is an HLS playlist, Video.js detects the segment format and sets the receiver’s `hlsSegmentFormat` and `hlsVideoSegmentFormat` load-request fields. The Default Media Receiver plays HLS natively, so no extra receiver setup is needed.
-
-## See also
-
-- [Cast to AirPlay and Chromecast](../how-to/cast-to-airplay-and-chromecast.md): Add remote playback to a player
-- [CastButton component reference](./cast-button.md)
-- [Remote Playback feature reference](./feature-remote-playback.md)

package/docs/reference/has-registered-locale.md

@@ -1,55 +0,0 @@
-# hasRegisteredLocale
-
-Check whether an exact locale tag exists in the global i18n registry
-
-## Import
-
-tsx
-
-```
-import { hasRegisteredLocale } from "@videojs/react/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
-
-```
-import { hasRegisteredLocale, registerI18n } from '@videojs/react/i18n';
-
-hasRegisteredLocale('fr'); // false until registered
-registerI18n('fr', { buttons: { play: 'Lecture' } });
-hasRegisteredLocale('fr'); // true
-```
-
-## API Reference
-
-### Parameters
-
-Parameter
-
-Type
-
-Default
-
-Details
-
-`locale*`
-
-`(typeof LOCALES)[number] | string & o...`
-
-`—`
-
-▸
-
-Description
-
-BCP 47 tag to test.
-
-Type
-
-`(typeof LOCALES)[number] | string & object`
-
-### Return Value
-
-`boolean`

package/docs/reference/hls-audio.md

@@ -1,81 +0,0 @@
-# HlsAudio
-
-Audio-only HLS element that plays the audio rendition of an HLS stream
-
-Audio-only HLS element that plays just the audio rendition of an HLS stream — even when the source is a mixed audio/video manifest. Useful for audio podcast players, background audio, and bandwidth-constrained contexts where downloading video data would be wasted. For full audio/video HLS playback, see [HlsVideo](/docs/framework/html/reference/hls-video/).
-
-## Import
-
-tsx
-
-```
-import { HlsAudio } from '@videojs/react/media/hls-audio';
-```
-
-## Examples
-
-### Basic Usage
-
-App.tsx
-
-App.css
-
-```
-import { HlsAudio } from '@videojs/react/media/hls-audio';
-
-export default function BasicUsage() {
-  return <HlsAudio className="hls-audio" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" controls />;
-}
-```
-```
-.hls-audio {
-  width: 100%;
-  height: 54px;
-}
-```
-
-## API Reference
-
-### Props
-
-Accepts the standard React props for a native `<audio>`, plus these Video.js-specific props:
-
-Prop
-
-Type
-
-Default
-
-Details
-
-`disableRemotePlayback`
-
-`boolean`
-
-`false`
-
-`preload`
-
-`'' | 'none' | 'metadata' | 'auto'`
-
-`''`
-
-▸
-
-Description
-
-Preload type (`'none'` / `'metadata'` / `'auto'`).
-
-`src`
-
-`string`
-
-`''`
-
-### Ref
-
-Forwards its ref to the rendered `<audio>`. The ref is an [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) and exposes its complete native property and method API.
-
-### Events
-
-Handle standard media events with React event props such as `onPlay` and `onTimeUpdate`. For native events without a React prop, attach a listener through the ref with `addEventListener`.

package/docs/reference/hls-background-video.md

@@ -1,75 +0,0 @@
-# HlsBackgroundVideo
-
-HLS background video without controls, audio, captions, or adaptive quality
-
-HlsBackgroundVideo plays an HLS source through the SPF background engine. It is fixed to muted, autoplaying, inline, looped playback and omits controls, audio, text, DRM, and adaptive rendition switching.
-
-See [Add a background video](../how-to/add-a-background-video.md) for layout, poster, accessibility, and source-choice guidance.
-
-## Import
-
-tsx
-
-```
-import { HlsBackgroundVideo } from '@videojs/react/media/hls-background-video';
-```
-
-## Source behavior
-
-`src` takes a complete HLS manifest URL. The engine starts loading when it receives the URL and pins the largest rendition that fits the screen. The ladder may be video-only, but its video renditions must use fMP4/CMAF. This engine does not include MPEG-TS transmuxing or DRM playback.
-
-tsx
-
-```
-<HlsBackgroundVideo
-  src="https://media.example.com/hero.m3u8"
-  crossOrigin="anonymous"
-  onError={handleError}
-/>
-```
-
-There is no `source` object, `preload` mode, or opt-out for muted, autoplay, and loop. Assigning a new `src` restarts playback from scratch.
-
-## API
-
-Member
-
-Platform
-
-Description
-
-`src`
-
-HTML and React
-
-HLS manifest URL
-
-`error`
-
-HTML
-
-Fatal SPF media error for the current source, or `null`
-
-`video`
-
-HTML
-
-Inner native `<video>` element
-
-`onError`
-
-React
-
-Fires on the rendered `<video>` when SPF reports a fatal source error
-
-`ref`
-
-React
-
-Ref to the rendered native `<video>` element
-
-The HTML element also fires an `error` event when `error` becomes fatal. The inner video’s own `error` can remain `null` because SPF, rather than the browser, rejected the source.
-
-## Styling
-
-The component renders a native `<video>`. Set its size, `object-fit`, and `object-position` through `className` or `style`.

package/docs/reference/hls-video.md

@@ -1,93 +0,0 @@
-# HlsVideo
-
-Lightweight HLS video element with minimal bundle size
-
-The default HLS video element, optimized for minimal bundle size. [HlsJsVideo](/docs/framework/html/reference/hlsjs-video/) is the larger, more compatible alternative.
-
-## Import
-
-tsx
-
-```
-import { HlsVideo } from '@videojs/react/media/hls-video';
-```
-
-## Examples
-
-### Basic Usage
-
-App.tsx
-
-App.css
-
-```
-import { HlsVideo } from '@videojs/react/media/hls-video';
-
-export default function BasicUsage() {
-  return <HlsVideo className="hls-video" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" autoPlay muted playsInline loop />;
-}
-```
-```
-.hls-video {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-}
-```
-
-## API Reference
-
-### Props
-
-Accepts the standard React props for a native `<video>`, plus these Video.js-specific props:
-
-Prop
-
-Type
-
-Default
-
-Details
-
-`disableRemotePlayback`
-
-`boolean`
-
-`false`
-
-`preload`
-
-`'' | 'none' | 'metadata' | 'auto'`
-
-`''`
-
-▸
-
-Description
-
-Preload type (`'none'` / `'metadata'` / `'auto'`).
-
-`src`
-
-`string`
-
-`''`
-
-`streamType`
-
-`MediaStreamType`
-
-`"unknown"`
-
-▸
-
-Description
-
-The source's stream type — `'live'`, `'on-demand'`, or `'unknown'` until a media playlist has been parsed. Setting a non-`'unknown'` value pins a user override (detection stops updating it); setting `'unknown'` reverts to the engine's detected value.
-
-### Ref
-
-Forwards its ref to the rendered `<video>`. The ref is an [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) and exposes its complete native property and method API.
-
-### Events
-
-Handle standard media events with React event props such as `onPlay` and `onTimeUpdate`. For native events without a React prop, attach a listener through the ref with `addEventListener`.