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

package/dist/default/ui/hotkey/component.js

@@ -0,0 +1,62 @@
+import { useContainer, usePlayer } from "../../player/context.js";
+import { createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
+import { useEffect } from "react";
+//#region src/ui/hotkey/component.tsx
+function Hotkey(t0) {
+	const $ = c(9);
+	const { keys, action, value, disabled, target } = t0;
+	const store = usePlayer();
+	const container = useContainer();
+	let t1;
+	let t2;
+	if ($[0] !== action || $[1] !== container || $[2] !== disabled || $[3] !== keys || $[4] !== store || $[5] !== target || $[6] !== value) {
+		t1 = () => {
+			if (!container || !keys || !action || disabled) return;
+			const resolver = resolveHotkeyAction(action);
+			if (!resolver) return;
+			return createHotkey(container, {
+				keys,
+				action,
+				value,
+				target,
+				disabled,
+				repeatable: !isHotkeyToggleAction(action),
+				onActivate: (_event, key) => {
+					resolver({
+						store,
+						key,
+						value
+					});
+				}
+			});
+		};
+		t2 = [
+			container,
+			store,
+			keys,
+			action,
+			value,
+			disabled,
+			target
+		];
+		$[0] = action;
+		$[1] = container;
+		$[2] = disabled;
+		$[3] = keys;
+		$[4] = store;
+		$[5] = target;
+		$[6] = value;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t1 = $[7];
+		t2 = $[8];
+	}
+	useEffect(t1, t2);
+	return null;
+}
+/** @deprecated Use `Hotkey` instead. */
+const MediaHotkey = Hotkey;
+//#endregion
+export { Hotkey, MediaHotkey };

package/dist/default/ui/hotkey/index.js

@@ -1,2 +1,2 @@
-import { Hotkey, MediaHotkey } from "./hotkey.js";
+import { Hotkey, MediaHotkey } from "./component.js";
 export { Hotkey, MediaHotkey };

package/dist/default/ui/hotkey/use-hotkey-shortcut.js

@@ -1,5 +1,6 @@
 import { useContainer } from "../../player/context.js";
 import { getHotkeyCoordinator } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { useEffect, useState } from "react";
 //#region src/ui/hotkey/use-hotkey-shortcut.ts
 /**
@@ -9,25 +10,43 @@ import { useEffect, useState } from "react";
 * @param value - Optional action value used to match value-dependent shortcuts.
 */
 function useHotkeyShortcut(action, value) {
+	const $ = c(6);
 	const container = useContainer();
-	const [shortcut, setShortcut] = useState({});
-	useEffect(() => {
-		if (!container || !action) {
-			setShortcut({});
-			return;
-		}
-		const coordinator = getHotkeyCoordinator(container);
-		const update = () => setShortcut(coordinator.getShortcut(action, value));
-		update();
-		return coordinator.subscribeShortcutChanges(update);
-	}, [
-		container,
-		action,
-		value
-	]);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {};
+		$[0] = t0;
+	} else t0 = $[0];
+	const [shortcut, setShortcut] = useState(t0);
+	let t1;
+	let t2;
+	if ($[1] !== action || $[2] !== container || $[3] !== value) {
+		t1 = () => {
+			if (!container || !action) {
+				setShortcut({});
+				return;
+			}
+			const coordinator = getHotkeyCoordinator(container);
+			const update = () => setShortcut(coordinator.getShortcut(action, value));
+			update();
+			return coordinator.subscribeShortcutChanges(update);
+		};
+		t2 = [
+			container,
+			action,
+			value
+		];
+		$[1] = action;
+		$[2] = container;
+		$[3] = value;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useEffect(t1, t2);
 	return shortcut;
 }
 //#endregion
 export { useHotkeyShortcut };
-
-//# sourceMappingURL=use-hotkey-shortcut.js.map

package/dist/default/ui/hotkey/use-hotkey.js

@@ -1,6 +1,7 @@
 import { useContainer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createHotkey } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { useEffect } from "react";
 //#region src/ui/hotkey/use-hotkey.ts
 /**
@@ -9,27 +10,50 @@ import { useEffect } from "react";
 * @param options - Shortcut keys, activation callback, scope, repeat behavior, and disabled state.
 */
 function useHotkey(options) {
-	const { keys, target = "player", repeatable = true, disabled = false } = options;
+	const $ = c(13);
+	const { keys, target: t0, repeatable: t1, disabled: t2 } = options;
+	const target = t0 === void 0 ? "player" : t0;
+	const repeatable = t1 === void 0 ? true : t1;
+	const disabled = t2 === void 0 ? false : t2;
 	const container = useContainer();
 	const onActivateRef = useLatestRef(options.onActivate);
-	useEffect(() => {
-		if (!container || !keys || disabled) return;
-		return createHotkey(container, {
+	let t3;
+	if ($[0] !== container || $[1] !== disabled || $[2] !== keys || $[3] !== onActivateRef || $[4] !== repeatable || $[5] !== target) {
+		t3 = () => {
+			if (!container || !keys || disabled) return;
+			return createHotkey(container, {
+				keys,
+				target,
+				repeatable,
+				disabled,
+				onActivate: (event, key) => onActivateRef.current(event, key)
+			});
+		};
+		$[0] = container;
+		$[1] = disabled;
+		$[2] = keys;
+		$[3] = onActivateRef;
+		$[4] = repeatable;
+		$[5] = target;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== container || $[8] !== disabled || $[9] !== keys || $[10] !== repeatable || $[11] !== target) {
+		t4 = [
+			container,
 			keys,
 			target,
 			repeatable,
-			disabled,
-			onActivate: (event, key) => onActivateRef.current(event, key)
-		});
-	}, [
-		container,
-		keys,
-		target,
-		repeatable,
-		disabled
-	]);
+			disabled
+		];
+		$[7] = container;
+		$[8] = disabled;
+		$[9] = keys;
+		$[10] = repeatable;
+		$[11] = target;
+		$[12] = t4;
+	} else t4 = $[12];
+	useEffect(t3, t4);
 }
 //#endregion
 export { useHotkey };
-
-//# sourceMappingURL=use-hotkey.js.map

package/dist/default/ui/input-indicator/use-indicator-visibility.js

@@ -1,24 +1,49 @@
 import { useContainer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { getIndicatorVisibilityCoordinator } from "@videojs/core/dom";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { c } from "react-compiler-runtime";
+import { useEffect, useRef, useState } from "react";
 //#region src/ui/input-indicator/use-indicator-visibility.ts
 function useIndicatorVisibility(close) {
+	const $ = c(8);
 	const container = useContainer();
 	const closeRef = useLatestRef(close);
 	const coordinatorRef = useRef(null);
-	const [handle] = useState(() => ({ close: () => closeRef.current() }));
-	useEffect(() => {
-		if (!container) return;
-		const coordinator = getIndicatorVisibilityCoordinator(container);
-		coordinatorRef.current = coordinator;
-		return coordinator.register(handle);
-	}, [container, handle]);
-	return useCallback(() => {
-		coordinatorRef.current?.show(handle);
-	}, [handle]);
+	let t0;
+	if ($[0] !== closeRef) {
+		t0 = () => ({ close: () => closeRef.current() });
+		$[0] = closeRef;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [handle] = useState(t0);
+	let t1;
+	let t2;
+	if ($[2] !== container || $[3] !== handle) {
+		t1 = () => {
+			if (!container) return;
+			const coordinator = getIndicatorVisibilityCoordinator(container);
+			coordinatorRef.current = coordinator;
+			return coordinator.register(handle);
+		};
+		t2 = [container, handle];
+		$[2] = container;
+		$[3] = handle;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[6] !== handle) {
+		t3 = () => {
+			coordinatorRef.current?.show(handle);
+		};
+		$[6] = handle;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
 }
 //#endregion
 export { useIndicatorVisibility };
-
-//# sourceMappingURL=use-indicator-visibility.js.map

package/dist/default/ui/input-indicator/use-input-action-subscription.js

@@ -1,21 +1,35 @@
 import { useContainer, usePlayer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { getMediaSnapshot, subscribeToInputActions } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { useEffect } from "react";
 //#region src/ui/input-indicator/use-input-action-subscription.ts
 function useInputActionSubscription(callback) {
+	const $ = c(6);
 	const container = useContainer();
 	const store = usePlayer();
 	const callbackRef = useLatestRef(callback);
 	const storeRef = useLatestRef(store);
-	useEffect(() => {
-		if (!container) return;
-		return subscribeToInputActions(container, (event) => {
-			callbackRef.current(event, getMediaSnapshot(storeRef.current));
-		});
-	}, [container]);
+	let t0;
+	if ($[0] !== callbackRef || $[1] !== container || $[2] !== storeRef) {
+		t0 = () => {
+			if (!container) return;
+			return subscribeToInputActions(container, (event) => {
+				callbackRef.current(event, getMediaSnapshot(storeRef.current));
+			});
+		};
+		$[0] = callbackRef;
+		$[1] = container;
+		$[2] = storeRef;
+		$[3] = t0;
+	} else t0 = $[3];
+	let t1;
+	if ($[4] !== container) {
+		t1 = [container];
+		$[4] = container;
+		$[5] = t1;
+	} else t1 = $[5];
+	useEffect(t0, t1);
 }
 //#endregion
 export { useInputActionSubscription };
-
-//# sourceMappingURL=use-input-action-subscription.js.map

package/dist/default/ui/input-indicator/use-input-indicator-root.js

@@ -2,20 +2,51 @@ import { useDestroy } from "../../utils/use-destroy.js";
 import { useIndicatorVisibility } from "./use-indicator-visibility.js";
 import { useInputActionSubscription } from "./use-input-action-subscription.js";
 import { useRenderedIndicatorState } from "./use-rendered-indicator-state.js";
+import { c } from "react-compiler-runtime";
 import { useState, useSyncExternalStore } from "react";
 //#region src/ui/input-indicator/use-input-indicator-root.ts
 function useInputIndicatorRoot(createCore, props, options) {
+	const $ = c(10);
 	const [core] = useState(createCore);
 	useDestroy(core);
 	core.setProps(props);
-	const showIndicator = useIndicatorVisibility(() => core.close());
-	useInputActionSubscription((event, snapshot) => {
-		if (core.processEvent(event, snapshot)) showIndicator();
-	});
-	const currentState = useSyncExternalStore((callback) => core.state.subscribe(callback), () => core.state.current, () => core.state.current);
+	let t0;
+	if ($[0] !== core) {
+		t0 = () => core.close();
+		$[0] = core;
+		$[1] = t0;
+	} else t0 = $[1];
+	const showIndicator = useIndicatorVisibility(t0);
+	let t1;
+	if ($[2] !== core || $[3] !== showIndicator) {
+		t1 = (event, snapshot) => {
+			if (core.processEvent(event, snapshot)) showIndicator();
+		};
+		$[2] = core;
+		$[3] = showIndicator;
+		$[4] = t1;
+	} else t1 = $[4];
+	useInputActionSubscription(t1);
+	let t2;
+	if ($[5] !== core.state) {
+		t2 = (callback) => core.state.subscribe(callback);
+		$[5] = core.state;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	let t4;
+	if ($[7] !== core.state.current) {
+		t3 = () => core.state.current;
+		t4 = () => core.state.current;
+		$[7] = core.state.current;
+		$[8] = t3;
+		$[9] = t4;
+	} else {
+		t3 = $[8];
+		t4 = $[9];
+	}
+	const currentState = useSyncExternalStore(t2, t3, t4);
 	return useRenderedIndicatorState(currentState, options);
 }
 //#endregion
 export { useInputIndicatorRoot };
-
-//# sourceMappingURL=use-input-indicator-root.js.map

package/dist/default/ui/input-indicator/use-rendered-indicator-state.js

@@ -38,5 +38,3 @@ function useRenderedIndicatorState(currentState, options = {}) {
 }
 //#endregion
 export { useRenderedIndicatorState };
-
-//# sourceMappingURL=use-rendered-indicator-state.js.map

package/dist/default/ui/live-button/component.js

@@ -0,0 +1,87 @@
+import { useTranslator } from "../../i18n/context.js";
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useButton } from "../hooks/use-button.js";
+import { useOptionalTooltipContext } from "../tooltip/context.js";
+import { LiveButtonCore, LiveButtonDataAttrs } from "@videojs/core";
+import { selectBuffer, selectLive, selectTime } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { forwardRef, useLayoutEffect, useState } from "react";
+//#region src/ui/live-button/component.tsx
+const DISPLAY_NAME = "LiveButton";
+/**
+* A button that indicates live status and seeks to the live edge when pressed. Exposes `data-live` while the stream is
+* live (or DVR) and `data-live-edge` while playing at the live edge so skins can style a red-dot ↔ grey-dot treatment.
+*
+* Selects from `live`, `time`, and `buffer` features and composes them itself rather than going through
+* `createMediaButton`, since the LiveButton needs three feature slices to detect the live edge and seek.
+*
+* Displays the translated live badge when no children are provided.
+*
+* @example
+*   ```tsx
+*   <LiveButton />;
+*   ```;
+*
+* @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md
+*/
+const LiveButton = forwardRef(function LiveButton(componentProps, forwardedRef) {
+	const { children, render, className, style, label, disabled, ...elementProps } = componentProps;
+	const live = usePlayer(selectLive);
+	const time = usePlayer(selectTime);
+	const buffer = usePlayer(selectBuffer);
+	const media = live && time && buffer ? {
+		currentTime: time.currentTime,
+		seek: time.seek,
+		seekable: buffer.seekable,
+		liveEdgeStart: live.liveEdgeStart,
+		targetLiveWindow: live.targetLiveWindow
+	} : null;
+	const tooltipCtx = useOptionalTooltipContext();
+	const translator = useTranslator();
+	const [core] = useState(() => new LiveButtonCore());
+	core.setProps({
+		label,
+		disabled
+	});
+	const { getButtonProps, buttonRef } = useButton({
+		displayName: DISPLAY_NAME,
+		onActivate: () => {
+			if (media) core.seekToLive(media);
+		},
+		isDisabled: () => !!disabled || !media
+	});
+	if (media) core.setMedia(media);
+	const state = media ? core.getState() : null;
+	const labelText = state ? translateText(core.getLabel(state), translator) : void 0;
+	useLayoutEffect(() => {
+		if (!tooltipCtx) return;
+		tooltipCtx.setContent(labelText ? { label: labelText } : void 0);
+		return () => tooltipCtx.setContent(void 0);
+	}, [tooltipCtx, labelText]);
+	if (!media || !state) return null;
+	const attrs = core.getAttrs(state);
+	const labelAttr = attrs["aria-label"];
+	const content = children ?? translateText(LiveButtonCore.defaultText, translator);
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: LiveButtonDataAttrs,
+		ref: [forwardedRef, buttonRef],
+		props: [
+			attrs,
+			{
+				children: content,
+				...elementProps,
+				"aria-label": labelAttr ? translateText(labelAttr, translator) : labelAttr
+			},
+			getButtonProps()
+		]
+	});
+});
+LiveButton.displayName = DISPLAY_NAME;
+//#endregion
+export { LiveButton };

package/dist/default/ui/live-button/index.js

@@ -1,2 +1,2 @@
-import { LiveButton } from "./live-button.js";
+import { LiveButton } from "./component.js";
 export { LiveButton };

package/dist/default/ui/menu/checkbox-item.js

@@ -0,0 +1,49 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuContext } from "./context.js";
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+//#region src/ui/menu/checkbox-item.tsx
+/** A checkbox-style menu item. Renders a `<div>` with `role="menuitemcheckbox"`. */
+const MenuCheckboxItem = forwardRef(function MenuCheckboxItem({ render, className, style, checked, onCheckedChange, disabled, onClick, ...elementProps }, forwardedRef) {
+	const { menu, state } = useMenuContext();
+	const elementRef = useRef(null);
+	useEffect(() => {
+		const element = elementRef.current;
+		if (!element) return;
+		return menu.registerItem(element);
+	}, [menu]);
+	const handleClick = useCallback((event) => {
+		if (disabled) return;
+		onClick?.(event);
+		onCheckedChange(!checked);
+	}, [
+		disabled,
+		onClick,
+		onCheckedChange,
+		checked
+	]);
+	const handlePointerEnter = useCallback(() => {
+		const element = elementRef.current;
+		if (!element || disabled) return;
+		menu.highlight(element, {
+			focus: false,
+			pointer: true
+		});
+	}, [menu, disabled]);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: [forwardedRef, elementRef],
+		props: [{
+			role: "menuitemcheckbox",
+			"aria-checked": checked,
+			"aria-disabled": disabled ? true : void 0,
+			onClick: handleClick,
+			onPointerEnter: handlePointerEnter
+		}, elementProps]
+	});
+});
+//#endregion
+export { MenuCheckboxItem };

package/dist/default/ui/menu/content.js

@@ -0,0 +1,126 @@
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuContext, useMenuPopupContext } from "./context.js";
+import { callKeyDownHandler, preventMenuKeyDefault } from "./keyboard.js";
+import { MenuContentDataAttrs } from "@videojs/core";
+import { isMenuNavigationKey } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useLayoutEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+//#region src/ui/menu/content.tsx
+/** Accessible item and focus scope for exactly one root or nested menu page. */
+const MenuContent = forwardRef(function MenuContent(t0, forwardedRef) {
+	const $ = c(18);
+	const { render, className, style, onKeyDown, onBlur, ...elementProps } = t0;
+	const { core, menu, parent, state, contentId } = useMenuContext();
+	const { popup, element: popupElement } = useMenuPopupContext();
+	const isSubmenu = parent !== null;
+	const isActive = isSubmenu && state.open;
+	const wasActiveRef = useRef(false);
+	const cleanupRegistrationRef = useRef(null);
+	let t1;
+	let t2;
+	if ($[0] !== isActive || $[1] !== isSubmenu || $[2] !== menu) {
+		t1 = () => {
+			if (!isSubmenu) return;
+			const wasActive = wasActiveRef.current;
+			wasActiveRef.current = isActive;
+			if (isActive && !wasActive) {
+				const frame = requestAnimationFrame(() => menu.highlightInitialItem({ preventScroll: true }));
+				return () => cancelAnimationFrame(frame);
+			}
+		};
+		t2 = [
+			isActive,
+			isSubmenu,
+			menu
+		];
+		$[0] = isActive;
+		$[1] = isSubmenu;
+		$[2] = menu;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	useLayoutEffect(t1, t2);
+	let t3;
+	if ($[5] !== isSubmenu || $[6] !== menu || $[7] !== parent?.menu || $[8] !== popup) {
+		t3 = (element) => {
+			cleanupRegistrationRef.current?.();
+			cleanupRegistrationRef.current = null;
+			if (!element) {
+				if (isSubmenu) menu.setPopupElement(null);
+				return;
+			}
+			if (isSubmenu) menu.setPopupElement(element);
+			cleanupRegistrationRef.current = popup.registerContent({
+				menu,
+				parent: parent?.menu ?? null,
+				element
+			});
+		};
+		$[5] = isSubmenu;
+		$[6] = menu;
+		$[7] = parent?.menu;
+		$[8] = popup;
+		$[9] = t3;
+	} else t3 = $[9];
+	parent?.menu;
+	const composedRef = useComposedRefs(forwardedRef, t3);
+	let t4;
+	if ($[10] !== isSubmenu || $[11] !== menu || $[12] !== onKeyDown) {
+		t4 = (event) => {
+			const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
+			const isNavigationKey = isMenuNavigationKey(event);
+			menu.contentProps.onKeyDown(event);
+			if (isSubmenu && (event.key === "ArrowLeft" || event.key === "Escape") && !defaultPreventedByUser) {
+				event.preventDefault();
+				menu.close("escape");
+			}
+			if (event.key !== "Escape" && isNavigationKey) event.stopPropagation();
+		};
+		$[10] = isSubmenu;
+		$[11] = menu;
+		$[12] = onKeyDown;
+		$[13] = t4;
+	} else t4 = $[13];
+	const handleKeyDown = t4;
+	if (isSubmenu && !isActive && state.status !== "ending") return null;
+	let t5;
+	if ($[14] !== isSubmenu || $[15] !== menu || $[16] !== onBlur) {
+		t5 = (event_0) => {
+			onBlur?.(event_0);
+			if (isSubmenu) menu.contentProps.onFocusOut(event_0);
+		};
+		$[14] = isSubmenu;
+		$[15] = menu;
+		$[16] = onBlur;
+		$[17] = t5;
+	} else t5 = $[17];
+	const contentNode = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: MenuContentDataAttrs,
+		ref: composedRef,
+		props: [
+			{
+				id: contentId,
+				...core.getContentAttrs()
+			},
+			{
+				onKeyDownCapture: preventMenuKeyDefault,
+				onKeyDown: handleKeyDown,
+				onBlur: t5
+			},
+			elementProps
+		]
+	});
+	return isSubmenu && popupElement ? createPortal(contentNode, popupElement) : contentNode;
+});
+//#endregion
+export { MenuContent };