@videojs/react 10.0.0-beta.3 → 10.0.0-beta.31

package/dist/default/ui/gesture/use-tap-gesture.js

@@ -0,0 +1,27 @@
+import { useContainer } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { createTapGesture } from "@videojs/core/dom";
+import { useEffect } from "react";
+//#region src/ui/gesture/use-tap-gesture.ts
+function useTapGesture(onActivate, options) {
+	const { pointer, region, disabled = false, target } = options ?? {};
+	const contextContainer = useContainer();
+	const container = target?.current ?? contextContainer;
+	const onActivateRef = useLatestRef(onActivate);
+	useEffect(() => {
+		if (!container || disabled) return;
+		return createTapGesture(container, (event) => onActivateRef.current(event), {
+			pointer,
+			region
+		});
+	}, [
+		container,
+		disabled,
+		pointer,
+		region
+	]);
+}
+//#endregion
+export { useTapGesture };
+
+//# sourceMappingURL=use-tap-gesture.js.map

package/dist/default/ui/gesture/use-tap-gesture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tap-gesture.js","names":[],"sources":["../../../../src/ui/gesture/use-tap-gesture.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport { createTapGesture } from '@videojs/core/dom';\nimport type { RefObject } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseTapGestureOptions extends Pick<GestureProps, 'pointer' | 'region' | 'disabled'> {\n  target?: RefObject<HTMLElement | null>;\n}\n\nexport function useTapGesture(onActivate: (event: PointerEvent) => void, options?: UseTapGestureOptions): void {\n  const { pointer, region, disabled = false, target } = options ?? {};\n  const contextContainer = useContainer();\n  const container = target?.current ?? contextContainer;\n  const onActivateRef = useLatestRef(onActivate);\n\n  useEffect(() => {\n    if (!container || disabled) return;\n\n    return createTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n  }, [container, disabled, pointer, region]);\n}\n"],"mappings":";;;;;AAYA,SAAgB,cAAc,YAA2C,SAAsC;CAC7G,MAAM,EAAE,SAAS,QAAQ,WAAW,OAAO,WAAW,WAAW,CAAC;CAClE,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAE7C,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU;EAE5B,OAAO,iBAAiB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;GAAE;GAAS;EAAO,CAAC;CACjG,GAAG;EAAC;EAAW;EAAU;EAAS;CAAM,CAAC;AAC3C"}

package/dist/default/ui/hooks/create-radio-options-hook.js

@@ -0,0 +1,42 @@
+import { useTranslator } from "../../i18n/context.js";
+import { usePlayer } from "../../player/context.js";
+import "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { useCallback, useState } from "react";
+//#region src/ui/hooks/create-radio-options-hook.ts
+/** Creates framework adapter mechanics shared by media-backed radio option hooks. */
+function createRadioOptionsHook({ name, feature, selector, createCore }) {
+	return function useRadioOptions(props) {
+		"use no memo";
+		const media = usePlayer(selector);
+		const t = useTranslator();
+		const [core] = useState(createCore);
+		core.setProps(props ?? {});
+		const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
+		if (!media) return null;
+		core.setMedia(media);
+		const state = core.getState();
+		const options = state.options.map((option) => {
+			const { label, labelParams, disabled, ...rest } = option;
+			return {
+				...rest,
+				label: translateText(label, t, labelParams),
+				disabled: state.disabled || disabled
+			};
+		});
+		return {
+			state,
+			label: translateText(core.getLabel(state), t, core.getLabelParams?.(state)),
+			value: state.value,
+			selectedLabel: options.find((option) => option.value === state.value)?.label ?? "",
+			options,
+			disabled: state.disabled,
+			hidden: state.hidden,
+			setValue
+		};
+	};
+}
+//#endregion
+export { createRadioOptionsHook };
+
+//# sourceMappingURL=create-radio-options-hook.js.map

package/dist/default/ui/hooks/create-radio-options-hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-radio-options-hook.js","names":[],"sources":["../../../../src/ui/hooks/create-radio-options-hook.ts"],"sourcesContent":["import type { RadioOption, RadioOptionsState } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport { type Text, type TextParams, translateText } from '@videojs/core/i18n';\nimport type { UnknownState } from '@videojs/store';\nimport { useCallback, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\n\ninterface RadioOptionsCore<Props, Media, State extends RadioOptionsState> {\n  setProps(props: Props): void;\n  setMedia(media: Media): void;\n  getState(): State;\n  getLabel(state: State): Text | string;\n  getLabelParams?(state: State): TextParams | undefined;\n  selectValue(media: Media, value: string): void;\n}\n\ninterface RadioOptionsHookConfig<Props, Media, State extends RadioOptionsState> {\n  name: string;\n  feature: string;\n  selector: ((state: UnknownState) => Media | null) & { displayName?: string | undefined };\n  createCore: () => RadioOptionsCore<Props, Media, State>;\n}\n\ntype StateOption<State extends RadioOptionsState> = State extends RadioOptionsState<infer Option> ? Option : never;\n\nexport type TranslatedRadioOption<Option extends RadioOption> = Omit<Option, 'label' | 'labelParams' | 'disabled'> & {\n  label: string;\n  disabled: boolean;\n};\n\nexport interface RadioOptionsHookResult<Option extends RadioOption, State extends RadioOptionsState> {\n  state: State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: TranslatedRadioOption<Option>[];\n  disabled: boolean;\n  hidden: boolean;\n  setValue: (value: string) => void;\n}\n\n/** Creates framework adapter mechanics shared by media-backed radio option hooks. */\nexport function createRadioOptionsHook<Props, Media, State extends RadioOptionsState>({\n  name,\n  feature,\n  selector,\n  createCore,\n}: RadioOptionsHookConfig<Props, Media, State>): (\n  props?: Props\n) => RadioOptionsHookResult<StateOption<State>, State> | null {\n  return function useRadioOptions(props?: Props): RadioOptionsHookResult<StateOption<State>, State> | null {\n    'use no memo';\n\n    const media = usePlayer(selector);\n    const t = useTranslator();\n    const [core] = useState(createCore);\n\n    core.setProps(props ?? ({} as Props));\n\n    const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n    if (!media) {\n      if (__DEV__) logMissingFeature(name, selector.displayName ?? feature);\n      return null;\n    }\n\n    core.setMedia(media);\n    const state = core.getState();\n    const options = state.options.map((option) => {\n      const { label, labelParams, disabled, ...rest } = option;\n\n      return {\n        ...rest,\n        label: translateText(label, t, labelParams),\n        disabled: state.disabled || disabled,\n      } as TranslatedRadioOption<StateOption<State>>;\n    });\n\n    return {\n      state,\n      label: translateText(core.getLabel(state), t, core.getLabelParams?.(state)),\n      value: state.value,\n      selectedLabel: options.find((option) => option.value === state.value)?.label ?? '',\n      options,\n      disabled: state.disabled,\n      hidden: state.hidden,\n      setValue,\n    };\n  };\n}\n"],"mappings":";;;;;;;AA4CA,SAAgB,uBAAsE,EACpF,MACA,SACA,UACA,cAG4D;CAC5D,OAAO,SAAS,gBAAgB,OAAyE;EACvG;EAEA,MAAM,QAAQ,UAAU,QAAQ;EAChC,MAAM,IAAI,cAAc;EACxB,MAAM,CAAC,QAAQ,SAAS,UAAU;EAElC,KAAK,SAAS,SAAU,CAAC,CAAW;EAEpC,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC;EAE9F,IAAI,CAAC,OAEH,OAAO;EAGT,KAAK,SAAS,KAAK;EACnB,MAAM,QAAQ,KAAK,SAAS;EAC5B,MAAM,UAAU,MAAM,QAAQ,KAAK,WAAW;GAC5C,MAAM,EAAE,OAAO,aAAa,UAAU,GAAG,SAAS;GAElD,OAAO;IACL,GAAG;IACH,OAAO,cAAc,OAAO,GAAG,WAAW;IAC1C,UAAU,MAAM,YAAY;GAC9B;EACF,CAAC;EAED,OAAO;GACL;GACA,OAAO,cAAc,KAAK,SAAS,KAAK,GAAG,GAAG,KAAK,iBAAiB,KAAK,CAAC;GAC1E,OAAO,MAAM;GACb,eAAe,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,KAAK,CAAC,EAAE,SAAS;GAChF;GACA,UAAU,MAAM;GAChB,QAAQ,MAAM;GACd;EACF;CACF;AACF"}

package/dist/default/ui/hooks/use-button.js

@@ -1,9 +1,6 @@
-'use client';
-
 import { mergeProps } from "../../utils/merge-props.js";
 import { createButton } from "@videojs/core/dom";
 import { useCallback } from "react";
-
 //#region src/ui/hooks/use-button.ts
 /**
 * Hook for button behavior with keyboard and pointer interaction.
@@ -38,7 +35,7 @@ function useButton(params) {
 		buttonRef
 	};
 }
-
 //#endregion
 export { useButton };
+
 //# sourceMappingURL=use-button.js.map

package/dist/default/ui/hooks/use-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-button.js","names":[],"sources":["../../../../src/ui/hooks/use-button.ts"],"sourcesContent":["'use client';\n\nimport { createButton } from '@videojs/core/dom';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useCallback } from 'react';\nimport { mergeProps } from '../../utils/merge-props';\n\nexport interface UseButtonParameters {\n  displayName: string;\n  onActivate: () => void;\n  isDisabled: () => boolean;\n}\n\nexport interface UseButtonReturnValue {\n  getButtonProps: (externalProps?: ComponentPropsWithRef<'button'>) => ComponentPropsWithRef<'button'>;\n  buttonRef: Ref<HTMLElement>;\n}\n\n/**\n * Hook for button behavior with keyboard and pointer interaction.\n *\n * @example\n * ```tsx\n * const { getButtonProps, buttonRef } = useButton({\n *   displayName: 'PlayButton',\n *   onActivate: () => togglePlayback(),\n *   isDisabled: () => disabled,\n * });\n *\n * return useRender('button', componentProps, {\n *   state,\n *   ref: [forwardedRef, buttonRef],\n *   props: [elementProps, getButtonProps],\n * });\n * ```\n *\n * @param params - Button configuration with activation handler and disabled check.\n */\nexport function useButton(params: UseButtonParameters): UseButtonReturnValue {\n  const { displayName, onActivate, isDisabled } = params;\n\n  const buttonRef = useCallback(\n    (element: HTMLElement | null) => {\n      if (__DEV__ && element && element.tagName !== 'BUTTON') {\n        console.warn(`${displayName} should render a <button> element for accessibility`);\n      }\n    },\n    [displayName]\n  );\n\n  const getButtonProps = useCallback(\n    (externalProps?: ComponentPropsWithRef<'button'>): ComponentPropsWithRef<'button'> => {\n      const buttonProps = createButton({ onActivate, isDisabled });\n      return mergeProps(buttonProps, externalProps);\n    },\n    [onActivate, isDisabled]\n  );\n\n  return { getButtonProps, buttonRef };\n}\n\nexport namespace useButton {\n  export type Parameters = UseButtonParameters;\n  export type ReturnValue = UseButtonReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,UAAU,QAAmD;CAC3E,MAAM,EAAE,aAAa,YAAY,eAAe;CAEhD,MAAM,YAAY,aACf,YAAgC,IAKjC,CAAC,YAAY,CACd;AAUD,QAAO;EAAE,gBARc,aACpB,kBAAqF;AAEpF,UAAO,WADa,aAAa;IAAE;IAAY;IAAY,CAAC,EAC7B,cAAc;KAE/C,CAAC,YAAY,WAAW,CACzB;EAEwB;EAAW"}
+{"version":3,"file":"use-button.js","names":[],"sources":["../../../../src/ui/hooks/use-button.ts"],"sourcesContent":["import { createButton, type UIEvent } from '@videojs/core/dom';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useCallback } from 'react';\nimport { mergeProps } from '../../utils/merge-props';\n\nexport interface UseButtonParameters {\n  displayName: string;\n  onActivate: (event: UIEvent) => void;\n  isDisabled: () => boolean;\n}\n\nexport interface UseButtonReturnValue {\n  getButtonProps: (externalProps?: ComponentPropsWithRef<'button'>) => ComponentPropsWithRef<'button'>;\n  buttonRef: Ref<HTMLElement>;\n}\n\n/**\n * Hook for button behavior with keyboard and pointer interaction.\n *\n * @example\n * ```tsx\n * const { getButtonProps, buttonRef } = useButton({\n *   displayName: 'PlayButton',\n *   onActivate: () => togglePlayback(),\n *   isDisabled: () => disabled,\n * });\n *\n * return useRender('button', componentProps, {\n *   state,\n *   ref: [forwardedRef, buttonRef],\n *   props: [elementProps, getButtonProps],\n * });\n * ```\n *\n * @param params - Button configuration with activation handler and disabled check.\n */\nexport function useButton(params: UseButtonParameters): UseButtonReturnValue {\n  const { displayName, onActivate, isDisabled } = params;\n\n  const buttonRef = useCallback(\n    (element: HTMLElement | null) => {\n      if (__DEV__ && element && element.tagName !== 'BUTTON') {\n        console.warn(`${displayName} should render a <button> element for accessibility`);\n      }\n    },\n    [displayName]\n  );\n\n  const getButtonProps = useCallback(\n    (externalProps?: ComponentPropsWithRef<'button'>): ComponentPropsWithRef<'button'> => {\n      const buttonProps = createButton({ onActivate, isDisabled });\n      return mergeProps(buttonProps, externalProps);\n    },\n    [onActivate, isDisabled]\n  );\n\n  return { getButtonProps, buttonRef };\n}\n\nexport namespace useButton {\n  export type Parameters = UseButtonParameters;\n  export type ReturnValue = UseButtonReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,UAAU,QAAmD;CAC3E,MAAM,EAAE,aAAa,YAAY,eAAe;CAEhD,MAAM,YAAY,aACf,YAAgC,CAIjC,GACA,CAAC,WAAW,CACd;CAUA,OAAO;EAAE,gBARc,aACpB,kBAAqF;GAEpF,OAAO,WADa,aAAa;IAAE;IAAY;GAAW,CAC9B,GAAG,aAAa;EAC9C,GACA,CAAC,YAAY,UAAU,CAGH;EAAG;CAAU;AACrC"}

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

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+//#region src/ui/hooks/use-positioned-state.ts
+function usePositionedState(preferredState) {
+	const preferredSide = preferredState.side;
+	const [position, setPosition] = useState({
+		preferred: preferredSide,
+		side: preferredSide
+	});
+	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
+	};
+}
+//#endregion
+export { usePositionedState };
+
+//# sourceMappingURL=use-positioned-state.js.map

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

@@ -0,0 +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"}

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

@@ -1,13 +1,11 @@
-'use client';
-
-import { useDestroy } from "../../utils/use-destroy.js";
+import { useOptionalPlayer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useDestroy } from "../../utils/use-destroy.js";
 import { useForceRender } from "../../utils/use-force-render.js";
-import { createSlider } from "@videojs/core/dom";
+import { createSlider, selectControls } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import { isRTL } from "@videojs/utils/dom";
-
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { applyStyles } from "@videojs/utils/dom";
 //#region src/ui/hooks/use-slider.ts
 /**
 * Manages slider input lifecycle for React.
@@ -18,6 +16,13 @@ import { isRTL } from "@videojs/utils/dom";
 */
 function useSlider(options) {
 	const optionsRef = useLatestRef(options);
+	const requestControlsLock = useOptionalPlayer(selectControls)?.requestControlsLock;
+	const releaseControlsLockRef = useRef(null);
+	const releaseControlsLock = useCallback(() => {
+		releaseControlsLockRef.current?.();
+		releaseControlsLockRef.current = null;
+	}, []);
+	useEffect(() => releaseControlsLock, [releaseControlsLock]);
 	const rootElementRef = useRef(null);
 	const thumbElementRef = useRef(null);
 	const forceRender = useForceRender();
@@ -26,40 +31,67 @@ function useSlider(options) {
 			getElement: () => rootElementRef.current,
 			getThumbElement: () => thumbElementRef.current,
 			getOrientation: () => optionsRef.current.orientation ?? "horizontal",
-			isRTL: () => rootElementRef.current ? isRTL(rootElementRef.current) : false,
 			isDisabled: () => optionsRef.current.disabled ?? false,
 			getPercent: () => optionsRef.current.getPercent(),
 			getStepPercent: () => optionsRef.current.getStepPercent(),
 			getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),
-			commitThrottle: optionsRef.current.commitThrottle,
+			changeThrottle: optionsRef.current.changeThrottle,
 			adjustPercent: optionsRef.current.adjustPercent,
 			onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),
 			onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),
-			onDragStart: () => optionsRef.current.onDragStart?.(),
-			onDragEnd: () => optionsRef.current.onDragEnd?.()
+			onDragStart: () => {
+				releaseControlsLockRef.current ??= requestControlsLock?.() ?? null;
+				optionsRef.current.onDragStart?.();
+			},
+			onDragEnd: () => {
+				releaseControlsLock();
+				optionsRef.current.onDragEnd?.();
+			}
 		});
 	});
 	useDestroy(slider);
-	const input = useSnapshot(slider.input);
+	const interaction = useSnapshot(slider.input, ({ dragging, pointing, focused }) => ({
+		dragging,
+		pointing,
+		focused
+	}));
+	const input = {
+		...slider.input.current,
+		...interaction
+	};
 	const state = options.computeState(input);
 	useLayoutEffect(() => {
 		if (state.thumbAlignment === "edge" && rootElementRef.current && thumbElementRef.current) forceRender();
 	}, [state.thumbAlignment]);
+	const cssVars = options.getCSSVars(slider.adjustForAlignment(state));
+	const syncStyles = useCallback((element = rootElementRef.current) => {
+		if (!element) return;
+		const next = optionsRef.current.computeState(slider.input.current);
+		applyStyles(element, optionsRef.current.getCSSVars(slider.adjustForAlignment(next)));
+	}, [slider]);
+	useLayoutEffect(() => {
+		syncStyles();
+		return slider.input.subscribe(syncStyles);
+	}, [slider, syncStyles]);
+	const rootRef = useCallback((element) => {
+		rootElementRef.current = element;
+		syncStyles(element);
+	}, [syncStyles]);
+	const thumbRef = useCallback((element) => {
+		thumbElementRef.current = element;
+	}, []);
 	return {
 		state,
-		cssVars: options.getCSSVars(slider.adjustForAlignment(state)),
-		rootRef: useCallback((element) => {
-			rootElementRef.current = element;
-		}, []),
-		thumbRef: useCallback((element) => {
-			thumbElementRef.current = element;
-		}, []),
+		input: slider.input,
+		cssVars,
+		rootRef,
+		thumbRef,
 		rootProps: slider.rootProps,
 		rootStyle: slider.rootStyle,
 		thumbProps: slider.thumbProps
 	};
 }
-
 //#endregion
 export { useSlider };
+
 //# sourceMappingURL=use-slider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["'use client';\n\nimport 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} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isRTL } from '@videojs/utils/dom';\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react';\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>\n  extends Pick<\n    SliderOptions,\n    | 'getPercent'\n    | 'getStepPercent'\n    | 'getLargeStepPercent'\n    | 'commitThrottle'\n    | 'onValueChange'\n    | 'onValueCommit'\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  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\n * input state via `useSnapshot`. Returns split props for the root\n * (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 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      isRTL: () => (rootElementRef.current ? isRTL(rootElementRef.current) : false),\n      isDisabled: () => optionsRef.current.disabled ?? false,\n      getPercent: () => optionsRef.current.getPercent(),\n      getStepPercent: () => optionsRef.current.getStepPercent(),\n      getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),\n      commitThrottle: optionsRef.current.commitThrottle,\n      adjustPercent: optionsRef.current.adjustPercent,\n      onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),\n      onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),\n      onDragStart: () => optionsRef.current.onDragStart?.(),\n      onDragEnd: () => optionsRef.current.onDragEnd?.(),\n    };\n\n    return createSlider(stableOptions);\n  });\n\n  useDestroy(slider);\n\n  // Subscribe to slider input state.\n  const input = useSnapshot(slider.input);\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  // Ref callbacks for root and thumb elements.\n  const rootRef = useCallback((element: HTMLElement | null) => {\n    rootElementRef.current = element;\n  }, []);\n\n  const thumbRef = useCallback((element: HTMLElement | null) => {\n    thumbElementRef.current = element;\n  }, []);\n\n  return {\n    state,\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":";;;;;;;;;;;;;;;;;;AAwDA,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,QAAQ;CAExC,MAAM,iBAAiB,OAA2B,KAAK;CACvD,MAAM,kBAAkB,OAA2B,KAAK;CACxD,MAAM,cAAc,gBAAgB;CAGpC,MAAM,CAAC,UAAU,eAA0B;AAkBzC,SAAO,aAjB8B;GACnC,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,aAAc,eAAe,UAAU,MAAM,eAAe,QAAQ,GAAG;GACvE,kBAAkB,WAAW,QAAQ,YAAY;GACjD,kBAAkB,WAAW,QAAQ,YAAY;GACjD,sBAAsB,WAAW,QAAQ,gBAAgB;GACzD,2BAA2B,WAAW,QAAQ,qBAAqB;GACnE,gBAAgB,WAAW,QAAQ;GACnC,eAAe,WAAW,QAAQ;GAClC,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,QAAQ;GACvE,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,QAAQ;GACvE,mBAAmB,WAAW,QAAQ,eAAe;GACrD,iBAAiB,WAAW,QAAQ,aAAa;GAClD,CAEiC;GAClC;AAEF,YAAW,OAAO;CAGlB,MAAM,QAAQ,YAAY,OAAO,MAAM;CAGvC,MAAM,QAAQ,QAAQ,aAAa,MAAM;AAIzC,uBAAsB;AACpB,MAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,QAC/E,cAAa;IAEd,CAAC,MAAM,eAAe,CAAC;AAc1B,QAAO;EACL;EACA,SAbc,QAAQ,WAAW,OAAO,mBAAmB,MAAM,CAAC;EAclE,SAXc,aAAa,YAAgC;AAC3D,kBAAe,UAAU;KACxB,EAAE,CAAC;EAUJ,UARe,aAAa,YAAgC;AAC5D,mBAAgB,UAAU;KACzB,EAAE,CAAC;EAOJ,WAAW,OAAO;EAClB,WAAW,OAAO;EAClB,YAAY,OAAO;EACpB"}
+{"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';\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>\n  extends Pick<\n    SliderOptions,\n    | 'getPercent'\n    | 'getStepPercent'\n    | 'getLargeStepPercent'\n    | 'changeThrottle'\n    | 'onValueChange'\n    | 'onValueCommit'\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\n * input state via `useSnapshot`. Returns split props for the root\n * (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  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      onDragStart: () => {\n        releaseControlsLockRef.current ??= requestControlsLock?.() ?? null;\n        optionsRef.current.onDragStart?.();\n      },\n      onDragEnd: () => {\n        releaseControlsLock();\n        optionsRef.current.onDragEnd?.();\n      },\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      const next = optionsRef.current.computeState(slider.input.current);\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":";;;;;;;;;;;;;;;;AAyDA,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,OAAO;CAEvC,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;EAuBzC,OAAO,aAAa;GArBlB,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,mBAAmB;IACjB,uBAAuB,YAAY,sBAAsB,KAAK;IAC9D,WAAW,QAAQ,cAAc;GACnC;GACA,iBAAiB;IACf,oBAAoB;IACpB,WAAW,QAAQ,YAAY;GACjC;EAG8B,CAAC;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;EACd,MAAM,OAAO,WAAW,QAAQ,aAAa,OAAO,MAAM,OAAO;EACjE,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/default/ui/hotkey/hotkey.js

@@ -0,0 +1,43 @@
+import { useContainer, usePlayer } from "../../player/context.js";
+import { createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from "@videojs/core/dom";
+import { useEffect } from "react";
+//#region src/ui/hotkey/hotkey.tsx
+function Hotkey({ keys, action, value, disabled, target }) {
+	const store = usePlayer();
+	const container = useContainer();
+	useEffect(() => {
+		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
+				});
+			}
+		});
+	}, [
+		container,
+		store,
+		keys,
+		action,
+		value,
+		disabled,
+		target
+	]);
+	return null;
+}
+/** @deprecated Use `Hotkey` instead. */
+const MediaHotkey = Hotkey;
+//#endregion
+export { Hotkey, MediaHotkey };
+
+//# sourceMappingURL=hotkey.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/hotkey.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,OAAO,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAkC;CACxF,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAE/B,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,UAAU;EAEhD,MAAM,WAAW,oBAAoB,MAAM;EAC3C,IAAI,CAAC,UAAU;EAEf,OAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA;GACA,YAAY,CAAC,qBAAqB,MAAM;GACxC,aAAa,QAAQ,QAAQ;IAC3B,SAAS;KAAE;KAAO;KAAK;IAAM,CAAC;GAChC;EACF,CAAC;CACH,GAAG;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAU;CAAM,CAAC;CAE5D,OAAO;AACT;;AAUA,MAAa,cAAc"}

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

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

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

@@ -0,0 +1,27 @@
+import { useContainer } from "../../player/context.js";
+import { getHotkeyCoordinator } from "@videojs/core/dom";
+import { useEffect, useState } from "react";
+//#region src/ui/hotkey/use-hotkey-shortcut.ts
+function useHotkeyShortcut(action, value) {
+	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
+	]);
+	return shortcut;
+}
+//#endregion
+export { useHotkeyShortcut };
+
+//# sourceMappingURL=use-hotkey-shortcut.js.map

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

@@ -0,0 +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\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":";;;;AAKA,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"}

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

@@ -0,0 +1,30 @@
+import { useContainer } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { createHotkey } from "@videojs/core/dom";
+import { useEffect } from "react";
+//#region src/ui/hotkey/use-hotkey.ts
+function useHotkey(options) {
+	const { keys, target = "player", repeatable = true, disabled = false } = options;
+	const container = useContainer();
+	const onActivateRef = useLatestRef(options.onActivate);
+	useEffect(() => {
+		if (!container || !keys || disabled) return;
+		return createHotkey(container, {
+			keys,
+			target,
+			repeatable,
+			disabled,
+			onActivate: (event, key) => onActivateRef.current(event, key)
+		});
+	}, [
+		container,
+		keys,
+		target,
+		repeatable,
+		disabled
+	]);
+}
+//#endregion
+export { useHotkey };
+
+//# sourceMappingURL=use-hotkey.js.map

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

@@ -0,0 +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\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":";;;;;AAcA,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"}

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

@@ -0,0 +1,24 @@
+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";
+//#region src/ui/input-indicator/use-indicator-visibility.ts
+function useIndicatorVisibility(close) {
+	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]);
+}
+//#endregion
+export { useIndicatorVisibility };
+
+//# sourceMappingURL=use-indicator-visibility.js.map

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

@@ -0,0 +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    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;EAC/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"}

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

@@ -0,0 +1,21 @@
+import { useContainer, usePlayer } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { getMediaSnapshot, subscribeToInputActions } from "@videojs/core/dom";
+import { useEffect } from "react";
+//#region src/ui/input-indicator/use-input-action-subscription.ts
+function useInputActionSubscription(callback) {
+	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]);
+}
+//#endregion
+export { useInputActionSubscription };
+
+//# sourceMappingURL=use-input-action-subscription.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,20 @@
+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 { useState, useSyncExternalStore } from "react";
+//#region src/ui/input-indicator/use-input-indicator-root.ts
+function useInputIndicatorRoot(createCore, props, options) {
+	const [core] = useState(createCore);
+	useDestroy(core);
+	core.setProps(props);
+	const showIndicator = useIndicatorVisibility(() => core.close());
+	useInputActionSubscription((event, snapshot) => {
+		if (core.processEvent(event, snapshot)) showIndicator();
+	});
+	return useRenderedIndicatorState(useSyncExternalStore((callback) => core.state.subscribe(callback), () => core.state.current, () => core.state.current), options);
+}
+//#endregion
+export { useInputIndicatorRoot };
+
+//# sourceMappingURL=use-input-indicator-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-input-indicator-root.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-indicator-root.ts"],"sourcesContent":["import type { IndicatorLifecycleState, InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport type { State as StoreState } from '@videojs/store';\nimport { useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useIndicatorVisibility } from './use-indicator-visibility';\nimport { useInputActionSubscription } from './use-input-action-subscription';\nimport { type RenderedIndicatorOptions, useRenderedIndicatorState } from './use-rendered-indicator-state';\n\ninterface InputIndicatorRootCore<IndicatorState extends IndicatorLifecycleState, Props> {\n  readonly state: StoreState<IndicatorState>;\n  setProps(props: Props): void;\n  destroy(): void;\n  close(): void;\n  processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;\n}\n\nexport function useInputIndicatorRoot<IndicatorState extends IndicatorLifecycleState, Props>(\n  createCore: () => InputIndicatorRootCore<IndicatorState, Props>,\n  props: Props,\n  options?: RenderedIndicatorOptions\n) {\n  const [core] = useState(createCore);\n  useDestroy(core);\n  core.setProps(props);\n  const showIndicator = useIndicatorVisibility(() => core.close());\n\n  useInputActionSubscription((event, snapshot) => {\n    if (core.processEvent(event, snapshot)) showIndicator();\n  });\n\n  const currentState = useSyncExternalStore(\n    (callback) => core.state.subscribe(callback),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  return useRenderedIndicatorState(currentState, options);\n}\n"],"mappings":";;;;;;AAiBA,SAAgB,sBACd,YACA,OACA,SACA;CACA,MAAM,CAAC,QAAQ,SAAS,UAAU;CAClC,WAAW,IAAI;CACf,KAAK,SAAS,KAAK;CACnB,MAAM,gBAAgB,6BAA6B,KAAK,MAAM,CAAC;CAE/D,4BAA4B,OAAO,aAAa;EAC9C,IAAI,KAAK,aAAa,OAAO,QAAQ,GAAG,cAAc;CACxD,CAAC;CAQD,OAAO,0BANc,sBAClB,aAAa,KAAK,MAAM,UAAU,QAAQ,SACrC,KAAK,MAAM,eACX,KAAK,MAAM,OAGyB,GAAG,OAAO;AACxD"}

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

@@ -0,0 +1,42 @@
+import { useDestroy } from "../../utils/use-destroy.js";
+import { createTransition } from "@videojs/core/dom";
+import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { getRenderedIndicatorState, isIndicatorPresent } from "@videojs/core";
+//#region src/ui/input-indicator/use-rendered-indicator-state.ts
+function useRenderedIndicatorState(currentState, options = {}) {
+	const elementRef = useRef(null);
+	const currentStateRef = useRef(currentState);
+	const snapshotRef = useRef(currentState);
+	const [transition] = useState(() => createTransition());
+	useDestroy(transition);
+	currentStateRef.current = currentState;
+	const transitionState = useSyncExternalStore((callback) => transition.state.subscribe(callback), () => transition.state.current, () => transition.state.current);
+	const { generation, open } = currentState;
+	useLayoutEffect(() => {
+		if (open) {
+			const nextState = currentStateRef.current;
+			if (nextState.generation !== generation) return;
+			snapshotRef.current = nextState;
+			const transitionState = transition.state.current;
+			if (!transitionState.active || options.replayOnUpdate !== false) transition.open(elementRef.current);
+			else if (transitionState.status === "ending") transition.cancel();
+			return;
+		}
+		const { active, status } = transition.state.current;
+		if (active && status !== "ending") transition.close(elementRef.current);
+	}, [
+		generation,
+		open,
+		options.replayOnUpdate,
+		transition
+	]);
+	return {
+		elementRef,
+		present: isIndicatorPresent(currentState, transitionState),
+		state: getRenderedIndicatorState(currentState, snapshotRef.current, transitionState)
+	};
+}
+//#endregion
+export { useRenderedIndicatorState };
+
+//# sourceMappingURL=use-rendered-indicator-state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-rendered-indicator-state.js","names":[],"sources":["../../../../src/ui/input-indicator/use-rendered-indicator-state.ts"],"sourcesContent":["import { getRenderedIndicatorState, type IndicatorLifecycleState, isIndicatorPresent } from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport { useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\n\nexport interface RenderedIndicatorOptions {\n  replayOnUpdate?: boolean | undefined;\n}\n\nexport function useRenderedIndicatorState<State extends IndicatorLifecycleState>(\n  currentState: State,\n  options: RenderedIndicatorOptions = {}\n) {\n  const elementRef = useRef<HTMLElement>(null);\n  const currentStateRef = useRef(currentState);\n  const snapshotRef = useRef(currentState);\n  const [transition] = useState(() => createTransition());\n  useDestroy(transition);\n  currentStateRef.current = currentState;\n\n  const transitionState = useSyncExternalStore(\n    (callback) => transition.state.subscribe(callback),\n    () => transition.state.current,\n    () => transition.state.current\n  );\n\n  const { generation, open } = currentState;\n\n  useLayoutEffect(() => {\n    if (open) {\n      const nextState = currentStateRef.current;\n      if (nextState.generation !== generation) return;\n\n      snapshotRef.current = nextState;\n      const transitionState = transition.state.current;\n      if (!transitionState.active || options.replayOnUpdate !== false) {\n        void transition.open(elementRef.current);\n      } else if (transitionState.status === 'ending') {\n        transition.cancel();\n      }\n      return;\n    }\n\n    const { active, status } = transition.state.current;\n    if (active && status !== 'ending') {\n      void transition.close(elementRef.current);\n    }\n  }, [generation, open, options.replayOnUpdate, transition]);\n\n  return {\n    elementRef,\n    present: isIndicatorPresent(currentState, transitionState),\n    state: getRenderedIndicatorState(currentState, snapshotRef.current, transitionState),\n  };\n}\n"],"mappings":";;;;;AAUA,SAAgB,0BACd,cACA,UAAoC,CAAC,GACrC;CACA,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,kBAAkB,OAAO,YAAY;CAC3C,MAAM,cAAc,OAAO,YAAY;CACvC,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;CACtD,WAAW,UAAU;CACrB,gBAAgB,UAAU;CAE1B,MAAM,kBAAkB,sBACrB,aAAa,WAAW,MAAM,UAAU,QAAQ,SAC3C,WAAW,MAAM,eACjB,WAAW,MAAM,OACzB;CAEA,MAAM,EAAE,YAAY,SAAS;CAE7B,sBAAsB;EACpB,IAAI,MAAM;GACR,MAAM,YAAY,gBAAgB;GAClC,IAAI,UAAU,eAAe,YAAY;GAEzC,YAAY,UAAU;GACtB,MAAM,kBAAkB,WAAW,MAAM;GACzC,IAAI,CAAC,gBAAgB,UAAU,QAAQ,mBAAmB,OACxD,WAAgB,KAAK,WAAW,OAAO;QAClC,IAAI,gBAAgB,WAAW,UACpC,WAAW,OAAO;GAEpB;EACF;EAEA,MAAM,EAAE,QAAQ,WAAW,WAAW,MAAM;EAC5C,IAAI,UAAU,WAAW,UACvB,WAAgB,MAAM,WAAW,OAAO;CAE5C,GAAG;EAAC;EAAY;EAAM,QAAQ;EAAgB;CAAU,CAAC;CAEzD,OAAO;EACL;EACA,SAAS,mBAAmB,cAAc,eAAe;EACzD,OAAO,0BAA0B,cAAc,YAAY,SAAS,eAAe;CACrF;AACF"}

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

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