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

package/docs/reference/components/volume-slider.md

@@ -0,0 +1,337 @@
+# VolumeSlider
+
+A slider component for controlling media playback volume
+
+## Import
+
+```tsx
+import { VolumeSlider } from '@videojs/react';
+```
+
+## Anatomy
+
+```tsx
+<VolumeSlider.Root>
+  <VolumeSlider.Track>
+    <VolumeSlider.Fill />
+  </VolumeSlider.Track>
+  <VolumeSlider.Thumb />
+  <VolumeSlider.Preview>
+    <VolumeSlider.Value type="pointer" />
+  </VolumeSlider.Preview>
+</VolumeSlider.Root>
+```
+
+## Behavior
+
+Controls the media volume level. The slider maps its 0–100 internal range to the media’s 0–1 volume scale. When the media is muted, the fill level drops to 0 regardless of the stored volume value.
+
+When `volumeAvailability` is not `"available"`, the component returns `null`. This is independent of `mutedAvailability`, which controls whether the mute button is shown.
+
+## Styling
+
+Use [CSS custom properties](#css-custom-properties) to style the fill and pointer levels:
+
+React renders a `<div>` element. Add a `className` to style it:
+
+```css
+.volume-slider::before {
+  width: var(--media-slider-fill);
+}
+```
+
+## Accessibility
+
+Renders with `role="slider"` and an automatic `aria-label` that resolves to “Volume” from the active locale. Override with the `label` prop. Keyboard controls:
+
+- Arrow Left / Arrow Right: step by `step` increment
+- Page Up / Page Down: step by `largeStep` increment
+- Home: set volume to 0
+- End: set volume to max
+
+Scroll wheel support:
+
+- **Mouse wheel / trackpad scroll**: adjusts volume by `wheelStep` increment (default `5`)
+
+## Examples
+
+Nest sub-components for full control over the slider’s DOM structure. This example includes a track, fill bar, draggable thumb, and a tooltip that shows the volume percentage on hover.
+
+**App.tsx**
+
+```tsx
+import { Container, createPlayer, MuteButton, VolumeSlider } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const { Player } = createPlayer({ features: videoFeatures });
+
+export default function WithParts() {
+  return (
+    <Player>
+      <Container className="media-container">
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
+        <MuteButton
+          className="media-mute-button"
+          render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
+        />
+        <VolumeSlider.Root className="media-volume-slider">
+          <VolumeSlider.Track className="media-slider-track">
+            <VolumeSlider.Fill className="media-slider-fill" />
+          </VolumeSlider.Track>
+          <VolumeSlider.Thumb className="media-slider-thumb" />
+          <VolumeSlider.Value type="pointer" className="media-slider-value" />
+        </VolumeSlider.Root>
+      </Container>
+    </Player>
+  );
+}
+```
+
+**App.css**
+
+```css
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.media-mute-button {
+  position: absolute;
+  bottom: 10px;
+  left: 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-volume-slider {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  display: flex;
+  align-items: center;
+  width: 100px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.media-slider-track {
+  position: absolute;
+  right: 0;
+  left: 0;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  backdrop-filter: blur(10px);
+  transition: height 150ms ease;
+}
+
+.media-volume-slider[data-interactive] .media-slider-track {
+  height: 6px;
+}
+
+.media-slider-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--media-slider-fill);
+  height: 100%;
+  background: white;
+  border-radius: 9999px;
+}
+
+.media-slider-thumb {
+  position: absolute;
+  left: var(--media-slider-fill);
+  width: 14px;
+  height: 14px;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  transform: translateX(-50%) scale(0);
+  transition: transform 150ms ease;
+}
+
+.media-volume-slider[data-interactive] .media-slider-thumb {
+  transform: translateX(-50%) scale(1);
+}
+
+.media-volume-slider[data-dragging] .media-slider-thumb {
+  transform: translateX(-50%) scale(1.1);
+}
+
+.media-slider-value {
+  position: absolute;
+  bottom: 100%;
+  left: var(--media-slider-pointer);
+  padding: 2px 6px;
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: white;
+  white-space: nowrap;
+  pointer-events: none;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 4px;
+  opacity: 0;
+  transform: translateX(-50%);
+  transition: opacity 150ms ease;
+}
+
+.media-volume-slider[data-pointing] .media-slider-value {
+  opacity: 1;
+}
+```
+
+## API Reference
+
+### Root
+
+#### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `disabled` | `boolean` | — | Whether the slider is non-interactive. |
+| `label` | `{ key: string; text: string } \| string \| ((state: SliderState) => Text \| string)` | `''` | Custom label for the slider. |
+| `largeStep` | `number` | — | Large step increment (Page Up/Down keys). |
+| `max` | `number` | — | |
+| `min` | `number` | — | |
+| `orientation` | `'horizontal' \| 'vertical'` | — | Axis of slider movement. |
+| `step` | `number` | `DEFAULT_VOLUME_STEP` | Step increment for value changes (arrow keys). |
+| `thumbAlignment` | `'center' \| 'edge'` | — | How the thumb aligns at the track edges. `edge` constrains the thumb within track bounds. |
+| `value` | `number` | — | |
+| `wheelStep` | `number` | `DEFAULT_VOLUME_STEP` | Step increment for wheel scrolling. |
+
+#### State
+
+State is accessible via the `render`, `className`, and `style` props.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `value` | `number` | Current slider value in the min–max range. |
+| `fillPercent` | `number` | Fill level as a percentage (0–100), derived from value. |
+| `pointerPercent` | `number` | Pointer position as a percentage of the track (0–100). |
+| `dragging` | `boolean` | Whether the user is actively dragging. |
+| `pointing` | `boolean` | Whether the pointer is over the slider. |
+| `interactive` | `boolean` | Whether dragging, pointing, or focus is active. |
+| `orientation` | `'horizontal' \| 'vertical'` | Axis of slider movement. |
+| `disabled` | `boolean` | Whether the slider is non-interactive. |
+| `thumbAlignment` | `'center' \| 'edge'` | How the thumb aligns at the track edges. |
+| `volume` | `number` | Volume level from 0 (silent) to 1 (max). |
+| `muted` | `boolean` | Whether audio is muted. |
+| `availability` | `'available' \| 'unavailable' \| 'unsupported'` | |
+| `hidden` | `boolean` | |
+
+#### Data attributes
+
+| Attribute | Type |
+| --- | --- |
+| `data-availability` | `'available' \| 'unavailable' \| 'unsupported'` |
+| `data-hidden` | — |
+
+#### CSS custom properties
+
+| Variable | Description |
+| --- | --- |
+| `--media-slider-fill` | Fill level percentage (0–100), representing the current volume level. |
+| `--media-slider-pointer` | Pointer position percentage (0–100), tracking the cursor along the slider. |
+
+### Fill
+
+Displays the filled portion from start to the current value.
+
+#### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className` | `string \| ((state: SliderState) => string \| undefined)` | — | Class name or function returning class name from state. |
+| `render` | `ReactElement \| ((props: HTMLProps, state: SliderState) => ReactElement \| null)` | — | Render prop for custom element. |
+| `style` | `CSSProperties \| ((state: SliderState) => CSSProperties \| undefined)` | — | Style or function returning style from state. |
+
+### Preview
+
+Positioning container for preview content that tracks the pointer along the slider.
+
+#### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className` | `string \| ((state: SliderState) => string \| undefined)` | — | Class name or function returning class name from state. |
+| `overflow` | `'clamp' \| 'visible'` | — | How the preview handles slider boundaries. `clamp` keeps it within bounds; `visible` lets it extend past them. |
+| `render` | `ReactElement \| ((props: HTMLProps, state: SliderState) => ReactElement \| null)` | — | Render prop for custom element. |
+| `style` | `CSSProperties \| ((state: SliderState) => CSSProperties \| undefined)` | — | Style or function returning style from state. |
+
+#### Data attributes
+
+| Attribute | Type | Description |
+| --- | --- | --- |
+| `data-dragging` | — | Present when the user is actively dragging. |
+| `data-pointing` | — | Present when the pointer is over the slider. |
+| `data-interactive` | — | Present when dragging, pointing, or focus is active. |
+| `data-orientation` | `'horizontal' \| 'vertical'` | Current axis of slider movement (`horizontal` or `vertical`). |
+| `data-disabled` | — | Present when the slider is non-interactive. |
+
+### Thumb
+
+Draggable handle for setting the slider value. Receives focus and handles keyboard interaction.
+
+#### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className` | `string \| ((state: SliderState) => string \| undefined)` | — | Class name or function returning class name from state. |
+| `render` | `ReactElement \| ((props: HTMLProps, state: SliderState) => ReactElement \| null)` | — | Render prop for custom element. |
+| `style` | `CSSProperties \| ((state: SliderState) => CSSProperties \| undefined)` | — | Style or function returning style from state. |
+
+#### Data attributes
+
+| Attribute | Type | Description |
+| --- | --- | --- |
+| `data-dragging` | — | Present when the user is actively dragging. |
+| `data-pointing` | — | Present when the pointer is over the slider. |
+| `data-interactive` | — | Present when dragging, pointing, or focus is active. |
+| `data-orientation` | `'horizontal' \| 'vertical'` | Current axis of slider movement (`horizontal` or `vertical`). |
+| `data-disabled` | — | Present when the slider is non-interactive. |
+
+### Track
+
+Contains the slider's visual track and interactive hit zone.
+
+#### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className` | `string \| ((state: SliderState) => string \| undefined)` | — | Class name or function returning class name from state. |
+| `render` | `ReactElement \| ((props: HTMLProps, state: SliderState) => ReactElement \| null)` | — | Render prop for custom element. |
+| `style` | `CSSProperties \| ((state: SliderState) => CSSProperties \| undefined)` | — | Style or function returning style from state. |
+
+### Value
+
+Displays a formatted text representation of the slider value. Renders an `<output>` element.
+
+#### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className` | `string \| ((state: SliderState) => string \| undefined)` | — | Class name or function returning class name from state. |
+| `format` | `((value: number) => string)` | — | Custom formatter for the displayed value. Overrides the root's `formatValue`. |
+| `render` | `ReactElement \| ((props: HTMLProps, state: SliderState) => ReactElement \| null)` | — | Render prop for custom element. |
+| `style` | `CSSProperties \| ((state: SliderState) => CSSProperties \| undefined)` | — | Style or function returning style from state. |
+| `type` | `'current' \| 'pointer'` | — | Which slider value to display: the current position or the pointer position. |
+
+#### Data attributes
+
+| Attribute | Type | Description |
+| --- | --- | --- |
+| `data-dragging` | — | Present when the user is actively dragging. |
+| `data-pointing` | — | Present when the pointer is over the slider. |
+| `data-interactive` | — | Present when dragging, pointing, or focus is active. |
+| `data-orientation` | `'horizontal' \| 'vertical'` | Current axis of slider movement (`horizontal` or `vertical`). |
+| `data-disabled` | — | Present when the slider is non-interactive. |

package/docs/reference/components/wistia-video.md

@@ -0,0 +1,68 @@
+# WistiaVideo
+
+Video component that plays Wistia-hosted videos through Wistia's web component
+
+`WistiaVideo` adapts Wistia’s own `<wistia-player>` web component to the Video.js media contract. Wistia’s chrome stays hidden by default so a Video.js player skin can control playback; set `controls` to use Wistia’s UI.
+
+## Import
+
+```bash
+pnpm add @videojs/wistia-video
+```
+
+```tsx
+import { WistiaVideo } from '@videojs/react/media/wistia-video';
+```
+
+## Load a source
+
+`src` accepts a Wistia media URL or hashed media ID. A `wtime` query parameter sets the initial playback position.
+
+```tsx
+<WistiaVideo src="https://example.wistia.com/medias/abcde12345?wtime=30" />
+```
+
+## Wistia options
+
+Pass Wistia player options through `source`. `mediaId` selects the media; other properties such as `playerColor`, `qualityMin`, and `roundedPlayer` are forwarded to Wistia.
+
+```tsx
+<WistiaVideo
+  source={{
+    mediaId: 'abcde12345',
+    playerColor: '54bbff',
+    qualityMin: 540,
+  }}
+/>
+```
+
+## Behavior
+
+- Every Wistia media is treated as on-demand video. Live windows, remote playback, and picture-in-picture are unavailable.
+- `controls` switches Wistia’s own chrome and pointer interaction on. Without it, pointer events pass through to the Video.js skin.
+- `loop`, `muted`, `autoplay`, `poster`, and `preload` are translated to Wistia’s option names. Wistia always plays inline, so `playsInline` has no additional effect.
+- Changing the media ID loads a new Wistia player. Changing only player options keeps the current player and playback session.
+
+## Examples
+
+### Basic Usage
+
+**App.tsx**
+
+```tsx
+import { WistiaVideo } from '@videojs/react/media/wistia-video';
+
+export default function BasicUsage() {
+  return <WistiaVideo className="wistia-video" src="https://wesleyluyten.wistia.com/medias/oifkgmxnkb" controls />;
+}
+```
+
+**App.css**
+
+```css
+.wistia-video {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```

package/docs/reference/components/youtube-video.md

@@ -0,0 +1,124 @@
+# YouTubeVideo
+
+Video component that plays YouTube videos and playlists through the YouTube IFrame player
+
+The [YouTube IFrame player](https://developers.google.com/youtube/iframe_api_reference) keeps its own chrome hidden by default, so it drops into a [player skin](../../guides/skins.md) like any other media component; set `controls` to use YouTube’s UI instead.
+
+## Import
+
+```bash
+pnpm add @videojs/youtube-video
+```
+
+```tsx
+import { YouTubeVideo } from '@videojs/react/media/youtube-video';
+```
+
+## Load a source
+
+`src` takes a YouTube URL or a raw 11-character video id. Watch, share (`youtu.be`), embed, Shorts, live, and privacy-enhanced (`youtube-nocookie.com`) URLs all work. Playlist URLs load through their `list` parameter, and a `t` parameter sets the start position.
+
+```tsx
+<YouTubeVideo src="https://www.youtube.com/watch?v=aqz-KE-bpKQ" />
+```
+
+## Behavior
+
+A few things work differently from a native `<video>` element, because the IFrame API doesn’t expose them:
+
+- `loop` restarts playback when the video ends; the IFrame API has no single-video loop.
+- Fullscreen targets the iframe, so YouTube’s own chrome shows in fullscreen.
+- Picture-in-picture is unavailable, and the player reports it as unsupported.
+- Caption tracks appear in `textTracks` once playback starts; YouTube reports no caption metadata before then.
+
+## Examples
+
+### Basic Usage
+
+**App.tsx**
+
+```tsx
+import { YouTubeVideo } from '@videojs/react/media/youtube-video';
+
+export default function BasicUsage() {
+  return (
+    <div className="youtube-video">
+      <YouTubeVideo src="https://www.youtube.com/watch?v=aqz-KE-bpKQ" controls />
+    </div>
+  );
+}
+```
+
+**App.css**
+
+```css
+.youtube-video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+
+## API Reference
+
+### Props
+
+Accepts these Video.js-specific props:
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `autoplay` | `boolean` | `false` | |
+| `controls` | `boolean` | `false` | |
+| `defaultMuted` | `boolean` | `false` | |
+| `loop` | `boolean` | `false` | |
+| `muted` | `boolean` | `false` | |
+| `playsInline` | `boolean` | `true` | |
+| `poster` | `string` | `''` | |
+| `preload` | `MediaPreloadType` | `'metadata'` | |
+| `source` | `{ src?: string; engine?: YouTubeSourceEngineConfig } \| null` | `null` | YouTube URL or id in `src`, plus player parameters under `engine.youtube`. Replacing it re-derives `src`. |
+| `src` | `string` | `''` | |
+
+### Engine options
+
+#### `source.engine.youtube`
+
+Pass [YouTube player parameters](https://developers.google.com/youtube/player_parameters) under `source.engine.youtube`, spelled exactly as YouTube spells them. They’re serialized onto the embed URL untouched, and the embed reads them once, when its URL is built. [Media Sources](../../guides/media-sources.md) covers how engine options fit into a structured source.
+
+`autoplay`, `controls`, and `playsinline` come from the props of the same name, so they have no `engine.youtube` spelling. Parameters YouTube has deprecated are absent as well: `modestbranding`, `showinfo`, `autohide`, `theme`, and `listType: 'search'`. Anything YouTube adds next passes through the same way.
+
+```tsx
+<YouTubeVideo
+  source={{
+    src: 'https://www.youtube.com/watch?v=aqz-KE-bpKQ',
+    engine: { youtube: { hl: 'de', cc_load_policy: 1 } },
+  }}
+/>
+```
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `cc_lang_pref` | `string \| undefined` | ISO 639-1 language to display captions in. Pair with `cc_load_policy`. |
+| `cc_load_policy` | `1 \| undefined` | Show closed captions by default, even if the viewer has turned them off. |
+| `color` | `'red' \| 'white' \| undefined` | Progress-bar highlight color. Defaults to `'red'`. |
+| `disablekb` | `0 \| 1 \| undefined` | Stop responding to keyboard controls. Defaults to `0`. |
+| `enablejsapi` | `0 \| 1 \| undefined` | Allow the player to be driven through the IFrame Player API. Defaults to `0`. |
+| `end` | `number \| undefined` | Stop playback this many seconds from the start of the video. |
+| `fs` | `0 \| 1 \| undefined` | Display the fullscreen button. Defaults to `1`. |
+| `hl` | `string \| undefined` | Player interface language: an ISO 639-1 code or full locale (`fr`, `fr-ca`). |
+| `iv_load_policy` | `1 \| 3 \| undefined` | Show video annotations (`1`) or hide them (`3`). Defaults to `1`. |
+| `list` | `string \| undefined` | Playlist id (prefixed with `PL`) or channel name, depending on `listType`. |
+| `listType` | `'playlist' \| 'user_uploads' \| undefined` | What `list` refers to. |
+| `loop` | `0 \| 1 \| undefined` | Repeat playback. Looping a single video also needs `playlist` set to the same id. |
+| `origin` | `string \| undefined` | Embedding domain. Set it whenever `enablejsapi` is `1`. |
+| `playlist` | `string \| undefined` | Comma-separated video ids to play after the one named by the URL path. |
+| `referrerPolicy` | `ReferrerPolicy \| undefined` | `referrerpolicy` for the embed iframe. Not a YouTube player parameter. |
+| `rel` | `0 \| 1 \| undefined` | Draw related videos from the same channel (`0`) or anywhere (`1`). Defaults to `1`. |
+| `start` | `number \| undefined` | Begin playback this many seconds from the start of the video. |
+| `widget_referrer` | `string \| undefined` | Embedding URL reported to YouTube Analytics for widget-hosted players. |
+
+### Ref
+
+Forwards its ref to the rendered `<iframe>`. The ref is an [HTMLIFrameElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement). Control playback with the component props and player APIs rather than the iframe ref.
+
+### 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@videojs/react",
-  "version": "10.0.0-rc.2",
+  "version": "10.0.0-rc.3",
   "description": "React library for building media players",
   "keywords": [
     "components",
@@ -10,6 +10,7 @@
     "react",
     "videojs"
   ],
+  "homepage": "https://videojs.org",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -149,32 +150,33 @@
     "access": "public"
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-rc.2",
-    "@videojs/media": "10.0.0-rc.2",
-    "@videojs/native-hls-video": "10.0.0-rc.2",
-    "@videojs/spf": "10.0.0-rc.2",
-    "@videojs/store": "10.0.0-rc.2",
-    "@videojs/utils": "10.0.0-rc.2"
+    "@videojs/core": "10.0.0-rc.3",
+    "@videojs/media": "10.0.0-rc.3",
+    "@videojs/native-hls-video": "10.0.0-rc.3",
+    "@videojs/spf": "10.0.0-rc.3",
+    "@videojs/store": "10.0.0-rc.3",
+    "@videojs/utils": "10.0.0-rc.3",
+    "react-compiler-runtime": "^1.0.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.2.17",
-    "@videojs/cloudflare-video": "10.0.0-rc.2",
-    "@videojs/dash-video": "10.0.0-rc.2",
-    "@videojs/google-cast": "10.0.0-rc.2",
-    "@videojs/hlsjs-video": "10.0.0-rc.2",
-    "@videojs/icons": "10.0.0-rc.2",
-    "@videojs/mux-audio": "10.0.0-rc.2",
-    "@videojs/mux-data": "10.0.0-rc.2",
-    "@videojs/mux-video": "10.0.0-rc.2",
-    "@videojs/shaka-video": "10.0.0-rc.2",
-    "@videojs/spf": "10.0.0-rc.2",
-    "@videojs/spotify-audio": "10.0.0-rc.2",
-    "@videojs/tiktok-video": "10.0.0-rc.2",
-    "@videojs/twitch-video": "10.0.0-rc.2",
-    "@videojs/vimeo-video": "10.0.0-rc.2",
-    "@videojs/wistia-video": "10.0.0-rc.2",
-    "@videojs/youtube-video": "10.0.0-rc.2",
+    "@videojs/cloudflare-video": "10.0.0-rc.3",
+    "@videojs/dash-video": "10.0.0-rc.3",
+    "@videojs/google-cast": "10.0.0-rc.3",
+    "@videojs/hlsjs-video": "10.0.0-rc.3",
+    "@videojs/icons": "10.0.0-rc.3",
+    "@videojs/mux-audio": "10.0.0-rc.3",
+    "@videojs/mux-data": "10.0.0-rc.3",
+    "@videojs/mux-video": "10.0.0-rc.3",
+    "@videojs/shaka-video": "10.0.0-rc.3",
+    "@videojs/spf": "10.0.0-rc.3",
+    "@videojs/spotify-audio": "10.0.0-rc.3",
+    "@videojs/tiktok-video": "10.0.0-rc.3",
+    "@videojs/twitch-video": "10.0.0-rc.3",
+    "@videojs/vimeo-video": "10.0.0-rc.3",
+    "@videojs/wistia-video": "10.0.0-rc.3",
+    "@videojs/youtube-video": "10.0.0-rc.3",
     "jsdom": "^26.1.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
@@ -183,20 +185,20 @@
     "vitest": "4.1.10"
   },
   "peerDependencies": {
-    "@videojs/cloudflare-video": "10.0.0-rc.2",
-    "@videojs/dash-video": "10.0.0-rc.2",
-    "@videojs/google-cast": "10.0.0-rc.2",
-    "@videojs/hlsjs-video": "10.0.0-rc.2",
-    "@videojs/mux-audio": "10.0.0-rc.2",
-    "@videojs/mux-data": "10.0.0-rc.2",
-    "@videojs/mux-video": "10.0.0-rc.2",
-    "@videojs/shaka-video": "10.0.0-rc.2",
-    "@videojs/spotify-audio": "10.0.0-rc.2",
-    "@videojs/tiktok-video": "10.0.0-rc.2",
-    "@videojs/twitch-video": "10.0.0-rc.2",
-    "@videojs/vimeo-video": "10.0.0-rc.2",
-    "@videojs/wistia-video": "10.0.0-rc.2",
-    "@videojs/youtube-video": "10.0.0-rc.2",
+    "@videojs/cloudflare-video": "10.0.0-rc.3",
+    "@videojs/dash-video": "10.0.0-rc.3",
+    "@videojs/google-cast": "10.0.0-rc.3",
+    "@videojs/hlsjs-video": "10.0.0-rc.3",
+    "@videojs/mux-audio": "10.0.0-rc.3",
+    "@videojs/mux-data": "10.0.0-rc.3",
+    "@videojs/mux-video": "10.0.0-rc.3",
+    "@videojs/shaka-video": "10.0.0-rc.3",
+    "@videojs/spotify-audio": "10.0.0-rc.3",
+    "@videojs/tiktok-video": "10.0.0-rc.3",
+    "@videojs/twitch-video": "10.0.0-rc.3",
+    "@videojs/vimeo-video": "10.0.0-rc.3",
+    "@videojs/wistia-video": "10.0.0-rc.3",
+    "@videojs/youtube-video": "10.0.0-rc.3",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },

package/dist/default/extensions/google-cast/extension.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"extension.js","names":[],"sources":["../../../../src/extensions/google-cast/extension.tsx"],"sourcesContent":["'use client';\n\nimport { GoogleCastExtension, type GoogleCastExtensionProps } from '@videojs/google-cast';\nimport type { ReactNode } from 'react';\n\nimport { useMediaExtension } from '../../utils/use-media-extension';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport type GoogleCastProps = Partial<GoogleCastExtensionProps>;\n\n/**\n * Adds the Google Cast extension to the surrounding player's media.\n *\n * Renders nothing — place it inside the Player as a sibling of the media component (e.g. `<HlsJsVideo />`) and it\n * follows the active media.\n *\n * @example\n *   ```tsx\n *   <Player>\n *     <HlsJsVideo src=\"https://example.com/stream.m3u8\" />\n *     <GoogleCast receiver=\"YOUR_APP_ID\" />\n *   </Player>;\n *   ```;\n */\nexport function GoogleCast(props: GoogleCastProps): ReactNode {\n  const component = useMediaExtension(GoogleCastExtension);\n\n  useSyncProps(component, props, GoogleCastExtension.defaultProps);\n\n  return null;\n}\n\nexport namespace GoogleCast {\n  export type Props = GoogleCastProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,SAAgB,WAAW,OAAmC;CAC5D,MAAM,YAAY,kBAAkB,mBAAmB;CAEvD,aAAa,WAAW,OAAO,oBAAoB,YAAY;CAE/D,OAAO;AACT"}

package/dist/default/extensions/mux-data/extension.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"extension.js","names":[],"sources":["../../../../src/extensions/mux-data/extension.tsx"],"sourcesContent":["'use client';\n\nimport { MuxDataExtension, type MuxDataExtensionProps } from '@videojs/mux-data';\nimport type { ReactNode } from 'react';\n\nimport { useMediaExtension } from '../../utils/use-media-extension';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport type MuxDataProps = Partial<MuxDataExtensionProps>;\n\n/**\n * Adds the [Mux Data](https://www.mux.com/data) extension to the surrounding player's media.\n *\n * Renders nothing — place it inside the Player as a sibling of the media component (e.g. `<MuxVideo />`) and it follows\n * the active media.\n *\n * Mux-hosted playback needs no `envKey`: the view reports the Mux playback ID as its `video_id`, which Mux attributes\n * to the owning environment. Set `envKey` to monitor sources Mux doesn't host.\n *\n * Any media component works. When the media plays through an hls.js or dash.js engine, that engine is handed to the Mux\n * Data SDK so the view also carries stream-level detail such as rendition switches and request timing.\n *\n * @example\n *   ```tsx\n *   <Player>\n *     <MuxVideo source={{ playbackId: 'abc123' }} />\n *     <MuxData playerSoftwareName=\"mux-video\" />\n *   </Player>;\n *   ```;\n */\nexport function MuxData(props: MuxDataProps): ReactNode {\n  const component = useMediaExtension(MuxDataExtension);\n  const { MuxDataSdk, ...rest } = props;\n\n  // `useSyncProps` treats an `undefined` prop as \"reset to the default\", but\n  // `MuxDataSdk={undefined}` is how consumers disable monitoring. Sync it here\n  // instead: passing the prop wins even when its value is `undefined`, and only\n  // omitting it falls back to the default SDK.\n  const sdk = 'MuxDataSdk' in props ? MuxDataSdk : MuxDataExtension.defaultProps.MuxDataSdk;\n\n  if (component.MuxDataSdk !== sdk) component.MuxDataSdk = sdk;\n\n  useSyncProps(component, rest, MuxDataExtension.defaultProps);\n\n  return null;\n}\n\nexport namespace MuxData {\n  export type Props = MuxDataProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,QAAQ,OAAgC;CACtD,MAAM,YAAY,kBAAkB,gBAAgB;CACpD,MAAM,EAAE,YAAY,GAAG,SAAS;CAMhC,MAAM,MAAM,gBAAgB,QAAQ,aAAa,iBAAiB,aAAa;CAE/E,IAAI,UAAU,eAAe,KAAK,UAAU,aAAa;CAEzD,aAAa,WAAW,MAAM,iBAAiB,YAAY;CAE3D,OAAO;AACT"}

package/dist/default/i18n/context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/i18n/context.tsx"],"sourcesContent":["import {\n  createTranslator,\n  DEFAULT_LOCALE,\n  getI18nTranslations,\n  type Locale,\n  onI18nRegistryChange,\n  type Translations,\n  type Translator,\n} from '@videojs/core/i18n';\nimport { createContext, useContext, useEffect, useMemo, useReducer } from 'react';\n\nexport type AddLocaleRoot = () => () => void;\n\nexport interface I18nContextValue {\n  translator: Translator;\n  locale: Locale;\n  /** True when the locale resolves from an explicit provider prop. */\n  localeFromProp: boolean;\n  /** @internal True when the nearest provider received an explicit locale prop. */\n  localeFromOwnProp?: boolean;\n  /** Overrides passed to this provider. */\n  translations?: Partial<Translations>;\n  /** Callback inherited by nested locale roots. */\n  onActiveLocaleChange?: (locale: Locale) => void;\n}\n\n/** React context carrying the active translator and locale. @public */\nexport const I18nContext = createContext<I18nContextValue | null>(null);\n\nexport const LocaleRootContext = createContext<AddLocaleRoot | undefined>(undefined);\n\n/**\n * Returns the translator for the nearest `I18nProvider`, or English defaults when none is mounted.\n *\n * @public\n */\nexport function useTranslator(): Translator {\n  const ctx = useContext(I18nContext);\n  const [registryEpoch, invalidateRegistry] = useReducer((epoch: number) => epoch + 1, 0);\n\n  useEffect(() => {\n    return onI18nRegistryChange(() => invalidateRegistry());\n  }, []);\n\n  const fallback = useMemo(() => {\n    void registryEpoch;\n    return createTranslator(getI18nTranslations(DEFAULT_LOCALE), DEFAULT_LOCALE);\n  }, [registryEpoch]);\n\n  if (!ctx) {\n    return fallback;\n  }\n\n  return ctx.translator;\n}\n\n/**\n * Returns the active BCP 47 locale tag from the nearest `I18nProvider`, or `'en'` when none is mounted.\n *\n * @public\n */\nexport function useLocale(): Locale {\n  const ctx = useContext(I18nContext);\n\n  return ctx?.locale ?? DEFAULT_LOCALE;\n}\n"],"mappings":";;;;AA2BA,MAAa,cAAc,cAAuC,IAAI;AAEtE,MAAa,oBAAoB,cAAyC,KAAA,CAAS;;;;;;AAOnF,SAAgB,gBAA4B;CAC1C,MAAM,MAAM,WAAW,WAAW;CAClC,MAAM,CAAC,eAAe,sBAAsB,YAAY,UAAkB,QAAQ,GAAG,CAAC;CAEtF,gBAAgB;EACd,OAAO,2BAA2B,mBAAmB,CAAC;CACxD,GAAG,CAAC,CAAC;CAEL,MAAM,WAAW,cAAc;EAE7B,OAAO,iBAAiB,oBAAoB,cAAc,GAAG,cAAc;CAC7E,GAAG,CAAC,aAAa,CAAC;CAElB,IAAI,CAAC,KACH,OAAO;CAGT,OAAO,IAAI;AACb;;;;;;AAOA,SAAgB,YAAoB;CAGlC,OAFY,WAAW,WAEd,CAAC,EAAE,UAAU;AACxB"}

package/dist/default/i18n/create-i18n.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-i18n.js","names":["defaultLoader"],"sources":["../../../src/i18n/create-i18n.tsx"],"sourcesContent":["import {\n  createTranslator,\n  loadLocale as defaultLoader,\n  type FlatTranslations,\n  type Locale,\n  type Translations,\n} from '@videojs/core/i18n';\nimport { effectiveLocale } from '@videojs/utils/dom';\nimport { type Context, type ReactNode, type RefObject, useContext, useMemo } from 'react';\n\nimport { I18nContext, type I18nContextValue, LocaleRootContext, useLocale, useTranslator } from './context';\nimport { getProviderRootProps, type I18nProviderRootProps } from './get-provider-root-props';\nimport { useAmbientLang } from './use-ambient-lang';\nimport { useLangRootElement } from './use-lang-root-element';\nimport { useLazyTranslations } from './use-lazy-translations';\nimport { useLocaleRootNotifications } from './use-locale-root-notifications';\nimport { useMergedTranslations } from './use-merged-translations';\n\nexport interface CreateI18nOptions {\n  /** Override lazy loading of shipped locale packs (tests or custom loaders). */\n  loader?: (tag: string) => Promise<Partial<FlatTranslations> | undefined>;\n}\n\nexport interface I18nProviderProps {\n  /**\n   * Forces the active locale. Omit to inherit the nearest non-empty `lang` by walking DOM ancestors from\n   * {@link langRootRef} when set, otherwise from `document.documentElement` (typically `<html lang>`). Updates when any\n   * `lang` attribute changes anywhere under `<html>`, or when subtree moves alter which ancestor supplies `lang`. For\n   * SSR, pass `locale` explicitly.\n   */\n  locale?: Locale;\n  /**\n   * Element whose ancestor chain is searched for a non-empty `lang` when {@link locale} is omitted—for example a ref to\n   * your player shell `HTMLElement`.\n   */\n  langRootRef?: RefObject<Element | null>;\n  /**\n   * Per-locale string overrides merged on top of the global registry and any lazy built-in packs for {@link locale}.\n   * Applies to translated `aria-label` values and tooltip copy for skin controls wired through `useTranslator`.\n   *\n   * @example\n   *   ```tsx\n   *   <I18nProvider locale=\"ja\" translations={{ buttons: { play: '再生', pause: '一時停止' } }}>\n   *     <VideoSkin />\n   *   </I18nProvider>;\n   *   ```;\n   */\n  translations?: Partial<Translations>;\n  children: ReactNode;\n  /** Fires when the resolved locale changes (caption selection hooks may use this later). */\n  onActiveLocaleChange?: (locale: Locale) => void;\n}\n\nexport type { I18nContextValue } from './context';\n\nexport interface CreateI18nResult {\n  I18nContext: Context<I18nContextValue | null>;\n  I18nProvider: (props: I18nProviderProps) => ReactNode;\n  useTranslator: typeof useTranslator;\n  useLocale: typeof useLocale;\n}\n\n/**\n * Creates an i18n provider and hooks for the shared React i18n context.\n *\n * @param options - Optional hooks such as custom built-in locale loading.\n * @public\n */\nexport function createI18n(options?: CreateI18nOptions): CreateI18nResult {\n  const loader = options?.loader ?? defaultLoader;\n\n  function I18nProviderRoot({\n    locale: localeProp,\n    langRootRef,\n    parentLocale,\n    localeFromProp = localeProp !== undefined,\n    localeFromOwnProp = localeProp !== undefined,\n    translations: translationsProp,\n    children,\n    onActiveLocaleChange,\n    parentAddLocaleRoot,\n  }: I18nProviderRootProps): ReactNode {\n    const langRootElement = useLangRootElement(langRootRef, parentAddLocaleRoot);\n    const ambientLang = useAmbientLang(langRootRef !== undefined, langRootElement);\n    const resolvedLocale = useMemo(\n      () => effectiveLocale<Locale>(localeProp, ambientLang ?? parentLocale),\n      [localeProp, ambientLang, parentLocale]\n    );\n\n    const addLocaleRoot = useLocaleRootNotifications(resolvedLocale, onActiveLocaleChange);\n    const lazyLayer = useLazyTranslations(resolvedLocale, loader);\n    const translations = useMergedTranslations(resolvedLocale, lazyLayer, translationsProp);\n\n    const translator = useMemo(() => createTranslator(translations, resolvedLocale), [translations, resolvedLocale]);\n\n    const value = useMemo<I18nContextValue>(\n      () => ({\n        translator,\n        locale: resolvedLocale,\n        localeFromProp,\n        localeFromOwnProp,\n        ...(translationsProp !== undefined ? { translations: translationsProp } : {}),\n        ...(onActiveLocaleChange !== undefined ? { onActiveLocaleChange } : {}),\n      }),\n      [translator, resolvedLocale, localeFromProp, localeFromOwnProp, translationsProp, onActiveLocaleChange]\n    );\n\n    return (\n      <LocaleRootContext.Provider value={addLocaleRoot}>\n        <I18nContext.Provider value={value}>{children}</I18nContext.Provider>\n      </LocaleRootContext.Provider>\n    );\n  }\n\n  function I18nProvider(props: I18nProviderProps): ReactNode {\n    const parent = useContext(I18nContext);\n    const parentAddLocaleRoot = useContext(LocaleRootContext);\n\n    const rootProps = getProviderRootProps(props, parent, parentAddLocaleRoot);\n    if (!rootProps) return props.children;\n\n    return <I18nProviderRoot {...rootProps} />;\n  }\n\n  return { I18nContext, I18nProvider, useTranslator, useLocale };\n}\n\nconst defaultI18n = createI18n();\n\n/**\n * Resolves locale and supplies a typed translator to descendants. Mount this explicitly for translated controls, forced\n * locales, SSR copy, or locale-aware player roots.\n *\n * @public\n */\nexport const I18nProvider = defaultI18n.I18nProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoEA,SAAgB,WAAW,SAA+C;CACxE,MAAM,SAAS,SAAS,UAAUA;CAElC,SAAS,iBAAiB,EACxB,QAAQ,YACR,aACA,cACA,iBAAiB,eAAe,KAAA,GAChC,oBAAoB,eAAe,KAAA,GACnC,cAAc,kBACd,UACA,sBACA,uBACmC;EACnC,MAAM,kBAAkB,mBAAmB,aAAa,mBAAmB;EAC3E,MAAM,cAAc,eAAe,gBAAgB,KAAA,GAAW,eAAe;EAC7E,MAAM,iBAAiB,cACf,gBAAwB,YAAY,eAAe,YAAY,GACrE;GAAC;GAAY;GAAa;EAAY,CACxC;EAEA,MAAM,gBAAgB,2BAA2B,gBAAgB,oBAAoB;EACrF,MAAM,YAAY,oBAAoB,gBAAgB,MAAM;EAC5D,MAAM,eAAe,sBAAsB,gBAAgB,WAAW,gBAAgB;EAEtF,MAAM,aAAa,cAAc,iBAAiB,cAAc,cAAc,GAAG,CAAC,cAAc,cAAc,CAAC;EAE/G,MAAM,QAAQ,eACL;GACL;GACA,QAAQ;GACR;GACA;GACA,GAAI,qBAAqB,KAAA,IAAY,EAAE,cAAc,iBAAiB,IAAI,CAAC;GAC3E,GAAI,yBAAyB,KAAA,IAAY,EAAE,qBAAqB,IAAI,CAAC;EACvE,IACA;GAAC;GAAY;GAAgB;GAAgB;GAAmB;GAAkB;EAAoB,CACxG;EAEA,OACE,oBAAC,kBAAkB,UAAnB;GAA4B,OAAO;GACjC,UAAA,oBAAC,YAAY,UAAb;IAA6B;IAAQ;GAA+B,CAAA;EAC1C,CAAA;CAEhC;CAEA,SAAS,aAAa,OAAqC;EACzD,MAAM,SAAS,WAAW,WAAW;EACrC,MAAM,sBAAsB,WAAW,iBAAiB;EAExD,MAAM,YAAY,qBAAqB,OAAO,QAAQ,mBAAmB;EACzE,IAAI,CAAC,WAAW,OAAO,MAAM;EAE7B,OAAO,oBAAC,kBAAD,EAAkB,GAAI,UAAY,CAAA;CAC3C;CAEA,OAAO;EAAE;EAAa;EAAc;EAAe;CAAU;AAC/D;;;;;;;AAUA,MAAa,eARO,WAQQ,CAAA,CAAY"}