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

package/dist/default/utils/use-media-events.js

@@ -0,0 +1,105 @@
+import { useLatestRef } from "./use-latest-ref.js";
+import { c } from "react-compiler-runtime";
+import { useRef } from "react";
+import { isFunction } from "@videojs/utils/predicate";
+//#region src/utils/use-media-events.ts
+/**
+* React event prop names for the standard media events, mapped to the event type each one handles. Mirrors the media
+* subset of React's `DOMAttributes` so a handler written for `<video>` reads the same on an embed.
+*/
+const MEDIA_EVENT_PROPS = {
+	onAbort: "abort",
+	onCanPlay: "canplay",
+	onCanPlayThrough: "canplaythrough",
+	onDurationChange: "durationchange",
+	onEmptied: "emptied",
+	onEnded: "ended",
+	onError: "error",
+	onLoadedData: "loadeddata",
+	onLoadedMetadata: "loadedmetadata",
+	onLoadStart: "loadstart",
+	onPause: "pause",
+	onPlay: "play",
+	onPlaying: "playing",
+	onProgress: "progress",
+	onRateChange: "ratechange",
+	onSeeked: "seeked",
+	onSeeking: "seeking",
+	onStalled: "stalled",
+	onSuspend: "suspend",
+	onTimeUpdate: "timeupdate",
+	onVolumeChange: "volumechange",
+	onWaiting: "waiting"
+};
+const MEDIA_EVENT_PROP_NAMES = Object.keys(MEDIA_EVENT_PROPS);
+/**
+* Route standard media event props to a playback adapter that dispatches media events on itself.
+*
+* React only wires `onPlay`, `onTimeUpdate`, and friends to `<video>` and `<audio>`; on an `<iframe>` they go nowhere.
+* This splits those props out, subscribes them on the adapter, and returns everything else for the rendered element
+* along with a ref for that element. Listeners bind from the ref rather than an effect: adapters dispatch `loadstart`
+* (or `error`) synchronously inside `attach()`, and effects run after every ref has fired, so an effect-bound
+* `onLoadStart` would miss the initial load. Compose the ref ahead of the one that attaches the media so the listeners
+* are in place first. Listeners bind once per adapter and always call the latest handler, so re-renders never
+* resubscribe.
+*
+* @param props - Component props, which may include media event handlers.
+* @param media - Adapter that dispatches the standard media events. Omit it when the rendered element is the media
+*   itself, such as a third-party web component; the listeners then bind to whatever the ref receives.
+*/
+function useMediaEvents(props, media) {
+	const $ = c(9);
+	let handlers;
+	let rest;
+	if ($[0] !== props) {
+		handlers = {};
+		rest = {};
+		for (const key in props) if (key in MEDIA_EVENT_PROPS) handlers[key] = props[key];
+		else rest[key] = props[key];
+		$[0] = props;
+		$[1] = handlers;
+		$[2] = rest;
+	} else {
+		handlers = $[1];
+		rest = $[2];
+	}
+	const handlersRef = useLatestRef(handlers);
+	const controllerRef = useRef(null);
+	let t0;
+	if ($[3] !== handlersRef || $[4] !== media) {
+		t0 = (element) => {
+			controllerRef.current?.abort();
+			controllerRef.current = null;
+			const target = element && (media ?? element);
+			if (!target) return;
+			const controller = new AbortController();
+			controllerRef.current = controller;
+			for (const prop of MEDIA_EVENT_PROP_NAMES) {
+				const listener = (event) => {
+					const handler = handlersRef.current[prop];
+					if (isFunction(handler)) handler(event);
+				};
+				target.addEventListener(MEDIA_EVENT_PROPS[prop], listener, { signal: controller.signal });
+			}
+			return () => controller.abort();
+		};
+		$[3] = handlersRef;
+		$[4] = media;
+		$[5] = t0;
+	} else t0 = $[5];
+	const ref = t0;
+	const t1 = rest;
+	let t2;
+	if ($[6] !== ref || $[7] !== t1) {
+		t2 = {
+			ref,
+			props: t1
+		};
+		$[6] = ref;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+}
+//#endregion
+export { useMediaEvents };

package/dist/default/utils/use-media-extension.js

@@ -1,6 +1,7 @@
 import { useMedia } from "../player/context.js";
 import { useDestroy } from "./use-destroy.js";
 import { HTMLMediaAdapter, addMediaExtension } from "@videojs/media/dom";
+import { c } from "react-compiler-runtime";
 import { useEffect, useState } from "react";
 //#region src/utils/use-media-extension.ts
 /**
@@ -13,16 +14,34 @@ import { useEffect, useState } from "react";
 * @param ExtensionClass - Media extension class to instantiate and register.
 */
 function useMediaExtension(ExtensionClass) {
+	const $ = c(6);
 	const media = useMedia();
-	const [component] = useState(() => new ExtensionClass());
+	let t0;
+	if ($[0] !== ExtensionClass) {
+		t0 = () => new ExtensionClass();
+		$[0] = ExtensionClass;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [component] = useState(t0);
 	useDestroy(component);
-	useEffect(() => {
-		if (!(media instanceof HTMLMediaAdapter)) return;
-		return addMediaExtension(media, component);
-	}, [media, component]);
+	let t1;
+	let t2;
+	if ($[2] !== component || $[3] !== media) {
+		t1 = () => {
+			if (!(media instanceof HTMLMediaAdapter)) return;
+			return addMediaExtension(media, component);
+		};
+		t2 = [media, component];
+		$[2] = component;
+		$[3] = media;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useEffect(t1, t2);
 	return component;
 }
 //#endregion
 export { useMediaExtension };
-
-//# sourceMappingURL=use-media-extension.js.map

package/dist/default/utils/use-media-instance.js

@@ -1,5 +1,6 @@
 import { useMediaAttach } from "../player/context.js";
 import { useDestroy } from "./use-destroy.js";
+import { c } from "react-compiler-runtime";
 import { useState } from "react";
 //#region src/utils/use-media-instance.ts
 /**
@@ -16,15 +17,35 @@ import { useState } from "react";
 * @param setup - Optional callback run once before the instance is attached.
 */
 function useMediaInstance(MediaClass, setup) {
-	const [instance] = useState(() => new MediaClass());
+	const $ = c(9);
+	let t0;
+	if ($[0] !== MediaClass) {
+		t0 = () => new MediaClass();
+		$[0] = MediaClass;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [instance] = useState(t0);
 	const setMedia = useMediaAttach();
-	useDestroy(instance, () => {
-		setup?.(instance);
-		setMedia?.(instance);
-	}, () => setMedia?.((prev) => prev === instance ? null : prev));
+	let t1;
+	if ($[2] !== instance || $[3] !== setMedia || $[4] !== setup) {
+		t1 = () => {
+			setup?.(instance);
+			setMedia?.(instance);
+		};
+		$[2] = instance;
+		$[3] = setMedia;
+		$[4] = setup;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== instance || $[7] !== setMedia) {
+		t2 = () => setMedia?.((prev) => prev === instance ? null : prev);
+		$[6] = instance;
+		$[7] = setMedia;
+		$[8] = t2;
+	} else t2 = $[8];
+	useDestroy(instance, t1, t2);
 	return instance;
 }
 //#endregion
 export { useMediaInstance };
-
-//# sourceMappingURL=use-media-instance.js.map

package/dist/default/utils/use-render.js

@@ -1,8 +1,8 @@
 import { composeRefs } from "./use-composed-refs.js";
 import { mergeProps } from "./merge-props.js";
 import { getStateDataAttrs } from "@videojs/core/dom";
-import { cloneElement, createElement, isValidElement } from "react";
-import { isFunction } from "@videojs/utils/predicate";
+import { cloneElement, createElement, forwardRef, isValidElement, memo, version } from "react";
+import { isFunction, isObject } from "@videojs/utils/predicate";
 import { resolveClassName } from "@videojs/utils/style";
 //#region src/utils/use-render.tsx
 function resolveStyle(style, state) {
@@ -12,6 +12,50 @@ function getElementRef(element) {
 	const elementAny = element;
 	return elementAny.ref ?? elementAny.props?.ref;
 }
+/**
+* React 19 passes `ref` to function components as a prop. React 18 and Preact compat only deliver it through
+* `forwardRef`, so a plain function used as a render target needs wrapping there.
+*/
+const REF_AS_PROP = Number.parseInt(version, 10) >= 19;
+const REACT_MEMO_TYPE = Symbol.for("react.memo");
+/** Original component, or memo wrapper, to the ref-forwarding component created for it. */
+const refForwardingCache = /* @__PURE__ */ new WeakMap();
+function isPlainFunctionComponent(type) {
+	if (!isFunction(type) || "$$typeof" in type) return false;
+	const prototype = type.prototype;
+	return !(isObject(prototype) && "isReactComponent" in prototype);
+}
+function isMemoComponent(type) {
+	return isObject(type) && "$$typeof" in type && type.$$typeof === REACT_MEMO_TYPE;
+}
+/** Wrap a plain function component in `forwardRef` so it receives `ref` inside its props, as it would on React 19. */
+function withForwardedRef(component) {
+	const cached = refForwardingCache.get(component);
+	if (cached) return cached;
+	const ForwardedComponent = forwardRef((props, ref) => {
+		return component({
+			...props,
+			ref
+		});
+	});
+	refForwardingCache.set(component, ForwardedComponent);
+	return ForwardedComponent;
+}
+/**
+* Resolve the type to create a render element with so the host's composed ref reaches it. Intrinsic tags, classes, and
+* `forwardRef` components already accept refs. Plain function components, bare or wrapped in `memo`, only do on
+* renderers with ref-as-prop and are wrapped otherwise.
+*/
+function ensureRefForwarding(type) {
+	if (REF_AS_PROP) return type;
+	if (isPlainFunctionComponent(type)) return withForwardedRef(type);
+	if (!isMemoComponent(type) || !isPlainFunctionComponent(type.type)) return type;
+	const cached = refForwardingCache.get(type);
+	if (cached) return cached;
+	const forwarded = memo(withForwardedRef(type.type), type.compare);
+	refForwardingCache.set(type, forwarded);
+	return forwarded;
+}
 function mergeRefs(...refs) {
 	const flatRefs = refs.flat().filter((ref) => ref !== null && ref !== void 0);
 	if (flatRefs.length === 0) return void 0;
@@ -59,12 +103,13 @@ function renderElement(element, componentProps, params) {
 		const mergedRef = mergeRefs(ref, mergedProps.ref, elementRef);
 		const elementProps = mergeProps(mergedProps, render.props);
 		elementProps.ref = mergedRef;
-		return cloneElement(render, elementProps);
+		const type = ensureRefForwarding(render.type);
+		if (type === render.type) return cloneElement(render, elementProps);
+		if (render.key != null) elementProps.key = render.key;
+		return createElement(type, elementProps);
 	}
 	mergedProps.ref = mergeRefs(ref, mergedProps.ref);
 	return createElement(element, mergedProps);
 }
 //#endregion
 export { renderElement };
-
-//# sourceMappingURL=use-render.js.map

package/dist/default/utils/use-safe-id.js

@@ -1,3 +1,4 @@
+import { c } from "react-compiler-runtime";
 import { useId } from "react";
 //#region src/utils/use-safe-id.ts
 const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;
@@ -9,10 +10,16 @@ const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;
 * prepends a prefix.
 */
 function useSafeId(prefix) {
-	const raw = useId().replace(UNSAFE_CHARS, "");
+	const $ = c(2);
+	const t0 = useId();
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0.replace(UNSAFE_CHARS, "");
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const raw = t1;
 	return prefix ? `${prefix}-${raw}` : raw;
 }
 //#endregion
 export { useSafeId };
-
-//# sourceMappingURL=use-safe-id.js.map

package/dist/default/utils/use-sync-props.js

@@ -19,5 +19,3 @@ function useSyncProps(target, props, defaults) {
 }
 //#endregion
 export { useSyncProps };
-
-//# sourceMappingURL=use-sync-props.js.map

package/dist/dev/i18n/context.js

@@ -1,5 +1,6 @@
 import { DEFAULT_LOCALE, createTranslator, getI18nTranslations, onI18nRegistryChange } from "@videojs/core/i18n";
-import { createContext, useContext, useEffect, useMemo, useReducer } from "react";
+import { c } from "react-compiler-runtime";
+import { createContext, useContext, useEffect, useReducer } from "react";
 //#region src/i18n/context.tsx
 /** React context carrying the active translator and locale. @public */
 const I18nContext = createContext(null);
@@ -10,17 +11,33 @@ const LocaleRootContext = createContext(void 0);
 * @public
 */
 function useTranslator() {
+	const $ = c(3);
 	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]);
+	const [registryEpoch, invalidateRegistry] = useReducer(_temp, 0);
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => onI18nRegistryChange(() => invalidateRegistry());
+		t1 = [];
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	useEffect(t0, t1);
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = createTranslator(getI18nTranslations(DEFAULT_LOCALE), DEFAULT_LOCALE);
+		$[2] = t2;
+	} else t2 = $[2];
+	const fallback = t2;
 	if (!ctx) return fallback;
 	return ctx.translator;
 }
+function _temp(epoch) {
+	return epoch + 1;
+}
 /**
 * Returns the active BCP 47 locale tag from the nearest `I18nProvider`, or `'en'` when none is mounted.
 *

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"context.js","names":["(epoch: number) => epoch + 1","() => {\n    return onI18nRegistryChange(() => invalidateRegistry());\n  }","[]","createTranslator(getI18nTranslations(DEFAULT_LOCALE), DEFAULT_LOCALE)","useMemo(() => {\n    void registryEpoch;\n    return createTranslator(getI18nTranslations(DEFAULT_LOCALE), DEFAULT_LOCALE);\n  }, [registryEpoch])"],"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,WAAWA,OAA8B,CAAC;CAE5EC,IAAAA;CAEPC,IAAAA;;EAFO,WACD,2BAA2B,mBAAmB,CAAC;EACrD,KAAA,CAAC;;;;;;;CAFJ,UAAUD,IAEPC,EAAE;CAIIC,IAAAA;;EAAiB,KAAA,iBAAA,oBAAoB,cAAc,GAAG,cAAc;;;CAF7E,MAAM,WAAWC;CAKjB,IAAI,CAAC,KACH,OAAO;CAGT,OAAO,IAAI;AACb;AAhByD,SAAA,MAAC,OAAA;CAAkB,OAAA,QAAQ;;;;;;;AAuBpF,SAAgB,YAAoB;CAGlC,OAFY,WAAW,WAEhB,CAAA,EAAK,UAAU;AACxB"}

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

@@ -6,6 +6,7 @@ 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 { c } from "react-compiler-runtime";
 import { useContext, useMemo } from "react";
 import { effectiveLocale } from "@videojs/utils/dom";
 import { jsx } from "react/jsx-runtime";
@@ -54,11 +55,26 @@ function createI18n(options) {
 		});
 	}
 	function I18nProvider(props) {
+		const $ = c(6);
 		const parent = useContext(I18nContext);
 		const parentAddLocaleRoot = useContext(LocaleRootContext);
-		const rootProps = getProviderRootProps(props, parent, parentAddLocaleRoot);
+		let t0;
+		if ($[0] !== parent || $[1] !== parentAddLocaleRoot || $[2] !== props) {
+			t0 = getProviderRootProps(props, parent, parentAddLocaleRoot);
+			$[0] = parent;
+			$[1] = parentAddLocaleRoot;
+			$[2] = props;
+			$[3] = t0;
+		} else t0 = $[3];
+		const rootProps = t0;
 		if (!rootProps) return props.children;
-		return /* @__PURE__ */ jsx(I18nProviderRoot, { ...rootProps });
+		let t1;
+		if ($[4] !== rootProps) {
+			t1 = /* @__PURE__ */ jsx(I18nProviderRoot, { ...rootProps });
+			$[4] = rootProps;
+			$[5] = t1;
+		} else t1 = $[5];
+		return t1;
 	}
 	return {
 		I18nContext,

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"create-i18n.js","names":["getProviderRootProps(props, parent, parentAddLocaleRoot)","<I18nProviderRoot {...rootProps} />"],"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,UAAU;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;EAEtCA,IAAAA;EAA4B,IAAA,EAAA,OAAA,UAAA,EAAA,OAAQ,uBAAA,EAAA,OAAf,OAAA;GAArB,KAAA,qBAAqB,OAAO,QAAQ,mBAAmB;GAA3B,EAAA,KAAA;GAAQ,EAAA,KAAA;GAAf,EAAA,KAAA;;;EAAvC,MAAM,YAAYA;EAClB,IAAI,CAAC,WAAW,OAAO,MAAM;EAEtBC,IAAAA;EAAsB,IAAA,EAAA,OAAA,WAAA;GAAtB,KAAA,oBAAC,kBAAD,EAAkB,GAAI,UAAY,CAAA;GAAZ,EAAA,KAAA;;;EAA7B,OAAOA;CACT;CAEA,OAAO;EAAE;EAAa;EAAc;EAAe;CAAU;AAC/D;;;;;;;AAUA,MAAa,eARO,WAQQ,CAAA,CAAY"}

package/dist/dev/i18n/text.js

@@ -1,18 +1,50 @@
 "use client";
 import { useTranslator } from "./context.js";
+import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/i18n/text.tsx
 /** Renders translated compiler text through a native React span. */
-function Text({ children, token, ...props }) {
+function Text(t0) {
+	const $ = c(12);
+	let children;
+	let props;
+	let token;
+	if ($[0] !== t0) {
+		({children, token, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+		$[3] = token;
+	} else {
+		children = $[1];
+		props = $[2];
+		token = $[3];
+	}
 	const t = useTranslator();
 	const fallback = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
-	return /* @__PURE__ */ jsx("span", {
-		...props,
-		children: token ? t({
+	let t1;
+	if ($[4] !== children || $[5] !== fallback || $[6] !== t || $[7] !== token) {
+		t1 = token ? t({
 			key: token,
 			text: fallback ?? token
-		}) : children
-	});
+		}) : children;
+		$[4] = children;
+		$[5] = fallback;
+		$[6] = t;
+		$[7] = token;
+		$[8] = t1;
+	} else t1 = $[8];
+	let t2;
+	if ($[9] !== props || $[10] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			...props,
+			children: t1
+		});
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
+	return t2;
 }
 //#endregion
 export { Text };

package/dist/dev/i18n/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":[],"sources":["../../../src/i18n/text.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { useTranslator } from './context';\n\nexport interface TextProps extends Omit<ComponentProps<'span'>, 'children'> {\n  children?: ReactNode;\n  token?: string | undefined;\n}\n\n/** Renders translated compiler text through a native React span. */\nexport function Text({ children, token, ...props }: TextProps) {\n  const t = useTranslator();\n  const fallback = typeof children === 'string' || typeof children === 'number' ? String(children) : undefined;\n\n  return <span {...props}>{token ? t({ key: token, text: fallback ?? token }) : children}</span>;\n}\n"],"mappings":";;;;;AAYA,SAAgB,KAAK,EAAE,UAAU,OAAO,GAAG,SAAoB;CAC7D,MAAM,IAAI,cAAc;CACxB,MAAM,WAAW,OAAO,aAAa,YAAY,OAAO,aAAa,WAAW,OAAO,QAAQ,IAAI,KAAA;CAEnG,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAQ,UAAA,QAAQ,EAAE;GAAE,KAAK;GAAO,MAAM,YAAY;EAAM,CAAC,IAAI;CAAe,CAAA;AAC/F"}
+{"version":3,"file":"text.js","names":["{ children, token, ...props }: TextProps","token ? t({ key: token, text: fallback ?? token }) : children","<span {...props}>{token ? t({ key: token, text: fallback ?? token }) : children}</span>"],"sources":["../../../src/i18n/text.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { useTranslator } from './context';\n\nexport interface TextProps extends Omit<ComponentProps<'span'>, 'children'> {\n  children?: ReactNode;\n  token?: string | undefined;\n}\n\n/** Renders translated compiler text through a native React span. */\nexport function Text({ children, token, ...props }: TextProps) {\n  const t = useTranslator();\n  const fallback = typeof children === 'string' || typeof children === 'number' ? String(children) : undefined;\n\n  return <span {...props}>{token ? t({ key: token, text: fallback ?? token }) : children}</span>;\n}\n"],"mappings":";;;;;;AAYA,SAAgB,KAAA,IAA+C;;CAAxC,IAAA;CAAoB,IAAA;CAAV,IAAA;CAAZA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,UAAU,UAAO,SAAnBA;;;;;;;;;;CACnB,MAAM,IAAI,cAAc;CACxB,MAAM,WAAW,OAAO,aAAa,YAAY,OAAO,aAAa,WAAW,OAAO,QAAQ,IAAI,KAAA;CAE1EC,IAAAA;CAAqD,IAAA,EAAA,OAAA,YAAA,EAAA,OAAvB,YAAA,EAAA,OAAtB,KAAA,EAAA,OAAR,OAAA;EAAQ,KAAA,QAAA,EAAE;GAAE,KAAK;GAAO,MAAM,YAAY;EAAM,CAAC,IAAI;;EAAvB,EAAA,KAAA;EAAtB,EAAA,KAAA;EAAR,EAAA,KAAA;;;CAAlBC,IAAAA;CAAU,IAAA,EAAA,OAAA,SAAA,EAAA,QAAQD,IAAAA;EAAlB,KAAA,oBAAC,QAAD;GAAM,GAAI;GAAQA,UAAAA;EAAoE,CAAA;EAA5E,EAAA,KAAA;EAAQA,EAAAA,MAAAA;;;CAAzB,OAAOC;AACT"}

package/dist/dev/i18n/use-ambient-lang.js

@@ -1,13 +1,22 @@
+import { c } from "react-compiler-runtime";
 import { useSyncExternalStore } from "react";
 import { nearestLang, resolveLangAttr, subscribeAmbientLang } from "@videojs/utils/dom";
 //#region src/i18n/use-ambient-lang.ts
 function ambientLangServerSnapshot() {}
 function useAmbientLang(hasLangRoot, langRootElement) {
-	return useSyncExternalStore(subscribeAmbientLang, () => {
-		const root = hasLangRoot || typeof document === "undefined" ? langRootElement : document.documentElement;
-		if (!root) return void 0;
-		return resolveLangAttr(nearestLang(root));
-	}, ambientLangServerSnapshot);
+	const $ = c(3);
+	let t0;
+	if ($[0] !== hasLangRoot || $[1] !== langRootElement) {
+		t0 = () => {
+			const root = hasLangRoot || typeof document === "undefined" ? langRootElement : document.documentElement;
+			if (!root) return;
+			return resolveLangAttr(nearestLang(root));
+		};
+		$[0] = hasLangRoot;
+		$[1] = langRootElement;
+		$[2] = t0;
+	} else t0 = $[2];
+	return useSyncExternalStore(subscribeAmbientLang, t0, ambientLangServerSnapshot);
 }
 //#endregion
 export { useAmbientLang };

package/dist/dev/i18n/use-ambient-lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-ambient-lang.js","names":[],"sources":["../../../src/i18n/use-ambient-lang.ts"],"sourcesContent":["import type { Locale } from '@videojs/core/i18n';\nimport { nearestLang, resolveLangAttr, subscribeAmbientLang } from '@videojs/utils/dom';\nimport { useSyncExternalStore } from 'react';\n\nfunction ambientLangServerSnapshot(): string | undefined {\n  return undefined;\n}\n\nexport function useAmbientLang(hasLangRoot: boolean, langRootElement: Element | null): Locale | undefined {\n  return useSyncExternalStore(\n    subscribeAmbientLang,\n    () => {\n      const root = hasLangRoot || typeof document === 'undefined' ? langRootElement : document.documentElement;\n      if (!root) return undefined;\n\n      return resolveLangAttr<Locale>(nearestLang(root));\n    },\n    ambientLangServerSnapshot\n  );\n}\n"],"mappings":";;;AAIA,SAAS,4BAAgD,CAEzD;AAEA,SAAgB,eAAe,aAAsB,iBAAqD;CACxG,OAAO,qBACL,4BACM;EACJ,MAAM,OAAO,eAAe,OAAO,aAAa,cAAc,kBAAkB,SAAS;EACzF,IAAI,CAAC,MAAM,OAAO,KAAA;EAElB,OAAO,gBAAwB,YAAY,IAAI,CAAC;CAClD,GACA,yBACF;AACF"}
+{"version":3,"file":"use-ambient-lang.js","names":["() => {\n      const root = hasLangRoot || typeof document === 'undefined' ? langRootElement : document.documentElement;\n      if (!root) return undefined;\n\n      return resolveLangAttr<Locale>(nearestLang(root));\n    }"],"sources":["../../../src/i18n/use-ambient-lang.ts"],"sourcesContent":["import type { Locale } from '@videojs/core/i18n';\nimport { nearestLang, resolveLangAttr, subscribeAmbientLang } from '@videojs/utils/dom';\nimport { useSyncExternalStore } from 'react';\n\nfunction ambientLangServerSnapshot(): string | undefined {\n  return undefined;\n}\n\nexport function useAmbientLang(hasLangRoot: boolean, langRootElement: Element | null): Locale | undefined {\n  return useSyncExternalStore(\n    subscribeAmbientLang,\n    () => {\n      const root = hasLangRoot || typeof document === 'undefined' ? langRootElement : document.documentElement;\n      if (!root) return undefined;\n\n      return resolveLangAttr<Locale>(nearestLang(root));\n    },\n    ambientLangServerSnapshot\n  );\n}\n"],"mappings":";;;;AAIA,SAAS,4BAAgD,CAEzD;AAEA,SAAgB,eAAe,aAAsB,iBAAqD;;CAGtGA,IAAAA;CACe,IAAA,EAAA,OAAA,eAAA,EAAA,OAAiD,iBAAA;EADhE,WAAM;GACJ,MAAM,OAAO,eAAe,OAAO,aAAa,cAAc,kBAAkB,SAAS;GACzF,IAAI,CAAC,MAAM;GAEX,OAAO,gBAAwB,YAAY,IAAI,CAAC;EAClD;EAJe,EAAA,KAAA;EAAiD,EAAA,KAAA;;;CAHlE,OAAO,qBACL,sBACAA,IAMA,yBACF;AACF"}

package/dist/dev/i18n/use-lazy-translations.js

@@ -1,34 +1,65 @@
 import { findLocaleKeys, getBrowserTranslations, registerI18n, shouldAttemptBrowserTranslation } from "@videojs/core/i18n";
+import { c } from "react-compiler-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { mergeLocaleOverlays } from "@videojs/utils/dom";
 //#region src/i18n/use-lazy-translations.ts
 function useLazyTranslations(resolvedLocale, loader) {
-	const [lazyLayer, setLazyLayer] = useState({});
+	const $ = c(8);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {};
+		$[0] = t0;
+	} else t0 = $[0];
+	const [lazyLayer, setLazyLayer] = useState(t0);
 	const lazySeqRef = useRef(0);
-	useLayoutEffect(() => {
-		lazySeqRef.current += 1;
-		setLazyLayer({});
-	}, [resolvedLocale]);
-	useEffect(() => {
-		const seq = lazySeqRef.current;
-		const locale = resolvedLocale;
-		(async () => {
-			try {
-				const { merged, loadedTags } = await mergeLocaleOverlays(locale, loader, findLocaleKeys);
-				if (seq !== lazySeqRef.current) return;
-				if (shouldAttemptBrowserTranslation(locale, loadedTags, merged)) {
-					const browser = await getBrowserTranslations(locale);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			lazySeqRef.current = lazySeqRef.current + 1;
+			setLazyLayer({});
+		};
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== resolvedLocale) {
+		t2 = [resolvedLocale];
+		$[2] = resolvedLocale;
+		$[3] = t2;
+	} else t2 = $[3];
+	useLayoutEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[4] !== loader || $[5] !== resolvedLocale) {
+		t3 = () => {
+			const seq = lazySeqRef.current;
+			const locale = resolvedLocale;
+			(async () => {
+				try {
+					const { merged, loadedTags } = await mergeLocaleOverlays(locale, loader, findLocaleKeys);
+					if (seq !== lazySeqRef.current) return;
+					if (shouldAttemptBrowserTranslation(locale, loadedTags, merged)) {
+						const browser = await getBrowserTranslations(locale);
+						if (seq !== lazySeqRef.current) return;
+						if (Object.keys(browser).length) registerI18n(locale, browser);
+					}
 					if (seq !== lazySeqRef.current) return;
-					if (Object.keys(browser).length) registerI18n(locale, browser);
-				}
-				if (seq !== lazySeqRef.current) return;
-				setLazyLayer(merged);
-			} catch {}
-		})();
-		return () => {
-			if (lazySeqRef.current === seq) lazySeqRef.current += 1;
+					setLazyLayer(merged);
+				} catch {}
+			})();
+			return () => {
+				if (lazySeqRef.current === seq) lazySeqRef.current = lazySeqRef.current + 1;
+			};
 		};
-	}, [resolvedLocale, loader]);
+		t4 = [resolvedLocale, loader];
+		$[4] = loader;
+		$[5] = resolvedLocale;
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		t3 = $[6];
+		t4 = $[7];
+	}
+	useEffect(t3, t4);
 	return lazyLayer;
 }
 //#endregion