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

package/dist/dev/player/container.js

@@ -2,58 +2,175 @@ import { I18nContext, useTranslator } from "../i18n/context.js";
 import { useComposedRefs } from "../utils/use-composed-refs.js";
 import { useContainerAttach, usePlayer } from "./context.js";
 import { PopupGroupProvider } from "./popup-group-context.js";
-import { ContainerCore, ContainerDataAttrs } from "@videojs/core";
+import { ContainerCore, ContainerDataAttrs, SKIN_HELP_TEXT, SKIN_HELP_URL } from "@videojs/core";
 import { DEFAULT_CONTAINER_ROLE, DEFAULT_CONTAINER_TAB_INDEX, createPopupGroup, focusContainer, getStateDataAttrs, selectControls } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { forwardRef, useContext, useEffect, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { labelText } from "@videojs/core/i18n/text/container";
 import { getTextDirection } from "@videojs/utils/i18n";
 //#region src/player/container.tsx
-const Container = forwardRef(function Container({ children, tabIndex = DEFAULT_CONTAINER_TAB_INDEX, role = DEFAULT_CONTAINER_ROLE, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, lang: langProp, dir: dirProp, ...props }, ref) {
+const Container = forwardRef(function Container(t0, ref) {
+	const $ = c(41);
+	let ariaLabel;
+	let ariaLabelledBy;
+	let children;
+	let dirProp;
+	let langProp;
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({children, tabIndex: t1, role: t2, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, lang: langProp, dir: dirProp, ...props} = t0);
+		$[0] = t0;
+		$[1] = ariaLabel;
+		$[2] = ariaLabelledBy;
+		$[3] = children;
+		$[4] = dirProp;
+		$[5] = langProp;
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		ariaLabel = $[1];
+		ariaLabelledBy = $[2];
+		children = $[3];
+		dirProp = $[4];
+		langProp = $[5];
+		props = $[6];
+		t1 = $[7];
+		t2 = $[8];
+	}
+	const tabIndex = t1 === void 0 ? DEFAULT_CONTAINER_TAB_INDEX : t1;
+	const role = t2 === void 0 ? DEFAULT_CONTAINER_ROLE : t2;
 	const setContainer = useContainerAttach();
 	const translator = useTranslator();
 	const i18n = useContext(I18nContext);
 	const controls = usePlayer(selectControls);
-	const [core] = useState(() => new ContainerCore());
-	const [popupGroup] = useState(() => createPopupGroup());
+	const [core] = useState(_temp);
+	const [popupGroup] = useState(_temp2);
 	const internalRef = useRef(null);
 	const composedRef = useComposedRefs(ref, internalRef);
-	useEffect(() => {
-		setContainer?.(internalRef.current);
-		return () => setContainer?.(null);
-	}, [setContainer]);
-	const handlePointerUp = (event) => {
-		props.onPointerUp?.(event);
-		const el = internalRef.current;
-		if (!el) return;
-		focusContainer(el);
-	};
-	const accessibleNameProps = ariaLabel !== void 0 || ariaLabelledBy !== void 0 ? {
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledBy
-	} : { "aria-label": translator(labelText) };
+	let t3;
+	let t4;
+	if ($[9] !== setContainer) {
+		t3 = () => {
+			setContainer?.(internalRef.current);
+			return () => setContainer?.(null);
+		};
+		t4 = [setContainer];
+		$[9] = setContainer;
+		$[10] = t3;
+		$[11] = t4;
+	} else {
+		t3 = $[10];
+		t4 = $[11];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[12] !== props) {
+		t5 = (event) => {
+			props.onPointerUp?.(event);
+			const el = internalRef.current;
+			if (!el) return;
+			focusContainer(el);
+		};
+		$[12] = props;
+		$[13] = t5;
+	} else t5 = $[13];
+	const handlePointerUp = t5;
+	let t6;
+	if ($[14] !== ariaLabel || $[15] !== ariaLabelledBy || $[16] !== translator) {
+		t6 = ariaLabel !== void 0 || ariaLabelledBy !== void 0 ? {
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy
+		} : { "aria-label": translator(labelText) };
+		$[14] = ariaLabel;
+		$[15] = ariaLabelledBy;
+		$[16] = translator;
+		$[17] = t6;
+	} else t6 = $[17];
+	const accessibleNameProps = t6;
 	const lang = langProp ?? (i18n?.localeFromProp ? i18n.locale : void 0);
-	const localeProps = {
-		lang,
-		dir: dirProp ?? (lang ? getTextDirection(lang) : void 0)
-	};
+	let t7;
+	if ($[18] !== dirProp || $[19] !== lang) {
+		t7 = dirProp ?? (lang ? getTextDirection(lang) : void 0);
+		$[18] = dirProp;
+		$[19] = lang;
+		$[20] = t7;
+	} else t7 = $[20];
+	let t8;
+	if ($[21] !== lang || $[22] !== t7) {
+		t8 = {
+			lang,
+			dir: t7
+		};
+		$[21] = lang;
+		$[22] = t7;
+		$[23] = t8;
+	} else t8 = $[23];
+	const localeProps = t8;
 	if (controls) core.setMedia(controls);
-	const stateAttrs = controls ? getStateDataAttrs(core.getState(), ContainerDataAttrs) : void 0;
-	return /* @__PURE__ */ jsx("div", {
-		ref: composedRef,
-		role,
-		tabIndex,
-		...accessibleNameProps,
-		...localeProps,
-		...props,
-		...stateAttrs,
-		onPointerUp: handlePointerUp,
-		children: /* @__PURE__ */ jsx(PopupGroupProvider, {
+	let t9;
+	if ($[24] !== controls || $[25] !== core) {
+		t9 = controls ? getStateDataAttrs(core.getState(), ContainerDataAttrs) : void 0;
+		$[24] = controls;
+		$[25] = core;
+		$[26] = t9;
+	} else t9 = $[26];
+	const stateAttrs = t9;
+	let t10;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx("a", {
+			rel: "help",
+			href: SKIN_HELP_URL,
+			hidden: true,
+			children: SKIN_HELP_TEXT
+		});
+		$[27] = t10;
+	} else t10 = $[27];
+	let t11;
+	if ($[28] !== children || $[29] !== popupGroup) {
+		t11 = /* @__PURE__ */ jsx(PopupGroupProvider, {
 			value: popupGroup,
 			children
-		})
-	});
+		});
+		$[28] = children;
+		$[29] = popupGroup;
+		$[30] = t11;
+	} else t11 = $[30];
+	let t12;
+	if ($[31] !== accessibleNameProps || $[32] !== composedRef || $[33] !== handlePointerUp || $[34] !== localeProps || $[35] !== props || $[36] !== role || $[37] !== stateAttrs || $[38] !== t11 || $[39] !== tabIndex) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			ref: composedRef,
+			role,
+			tabIndex,
+			...accessibleNameProps,
+			...localeProps,
+			...props,
+			...stateAttrs,
+			onPointerUp: handlePointerUp,
+			children: [t10, t11]
+		});
+		$[31] = accessibleNameProps;
+		$[32] = composedRef;
+		$[33] = handlePointerUp;
+		$[34] = localeProps;
+		$[35] = props;
+		$[36] = role;
+		$[37] = stateAttrs;
+		$[38] = t11;
+		$[39] = tabIndex;
+		$[40] = t12;
+	} else t12 = $[40];
+	return t12;
 });
+function _temp() {
+	return new ContainerCore();
+}
+function _temp2() {
+	return createPopupGroup();
+}
 //#endregion
 export { Container };
 

package/dist/dev/player/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","names":[],"sources":["../../../src/player/container.tsx"],"sourcesContent":["import { ContainerCore, ContainerDataAttrs } from '@videojs/core';\nimport {\n  createPopupGroup,\n  DEFAULT_CONTAINER_ROLE,\n  DEFAULT_CONTAINER_TAB_INDEX,\n  focusContainer,\n  getStateDataAttrs,\n  selectControls,\n} from '@videojs/core/dom';\nimport { labelText } from '@videojs/core/i18n/text/container';\nimport { getTextDirection } from '@videojs/utils/i18n';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type PointerEventHandler,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { I18nContext, useTranslator } from '../i18n/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\nimport { useContainerAttach, usePlayer } from './context';\nimport { PopupGroupProvider } from './popup-group-context';\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  {\n    children,\n    tabIndex = DEFAULT_CONTAINER_TAB_INDEX,\n    role = DEFAULT_CONTAINER_ROLE,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    lang: langProp,\n    dir: dirProp,\n    ...props\n  },\n  ref\n) {\n  const setContainer = useContainerAttach();\n  const translator = useTranslator();\n  const i18n = useContext(I18nContext);\n  const controls = usePlayer(selectControls);\n  const [core] = useState(() => new ContainerCore());\n\n  const [popupGroup] = useState(() => createPopupGroup());\n\n  const internalRef = useRef<HTMLDivElement>(null);\n  const composedRef = useComposedRefs(ref, internalRef);\n\n  useEffect(() => {\n    setContainer?.(internalRef.current);\n    return () => setContainer?.(null);\n  }, [setContainer]);\n\n  const handlePointerUp: PointerEventHandler<HTMLDivElement> = (event) => {\n    props.onPointerUp?.(event);\n    const el = internalRef.current;\n    if (!el) return;\n\n    focusContainer(el);\n  };\n\n  const accessibleNameProps =\n    ariaLabel !== undefined || ariaLabelledBy !== undefined\n      ? { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }\n      : { 'aria-label': translator(labelText) };\n  const lang = langProp ?? (i18n?.localeFromProp ? i18n.locale : undefined);\n  const localeProps = {\n    lang,\n    dir: dirProp ?? (lang ? getTextDirection(lang) : undefined),\n  };\n\n  if (controls) core.setMedia(controls);\n\n  const stateAttrs = controls ? getStateDataAttrs(core.getState(), ContainerDataAttrs) : undefined;\n\n  return (\n    <div\n      ref={composedRef}\n      role={role}\n      tabIndex={tabIndex}\n      {...accessibleNameProps}\n      {...localeProps}\n      {...props}\n      {...stateAttrs}\n      onPointerUp={handlePointerUp}\n    >\n      <PopupGroupProvider value={popupGroup}>{children}</PopupGroupProvider>\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;;;;;;AA+BA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,UACA,WAAW,6BACX,OAAO,wBACP,cAAc,WACd,mBAAmB,gBACnB,MAAM,UACN,KAAK,SACL,GAAG,SAEL,KACA;CACA,MAAM,eAAe,mBAAmB;CACxC,MAAM,aAAa,cAAc;CACjC,MAAM,OAAO,WAAW,WAAW;CACnC,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,CAAC,QAAQ,eAAe,IAAI,cAAc,CAAC;CAEjD,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;CAEtD,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,cAAc,gBAAgB,KAAK,WAAW;CAEpD,gBAAgB;EACd,eAAe,YAAY,OAAO;EAClC,aAAa,eAAe,IAAI;CAClC,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,mBAAwD,UAAU;EACtE,MAAM,cAAc,KAAK;EACzB,MAAM,KAAK,YAAY;EACvB,IAAI,CAAC,IAAI;EAET,eAAe,EAAE;CACnB;CAEA,MAAM,sBACJ,cAAc,KAAA,KAAa,mBAAmB,KAAA,IAC1C;EAAE,cAAc;EAAW,mBAAmB;CAAe,IAC7D,EAAE,cAAc,WAAW,SAAS,EAAE;CAC5C,MAAM,OAAO,aAAa,MAAM,iBAAiB,KAAK,SAAS,KAAA;CAC/D,MAAM,cAAc;EAClB;EACA,KAAK,YAAY,OAAO,iBAAiB,IAAI,IAAI,KAAA;CACnD;CAEA,IAAI,UAAU,KAAK,SAAS,QAAQ;CAEpC,MAAM,aAAa,WAAW,kBAAkB,KAAK,SAAS,GAAG,kBAAkB,IAAI,KAAA;CAEvF,OACE,oBAAC,OAAD;EACE,KAAK;EACC;EACI;EACV,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,aAAa;EAEb,UAAA,oBAAC,oBAAD;GAAoB,OAAO;GAAa;EAA6B,CAAA;CAClE,CAAA;AAET,CAAC"}
+{"version":3,"file":"container.js","names":["tabIndex = DEFAULT_CONTAINER_TAB_INDEX","role = DEFAULT_CONTAINER_ROLE","{\n    children,\n    tabIndex = DEFAULT_CONTAINER_TAB_INDEX,\n    role = DEFAULT_CONTAINER_ROLE,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    lang: langProp,\n    dir: dirProp,\n    ...props\n  }","() => new ContainerCore()","() => createPopupGroup()","() => {\n    setContainer?.(internalRef.current);\n    return () => setContainer?.(null);\n  }","[setContainer]","(event) => {\n    props.onPointerUp?.(event);\n    const el = internalRef.current;\n    if (!el) return;\n\n    focusContainer(el);\n  }","props.onPointerUp","ariaLabel !== undefined || ariaLabelledBy !== undefined\n      ? { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }\n      : { 'aria-label': translator(labelText) }","dirProp ?? (lang ? getTextDirection(lang) : undefined)","{\n    lang,\n    dir: dirProp ?? (lang ? getTextDirection(lang) : undefined),\n  }","controls ? getStateDataAttrs(core.getState(), ContainerDataAttrs) : undefined","<a rel=\"help\" href={SKIN_HELP_URL} hidden>\n        {SKIN_HELP_TEXT}\n      </a>","<PopupGroupProvider value={popupGroup}>{children}</PopupGroupProvider>","<div\n      ref={composedRef}\n      role={role}\n      tabIndex={tabIndex}\n      {...accessibleNameProps}\n      {...localeProps}\n      {...props}\n      {...stateAttrs}\n      onPointerUp={handlePointerUp}\n    >\n      {/* Hidden keeps it out of the UI and the accessibility tree; scrapers still read it from server-rendered HTML. */}\n      <a rel=\"help\" href={SKIN_HELP_URL} hidden>\n        {SKIN_HELP_TEXT}\n      </a>\n      <PopupGroupProvider value={popupGroup}>{children}</PopupGroupProvider>\n    </div>"],"sources":["../../../src/player/container.tsx"],"sourcesContent":["import { ContainerCore, ContainerDataAttrs, SKIN_HELP_TEXT, SKIN_HELP_URL } from '@videojs/core';\nimport {\n  createPopupGroup,\n  DEFAULT_CONTAINER_ROLE,\n  DEFAULT_CONTAINER_TAB_INDEX,\n  focusContainer,\n  getStateDataAttrs,\n  selectControls,\n} from '@videojs/core/dom';\nimport { labelText } from '@videojs/core/i18n/text/container';\nimport { getTextDirection } from '@videojs/utils/i18n';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type PointerEventHandler,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { I18nContext, useTranslator } from '../i18n/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\nimport { useContainerAttach, usePlayer } from './context';\nimport { PopupGroupProvider } from './popup-group-context';\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  {\n    children,\n    tabIndex = DEFAULT_CONTAINER_TAB_INDEX,\n    role = DEFAULT_CONTAINER_ROLE,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    lang: langProp,\n    dir: dirProp,\n    ...props\n  },\n  ref\n) {\n  const setContainer = useContainerAttach();\n  const translator = useTranslator();\n  const i18n = useContext(I18nContext);\n  const controls = usePlayer(selectControls);\n  const [core] = useState(() => new ContainerCore());\n\n  const [popupGroup] = useState(() => createPopupGroup());\n\n  const internalRef = useRef<HTMLDivElement>(null);\n  const composedRef = useComposedRefs(ref, internalRef);\n\n  useEffect(() => {\n    setContainer?.(internalRef.current);\n    return () => setContainer?.(null);\n  }, [setContainer]);\n\n  const handlePointerUp: PointerEventHandler<HTMLDivElement> = (event) => {\n    props.onPointerUp?.(event);\n    const el = internalRef.current;\n    if (!el) return;\n\n    focusContainer(el);\n  };\n\n  const accessibleNameProps =\n    ariaLabel !== undefined || ariaLabelledBy !== undefined\n      ? { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }\n      : { 'aria-label': translator(labelText) };\n  const lang = langProp ?? (i18n?.localeFromProp ? i18n.locale : undefined);\n  const localeProps = {\n    lang,\n    dir: dirProp ?? (lang ? getTextDirection(lang) : undefined),\n  };\n\n  if (controls) core.setMedia(controls);\n\n  const stateAttrs = controls ? getStateDataAttrs(core.getState(), ContainerDataAttrs) : undefined;\n\n  return (\n    <div\n      ref={composedRef}\n      role={role}\n      tabIndex={tabIndex}\n      {...accessibleNameProps}\n      {...localeProps}\n      {...props}\n      {...stateAttrs}\n      onPointerUp={handlePointerUp}\n    >\n      {/* Hidden keeps it out of the UI and the accessibility tree; scrapers still read it from server-rendered HTML. */}\n      <a rel=\"help\" href={SKIN_HELP_URL} hidden>\n        {SKIN_HELP_TEXT}\n      </a>\n      <PopupGroupProvider value={popupGroup}>{children}</PopupGroupProvider>\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":"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"}

package/dist/dev/player/context.js

@@ -1,4 +1,5 @@
 import { useStore } from "@videojs/store/react";
+import { c } from "react-compiler-runtime";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/player/context.tsx
@@ -8,11 +9,20 @@ const EMPTY_STORE = {
 	state: {},
 	subscribe: () => EMPTY_UNSUBSCRIBE
 };
-function PlayerContextProvider({ value, children }) {
-	return /* @__PURE__ */ jsx(PlayerContext.Provider, {
-		value,
-		children
-	});
+function PlayerContextProvider(t0) {
+	const $ = c(3);
+	const { value, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(PlayerContext.Provider, {
+			value,
+			children
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 }
 /** Access the full player context value. Throws if used outside a Player. */
 function usePlayerContext() {

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.tsx"],"sourcesContent":["import type { MediaContainer } from '@videojs/core/dom';\nimport type { Media } from '@videojs/media';\nimport type { UnknownState, UnknownStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { createContext, useContext } from 'react';\n\nexport interface PlayerContextValue {\n  store: UnknownStore;\n  media: Media | null;\n  setMedia: Dispatch<SetStateAction<Media | null>>;\n  container: MediaContainer | null;\n  setContainer: Dispatch<SetStateAction<HTMLElement | null>>;\n}\n\nconst PlayerContext = createContext<PlayerContextValue | null>(null);\nconst EMPTY_UNSUBSCRIBE = () => {};\nconst EMPTY_STORE = {\n  state: {} as UnknownState,\n  subscribe: () => EMPTY_UNSUBSCRIBE,\n} as Pick<UnknownStore, 'state' | 'subscribe'>;\n\nexport function PlayerContextProvider({\n  value,\n  children,\n}: {\n  value: PlayerContextValue;\n  children: ReactNode;\n}): ReactNode {\n  return <PlayerContext.Provider value={value}>{children}</PlayerContext.Provider>;\n}\n\n/** Access the full player context value. Throws if used outside a Player. */\nexport function usePlayerContext(): PlayerContextValue {\n  const ctx = useContext(PlayerContext);\n  if (!ctx) throw new Error('usePlayerContext must be used within a Player');\n\n  return ctx;\n}\n\n/**\n * Access the player store from within a Player.\n *\n * This standalone hook has no knowledge of your configured features, so it returns an untyped `UnknownStore` whose\n * state properties are typed as `unknown`. For typed access, use the `usePlayer` returned by `createPlayer()`, or pass\n * a premade selector to recover the type from its return value.\n *\n * @label Without Selector\n */\nexport function usePlayer(): UnknownStore;\n/**\n * Select a value from the player store. Re-renders when the selected value changes.\n *\n * The selector receives `UnknownState`, so an inline selector returns `unknown`. Pass a premade selector (e.g.\n * `selectPlayback`) to get a typed result.\n *\n * @param selector - Derives a value from the player store state.\n * @label With Selector\n */\nexport function usePlayer<R>(selector: (state: UnknownState) => R): R;\nexport function usePlayer<R>(selector?: (state: UnknownState) => R) {\n  const { store } = usePlayerContext();\n\n  return useStore(store, selector as any);\n}\n\n/**\n * Returns the player store when available, or `undefined` outside a Player.\n *\n * @label Without Selector\n */\nexport function useOptionalPlayer(): UnknownStore | undefined;\n/**\n * Selects a player value when available, or returns `undefined` outside a Player.\n *\n * @param selector - Derives a value from the player store state.\n * @label With Selector\n */\nexport function useOptionalPlayer<R>(selector: (state: UnknownState) => R): R | undefined;\nexport function useOptionalPlayer<R>(selector?: (state: UnknownState) => R) {\n  const ctx = useContext(PlayerContext);\n  const store = (ctx?.store ?? (EMPTY_STORE as unknown as UnknownStore)) as UnknownStore;\n  const value = useStore(store, (ctx ? selector : undefined) as any);\n\n  return ctx ? value : undefined;\n}\n\n/** Access the media element from within a Player. */\nexport function useMedia(): Media | null {\n  const { media } = usePlayerContext();\n\n  return media;\n}\n\n/** Access the container element from within a Player. */\nexport function useContainer(): MediaContainer | null {\n  const { container } = usePlayerContext();\n\n  return container;\n}\n\n/** Access the container element when a Player is available. */\nexport function useOptionalContainer(): MediaContainer | null {\n  const ctx = useContext(PlayerContext);\n\n  return ctx?.container ?? null;\n}\n\n/** Access the media attach setter for connecting a media element to the player. */\nexport function useMediaAttach(): Dispatch<SetStateAction<Media | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n\n  return ctx?.setMedia;\n}\n\n/** Access the container attach setter for connecting a container element to the player. */\nexport function useContainerAttach(): Dispatch<SetStateAction<HTMLElement | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n\n  return ctx?.setContainer;\n}\n"],"mappings":";;;;AAeA,MAAM,gBAAgB,cAAyC,IAAI;AACnE,MAAM,0BAA0B,CAAC;AACjC,MAAM,cAAc;CAClB,OAAO,CAAC;CACR,iBAAiB;AACnB;AAEA,SAAgB,sBAAsB,EACpC,OACA,YAIY;CACZ,OAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;CAAiC,CAAA;AACjF;;AAGA,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,aAAa;CACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,+CAA+C;CAEzE,OAAO;AACT;AAsBA,SAAgB,UAAa,UAAuC;CAClE,MAAM,EAAE,UAAU,iBAAiB;CAEnC,OAAO,SAAS,OAAO,QAAe;AACxC;AAeA,SAAgB,kBAAqB,UAAuC;CAC1E,MAAM,MAAM,WAAW,aAAa;CACpC,MAAM,QAAS,KAAK,SAAU;CAC9B,MAAM,QAAQ,SAAS,OAAQ,MAAM,WAAW,KAAA,CAAiB;CAEjE,OAAO,MAAM,QAAQ,KAAA;AACvB;;AAGA,SAAgB,WAAyB;CACvC,MAAM,EAAE,UAAU,iBAAiB;CAEnC,OAAO;AACT;;AAGA,SAAgB,eAAsC;CACpD,MAAM,EAAE,cAAc,iBAAiB;CAEvC,OAAO;AACT;;AAGA,SAAgB,uBAA8C;CAG5D,OAFY,WAAW,aAEd,CAAC,EAAE,aAAa;AAC3B;;AAGA,SAAgB,iBAAqE;CAGnF,OAFY,WAAW,aAEd,CAAC,EAAE;AACd;;AAGA,SAAgB,qBAA+E;CAG7F,OAFY,WAAW,aAEd,CAAC,EAAE;AACd"}
+{"version":3,"file":"context.js","names":["{\n  value,\n  children,\n}: {\n  value: PlayerContextValue;\n  children: ReactNode;\n}","<PlayerContext.Provider value={value}>{children}</PlayerContext.Provider>","PlayerContext.Provider"],"sources":["../../../src/player/context.tsx"],"sourcesContent":["import type { MediaContainer } from '@videojs/core/dom';\nimport type { Media } from '@videojs/media';\nimport type { UnknownState, UnknownStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { createContext, useContext } from 'react';\n\nexport interface PlayerContextValue {\n  store: UnknownStore;\n  media: Media | null;\n  setMedia: Dispatch<SetStateAction<Media | null>>;\n  container: MediaContainer | null;\n  setContainer: Dispatch<SetStateAction<HTMLElement | null>>;\n}\n\nconst PlayerContext = createContext<PlayerContextValue | null>(null);\nconst EMPTY_UNSUBSCRIBE = () => {};\nconst EMPTY_STORE = {\n  state: {} as UnknownState,\n  subscribe: () => EMPTY_UNSUBSCRIBE,\n} as Pick<UnknownStore, 'state' | 'subscribe'>;\n\nexport function PlayerContextProvider({\n  value,\n  children,\n}: {\n  value: PlayerContextValue;\n  children: ReactNode;\n}): ReactNode {\n  return <PlayerContext.Provider value={value}>{children}</PlayerContext.Provider>;\n}\n\n/** Access the full player context value. Throws if used outside a Player. */\nexport function usePlayerContext(): PlayerContextValue {\n  const ctx = useContext(PlayerContext);\n  if (!ctx) throw new Error('usePlayerContext must be used within a Player');\n\n  return ctx;\n}\n\n/**\n * Access the player store from within a Player.\n *\n * This standalone hook has no knowledge of your configured features, so it returns an untyped `UnknownStore` whose\n * state properties are typed as `unknown`. For typed access, use the `usePlayer` returned by `createPlayer()`, or pass\n * a premade selector to recover the type from its return value.\n *\n * @label Without Selector\n */\nexport function usePlayer(): UnknownStore;\n/**\n * Select a value from the player store. Re-renders when the selected value changes.\n *\n * The selector receives `UnknownState`, so an inline selector returns `unknown`. Pass a premade selector (e.g.\n * `selectPlayback`) to get a typed result.\n *\n * @param selector - Derives a value from the player store state.\n * @label With Selector\n */\nexport function usePlayer<R>(selector: (state: UnknownState) => R): R;\nexport function usePlayer<R>(selector?: (state: UnknownState) => R) {\n  const { store } = usePlayerContext();\n\n  return useStore(store, selector as any);\n}\n\n/**\n * Returns the player store when available, or `undefined` outside a Player.\n *\n * @label Without Selector\n */\nexport function useOptionalPlayer(): UnknownStore | undefined;\n/**\n * Selects a player value when available, or returns `undefined` outside a Player.\n *\n * @param selector - Derives a value from the player store state.\n * @label With Selector\n */\nexport function useOptionalPlayer<R>(selector: (state: UnknownState) => R): R | undefined;\nexport function useOptionalPlayer<R>(selector?: (state: UnknownState) => R) {\n  const ctx = useContext(PlayerContext);\n  const store = (ctx?.store ?? (EMPTY_STORE as unknown as UnknownStore)) as UnknownStore;\n  const value = useStore(store, (ctx ? selector : undefined) as any);\n\n  return ctx ? value : undefined;\n}\n\n/** Access the media element from within a Player. */\nexport function useMedia(): Media | null {\n  const { media } = usePlayerContext();\n\n  return media;\n}\n\n/** Access the container element from within a Player. */\nexport function useContainer(): MediaContainer | null {\n  const { container } = usePlayerContext();\n\n  return container;\n}\n\n/** Access the container element when a Player is available. */\nexport function useOptionalContainer(): MediaContainer | null {\n  const ctx = useContext(PlayerContext);\n\n  return ctx?.container ?? null;\n}\n\n/** Access the media attach setter for connecting a media element to the player. */\nexport function useMediaAttach(): Dispatch<SetStateAction<Media | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n\n  return ctx?.setMedia;\n}\n\n/** Access the container attach setter for connecting a container element to the player. */\nexport function useContainerAttach(): Dispatch<SetStateAction<HTMLElement | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n\n  return ctx?.setContainer;\n}\n"],"mappings":";;;;;AAeA,MAAM,gBAAgB,cAAyC,IAAI;AACnE,MAAM,0BAA0B,CAAC;AACjC,MAAM,cAAc;CAClB,OAAO,CAAC;CACR,iBAAiB;AACnB;AAEA,SAAgB,sBAAA,IAMF;;CANwB,MAAA,EACpC,OACA,aAFoCA;CAO7BC,IAAAA;CAAuC,IAAA,EAAA,OAAA,YAAA,EAAA,OAAR,OAAA;EAA/B,KAAA,oBAACC,cAAAA,UAAD;GAA+B;GAAQ;EAAiC,CAAA;EAAjC,EAAA,KAAA;EAAR,EAAA,KAAA;;;CAAtC,OAAOD;AACT;;AAGA,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,aAAa;CACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,+CAA+C;CAEzE,OAAO;AACT;AAsBA,SAAgB,UAAa,UAAuC;CAClE,MAAM,EAAE,UAAU,iBAAiB;CAEnC,OAAO,SAAS,OAAO,QAAe;AACxC;AAeA,SAAgB,kBAAqB,UAAuC;CAC1E,MAAM,MAAM,WAAW,aAAa;CACpC,MAAM,QAAS,KAAK,SAAU;CAC9B,MAAM,QAAQ,SAAS,OAAQ,MAAM,WAAW,KAAA,CAAiB;CAEjE,OAAO,MAAM,QAAQ,KAAA;AACvB;;AAGA,SAAgB,WAAyB;CACvC,MAAM,EAAE,UAAU,iBAAiB;CAEnC,OAAO;AACT;;AAGA,SAAgB,eAAsC;CACpD,MAAM,EAAE,cAAc,iBAAiB;CAEvC,OAAO;AACT;;AAGA,SAAgB,uBAA8C;CAG5D,OAFY,WAAW,aAEhB,CAAA,EAAK,aAAa;AAC3B;;AAGA,SAAgB,iBAAqE;CAGnF,OAFY,WAAW,aAEhB,CAAA,EAAK;AACd;;AAGA,SAAgB,qBAA+E;CAG7F,OAFY,WAAW,aAEhB,CAAA,EAAK;AACd"}

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

@@ -3,7 +3,8 @@ import { useDestroy } from "../utils/use-destroy.js";
 import { combinePlayerFeatureConfigs, setPlayerConfigValue } from "@videojs/core/dom";
 import { combine, createStore } from "@videojs/store";
 import { useStore } from "@videojs/store/react";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { c } from "react-compiler-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { pick } from "@videojs/utils/object";
 //#region src/player/create-player.tsx
@@ -17,64 +18,116 @@ function createPlayer(config) {
 		return store;
 	}
 	function Player(props) {
+		const $ = c(22);
 		const { children } = props;
-		const configValues = pick(props, configKeys);
-		const [store, setStore] = useState(() => createConfiguredStore(configValues));
-		const syncedValues = useRef({
-			store,
-			values: configValues
-		});
+		let t0;
+		if ($[0] !== props) {
+			t0 = pick(props, configKeys);
+			$[0] = props;
+			$[1] = t0;
+		} else t0 = $[1];
+		const configValues = t0;
+		let t1;
+		if ($[2] !== configValues) {
+			t1 = () => createConfiguredStore(configValues);
+			$[2] = configValues;
+			$[3] = t1;
+		} else t1 = $[3];
+		const [store, setStore] = useState(t1);
+		let t2;
+		if ($[4] !== configValues || $[5] !== store) {
+			t2 = {
+				store,
+				values: configValues
+			};
+			$[4] = configValues;
+			$[5] = store;
+			$[6] = t2;
+		} else t2 = $[6];
+		const syncedValues = useRef(t2);
 		const [media, setMedia] = useState(null);
 		const [container, setContainer] = useState(null);
 		useDestroy(store);
-		useLayoutEffect(() => {
-			const previous = syncedValues.current;
-			if (previous.store !== store) {
+		let t3;
+		if ($[7] !== configValues || $[8] !== store) {
+			t3 = () => {
+				const previous = syncedValues.current;
+				if (previous.store !== store) {
+					syncedValues.current = {
+						store,
+						values: configValues
+					};
+					return;
+				}
+				for (const key of configKeys) {
+					if (Object.is(previous.values[key], configValues[key])) continue;
+					setPlayerConfigValue(store, featureConfig[key], configValues[key]);
+				}
 				syncedValues.current = {
 					store,
 					values: configValues
 				};
-				return;
-			}
-			for (const key of configKeys) {
-				if (Object.is(previous.values[key], configValues[key])) continue;
-				setPlayerConfigValue(store, featureConfig[key], configValues[key]);
-			}
-			syncedValues.current = {
-				store,
-				values: configValues
 			};
-		});
-		useEffect(() => {
-			if (!media) return;
-			if (store.destroyed) {
-				setStore(createConfiguredStore(syncedValues.current.values));
-				return;
-			}
-			return store.attach({
+			$[7] = configValues;
+			$[8] = store;
+			$[9] = t3;
+		} else t3 = $[9];
+		useLayoutEffect(t3);
+		let t4;
+		let t5;
+		if ($[10] !== container || $[11] !== media || $[12] !== store) {
+			t4 = () => {
+				if (!media) return;
+				if (store.destroyed) {
+					setStore(createConfiguredStore(syncedValues.current.values));
+					return;
+				}
+				return store.attach({
+					media,
+					container
+				});
+			};
+			t5 = [
+				media,
+				container,
+				store
+			];
+			$[10] = container;
+			$[11] = media;
+			$[12] = store;
+			$[13] = t4;
+			$[14] = t5;
+		} else {
+			t4 = $[13];
+			t5 = $[14];
+		}
+		useEffect(t4, t5);
+		let t6;
+		if ($[15] !== container || $[16] !== media || $[17] !== store) {
+			t6 = {
+				store,
 				media,
-				container
+				setMedia,
+				container,
+				setContainer
+			};
+			$[15] = container;
+			$[16] = media;
+			$[17] = store;
+			$[18] = t6;
+		} else t6 = $[18];
+		const value = t6;
+		let t7;
+		if ($[19] !== children || $[20] !== value) {
+			t7 = /* @__PURE__ */ jsx(PlayerContextProvider, {
+				value,
+				children
 			});
-		}, [
-			media,
-			container,
-			store
-		]);
-		const value = useMemo(() => ({
-			store,
-			media,
-			setMedia,
-			container,
-			setContainer
-		}), [
-			store,
-			media,
-			container
-		]);
-		return /* @__PURE__ */ jsx(PlayerContextProvider, {
-			value,
-			children
-		});
+			$[19] = children;
+			$[20] = value;
+			$[21] = t7;
+		} else t7 = $[21];
+		return t7;
 	}
 	if (config.displayName) Player.displayName = config.displayName;
 	function usePlayer(selector) {

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

@@ -1 +1 @@
-{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.tsx"],"sourcesContent":["import {\n  type AnyPlayerFeature,\n  type AnyPlayerStore,\n  type AudioFeatures,\n  type AudioPlayerStore,\n  combinePlayerFeatureConfigs,\n  type InferPlayerConfig,\n  type PlayerFeatureConfig,\n  type PlayerStore,\n  type PlayerTarget,\n  setPlayerConfigValue,\n  type VideoFeatures,\n  type VideoPlayerStore,\n} from '@videojs/core/dom';\nimport type { Media } from '@videojs/media/dom';\nimport type { InferStoreState } from '@videojs/store';\nimport { combine, createStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport { pick } from '@videojs/utils/object';\nimport type { FC, ReactNode } from 'react';\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { useDestroy } from '../utils/use-destroy';\nimport { PlayerContextProvider, useMedia, usePlayerContext } from './context';\n\n/** Configures the feature-backed store and provider component created by {@link createPlayer}. */\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  /** Features combined into the player's store, state, actions, and configuration props. */\n  features: Features;\n\n  /** Name shown for the generated provider component in development tools. */\n  displayName?: string;\n}\n\n/** Props accepted by a generated Player provider. */\nexport type PlayerProps<Config = object> = {\n  [Key in keyof Config]?: Config[Key] | undefined;\n} & {\n  /** Content placed inside the player context. The provider does not render a host element of its own. */\n  children: ReactNode;\n};\n\n/** The provider component and typed hooks produced by {@link createPlayer}. */\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  /** Provides a new player store to its descendants without adding a layout element. */\n  Player: FC<PlayerProps<InferPlayerConfig<Store>>>;\n\n  /** Accesses the configured store, or subscribes to a selected value from it. */\n  usePlayer: UsePlayerHook<Store>;\n\n  /** Returns the media currently attached beneath the generated Player, or `null` before attachment. */\n  useMedia: () => Media | null;\n}\n\n/** Typed player-store hook returned by {@link createPlayer}. */\nexport type UsePlayerHook<Store extends PlayerStore> = {\n  /** Returns the configured player store. */\n  (): Store;\n\n  /**\n   * Subscribes to a value derived from the player state.\n   *\n   * @param selector - Derives the value consumed by the calling component.\n   */\n  <R>(selector: (state: InferStoreState<Store>) => R): R;\n};\n\n/**\n * Create a player instance with a typed Player component and hooks.\n *\n * @param config - Player configuration with features and optional display name.\n * @label Video\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Create a player for audio media.\n *\n * @param config - Player configuration with features and optional display name.\n * @label Audio\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Create a player with custom features.\n *\n * @param config - Player configuration with features and optional display name.\n * @label Generic\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<AnyPlayerStore> {\n  const slice = combine(...config.features);\n  const featureConfig = combinePlayerFeatureConfigs(config.features);\n  const configKeys = Object.keys(featureConfig);\n\n  function createConfiguredStore(values: Record<string, unknown>) {\n    const store = createStore<PlayerTarget>()(slice);\n\n    applyConfigValues(store, featureConfig, values);\n    return store;\n  }\n\n  function Player(props: PlayerProps<any>): ReactNode {\n    const { children } = props;\n    // Only inputs declared by selected features are forwarded to store actions.\n    const configValues = pick(props, configKeys);\n    const [store, setStore] = useState(() => createConfiguredStore(configValues));\n    const syncedValues = useRef({ store, values: configValues });\n\n    const [media, setMedia] = useState<Media | null>(null);\n    const [container, setContainer] = useState<HTMLElement | null>(null);\n\n    useDestroy(store);\n\n    // Sync committed configuration props to the existing store.\n    useLayoutEffect(() => {\n      const previous = syncedValues.current;\n\n      // Replacement stores are seeded from this render's props during creation.\n      if (previous.store !== store) {\n        syncedValues.current = { store, values: configValues };\n        return;\n      }\n\n      for (const key of configKeys) {\n        if (Object.is(previous.values[key], configValues[key])) continue;\n\n        setPlayerConfigValue(store, featureConfig[key]!, configValues[key]);\n      }\n\n      syncedValues.current = { store, values: configValues };\n    });\n\n    useEffect(() => {\n      if (!media) return;\n\n      // The store may have been destroyed during an asynchronous gap between React\n      // effect cleanup and re-setup (e.g., React <Activity> hide → reveal). The\n      // useState initializer does not re-run in this case.\n      if (store.destroyed) {\n        setStore(createConfiguredStore(syncedValues.current.values));\n        return;\n      }\n\n      return store.attach({ media, container });\n    }, [media, container, store]);\n\n    const value = useMemo(() => ({ store, media, setMedia, container, setContainer }), [store, media, container]);\n\n    return <PlayerContextProvider value={value}>{children}</PlayerContextProvider>;\n  }\n\n  if (__DEV__ && config.displayName) {\n    Player.displayName = config.displayName;\n  }\n\n  function usePlayer<R>(selector?: (state: object) => R): AnyPlayerStore | R {\n    const { store } = usePlayerContext();\n\n    return useStore(store, selector as any);\n  }\n\n  return {\n    Player,\n    usePlayer,\n    useMedia,\n  };\n}\n\nfunction applyConfigValues(store: object, config: PlayerFeatureConfig, values: Record<string, unknown>): void {\n  for (const key of Object.keys(config)) {\n    setPlayerConfigValue(store, config[key]!, values[key]);\n  }\n}\n"],"mappings":";;;;;;;;;AA6FA,SAAgB,aAAa,QAAoF;CAC/G,MAAM,QAAQ,QAAQ,GAAG,OAAO,QAAQ;CACxC,MAAM,gBAAgB,4BAA4B,OAAO,QAAQ;CACjE,MAAM,aAAa,OAAO,KAAK,aAAa;CAE5C,SAAS,sBAAsB,QAAiC;EAC9D,MAAM,QAAQ,YAA0B,CAAC,CAAC,KAAK;EAE/C,kBAAkB,OAAO,eAAe,MAAM;EAC9C,OAAO;CACT;CAEA,SAAS,OAAO,OAAoC;EAClD,MAAM,EAAE,aAAa;EAErB,MAAM,eAAe,KAAK,OAAO,UAAU;EAC3C,MAAM,CAAC,OAAO,YAAY,eAAe,sBAAsB,YAAY,CAAC;EAC5E,MAAM,eAAe,OAAO;GAAE;GAAO,QAAQ;EAAa,CAAC;EAE3D,MAAM,CAAC,OAAO,YAAY,SAAuB,IAAI;EACrD,MAAM,CAAC,WAAW,gBAAgB,SAA6B,IAAI;EAEnE,WAAW,KAAK;EAGhB,sBAAsB;GACpB,MAAM,WAAW,aAAa;GAG9B,IAAI,SAAS,UAAU,OAAO;IAC5B,aAAa,UAAU;KAAE;KAAO,QAAQ;IAAa;IACrD;GACF;GAEA,KAAK,MAAM,OAAO,YAAY;IAC5B,IAAI,OAAO,GAAG,SAAS,OAAO,MAAM,aAAa,IAAI,GAAG;IAExD,qBAAqB,OAAO,cAAc,MAAO,aAAa,IAAI;GACpE;GAEA,aAAa,UAAU;IAAE;IAAO,QAAQ;GAAa;EACvD,CAAC;EAED,gBAAgB;GACd,IAAI,CAAC,OAAO;GAKZ,IAAI,MAAM,WAAW;IACnB,SAAS,sBAAsB,aAAa,QAAQ,MAAM,CAAC;IAC3D;GACF;GAEA,OAAO,MAAM,OAAO;IAAE;IAAO;GAAU,CAAC;EAC1C,GAAG;GAAC;GAAO;GAAW;EAAK,CAAC;EAE5B,MAAM,QAAQ,eAAe;GAAE;GAAO;GAAO;GAAU;GAAW;EAAa,IAAI;GAAC;GAAO;GAAO;EAAS,CAAC;EAE5G,OAAO,oBAAC,uBAAD;GAA8B;GAAQ;EAAgC,CAAA;CAC/E;CAEA,IAAe,OAAO,aACpB,OAAO,cAAc,OAAO;CAG9B,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,iBAAiB;EAEnC,OAAO,SAAS,OAAO,QAAe;CACxC;CAEA,OAAO;EACL;EACA;EACA;CACF;AACF;AAEA,SAAS,kBAAkB,OAAe,QAA6B,QAAuC;CAC5G,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,GAClC,qBAAqB,OAAO,OAAO,MAAO,OAAO,IAAI;AAEzD"}
+{"version":3,"file":"create-player.js","names":["pick(props, configKeys)","() => createConfiguredStore(configValues)","{ store, values: configValues }","() => {\n      const previous = syncedValues.current;\n\n      // Replacement stores are seeded from this render's props during creation.\n      if (previous.store !== store) {\n        syncedValues.current = { store, values: configValues };\n        return;\n      }\n\n      for (const key of configKeys) {\n        if (Object.is(previous.values[key], configValues[key])) continue;\n\n        setPlayerConfigValue(store, featureConfig[key]!, configValues[key]);\n      }\n\n      syncedValues.current = { store, values: configValues };\n    }","() => {\n      if (!media) return;\n\n      // The store may have been destroyed during an asynchronous gap between React\n      // effect cleanup and re-setup (e.g., React <Activity> hide → reveal). The\n      // useState initializer does not re-run in this case.\n      if (store.destroyed) {\n        setStore(createConfiguredStore(syncedValues.current.values));\n        return;\n      }\n\n      return store.attach({ media, container });\n    }","[media, container, store]","store.destroyed","{ store, media, setMedia, container, setContainer }","useMemo(() => ({ store, media, setMedia, container, setContainer }), [store, media, container])","<PlayerContextProvider value={value}>{children}</PlayerContextProvider>"],"sources":["../../../src/player/create-player.tsx"],"sourcesContent":["import {\n  type AnyPlayerFeature,\n  type AnyPlayerStore,\n  type AudioFeatures,\n  type AudioPlayerStore,\n  combinePlayerFeatureConfigs,\n  type InferPlayerConfig,\n  type PlayerFeatureConfig,\n  type PlayerStore,\n  type PlayerTarget,\n  setPlayerConfigValue,\n  type VideoFeatures,\n  type VideoPlayerStore,\n} from '@videojs/core/dom';\nimport type { Media } from '@videojs/media/dom';\nimport type { InferStoreState } from '@videojs/store';\nimport { combine, createStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport { pick } from '@videojs/utils/object';\nimport type { FC, ReactNode } from 'react';\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { useDestroy } from '../utils/use-destroy';\nimport { PlayerContextProvider, useMedia, usePlayerContext } from './context';\n\n/** Configures the feature-backed store and provider component created by {@link createPlayer}. */\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  /** Features combined into the player's store, state, actions, and configuration props. */\n  features: Features;\n\n  /** Name shown for the generated provider component in development tools. */\n  displayName?: string;\n}\n\n/** Props accepted by a generated Player provider. */\nexport type PlayerProps<Config = object> = {\n  [Key in keyof Config]?: Config[Key] | undefined;\n} & {\n  /** Content placed inside the player context. The provider does not render a host element of its own. */\n  children: ReactNode;\n};\n\n/** The provider component and typed hooks produced by {@link createPlayer}. */\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  /** Provides a new player store to its descendants without adding a layout element. */\n  Player: FC<PlayerProps<InferPlayerConfig<Store>>>;\n\n  /** Accesses the configured store, or subscribes to a selected value from it. */\n  usePlayer: UsePlayerHook<Store>;\n\n  /** Returns the media currently attached beneath the generated Player, or `null` before attachment. */\n  useMedia: () => Media | null;\n}\n\n/** Typed player-store hook returned by {@link createPlayer}. */\nexport type UsePlayerHook<Store extends PlayerStore> = {\n  /** Returns the configured player store. */\n  (): Store;\n\n  /**\n   * Subscribes to a value derived from the player state.\n   *\n   * @param selector - Derives the value consumed by the calling component.\n   */\n  <R>(selector: (state: InferStoreState<Store>) => R): R;\n};\n\n/**\n * Create a player instance with a typed Player component and hooks.\n *\n * @param config - Player configuration with features and optional display name.\n * @label Video\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Create a player for audio media.\n *\n * @param config - Player configuration with features and optional display name.\n * @label Audio\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Create a player with custom features.\n *\n * @param config - Player configuration with features and optional display name.\n * @label Generic\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<AnyPlayerStore> {\n  const slice = combine(...config.features);\n  const featureConfig = combinePlayerFeatureConfigs(config.features);\n  const configKeys = Object.keys(featureConfig);\n\n  function createConfiguredStore(values: Record<string, unknown>) {\n    const store = createStore<PlayerTarget>()(slice);\n\n    applyConfigValues(store, featureConfig, values);\n    return store;\n  }\n\n  function Player(props: PlayerProps<any>): ReactNode {\n    const { children } = props;\n    // Only inputs declared by selected features are forwarded to store actions.\n    const configValues = pick(props, configKeys);\n    const [store, setStore] = useState(() => createConfiguredStore(configValues));\n    const syncedValues = useRef({ store, values: configValues });\n\n    const [media, setMedia] = useState<Media | null>(null);\n    const [container, setContainer] = useState<HTMLElement | null>(null);\n\n    useDestroy(store);\n\n    // Sync committed configuration props to the existing store.\n    useLayoutEffect(() => {\n      const previous = syncedValues.current;\n\n      // Replacement stores are seeded from this render's props during creation.\n      if (previous.store !== store) {\n        syncedValues.current = { store, values: configValues };\n        return;\n      }\n\n      for (const key of configKeys) {\n        if (Object.is(previous.values[key], configValues[key])) continue;\n\n        setPlayerConfigValue(store, featureConfig[key]!, configValues[key]);\n      }\n\n      syncedValues.current = { store, values: configValues };\n    });\n\n    useEffect(() => {\n      if (!media) return;\n\n      // The store may have been destroyed during an asynchronous gap between React\n      // effect cleanup and re-setup (e.g., React <Activity> hide → reveal). The\n      // useState initializer does not re-run in this case.\n      if (store.destroyed) {\n        setStore(createConfiguredStore(syncedValues.current.values));\n        return;\n      }\n\n      return store.attach({ media, container });\n    }, [media, container, store]);\n\n    const value = useMemo(() => ({ store, media, setMedia, container, setContainer }), [store, media, container]);\n\n    return <PlayerContextProvider value={value}>{children}</PlayerContextProvider>;\n  }\n\n  if (__DEV__ && config.displayName) {\n    Player.displayName = config.displayName;\n  }\n\n  function usePlayer<R>(selector?: (state: object) => R): AnyPlayerStore | R {\n    const { store } = usePlayerContext();\n\n    return useStore(store, selector as any);\n  }\n\n  return {\n    Player,\n    usePlayer,\n    useMedia,\n  };\n}\n\nfunction applyConfigValues(store: object, config: PlayerFeatureConfig, values: Record<string, unknown>): void {\n  for (const key of Object.keys(config)) {\n    setPlayerConfigValue(store, config[key]!, values[key]);\n  }\n}\n"],"mappings":"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"}

package/dist/dev/player/popup-group-context.js

@@ -1,12 +1,22 @@
+import { c } from "react-compiler-runtime";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/player/popup-group-context.tsx
 const PopupGroupContext = createContext(void 0);
-function PopupGroupProvider({ value, children }) {
-	return /* @__PURE__ */ jsx(PopupGroupContext.Provider, {
-		value,
-		children
-	});
+function PopupGroupProvider(t0) {
+	const $ = c(3);
+	const { value, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(PopupGroupContext.Provider, {
+			value,
+			children
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 }
 function useOptionalPopupGroup() {
 	return useContext(PopupGroupContext);

package/dist/dev/player/popup-group-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"popup-group-context.js","names":[],"sources":["../../../src/player/popup-group-context.tsx"],"sourcesContent":["import type { PopupGroup } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext } from 'react';\n\nconst PopupGroupContext = createContext<PopupGroup | undefined>(undefined);\n\nexport function PopupGroupProvider({ value, children }: { value: PopupGroup; children: ReactNode }): ReactNode {\n  return <PopupGroupContext.Provider value={value}>{children}</PopupGroupContext.Provider>;\n}\n\nexport function useOptionalPopupGroup(): PopupGroup | undefined {\n  return useContext(PopupGroupContext);\n}\n"],"mappings":";;;AAIA,MAAM,oBAAoB,cAAsC,KAAA,CAAS;AAEzE,SAAgB,mBAAmB,EAAE,OAAO,YAAmE;CAC7G,OAAO,oBAAC,kBAAkB,UAAnB;EAAmC;EAAQ;CAAqC,CAAA;AACzF;AAEA,SAAgB,wBAAgD;CAC9D,OAAO,WAAW,iBAAiB;AACrC"}
+{"version":3,"file":"popup-group-context.js","names":["{ value, children }: { value: PopupGroup; children: ReactNode }","<PopupGroupContext.Provider value={value}>{children}</PopupGroupContext.Provider>","PopupGroupContext.Provider"],"sources":["../../../src/player/popup-group-context.tsx"],"sourcesContent":["import type { PopupGroup } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext } from 'react';\n\nconst PopupGroupContext = createContext<PopupGroup | undefined>(undefined);\n\nexport function PopupGroupProvider({ value, children }: { value: PopupGroup; children: ReactNode }): ReactNode {\n  return <PopupGroupContext.Provider value={value}>{children}</PopupGroupContext.Provider>;\n}\n\nexport function useOptionalPopupGroup(): PopupGroup | undefined {\n  return useContext(PopupGroupContext);\n}\n"],"mappings":";;;;AAIA,MAAM,oBAAoB,cAAsC,KAAA,CAAS;AAEzE,SAAgB,mBAAA,IAA+F;;CAA5E,MAAA,EAAE,OAAO,aAATA;CAC1BC,IAAAA;CAA2C,IAAA,EAAA,OAAA,YAAA,EAAA,OAAR,OAAA;EAAnC,KAAA,oBAACC,kBAAAA,UAAD;GAAmC;GAAQ;EAAqC,CAAA;EAArC,EAAA,KAAA;EAAR,EAAA,KAAA;;;CAA1C,OAAOD;AACT;AAEA,SAAgB,wBAAgD;CAC9D,OAAO,WAAW,iBAAiB;AACrC"}