@videojs/react 10.0.0-beta.25 → 10.0.0-beta.26

package/docs/reference/use-captions-options.md

@@ -0,0 +1,59 @@
+# useCaptionsOptions
+
+Hook to build captions menu options from the player text track state
+
+`useCaptionsOptions` returns the currently showing caption track, the available options (starting with an `Off` option), and a `setValue` callback for wiring caption selection into a menu. It returns `null` when the [text tracks feature](./feature-text-tracks.md) is not configured.
+
+CaptionsMenu.tsx
+
+```
+import { Menu, useCaptionsOptions } from "@videojs/react";
+
+function CaptionsMenu() {
+  const captions = useCaptionsOptions();
+  if (captions?.state.availability !== "available") return null;
+
+  return (
+    <Menu.RadioGroup value={captions.value} onValueChange={captions.setValue} aria-label="Captions">
+      {captions.options.map((option) => (
+        <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled}>
+          {option.label}
+          <Menu.ItemIndicator checked={option.value === captions.value} />
+        </Menu.RadioItem>
+      ))}
+    </Menu.RadioGroup>
+  );
+}
+```
+
+Option labels use the track label, then language, then kind. Pass `formatTrack` to customize the visible labels. The result also exposes `showMenu`, which is `true` when more than one caption or subtitle track is available — the same threshold [CaptionsButton](./captions-button.md) uses to open a menu instead of toggling in `menuTrigger` mode.
+
+See [CaptionsRadioGroup](./captions-radio-group.md) for the component-level pattern, and [Menu](./menu.md) for a complete settings menu example.
+
+## API Reference
+
+### Parameters
+
+Parameter
+
+Type
+
+Default
+
+Details
+
+`props`
+
+`CaptionsOptionsProps`
+
+`—`
+
+▸
+
+Description
+
+Optional `label`, `formatTrack`, and `disabled` overrides.
+
+### Return Value
+
+`CaptionsOptionsResult | null`

package/docs/reference/use-locale.md

@@ -0,0 +1,124 @@
+# useLocale
+
+React hook that returns the active BCP 47 locale from the nearest I18nProvider
+
+`useLocale` returns the resolved BCP 47 tag from the nearest [`I18nProvider`](./i18n-provider.md), or `'en'` when none is mounted.
+
+Use it when UI copy depends on the active locale outside the translator, for example formatting or caption language hooks.
+
+## Example
+
+Switch the provider locale to see `useLocale` supply the BCP 47 tag used to format a date.
+
+Localeen-USfr-FRja-JP
+
+Active locale
+
+en-US
+
+Formatted date
+
+January 15, 2026
+
+App.tsx
+
+App.css
+
+```
+import { I18nProvider, useLocale } from '@videojs/react/i18n';
+import { useState } from 'react';
+
+import './BasicUsage.css';
+
+const locales = ['en-US', 'fr-FR', 'ja-JP'] as const;
+type Locale = (typeof locales)[number];
+
+function LocaleDetails() {
+  const locale = useLocale();
+  const date = new Intl.DateTimeFormat(locale, {
+    dateStyle: 'long',
+    timeZone: 'UTC',
+  }).format(new Date('2026-01-15T12:00:00Z'));
+
+  return (
+    <dl className="react-use-locale-basic__output">
+      <div>
+        <dt>Active locale</dt>
+        <dd>{locale}</dd>
+      </div>
+      <div>
+        <dt>Formatted date</dt>
+        <dd lang={locale}>{date}</dd>
+      </div>
+    </dl>
+  );
+}
+
+export default function BasicUsage() {
+  const [locale, setLocale] = useState<Locale>('en-US');
+
+  return (
+    <div className="react-use-locale-basic">
+      <label>
+        Locale
+        <select value={locale} onChange={(event) => setLocale(event.currentTarget.value as Locale)}>
+          {locales.map((value) => (
+            <option key={value}>{value}</option>
+          ))}
+        </select>
+      </label>
+      <I18nProvider locale={locale}>
+        <LocaleDetails />
+      </I18nProvider>
+    </div>
+  );
+}
+```
+```
+.react-use-locale-basic {
+  display: grid;
+  gap: 16px;
+  padding: 16px;
+}
+
+.react-use-locale-basic label,
+.react-use-locale-basic__output div {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.react-use-locale-basic select {
+  padding: 4px 8px;
+}
+
+.react-use-locale-basic__output {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+}
+
+.react-use-locale-basic__output dt {
+  color: #6b7280;
+}
+
+.react-use-locale-basic__output dd {
+  margin: 0;
+}
+```
+
+## API Reference
+
+### Return Value
+
+Type
+
+Details
+
+`string & object | 'ar' | 'az' | 'bs' ...`
+
+▸
+
+Type
+
+`string & object | 'ar' | 'az' | 'bs' | 'bg' | 'bn' | 'ca' | 'cs' | 'cy' | 'da' | 'de' | 'el' | 'es' | 'et' | 'eu' | 'fa' | 'fi' | 'fr' | 'gd' | 'gl' | 'he' | 'hi' | 'hr' | 'hu' | 'it' | 'ja' | 'ko' | 'lv' | 'mr' | 'nb' | 'nl' | 'nn' | 'ne' | 'oc' | 'pl' | 'pt-BR' | 'pt-PT' | 'ro' | 'ru' | 'sk' | 'sl' | 'sr' | 'sv' | 'te' | 'th' | 'tr' | 'uk' | 'vi' | 'zh-CN' | 'zh-TW'`

package/docs/reference/use-media.md

@@ -53,13 +53,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
         <MediaInfo />
       </Player.Container>
     </Player.Provider>

package/docs/reference/use-playback-rate-options.md

@@ -0,0 +1,59 @@
+# usePlaybackRateOptions
+
+Hook to build playback rate menu options from the player playback rate state
+
+`usePlaybackRateOptions` returns the current playback rate, the available options, and `setRate` / `setValue` callbacks for wiring rate selection into a menu. It returns `null` when the [playback rate feature](./feature-playback-rate.md) is not configured.
+
+SpeedMenu.tsx
+
+```
+import { Menu, usePlaybackRateOptions } from "@videojs/react";
+
+function SpeedMenu() {
+  const playbackRate = usePlaybackRateOptions();
+  if (playbackRate?.state.availability !== "available") return null;
+
+  return (
+    <Menu.RadioGroup value={playbackRate.value} onValueChange={playbackRate.setValue} aria-label="Speed">
+      {playbackRate.options.map((option) => (
+        <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled}>
+          {option.label}
+          <Menu.ItemIndicator checked={option.value === playbackRate.value} />
+        </Menu.RadioItem>
+      ))}
+    </Menu.RadioGroup>
+  );
+}
+```
+
+Options come from the player’s configured playback rates. Labels default to the rate followed by a multiplication sign (e.g. `1.5×`); pass `formatRate` to customize them. `setValue` accepts an option’s string value, while `setRate` accepts a number directly.
+
+See [PlaybackRateRadioGroup](./playback-rate-radio-group.md) for the component-level pattern, and [Menu](./menu.md) for a complete settings menu example.
+
+## API Reference
+
+### Parameters
+
+Parameter
+
+Type
+
+Default
+
+Details
+
+`props`
+
+`PlaybackRateOptionsProps`
+
+`—`
+
+▸
+
+Description
+
+Optional `label`, `formatRate`, and `disabled` overrides.
+
+### Return Value
+
+`PlaybackRateOptionsResult | null`

package/docs/reference/use-player-context.md

@@ -1,8 +1,8 @@
 # usePlayerContext
 
-Hook to access the full player context including store, media element, and media setter
+Hook to access the full player context value
 
-`usePlayerContext` returns the full `PlayerContextValue` object, which includes the store, the current media element, and the media setter.
+`usePlayerContext` returns the full `PlayerContextValue` object for lower-level integrations that need direct access to player context fields.
 
 DebugPanel.tsx
 
@@ -10,7 +10,7 @@ DebugPanel.tsx
 import { usePlayerContext } from "@videojs/react";
 
 function DebugPanel() {
-  const { store, media, setMedia } = usePlayerContext();
+  const { store, media, container, popupGroup } = usePlayerContext();
 
   return (
     <pre>
@@ -18,6 +18,8 @@ function DebugPanel() {
         {
           hasStore: !!store,
           hasMedia: !!media,
+          hasContainer: !!container,
+          hasPopupGroup: !!popupGroup,
           tagName: media?.tagName,
         },
         null,

package/docs/reference/use-player.md

@@ -54,13 +54,7 @@ export default function StoreAccess() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
         <Controls />
       </Player.Container>
     </Player.Provider>
@@ -145,13 +139,7 @@ export default function Selector() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
         <StateDisplay />
       </Player.Container>
     </Player.Provider>

package/docs/reference/use-quality-options.md

@@ -0,0 +1,59 @@
+# useQualityOptions
+
+Hook to build video quality menu options from the player rendition state
+
+`useQualityOptions` returns the current quality value, the available options, and a `setValue` callback for wiring quality selection into a menu. It returns `null` when the [quality feature](./feature-quality.md) is not configured.
+
+QualityMenu.tsx
+
+```
+import { Menu, useQualityOptions } from "@videojs/react";
+
+function QualityMenu() {
+  const quality = useQualityOptions();
+  if (quality?.state.availability !== "available") return null;
+
+  return (
+    <Menu.RadioGroup value={quality.value} onValueChange={quality.setValue} aria-label="Quality">
+      {quality.options.map((option) => (
+        <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled}>
+          {option.label}
+          <Menu.ItemIndicator checked={option.value === quality.value} />
+        </Menu.RadioItem>
+      ))}
+    </Menu.RadioGroup>
+  );
+}
+```
+
+The first option is always `Auto`; selecting it returns control to adaptive bitrate selection. Options carry optional `tier` and `badge` fields (e.g. `4K`, `HD`) for richer labels. Pass `formatRendition` to customize the visible rendition labels.
+
+See [QualityRadioGroup](./quality-radio-group.md) for the component-level pattern, and [Menu](./menu.md) for a complete settings menu example.
+
+## API Reference
+
+### Parameters
+
+Parameter
+
+Type
+
+Default
+
+Details
+
+`props`
+
+`QualityOptionsProps`
+
+`—`
+
+▸
+
+Description
+
+Optional `label`, `formatRendition`, and `disabled` overrides.
+
+### Return Value
+
+`QualityOptionsResult | null`

package/docs/reference/use-store.md

@@ -44,13 +44,7 @@ export default function StoreAccess() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
         <SeekControls />
       </Player.Container>
     </Player.Provider>
@@ -133,13 +127,7 @@ export default function Selector() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
         <DerivedState />
       </Player.Container>
     </Player.Provider>

package/docs/reference/use-translator.md

@@ -0,0 +1,119 @@
+# useTranslator
+
+React hook that returns the typed translator for the nearest I18nProvider
+
+`useTranslator` returns the translator from the nearest [`I18nProvider`](./i18n-provider.md). Control components pass text descriptors from core `getLabel()`. Custom UI can pass an opaque key with its English fallback.
+
+When no provider is mounted, the hook falls back to English registry strings so standalone demos do not throw.
+
+## Example
+
+Switch the provider locale to see `useTranslator` resolve a simple key and a parameterized key from the nearest provider.
+
+LanguageSpanishFrench
+
+Button
+
+Reproducir
+
+Parameterized
+
+Adelantar 10 segundos
+
+App.tsx
+
+App.css
+
+```
+import { I18nProvider, useTranslator } from '@videojs/react/i18n';
+import { useState } from 'react';
+
+import './BasicUsage.css';
+
+const translations = {
+  es: {
+    buttons: { play: 'Reproducir' },
+    seek: { forward: 'Adelantar {seconds} segundos' },
+  },
+  fr: {
+    buttons: { play: 'Lire' },
+    seek: { forward: 'Avancer de {seconds} secondes' },
+  },
+} as const;
+
+type Locale = keyof typeof translations;
+
+function Labels() {
+  const t = useTranslator();
+
+  return (
+    <dl className="react-use-translator-basic__output">
+      <div>
+        <dt>Button</dt>
+        <dd>{t('buttons.play', { default: 'Play' })}</dd>
+      </div>
+      <div>
+        <dt>Parameterized</dt>
+        <dd>{t('seek.forward', { seconds: 10, default: 'Seek forward {seconds} seconds' })}</dd>
+      </div>
+    </dl>
+  );
+}
+
+export default function BasicUsage() {
+  const [locale, setLocale] = useState<Locale>('es');
+
+  return (
+    <div className="react-use-translator-basic">
+      <label>
+        Language
+        <select value={locale} onChange={(event) => setLocale(event.currentTarget.value as Locale)}>
+          <option value="es">Spanish</option>
+          <option value="fr">French</option>
+        </select>
+      </label>
+      <I18nProvider locale={locale} translations={translations[locale]}>
+        <Labels />
+      </I18nProvider>
+    </div>
+  );
+}
+```
+```
+.react-use-translator-basic {
+  display: grid;
+  gap: 16px;
+  padding: 16px;
+}
+
+.react-use-translator-basic label,
+.react-use-translator-basic__output div {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.react-use-translator-basic select {
+  padding: 4px 8px;
+}
+
+.react-use-translator-basic__output {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+}
+
+.react-use-translator-basic__output dt {
+  color: #6b7280;
+}
+
+.react-use-translator-basic__output dd {
+  margin: 0;
+}
+```
+
+## API Reference
+
+### Return Value
+
+`Translator`

package/docs/reference/volume-slider.md

@@ -30,7 +30,7 @@ css
 
 ## Accessibility
 
-Renders with `role="slider"` and automatic `aria-label` of “Volume”. Override with the `label` prop. Keyboard controls:
+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
@@ -63,13 +63,7 @@ export default function WithParts() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <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>}
@@ -217,9 +211,9 @@ Whether the slider is non-interactive.
 
 `label`
 
-`string | function`
+`Text | string | Text) | function`
 
-`'Volume'`
+`''`
 
 ▸
 
@@ -229,7 +223,7 @@ Custom label for the slider.
 
 Type
 
-`string | ((state: SliderState) => string)`
+`Text | string | ((state: SliderState) => string | Text)`
 
 `largeStep`
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/react",
   "type": "module",
-  "version": "10.0.0-beta.25",
+  "version": "10.0.0-beta.26",
   "description": "React library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -12,7 +12,9 @@
   "main": "dist/default/index.js",
   "module": "dist/default/index.js",
   "types": "dist/dev/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/*/i18n/locales/*/register.js"
+  ],
   "files": [
     "dist",
     "docs"
@@ -93,6 +95,16 @@
       "types": "./dist/dev/presets/live-audio/*.d.ts",
       "development": "./dist/dev/presets/live-audio/*.js",
       "default": "./dist/default/presets/live-audio/*.js"
+    },
+    "./i18n": {
+      "types": "./dist/dev/i18n/index.d.ts",
+      "development": "./dist/dev/i18n/index.js",
+      "default": "./dist/default/i18n/index.js"
+    },
+    "./i18n/locales/*": {
+      "types": "./dist/dev/i18n/locales/*.d.ts",
+      "development": "./dist/dev/i18n/locales/*.js",
+      "default": "./dist/default/i18n/locales/*.js"
     }
   },
   "peerDependencies": {
@@ -100,21 +112,22 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-beta.25",
-    "@videojs/spf": "10.0.0-beta.25",
-    "@videojs/store": "10.0.0-beta.25",
-    "@videojs/utils": "10.0.0-beta.25"
+    "@videojs/core": "10.0.0-beta.26",
+    "@videojs/media": "10.0.0-beta.26",
+    "@videojs/spf": "10.0.0-beta.26",
+    "@videojs/store": "10.0.0-beta.26",
+    "@videojs/utils": "10.0.0-beta.26"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.17",
     "jsdom": "^26.1.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "tsdown": "^0.21.9",
-    "vitest": "^4.1.0",
-    "@videojs/icons": "10.0.0-beta.25",
-    "@videojs/skins": "10.0.0-beta.25"
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tsdown": "^0.22.14",
+    "vitest": "^4.1.10",
+    "@videojs/icons": "10.0.0-beta.26",
+    "@videojs/skins": "10.0.0-beta.26"
   },
   "publishConfig": {
     "access": "public"

package/dist/default/media/dash-video/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/dash-video/index.tsx"],"sourcesContent":["'use client';\n\nimport type { DashMediaProps } from '@videojs/core/dom/media/dash';\nimport { DashMedia, dashMediaDefaultProps } from '@videojs/core/dom/media/dash';\nimport { GoogleCast } from '@videojs/core/dom/media/google-cast';\nimport { addComponent } from '@videojs/core/dom/media/media-host';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface DashVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof DashMediaProps>,\n    Partial<DashMediaProps> {\n  children?: ReactNode;\n}\n\nexport const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(function DashVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(DashMedia, (media) => {\n    addComponent(media, new GoogleCast());\n  });\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, dashMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace DashVideo {\n  export type Props = DashVideoProps;\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,YAAY,WAA6C,SAAS,UAAU,EAAE,UAAU,GAAG,SAAS,KAAK;CACpH,MAAM,QAAQ,iBAAiB,YAAY,UAAU;AACnD,eAAa,OAAO,IAAI,YAAY,CAAC;GACrC;AAKF,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,sBAAsB;EAI9D;EACK,CAAA;EAEV"}

package/dist/default/media/hlsjs-video/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/hlsjs-video/index.tsx"],"sourcesContent":["'use client';\n\nimport { GoogleCast } from '@videojs/core/dom/media/google-cast';\nimport type { HlsMediaProps } from '@videojs/core/dom/media/hls-js';\nimport { HlsJsMedia, hlsMediaDefaultProps } from '@videojs/core/dom/media/hls-js';\nimport { addComponent } from '@videojs/core/dom/media/media-host';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface HlsJsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsMediaProps>,\n    Partial<HlsMediaProps> {\n  children?: ReactNode;\n}\n\nexport const HlsJsVideo = forwardRef<HTMLVideoElement, HlsJsVideoProps>(function HlsJsVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(HlsJsMedia, (media) => {\n    addComponent(media, new GoogleCast());\n  });\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace HlsJsVideo {\n  export type Props = HlsJsVideoProps;\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,aAAa,WAA8C,SAAS,WAC/E,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,aAAa,UAAU;AACpD,eAAa,OAAO,IAAI,YAAY,CAAC;GACrC;AAKF,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,qBAAqB;EAI7D;EACK,CAAA;EAEV"}

package/dist/default/media/mux-audio/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/mux-audio/index.tsx"],"sourcesContent":["'use client';\n\nimport { GoogleCast } from '@videojs/core/dom/media/google-cast';\nimport type { HlsMediaProps } from '@videojs/core/dom/media/hls-js';\nimport { HlsJsMedia, hlsMediaDefaultProps } from '@videojs/core/dom/media/hls-js';\nimport { addComponent } from '@videojs/core/dom/media/media-host';\nimport { MuxData } from '@videojs/core/dom/media/mux';\nimport type { AudioHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface MuxAudioProps\n  extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof HlsMediaProps>,\n    Partial<HlsMediaProps> {\n  children?: ReactNode;\n}\n\nexport const MuxAudio = forwardRef<HTMLAudioElement, MuxAudioProps>(function MuxAudio({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsJsMedia, (media) => {\n    addComponent(media, new MuxData({ playerSoftwareName: 'mux-audio' }));\n    addComponent(media, new GoogleCast());\n  });\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsMediaDefaultProps);\n\n  return (\n    <audio ref={composedRef} {...htmlProps}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace MuxAudio {\n  export type Props = MuxAudioProps;\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,aAAa,UAAU;AACpD,eAAa,OAAO,IAAI,QAAQ,EAAE,oBAAoB,aAAa,CAAC,CAAC;AACrE,eAAa,OAAO,IAAI,YAAY,CAAC;GACrC;AAKF,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,qBAAqB;EAI7D;EACK,CAAA;EAEV"}

package/dist/default/media/mux-video/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/mux-video/index.tsx"],"sourcesContent":["'use client';\n\nimport { GoogleCast } from '@videojs/core/dom/media/google-cast';\nimport type { HlsMediaProps } from '@videojs/core/dom/media/hls-js';\nimport { HlsJsMedia, hlsMediaDefaultProps } from '@videojs/core/dom/media/hls-js';\nimport { addComponent } from '@videojs/core/dom/media/media-host';\nimport { MuxData } from '@videojs/core/dom/media/mux';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface MuxVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsMediaProps>,\n    Partial<HlsMediaProps> {\n  children?: ReactNode;\n}\n\nexport const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(function MuxVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsJsMedia, (media) => {\n    addComponent(media, new MuxData({ playerSoftwareName: 'mux-video' }));\n    addComponent(media, new GoogleCast());\n  });\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace MuxVideo {\n  export type Props = MuxVideoProps;\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,aAAa,UAAU;AACpD,eAAa,OAAO,IAAI,QAAQ,EAAE,oBAAoB,aAAa,CAAC,CAAC;AACrE,eAAa,OAAO,IAAI,YAAY,CAAC;GACrC;AAKF,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,qBAAqB;EAI7D;EACK,CAAA;EAEV"}

package/dist/default/media/native-hls-video/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/native-hls-video/index.tsx"],"sourcesContent":["'use client';\n\nimport { GoogleCast } from '@videojs/core/dom/media/google-cast';\nimport { addComponent } from '@videojs/core/dom/media/media-host';\nimport type { NativeHlsMediaProps } from '@videojs/core/dom/media/native-hls';\nimport { NativeHlsMedia, nativeHlsMediaDefaultProps } from '@videojs/core/dom/media/native-hls';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface NativeHlsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof NativeHlsMediaProps>,\n    Partial<NativeHlsMediaProps> {\n  children?: ReactNode;\n}\n\nexport const NativeHlsVideo = forwardRef<HTMLVideoElement, NativeHlsVideoProps>(function NativeHlsVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(NativeHlsMedia, (media) => {\n    addComponent(media, new GoogleCast());\n  });\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, nativeHlsMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace NativeHlsVideo {\n  export type Props = NativeHlsVideoProps;\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,iBAAiB,WAAkD,SAAS,eACvF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,iBAAiB,UAAU;AACxD,eAAa,OAAO,IAAI,YAAY,CAAC;GACrC;AAKF,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,2BAA2B;EAInE;EACK,CAAA;EAEV"}