@videojs/react 10.0.0-beta.2 → 10.0.0-beta.22

package/dist/dev/ui/gesture/media-gesture.js

@@ -0,0 +1,42 @@
+"use client";
+import { useContainer, usePlayer } from "../../player/context.js";
+import { createDoubleTapGesture, createTapGesture, resolveGestureAction } from "@videojs/core/dom";
+import { useEffect } from "react";
+//#region src/ui/gesture/media-gesture.tsx
+function MediaGesture({ type, action, value, pointer, region, disabled }) {
+	const store = usePlayer();
+	const container = useContainer();
+	useEffect(() => {
+		if (!container || !type || !action || disabled) return;
+		const resolver = resolveGestureAction(action);
+		if (!resolver) return;
+		const onActivate = (event) => {
+			resolver({
+				store,
+				value,
+				event
+			});
+		};
+		const options = {
+			pointer,
+			region,
+			action
+		};
+		if (type === "doubletap") return createDoubleTapGesture(container, onActivate, options);
+		return createTapGesture(container, onActivate, options);
+	}, [
+		container,
+		store,
+		type,
+		action,
+		value,
+		pointer,
+		region,
+		disabled
+	]);
+	return null;
+}
+//#endregion
+export { MediaGesture };
+
+//# sourceMappingURL=media-gesture.js.map

package/dist/dev/ui/gesture/media-gesture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-gesture.js","names":[],"sources":["../../../../src/ui/gesture/media-gesture.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type AnyPlayerStore,\n  createDoubleTapGesture,\n  createTapGesture,\n  type GestureActionName,\n  type GesturePointerType,\n  type GestureRegion,\n  resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface MediaGestureProps {\n  type: 'tap' | 'doubletap' | (string & {});\n  action: GestureActionName | (string & {});\n  value?: number;\n  pointer?: GesturePointerType;\n  region?: GestureRegion;\n  disabled?: boolean;\n}\n\nexport function MediaGesture({ type, action, value, pointer, region, disabled }: MediaGestureProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !type || !action || disabled) return;\n\n    const resolver = resolveGestureAction(action);\n    if (!resolver) return;\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value, event });\n    };\n\n    const options = { pointer, region, action };\n\n    if (type === 'doubletap') {\n      return createDoubleTapGesture(container, onActivate, options);\n    }\n\n    return createTapGesture(container, onActivate, options);\n  }, [container, store, type, action, value, pointer, region, disabled]);\n\n  return null;\n}\n"],"mappings":";;;;;AAyBA,SAAgB,aAAa,EAAE,MAAM,QAAQ,OAAO,SAAS,QAAQ,YAA0C;CAC7G,MAAM,QAAQ,WAAW;CACzB,MAAM,YAAY,cAAc;AAEhC,iBAAgB;AACd,MAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,SAAU;EAEhD,MAAM,WAAW,qBAAqB,OAAO;AAC7C,MAAI,CAAC,SAAU;EAEf,MAAM,cAAc,UAAwB;AAC1C,YAAS;IAAE;IAAO;IAAO;IAAO,CAAC;;EAGnC,MAAM,UAAU;GAAE;GAAS;GAAQ;GAAQ;AAE3C,MAAI,SAAS,YACX,QAAO,uBAAuB,WAAW,YAAY,QAAQ;AAG/D,SAAO,iBAAiB,WAAW,YAAY,QAAQ;IACtD;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAS;EAAQ;EAAS,CAAC;AAEtE,QAAO"}

package/dist/dev/ui/gesture/use-doubletap-gesture.d.ts

@@ -0,0 +1,14 @@
+import { GesturePointerType, GestureRegion } from "@videojs/core/dom";
+import { RefObject } from "react";
+
+//#region src/ui/gesture/use-doubletap-gesture.d.ts
+interface UseDoubleTapGestureOptions {
+  pointer?: GesturePointerType;
+  region?: GestureRegion;
+  disabled?: boolean;
+  target?: RefObject<HTMLElement | null>;
+}
+declare function useDoubleTapGesture(onActivate: (event: PointerEvent) => void, options?: UseDoubleTapGestureOptions): void;
+//#endregion
+export { UseDoubleTapGestureOptions, useDoubleTapGesture };
+//# sourceMappingURL=use-doubletap-gesture.d.ts.map

package/dist/dev/ui/gesture/use-doubletap-gesture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-doubletap-gesture.d.ts","names":[],"sources":["../../../../src/ui/gesture/use-doubletap-gesture.ts"],"mappings":";;;;UASiB,0BAAA;EACf,OAAA,GAAU,kBAAA;EACV,MAAA,GAAS,aAAA;EACT,QAAA;EACA,MAAA,GAAS,SAAA,CAAU,WAAA;AAAA;AAAA,iBAGL,mBAAA,CACd,UAAA,GAAa,KAAA,EAAO,YAAA,WACpB,OAAA,GAAU,0BAAA"}

package/dist/dev/ui/gesture/use-doubletap-gesture.js

@@ -0,0 +1,29 @@
+"use client";
+import { useContainer } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { createDoubleTapGesture } from "@videojs/core/dom";
+import { useEffect } from "react";
+//#region src/ui/gesture/use-doubletap-gesture.ts
+function useDoubleTapGesture(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 createDoubleTapGesture(container, (event) => onActivateRef.current(event), {
+			pointer,
+			region
+		});
+	}, [
+		container,
+		disabled,
+		pointer,
+		region,
+		onActivateRef
+	]);
+}
+//#endregion
+export { useDoubleTapGesture };
+
+//# sourceMappingURL=use-doubletap-gesture.js.map

package/dist/dev/ui/gesture/use-doubletap-gesture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-doubletap-gesture.js","names":[],"sources":["../../../../src/ui/gesture/use-doubletap-gesture.ts"],"sourcesContent":["'use client';\n\nimport { createDoubleTapGesture, type GesturePointerType, type GestureRegion } 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 UseDoubleTapGestureOptions {\n  pointer?: GesturePointerType;\n  region?: GestureRegion;\n  disabled?: boolean;\n  target?: RefObject<HTMLElement | null>;\n}\n\nexport function useDoubleTapGesture(\n  onActivate: (event: PointerEvent) => void,\n  options?: UseDoubleTapGestureOptions\n): 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 createDoubleTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n  }, [container, disabled, pointer, region, onActivateRef]);\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,oBACd,YACA,SACM;CACN,MAAM,EAAE,SAAS,QAAQ,WAAW,OAAO,WAAW,WAAW,EAAE;CACnE,MAAM,mBAAmB,cAAc;CACvC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,WAAW;AAE9C,iBAAgB;AACd,MAAI,CAAC,aAAa,SAAU;AAE5B,SAAO,uBAAuB,YAAY,UAAU,cAAc,QAAQ,MAAM,EAAE;GAAE;GAAS;GAAQ,CAAC;IACrG;EAAC;EAAW;EAAU;EAAS;EAAQ;EAAc,CAAC"}

package/dist/dev/ui/gesture/use-tap-gesture.d.ts

@@ -0,0 +1,14 @@
+import { GesturePointerType, GestureRegion } from "@videojs/core/dom";
+import { RefObject } from "react";
+
+//#region src/ui/gesture/use-tap-gesture.d.ts
+interface UseTapGestureOptions {
+  pointer?: GesturePointerType;
+  region?: GestureRegion;
+  disabled?: boolean;
+  target?: RefObject<HTMLElement | null>;
+}
+declare function useTapGesture(onActivate: (event: PointerEvent) => void, options?: UseTapGestureOptions): void;
+//#endregion
+export { UseTapGestureOptions, useTapGesture };
+//# sourceMappingURL=use-tap-gesture.d.ts.map

package/dist/dev/ui/gesture/use-tap-gesture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tap-gesture.d.ts","names":[],"sources":["../../../../src/ui/gesture/use-tap-gesture.ts"],"mappings":";;;;UASiB,oBAAA;EACf,OAAA,GAAU,kBAAA;EACV,MAAA,GAAS,aAAA;EACT,QAAA;EACA,MAAA,GAAS,SAAA,CAAU,WAAA;AAAA;AAAA,iBAGL,aAAA,CAAc,UAAA,GAAa,KAAA,EAAO,YAAA,WAAuB,OAAA,GAAU,oBAAA"}

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

@@ -0,0 +1,29 @@
+"use client";
+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,
+		onActivateRef
+	]);
+}
+//#endregion
+export { useTapGesture };
+
+//# sourceMappingURL=use-tap-gesture.js.map

package/dist/dev/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":["'use client';\n\nimport { createTapGesture, type GesturePointerType, type GestureRegion } 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 {\n  pointer?: GesturePointerType;\n  region?: GestureRegion;\n  disabled?: boolean;\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, onActivateRef]);\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,cAAc,YAA2C,SAAsC;CAC7G,MAAM,EAAE,SAAS,QAAQ,WAAW,OAAO,WAAW,WAAW,EAAE;CACnE,MAAM,mBAAmB,cAAc;CACvC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,WAAW;AAE9C,iBAAgB;AACd,MAAI,CAAC,aAAa,SAAU;AAE5B,SAAO,iBAAiB,YAAY,UAAU,cAAc,QAAQ,MAAM,EAAE;GAAE;GAAS;GAAQ,CAAC;IAC/F;EAAC;EAAW;EAAU;EAAS;EAAQ;EAAc,CAAC"}

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

@@ -1,9 +1,7 @@
-'use client';
-
+"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.
@@ -40,7 +38,7 @@ function useButton(params) {
 		buttonRef
 	};
 }
-
 //#endregion
 export { useButton };
+
 //# sourceMappingURL=use-button.js.map

package/dist/dev/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;AAC/B,MAAe,WAAW,QAAQ,YAAY,SAC5C,SAAQ,KAAK,GAAG,YAAY,qDAAqD;IAGrF,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":["'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;AAC/B,MAAe,WAAW,QAAQ,YAAY,SAC5C,SAAQ,KAAK,GAAG,YAAY,qDAAqD;IAGrF,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"}

package/dist/dev/ui/hooks/use-slider.d.ts

@@ -2,7 +2,7 @@ import { SliderOptions, SliderRootProps, SliderRootStyle, SliderThumbProps } fro
 import { SliderInput, SliderState } from "@videojs/core";
 
 //#region src/ui/hooks/use-slider.d.ts
-interface UseSliderOptions<State extends SliderState = SliderState> extends Pick<SliderOptions, 'getPercent' | 'getStepPercent' | 'getLargeStepPercent' | 'commitThrottle' | 'onValueChange' | 'onValueCommit' | 'onDragStart' | 'onDragEnd'> {
+interface UseSliderOptions<State extends SliderState = SliderState> extends Pick<SliderOptions, 'getPercent' | 'getStepPercent' | 'getLargeStepPercent' | 'changeThrottle' | 'onValueChange' | 'onValueCommit' | 'onDragStart' | 'onDragEnd'> {
   computeState: (input: SliderInput) => State;
   orientation?: 'horizontal' | 'vertical' | undefined;
   disabled?: boolean | undefined;

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

@@ -1,13 +1,11 @@
-'use client';
-
-import { useDestroy } from "../../utils/use-destroy.js";
+"use client";
 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 { useSnapshot } from "@videojs/store/react";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { isRTL } from "@videojs/utils/dom";
-
 //#region src/ui/hooks/use-slider.ts
 /**
 * Manages slider input lifecycle for React.
@@ -31,7 +29,7 @@ function useSlider(options) {
 			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),
@@ -59,7 +57,7 @@ function useSlider(options) {
 		thumbProps: slider.thumbProps
 	};
 }
-
 //#endregion
 export { useSlider };
+
 //# sourceMappingURL=use-slider.js.map

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":["'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":["'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    | '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  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      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: () => 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"}

package/dist/dev/ui/hotkey/media-hotkey.d.ts

@@ -0,0 +1,21 @@
+import { HotkeyActionName } from "@videojs/core/dom";
+import { ReactNode } from "react";
+
+//#region src/ui/hotkey/media-hotkey.d.ts
+interface MediaHotkeyProps {
+  keys: string;
+  action: HotkeyActionName | (string & {});
+  value?: number;
+  disabled?: boolean;
+  target?: 'player' | 'document';
+}
+declare function MediaHotkey({
+  keys,
+  action,
+  value,
+  disabled,
+  target
+}: MediaHotkeyProps): ReactNode;
+//#endregion
+export { MediaHotkey, MediaHotkeyProps };
+//# sourceMappingURL=media-hotkey.d.ts.map

package/dist/dev/ui/hotkey/media-hotkey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-hotkey.d.ts","names":[],"sources":["../../../../src/ui/hotkey/media-hotkey.tsx"],"mappings":";;;;UAciB,gBAAA;EACf,IAAA;EACA,MAAA,EAAQ,gBAAA;EACR,KAAA;EACA,QAAA;EACA,MAAA;AAAA;AAAA,iBAGc,WAAA,CAAA;EAAc,IAAA;EAAM,MAAA;EAAQ,KAAA;EAAO,QAAA;EAAU;AAAA,GAAU,gBAAA,GAAmB,SAAA"}

package/dist/dev/ui/hotkey/media-hotkey.js

@@ -0,0 +1,41 @@
+"use client";
+import { useContainer, usePlayer } from "../../player/context.js";
+import { createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from "@videojs/core/dom";
+import { useEffect } from "react";
+//#region src/ui/hotkey/media-hotkey.tsx
+function MediaHotkey({ 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,
+			target,
+			disabled,
+			repeatable: !isHotkeyToggleAction(action),
+			onActivate: (_event, key) => {
+				resolver({
+					store,
+					key,
+					value
+				});
+			}
+		});
+	}, [
+		container,
+		store,
+		keys,
+		action,
+		value,
+		disabled,
+		target
+	]);
+	return null;
+}
+//#endregion
+export { MediaHotkey };
+
+//# sourceMappingURL=media-hotkey.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"media-hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/media-hotkey.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type AnyPlayerStore,\n  createHotkey,\n  type HotkeyActionName,\n  isHotkeyToggleAction,\n  resolveHotkeyAction,\n} from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface MediaHotkeyProps {\n  keys: string;\n  action: HotkeyActionName | (string & {});\n  value?: number;\n  disabled?: boolean;\n  target?: 'player' | 'document';\n}\n\nexport function MediaHotkey({ keys, action, value, disabled, target }: MediaHotkeyProps): 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      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"],"mappings":";;;;;AAsBA,SAAgB,YAAY,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAuC;CAClG,MAAM,QAAQ,WAAW;CACzB,MAAM,YAAY,cAAc;AAEhC,iBAAgB;AACd,MAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,SAAU;EAEhD,MAAM,WAAW,oBAAoB,OAAO;AAC5C,MAAI,CAAC,SAAU;AAEf,SAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA,YAAY,CAAC,qBAAqB,OAAO;GACzC,aAAa,QAAQ,QAAQ;AAC3B,aAAS;KAAE;KAAO;KAAK;KAAO,CAAC;;GAElC,CAAC;IACD;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAU;EAAO,CAAC;AAE7D,QAAO"}

package/dist/dev/ui/hotkey/use-aria-key-shortcuts.d.ts

@@ -0,0 +1,5 @@
+//#region src/ui/hotkey/use-aria-key-shortcuts.d.ts
+declare function useAriaKeyShortcuts(action: string | undefined): string | undefined;
+//#endregion
+export { useAriaKeyShortcuts };
+//# sourceMappingURL=use-aria-key-shortcuts.d.ts.map

package/dist/dev/ui/hotkey/use-aria-key-shortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-aria-key-shortcuts.d.ts","names":[],"sources":["../../../../src/ui/hotkey/use-aria-key-shortcuts.ts"],"mappings":";iBAOgB,mBAAA,CAAoB,MAAA"}

package/dist/dev/ui/hotkey/use-aria-key-shortcuts.js

@@ -0,0 +1,16 @@
+"use client";
+import { useContainer } from "../../player/context.js";
+import { findHotkeyCoordinator } from "@videojs/core/dom";
+import { useMemo } from "react";
+//#region src/ui/hotkey/use-aria-key-shortcuts.ts
+function useAriaKeyShortcuts(action) {
+	const container = useContainer();
+	return useMemo(() => {
+		if (!container || !action) return void 0;
+		return findHotkeyCoordinator(container)?.getAriaKeys(action);
+	}, [container, action]);
+}
+//#endregion
+export { useAriaKeyShortcuts };
+
+//# sourceMappingURL=use-aria-key-shortcuts.js.map

package/dist/dev/ui/hotkey/use-aria-key-shortcuts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-aria-key-shortcuts.js","names":[],"sources":["../../../../src/ui/hotkey/use-aria-key-shortcuts.ts"],"sourcesContent":["'use client';\n\nimport { findHotkeyCoordinator } from '@videojs/core/dom';\nimport { useMemo } from 'react';\n\nimport { useContainer } from '../../player/context';\n\nexport function useAriaKeyShortcuts(action: string | undefined): string | undefined {\n  const container = useContainer();\n  return useMemo(() => {\n    if (!container || !action) return undefined;\n    return findHotkeyCoordinator(container)?.getAriaKeys(action);\n  }, [container, action]);\n}\n"],"mappings":";;;;;AAOA,SAAgB,oBAAoB,QAAgD;CAClF,MAAM,YAAY,cAAc;AAChC,QAAO,cAAc;AACnB,MAAI,CAAC,aAAa,CAAC,OAAQ,QAAO,KAAA;AAClC,SAAO,sBAAsB,UAAU,EAAE,YAAY,OAAO;IAC3D,CAAC,WAAW,OAAO,CAAC"}

package/dist/dev/ui/hotkey/use-hotkey.d.ts

@@ -0,0 +1,12 @@
+//#region src/ui/hotkey/use-hotkey.d.ts
+interface UseHotkeyOptions {
+  keys: string;
+  onActivate: (event: KeyboardEvent, key: string) => void;
+  target?: 'player' | 'document';
+  repeatable?: boolean;
+  disabled?: boolean;
+}
+declare function useHotkey(options: UseHotkeyOptions): void;
+//#endregion
+export { UseHotkeyOptions, useHotkey };
+//# sourceMappingURL=use-hotkey.d.ts.map

package/dist/dev/ui/hotkey/use-hotkey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hotkey.d.ts","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey.ts"],"mappings":";UAQiB,gBAAA;EACf,IAAA;EACA,UAAA,GAAa,KAAA,EAAO,aAAA,EAAe,GAAA;EACnC,MAAA;EACA,UAAA;EACA,QAAA;AAAA;AAAA,iBAGc,SAAA,CAAU,OAAA,EAAS,gBAAA"}

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

@@ -0,0 +1,32 @@
+"use client";
+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,
+		onActivateRef
+	]);
+}
+//#endregion
+export { useHotkey };
+
+//# sourceMappingURL=use-hotkey.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey.ts"],"sourcesContent":["'use client';\n\nimport { 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, onActivateRef]);\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,UAAU,SAAiC;CACzD,MAAM,EAAE,MAAM,SAAS,UAAU,aAAa,MAAM,WAAW,UAAU;CACzE,MAAM,YAAY,cAAc;CAChC,MAAM,gBAAgB,aAAa,QAAQ,WAAW;AAEtD,iBAAgB;AACd,MAAI,CAAC,aAAa,CAAC,QAAQ,SAAU;AAErC,SAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA,aAAa,OAAO,QAAQ,cAAc,QAAQ,OAAO,IAAI;GAC9D,CAAC;IACD;EAAC;EAAW;EAAM;EAAQ;EAAY;EAAU;EAAc,CAAC"}

package/dist/dev/ui/mute-button/index.js

@@ -1,3 +1,2 @@
 import { MuteButton } from "./mute-button.js";
-
-export { MuteButton };
+export { MuteButton };

package/dist/dev/ui/mute-button/mute-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mute-button.d.ts","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;cAG7F,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAQN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}
+{"version":3,"file":"mute-button.d.ts","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;cAG7F,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBASN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}

package/dist/dev/ui/mute-button/mute-button.js

@@ -1,9 +1,7 @@
-'use client';
-
+"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { selectVolume } from "@videojs/core/dom";
 import { MuteButtonCore, MuteButtonDataAttrs } from "@videojs/core";
-
 //#region src/ui/mute-button/mute-button.tsx
 /** A button that toggles mute state. */
 const MuteButton = createMediaButton({
@@ -11,9 +9,10 @@ const MuteButton = createMediaButton({
 	core: MuteButtonCore,
 	stateAttrMap: MuteButtonDataAttrs,
 	selector: selectVolume,
-	action: (core, state) => core.toggle(state)
+	action: (core, state) => core.toggle(state),
+	hotkeyAction: "toggleMuted"
 });
-
 //#endregion
 export { MuteButton };
+
 //# sourceMappingURL=mute-button.js.map

package/dist/dev/ui/mute-button/mute-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"mute-button.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"sourcesContent":["'use client';\n\nimport { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}\n\n/** A button that toggles mute state. */\nexport const MuteButton = createMediaButton<MuteButtonCore, MuteButtonProps>({\n  displayName: 'MuteButton',\n  core: MuteButtonCore,\n  stateAttrMap: MuteButtonDataAttrs,\n  selector: selectVolume,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace MuteButton {\n  export type Props = MuteButtonProps;\n  export type State = MuteButtonCore.State;\n}\n"],"mappings":";;;;;;;;AAWA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}
+{"version":3,"file":"mute-button.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"sourcesContent":["'use client';\n\nimport { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}\n\n/** A button that toggles mute state. */\nexport const MuteButton = createMediaButton<MuteButtonCore, MuteButtonProps>({\n  displayName: 'MuteButton',\n  core: MuteButtonCore,\n  stateAttrMap: MuteButtonDataAttrs,\n  selector: selectVolume,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'toggleMuted',\n});\n\nexport namespace MuteButton {\n  export type Props = MuteButtonProps;\n  export type State = MuteButtonCore.State;\n}\n"],"mappings":";;;;;;AAWA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC3C,cAAc;CACf,CAAC"}

package/dist/dev/ui/pip-button/index.js

@@ -1,3 +1,2 @@
 import { PiPButton } from "./pip-button.js";
-
-export { PiPButton };
+export { PiPButton };

package/dist/dev/ui/pip-button/pip-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pip-button.d.ts","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"mappings":";;;;;UAQiB,cAAA,SAAuB,gBAAA,WAA2B,aAAA,CAAc,KAAA,GAAQ,aAAA,CAAc,KAAA;;cAG1F,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAQL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;EAAA,KACR,KAAA,GAAQ,aAAA,CAAc,KAAA;AAAA"}
+{"version":3,"file":"pip-button.d.ts","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"mappings":";;;;;UAQiB,cAAA,SAAuB,gBAAA,WAA2B,aAAA,CAAc,KAAA,GAAQ,aAAA,CAAc,KAAA;;cAG1F,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBASL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;EAAA,KACR,KAAA,GAAQ,aAAA,CAAc,KAAA;AAAA"}

package/dist/dev/ui/pip-button/pip-button.js

@@ -1,9 +1,7 @@
-'use client';
-
+"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { selectPiP } from "@videojs/core/dom";
 import { PiPButtonCore, PiPButtonDataAttrs } from "@videojs/core";
-
 //#region src/ui/pip-button/pip-button.tsx
 /** A button that toggles picture-in-picture. */
 const PiPButton = createMediaButton({
@@ -11,9 +9,10 @@ const PiPButton = createMediaButton({
 	core: PiPButtonCore,
 	stateAttrMap: PiPButtonDataAttrs,
 	selector: selectPiP,
-	action: (core, state) => core.toggle(state)
+	action: (core, state) => core.toggle(state),
+	hotkeyAction: "togglePictureInPicture"
 });
-
 //#endregion
 export { PiPButton };
+
 //# sourceMappingURL=pip-button.js.map

package/dist/dev/ui/pip-button/pip-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["'use client';\n\nimport { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\n/** A button that toggles picture-in-picture. */\nexport const PiPButton = createMediaButton<PiPButtonCore, PiPButtonProps>({\n  displayName: 'PiPButton',\n  core: PiPButtonCore,\n  stateAttrMap: PiPButtonDataAttrs,\n  selector: selectPiP,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace PiPButton {\n  export type Props = PiPButtonProps;\n  export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;;;;AAWA,MAAa,YAAY,kBAAiD;CACxE,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}
+{"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["'use client';\n\nimport { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\n/** A button that toggles picture-in-picture. */\nexport const PiPButton = createMediaButton<PiPButtonCore, PiPButtonProps>({\n  displayName: 'PiPButton',\n  core: PiPButtonCore,\n  stateAttrMap: PiPButtonDataAttrs,\n  selector: selectPiP,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'togglePictureInPicture',\n});\n\nexport namespace PiPButton {\n  export type Props = PiPButtonProps;\n  export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;;AAWA,MAAa,YAAY,kBAAiD;CACxE,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC3C,cAAc;CACf,CAAC"}

package/dist/dev/ui/play-button/index.js

@@ -1,3 +1,2 @@
 import { PlayButton } from "./play-button.js";
-
-export { PlayButton };
+export { PlayButton };

package/dist/dev/ui/play-button/play-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"play-button.d.ts","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;;;;;;;;;;;;;;cAkBa,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAQN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}
+{"version":3,"file":"play-button.d.ts","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;;;;;;;;;;;;;;cAkBa,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBASN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}

package/dist/dev/ui/play-button/play-button.js

@@ -1,9 +1,7 @@
-'use client';
-
+"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { selectPlayback } from "@videojs/core/dom";
 import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";
-
 //#region src/ui/play-button/play-button.tsx
 /**
 * A button that toggles playback.
@@ -26,9 +24,10 @@ const PlayButton = createMediaButton({
 	core: PlayButtonCore,
 	stateAttrMap: PlayButtonDataAttrs,
 	selector: selectPlayback,
-	action: (core, state) => core.toggle(state)
+	action: (core, state) => core.toggle(state),
+	hotkeyAction: "togglePaused"
 });
-
 //#endregion
 export { PlayButton };
+
 //# sourceMappingURL=play-button.js.map

package/dist/dev/ui/play-button/play-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}\n\n/**\n * A button that toggles playback.\n *\n * @example\n * ```tsx\n * <PlayButton />\n *\n * <PlayButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.paused ? <PlayIcon /> : <PauseIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlayButton = createMediaButton<PlayButtonCore, PlayButtonProps>({\n  displayName: 'PlayButton',\n  core: PlayButtonCore,\n  stateAttrMap: PlayButtonDataAttrs,\n  selector: selectPlayback,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace PlayButton {\n  export type Props = PlayButtonProps;\n  export type State = PlayButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}
+{"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}\n\n/**\n * A button that toggles playback.\n *\n * @example\n * ```tsx\n * <PlayButton />\n *\n * <PlayButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.paused ? <PlayIcon /> : <PauseIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlayButton = createMediaButton<PlayButtonCore, PlayButtonProps>({\n  displayName: 'PlayButton',\n  core: PlayButtonCore,\n  stateAttrMap: PlayButtonDataAttrs,\n  selector: selectPlayback,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'togglePaused',\n});\n\nexport namespace PlayButton {\n  export type Props = PlayButtonProps;\n  export type State = PlayButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC3C,cAAc;CACf,CAAC"}

package/dist/dev/ui/playback-rate-button/index.js

@@ -1,3 +1,2 @@
 import { PlaybackRateButton } from "./playback-rate-button.js";
-
-export { PlaybackRateButton };
+export { PlaybackRateButton };

package/dist/dev/ui/playback-rate-button/playback-rate-button.js

@@ -1,9 +1,7 @@
-'use client';
-
+"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { selectPlaybackRate } from "@videojs/core/dom";
 import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from "@videojs/core";
-
 //#region src/ui/playback-rate-button/playback-rate-button.tsx
 /**
 * A button that cycles through playback rates.
@@ -28,7 +26,7 @@ const PlaybackRateButton = createMediaButton({
 	selector: selectPlaybackRate,
 	action: (core, state) => core.cycle(state)
 });
-
 //#endregion
 export { PlaybackRateButton };
+
 //# sourceMappingURL=playback-rate-button.js.map

package/dist/dev/ui/playback-rate-button/playback-rate-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"playback-rate-button.js","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlaybackRateButtonProps\n  extends UIComponentProps<'button', PlaybackRateButtonCore.State>,\n    PlaybackRateButtonCore.Props {}\n\n/**\n * A button that cycles through playback rates.\n *\n * @example\n * ```tsx\n * <PlaybackRateButton />\n *\n * <PlaybackRateButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.rate}&times;\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlaybackRateButton = createMediaButton<PlaybackRateButtonCore, PlaybackRateButtonProps>({\n  displayName: 'PlaybackRateButton',\n  core: PlaybackRateButtonCore,\n  stateAttrMap: PlaybackRateButtonDataAttrs,\n  selector: selectPlaybackRate,\n  action: (core, state) => core.cycle(state),\n});\n\nexport namespace PlaybackRateButton {\n  export type Props = PlaybackRateButtonProps;\n  export type State = PlaybackRateButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,qBAAqB,kBAAmE;CACnG,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,MAAM,MAAM;CAC3C,CAAC"}
+{"version":3,"file":"playback-rate-button.js","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlaybackRateButtonProps\n  extends UIComponentProps<'button', PlaybackRateButtonCore.State>,\n    PlaybackRateButtonCore.Props {}\n\n/**\n * A button that cycles through playback rates.\n *\n * @example\n * ```tsx\n * <PlaybackRateButton />\n *\n * <PlaybackRateButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.rate}&times;\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlaybackRateButton = createMediaButton<PlaybackRateButtonCore, PlaybackRateButtonProps>({\n  displayName: 'PlaybackRateButton',\n  core: PlaybackRateButtonCore,\n  stateAttrMap: PlaybackRateButtonDataAttrs,\n  selector: selectPlaybackRate,\n  action: (core, state) => core.cycle(state),\n});\n\nexport namespace PlaybackRateButton {\n  export type Props = PlaybackRateButtonProps;\n  export type State = PlaybackRateButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,qBAAqB,kBAAmE;CACnG,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,MAAM,MAAM;CAC3C,CAAC"}