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

package/dist/dev/ui/hooks/use-positioned-state.js

@@ -1,36 +1,76 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { c } from "react-compiler-runtime";
+import { useEffect, useState } from "react";
 //#region src/ui/hooks/use-positioned-state.ts
 function usePositionedState(preferredState) {
+	const $ = c(17);
 	const preferredSide = preferredState.side;
-	const [position, setPosition] = useState({
-		preferred: preferredSide,
-		side: preferredSide
-	});
+	let t0;
+	if ($[0] !== preferredSide) {
+		t0 = {
+			preferred: preferredSide,
+			side: preferredSide
+		};
+		$[0] = preferredSide;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [position, setPosition] = useState(t0);
 	const side = preferredState.open && position.preferred === preferredSide ? position.side : preferredSide;
-	const state = useMemo(() => side === preferredSide ? preferredState : {
-		...preferredState,
-		side
-	}, [
-		side,
-		preferredState,
-		preferredSide
-	]);
-	const setPositionedSide = useCallback((nextSide) => setPosition((prev) => prev.preferred === preferredSide && prev.side === nextSide ? prev : {
-		preferred: preferredSide,
-		side: nextSide
-	}), [preferredSide]);
-	useEffect(() => {
-		if (!preferredState.open) setPositionedSide(preferredSide);
-	}, [
-		preferredState.open,
-		preferredSide,
-		setPositionedSide
-	]);
-	return {
-		state,
-		preferredSide,
-		setPositionedSide
-	};
+	let t1;
+	if ($[2] !== preferredSide || $[3] !== preferredState || $[4] !== side) {
+		t1 = side === preferredSide ? preferredState : {
+			...preferredState,
+			side
+		};
+		$[2] = preferredSide;
+		$[3] = preferredState;
+		$[4] = side;
+		$[5] = t1;
+	} else t1 = $[5];
+	const state = t1;
+	let t2;
+	if ($[6] !== preferredSide) {
+		t2 = (nextSide) => setPosition((prev) => prev.preferred === preferredSide && prev.side === nextSide ? prev : {
+			preferred: preferredSide,
+			side: nextSide
+		});
+		$[6] = preferredSide;
+		$[7] = t2;
+	} else t2 = $[7];
+	const setPositionedSide = t2;
+	let t3;
+	let t4;
+	if ($[8] !== preferredSide || $[9] !== preferredState.open || $[10] !== setPositionedSide) {
+		t3 = () => {
+			if (!preferredState.open) setPositionedSide(preferredSide);
+		};
+		t4 = [
+			preferredState.open,
+			preferredSide,
+			setPositionedSide
+		];
+		$[8] = preferredSide;
+		$[9] = preferredState.open;
+		$[10] = setPositionedSide;
+		$[11] = t3;
+		$[12] = t4;
+	} else {
+		t3 = $[11];
+		t4 = $[12];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[13] !== preferredSide || $[14] !== setPositionedSide || $[15] !== state) {
+		t5 = {
+			state,
+			preferredSide,
+			setPositionedSide
+		};
+		$[13] = preferredSide;
+		$[14] = setPositionedSide;
+		$[15] = state;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
 }
 //#endregion
 export { usePositionedState };

package/dist/dev/ui/hooks/use-positioned-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-positioned-state.js","names":[],"sources":["../../../../src/ui/hooks/use-positioned-state.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\n\ninterface PopupState {\n  open: boolean;\n  side: string | undefined;\n}\n\ninterface PositionedState<State extends PopupState> {\n  state: State;\n  preferredSide: State['side'];\n  setPositionedSide: (side: State['side']) => void;\n}\n\nexport function usePositionedState<State extends PopupState>(preferredState: State): PositionedState<State> {\n  const preferredSide = preferredState.side;\n  const [position, setPosition] = useState<{ preferred: State['side']; side: State['side'] }>({\n    preferred: preferredSide,\n    side: preferredSide,\n  });\n\n  const side = preferredState.open && position.preferred === preferredSide ? position.side : preferredSide;\n\n  const state = useMemo(\n    () => (side === preferredSide ? preferredState : { ...preferredState, side }),\n    [side, preferredState, preferredSide]\n  );\n\n  const setPositionedSide = useCallback(\n    (nextSide: State['side']) =>\n      setPosition((prev) =>\n        prev.preferred === preferredSide && prev.side === nextSide ? prev : { preferred: preferredSide, side: nextSide }\n      ),\n    [preferredSide]\n  );\n\n  useEffect(() => {\n    if (!preferredState.open) setPositionedSide(preferredSide);\n  }, [preferredState.open, preferredSide, setPositionedSide]);\n\n  return { state, preferredSide, setPositionedSide };\n}\n"],"mappings":";;AAaA,SAAgB,mBAA6C,gBAA+C;CAC1G,MAAM,gBAAgB,eAAe;CACrC,MAAM,CAAC,UAAU,eAAe,SAA4D;EAC1F,WAAW;EACX,MAAM;CACR,CAAC;CAED,MAAM,OAAO,eAAe,QAAQ,SAAS,cAAc,gBAAgB,SAAS,OAAO;CAE3F,MAAM,QAAQ,cACL,SAAS,gBAAgB,iBAAiB;EAAE,GAAG;EAAgB;CAAK,GAC3E;EAAC;EAAM;EAAgB;CAAa,CACtC;CAEA,MAAM,oBAAoB,aACvB,aACC,aAAa,SACX,KAAK,cAAc,iBAAiB,KAAK,SAAS,WAAW,OAAO;EAAE,WAAW;EAAe,MAAM;CAAS,CACjH,GACF,CAAC,aAAa,CAChB;CAEA,gBAAgB;EACd,IAAI,CAAC,eAAe,MAAM,kBAAkB,aAAa;CAC3D,GAAG;EAAC,eAAe;EAAM;EAAe;CAAiB,CAAC;CAE1D,OAAO;EAAE;EAAO;EAAe;CAAkB;AACnD"}
+{"version":3,"file":"use-positioned-state.js","names":["{\n    preferred: preferredSide,\n    side: preferredSide,\n  }","side === preferredSide ? preferredState : { ...preferredState, side }","useMemo(\n    () => (side === preferredSide ? preferredState : { ...preferredState, side }),\n    [side, preferredState, preferredSide]\n  )","(nextSide: State['side']) =>\n      setPosition((prev) =>\n        prev.preferred === preferredSide && prev.side === nextSide ? prev : { preferred: preferredSide, side: nextSide }\n      )","useCallback(\n    (nextSide: State['side']) =>\n      setPosition((prev) =>\n        prev.preferred === preferredSide && prev.side === nextSide ? prev : { preferred: preferredSide, side: nextSide }\n      ),\n    [preferredSide]\n  )","() => {\n    if (!preferredState.open) setPositionedSide(preferredSide);\n  }","[preferredState.open, preferredSide, setPositionedSide]","open","{ state, preferredSide, setPositionedSide }"],"sources":["../../../../src/ui/hooks/use-positioned-state.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\n\ninterface PopupState {\n  open: boolean;\n  side: string | undefined;\n}\n\ninterface PositionedState<State extends PopupState> {\n  state: State;\n  preferredSide: State['side'];\n  setPositionedSide: (side: State['side']) => void;\n}\n\nexport function usePositionedState<State extends PopupState>(preferredState: State): PositionedState<State> {\n  const preferredSide = preferredState.side;\n  const [position, setPosition] = useState<{ preferred: State['side']; side: State['side'] }>({\n    preferred: preferredSide,\n    side: preferredSide,\n  });\n\n  const side = preferredState.open && position.preferred === preferredSide ? position.side : preferredSide;\n\n  const state = useMemo(\n    () => (side === preferredSide ? preferredState : { ...preferredState, side }),\n    [side, preferredState, preferredSide]\n  );\n\n  const setPositionedSide = useCallback(\n    (nextSide: State['side']) =>\n      setPosition((prev) =>\n        prev.preferred === preferredSide && prev.side === nextSide ? prev : { preferred: preferredSide, side: nextSide }\n      ),\n    [preferredSide]\n  );\n\n  useEffect(() => {\n    if (!preferredState.open) setPositionedSide(preferredSide);\n  }, [preferredState.open, preferredSide, setPositionedSide]);\n\n  return { state, preferredSide, setPositionedSide };\n}\n"],"mappings":";;;AAaA,SAAgB,mBAA6C,gBAA+C;;CAC1G,MAAM,gBAAgB,eAAe;CACuDA,IAAAA;CAC/E,IAAA,EAAA,OAAA,eAAA;EAD+E,KAAA;GAC1F,WAAW;GACX,MAAM;EACR;EAFa,EAAA,KAAA;;;CADb,MAAM,CAAC,UAAU,eAAe,SAA4DA,EAG3F;CAED,MAAM,OAAO,eAAe,QAAQ,SAAS,cAAc,gBAAgB,SAAS,OAAO;CAGlFC,IAAAA;CAAS,IAAA,EAAA,OAAA,iBAAA,EAAA,OAAgB,kBAAA,EAAA,OAAzB,MAAA;EAAS,KAAA,SAAA,gBAAgB,iBAAiB;GAAE,GAAG;GAAgB;EAAK;EAA3D,EAAA,KAAA;EAAgB,EAAA,KAAA;EAAzB,EAAA,KAAA;;;CADT,MAAM,QAAQC;CAMZC,IAAAA;CAEuB,IAAA,EAAA,OAAA,eAAA;EAFvB,MAAC,aACC,aAAa,SACX,KAAK,cAAc,iBAAiB,KAAK,SAAS,WAAW,OAAO;GAAE,WAAW;GAAe,MAAM;EAAS,CACjH;EADqB,EAAA,KAAA;;;CAHzB,MAAM,oBAAoBC;CAQhBC,IAAAA;CAEPC,IAAAA;CAD2C,IAAA,EAAA,OAAA,iBAAA,EAAA,OAAxBC,eAAAA,QAAAA,EAAAA,QAAM,mBAAA;EADlB,WAAM;GACd,IAAI,CAAC,eAAe,MAAM,kBAAkB,aAAa;EAC3D;EAAG,KAAA;GAAC,eAAe;GAAM;GAAe;EAAiB;EADX,EAAA,KAAA;EAAxBA,EAAAA,KAAAA,eAAAA;EAAM,EAAA,MAAA;;;;;;;CAD5B,UAAUF,IAEPC,EAAuD;CAEnDE,IAAAA;CAAS,IAAA,EAAA,QAAA,iBAAA,EAAA,QAAe,qBAAA,EAAA,QAAtB,OAAA;EAAF,KAAA;GAAE;GAAO;GAAe;EAAkB;EAAjC,EAAA,MAAA;EAAe,EAAA,MAAA;EAAtB,EAAA,MAAA;;;CAAT,OAAOA;AACT"}

package/dist/dev/ui/hooks/use-slider.js

@@ -68,6 +68,8 @@ function useSlider(options) {
 	const cssVars = options.getCSSVars(slider.adjustForAlignment(state));
 	const syncStyles = useCallback((element = rootElementRef.current) => {
 		if (!element) return;
+		const { dragging, pointing } = slider.input.current;
+		if (!dragging && !pointing) return;
 		const next = optionsRef.current.computeState(slider.input.current);
 		applyStyles(element, optionsRef.current.getCSSVars(slider.adjustForAlignment(next)));
 	}, [slider]);

package/dist/dev/ui/hooks/use-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["import type { SliderInput, SliderState } from '@videojs/core';\nimport {\n  createSlider,\n  type SliderApi,\n  type SliderOptions,\n  type SliderRootProps,\n  type SliderRootStyle,\n  type SliderThumbProps,\n  selectControls,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { applyStyles } from '@videojs/utils/dom';\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useOptionalPlayer } from '../../player/context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useForceRender } from '../../utils/use-force-render';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseSliderOptions<State extends SliderState = SliderState> extends Pick<\n  SliderOptions,\n  | 'getPercent'\n  | 'getStepPercent'\n  | 'getLargeStepPercent'\n  | 'changeThrottle'\n  | 'onValueChange'\n  | 'onValueCommit'\n  | 'onPressStart'\n  | 'onPressEnd'\n  | 'onDragStart'\n  | 'onDragEnd'\n> {\n  computeState: (input: SliderInput) => State;\n  orientation?: 'horizontal' | 'vertical' | undefined;\n  disabled?: boolean | undefined;\n  /** Adjust a raw 0–100 percent for thumb alignment. Called for fill and pointer percents. */\n  adjustPercent?: ((rawPercent: number, thumbSize: number, trackSize: number) => number) | undefined;\n  /** Compute CSS variable map from the (possibly alignment-adjusted) state. */\n  getCSSVars: (state: State) => Record<string, string>;\n}\n\nexport interface UseSliderReturnValue<State extends SliderState = SliderState> {\n  state: State;\n  input: SliderApi['input'];\n  cssVars: Record<string, string>;\n  rootRef: React.RefCallback<HTMLElement>;\n  thumbRef: React.RefCallback<HTMLElement>;\n  rootProps: SliderRootProps;\n  rootStyle: SliderRootStyle;\n  thumbProps: SliderThumbProps;\n}\n\n/**\n * Manages slider input lifecycle for React.\n *\n * Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its input state via `useSnapshot`. Returns split\n * props for the root (pointer events) and thumb (keyboard/focus) elements.\n */\nexport function useSlider<State extends SliderState = SliderState>(\n  options: UseSliderOptions<State>\n): UseSliderReturnValue<State> {\n  const optionsRef = useLatestRef(options);\n\n  const controls = useOptionalPlayer(selectControls);\n  const requestControlsLock = controls?.requestControlsLock;\n  const releaseControlsLockRef = useRef<(() => void) | null>(null);\n\n  const releaseControlsLock = useCallback(() => {\n    releaseControlsLockRef.current?.();\n    releaseControlsLockRef.current = null;\n  }, []);\n\n  useEffect(() => releaseControlsLock, [releaseControlsLock]);\n\n  const rootElementRef = useRef<HTMLElement | null>(null);\n  const thumbElementRef = useRef<HTMLElement | null>(null);\n  const forceRender = useForceRender();\n\n  // Lazy-init the slider handle. Stable across re-renders.\n  const [slider] = useState<SliderApi>(() => {\n    const stableOptions: SliderOptions = {\n      getElement: () => rootElementRef.current!,\n      getThumbElement: () => thumbElementRef.current,\n      getOrientation: () => optionsRef.current.orientation ?? 'horizontal',\n      isDisabled: () => optionsRef.current.disabled ?? false,\n      getPercent: () => optionsRef.current.getPercent(),\n      getStepPercent: () => optionsRef.current.getStepPercent(),\n      getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),\n      changeThrottle: optionsRef.current.changeThrottle,\n      adjustPercent: optionsRef.current.adjustPercent,\n      onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),\n      onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),\n      onPressStart: () => {\n        releaseControlsLockRef.current ??= requestControlsLock?.() ?? null;\n        optionsRef.current.onPressStart?.();\n      },\n      onPressEnd: () => {\n        releaseControlsLock();\n        optionsRef.current.onPressEnd?.();\n      },\n      onDragStart: () => optionsRef.current.onDragStart?.(),\n      onDragEnd: () => optionsRef.current.onDragEnd?.(),\n    };\n\n    return createSlider(stableOptions);\n  });\n\n  useDestroy(slider);\n\n  // Percentage changes are rendered directly below. React only needs to\n  // re-render when interaction state changes.\n  const interaction = useSnapshot(slider.input, ({ dragging, pointing, focused }) => ({\n    dragging,\n    pointing,\n    focused,\n  }));\n  const input = { ...slider.input.current, ...interaction };\n\n  // Compute derived state from input + caller-provided projection.\n  const state = options.computeState(input);\n\n  // Force a synchronous re-render after mount so edge thumb alignment\n  // can read DOM measurements from the now-populated element refs.\n  useLayoutEffect(() => {\n    if (state.thumbAlignment === 'edge' && rootElementRef.current && thumbElementRef.current) {\n      forceRender();\n    }\n  }, [state.thumbAlignment]);\n\n  // Adjust CSS var percents for edge thumb alignment using live DOM measurements.\n  const cssVars = options.getCSSVars(slider.adjustForAlignment(state));\n\n  const syncStyles = useCallback(\n    (element = rootElementRef.current) => {\n      if (!element) return;\n\n      const next = optionsRef.current.computeState(slider.input.current);\n\n      applyStyles(element, optionsRef.current.getCSSVars(slider.adjustForAlignment(next)));\n    },\n    [slider]\n  );\n\n  useLayoutEffect(() => {\n    syncStyles();\n    return slider.input.subscribe(syncStyles);\n  }, [slider, syncStyles]);\n\n  // Ref callbacks for root and thumb elements.\n  const rootRef = useCallback(\n    (element: HTMLElement | null) => {\n      rootElementRef.current = element;\n      syncStyles(element);\n    },\n    [syncStyles]\n  );\n\n  const thumbRef = useCallback((element: HTMLElement | null) => {\n    thumbElementRef.current = element;\n  }, []);\n\n  return {\n    state,\n    input: slider.input,\n    cssVars,\n    rootRef,\n    thumbRef,\n    rootProps: slider.rootProps,\n    rootStyle: slider.rootStyle,\n    thumbProps: slider.thumbProps,\n  };\n}\n\nexport namespace useSlider {\n  export type Options = UseSliderOptions;\n  export type ReturnValue = UseSliderReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA0DA,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,OAAO;CAGvC,MAAM,sBADW,kBAAkB,cACA,CAAC,EAAE;CACtC,MAAM,yBAAyB,OAA4B,IAAI;CAE/D,MAAM,sBAAsB,kBAAkB;EAC5C,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC,GAAG,CAAC,CAAC;CAEL,gBAAgB,qBAAqB,CAAC,mBAAmB,CAAC;CAE1D,MAAM,iBAAiB,OAA2B,IAAI;CACtD,MAAM,kBAAkB,OAA2B,IAAI;CACvD,MAAM,cAAc,eAAe;CAGnC,MAAM,CAAC,UAAU,eAA0B;EACzC,MAAM,gBAA+B;GACnC,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,kBAAkB,WAAW,QAAQ,YAAY;GACjD,kBAAkB,WAAW,QAAQ,WAAW;GAChD,sBAAsB,WAAW,QAAQ,eAAe;GACxD,2BAA2B,WAAW,QAAQ,oBAAoB;GAClE,gBAAgB,WAAW,QAAQ;GACnC,eAAe,WAAW,QAAQ;GAClC,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,OAAO;GACtE,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,OAAO;GACtE,oBAAoB;IAClB,uBAAuB,YAAY,sBAAsB,KAAK;IAC9D,WAAW,QAAQ,eAAe;GACpC;GACA,kBAAkB;IAChB,oBAAoB;IACpB,WAAW,QAAQ,aAAa;GAClC;GACA,mBAAmB,WAAW,QAAQ,cAAc;GACpD,iBAAiB,WAAW,QAAQ,YAAY;EAClD;EAEA,OAAO,aAAa,aAAa;CACnC,CAAC;CAED,WAAW,MAAM;CAIjB,MAAM,cAAc,YAAY,OAAO,QAAQ,EAAE,UAAU,UAAU,eAAe;EAClF;EACA;EACA;CACF,EAAE;CACF,MAAM,QAAQ;EAAE,GAAG,OAAO,MAAM;EAAS,GAAG;CAAY;CAGxD,MAAM,QAAQ,QAAQ,aAAa,KAAK;CAIxC,sBAAsB;EACpB,IAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,SAC/E,YAAY;CAEhB,GAAG,CAAC,MAAM,cAAc,CAAC;CAGzB,MAAM,UAAU,QAAQ,WAAW,OAAO,mBAAmB,KAAK,CAAC;CAEnE,MAAM,aAAa,aAChB,UAAU,eAAe,YAAY;EACpC,IAAI,CAAC,SAAS;EAEd,MAAM,OAAO,WAAW,QAAQ,aAAa,OAAO,MAAM,OAAO;EAEjE,YAAY,SAAS,WAAW,QAAQ,WAAW,OAAO,mBAAmB,IAAI,CAAC,CAAC;CACrF,GACA,CAAC,MAAM,CACT;CAEA,sBAAsB;EACpB,WAAW;EACX,OAAO,OAAO,MAAM,UAAU,UAAU;CAC1C,GAAG,CAAC,QAAQ,UAAU,CAAC;CAGvB,MAAM,UAAU,aACb,YAAgC;EAC/B,eAAe,UAAU;EACzB,WAAW,OAAO;CACpB,GACA,CAAC,UAAU,CACb;CAEA,MAAM,WAAW,aAAa,YAAgC;EAC5D,gBAAgB,UAAU;CAC5B,GAAG,CAAC,CAAC;CAEL,OAAO;EACL;EACA,OAAO,OAAO;EACd;EACA;EACA;EACA,WAAW,OAAO;EAClB,WAAW,OAAO;EAClB,YAAY,OAAO;CACrB;AACF"}
+{"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["import type { SliderInput, SliderState } from '@videojs/core';\nimport {\n  createSlider,\n  type SliderApi,\n  type SliderOptions,\n  type SliderRootProps,\n  type SliderRootStyle,\n  type SliderThumbProps,\n  selectControls,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { applyStyles } from '@videojs/utils/dom';\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useOptionalPlayer } from '../../player/context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useForceRender } from '../../utils/use-force-render';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseSliderOptions<State extends SliderState = SliderState> extends Pick<\n  SliderOptions,\n  | 'getPercent'\n  | 'getStepPercent'\n  | 'getLargeStepPercent'\n  | 'changeThrottle'\n  | 'onValueChange'\n  | 'onValueCommit'\n  | 'onPressStart'\n  | 'onPressEnd'\n  | 'onDragStart'\n  | 'onDragEnd'\n> {\n  computeState: (input: SliderInput) => State;\n  orientation?: 'horizontal' | 'vertical' | undefined;\n  disabled?: boolean | undefined;\n  /** Adjust a raw 0–100 percent for thumb alignment. Called for fill and pointer percents. */\n  adjustPercent?: ((rawPercent: number, thumbSize: number, trackSize: number) => number) | undefined;\n  /** Compute CSS variable map from the (possibly alignment-adjusted) state. */\n  getCSSVars: (state: State) => Record<string, string>;\n}\n\nexport interface UseSliderReturnValue<State extends SliderState = SliderState> {\n  state: State;\n  input: SliderApi['input'];\n  cssVars: Record<string, string>;\n  rootRef: React.RefCallback<HTMLElement>;\n  thumbRef: React.RefCallback<HTMLElement>;\n  rootProps: SliderRootProps;\n  rootStyle: SliderRootStyle;\n  thumbProps: SliderThumbProps;\n}\n\n/**\n * Manages slider input lifecycle for React.\n *\n * Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its input state via `useSnapshot`. Returns split\n * props for the root (pointer events) and thumb (keyboard/focus) elements.\n */\nexport function useSlider<State extends SliderState = SliderState>(\n  options: UseSliderOptions<State>\n): UseSliderReturnValue<State> {\n  const optionsRef = useLatestRef(options);\n\n  const controls = useOptionalPlayer(selectControls);\n  const requestControlsLock = controls?.requestControlsLock;\n  const releaseControlsLockRef = useRef<(() => void) | null>(null);\n\n  const releaseControlsLock = useCallback(() => {\n    releaseControlsLockRef.current?.();\n    releaseControlsLockRef.current = null;\n  }, []);\n\n  useEffect(() => releaseControlsLock, [releaseControlsLock]);\n\n  const rootElementRef = useRef<HTMLElement | null>(null);\n  const thumbElementRef = useRef<HTMLElement | null>(null);\n  const forceRender = useForceRender();\n\n  // Lazy-init the slider handle. Stable across re-renders.\n  const [slider] = useState<SliderApi>(() => {\n    const stableOptions: SliderOptions = {\n      getElement: () => rootElementRef.current!,\n      getThumbElement: () => thumbElementRef.current,\n      getOrientation: () => optionsRef.current.orientation ?? 'horizontal',\n      isDisabled: () => optionsRef.current.disabled ?? false,\n      getPercent: () => optionsRef.current.getPercent(),\n      getStepPercent: () => optionsRef.current.getStepPercent(),\n      getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),\n      changeThrottle: optionsRef.current.changeThrottle,\n      adjustPercent: optionsRef.current.adjustPercent,\n      onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),\n      onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),\n      onPressStart: () => {\n        releaseControlsLockRef.current ??= requestControlsLock?.() ?? null;\n        optionsRef.current.onPressStart?.();\n      },\n      onPressEnd: () => {\n        releaseControlsLock();\n        optionsRef.current.onPressEnd?.();\n      },\n      onDragStart: () => optionsRef.current.onDragStart?.(),\n      onDragEnd: () => optionsRef.current.onDragEnd?.(),\n    };\n\n    return createSlider(stableOptions);\n  });\n\n  useDestroy(slider);\n\n  // Percentage changes are rendered directly below. React only needs to\n  // re-render when interaction state changes.\n  const interaction = useSnapshot(slider.input, ({ dragging, pointing, focused }) => ({\n    dragging,\n    pointing,\n    focused,\n  }));\n  const input = { ...slider.input.current, ...interaction };\n\n  // Compute derived state from input + caller-provided projection.\n  const state = options.computeState(input);\n\n  // Force a synchronous re-render after mount so edge thumb alignment\n  // can read DOM measurements from the now-populated element refs.\n  useLayoutEffect(() => {\n    if (state.thumbAlignment === 'edge' && rootElementRef.current && thumbElementRef.current) {\n      forceRender();\n    }\n  }, [state.thumbAlignment]);\n\n  // Adjust CSS var percents for edge thumb alignment using live DOM measurements.\n  const cssVars = options.getCSSVars(slider.adjustForAlignment(state));\n\n  const syncStyles = useCallback(\n    (element = rootElementRef.current) => {\n      if (!element) return;\n\n      const { dragging, pointing } = slider.input.current;\n      // Keyboard values come from the controlled state. Applying them here would\n      // briefly write the previous value before the caller handles the key.\n      if (!dragging && !pointing) return;\n\n      const next = optionsRef.current.computeState(slider.input.current);\n\n      applyStyles(element, optionsRef.current.getCSSVars(slider.adjustForAlignment(next)));\n    },\n    [slider]\n  );\n\n  useLayoutEffect(() => {\n    syncStyles();\n    return slider.input.subscribe(syncStyles);\n  }, [slider, syncStyles]);\n\n  // Ref callbacks for root and thumb elements.\n  const rootRef = useCallback(\n    (element: HTMLElement | null) => {\n      rootElementRef.current = element;\n      syncStyles(element);\n    },\n    [syncStyles]\n  );\n\n  const thumbRef = useCallback((element: HTMLElement | null) => {\n    thumbElementRef.current = element;\n  }, []);\n\n  return {\n    state,\n    input: slider.input,\n    cssVars,\n    rootRef,\n    thumbRef,\n    rootProps: slider.rootProps,\n    rootStyle: slider.rootStyle,\n    thumbProps: slider.thumbProps,\n  };\n}\n\nexport namespace useSlider {\n  export type Options = UseSliderOptions;\n  export type ReturnValue = UseSliderReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA0DA,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,OAAO;CAGvC,MAAM,sBADW,kBAAkB,cACP,CAAA,EAAU;CACtC,MAAM,yBAAyB,OAA4B,IAAI;CAE/D,MAAM,sBAAsB,kBAAkB;EAC5C,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC,GAAG,CAAC,CAAC;CAEL,gBAAgB,qBAAqB,CAAC,mBAAmB,CAAC;CAE1D,MAAM,iBAAiB,OAA2B,IAAI;CACtD,MAAM,kBAAkB,OAA2B,IAAI;CACvD,MAAM,cAAc,eAAe;CAGnC,MAAM,CAAC,UAAU,eAA0B;EACzC,MAAM,gBAA+B;GACnC,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,kBAAkB,WAAW,QAAQ,YAAY;GACjD,kBAAkB,WAAW,QAAQ,WAAW;GAChD,sBAAsB,WAAW,QAAQ,eAAe;GACxD,2BAA2B,WAAW,QAAQ,oBAAoB;GAClE,gBAAgB,WAAW,QAAQ;GACnC,eAAe,WAAW,QAAQ;GAClC,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,OAAO;GACtE,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,OAAO;GACtE,oBAAoB;IAClB,uBAAuB,YAAY,sBAAsB,KAAK;IAC9D,WAAW,QAAQ,eAAe;GACpC;GACA,kBAAkB;IAChB,oBAAoB;IACpB,WAAW,QAAQ,aAAa;GAClC;GACA,mBAAmB,WAAW,QAAQ,cAAc;GACpD,iBAAiB,WAAW,QAAQ,YAAY;EAClD;EAEA,OAAO,aAAa,aAAa;CACnC,CAAC;CAED,WAAW,MAAM;CAIjB,MAAM,cAAc,YAAY,OAAO,QAAQ,EAAE,UAAU,UAAU,eAAe;EAClF;EACA;EACA;CACF,EAAE;CACF,MAAM,QAAQ;EAAE,GAAG,OAAO,MAAM;EAAS,GAAG;CAAY;CAGxD,MAAM,QAAQ,QAAQ,aAAa,KAAK;CAIxC,sBAAsB;EACpB,IAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,SAC/E,YAAY;CAEhB,GAAG,CAAC,MAAM,cAAc,CAAC;CAGzB,MAAM,UAAU,QAAQ,WAAW,OAAO,mBAAmB,KAAK,CAAC;CAEnE,MAAM,aAAa,aAChB,UAAU,eAAe,YAAY;EACpC,IAAI,CAAC,SAAS;EAEd,MAAM,EAAE,UAAU,aAAa,OAAO,MAAM;EAG5C,IAAI,CAAC,YAAY,CAAC,UAAU;EAE5B,MAAM,OAAO,WAAW,QAAQ,aAAa,OAAO,MAAM,OAAO;EAEjE,YAAY,SAAS,WAAW,QAAQ,WAAW,OAAO,mBAAmB,IAAI,CAAC,CAAC;CACrF,GACA,CAAC,MAAM,CACT;CAEA,sBAAsB;EACpB,WAAW;EACX,OAAO,OAAO,MAAM,UAAU,UAAU;CAC1C,GAAG,CAAC,QAAQ,UAAU,CAAC;CAGvB,MAAM,UAAU,aACb,YAAgC;EAC/B,eAAe,UAAU;EACzB,WAAW,OAAO;CACpB,GACA,CAAC,UAAU,CACb;CAEA,MAAM,WAAW,aAAa,YAAgC;EAC5D,gBAAgB,UAAU;CAC5B,GAAG,CAAC,CAAC;CAEL,OAAO;EACL;EACA,OAAO,OAAO;EACd;EACA;EACA;EACA,WAAW,OAAO;EAClB,WAAW,OAAO;EAClB,YAAY,OAAO;CACrB;AACF"}

package/dist/dev/ui/hotkey/component.d.ts

@@ -0,0 +1,15 @@
+import { HotkeyProps } from "@videojs/core";
+import { ReactNode } from "react";
+//#region src/ui/hotkey/component.d.ts
+interface HotkeyProps$1 extends HotkeyProps {}
+declare function Hotkey({ keys, action, value, disabled, target }: HotkeyProps$1): ReactNode;
+declare namespace Hotkey {
+  type Props = HotkeyProps$1;
+}
+/** @deprecated Use `HotkeyProps` instead. */
+type MediaHotkeyProps = HotkeyProps$1;
+/** @deprecated Use `Hotkey` instead. */
+declare const MediaHotkey: typeof Hotkey;
+//#endregion
+export { Hotkey, HotkeyProps$1 as HotkeyProps, MediaHotkey, MediaHotkeyProps };
+//# sourceMappingURL=component.d.ts.map

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

@@ -0,0 +1,64 @@
+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 };
+
+//# sourceMappingURL=component.js.map

package/dist/dev/ui/hotkey/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":["{ keys, action, value, disabled, target }: HotkeyProps","() => {\n    if (!container || !keys || !action || disabled) return;\n\n    const resolver = resolveHotkeyAction(action);\n    if (!resolver) return;\n\n    return createHotkey(container, {\n      keys,\n      action,\n      value,\n      target,\n      disabled,\n      repeatable: !isHotkeyToggleAction(action),\n      onActivate: (_event, key) => {\n        resolver({ store, key, value });\n      },\n    });\n  }","[container, store, keys, action, value, disabled, target]"],"sources":["../../../../src/ui/hotkey/component.tsx"],"sourcesContent":["import type { HotkeyProps as CoreHotkeyProps } from '@videojs/core';\nimport type { AnyPlayerStore } from '@videojs/core/dom';\nimport { createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface HotkeyProps extends CoreHotkeyProps {}\n\nexport function Hotkey({ keys, action, value, disabled, target }: HotkeyProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !keys || !action || disabled) return;\n\n    const resolver = resolveHotkeyAction(action);\n    if (!resolver) return;\n\n    return createHotkey(container, {\n      keys,\n      action,\n      value,\n      target,\n      disabled,\n      repeatable: !isHotkeyToggleAction(action),\n      onActivate: (_event, key) => {\n        resolver({ store, key, value });\n      },\n    });\n  }, [container, store, keys, action, value, disabled, target]);\n\n  return null;\n}\n\nexport namespace Hotkey {\n  export type Props = HotkeyProps;\n}\n\n/** @deprecated Use `HotkeyProps` instead. */\nexport type MediaHotkeyProps = HotkeyProps;\n\n/** @deprecated Use `Hotkey` instead. */\nexport const MediaHotkey = Hotkey;\n"],"mappings":";;;;;AAUA,SAAgB,OAAA,IAA0E;;CAAnE,MAAA,EAAE,MAAM,QAAQ,OAAO,UAAU,WAAjCA;CACrB,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAErBC,IAAAA;CAiBPC,IAAAA;CAhB2B,IAAA,EAAA,OAAA,UAAA,EAAA,OAAvB,aAAA,EAAA,OAAiC,YAAA,EAAA,OAAnB,QAAA,EAAA,OAaJ,SAAA,EAAA,OAJb,UAAA,EAAA,OAIyB,OAAA;EAdnB,WAAM;GACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,UAAU;GAEhD,MAAM,WAAW,oBAAoB,MAAM;GAC3C,IAAI,CAAC,UAAU;GAEf,OAAO,aAAa,WAAW;IAC7B;IACA;IACA;IACA;IACA;IACA,YAAY,CAAC,qBAAqB,MAAM;IACxC,aAAa,QAAQ,QAAQ;KAC3B,SAAS;MAAE;MAAO;MAAK;KAAM,CAAC;IAChC;GACF,CAAC;EACH;EAAG,KAAA;GAAC;GAAW;GAAO;GAAM;GAAQ;GAAO;GAAU;EAAM;EAhB7B,EAAA,KAAA;EAAvB,EAAA,KAAA;EAAiC,EAAA,KAAA;EAAnB,EAAA,KAAA;EAaJ,EAAA,KAAA;EAJb,EAAA,KAAA;EAIyB,EAAA,KAAA;;;;;;;CAd7B,UAAUD,IAiBPC,EAAyD;CAE5D,OAAO;AACT;;AAUA,MAAa,cAAc"}

package/dist/dev/ui/hotkey/index.d.ts

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

package/dist/dev/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/dev/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,22 +10,42 @@ 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

package/dist/dev/ui/hotkey/use-hotkey-shortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-hotkey-shortcut.js","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey-shortcut.ts"],"sourcesContent":["import { getHotkeyCoordinator, type HotkeyShortcutDetails } from '@videojs/core/dom';\nimport { useEffect, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\n\n/**\n * Returns display and ARIA metadata for a registered hotkey action in the current player.\n *\n * @param action - Hotkey action to look up. Returns empty details when absent.\n * @param value - Optional action value used to match value-dependent shortcuts.\n */\nexport function useHotkeyShortcut(action: string | undefined, value?: number | undefined): HotkeyShortcutDetails {\n  const container = useContainer();\n\n  const [shortcut, setShortcut] = useState<HotkeyShortcutDetails>({});\n\n  useEffect(() => {\n    if (!container || !action) {\n      setShortcut({});\n      return;\n    }\n\n    const coordinator = getHotkeyCoordinator(container);\n    const update = () => setShortcut(coordinator.getShortcut(action, value));\n\n    update();\n    return coordinator.subscribeShortcutChanges(update);\n  }, [container, action, value]);\n\n  return shortcut;\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,kBAAkB,QAA4B,OAAmD;CAC/G,MAAM,YAAY,aAAa;CAE/B,MAAM,CAAC,UAAU,eAAe,SAAgC,CAAC,CAAC;CAElE,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ;GACzB,YAAY,CAAC,CAAC;GACd;EACF;EAEA,MAAM,cAAc,qBAAqB,SAAS;EAClD,MAAM,eAAe,YAAY,YAAY,YAAY,QAAQ,KAAK,CAAC;EAEvE,OAAO;EACP,OAAO,YAAY,yBAAyB,MAAM;CACpD,GAAG;EAAC;EAAW;EAAQ;CAAK,CAAC;CAE7B,OAAO;AACT"}
+{"version":3,"file":"use-hotkey-shortcut.js","names":["{}","() => {\n    if (!container || !action) {\n      setShortcut({});\n      return;\n    }\n\n    const coordinator = getHotkeyCoordinator(container);\n    const update = () => setShortcut(coordinator.getShortcut(action, value));\n\n    update();\n    return coordinator.subscribeShortcutChanges(update);\n  }","[container, action, value]"],"sources":["../../../../src/ui/hotkey/use-hotkey-shortcut.ts"],"sourcesContent":["import { getHotkeyCoordinator, type HotkeyShortcutDetails } from '@videojs/core/dom';\nimport { useEffect, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\n\n/**\n * Returns display and ARIA metadata for a registered hotkey action in the current player.\n *\n * @param action - Hotkey action to look up. Returns empty details when absent.\n * @param value - Optional action value used to match value-dependent shortcuts.\n */\nexport function useHotkeyShortcut(action: string | undefined, value?: number | undefined): HotkeyShortcutDetails {\n  const container = useContainer();\n\n  const [shortcut, setShortcut] = useState<HotkeyShortcutDetails>({});\n\n  useEffect(() => {\n    if (!container || !action) {\n      setShortcut({});\n      return;\n    }\n\n    const coordinator = getHotkeyCoordinator(container);\n    const update = () => setShortcut(coordinator.getShortcut(action, value));\n\n    update();\n    return coordinator.subscribeShortcutChanges(update);\n  }, [container, action, value]);\n\n  return shortcut;\n}\n"],"mappings":";;;;;;;;;;;AAWA,SAAgB,kBAAkB,QAA4B,OAAmD;;CAC/G,MAAM,YAAY,aAAa;CAEiCA,IAAAA;;EAAC,KAAA,CAAA;;;CAAjE,MAAM,CAAC,UAAU,eAAe,SAAgCA,EAAE;CAExDC,IAAAA;CAWPC,IAAAA;CAVkB,IAAA,EAAA,OAAA,UAAA,EAAA,OAAd,aAAA,EAAA,OAM4D,OAAA;EAPzD,WAAM;GACd,IAAI,CAAC,aAAa,CAAC,QAAQ;IACzB,YAAY,CAAC,CAAC;IACd;GACF;GAEA,MAAM,cAAc,qBAAqB,SAAS;GAClD,MAAM,eAAe,YAAY,YAAY,YAAY,QAAQ,KAAK,CAAC;GAEvE,OAAO;GACP,OAAO,YAAY,yBAAyB,MAAM;EACpD;EAAG,KAAA;GAAC;GAAW;GAAQ;EAAK;EAVP,EAAA,KAAA;EAAd,EAAA,KAAA;EAM4D,EAAA,KAAA;;;;;;;CAPnE,UAAUD,IAWPC,EAA0B;CAE7B,OAAO;AACT"}

package/dist/dev/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,25 +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 };

package/dist/dev/ui/hotkey/use-hotkey.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey.ts"],"sourcesContent":["import { createHotkey } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseHotkeyOptions {\n  keys: string;\n  onActivate: (event: KeyboardEvent, key: string) => void;\n  target?: 'player' | 'document';\n  repeatable?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * Registers a keyboard shortcut through the current player's hotkey coordinator.\n *\n * @param options - Shortcut keys, activation callback, scope, repeat behavior, and disabled state.\n */\nexport function useHotkey(options: UseHotkeyOptions): void {\n  const { keys, target = 'player', repeatable = true, disabled = false } = options;\n  const container = useContainer();\n  const onActivateRef = useLatestRef(options.onActivate);\n\n  useEffect(() => {\n    if (!container || !keys || disabled) return;\n\n    return createHotkey(container, {\n      keys,\n      target,\n      repeatable,\n      disabled,\n      onActivate: (event, key) => onActivateRef.current(event, key),\n    });\n  }, [container, keys, target, repeatable, disabled]);\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,UAAU,SAAiC;CACzD,MAAM,EAAE,MAAM,SAAS,UAAU,aAAa,MAAM,WAAW,UAAU;CACzE,MAAM,YAAY,aAAa;CAC/B,MAAM,gBAAgB,aAAa,QAAQ,UAAU;CAErD,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,UAAU;EAErC,OAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA,aAAa,OAAO,QAAQ,cAAc,QAAQ,OAAO,GAAG;EAC9D,CAAC;CACH,GAAG;EAAC;EAAW;EAAM;EAAQ;EAAY;CAAQ,CAAC;AACpD"}
+{"version":3,"file":"use-hotkey.js","names":["target = 'player'","repeatable = true","disabled = false","() => {\n    if (!container || !keys || disabled) return;\n\n    return createHotkey(container, {\n      keys,\n      target,\n      repeatable,\n      disabled,\n      onActivate: (event, key) => onActivateRef.current(event, key),\n    });\n  }","[container, keys, target, repeatable, disabled]"],"sources":["../../../../src/ui/hotkey/use-hotkey.ts"],"sourcesContent":["import { createHotkey } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseHotkeyOptions {\n  keys: string;\n  onActivate: (event: KeyboardEvent, key: string) => void;\n  target?: 'player' | 'document';\n  repeatable?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * Registers a keyboard shortcut through the current player's hotkey coordinator.\n *\n * @param options - Shortcut keys, activation callback, scope, repeat behavior, and disabled state.\n */\nexport function useHotkey(options: UseHotkeyOptions): void {\n  const { keys, target = 'player', repeatable = true, disabled = false } = options;\n  const container = useContainer();\n  const onActivateRef = useLatestRef(options.onActivate);\n\n  useEffect(() => {\n    if (!container || !keys || disabled) return;\n\n    return createHotkey(container, {\n      keys,\n      target,\n      repeatable,\n      disabled,\n      onActivate: (event, key) => onActivateRef.current(event, key),\n    });\n  }, [container, keys, target, repeatable, disabled]);\n}\n"],"mappings":";;;;;;;;;;;AAmBA,SAAgB,UAAU,SAAiC;;CACzD,MAAM,EAAE,MAAM,QAAA,IAAmB,YAAA,IAAmB,UAAA,OAAqB;CAA3D,MAAA,SAAA,OAAA,KAAA,IAAS,WAATA;CAAmB,MAAA,aAAA,OAAA,KAAA,IAAa,OAAbC;CAAmB,MAAA,WAAA,OAAA,KAAA,IAAW,QAAXC;CACpD,MAAM,YAAY,aAAa;CAC/B,MAAM,gBAAgB,aAAa,QAAQ,UAAU;CAE3CC,IAAAA;CACH,IAAA,EAAA,OAAA,aAAA,EAAA,OAAsB,YAAA,EAAA,OAAR,QAAA,EAAA,OAOW,iBAAA,EAAA,OAF5B,cAAA,EAAA,OADA,QAAA;EALM,WAAM;GACd,IAAI,CAAC,aAAa,CAAC,QAAQ,UAAU;GAErC,OAAO,aAAa,WAAW;IAC7B;IACA;IACA;IACA;IACA,aAAa,OAAO,QAAQ,cAAc,QAAQ,OAAO,GAAG;GAC9D,CAAC;EACH;EATO,EAAA,KAAA;EAAsB,EAAA,KAAA;EAAR,EAAA,KAAA;EAOW,EAAA,KAAA;EAF5B,EAAA,KAAA;EADA,EAAA,KAAA;;;CAKDC,IAAAA;CAAC,IAAA,EAAA,OAAA,aAAA,EAAA,OAAqC,YAAA,EAAA,OAA1B,QAAA,EAAA,QAAc,cAAA,EAAA,QAAR,QAAA;EAAlB,KAAA;GAAC;GAAW;GAAM;GAAQ;GAAY;EAAQ;EAA7C,EAAA,KAAA;EAAqC,EAAA,KAAA;EAA1B,EAAA,KAAA;EAAc,EAAA,MAAA;EAAR,EAAA,MAAA;;;CAVrB,UAAUD,IAUPC,EAA+C;AACpD"}

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

@@ -1,22 +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 };

package/dist/dev/ui/input-indicator/use-indicator-visibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-indicator-visibility.js","names":[],"sources":["../../../../src/ui/input-indicator/use-indicator-visibility.ts"],"sourcesContent":["import type { IndicatorVisibilityHandle } from '@videojs/core';\nimport { getIndicatorVisibilityCoordinator } from '@videojs/core/dom';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useIndicatorVisibility(close: () => void): () => void {\n  const container = useContainer();\n  const closeRef = useLatestRef(close);\n  const coordinatorRef = useRef<ReturnType<typeof getIndicatorVisibilityCoordinator> | null>(null);\n  const [handle] = useState<IndicatorVisibilityHandle>(() => ({\n    close: () => closeRef.current(),\n  }));\n\n  useEffect(() => {\n    if (!container) return;\n\n    const coordinator = getIndicatorVisibilityCoordinator(container);\n\n    coordinatorRef.current = coordinator;\n\n    return coordinator.register(handle);\n  }, [container, handle]);\n\n  return useCallback(() => {\n    coordinatorRef.current?.show(handle);\n  }, [handle]);\n}\n"],"mappings":";;;;;AAOA,SAAgB,uBAAuB,OAA+B;CACpE,MAAM,YAAY,aAAa;CAC/B,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,iBAAiB,OAAoE,IAAI;CAC/F,MAAM,CAAC,UAAU,gBAA2C,EAC1D,aAAa,SAAS,QAAQ,EAChC,EAAE;CAEF,gBAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,MAAM,cAAc,kCAAkC,SAAS;EAE/D,eAAe,UAAU;EAEzB,OAAO,YAAY,SAAS,MAAM;CACpC,GAAG,CAAC,WAAW,MAAM,CAAC;CAEtB,OAAO,kBAAkB;EACvB,eAAe,SAAS,KAAK,MAAM;CACrC,GAAG,CAAC,MAAM,CAAC;AACb"}
+{"version":3,"file":"use-indicator-visibility.js","names":["() => ({\n    close: () => closeRef.current(),\n  })","() => {\n    if (!container) return;\n\n    const coordinator = getIndicatorVisibilityCoordinator(container);\n\n    coordinatorRef.current = coordinator;\n\n    return coordinator.register(handle);\n  }","[container, handle]","() => {\n    coordinatorRef.current?.show(handle);\n  }","useCallback(() => {\n    coordinatorRef.current?.show(handle);\n  }, [handle])"],"sources":["../../../../src/ui/input-indicator/use-indicator-visibility.ts"],"sourcesContent":["import type { IndicatorVisibilityHandle } from '@videojs/core';\nimport { getIndicatorVisibilityCoordinator } from '@videojs/core/dom';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useIndicatorVisibility(close: () => void): () => void {\n  const container = useContainer();\n  const closeRef = useLatestRef(close);\n  const coordinatorRef = useRef<ReturnType<typeof getIndicatorVisibilityCoordinator> | null>(null);\n  const [handle] = useState<IndicatorVisibilityHandle>(() => ({\n    close: () => closeRef.current(),\n  }));\n\n  useEffect(() => {\n    if (!container) return;\n\n    const coordinator = getIndicatorVisibilityCoordinator(container);\n\n    coordinatorRef.current = coordinator;\n\n    return coordinator.register(handle);\n  }, [container, handle]);\n\n  return useCallback(() => {\n    coordinatorRef.current?.show(handle);\n  }, [handle]);\n}\n"],"mappings":";;;;;;AAOA,SAAgB,uBAAuB,OAA+B;;CACpE,MAAM,YAAY,aAAa;CAC/B,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,iBAAiB,OAAoE,IAAI;CAC1CA,IAAAA;CACtC,IAAA,EAAA,OAAA,UAAA;EADsC,YAAO,EAC1D,aAAa,SAAS,QAAQ,EAChC;EADe,EAAA,KAAA;;;CADf,MAAM,CAAC,UAAU,SAAoCA,EAEnD;CAEQC,IAAAA;CAQPC,IAAAA;CAPI,IAAA,EAAA,OAAA,aAAA,EAAA,OAMuB,QAAA;EAPpB,WAAM;GACd,IAAI,CAAC,WAAW;GAEhB,MAAM,cAAc,kCAAkC,SAAS;GAE/D,eAAe,UAAU;GAEzB,OAAO,YAAY,SAAS,MAAM;EACpC;EAAG,KAAA,CAAC,WAAW,MAAM;EAPd,EAAA,KAAA;EAMuB,EAAA,KAAA;;;;;;;CAP9B,UAAUD,IAQPC,EAAmB;CAEHC,IAAAA;CACY,IAAA,EAAA,OAAA,QAAA;EADZ,WAAM;GACvB,eAAe,SAAS,KAAK,MAAM;EACrC;EAD+B,EAAA,KAAA;;;CAD/B,OAAOC;AAGT"}

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

@@ -1,19 +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 };

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

@@ -1 +1 @@
-{"version":3,"file":"use-input-action-subscription.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-action-subscription.ts"],"sourcesContent":["import type { InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport { getMediaSnapshot, subscribeToInputActions } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useInputActionSubscription(callback: (event: InputActionEvent, snapshot: MediaSnapshot) => void): void {\n  const container = useContainer();\n  const store = usePlayer();\n  const callbackRef = useLatestRef(callback);\n  const storeRef = useLatestRef(store);\n\n  useEffect(() => {\n    if (!container) return;\n\n    return subscribeToInputActions(container, (event) => {\n      callbackRef.current(event, getMediaSnapshot(storeRef.current));\n    });\n  }, [container]);\n}\n"],"mappings":";;;;;AAOA,SAAgB,2BAA2B,UAA4E;CACrH,MAAM,YAAY,aAAa;CAC/B,MAAM,QAAQ,UAAU;CACxB,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,WAAW,aAAa,KAAK;CAEnC,gBAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,OAAO,wBAAwB,YAAY,UAAU;GACnD,YAAY,QAAQ,OAAO,iBAAiB,SAAS,OAAO,CAAC;EAC/D,CAAC;CACH,GAAG,CAAC,SAAS,CAAC;AAChB"}
+{"version":3,"file":"use-input-action-subscription.js","names":["() => {\n    if (!container) return;\n\n    return subscribeToInputActions(container, (event) => {\n      callbackRef.current(event, getMediaSnapshot(storeRef.current));\n    });\n  }","storeRef.current","[container]"],"sources":["../../../../src/ui/input-indicator/use-input-action-subscription.ts"],"sourcesContent":["import type { InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport { getMediaSnapshot, subscribeToInputActions } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useInputActionSubscription(callback: (event: InputActionEvent, snapshot: MediaSnapshot) => void): void {\n  const container = useContainer();\n  const store = usePlayer();\n  const callbackRef = useLatestRef(callback);\n  const storeRef = useLatestRef(store);\n\n  useEffect(() => {\n    if (!container) return;\n\n    return subscribeToInputActions(container, (event) => {\n      callbackRef.current(event, getMediaSnapshot(storeRef.current));\n    });\n  }, [container]);\n}\n"],"mappings":";;;;;;AAOA,SAAgB,2BAA2B,UAA4E;;CACrH,MAAM,YAAY,aAAa;CAC/B,MAAM,QAAQ,UAAU;CACxB,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,WAAW,aAAa,KAAK;CAEzBA,IAAAA;CAIN,IAAA,EAAA,OAAA,eAAA,EAAA,OAHG,aAAA,EAAA,OAGyCC,UAAAA;EAJtC,WAAM;GACd,IAAI,CAAC,WAAW;GAEhB,OAAO,wBAAwB,YAAY,UAAU;IACnD,YAAY,QAAQ,OAAO,iBAAiB,SAAS,OAAO,CAAC;GAC/D,CAAC;EACH;EAFI,EAAA,KAAA;EAHG,EAAA,KAAA;EAGyCA,EAAAA,KAAAA;;;CAE7CC,IAAAA;CAAC,IAAA,EAAA,OAAA,WAAA;EAAD,KAAA,CAAC,SAAS;EAAT,EAAA,KAAA;;;CANJ,UAAUF,IAMPE,EAAW;AAChB"}

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

@@ -2,17 +2,50 @@ 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