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

package/dist/dev/ui/volume-popover/root.js.map

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":["Popover.Root"],"sources":["../../../../src/ui/volume-popover/root.tsx"],"sourcesContent":["import { VolumePopoverCore } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\nimport type { MediaVolumeState } from '@videojs/media';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { Popover } from '../popover';\nimport { usePopoverContext } from '../popover/context';\nimport type { PopoverRootProps } from '../popover/root';\nimport { VolumePopoverContextProvider } from './context';\n\nconst unavailableVolume: MediaVolumeState = {\n  volume: 0,\n  muted: false,\n  volumeAvailability: 'unsupported',\n  mutedAvailability: 'unsupported',\n  setVolume: () => 0,\n  toggleMuted: () => false,\n};\n\nexport interface VolumePopoverRootProps extends PopoverRootProps {}\n\n/** Owns volume availability and the popover interaction lifecycle. */\nexport function VolumePopoverRoot({ children, ...props }: VolumePopoverRootProps): ReactNode {\n  const volume = usePlayer(selectVolume);\n  const [core] = useState(() => new VolumePopoverCore(props));\n\n  core.setProps(props);\n  core.setMedia(volume ?? unavailableVolume);\n\n  return (\n    <Popover.Root {...props}>\n      <VolumePopoverState core={core}>{children}</VolumePopoverState>\n    </Popover.Root>\n  );\n}\n\nfunction VolumePopoverState({ core, children }: { core: VolumePopoverCore; children?: ReactNode }): ReactNode {\n  const { popover } = usePopoverContext();\n\n  core.setInput(popover.input.current);\n  const state = core.getState();\n\n  useEffect(() => {\n    if (state.hidden) popover.close('imperative-action');\n  }, [popover, state.hidden]);\n\n  return <VolumePopoverContextProvider value={{ state }}>{children}</VolumePopoverContextProvider>;\n}\n\nexport namespace VolumePopoverRoot {\n  export type Props = VolumePopoverRootProps;\n  export type State = VolumePopoverCore.State;\n}\n"],"mappings":";;;;;;;;;AAYA,MAAM,oBAAsC;CAC1C,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,mBAAmB;CACnB,iBAAiB;CACjB,mBAAmB;AACrB;;AAKA,SAAgB,kBAAkB,EAAE,UAAU,GAAG,SAA4C;CAC3F,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,CAAC,QAAQ,eAAe,IAAI,kBAAkB,KAAK,CAAC;CAE1D,KAAK,SAAS,KAAK;CACnB,KAAK,SAAS,UAAU,iBAAiB;CAEzC,OACE,oBAACA,aAAD;EAAc,GAAI;EAChB,UAAA,oBAAC,oBAAD;GAA0B;GAAO;EAA6B,CAAA;CAClD,CAAA;AAElB;AAEA,SAAS,mBAAmB,EAAE,MAAM,YAA0E;CAC5G,MAAM,EAAE,YAAY,kBAAkB;CAEtC,KAAK,SAAS,QAAQ,MAAM,OAAO;CACnC,MAAM,QAAQ,KAAK,SAAS;CAE5B,gBAAgB;EACd,IAAI,MAAM,QAAQ,QAAQ,MAAM,mBAAmB;CACrD,GAAG,CAAC,SAAS,MAAM,MAAM,CAAC;CAE1B,OAAO,oBAAC,8BAAD;EAA8B,OAAO,EAAE,MAAM;EAAI;CAAuC,CAAA;AACjG"}
+{"version":3,"file":"root.js","names":["{ children, ...props }: VolumePopoverRootProps","<VolumePopoverState {...props}>{children}</VolumePopoverState>","<Popover.Root {...props}>\n      <VolumePopoverState {...props}>{children}</VolumePopoverState>\n    </Popover.Root>","Popover.Root"],"sources":["../../../../src/ui/volume-popover/root.tsx"],"sourcesContent":["import { VolumePopoverCore } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\nimport type { MediaVolumeState } from '@videojs/media';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { Popover } from '../popover';\nimport { usePopoverContext } from '../popover/context';\nimport type { PopoverRootProps } from '../popover/root';\nimport { VolumePopoverContextProvider } from './context';\n\nconst unavailableVolume: MediaVolumeState = {\n  volume: 0,\n  muted: false,\n  volumeAvailability: 'unsupported',\n  mutedAvailability: 'unsupported',\n  setVolume: () => 0,\n  toggleMuted: () => false,\n};\n\nexport interface VolumePopoverRootProps extends PopoverRootProps {}\n\n/** Owns the popover interaction lifecycle and provides volume availability to the parts. */\nexport function VolumePopoverRoot({ children, ...props }: VolumePopoverRootProps): ReactNode {\n  return (\n    <Popover.Root {...props}>\n      <VolumePopoverState {...props}>{children}</VolumePopoverState>\n    </Popover.Root>\n  );\n}\n\n/**\n * Derives the volume-aware state inside the popover context. It subscribes to volume, owns the core, and reads the\n * core's state all in one component: a core mutated in one component and read in another is invisible to React\n * Compiler, which memoised the reading element and left the trigger in its mute-only fallback after volume became\n * available.\n */\nfunction VolumePopoverState({ children, ...props }: VolumePopoverRootProps): ReactNode {\n  // React Compiler cannot track state read through the mutable core instance.\n  'use no memo';\n\n  const volume = usePlayer(selectVolume);\n  const { popover, state: popoverState } = usePopoverContext();\n  const [core] = useState(() => new VolumePopoverCore(props));\n\n  core.setProps(props);\n  core.setMedia(volume ?? unavailableVolume);\n  core.setInput({ active: popoverState.open, status: popoverState.status });\n  const state = core.getState();\n\n  useEffect(() => {\n    if (state.hidden) popover.close('imperative-action');\n  }, [popover, state.hidden]);\n\n  return <VolumePopoverContextProvider value={{ state }}>{children}</VolumePopoverContextProvider>;\n}\n\nexport namespace VolumePopoverRoot {\n  export type Props = VolumePopoverRootProps;\n  export type State = VolumePopoverCore.State;\n}\n"],"mappings":";;;;;;;;;;AAYA,MAAM,oBAAsC;CAC1C,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,mBAAmB;CACnB,iBAAiB;CACjB,mBAAmB;AACrB;;AAKA,SAAgB,kBAAA,IAA6E;;CAAzD,IAAA;CAAa,IAAA;CAAfA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,aAAU,SAAZA;;;;;;;;CAG5BC,IAAAA;CAAgC,IAAA,EAAA,OAAA,YAAA,EAAA,OAAR,OAAA;EAAxB,KAAA,oBAAC,oBAAD;GAAoB,GAAI;GAAQ;EAA6B,CAAA;EAA7B,EAAA,KAAA;EAAR,EAAA,KAAA;;;CAD1BC,IAAAA;CAAkB,IAAA,EAAA,OAAA,SAAA,EAAA,OAChBD,IAAAA;EADF,KAAA,oBAACE,aAAD;GAAc,GAAI;GAChBF,UAAAA;EACY,CAAA;EAFI,EAAA,KAAA;EAChBA,EAAAA,KAAAA;;;CAFJ,OACEC;AAIJ;;;;;;;AAQA,SAAS,mBAAmB,EAAE,UAAU,GAAG,SAA4C;CAErF;CAEA,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,EAAE,SAAS,OAAO,iBAAiB,kBAAkB;CAC3D,MAAM,CAAC,QAAQ,eAAe,IAAI,kBAAkB,KAAK,CAAC;CAE1D,KAAK,SAAS,KAAK;CACnB,KAAK,SAAS,UAAU,iBAAiB;CACzC,KAAK,SAAS;EAAE,QAAQ,aAAa;EAAM,QAAQ,aAAa;CAAO,CAAC;CACxE,MAAM,QAAQ,KAAK,SAAS;CAE5B,gBAAgB;EACd,IAAI,MAAM,QAAQ,QAAQ,MAAM,mBAAmB;CACrD,GAAG,CAAC,SAAS,MAAM,MAAM,CAAC;CAE1B,OAAO,oBAAC,8BAAD;EAA8B,OAAO,EAAE,MAAM;EAAI;CAAuC,CAAA;AACjG"}

package/dist/dev/utils/use-attach-media.d.ts

@@ -2,11 +2,17 @@ import { EngineAdapter } from "@videojs/media";
 import { RefCallback } from "react";
 //#region src/utils/use-attach-media.d.ts
 /**
- * Returns a callback ref that attaches an HTML media element to a playback adapter and detaches it during cleanup.
+ * Returns a callback ref that attaches an element to a playback adapter and detaches it when the element or the adapter
+ * changes, when the element goes away, and on unmount.
+ *
+ * React hands a callback ref `null` and then the same element again whenever the ref changes identity, which happens
+ * every render when it is composed with an inline `ref={(el) => ...}` from a parent. Attaching only when the element or
+ * the adapter actually changed, and deferring detach to a layout effect that runs after the commit's refs, keeps that
+ * from tearing the engine down and rebuilding it.
  *
  * @param media - Playback adapter to attach and detach.
  */
-declare function useAttachMedia<T extends HTMLMediaElement>(media: EngineAdapter): RefCallback<T>;
+declare function useAttachMedia<T extends Element>(media: EngineAdapter): RefCallback<T>;
 //#endregion
 export { useAttachMedia };
 //# sourceMappingURL=use-attach-media.d.ts.map

package/dist/dev/utils/use-attach-media.js

@@ -1,16 +1,73 @@
-import { useCallback } from "react";
+import { c } from "react-compiler-runtime";
+import { useLayoutEffect, useRef } from "react";
 //#region src/utils/use-attach-media.ts
 /**
-* Returns a callback ref that attaches an HTML media element to a playback adapter and detaches it during cleanup.
+* Returns a callback ref that attaches an element to a playback adapter and detaches it when the element or the adapter
+* changes, when the element goes away, and on unmount.
+*
+* React hands a callback ref `null` and then the same element again whenever the ref changes identity, which happens
+* every render when it is composed with an inline `ref={(el) => ...}` from a parent. Attaching only when the element or
+* the adapter actually changed, and deferring detach to a layout effect that runs after the commit's refs, keeps that
+* from tearing the engine down and rebuilding it.
 *
 * @param media - Playback adapter to attach and detach.
 */
 function useAttachMedia(media) {
-	return useCallback((element) => {
-		if (element) media.attach?.(element);
-		else media.detach?.();
-		return () => media.detach?.();
-	}, [media]);
+	const $ = c(7);
+	const elementRef = useRef(null);
+	const attachedRef = useRef(null);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => {
+			const attached = attachedRef.current;
+			attachedRef.current = null;
+			attached?.media.detach?.();
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const detach = t0;
+	let t1;
+	if ($[1] !== media) {
+		t1 = () => {
+			const element = elementRef.current;
+			const attached_0 = attachedRef.current;
+			if (attached_0 && (attached_0.element !== element || attached_0.media !== media)) detach();
+			if (element && !attachedRef.current) {
+				media.attach?.(element);
+				attachedRef.current = {
+					media,
+					element
+				};
+			}
+		};
+		$[1] = media;
+		$[2] = t1;
+	} else t1 = $[2];
+	const sync = t1;
+	let t2;
+	if ($[3] !== sync) {
+		t2 = (element_0) => {
+			elementRef.current = element_0;
+			if (element_0) sync();
+		};
+		$[3] = sync;
+		$[4] = t2;
+	} else t2 = $[4];
+	const ref = t2;
+	useLayoutEffect(sync);
+	let t3;
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => detach;
+		t4 = [detach];
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		t3 = $[5];
+		t4 = $[6];
+	}
+	useLayoutEffect(t3, t4);
+	return ref;
 }
 //#endregion
 export { useAttachMedia };

package/dist/dev/utils/use-attach-media.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["import type { EngineAdapter } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\n/**\n * Returns a callback ref that attaches an HTML media element to a playback adapter and detaches it during cleanup.\n *\n * @param media - Playback adapter to attach and detach.\n */\nexport function useAttachMedia<T extends HTMLMediaElement>(media: EngineAdapter): RefCallback<T> {\n  return useCallback(\n    (element: T | null) => {\n      if (element) media.attach?.(element);\n      else media.detach?.();\n\n      return () => media.detach?.();\n    },\n    [media]\n  );\n}\n"],"mappings":";;;;;;;AASA,SAAgB,eAA2C,OAAsC;CAC/F,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EAEpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}
+{"version":3,"file":"use-attach-media.js","names":["() => {\n    const attached = attachedRef.current;\n\n    attachedRef.current = null;\n    attached?.media.detach?.();\n  }","useCallback(() => {\n    const attached = attachedRef.current;\n\n    attachedRef.current = null;\n    attached?.media.detach?.();\n  }, [])","() => {\n    const element = elementRef.current;\n    const attached = attachedRef.current;\n\n    if (attached && (attached.element !== element || attached.media !== media)) detach();\n\n    if (element && !attachedRef.current) {\n      media.attach?.(element);\n      attachedRef.current = { media, element };\n    }\n  }","attached","useCallback(() => {\n    const element = elementRef.current;\n    const attached = attachedRef.current;\n\n    if (attached && (attached.element !== element || attached.media !== media)) detach();\n\n    if (element && !attachedRef.current) {\n      media.attach?.(element);\n      attachedRef.current = { media, element };\n    }\n  }, [media, detach])","(element) => {\n      elementRef.current = element;\n\n      if (element) sync();\n    }","element","useCallback<RefCallback<T>>(\n    (element) => {\n      elementRef.current = element;\n\n      if (element) sync();\n    },\n    [sync]\n  )","() => detach","[detach]"],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["import type { EngineAdapter } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback, useLayoutEffect, useRef } from 'react';\n\n/**\n * Returns a callback ref that attaches an element to a playback adapter and detaches it when the element or the adapter\n * changes, when the element goes away, and on unmount.\n *\n * React hands a callback ref `null` and then the same element again whenever the ref changes identity, which happens\n * every render when it is composed with an inline `ref={(el) => ...}` from a parent. Attaching only when the element or\n * the adapter actually changed, and deferring detach to a layout effect that runs after the commit's refs, keeps that\n * from tearing the engine down and rebuilding it.\n *\n * @param media - Playback adapter to attach and detach.\n */\nexport function useAttachMedia<T extends Element>(media: EngineAdapter): RefCallback<T> {\n  const elementRef = useRef<T | null>(null);\n  const attachedRef = useRef<{ media: EngineAdapter; element: T } | null>(null);\n\n  const detach = useCallback(() => {\n    const attached = attachedRef.current;\n\n    attachedRef.current = null;\n    attached?.media.detach?.();\n  }, []);\n\n  // Reconciles what the adapter is attached to with the element React last handed the ref.\n  const sync = useCallback(() => {\n    const element = elementRef.current;\n    const attached = attachedRef.current;\n\n    if (attached && (attached.element !== element || attached.media !== media)) detach();\n\n    if (element && !attachedRef.current) {\n      media.attach?.(element);\n      attachedRef.current = { media, element };\n    }\n  }, [media, detach]);\n\n  // Attach while the refs run so it lands before this commit's effects. A `null` only records the element as gone; the\n  // layout effect decides whether it was really removed or is about to be handed back.\n  const ref = useCallback<RefCallback<T>>(\n    (element) => {\n      elementRef.current = element;\n\n      if (element) sync();\n    },\n    [sync]\n  );\n\n  // Runs after this commit's refs: detaches when the element was removed, and re-attaches after a StrictMode simulated\n  // unmount. Unmount itself runs the cleanup before the ref is handed `null`, so that detaches outright.\n  useLayoutEffect(sync);\n  useLayoutEffect(() => detach, [detach]);\n\n  return ref;\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAgB,eAAkC,OAAsC;;CACtF,MAAM,aAAa,OAAiB,IAAI;CACxC,MAAM,cAAc,OAAoD,IAAI;CAEjDA,IAAAA;;EAAM,WAAA;GAC/B,MAAM,WAAW,YAAY;GAE7B,YAAY,UAAU;GACtB,UAAU,MAAM,SAAS;EAC3B;;;CALA,MAAM,SAASC;CAQUC,IAAAA;CAI6C,IAAA,EAAA,OAAA,OAAA;EAJ7C,WAAM;GAC7B,MAAM,UAAU,WAAW;GAC3B,MAAMC,aAAW,YAAY;GAE7B,IAAIA,eAAaA,WAAS,YAAY,WAAWA,WAAS,UAAU,QAAQ,OAAO;GAEnF,IAAI,WAAW,CAAC,YAAY,SAAS;IACnC,MAAM,SAAS,OAAO;IACtB,YAAY,UAAU;KAAE;KAAO;IAAQ;GACzC;EACF;EANsE,EAAA,KAAA;;;CAJtE,MAAM,OAAOC;CAeXC,IAAAA;CAGe,IAAA,EAAA,OAAA,MAAA;EAHf,MAAC,cAAY;GACX,WAAW,UAAUC;GAErB,IAAIA,WAAS,KAAK;EACpB;EADe,EAAA,KAAA;;;CAJjB,MAAM,MAAMC;CAWZ,gBAAgB,IAAI;CACJC,IAAAA;CAAcC,IAAAA;;EAAd,WAAM;EAAQ,KAAA,CAAC,MAAM;;;;;;;CAArC,gBAAgBD,IAAcC,EAAQ;CAEtC,OAAO;AACT"}

package/dist/dev/utils/use-destroy.js

@@ -1,4 +1,5 @@
 import { useLatestRef } from "./use-latest-ref.js";
+import { c } from "react-compiler-runtime";
 import { useEffect, useRef } from "react";
 //#region src/utils/use-destroy.ts
 /**
@@ -14,21 +15,36 @@ import { useEffect, useRef } from "react";
 *   unmount.
 */
 function useDestroy(instance, setup, teardown) {
+	const $ = c(6);
 	const pendingRef = useRef(null);
 	const setupRef = useLatestRef(setup);
 	const teardownRef = useLatestRef(teardown);
-	useEffect(() => {
-		if (pendingRef.current !== null) {
-			clearTimeout(pendingRef.current);
-			pendingRef.current = null;
-		} else setupRef.current?.();
-		return () => {
-			pendingRef.current = setTimeout(() => {
-				teardownRef.current?.();
-				instance.destroy();
-			}, 0);
+	let t0;
+	if ($[0] !== instance || $[1] !== setupRef || $[2] !== teardownRef) {
+		t0 = () => {
+			if (pendingRef.current !== null) {
+				clearTimeout(pendingRef.current);
+				pendingRef.current = null;
+			} else setupRef.current?.();
+			return () => {
+				pendingRef.current = setTimeout(() => {
+					teardownRef.current?.();
+					instance.destroy();
+				}, 0);
+			};
 		};
-	}, [instance]);
+		$[0] = instance;
+		$[1] = setupRef;
+		$[2] = teardownRef;
+		$[3] = t0;
+	} else t0 = $[3];
+	let t1;
+	if ($[4] !== instance) {
+		t1 = [instance];
+		$[4] = instance;
+		$[5] = t1;
+	} else t1 = $[5];
+	useEffect(t0, t1);
 }
 //#endregion
 export { useDestroy };

package/dist/dev/utils/use-destroy.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { useLatestRef } from './use-latest-ref';\n\ninterface Destroyable {\n  destroy(): void;\n}\n\n/**\n * Destroy an instance on unmount, deferring destruction to survive React StrictMode's simulated unmount/re-mount cycle.\n *\n * StrictMode runs effects, then immediately runs cleanup, then re-runs effects — all synchronously. By deferring\n * `destroy()` to a macrotask, the re-mount effect can cancel it before it fires.\n *\n * @param instance - Object with a `destroy()` method.\n * @param setup - Optional setup called on first mount. Skipped on StrictMode re-mount since the previous setup was\n *   never torn down.\n * @param teardown - Optional teardown called right before `destroy()` on real unmount. Skipped on StrictMode simulated\n *   unmount.\n */\nexport function useDestroy(instance: Destroyable, setup?: () => void, teardown?: () => void): void {\n  const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const setupRef = useLatestRef(setup);\n  const teardownRef = useLatestRef(teardown);\n\n  useEffect(() => {\n    if (pendingRef.current !== null) {\n      clearTimeout(pendingRef.current);\n      pendingRef.current = null;\n    } else {\n      setupRef.current?.();\n    }\n\n    return () => {\n      pendingRef.current = setTimeout(() => {\n        teardownRef.current?.();\n        instance.destroy();\n      }, 0);\n    };\n  }, [instance]);\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,SAAgB,WAAW,UAAuB,OAAoB,UAA6B;CACjG,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,cAAc,aAAa,QAAQ;CAEzC,gBAAgB;EACd,IAAI,WAAW,YAAY,MAAM;GAC/B,aAAa,WAAW,OAAO;GAC/B,WAAW,UAAU;EACvB,OACE,SAAS,UAAU;EAGrB,aAAa;GACX,WAAW,UAAU,iBAAiB;IACpC,YAAY,UAAU;IACtB,SAAS,QAAQ;GACnB,GAAG,CAAC;EACN;CACF,GAAG,CAAC,QAAQ,CAAC;AACf"}
+{"version":3,"file":"use-destroy.js","names":["() => {\n    if (pendingRef.current !== null) {\n      clearTimeout(pendingRef.current);\n      pendingRef.current = null;\n    } else {\n      setupRef.current?.();\n    }\n\n    return () => {\n      pendingRef.current = setTimeout(() => {\n        teardownRef.current?.();\n        instance.destroy();\n      }, 0);\n    };\n  }","setupRef.current","teardownRef.current","[instance]"],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { useLatestRef } from './use-latest-ref';\n\ninterface Destroyable {\n  destroy(): void;\n}\n\n/**\n * Destroy an instance on unmount, deferring destruction to survive React StrictMode's simulated unmount/re-mount cycle.\n *\n * StrictMode runs effects, then immediately runs cleanup, then re-runs effects — all synchronously. By deferring\n * `destroy()` to a macrotask, the re-mount effect can cancel it before it fires.\n *\n * @param instance - Object with a `destroy()` method.\n * @param setup - Optional setup called on first mount. Skipped on StrictMode re-mount since the previous setup was\n *   never torn down.\n * @param teardown - Optional teardown called right before `destroy()` on real unmount. Skipped on StrictMode simulated\n *   unmount.\n */\nexport function useDestroy(instance: Destroyable, setup?: () => void, teardown?: () => void): void {\n  const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const setupRef = useLatestRef(setup);\n  const teardownRef = useLatestRef(teardown);\n\n  useEffect(() => {\n    if (pendingRef.current !== null) {\n      clearTimeout(pendingRef.current);\n      pendingRef.current = null;\n    } else {\n      setupRef.current?.();\n    }\n\n    return () => {\n      pendingRef.current = setTimeout(() => {\n        teardownRef.current?.();\n        instance.destroy();\n      }, 0);\n    };\n  }, [instance]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,SAAgB,WAAW,UAAuB,OAAoB,UAA6B;;CACjG,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,cAAc,aAAa,QAAQ;CAE/BA,IAAAA;CAWJ,IAAA,EAAA,OAAA,YAAA,EAAA,OANFC,YAAAA,EAAAA,OAKEC,aAAAA;EAVI,WAAM;GACd,IAAI,WAAW,YAAY,MAAM;IAC/B,aAAa,WAAW,OAAO;IAC/B,WAAW,UAAU;GACvB,OACE,SAAS,UAAU;GAGrB,aAAa;IACX,WAAW,UAAU,iBAAiB;KACpC,YAAY,UAAU;KACtB,SAAS,QAAQ;IACnB,GAAG,CAAC;GACN;EACF;EAHM,EAAA,KAAA;EANFD,EAAAA,KAAAA;EAKEC,EAAAA,KAAAA;;;CAIHC,IAAAA;CAAC,IAAA,EAAA,OAAA,UAAA;EAAD,KAAA,CAAC,QAAQ;EAAR,EAAA,KAAA;;;CAdJ,UAAUH,IAcPG,EAAU;AACf"}

package/dist/dev/utils/use-force-render.js

@@ -1,9 +1,12 @@
 import { useReducer } from "react";
 //#region src/utils/use-force-render.ts
 function useForceRender() {
-	const [, forceRender] = useReducer((c) => c + 1, 0);
+	const [, forceRender] = useReducer(_temp, 0);
 	return forceRender;
 }
+function _temp(c) {
+	return c + 1;
+}
 //#endregion
 export { useForceRender };
 

package/dist/dev/utils/use-force-render.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["import { useReducer } from 'react';\n\nexport function useForceRender() {\n  const [, forceRender] = useReducer((c: number) => c + 1, 0);\n\n  return forceRender;\n}\n\nexport namespace useForceRender {\n  export type Result = () => void;\n}\n"],"mappings":";;AAEA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,CAAC;CAE1D,OAAO;AACT"}
+{"version":3,"file":"use-force-render.js","names":["(c: number) => c + 1"],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["import { useReducer } from 'react';\n\nexport function useForceRender() {\n  const [, forceRender] = useReducer((c: number) => c + 1, 0);\n\n  return forceRender;\n}\n\nexport namespace useForceRender {\n  export type Result = () => void;\n}\n"],"mappings":";;AAEA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,WAAWA,OAAsB,CAAC;CAE1D,OAAO;AACT;AAHqC,SAAA,MAAC,GAAA;CAAc,OAAA,IAAI"}

package/dist/dev/utils/use-media-events.d.ts

@@ -0,0 +1,72 @@
+import { RefCallback } from "react";
+//#region src/utils/use-media-events.d.ts
+/**
+ * React event prop names for the standard media events, mapped to the event type each one handles. Mirrors the media
+ * subset of React's `DOMAttributes` so a handler written for `<video>` reads the same on an embed.
+ */
+declare const MEDIA_EVENT_PROPS: {
+  readonly onAbort: 'abort';
+  readonly onCanPlay: 'canplay';
+  readonly onCanPlayThrough: 'canplaythrough';
+  readonly onDurationChange: 'durationchange';
+  readonly onEmptied: 'emptied';
+  readonly onEnded: 'ended';
+  readonly onError: 'error';
+  readonly onLoadedData: 'loadeddata';
+  readonly onLoadedMetadata: 'loadedmetadata';
+  readonly onLoadStart: 'loadstart';
+  readonly onPause: 'pause';
+  readonly onPlay: 'play';
+  readonly onPlaying: 'playing';
+  readonly onProgress: 'progress';
+  readonly onRateChange: 'ratechange';
+  readonly onSeeked: 'seeked';
+  readonly onSeeking: 'seeking';
+  readonly onStalled: 'stalled';
+  readonly onSuspend: 'suspend';
+  readonly onTimeUpdate: 'timeupdate';
+  readonly onVolumeChange: 'volumechange';
+  readonly onWaiting: 'waiting';
+};
+type MediaEventPropName = keyof typeof MEDIA_EVENT_PROPS;
+/**
+ * Handler for a standard media event dispatched by a playback adapter.
+ *
+ * The event is the plain `Event` the adapter dispatched on itself, so `currentTarget` is the adapter rather than a DOM
+ * element; read playback state such as `currentTime` or `paused` from it the way a `<video>` handler would.
+ */
+type MediaEventHandler<Target extends EventTarget = EventTarget> = (event: Event & {
+  readonly currentTarget: Target;
+}) => void;
+/**
+ * Standard media event props for a media component whose playback engine is not an `HTMLMediaElement`, such as an
+ * iframe embed. Named after the React props on `<video>` (`onPlay`, `onTimeUpdate`, …) so handlers port across.
+ */
+type MediaEventProps<Target extends EventTarget = EventTarget> = { [Prop in MediaEventPropName]?: MediaEventHandler<Target> | undefined; };
+/**
+ * Route standard media event props to a playback adapter that dispatches media events on itself.
+ *
+ * React only wires `onPlay`, `onTimeUpdate`, and friends to `<video>` and `<audio>`; on an `<iframe>` they go nowhere.
+ * This splits those props out, subscribes them on the adapter, and returns everything else for the rendered element
+ * along with a ref for that element. Listeners bind from the ref rather than an effect: adapters dispatch `loadstart`
+ * (or `error`) synchronously inside `attach()`, and effects run after every ref has fired, so an effect-bound
+ * `onLoadStart` would miss the initial load. Compose the ref ahead of the one that attaches the media so the listeners
+ * are in place first. Listeners bind once per adapter and always call the latest handler, so re-renders never
+ * resubscribe.
+ *
+ * @param props - Component props, which may include media event handlers.
+ * @param media - Adapter that dispatches the standard media events. Omit it when the rendered element is the media
+ *   itself, such as a third-party web component; the listeners then bind to whatever the ref receives.
+ */
+declare function useMediaEvents<Props extends Record<string, unknown>>(props: Props, media?: EventTarget | null): useMediaEvents.Result<Props>;
+declare namespace useMediaEvents {
+  interface Result<Props> {
+    /** Ref for the rendered element; compose it ahead of the ref that attaches the media. */
+    ref: RefCallback<EventTarget>;
+    /** The props left over once the media event handlers are taken out. */
+    props: Omit<Props, MediaEventPropName>;
+  }
+}
+//#endregion
+export { MediaEventHandler, MediaEventPropName, MediaEventProps, useMediaEvents };
+//# sourceMappingURL=use-media-events.d.ts.map

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

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

package/dist/dev/utils/use-media-events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-events.js","names":["(element) => {\n      controllerRef.current?.abort();\n      controllerRef.current = null;\n\n      const target = element && (media ?? element);\n      if (!target) return;\n\n      const controller = new AbortController();\n\n      controllerRef.current = controller;\n\n      for (const prop of MEDIA_EVENT_PROP_NAMES) {\n        const listener = (event: Event) => {\n          const handler = handlersRef.current[prop];\n\n          if (isFunction(handler)) handler(event);\n        };\n\n        target.addEventListener(MEDIA_EVENT_PROPS[prop], listener, { signal: controller.signal });\n      }\n\n      return () => controller.abort();\n    }","handlersRef.current","useCallback<RefCallback<EventTarget>>(\n    (element) => {\n      controllerRef.current?.abort();\n      controllerRef.current = null;\n\n      const target = element && (media ?? element);\n      if (!target) return;\n\n      const controller = new AbortController();\n\n      controllerRef.current = controller;\n\n      for (const prop of MEDIA_EVENT_PROP_NAMES) {\n        const listener = (event: Event) => {\n          const handler = handlersRef.current[prop];\n\n          if (isFunction(handler)) handler(event);\n        };\n\n        target.addEventListener(MEDIA_EVENT_PROPS[prop], listener, { signal: controller.signal });\n      }\n\n      return () => controller.abort();\n    },\n    [media, handlersRef]\n  )","{ ref, props: rest as Omit<Props, MediaEventPropName> }","rest as Omit<Props, MediaEventPropName>"],"sources":["../../../src/utils/use-media-events.ts"],"sourcesContent":["import { isFunction } from '@videojs/utils/predicate';\nimport { type RefCallback, useCallback, useRef } from 'react';\n\nimport { useLatestRef } from './use-latest-ref';\n\n/**\n * React event prop names for the standard media events, mapped to the event type each one handles. Mirrors the media\n * subset of React's `DOMAttributes` so a handler written for `<video>` reads the same on an embed.\n */\nconst MEDIA_EVENT_PROPS = {\n  onAbort: 'abort',\n  onCanPlay: 'canplay',\n  onCanPlayThrough: 'canplaythrough',\n  onDurationChange: 'durationchange',\n  onEmptied: 'emptied',\n  onEnded: 'ended',\n  onError: 'error',\n  onLoadedData: 'loadeddata',\n  onLoadedMetadata: 'loadedmetadata',\n  onLoadStart: 'loadstart',\n  onPause: 'pause',\n  onPlay: 'play',\n  onPlaying: 'playing',\n  onProgress: 'progress',\n  onRateChange: 'ratechange',\n  onSeeked: 'seeked',\n  onSeeking: 'seeking',\n  onStalled: 'stalled',\n  onSuspend: 'suspend',\n  onTimeUpdate: 'timeupdate',\n  onVolumeChange: 'volumechange',\n  onWaiting: 'waiting',\n} as const;\n\nexport type MediaEventPropName = keyof typeof MEDIA_EVENT_PROPS;\n\nconst MEDIA_EVENT_PROP_NAMES = Object.keys(MEDIA_EVENT_PROPS) as MediaEventPropName[];\n\n/**\n * Handler for a standard media event dispatched by a playback adapter.\n *\n * The event is the plain `Event` the adapter dispatched on itself, so `currentTarget` is the adapter rather than a DOM\n * element; read playback state such as `currentTime` or `paused` from it the way a `<video>` handler would.\n */\nexport type MediaEventHandler<Target extends EventTarget = EventTarget> = (\n  event: Event & { readonly currentTarget: Target }\n) => void;\n\n/**\n * Standard media event props for a media component whose playback engine is not an `HTMLMediaElement`, such as an\n * iframe embed. Named after the React props on `<video>` (`onPlay`, `onTimeUpdate`, …) so handlers port across.\n */\nexport type MediaEventProps<Target extends EventTarget = EventTarget> = {\n  [Prop in MediaEventPropName]?: MediaEventHandler<Target> | undefined;\n};\n\n/**\n * Route standard media event props to a playback adapter that dispatches media events on itself.\n *\n * React only wires `onPlay`, `onTimeUpdate`, and friends to `<video>` and `<audio>`; on an `<iframe>` they go nowhere.\n * This splits those props out, subscribes them on the adapter, and returns everything else for the rendered element\n * along with a ref for that element. Listeners bind from the ref rather than an effect: adapters dispatch `loadstart`\n * (or `error`) synchronously inside `attach()`, and effects run after every ref has fired, so an effect-bound\n * `onLoadStart` would miss the initial load. Compose the ref ahead of the one that attaches the media so the listeners\n * are in place first. Listeners bind once per adapter and always call the latest handler, so re-renders never\n * resubscribe.\n *\n * @param props - Component props, which may include media event handlers.\n * @param media - Adapter that dispatches the standard media events. Omit it when the rendered element is the media\n *   itself, such as a third-party web component; the listeners then bind to whatever the ref receives.\n */\nexport function useMediaEvents<Props extends Record<string, unknown>>(\n  props: Props,\n  media?: EventTarget | null\n): useMediaEvents.Result<Props> {\n  const handlers: Partial<Record<MediaEventPropName, unknown>> = {};\n  const rest: Record<string, unknown> = {};\n\n  for (const key in props) {\n    if (key in MEDIA_EVENT_PROPS) handlers[key as MediaEventPropName] = props[key];\n    else rest[key] = props[key];\n  }\n\n  const handlersRef = useLatestRef(handlers);\n  // React 18 signals detach by calling the ref with `null` and ignores the returned cleanup, so the controller is kept\n  // where that call can reach it.\n  const controllerRef = useRef<AbortController | null>(null);\n\n  const ref = useCallback<RefCallback<EventTarget>>(\n    (element) => {\n      controllerRef.current?.abort();\n      controllerRef.current = null;\n\n      const target = element && (media ?? element);\n      if (!target) return;\n\n      const controller = new AbortController();\n\n      controllerRef.current = controller;\n\n      for (const prop of MEDIA_EVENT_PROP_NAMES) {\n        const listener = (event: Event) => {\n          const handler = handlersRef.current[prop];\n\n          if (isFunction(handler)) handler(event);\n        };\n\n        target.addEventListener(MEDIA_EVENT_PROPS[prop], listener, { signal: controller.signal });\n      }\n\n      return () => controller.abort();\n    },\n    [media, handlersRef]\n  );\n\n  return { ref, props: rest as Omit<Props, MediaEventPropName> };\n}\n\nexport namespace useMediaEvents {\n  export interface Result<Props> {\n    /** Ref for the rendered element; compose it ahead of the ref that attaches the media. */\n    ref: RefCallback<EventTarget>;\n    /** The props left over once the media event handlers are taken out. */\n    props: Omit<Props, MediaEventPropName>;\n  }\n}\n"],"mappings":";;;;;;;;;AASA,MAAM,oBAAoB;CACxB,SAAS;CACT,WAAW;CACX,kBAAkB;CAClB,kBAAkB;CAClB,WAAW;CACX,SAAS;CACT,SAAS;CACT,cAAc;CACd,kBAAkB;CAClB,aAAa;CACb,SAAS;CACT,QAAQ;CACR,WAAW;CACX,YAAY;CACZ,cAAc;CACd,UAAU;CACV,WAAW;CACX,WAAW;CACX,WAAW;CACX,cAAc;CACd,gBAAgB;CAChB,WAAW;AACb;AAIA,MAAM,yBAAyB,OAAO,KAAK,iBAAiB;;;;;;;;;;;;;;;;AAmC5D,SAAgB,eACd,OACA,OAC8B;;CACxB,IAAA;CACA,IAAA;CAEY,IAAA,EAAA,OAAA,OAAA;EAHlB,WAA+D,CAAC;EAChE,OAAsC,CAAC;EAEvC,KAAK,MAAM,OAAO,OAChB,IAAI,OAAO,mBAAmB,SAAS,OAA6B,MAAM;OACrE,KAAK,OAAO,MAAM;EAFP,EAAA,KAAA;;;;;;;CAKlB,MAAM,cAAc,aAAa,QAAQ;CAGzC,MAAM,gBAAgB,OAA+B,IAAI;CAGvDA,IAAAA;CAasBC,IAAAA,EAAAA,OAAAA,eAAAA,EAAAA,OATO,OAAA;EAJ7B,MAAC,YAAY;GACX,cAAc,SAAS,MAAM;GAC7B,cAAc,UAAU;GAExB,MAAM,SAAS,YAAY,SAAS;GACpC,IAAI,CAAC,QAAQ;GAEb,MAAM,aAAa,IAAI,gBAAgB;GAEvC,cAAc,UAAU;GAExB,KAAK,MAAM,QAAQ,wBAAwB;IACzC,MAAM,YAAY,UAAiB;KACjC,MAAM,UAAU,YAAY,QAAQ;KAEpC,IAAI,WAAW,OAAO,GAAG,QAAQ,KAAK;IACxC;IAEA,OAAO,iBAAiB,kBAAkB,OAAO,UAAU,EAAE,QAAQ,WAAW,OAAO,CAAC;GAC1F;GAEA,aAAa,WAAW,MAAM;EAChC;EATsBA,EAAAA,KAAAA;EATO,EAAA,KAAA;;;CAL/B,MAAM,MAAMC;CA2BS,MAAA,KAAA;CAAdC,IAAAA;CAAE,IAAA,EAAA,OAAA,OAAA,EAAA,OAAYC,IAAAA;EAAd,KAAA;GAAE;GAAK,OAAOA;EAAwC;EAApD,EAAA,KAAA;EAAYA,EAAAA,KAAAA;;;CAArB,OAAOD;AACT"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"use-media-extension.js","names":["() => new ExtensionClass()","() => {\n    if (!(media instanceof HTMLMediaAdapter)) return;\n\n    return addMediaExtension(media as HTMLMediaAdapter<HTMLMediaTargetLike, any>, component);\n  }","[media, component]"],"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;CACMA,IAAAA;CAAU,IAAA,EAAA,OAAA,gBAAA;EAAV,WAAM,IAAI,eAAe;EAAf,EAAA,KAAA;;;CAAvC,MAAM,CAAC,aAAa,SAASA,EAA0B;CAEvD,WAAW,SAAS;CAEVC,IAAAA;CAIPC,IAAAA;CAD6E,IAAA,EAAA,OAAA,aAAA,EAAA,OAFxE,OAAA;EADE,WAAM;GACd,IAAI,EAAE,iBAAiB,mBAAmB;GAE1C,OAAO,kBAAkB,OAAqD,SAAS;EACzF;EAAG,KAAA,CAAC,OAAO,SAAS;EAD4D,EAAA,KAAA;EAFxE,EAAA,KAAA;;;;;;;CADR,UAAUD,IAIPC,EAAkB;CAErB,OAAO;AACT"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"use-media-instance.js","names":["() => new MediaClass()","() => {\n      setup?.(instance);\n      setMedia?.(instance);\n    }","() => setMedia?.((prev) => (prev === instance ? null : prev))"],"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;;CACkBA,IAAAA;CAAU,IAAA,EAAA,OAAA,YAAA;EAAV,WAAM,IAAI,WAAW;EAAX,EAAA,KAAA;;;CAAtC,MAAM,CAAC,YAAY,SAASA,EAAsB;CAClD,MAAM,WAAW,eAAe;CAI9BC,IAAAA;CACU,IAAA,EAAA,OAAA,YAAA,EAAA,OACR,YAAA,EAAA,OADA,OAAA;EADF,WAAM;GACJ,QAAQ,QAAQ;GAChB,WAAW,QAAQ;EACrB;EAFU,EAAA,KAAA;EACR,EAAA,KAAA;EADA,EAAA,KAAA;;;CAGFC,IAAAA;CAAqC,IAAA,EAAA,OAAA,YAAA,EAAA,OAA/B,UAAA;EAAN,WAAM,YAAY,SAAU,SAAS,WAAW,OAAO,IAAK;EAAvB,EAAA,KAAA;EAA/B,EAAA,KAAA;;;CANR,WACE,UACAD,IAIAC,EACF;CAEA,OAAO;AACT"}

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

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