@videojs/react 10.0.0-beta.9 → 10.0.0-rc.2

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

@@ -0,0 +1,28 @@
+import { useMedia } from "../player/context.js";
+import { useDestroy } from "./use-destroy.js";
+import { HTMLMediaAdapter, addMediaExtension } from "@videojs/media/dom";
+import { useEffect, useState } from "react";
+//#region src/utils/use-media-extension.ts
+/**
+* Create a media extension and register it with the media provided by the surrounding player context.
+*
+* Instantiates the extension class once, registers it when a media adapter is available, follows the media when it
+* changes, and destroys the extension on unmount. Media that is not a media adapter (e.g. a plain `<video>` element)
+* cannot carry media extensions and is ignored.
+*
+* @param ExtensionClass - Media extension class to instantiate and register.
+*/
+function useMediaExtension(ExtensionClass) {
+	const media = useMedia();
+	const [component] = useState(() => new ExtensionClass());
+	useDestroy(component);
+	useEffect(() => {
+		if (!(media instanceof HTMLMediaAdapter)) return;
+		return addMediaExtension(media, component);
+	}, [media, component]);
+	return component;
+}
+//#endregion
+export { useMediaExtension };
+
+//# sourceMappingURL=use-media-extension.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-extension.js","names":[],"sources":["../../../src/utils/use-media-extension.ts"],"sourcesContent":["import { addMediaExtension, HTMLMediaAdapter, type HTMLMediaTargetLike, type MediaExtension } from '@videojs/media/dom';\nimport { useEffect, useState } from 'react';\n\nimport { useMedia } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create a media extension and register it with the media provided by the surrounding player context.\n *\n * Instantiates the extension class once, registers it when a media adapter is available, follows the media when it\n * changes, and destroys the extension on unmount. Media that is not a media adapter (e.g. a plain `<video>` element)\n * cannot carry media extensions and is ignored.\n *\n * @param ExtensionClass - Media extension class to instantiate and register.\n */\nexport function useMediaExtension<Component extends MediaExtension & { destroy(): void }>(\n  ExtensionClass: new () => Component\n): Component {\n  const media = useMedia();\n  const [component] = useState(() => new ExtensionClass());\n\n  useDestroy(component);\n\n  useEffect(() => {\n    if (!(media instanceof HTMLMediaAdapter)) return;\n\n    return addMediaExtension(media as HTMLMediaAdapter<HTMLMediaTargetLike, any>, component);\n  }, [media, component]);\n\n  return component;\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAgB,kBACd,gBACW;CACX,MAAM,QAAQ,SAAS;CACvB,MAAM,CAAC,aAAa,eAAe,IAAI,eAAe,CAAC;CAEvD,WAAW,SAAS;CAEpB,gBAAgB;EACd,IAAI,EAAE,iBAAiB,mBAAmB;EAE1C,OAAO,kBAAkB,OAAqD,SAAS;CACzF,GAAG,CAAC,OAAO,SAAS,CAAC;CAErB,OAAO;AACT"}

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

@@ -0,0 +1,30 @@
+import { useMediaAttach } from "../player/context.js";
+import { useDestroy } from "./use-destroy.js";
+import { useState } from "react";
+//#region src/utils/use-media-instance.ts
+/**
+* Create and manage a media instance lifecycle within a player context.
+*
+* Instantiates the media class once, attaches it to the player on mount, and safely detaches on unmount using a
+* functional updater to avoid race conditions when swapping media components (e.g. DashVideo → HlsJsVideo).
+*
+* An optional `setup` callback runs once on mount — e.g. to add media components via `addMediaExtension`. Components
+* registered there are destroyed together with the media instance on unmount (`media.destroy()` destroys all of its
+* registered components).
+*
+* @param MediaClass - Media class to instantiate and attach to the current player.
+* @param setup - Optional callback run once before the instance is attached.
+*/
+function useMediaInstance(MediaClass, setup) {
+	const [instance] = useState(() => new MediaClass());
+	const setMedia = useMediaAttach();
+	useDestroy(instance, () => {
+		setup?.(instance);
+		setMedia?.(instance);
+	}, () => setMedia?.((prev) => prev === instance ? null : prev));
+	return instance;
+}
+//#endregion
+export { useMediaInstance };
+
+//# sourceMappingURL=use-media-instance.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-instance.js","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"sourcesContent":["import type { Media } from '@videojs/media';\nimport { useState } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create and manage a media instance lifecycle within a player context.\n *\n * Instantiates the media class once, attaches it to the player on mount, and safely detaches on unmount using a\n * functional updater to avoid race conditions when swapping media components (e.g. DashVideo → HlsJsVideo).\n *\n * An optional `setup` callback runs once on mount — e.g. to add media components via `addMediaExtension`. Components\n * registered there are destroyed together with the media instance on unmount (`media.destroy()` destroys all of its\n * registered components).\n *\n * @param MediaClass - Media class to instantiate and attach to the current player.\n * @param setup - Optional callback run once before the instance is attached.\n */\nexport function useMediaInstance<Instance extends Media & { destroy(): void }>(\n  MediaClass: new () => Instance,\n  setup?: (media: Instance) => void\n): Instance {\n  const [instance] = useState(() => new MediaClass());\n  const setMedia = useMediaAttach();\n\n  useDestroy(\n    instance,\n    () => {\n      setup?.(instance);\n      setMedia?.(instance);\n    },\n    () => setMedia?.((prev) => (prev === instance ? null : prev))\n  );\n\n  return instance;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,SAAgB,iBACd,YACA,OACU;CACV,MAAM,CAAC,YAAY,eAAe,IAAI,WAAW,CAAC;CAClD,MAAM,WAAW,eAAe;CAEhC,WACE,gBACM;EACJ,QAAQ,QAAQ;EAChB,WAAW,QAAQ;CACrB,SACM,YAAY,SAAU,SAAS,WAAW,OAAO,IAAK,CAC9D;CAEA,OAAO;AACT"}

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

@@ -1,19 +1,10 @@
-'use client';
-
 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 { resolveClassName } from "@videojs/utils/style";
 //#region src/utils/use-render.tsx
-/** Check if a value is a render prop (function or React element). */
-function isRenderProp(value) {
-	return isFunction(value) || isValidElement(value);
-}
-function resolveClassName(className, state) {
-	return isFunction(className) ? className(state) : className;
-}
 function resolveStyle(style, state) {
 	return isFunction(style) ? style(state) : style;
 }
@@ -21,39 +12,43 @@ function getElementRef(element) {
 	const elementAny = element;
 	return elementAny.ref ?? elementAny.props?.ref;
 }
+function mergeRefs(...refs) {
+	const flatRefs = refs.flat().filter((ref) => ref !== null && ref !== void 0);
+	if (flatRefs.length === 0) return void 0;
+	if (flatRefs.length === 1) return flatRefs[0];
+	return composeRefs(...flatRefs);
+}
 /**
 * Render a UI component element.
 *
-* Handles:
-* - Default tag rendering
-* - Render prop (element or function)
-* - Props merging (event handlers chained, className concatenated, style merged)
-* - Ref composition
-* - className/style as functions of state
+* Handles: - Default tag rendering - Render prop (element or function) - Props merging (event handlers chained,
+* className concatenated, style merged) - Ref composition - className/style as functions of state
 *
-* @public
 * @example
-* ```tsx
-* return renderElement('button', componentProps, {
-*   state,
-*   ref: [forwardedRef, buttonRef],
-*   props: [{ type: 'button' }, elementProps, getButtonProps],
-* });
-* ```
+*   ```tsx
+*   return renderElement('button', componentProps, {
+*     state,
+*     ref: [forwardedRef, buttonRef],
+*     props: [{ type: 'button' }, elementProps, getButtonProps],
+*   });
+*   ```;
+*
+* @public
 */
 function renderElement(element, componentProps, params) {
 	const { className: classNameProp, style: styleProp, render } = componentProps;
 	const { state, ref, props, stateAttrMap } = params;
 	const className = resolveClassName(classNameProp, state);
 	const style = resolveStyle(styleProp, state);
-	const mergedProps = mergeProps(getStateDataAttrs(state, stateAttrMap), ...Array.isArray(props) ? props : props ? [props] : []);
+	const stateDataAttrs = stateAttrMap ? getStateDataAttrs(state, stateAttrMap) : {};
+	const mergedProps = mergeProps(stateDataAttrs, ...Array.isArray(props) ? props : props ? [props] : []);
 	if (className !== void 0) mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;
 	if (style !== void 0) mergedProps.style = mergedProps.style ? {
 		...mergedProps.style,
 		...style
 	} : style;
 	if (isFunction(render)) {
-		const mergedRef = composeRefs(ref, mergedProps.ref);
+		const mergedRef = mergeRefs(ref, mergedProps.ref);
 		return render({
 			...mergedProps,
 			ref: mergedRef
@@ -61,15 +56,15 @@ function renderElement(element, componentProps, params) {
 	}
 	if (isValidElement(render)) {
 		const elementRef = getElementRef(render);
-		const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);
+		const mergedRef = mergeRefs(ref, mergedProps.ref, elementRef);
 		const elementProps = mergeProps(mergedProps, render.props);
 		elementProps.ref = mergedRef;
 		return cloneElement(render, elementProps);
 	}
-	mergedProps.ref = composeRefs(ref, mergedProps.ref);
+	mergedProps.ref = mergeRefs(ref, mergedProps.ref);
 	return createElement(element, mergedProps);
 }
-
 //#endregion
-export { isRenderProp, renderElement };
+export { renderElement };
+
 //# sourceMappingURL=use-render.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["'use client';\n\nimport { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\n/** Check if a value is a render prop (function or React element). */\nexport function isRenderProp(value: unknown): value is RenderProp<any> {\n  return isFunction(value) || isValidElement(value);\n}\n\ntype IntrinsicTagName = keyof React.JSX.IntrinsicElements;\n\nexport interface UseRenderComponentProps<State> {\n  className?: string | ((state: State) => string | undefined) | undefined;\n  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;\n  render?: RenderProp<State> | undefined;\n}\n\nexport interface UseRenderParameters<State, RenderedElementType extends Element> {\n  state: State;\n  ref?: Ref<RenderedElementType> | Ref<RenderedElementType>[] | undefined;\n  props?: object | object[] | undefined;\n  stateAttrMap?: StateAttrMap<State> | undefined;\n}\n\nfunction resolveClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  state: State\n): string | undefined {\n  return isFunction(className) ? className(state) : className;\n}\n\nfunction resolveStyle<State>(\n  style: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined,\n  state: State\n): CSSProperties | undefined {\n  return isFunction(style) ? style(state) : style;\n}\n\nfunction getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19+ uses element.props.ref, older versions use element.ref\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const elementAny = element as any;\n  return elementAny.ref ?? elementAny.props?.ref;\n}\n\n/**\n * Render a UI component element.\n *\n * Handles:\n * - Default tag rendering\n * - Render prop (element or function)\n * - Props merging (event handlers chained, className concatenated, style merged)\n * - Ref composition\n * - className/style as functions of state\n *\n * @public\n * @example\n * ```tsx\n * return renderElement('button', componentProps, {\n *   state,\n *   ref: [forwardedRef, buttonRef],\n *   props: [{ type: 'button' }, elementProps, getButtonProps],\n * });\n * ```\n */\nexport function renderElement<\n  State extends object,\n  RenderedElementType extends Element,\n  TagName extends IntrinsicTagName,\n>(\n  element: TagName,\n  componentProps: UseRenderComponentProps<State>,\n  params: UseRenderParameters<State, RenderedElementType>\n): ReactElement | null {\n  const { className: classNameProp, style: styleProp, render } = componentProps;\n  const { state, ref, props, stateAttrMap } = params;\n\n  // Resolve className and style if they're functions\n  const className = resolveClassName(classNameProp, state);\n  const style = resolveStyle(styleProp, state);\n\n  // Generate data attributes from state\n  const stateDataAttrs = getStateDataAttrs(state, stateAttrMap);\n\n  // Merge: state data attrs first, then props (so props can override)\n  const propsArray = Array.isArray(props) ? props : props ? [props] : [];\n  const mergedProps = mergeProps(stateDataAttrs, ...(propsArray as Record<string, unknown>[]));\n\n  if (className !== undefined) {\n    // Add resolved className and style\n    mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;\n  }\n\n  if (style !== undefined) {\n    mergedProps.style = mergedProps.style ? { ...(mergedProps.style as CSSProperties), ...style } : style;\n  }\n\n  if (isFunction(render)) {\n    // Render function: call with props and state\n    const mergedRef = composeRefs(ref, mergedProps.ref);\n    return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n  }\n\n  if (isValidElement(render)) {\n    const elementRef = getElementRef(render);\n\n    const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);\n\n    const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n    elementProps.ref = mergedRef;\n\n    return cloneElement(render, elementProps);\n  }\n\n  // Default tag\n  const mergedRef = composeRefs(ref, mergedProps.ref);\n  mergedProps.ref = mergedRef;\n\n  return createElement(element, mergedProps);\n}\n\nexport namespace renderElement {\n  export type ComponentProps<State> = UseRenderComponentProps<State>;\n  export type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,aAAa,OAA0C;AACrE,QAAO,WAAW,MAAM,IAAI,eAAe,MAAM;;AAkBnD,SAAS,iBACP,WACA,OACoB;AACpB,QAAO,WAAW,UAAU,GAAG,UAAU,MAAM,GAAG;;AAGpD,SAAS,aACP,OACA,OAC2B;AAC3B,QAAO,WAAW,MAAM,GAAG,MAAM,MAAM,GAAG;;AAG5C,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;AACnB,QAAO,WAAW,OAAO,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;AAuB7C,SAAgB,cAKd,SACA,gBACA,QACqB;CACrB,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,WAAW;CAC/D,MAAM,EAAE,OAAO,KAAK,OAAO,iBAAiB;CAG5C,MAAM,YAAY,iBAAiB,eAAe,MAAM;CACxD,MAAM,QAAQ,aAAa,WAAW,MAAM;CAO5C,MAAM,cAAc,WAJG,kBAAkB,OAAO,aAAa,EAId,GAD5B,MAAM,QAAQ,MAAM,GAAG,QAAQ,QAAQ,CAAC,MAAM,GAAG,EAAE,CACsB;AAE5F,KAAI,cAAc,OAEhB,aAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;AAG5F,KAAI,UAAU,OACZ,aAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;EAAO,GAAG;AAGlG,KAAI,WAAW,OAAO,EAAE;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,IAAI;AACnD,SAAO,OAAO;GAAE,GAAG;GAAa,KAAK;GAAW,EAAe,MAAM;;AAGvE,KAAI,eAAe,OAAO,EAAE;EAC1B,MAAM,aAAa,cAAc,OAAO;EAExC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,WAAW;EAE/D,MAAM,eAAe,WAAW,aAAa,OAAO,MAAiC;AACrF,eAAa,MAAM;AAEnB,SAAO,aAAa,QAAQ,aAAa;;AAK3C,aAAY,MADM,YAAY,KAAK,YAAY,IAAI;AAGnD,QAAO,cAAc,SAAS,YAAY"}
+{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["import { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport { resolveClassName } from '@videojs/utils/style';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\n\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\n/** Check if a value is a render prop (function or React element). */\nexport function isRenderProp(value: unknown): value is RenderProp<unknown> {\n  return isFunction(value) || isValidElement(value);\n}\n\ntype IntrinsicTagName = keyof React.JSX.IntrinsicElements;\n\nexport interface UseRenderComponentProps<State> {\n  className?: string | ((state: State) => string | undefined) | undefined;\n  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;\n  render?: RenderProp<State> | undefined;\n}\n\nexport interface UseRenderParameters<State, RenderedElementType extends Element> {\n  state: State;\n  ref?: Ref<RenderedElementType> | Ref<RenderedElementType>[] | undefined;\n  props?: object | object[] | undefined;\n  stateAttrMap?: StateAttrMap<State> | undefined;\n}\n\nfunction resolveStyle<State>(\n  style: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined,\n  state: State\n): CSSProperties | undefined {\n  return isFunction(style) ? style(state) : style;\n}\n\nfunction getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19+ uses element.props.ref, older versions use element.ref\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const elementAny = element as any;\n\n  return elementAny.ref ?? elementAny.props?.ref;\n}\n\nfunction mergeRefs<T>(...refs: (Ref<T> | Ref<T>[] | undefined)[]): Ref<T> | undefined {\n  const flatRefs = refs.flat().filter((ref): ref is Ref<T> => ref !== null && ref !== undefined);\n  if (flatRefs.length === 0) return undefined;\n\n  if (flatRefs.length === 1) return flatRefs[0];\n\n  return composeRefs(...flatRefs);\n}\n\n/**\n * Render a UI component element.\n *\n * Handles: - Default tag rendering - Render prop (element or function) - Props merging (event handlers chained,\n * className concatenated, style merged) - Ref composition - className/style as functions of state\n *\n * @example\n *   ```tsx\n *   return renderElement('button', componentProps, {\n *     state,\n *     ref: [forwardedRef, buttonRef],\n *     props: [{ type: 'button' }, elementProps, getButtonProps],\n *   });\n *   ```;\n *\n * @public\n */\nexport function renderElement<\n  State extends object,\n  RenderedElementType extends Element,\n  TagName extends IntrinsicTagName,\n>(\n  element: TagName,\n  componentProps: UseRenderComponentProps<State>,\n  params: UseRenderParameters<State, RenderedElementType>\n): ReactElement | null {\n  const { className: classNameProp, style: styleProp, render } = componentProps;\n  const { state, ref, props, stateAttrMap } = params;\n\n  // Resolve className and style if they're functions\n  const className = resolveClassName(classNameProp, state);\n  const style = resolveStyle(styleProp, state);\n\n  // Generate data attributes only when a component explicitly opts in with a\n  // mapping. State is still passed to render/className/style callbacks.\n  const stateDataAttrs = stateAttrMap ? getStateDataAttrs(state, stateAttrMap) : {};\n\n  // Merge: state data attrs first, then props (so props can override)\n  const propsArray = Array.isArray(props) ? props : props ? [props] : [];\n  const mergedProps = mergeProps(stateDataAttrs, ...(propsArray as Record<string, unknown>[]));\n\n  if (className !== undefined) {\n    // Add resolved className and style\n    mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;\n  }\n\n  if (style !== undefined) {\n    mergedProps.style = mergedProps.style ? { ...(mergedProps.style as CSSProperties), ...style } : style;\n  }\n\n  if (isFunction(render)) {\n    // Render function: call with props and state\n    const mergedRef = mergeRefs(ref, mergedProps.ref);\n\n    return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n  }\n\n  if (isValidElement(render)) {\n    const elementRef = getElementRef(render);\n\n    const mergedRef = mergeRefs(ref, mergedProps.ref, elementRef);\n\n    const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n\n    elementProps.ref = mergedRef;\n\n    return cloneElement(render, elementProps);\n  }\n\n  // Default tag\n  const mergedRef = mergeRefs(ref, mergedProps.ref);\n\n  mergedProps.ref = mergedRef;\n\n  return createElement(element, mergedProps);\n}\n\nexport namespace renderElement {\n  export type ComponentProps<State> = UseRenderComponentProps<State>;\n  export type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;\n}\n"],"mappings":";;;;;;;AA8BA,SAAS,aACP,OACA,OAC2B;CAC3B,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;AAC5C;AAEA,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;CAEnB,OAAO,WAAW,OAAO,WAAW,OAAO;AAC7C;AAEA,SAAS,UAAa,GAAG,MAA6D;CACpF,MAAM,WAAW,KAAK,KAAK,CAAC,CAAC,QAAQ,QAAuB,QAAQ,QAAQ,QAAQ,KAAA,CAAS;CAC7F,IAAI,SAAS,WAAW,GAAG,OAAO,KAAA;CAElC,IAAI,SAAS,WAAW,GAAG,OAAO,SAAS;CAE3C,OAAO,YAAY,GAAG,QAAQ;AAChC;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,cAKd,SACA,gBACA,QACqB;CACrB,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,WAAW;CAC/D,MAAM,EAAE,OAAO,KAAK,OAAO,iBAAiB;CAG5C,MAAM,YAAY,iBAAiB,eAAe,KAAK;CACvD,MAAM,QAAQ,aAAa,WAAW,KAAK;CAI3C,MAAM,iBAAiB,eAAe,kBAAkB,OAAO,YAAY,IAAI,CAAC;CAIhF,MAAM,cAAc,WAAW,gBAAgB,GAD5B,MAAM,QAAQ,KAAK,IAAI,QAAQ,QAAQ,CAAC,KAAK,IAAI,CAAC,CACsB;CAE3F,IAAI,cAAc,KAAA,GAEhB,YAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;CAG5F,IAAI,UAAU,KAAA,GACZ,YAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;CAAM,IAAI;CAGlG,IAAI,WAAW,MAAM,GAAG;EAEtB,MAAM,YAAY,UAAU,KAAK,YAAY,GAAG;EAEhD,OAAO,OAAO;GAAE,GAAG;GAAa,KAAK;EAAU,GAAgB,KAAK;CACtE;CAEA,IAAI,eAAe,MAAM,GAAG;EAC1B,MAAM,aAAa,cAAc,MAAM;EAEvC,MAAM,YAAY,UAAU,KAAK,YAAY,KAAK,UAAU;EAE5D,MAAM,eAAe,WAAW,aAAa,OAAO,KAAgC;EAEpF,aAAa,MAAM;EAEnB,OAAO,aAAa,QAAQ,YAAY;CAC1C;CAKA,YAAY,MAFM,UAAU,KAAK,YAAY,GAEnB;CAE1B,OAAO,cAAc,SAAS,WAAW;AAC3C"}

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

@@ -1,22 +1,18 @@
-'use client';
-
 import { useId } from "react";
-
 //#region src/utils/use-safe-id.ts
 const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;
 /**
 * Generate a CSS-safe identifier from React's `useId()`.
 *
-* `useId()` returns values like `:r0:` which contain colons — invalid
-* in CSS `<dashed-ident>` tokens (used by `anchor-name` / `position-anchor`).
-* This hook strips non-alphanumeric/underscore/hyphen characters and
-* optionally prepends a prefix.
+* `useId()` returns values like `:r0:` which contain colons — invalid in CSS `<dashed-ident>` tokens (used by
+* `anchor-name` / `position-anchor`). This hook strips non-alphanumeric/underscore/hyphen characters and optionally
+* prepends a prefix.
 */
 function useSafeId(prefix) {
 	const raw = useId().replace(UNSAFE_CHARS, "");
-	return prefix ? `${prefix}${raw}` : raw;
+	return prefix ? `${prefix}-${raw}` : raw;
 }
-
 //#endregion
 export { useSafeId };
+
 //# sourceMappingURL=use-safe-id.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-safe-id.js","names":[],"sources":["../../../src/utils/use-safe-id.ts"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nconst UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;\n\n/**\n * Generate a CSS-safe identifier from React's `useId()`.\n *\n * `useId()` returns values like `:r0:` which contain colons — invalid\n * in CSS `<dashed-ident>` tokens (used by `anchor-name` / `position-anchor`).\n * This hook strips non-alphanumeric/underscore/hyphen characters and\n * optionally prepends a prefix.\n */\nexport function useSafeId(prefix?: string): string {\n  const raw = useId().replace(UNSAFE_CHARS, '');\n  return prefix ? `${prefix}${raw}` : raw;\n}\n"],"mappings":";;;;;AAIA,MAAM,eAAe;;;;;;;;;AAUrB,SAAgB,UAAU,QAAyB;CACjD,MAAM,MAAM,OAAO,CAAC,QAAQ,cAAc,GAAG;AAC7C,QAAO,SAAS,GAAG,SAAS,QAAQ"}
+{"version":3,"file":"use-safe-id.js","names":[],"sources":["../../../src/utils/use-safe-id.ts"],"sourcesContent":["import { useId } from 'react';\n\nconst UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;\n\n/**\n * Generate a CSS-safe identifier from React's `useId()`.\n *\n * `useId()` returns values like `:r0:` which contain colons — invalid in CSS `<dashed-ident>` tokens (used by\n * `anchor-name` / `position-anchor`). This hook strips non-alphanumeric/underscore/hyphen characters and optionally\n * prepends a prefix.\n */\nexport function useSafeId(prefix?: string): string {\n  const raw = useId().replace(UNSAFE_CHARS, '');\n\n  return prefix ? `${prefix}-${raw}` : raw;\n}\n"],"mappings":";;AAEA,MAAM,eAAe;;;;;;;;AASrB,SAAgB,UAAU,QAAyB;CACjD,MAAM,MAAM,MAAM,CAAC,CAAC,QAAQ,cAAc,EAAE;CAE5C,OAAO,SAAS,GAAG,OAAO,GAAG,QAAQ;AACvC"}

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

@@ -0,0 +1,23 @@
+import { useRef } from "react";
+import { isUndefined } from "@videojs/utils/predicate";
+//#region src/utils/use-sync-props.ts
+function useSyncProps(target, props, defaults) {
+	const rest = {};
+	const synced = /* @__PURE__ */ new Set();
+	const prevSyncedRef = useRef(null);
+	const sync = (key, value) => {
+		if (target[key] !== value) target[key] = value;
+	};
+	for (const key of prevSyncedRef.current ?? []) if (isUndefined(props[key])) sync(key, defaults[key]);
+	for (const key in props) if (key in defaults) {
+		if (isUndefined(props[key])) continue;
+		synced.add(key);
+		sync(key, props[key]);
+	} else rest[key] = props[key];
+	prevSyncedRef.current = synced;
+	return rest;
+}
+//#endregion
+export { useSyncProps };
+
+//# sourceMappingURL=use-sync-props.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-props.js","names":[],"sources":["../../../src/utils/use-sync-props.ts"],"sourcesContent":["import { isUndefined } from '@videojs/utils/predicate';\nimport { useRef } from 'react';\n\nexport function useSyncProps<Props extends object, Rest extends Record<string, unknown>>(\n  target: Props,\n  props: Partial<Props> & Rest,\n  defaults: Props\n): Omit<Rest, keyof Props> {\n  const rest: Record<string, unknown> = {};\n  const synced = new Set<string>();\n  const prevSyncedRef = useRef<Set<string> | null>(null);\n\n  const sync = (key: string, value: unknown) => {\n    if (target[key as keyof Props] !== value) target[key as keyof Props] = value as Props[keyof Props];\n  };\n\n  // Reset props the consumer stopped passing (or passed as `undefined`) back to\n  // their defaults before applying the current ones, so a reset can never wipe a\n  // value another prop derives in the same render (e.g. `source` deriving `src`).\n  // Mirrors react-dom removing absent attributes.\n  for (const key of prevSyncedRef.current ?? []) {\n    if (isUndefined((props as Record<string, unknown>)[key])) sync(key, (defaults as Record<string, unknown>)[key]);\n  }\n\n  for (const key in props) {\n    if (key in defaults) {\n      if (isUndefined(props[key])) continue;\n\n      synced.add(key);\n      sync(key, props[key]);\n    } else {\n      rest[key] = props[key];\n    }\n  }\n\n  prevSyncedRef.current = synced;\n\n  return rest as Omit<Rest, keyof Props>;\n}\n"],"mappings":";;;AAGA,SAAgB,aACd,QACA,OACA,UACyB;CACzB,MAAM,OAAgC,CAAC;CACvC,MAAM,yBAAS,IAAI,IAAY;CAC/B,MAAM,gBAAgB,OAA2B,IAAI;CAErD,MAAM,QAAQ,KAAa,UAAmB;EAC5C,IAAI,OAAO,SAAwB,OAAO,OAAO,OAAsB;CACzE;CAMA,KAAK,MAAM,OAAO,cAAc,WAAW,CAAC,GAC1C,IAAI,YAAa,MAAkC,IAAI,GAAG,KAAK,KAAM,SAAqC,IAAI;CAGhH,KAAK,MAAM,OAAO,OAChB,IAAI,OAAO,UAAU;EACnB,IAAI,YAAY,MAAM,IAAI,GAAG;EAE7B,OAAO,IAAI,GAAG;EACd,KAAK,KAAK,MAAM,IAAI;CACtB,OACE,KAAK,OAAO,MAAM;CAItB,cAAc,UAAU;CAExB,OAAO;AACT"}

package/dist/dev/_virtual/_rolldown/runtime.js

@@ -1,18 +1,27 @@
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __exportAll = (all, no_symbols) => {
 	let target = {};
-	for (var name in all) {
-		__defProp(target, name, {
-			get: all[name],
-			enumerable: true
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
 		});
 	}
-	if (!no_symbols) {
-		__defProp(target, Symbol.toStringTag, { value: "Module" });
-	}
-	return target;
+	return to;
 };
-
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 //#endregion
-export { __exportAll };
+export { __exportAll, __reExport };

package/dist/dev/constants.d.ts

@@ -0,0 +1,2 @@
+import { DEFAULT_SEEK_STEP } from "@videojs/core";
+export { DEFAULT_SEEK_STEP };

package/dist/dev/constants.js

@@ -0,0 +1,2 @@
+import { DEFAULT_SEEK_STEP } from "@videojs/core";
+export { DEFAULT_SEEK_STEP };

package/dist/dev/extensions/google-cast/extension.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { GoogleCastExtensionProps } from "@videojs/google-cast";
+//#region src/extensions/google-cast/extension.d.ts
+type GoogleCastProps = Partial<GoogleCastExtensionProps>;
+/**
+ * Adds the Google Cast extension to the surrounding player's media.
+ *
+ * Renders nothing — place it inside the Player as a sibling of the media component (e.g. `<HlsJsVideo />`) and it
+ * follows the active media.
+ *
+ * @example
+ *   ```tsx
+ *   <Player>
+ *     <HlsJsVideo src="https://example.com/stream.m3u8" />
+ *     <GoogleCast receiver="YOUR_APP_ID" />
+ *   </Player>;
+ *   ```;
+ */
+declare function GoogleCast(props: GoogleCastProps): ReactNode;
+declare namespace GoogleCast {
+  type Props = GoogleCastProps;
+}
+//#endregion
+export { GoogleCast, GoogleCastProps };
+//# sourceMappingURL=extension.d.ts.map

package/dist/dev/extensions/google-cast/extension.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extension.d.ts","names":[],"sources":["../../../../src/extensions/google-cast/extension.tsx"],"mappings":";;;KAQY,kBAAkB,QAAQ;;;;;;;;;;;;;;;iBAgBtB,WAAW,OAAO,kBAAkB;kBAQnC;OACH,QAAQ"}

package/dist/dev/extensions/google-cast/extension.js

@@ -0,0 +1,28 @@
+"use client";
+import { useMediaExtension } from "../../utils/use-media-extension.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { GoogleCastExtension } from "@videojs/google-cast";
+//#region src/extensions/google-cast/extension.tsx
+/**
+* Adds the Google Cast extension to the surrounding player's media.
+*
+* Renders nothing — place it inside the Player as a sibling of the media component (e.g. `<HlsJsVideo />`) and it
+* follows the active media.
+*
+* @example
+*   ```tsx
+*   <Player>
+*     <HlsJsVideo src="https://example.com/stream.m3u8" />
+*     <GoogleCast receiver="YOUR_APP_ID" />
+*   </Player>;
+*   ```;
+*/
+function GoogleCast(props) {
+	const component = useMediaExtension(GoogleCastExtension);
+	useSyncProps(component, props, GoogleCastExtension.defaultProps);
+	return null;
+}
+//#endregion
+export { GoogleCast };
+
+//# sourceMappingURL=extension.js.map

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

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

package/dist/dev/extensions/google-cast/index.d.ts

@@ -0,0 +1,2 @@
+import { GoogleCast, GoogleCastProps } from "./extension.js";
+export { GoogleCast, GoogleCastProps };

package/dist/dev/extensions/google-cast/index.js

@@ -0,0 +1,2 @@
+import { GoogleCast } from "./extension.js";
+export { GoogleCast };

package/dist/dev/extensions/mux-data/extension.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+import { MuxDataExtensionProps } from "@videojs/mux-data";
+//#region src/extensions/mux-data/extension.d.ts
+type MuxDataProps = Partial<MuxDataExtensionProps>;
+/**
+ * Adds the [Mux Data](https://www.mux.com/data) extension to the surrounding player's media.
+ *
+ * Renders nothing — place it inside the Player as a sibling of the media component (e.g. `<MuxVideo />`) and it follows
+ * the active media.
+ *
+ * Mux-hosted playback needs no `envKey`: the view reports the Mux playback ID as its `video_id`, which Mux attributes
+ * to the owning environment. Set `envKey` to monitor sources Mux doesn't host.
+ *
+ * Any media component works. When the media plays through an hls.js or dash.js engine, that engine is handed to the Mux
+ * Data SDK so the view also carries stream-level detail such as rendition switches and request timing.
+ *
+ * @example
+ *   ```tsx
+ *   <Player>
+ *     <MuxVideo source={{ playbackId: 'abc123' }} />
+ *     <MuxData playerSoftwareName="mux-video" />
+ *   </Player>;
+ *   ```;
+ */
+declare function MuxData(props: MuxDataProps): ReactNode;
+declare namespace MuxData {
+  type Props = MuxDataProps;
+}
+//#endregion
+export { MuxData, MuxDataProps };
+//# sourceMappingURL=extension.d.ts.map

package/dist/dev/extensions/mux-data/extension.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extension.d.ts","names":[],"sources":["../../../../src/extensions/mux-data/extension.tsx"],"mappings":";;;KAQY,eAAe,QAAQ;;;;;;;;;;;;;;;;;;;;;iBAsBnB,QAAQ,OAAO,eAAe;kBAiB7B;OACH,QAAQ"}

package/dist/dev/extensions/mux-data/extension.js

@@ -0,0 +1,37 @@
+"use client";
+import { useMediaExtension } from "../../utils/use-media-extension.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { MuxDataExtension } from "@videojs/mux-data";
+//#region src/extensions/mux-data/extension.tsx
+/**
+* Adds the [Mux Data](https://www.mux.com/data) extension to the surrounding player's media.
+*
+* Renders nothing — place it inside the Player as a sibling of the media component (e.g. `<MuxVideo />`) and it follows
+* the active media.
+*
+* Mux-hosted playback needs no `envKey`: the view reports the Mux playback ID as its `video_id`, which Mux attributes
+* to the owning environment. Set `envKey` to monitor sources Mux doesn't host.
+*
+* Any media component works. When the media plays through an hls.js or dash.js engine, that engine is handed to the Mux
+* Data SDK so the view also carries stream-level detail such as rendition switches and request timing.
+*
+* @example
+*   ```tsx
+*   <Player>
+*     <MuxVideo source={{ playbackId: 'abc123' }} />
+*     <MuxData playerSoftwareName="mux-video" />
+*   </Player>;
+*   ```;
+*/
+function MuxData(props) {
+	const component = useMediaExtension(MuxDataExtension);
+	const { MuxDataSdk, ...rest } = props;
+	const sdk = "MuxDataSdk" in props ? MuxDataSdk : MuxDataExtension.defaultProps.MuxDataSdk;
+	if (component.MuxDataSdk !== sdk) component.MuxDataSdk = sdk;
+	useSyncProps(component, rest, MuxDataExtension.defaultProps);
+	return null;
+}
+//#endregion
+export { MuxData };
+
+//# sourceMappingURL=extension.js.map

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

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

package/dist/dev/extensions/mux-data/index.d.ts

@@ -0,0 +1,2 @@
+import { MuxData, MuxDataProps } from "./extension.js";
+export { MuxData, MuxDataProps };

package/dist/dev/extensions/mux-data/index.js

@@ -0,0 +1,2 @@
+import { MuxData } from "./extension.js";
+export { MuxData };

package/dist/dev/i18n/context.d.ts

@@ -0,0 +1,31 @@
+import { Locale, Translations, Translator } from "@videojs/core/i18n";
+//#region src/i18n/context.d.ts
+interface I18nContextValue {
+  translator: Translator;
+  locale: Locale;
+  /** True when the locale resolves from an explicit provider prop. */
+  localeFromProp: boolean;
+  /** @internal True when the nearest provider received an explicit locale prop. */
+  localeFromOwnProp?: boolean;
+  /** Overrides passed to this provider. */
+  translations?: Partial<Translations>;
+  /** Callback inherited by nested locale roots. */
+  onActiveLocaleChange?: (locale: Locale) => void;
+}
+/** React context carrying the active translator and locale. @public */
+declare const I18nContext: import("react").Context<I18nContextValue | null>;
+/**
+ * Returns the translator for the nearest `I18nProvider`, or English defaults when none is mounted.
+ *
+ * @public
+ */
+declare function useTranslator(): Translator;
+/**
+ * Returns the active BCP 47 locale tag from the nearest `I18nProvider`, or `'en'` when none is mounted.
+ *
+ * @public
+ */
+declare function useLocale(): Locale;
+//#endregion
+export { I18nContext, I18nContextValue, useLocale, useTranslator };
+//# sourceMappingURL=context.d.ts.map

package/dist/dev/i18n/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/i18n/context.tsx"],"mappings":";;UAaiB;EACf,YAAY;EACZ,QAAQ;;EAER;;EAEA;;EAEA,eAAe,QAAQ;;EAEvB,wBAAwB,QAAQ;;;cAIrB,6BAAW,QAAA;;;;;;iBASR,iBAAiB;;;;;;iBAyBjB,aAAa"}

package/dist/dev/i18n/context.js

@@ -0,0 +1,35 @@
+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/dev/i18n/context.js.map

@@ -0,0 +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"}

package/dist/dev/i18n/create-i18n.d.ts

@@ -0,0 +1,60 @@
+import { I18nContextValue, useLocale, useTranslator } from "./context.js";
+import { FlatTranslations, Locale, Translations } from "@videojs/core/i18n";
+import { Context, ReactNode, RefObject } from "react";
+//#region src/i18n/create-i18n.d.ts
+interface CreateI18nOptions {
+  /** Override lazy loading of shipped locale packs (tests or custom loaders). */
+  loader?: (tag: string) => Promise<Partial<FlatTranslations> | undefined>;
+}
+interface I18nProviderProps {
+  /**
+   * Forces the active locale. Omit to inherit the nearest non-empty `lang` by walking DOM ancestors from
+   * {@link langRootRef} when set, otherwise from `document.documentElement` (typically `<html lang>`). Updates when any
+   * `lang` attribute changes anywhere under `<html>`, or when subtree moves alter which ancestor supplies `lang`. For
+   * SSR, pass `locale` explicitly.
+   */
+  locale?: Locale;
+  /**
+   * Element whose ancestor chain is searched for a non-empty `lang` when {@link locale} is omitted—for example a ref to
+   * your player shell `HTMLElement`.
+   */
+  langRootRef?: RefObject<Element | null>;
+  /**
+   * Per-locale string overrides merged on top of the global registry and any lazy built-in packs for {@link locale}.
+   * Applies to translated `aria-label` values and tooltip copy for skin controls wired through `useTranslator`.
+   *
+   * @example
+   *   ```tsx
+   *   <I18nProvider locale="ja" translations={{ buttons: { play: '再生', pause: '一時停止' } }}>
+   *     <VideoSkin />
+   *   </I18nProvider>;
+   *   ```;
+   */
+  translations?: Partial<Translations>;
+  children: ReactNode;
+  /** Fires when the resolved locale changes (caption selection hooks may use this later). */
+  onActiveLocaleChange?: (locale: Locale) => void;
+}
+interface CreateI18nResult {
+  I18nContext: Context<I18nContextValue | null>;
+  I18nProvider: (props: I18nProviderProps) => ReactNode;
+  useTranslator: typeof useTranslator;
+  useLocale: typeof useLocale;
+}
+/**
+ * Creates an i18n provider and hooks for the shared React i18n context.
+ *
+ * @param options - Optional hooks such as custom built-in locale loading.
+ * @public
+ */
+declare function createI18n(options?: CreateI18nOptions): CreateI18nResult;
+/**
+ * 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
+ */
+declare const I18nProvider: (props: I18nProviderProps) => ReactNode;
+//#endregion
+export { CreateI18nOptions, CreateI18nResult, type I18nContextValue, I18nProvider, I18nProviderProps, createI18n };
+//# sourceMappingURL=create-i18n.d.ts.map

package/dist/dev/i18n/create-i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-i18n.d.ts","names":[],"sources":["../../../src/i18n/create-i18n.tsx"],"mappings":";;;;UAkBiB;;EAEf,UAAU,gBAAgB,QAAQ,QAAQ;;UAG3B;;;;;;;EAOf,SAAS;;;;;EAKT,cAAc,UAAU;;;;;;;;;;;;EAYxB,eAAe,QAAQ;EACvB,UAAU;;EAEV,wBAAwB,QAAQ;;UAKjB;EACf,aAAa,QAAQ;EACrB,eAAe,OAAO,sBAAsB;EAC5C,sBAAsB;EACtB,kBAAkB;;;;;;;;iBASJ,WAAW,UAAU,oBAAoB;;;;;;;cAmE5C,eAAY,OA9ED,sBAAsB"}