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

package/dist/default/ui/tooltip/popup.js

@@ -5,37 +5,70 @@ import { usePopupPosition } from "../popover/use-popup-position.js";
 import { TooltipLabel } from "./label.js";
 import { TooltipShortcut } from "./shortcut.js";
 import { TooltipCSSVars } from "@videojs/core";
-import { forwardRef, useCallback, useMemo, useRef } from "react";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/tooltip/popup.tsx
 /**
 * Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript
 * fallback.
 */
-const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style, children, ...elementProps }, forwardedRef) {
+const TooltipPopup = forwardRef(function TooltipPopup(t0, forwardedRef) {
+	const $ = c(15);
+	const { render, className, style, children, ...elementProps } = t0;
 	const { core, tooltip, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, popupId, boundary, container } = useTooltipContext();
 	const internalRef = useRef(null);
-	const popupRef = useCallback((el) => {
-		tooltip.setPopupElement(el);
-	}, [tooltip]);
-	const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);
-	const posOpts = useMemo(() => ({
-		side: preferredSide,
-		align: state.align
-	}), [preferredSide, state.align]);
-	const positioningStyle = usePopupPosition({
-		open: state.open,
-		anchorName,
-		position: posOpts,
-		triggerSource: tooltip,
-		popupRef: internalRef,
-		boundary,
-		container,
-		cssVars: TooltipCSSVars,
-		onSideChange: setPositionedSide
-	});
+	let t1;
+	if ($[0] !== tooltip) {
+		t1 = (el) => {
+			tooltip.setPopupElement(el);
+		};
+		$[0] = tooltip;
+		$[1] = t1;
+	} else t1 = $[1];
+	const composedRef = useComposedRefs(forwardedRef, t1, internalRef);
+	let t2;
+	if ($[2] !== preferredSide || $[3] !== state.align) {
+		t2 = {
+			side: preferredSide,
+			align: state.align
+		};
+		$[2] = preferredSide;
+		$[3] = state.align;
+		$[4] = t2;
+	} else t2 = $[4];
+	const posOpts = t2;
+	let t3;
+	if ($[5] !== anchorName || $[6] !== boundary || $[7] !== container || $[8] !== posOpts || $[9] !== setPositionedSide || $[10] !== state.open || $[11] !== tooltip) {
+		t3 = {
+			open: state.open,
+			anchorName,
+			position: posOpts,
+			triggerSource: tooltip,
+			popupRef: internalRef,
+			boundary,
+			container,
+			cssVars: TooltipCSSVars,
+			onSideChange: setPositionedSide
+		};
+		$[5] = anchorName;
+		$[6] = boundary;
+		$[7] = container;
+		$[8] = posOpts;
+		$[9] = setPositionedSide;
+		$[10] = state.open;
+		$[11] = tooltip;
+		$[12] = t3;
+	} else t3 = $[12];
+	const positioningStyle = usePopupPosition(t3);
 	if (!state.open) return null;
-	const body = children !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, {})] });
+	let t4;
+	if ($[13] !== children) {
+		t4 = children !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, {})] });
+		$[13] = children;
+		$[14] = t4;
+	} else t4 = $[14];
+	const body = t4;
 	const { onFocusOut, ...restPopupProps } = tooltip.popupProps;
 	return renderElement("div", {
 		render,
@@ -62,5 +95,3 @@ const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style
 });
 //#endregion
 export { TooltipPopup };
-
-//# sourceMappingURL=popup.js.map

package/dist/default/ui/tooltip/provider.js

@@ -1,25 +1,47 @@
 import { TooltipGroupContextProvider } from "./group-context.js";
 import { TooltipGroupCore } from "@videojs/core";
+import { c } from "react-compiler-runtime";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/tooltip/provider.tsx
-function TooltipProvider({ delay, closeDelay, timeout, children }) {
-	const [group] = useState(() => new TooltipGroupCore({
-		delay,
-		closeDelay,
-		timeout
-	}));
+function TooltipProvider(t0) {
+	const $ = c(9);
+	const { delay, closeDelay, timeout, children } = t0;
+	let t1;
+	if ($[0] !== closeDelay || $[1] !== delay || $[2] !== timeout) {
+		t1 = () => new TooltipGroupCore({
+			delay,
+			closeDelay,
+			timeout
+		});
+		$[0] = closeDelay;
+		$[1] = delay;
+		$[2] = timeout;
+		$[3] = t1;
+	} else t1 = $[3];
+	const [group] = useState(t1);
 	group.setProps({
 		delay,
 		closeDelay,
 		timeout
 	});
-	return /* @__PURE__ */ jsx(TooltipGroupContextProvider, {
-		value: { group },
-		children
-	});
+	let t2;
+	if ($[4] !== group) {
+		t2 = { group };
+		$[4] = group;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== children || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(TooltipGroupContextProvider, {
+			value: t2,
+			children
+		});
+		$[6] = children;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
 }
 //#endregion
 export { TooltipProvider };
-
-//# sourceMappingURL=provider.js.map

package/dist/default/ui/tooltip/root.js

@@ -90,5 +90,3 @@ function TooltipRoot({ open: controlledOpen, defaultOpen = TooltipCore.defaultPr
 }
 //#endregion
 export { TooltipRoot };
-
-//# sourceMappingURL=root.js.map

package/dist/default/ui/tooltip/shortcut.js

@@ -20,5 +20,3 @@ const TooltipShortcut = forwardRef(function TooltipShortcut({ render, className,
 });
 //#endregion
 export { TooltipShortcut };
-
-//# sourceMappingURL=shortcut.js.map

package/dist/default/ui/tooltip/trigger.js

@@ -30,5 +30,3 @@ const TooltipTrigger = forwardRef(function TooltipTrigger({ render, className, s
 });
 //#endregion
 export { TooltipTrigger };
-
-//# sourceMappingURL=trigger.js.map

package/dist/default/ui/volume-indicator/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/ui/volume-indicator/context.tsx
 const VolumeIndicatorContext = createContext(null);
-function VolumeIndicatorProvider({ value, children }) {
-	return /* @__PURE__ */ jsx(VolumeIndicatorContext.Provider, {
-		value,
-		children
-	});
+function VolumeIndicatorProvider(t0) {
+	const $ = c(3);
+	const { value, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(VolumeIndicatorContext.Provider, {
+			value,
+			children
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 }
 function useVolumeIndicatorContext() {
 	const ctx = useContext(VolumeIndicatorContext);
@@ -15,5 +25,3 @@ function useVolumeIndicatorContext() {
 }
 //#endregion
 export { VolumeIndicatorProvider, useVolumeIndicatorContext };
-
-//# sourceMappingURL=context.js.map

package/dist/default/ui/volume-indicator/fill.js

@@ -32,5 +32,3 @@ function getVolumeIndicatorFillStyle(state, style) {
 }
 //#endregion
 export { VolumeIndicatorFill };
-
-//# sourceMappingURL=fill.js.map

package/dist/default/ui/volume-indicator/index.parts.js

@@ -10,5 +10,3 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 });
 //#endregion
 export { VolumeIndicatorFill as Fill, VolumeIndicatorRoot as Root, VolumeIndicatorValue as Value, index_parts_exports };
-
-//# sourceMappingURL=index.parts.js.map

package/dist/default/ui/volume-indicator/root.js

@@ -3,32 +3,69 @@ import { renderElement } from "../../utils/use-render.js";
 import { useInputIndicatorRoot } from "../input-indicator/use-input-indicator-root.js";
 import { VolumeIndicatorProvider } from "./context.js";
 import { VolumeIndicatorCore, VolumeIndicatorDataAttrs, createInputIndicatorLabels } from "@videojs/core";
+import { c } from "react-compiler-runtime";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/volume-indicator/root.tsx
 const VolumeIndicatorRoot = forwardRef(function VolumeIndicatorRoot(componentProps, forwardedRef) {
+	const $ = c(12);
 	const { render, className, style, closeDelay, ...elementProps } = componentProps;
 	const translator = useTranslator();
-	const { elementRef, present, state } = useInputIndicatorRoot(() => new VolumeIndicatorCore(), {
-		closeDelay,
-		labels: createInputIndicatorLabels(translator)
-	}, { replayOnUpdate: false });
+	let t0;
+	if ($[0] !== translator) {
+		t0 = createInputIndicatorLabels(translator);
+		$[0] = translator;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== closeDelay || $[3] !== t0) {
+		t1 = {
+			closeDelay,
+			labels: t0
+		};
+		$[2] = closeDelay;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { replayOnUpdate: false };
+		$[5] = t2;
+	} else t2 = $[5];
+	const { elementRef, present, state } = useInputIndicatorRoot(_temp, t1, t2);
 	if (!present) return null;
-	return /* @__PURE__ */ jsx(VolumeIndicatorProvider, {
-		value: { state },
-		children: renderElement("div", {
-			render,
-			className,
-			style
-		}, {
-			state,
-			stateAttrMap: VolumeIndicatorDataAttrs,
-			ref: [forwardedRef, elementRef],
-			props: [elementProps]
-		})
+	const T0 = VolumeIndicatorProvider;
+	let t3;
+	if ($[6] !== state) {
+		t3 = { state };
+		$[6] = state;
+		$[7] = t3;
+	} else t3 = $[7];
+	const t4 = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: VolumeIndicatorDataAttrs,
+		ref: [forwardedRef, elementRef],
+		props: [elementProps]
 	});
+	let t5;
+	if ($[8] !== T0 || $[9] !== t3 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			value: t3,
+			children: t4
+		});
+		$[8] = T0;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
 });
+function _temp() {
+	return new VolumeIndicatorCore();
+}
 //#endregion
 export { VolumeIndicatorRoot };
-
-//# sourceMappingURL=root.js.map

package/dist/default/ui/volume-indicator/value.js

@@ -18,5 +18,3 @@ const VolumeIndicatorValue = forwardRef(function VolumeIndicatorValue(componentP
 });
 //#endregion
 export { VolumeIndicatorValue };
-
-//# sourceMappingURL=value.js.map

package/dist/default/ui/volume-popover/context.js

@@ -9,5 +9,3 @@ function useVolumePopoverContext() {
 }
 //#endregion
 export { VolumePopoverContextProvider, useVolumePopoverContext };
-
-//# sourceMappingURL=context.js.map

package/dist/default/ui/volume-popover/index.parts.js

@@ -10,5 +10,3 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 });
 //#endregion
 export { VolumePopoverPopup as Popup, VolumePopoverRoot as Root, VolumePopoverTrigger as Trigger, index_parts_exports };
-
-//# sourceMappingURL=index.parts.js.map

package/dist/default/ui/volume-popover/popup.js

@@ -2,20 +2,34 @@ import { PopoverPopup } from "../popover/popup.js";
 import { useVolumePopoverContext } from "./context.js";
 import { VolumePopoverDataAttrs } from "@videojs/core";
 import { getStateDataAttrs } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/volume-popover/popup.tsx
 /** Positioned volume content. Omitted when volume level controls are unavailable. */
 const VolumePopoverPopup = forwardRef(function VolumePopoverPopup(props, forwardedRef) {
+	const $ = c(6);
 	const { state } = useVolumePopoverContext();
 	if (state.hidden) return null;
-	return /* @__PURE__ */ jsx(PopoverPopup, {
-		ref: forwardedRef,
-		...getStateDataAttrs(state, VolumePopoverDataAttrs),
-		...props
-	});
+	let t0;
+	if ($[0] !== state) {
+		t0 = getStateDataAttrs(state, VolumePopoverDataAttrs);
+		$[0] = state;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== forwardedRef || $[3] !== props || $[4] !== t0) {
+		t1 = /* @__PURE__ */ jsx(PopoverPopup, {
+			ref: forwardedRef,
+			...t0,
+			...props
+		});
+		$[2] = forwardedRef;
+		$[3] = props;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
 });
 //#endregion
 export { VolumePopoverPopup };
-
-//# sourceMappingURL=popup.js.map

package/dist/default/ui/volume-popover/root.js

@@ -4,6 +4,7 @@ import { PopoverRoot } from "../popover/root.js";
 import { VolumePopoverContextProvider } from "./context.js";
 import { VolumePopoverCore } from "@videojs/core";
 import { selectVolume } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/volume-popover/root.tsx
@@ -15,23 +16,59 @@ const unavailableVolume = {
 	setVolume: () => 0,
 	toggleMuted: () => false
 };
-/** Owns volume availability and the popover interaction lifecycle. */
-function VolumePopoverRoot({ children, ...props }) {
+/** Owns the popover interaction lifecycle and provides volume availability to the parts. */
+function VolumePopoverRoot(t0) {
+	const $ = c(9);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== children || $[4] !== props) {
+		t1 = /* @__PURE__ */ jsx(VolumePopoverState, {
+			...props,
+			children
+		});
+		$[3] = children;
+		$[4] = props;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== t1) {
+		t2 = /* @__PURE__ */ jsx(PopoverRoot, {
+			...props,
+			children: t1
+		});
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+}
+/**
+* Derives the volume-aware state inside the popover context. It subscribes to volume, owns the core, and reads the
+* core's state all in one component: a core mutated in one component and read in another is invisible to React
+* Compiler, which memoised the reading element and left the trigger in its mute-only fallback after volume became
+* available.
+*/
+function VolumePopoverState({ children, ...props }) {
+	"use no memo";
 	const volume = usePlayer(selectVolume);
+	const { popover, state: popoverState } = usePopoverContext();
 	const [core] = useState(() => new VolumePopoverCore(props));
 	core.setProps(props);
 	core.setMedia(volume ?? unavailableVolume);
-	return /* @__PURE__ */ jsx(PopoverRoot, {
-		...props,
-		children: /* @__PURE__ */ jsx(VolumePopoverState, {
-			core,
-			children
-		})
+	core.setInput({
+		active: popoverState.open,
+		status: popoverState.status
 	});
-}
-function VolumePopoverState({ core, children }) {
-	const { popover } = usePopoverContext();
-	core.setInput(popover.input.current);
 	const state = core.getState();
 	useEffect(() => {
 		if (state.hidden) popover.close("imperative-action");
@@ -43,5 +80,3 @@ function VolumePopoverState({ core, children }) {
 }
 //#endregion
 export { VolumePopoverRoot };
-
-//# sourceMappingURL=root.js.map

package/dist/default/ui/volume-popover/trigger.js

@@ -28,5 +28,3 @@ const VolumePopoverTrigger = forwardRef(function VolumePopoverTrigger({ render,
 });
 //#endregion
 export { VolumePopoverTrigger };
-
-//# sourceMappingURL=trigger.js.map

package/dist/default/ui/volume-slider/index.parts.js

@@ -16,5 +16,3 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 });
 //#endregion
 export { SliderFill as Fill, SliderPreview as Preview, VolumeSliderRoot as Root, SliderThumb as Thumb, SliderTrack as Track, SliderValue as Value, index_parts_exports };
-
-//# sourceMappingURL=index.parts.js.map

package/dist/default/ui/volume-slider/root.js

@@ -118,5 +118,3 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 });
 //#endregion
 export { VolumeSliderRoot };
-
-//# sourceMappingURL=root.js.map

package/dist/default/utils/merge-props.js

@@ -69,5 +69,3 @@ function mergeProps(...propSets) {
 }
 //#endregion
 export { mergeProps };
-
-//# sourceMappingURL=merge-props.js.map

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

@@ -1,18 +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 };
-
-//# sourceMappingURL=use-attach-media.js.map

package/dist/default/utils/use-composed-refs.js

@@ -52,5 +52,3 @@ function useComposedRefs(...refs) {
 }
 //#endregion
 export { composeRefs, useComposedRefs };
-
-//# sourceMappingURL=use-composed-refs.js.map

package/dist/default/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,23 +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 };
-
-//# sourceMappingURL=use-destroy.js.map

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

@@ -1,10 +1,11 @@
 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 };
-
-//# sourceMappingURL=use-force-render.js.map

package/dist/default/utils/use-latest-ref.js

@@ -15,5 +15,3 @@ function useLatestRef(value) {
 }
 //#endregion
 export { useLatestRef };
-
-//# sourceMappingURL=use-latest-ref.js.map