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

package/dist/default/__generated__/skins/default-video/styles/styles.css

@@ -0,0 +1,514 @@
+@layer videojs.base, videojs.theme, videojs.components;
+@layer videojs.base {
+  @scope (.media-skin) {
+    :scope,
+    *,
+    ::before,
+    ::after {
+      box-sizing: border-box;
+    }
+
+    button {
+      font: inherit;
+      color: inherit;
+      letter-spacing: inherit;
+    }
+
+    svg {
+      display: block;
+    }
+
+    [hidden] {
+      /* Hidden must override component display styles. */
+      display: none !important;
+    }
+  }
+}
+
+@layer videojs.theme {
+  .media-theme-default {
+    --media-controls-color: oklch(1 0 0);
+    --media-controls-gap: 0.25rem;
+    --media-controls-padding: 0.25rem;
+    --media-control-size: 2.25rem;
+    --media-control-hover-background: oklch(1 0 0 / 0.12);
+    --media-font-family: ui-sans-serif, system-ui, sans-serif;
+    --media-font-size: 0.875rem;
+    --media-icon-size: 1.125rem;
+    --media-radius-pill: 9999px;
+    --media-radius-surface: 0.5rem;
+    --media-shadow-color: oklch(0 0 0 / 0.35);
+    --media-slider-buffer-background: oklch(1 0 0 / 0.3);
+    --media-slider-thumb-size: 0.75rem;
+    --media-slider-track-background: oklch(1 0 0 / 0.2);
+    --media-slider-track-size: 0.25rem;
+    --media-surface-backdrop-blur: 12px;
+    --media-surface-background: oklch(0.2 0 0 / 0.72);
+    --media-surface-border: oklch(1 0 0 / 0.16);
+  }
+}
+
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-button {
+      width: var(--media-control-size);
+      height: var(--media-control-size);
+      cursor: pointer;
+      border-radius: var(--media-radius-pill);
+      color: inherit;
+      outline-offset: -2px;
+      background-color: #0000;
+      border-style: solid;
+      border-width: 0;
+      outline: 2px solid #0000;
+      flex-shrink: 0;
+      place-items: center;
+      padding: 0;
+      display: grid;
+    }
+
+    @media (hover: hover) {
+      .media-button:hover {
+        background-color: var(--media-control-hover-background);
+      }
+    }
+
+    .media-button:focus-visible {
+      background-color: var(--media-control-hover-background);
+      outline-offset: 2px;
+      outline-color: currentColor;
+    }
+
+    .media-button[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .media-button[aria-expanded='true'] {
+      background-color: var(--media-control-hover-background);
+    }
+
+    .media-button-icon {
+      width: var(--media-icon-size);
+      height: var(--media-icon-size);
+      filter: drop-shadow(0 1px 0 var(--media-shadow-color));
+    }
+
+    .media-fullscreen-enter-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-fullscreen-button) {
+      &:not([data-fullscreen]) .media-fullscreen-enter-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-fullscreen-exit-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-fullscreen-button) {
+      &[data-fullscreen] .media-fullscreen-exit-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-pause-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-play-button) {
+      &[data-started]:not([data-paused]):not([data-ended]) .media-pause-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-play-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-play-button) {
+      &:not([data-ended]):not([data-started]) .media-play-icon,
+      &:not([data-ended])[data-paused] .media-play-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-restart-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-play-button) {
+      &[data-ended] .media-restart-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-seek-backward-icon {
+      scale: -1 1;
+    }
+
+    .media-seek-button-label {
+      font-variant-numeric: tabular-nums;
+    }
+
+    .media-volume-high-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-mute-button) {
+      &:not([data-muted]):not([data-volume-level='low']) .media-volume-high-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-volume-low-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-mute-button) {
+      &:not([data-muted])[data-volume-level='low'] .media-volume-low-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-volume-off-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-mute-button) {
+      &[data-muted] .media-volume-off-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+  }
+}
+
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-container {
+      isolation: isolate;
+      border-radius: var(--media-radius-surface);
+      background-color: #000;
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: relative;
+      overflow: hidden;
+      container: media-container / inline-size;
+    }
+
+    .media-container:before {
+      pointer-events: none;
+      background-image: var(--media-poster-placeholder, none);
+      background-size: var(--media-object-fit, contain);
+      background-position: var(--media-object-position, center);
+      opacity: 0;
+      filter: blur(var(--media-poster-placeholder-blur, 20px));
+      content: '';
+      background-repeat: no-repeat;
+      transition-property: opacity;
+      transition-duration: 0.25s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      position: absolute;
+      inset: 0;
+    }
+
+    .media-container:has(:is(img[data-visible]:not([data-loaded]))):before {
+      content: '';
+      opacity: 1;
+    }
+
+    .media-container video {
+      border-radius: inherit;
+      object-fit: var(--media-object-fit, contain);
+      object-position: var(--media-object-position, center);
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+}
+
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-controls {
+      inset-inline: var(--media-controls-gap);
+      bottom: var(--media-controls-gap);
+      z-index: 10;
+      align-items: center;
+      gap: var(--media-controls-gap);
+      border-radius: var(--media-radius-pill);
+      background-color: var(--media-surface-background);
+      padding: var(--media-controls-padding);
+      font-family: var(--media-font-family);
+      font-size: var(--media-font-size);
+      color: var(--media-controls-color);
+      box-shadow:
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 0 1px var(--media-surface-border),
+        0 2px 8px var(--media-shadow-color);
+      backdrop-filter: blur(var(--media-surface-backdrop-blur));
+      line-height: 1;
+      display: flex;
+      position: absolute;
+    }
+
+    .media-controls-group-primary {
+      align-items: center;
+      gap: var(--media-controls-gap);
+      display: flex;
+    }
+
+    .media-controls-group-time {
+      align-items: center;
+      gap: var(--media-controls-gap);
+      flex: 1;
+      display: flex;
+    }
+
+    .media-time {
+      font-variant-numeric: tabular-nums;
+    }
+  }
+}
+
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-overlay {
+      pointer-events: none;
+      border-radius: inherit;
+      background-image: linear-gradient(to top, oklch(0% 0 0 / 0.5), oklch(0% 0 0 / 0.3) 25%, #0000);
+      position: absolute;
+      inset: 0;
+    }
+  }
+}
+
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-surface {
+      background-color: var(--media-surface-background);
+      color: var(--media-controls-color);
+      box-shadow:
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 0 1px var(--media-surface-border),
+        0 2px 8px var(--media-shadow-color);
+      backdrop-filter: blur(var(--media-surface-backdrop-blur));
+    }
+
+    .media-tooltip {
+      border-radius: var(--media-radius-pill);
+      white-space: nowrap;
+      border-style: solid;
+      border-width: 0;
+      margin: 0;
+      padding-block: 0.35rem;
+      padding-inline: 0.625rem;
+    }
+
+    .media-tooltip[data-open] {
+      align-items: center;
+      gap: 0.25rem;
+      display: flex;
+    }
+
+    .media-tooltip-shortcut {
+      font-size: 0.75em;
+      font-weight: 600;
+    }
+
+    .media-volume-popover {
+      border-radius: var(--media-radius-pill);
+      border-style: solid;
+      border-width: 0;
+      margin: 0;
+      padding-block: 0.75rem;
+    }
+  }
+}
+
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-poster {
+      pointer-events: none;
+      border-radius: inherit;
+      object-fit: var(--media-object-fit, contain);
+      object-position: var(--media-object-position, center);
+      width: 100%;
+      height: 100%;
+      transition-property: opacity;
+      transition-duration: 0.25s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      position: absolute;
+      inset: 0;
+    }
+
+    .media-poster:not([data-visible]) {
+      opacity: 0;
+    }
+
+    .media-poster:before {
+      pointer-events: none;
+      background-image: var(--media-poster-placeholder, none);
+      background-size: var(--media-object-fit, contain);
+      background-position: var(--media-object-position, center);
+      content: '';
+      filter: blur(var(--media-poster-placeholder-blur, 20px));
+      background-repeat: no-repeat;
+      position: absolute;
+      inset: 0;
+    }
+
+    .media-poster ::slotted(img) {
+      border-radius: inherit;
+      object-fit: var(--media-object-fit, contain);
+      object-position: var(--media-object-position, center);
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      inset: 0;
+    }
+
+    .media-poster[data-visible]:not([data-loaded]) {
+      opacity: 0;
+    }
+  }
+}
+
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-slider {
+      min-height: var(--media-control-size);
+      cursor: pointer;
+      outline-style: none;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      min-width: 5rem;
+      display: flex;
+      position: relative;
+    }
+
+    .media-slider[data-orientation='vertical'] {
+      height: 5rem;
+      width: var(--media-control-size);
+      min-width: 0;
+    }
+
+    .media-slider-buffer {
+      width: var(--media-slider-buffer);
+      border-radius: inherit;
+      background-color: var(--media-slider-buffer-background);
+      inset-block: 0;
+      position: absolute;
+      left: 0;
+    }
+
+    .media-slider-buffer[data-orientation='vertical'] {
+      height: var(--media-slider-buffer);
+      inset-inline: 0;
+      width: auto;
+      top: auto;
+      bottom: 0;
+    }
+
+    .media-slider-fill {
+      width: var(--media-slider-fill);
+      border-radius: inherit;
+      inset-block: 0;
+      background-color: currentColor;
+      position: absolute;
+      left: 0;
+    }
+
+    .media-slider-fill[data-orientation='vertical'] {
+      height: var(--media-slider-fill);
+      inset-inline: 0;
+      width: auto;
+      top: auto;
+      bottom: 0;
+    }
+
+    .media-slider-preview {
+      position: relative;
+    }
+
+    .media-slider-thumb {
+      top: 50%;
+      left: var(--media-slider-fill);
+      width: var(--media-slider-thumb-size);
+      height: var(--media-slider-thumb-size);
+      border-radius: var(--media-radius-pill);
+      background-color: currentColor;
+      position: absolute;
+      translate: -50% -50%;
+    }
+
+    .media-slider-thumb[data-orientation='vertical'] {
+      top: calc(100% - var(--media-slider-fill));
+      left: 50%;
+    }
+
+    .media-slider-track {
+      height: var(--media-slider-track-size);
+      border-radius: var(--media-radius-pill);
+      background-color: var(--media-slider-track-background);
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .media-slider-track[data-orientation='vertical'] {
+      height: 100%;
+      width: var(--media-slider-track-size);
+    }
+
+    .media-slider-value {
+      font-variant-numeric: tabular-nums;
+    }
+
+    .media-spinner-icon {
+      width: var(--media-icon-size);
+      height: var(--media-icon-size);
+      filter: drop-shadow(0 1px 0 var(--media-shadow-color));
+    }
+
+    .media-thumbnail {
+      border-radius: var(--media-radius-surface);
+      position: absolute;
+      bottom: calc(100% + 0.75rem);
+      overflow: hidden;
+    }
+
+    .media-thumbnail-image {
+      max-width: 12rem;
+      max-height: 7rem;
+      display: block;
+    }
+  }
+}
+

package/dist/default/__generated__/skins/default-video/styles/theme.css

@@ -0,0 +1,22 @@
+@layer videojs.theme {
+  .media-theme-default {
+    --media-controls-color: oklch(1 0 0);
+    --media-controls-gap: 0.25rem;
+    --media-controls-padding: 0.25rem;
+    --media-control-size: 2.25rem;
+    --media-control-hover-background: oklch(1 0 0 / 0.12);
+    --media-font-family: ui-sans-serif, system-ui, sans-serif;
+    --media-font-size: 0.875rem;
+    --media-icon-size: 1.125rem;
+    --media-radius-pill: 9999px;
+    --media-radius-surface: 0.5rem;
+    --media-shadow-color: oklch(0 0 0 / 0.35);
+    --media-slider-buffer-background: oklch(1 0 0 / 0.3);
+    --media-slider-thumb-size: 0.75rem;
+    --media-slider-track-background: oklch(1 0 0 / 0.2);
+    --media-slider-track-size: 0.25rem;
+    --media-surface-backdrop-blur: 12px;
+    --media-surface-background: oklch(0.2 0 0 / 0.72);
+    --media-surface-border: oklch(1 0 0 / 0.16);
+  }
+}

package/dist/default/i18n/context.js

@@ -0,0 +1,36 @@
+"use client";
+import { DEFAULT_LOCALE, createTranslator, getI18nTranslations, onI18nRegistryChange } from "@videojs/core/i18n";
+import { createContext, useContext, useEffect, useMemo, useReducer } from "react";
+//#region src/i18n/context.tsx
+/** React context carrying the active translator and locale. @public */
+const I18nContext = createContext(null);
+const LocaleRootContext = createContext(void 0);
+/**
+* Returns the translator for the nearest `I18nProvider`, or English defaults when none is mounted.
+*
+* @public
+*/
+function useTranslator() {
+	const ctx = useContext(I18nContext);
+	const [registryEpoch, invalidateRegistry] = useReducer((epoch) => epoch + 1, 0);
+	useEffect(() => {
+		return onI18nRegistryChange(() => invalidateRegistry());
+	}, []);
+	const fallback = useMemo(() => {
+		return createTranslator(getI18nTranslations(DEFAULT_LOCALE), DEFAULT_LOCALE);
+	}, [registryEpoch]);
+	if (!ctx) return fallback;
+	return ctx.translator;
+}
+/**
+* Returns the active BCP 47 locale tag from the nearest `I18nProvider`, or `'en'` when none is mounted.
+*
+* @public
+*/
+function useLocale() {
+	return useContext(I18nContext)?.locale ?? DEFAULT_LOCALE;
+}
+//#endregion
+export { I18nContext, LocaleRootContext, useLocale, useTranslator };
+
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/i18n/context.tsx"],"sourcesContent":["'use client';\n\nimport {\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 a provider received an explicit locale prop. */\n  localeFromProp: 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  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  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;CAET,OAAO,IAAI;AACb;;;;;;AAOA,SAAgB,YAAoB;CAElC,OADY,WAAW,WACd,CAAC,EAAE,UAAU;AACxB"}

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

@@ -0,0 +1,76 @@
+"use client";
+import { I18nContext, LocaleRootContext, useLocale, useTranslator } from "./context.js";
+import { getProviderRootProps } from "./get-provider-root-props.js";
+import { useAmbientLang } from "./use-ambient-lang.js";
+import { useLangRootElement } from "./use-lang-root-element.js";
+import { useLazyTranslations } from "./use-lazy-translations.js";
+import { useLocaleRootNotifications } from "./use-locale-root-notifications.js";
+import { useMergedTranslations } from "./use-merged-translations.js";
+import { createTranslator, loadLocale } from "@videojs/core/i18n";
+import { useContext, useMemo } from "react";
+import { effectiveLocale } from "@videojs/utils/dom";
+import { jsx } from "react/jsx-runtime";
+//#region src/i18n/create-i18n.tsx
+/**
+* Creates an i18n provider and hooks for the shared React i18n context.
+*
+* @param options - Optional hooks such as custom built-in locale loading.
+* @public
+*/
+function createI18n(options) {
+	const loader = options?.loader ?? loadLocale;
+	function I18nProviderRoot({ locale: localeProp, langRootRef, parentLocale, localeFromProp = localeProp !== void 0, translations: translationsProp, children, onActiveLocaleChange, parentAddLocaleRoot }) {
+		const langRootElement = useLangRootElement(langRootRef, parentAddLocaleRoot);
+		const ambientLang = useAmbientLang(langRootRef !== void 0, langRootElement);
+		const resolvedLocale = useMemo(() => effectiveLocale(localeProp, ambientLang ?? parentLocale), [
+			localeProp,
+			ambientLang,
+			parentLocale
+		]);
+		const addLocaleRoot = useLocaleRootNotifications(resolvedLocale, onActiveLocaleChange);
+		const translations = useMergedTranslations(resolvedLocale, useLazyTranslations(resolvedLocale, loader), translationsProp);
+		const translator = useMemo(() => createTranslator(translations, resolvedLocale), [translations, resolvedLocale]);
+		const value = useMemo(() => ({
+			translator,
+			locale: resolvedLocale,
+			localeFromProp,
+			...translationsProp !== void 0 ? { translations: translationsProp } : {},
+			...onActiveLocaleChange !== void 0 ? { onActiveLocaleChange } : {}
+		}), [
+			translator,
+			resolvedLocale,
+			localeFromProp,
+			translationsProp,
+			onActiveLocaleChange
+		]);
+		return /* @__PURE__ */ jsx(LocaleRootContext.Provider, {
+			value: addLocaleRoot,
+			children: /* @__PURE__ */ jsx(I18nContext.Provider, {
+				value,
+				children
+			})
+		});
+	}
+	function I18nProvider(props) {
+		const rootProps = getProviderRootProps(props, useContext(I18nContext), useContext(LocaleRootContext));
+		if (!rootProps) return props.children;
+		return /* @__PURE__ */ jsx(I18nProviderRoot, { ...rootProps });
+	}
+	return {
+		I18nContext,
+		I18nProvider,
+		useTranslator,
+		useLocale
+	};
+}
+/**
+* Resolves locale and supplies a typed translator to descendants. Mount this explicitly for
+* translated controls, forced locales, SSR copy, or locale-aware player roots.
+*
+* @public
+*/
+const I18nProvider = createI18n().I18nProvider;
+//#endregion
+export { I18nProvider, createI18n };
+
+//# sourceMappingURL=create-i18n.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"create-i18n.js","names":["defaultLoader"],"sources":["../../../src/i18n/create-i18n.tsx"],"sourcesContent":["'use client';\n\nimport {\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\n   * ancestors from {@link langRootRef} when set, otherwise from `document.documentElement`\n   * (typically `<html lang>`). Updates when any `lang` attribute changes anywhere under `<html>`,\n   * or when subtree moves alter which ancestor supplies `lang`. For 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\n   * omitted—for example a ref to 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\n   * packs for {@link locale}. Applies to translated\n   * `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    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        ...(translationsProp !== undefined ? { translations: translationsProp } : {}),\n        ...(onActiveLocaleChange !== undefined ? { onActiveLocaleChange } : {}),\n      }),\n      [translator, resolvedLocale, localeFromProp, 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\n * translated controls, forced locales, SSR copy, or locale-aware player roots.\n *\n * @public\n */\nexport const I18nProvider = defaultI18n.I18nProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuEA,SAAgB,WAAW,SAA+C;CACxE,MAAM,SAAS,SAAS,UAAUA;CAElC,SAAS,iBAAiB,EACxB,QAAQ,YACR,aACA,cACA,iBAAiB,eAAe,KAAA,GAChC,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;EAErF,MAAM,eAAe,sBAAsB,gBADzB,oBAAoB,gBAAgB,MACa,GAAG,gBAAgB;EAEtF,MAAM,aAAa,cAAc,iBAAiB,cAAc,cAAc,GAAG,CAAC,cAAc,cAAc,CAAC;EAE/G,MAAM,QAAQ,eACL;GACL;GACA,QAAQ;GACR;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;GAAkB;EAAoB,CACrF;EAEA,OACE,oBAAC,kBAAkB,UAAnB;GAA4B,OAAO;GACjC,UAAA,oBAAC,YAAY,UAAb;IAA6B;IAAQ;GAA+B,CAAA;EAC1C,CAAA;CAEhC;CAEA,SAAS,aAAa,OAAqC;EAIzD,MAAM,YAAY,qBAAqB,OAHxB,WAAW,WAGyB,GAFvB,WAAW,iBAEiC,CAAC;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"}