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

package/dist/dev/ui/error-dialog/index.parts.js

@@ -1,10 +1,10 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { DialogBackdrop } from "../dialog/dialog-backdrop.js";
-import { DialogPopup } from "../dialog/dialog-popup.js";
-import { ErrorDialogClose } from "./error-dialog-close.js";
-import { ErrorDialogDescription } from "./error-dialog-description.js";
-import { ErrorDialogRoot } from "./error-dialog-root.js";
-import { ErrorDialogTitle } from "./error-dialog-title.js";
+import { DialogBackdrop } from "../dialog/backdrop.js";
+import { DialogPopup } from "../dialog/popup.js";
+import { ErrorDialogClose } from "./close.js";
+import { ErrorDialogDescription } from "./description.js";
+import { ErrorDialogRoot } from "./root.js";
+import { ErrorDialogTitle } from "./title.js";
 //#region src/ui/error-dialog/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Backdrop: () => DialogBackdrop,

package/dist/dev/ui/error-dialog/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/error-dialog/index.parts.ts"],"sourcesContent":["export { Backdrop, type BackdropProps, Popup, type PopupProps } from '../dialog/index.parts';\nexport { ErrorDialogClose as Close, type ErrorDialogCloseProps as CloseProps } from './error-dialog-close';\nexport {\n  ErrorDialogDescription as Description,\n  type ErrorDialogDescriptionProps as DescriptionProps,\n} from './error-dialog-description';\nexport { ErrorDialogRoot as Root, type ErrorDialogRootProps as RootProps } from './error-dialog-root';\nexport { ErrorDialogTitle as Title, type ErrorDialogTitleProps as TitleProps } from './error-dialog-title';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/error-dialog/index.parts.ts"],"sourcesContent":["export { Backdrop, type BackdropProps, Popup, type PopupProps } from '../dialog/index.parts';\nexport { ErrorDialogClose as Close, type ErrorDialogCloseProps as CloseProps } from './close';\nexport {\n  ErrorDialogDescription as Description,\n  type ErrorDialogDescriptionProps as DescriptionProps,\n} from './description';\nexport { ErrorDialogRoot as Root, type ErrorDialogRootProps as RootProps } from './root';\nexport { ErrorDialogTitle as Title, type ErrorDialogTitleProps as TitleProps } from './title';\n"],"mappings":""}

package/dist/dev/ui/error-dialog/root.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+//#region src/ui/error-dialog/root.d.ts
+interface ErrorDialogRootProps {
+  children?: ReactNode;
+}
+/** Opens from player error state and provides it to the shared dialog parts. */
+declare function ErrorDialogRoot({ children }: ErrorDialogRootProps): ReactNode;
+declare namespace ErrorDialogRoot {
+  type Props = ErrorDialogRootProps;
+}
+//#endregion
+export { ErrorDialogRoot, ErrorDialogRootProps };
+//# sourceMappingURL=root.d.ts.map

package/dist/dev/ui/error-dialog/root.js

@@ -0,0 +1,75 @@
+import { useContainer, usePlayer } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { DialogContextProvider } from "../dialog/context.js";
+import { useDialogRoot } from "../dialog/use-dialog-root.js";
+import { ErrorDialogContextProvider } from "./context.js";
+import { ErrorDialogCore, ErrorDialogDataAttrs } from "@videojs/core";
+import { selectError } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/error-dialog/root.tsx
+/** Opens from player error state and provides it to the shared dialog parts. */
+function ErrorDialogRoot(t0) {
+	const $ = c(12);
+	const { children } = t0;
+	const errorState = usePlayer(selectError);
+	const container = useContainer();
+	const [lastError, setLastError] = useState(errorState?.error ?? null);
+	if (errorState?.error && errorState.error !== lastError) setLastError(errorState.error);
+	const errorStateRef = useLatestRef(errorState);
+	const t1 = Boolean(errorState?.error);
+	let t2;
+	if ($[0] !== container || $[1] !== errorStateRef || $[2] !== t1) {
+		t2 = {
+			open: t1,
+			onOpenChange(nextOpen) {
+				if (!nextOpen) errorStateRef.current?.dismissError();
+			},
+			coreFactory: createErrorDialogCore,
+			stateAttrMap: ErrorDialogDataAttrs,
+			idPrefix: "error-dialog",
+			interactionRoot: container
+		};
+		$[0] = container;
+		$[1] = errorStateRef;
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	const dialogContext = useDialogRoot(t2);
+	if (!errorState) return null;
+	let t3;
+	if ($[4] !== lastError) {
+		t3 = { lastError };
+		$[4] = lastError;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== children || $[7] !== dialogContext) {
+		t4 = /* @__PURE__ */ jsx(DialogContextProvider, {
+			value: dialogContext,
+			children
+		});
+		$[6] = children;
+		$[7] = dialogContext;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t3 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ErrorDialogContextProvider, {
+			value: t3,
+			children: t4
+		});
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+function createErrorDialogCore() {
+	return new ErrorDialogCore();
+}
+//#endregion
+export { ErrorDialogRoot };
+
+//# sourceMappingURL=root.js.map

package/dist/dev/ui/error-dialog/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":["{ children }: ErrorDialogRootProps","{\n    open: Boolean(errorState?.error),\n    onOpenChange(nextOpen) {\n      if (!nextOpen) errorStateRef.current?.dismissError();\n    },\n    coreFactory: createErrorDialogCore,\n    stateAttrMap: ErrorDialogDataAttrs,\n    idPrefix: 'error-dialog',\n    interactionRoot: container,\n  }","errorStateRef.current?.dismissError","Boolean(errorState?.error)","{ lastError }","<DialogContextProvider value={dialogContext}>{children}</DialogContextProvider>","<ErrorDialogContextProvider value={{ lastError }}>\n      <DialogContextProvider value={dialogContext}>{children}</DialogContextProvider>\n    </ErrorDialogContextProvider>"],"sources":["../../../../src/ui/error-dialog/root.tsx"],"sourcesContent":["import { ErrorDialogCore, ErrorDialogDataAttrs } from '@videojs/core';\nimport { selectError } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { DialogContextProvider } from '../dialog/context';\nimport { useDialogRoot } from '../dialog/use-dialog-root';\nimport { ErrorDialogContextProvider } from './context';\n\nexport interface ErrorDialogRootProps {\n  children?: ReactNode;\n}\n\n/** Opens from player error state and provides it to the shared dialog parts. */\nexport function ErrorDialogRoot({ children }: ErrorDialogRootProps): ReactNode {\n  const errorState = usePlayer(selectError);\n  const container = useContainer();\n  // Keep the last error so the dialog can finish its close transition with content after the error clears. Adjusting\n  // state during render is the sanctioned way to derive it from props; writing a ref here would be invisible to React.\n  const [lastError, setLastError] = useState(errorState?.error ?? null);\n\n  if (errorState?.error && errorState.error !== lastError) setLastError(errorState.error);\n\n  const errorStateRef = useLatestRef(errorState);\n  const dialogContext = useDialogRoot({\n    open: Boolean(errorState?.error),\n    onOpenChange(nextOpen) {\n      if (!nextOpen) errorStateRef.current?.dismissError();\n    },\n    coreFactory: createErrorDialogCore,\n    stateAttrMap: ErrorDialogDataAttrs,\n    idPrefix: 'error-dialog',\n    interactionRoot: container,\n  });\n\n  if (!errorState) return null;\n\n  return (\n    <ErrorDialogContextProvider value={{ lastError }}>\n      <DialogContextProvider value={dialogContext}>{children}</DialogContextProvider>\n    </ErrorDialogContextProvider>\n  );\n}\n\nfunction createErrorDialogCore(): ErrorDialogCore {\n  return new ErrorDialogCore();\n}\n\nexport namespace ErrorDialogRoot {\n  export type Props = ErrorDialogRootProps;\n}\n"],"mappings":";;;;;;;;;;;;AAgBA,SAAgB,gBAAA,IAA+D;;CAA/C,MAAA,EAAE,aAAFA;CAC9B,MAAM,aAAa,UAAU,WAAW;CACxC,MAAM,YAAY,aAAa;CAG/B,MAAM,CAAC,WAAW,gBAAgB,SAAS,YAAY,SAAS,IAAI;CAEpE,IAAI,YAAY,SAAS,WAAW,UAAU,WAAW,aAAa,WAAW,KAAK;CAEtF,MAAM,gBAAgB,aAAa,UAAU;CAErC,MAAA,KAAA,QAAQ,YAAY,KAAK;CADGC,IAAAA;CAQjB,IAAA,EAAA,OAAA,aAAA,EAAA,OALAC,iBAAAA,EAAAA,OAFXC,IAAAA;EAD4B,KAAA;GAClC,MAAMA;GACN,aAAa,UAAU;IACrB,IAAI,CAAC,UAAU,cAAc,SAAS,aAAa;GACrD;GACA,aAAa;GACb,cAAc;GACd,UAAU;GACV,iBAAiB;EACnB;EADmB,EAAA,KAAA;EALAD,EAAAA,KAAAA;EAFXC,EAAAA,KAAAA;;;CADR,MAAM,gBAAgB,cAAcF,EASnC;CAED,IAAI,CAAC,YAAY,OAAO;CAGaG,IAAAA;CAAE,IAAA,EAAA,OAAA,WAAA;EAAF,KAAA,EAAE,UAAU;EAAV,EAAA,KAAA;;;CACnCC,IAAAA;CAA8C,IAAA,EAAA,OAAA,YAAA,EAAA,OAAhB,eAAA;EAA9B,KAAA,oBAAC,uBAAD;GAAuB,OAAO;GAAgB;EAAgC,CAAA;EAAhC,EAAA,KAAA;EAAhB,EAAA,KAAA;;;CADhCC,IAAAA;CAAmCF,IAAAA,EAAAA,OAAAA,MAAAA,EAAAA,QACjCC,IAAAA;EADF,KAAA,oBAAC,4BAAD;GAA4B,OAAOD;GACjCC,UAAAA;EAC0B,CAAA;EAFOD,EAAAA,KAAAA;EACjCC,EAAAA,MAAAA;;;CAFJ,OACEC;AAIJ;AAEA,SAAS,wBAAyC;CAChD,OAAO,IAAI,gBAAgB;AAC7B"}

package/dist/dev/ui/error-dialog/title.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { DialogCore } from "@videojs/core";
+//#region src/ui/error-dialog/title.d.ts
+interface ErrorDialogTitleProps extends UIComponentProps<'h2', DialogCore.State> {}
+/** Renders the localized error dialog heading, or authored children when provided. */
+declare const ErrorDialogTitle: import("react").ForwardRefExoticComponent<Omit<ErrorDialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+declare namespace ErrorDialogTitle {
+  type Props = ErrorDialogTitleProps;
+  type State = DialogCore.State;
+}
+//#endregion
+export { ErrorDialogTitle, ErrorDialogTitleProps };
+//# sourceMappingURL=title.d.ts.map

package/dist/dev/ui/error-dialog/title.js

@@ -0,0 +1,30 @@
+import { useTranslator } from "../../i18n/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useDialogContext } from "../dialog/context.js";
+import { getErrorDialogTitleText } from "@videojs/core";
+import { translateText } from "@videojs/core/i18n";
+import { forwardRef } from "react";
+//#region src/ui/error-dialog/title.tsx
+/** Renders the localized error dialog heading, or authored children when provided. */
+const ErrorDialogTitle = forwardRef(function ErrorDialogTitle({ render, className, style, children, ...elementProps }, forwardedRef) {
+	const t = useTranslator();
+	const { state, stateAttrMap } = useDialogContext();
+	const content = children ?? translateText(getErrorDialogTitleText(), t);
+	return renderElement("h2", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: forwardedRef,
+		props: [{
+			id: state.titleId,
+			children: content
+		}, elementProps]
+	});
+});
+//#endregion
+export { ErrorDialogTitle };
+
+//# sourceMappingURL=title.js.map

package/dist/dev/ui/error-dialog/title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.js","names":[],"sources":["../../../../src/ui/error-dialog/title.tsx"],"sourcesContent":["import { type DialogCore, getErrorDialogTitleText } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from '../dialog/context';\n\nexport interface ErrorDialogTitleProps extends UIComponentProps<'h2', DialogCore.State> {}\n\n/** Renders the localized error dialog heading, or authored children when provided. */\nexport const ErrorDialogTitle = forwardRef<HTMLHeadingElement, ErrorDialogTitleProps>(function ErrorDialogTitle(\n  { render, className, style, children, ...elementProps },\n  forwardedRef\n) {\n  const t = useTranslator();\n  const { state, stateAttrMap } = useDialogContext();\n  const content: ReactNode = children ?? translateText(getErrorDialogTitleText(), t);\n\n  return renderElement(\n    'h2',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [{ id: state.titleId, children: content }, elementProps],\n    }\n  );\n});\n\nexport namespace ErrorDialogTitle {\n  export type Props = ErrorDialogTitleProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,mBAAmB,WAAsD,SAAS,iBAC7F,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,OAAO,iBAAiB,iBAAiB;CACjD,MAAM,UAAqB,YAAY,cAAc,wBAAwB,GAAG,CAAC;CAEjF,OAAO,cACL,MACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,IAAI,MAAM;GAAS,UAAU;EAAQ,GAAG,YAAY;CAChE,CACF;AACF,CAAC"}

package/dist/dev/ui/fullscreen-button/component.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { FullscreenButtonCore } from "@videojs/core";
+//#region src/ui/fullscreen-button/component.d.ts
+interface FullscreenButtonProps extends UIComponentProps<'button', FullscreenButtonCore.State>, FullscreenButtonCore.Props {}
+/** A button that toggles fullscreen. */
+declare const FullscreenButton: import("react").ForwardRefExoticComponent<FullscreenButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace FullscreenButton {
+  type Props = FullscreenButtonProps;
+  type State = FullscreenButtonCore.State;
+}
+//#endregion
+export { FullscreenButton, FullscreenButtonProps };
+//# sourceMappingURL=component.d.ts.map

package/dist/dev/ui/fullscreen-button/component.js

@@ -0,0 +1,19 @@
+import { createMediaButton } from "../create-media-button.js";
+import { FullscreenButtonCore, FullscreenButtonDataAttrs } from "@videojs/core";
+import { selectFullscreen } from "@videojs/core/dom";
+//#region src/ui/fullscreen-button/component.tsx
+/** A button that toggles fullscreen. */
+const FullscreenButton = createMediaButton({
+	displayName: "FullscreenButton",
+	core: FullscreenButtonCore,
+	stateAttrMap: FullscreenButtonDataAttrs,
+	selector: selectFullscreen,
+	action: (core, state) => core.toggle(state),
+	hotkeyAction: "toggleFullscreen",
+	isSupported: (state) => !state.hidden,
+	focusContainerOnPointerActivation: true
+});
+//#endregion
+export { FullscreenButton };
+
+//# sourceMappingURL=component.js.map

package/dist/dev/ui/fullscreen-button/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/fullscreen-button/component.tsx"],"sourcesContent":["import { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport { selectFullscreen } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface FullscreenButtonProps\n  extends UIComponentProps<'button', FullscreenButtonCore.State>, FullscreenButtonCore.Props {}\n\n/** A button that toggles fullscreen. */\nexport const FullscreenButton = createMediaButton<FullscreenButtonCore, FullscreenButtonProps>({\n  displayName: 'FullscreenButton',\n  core: FullscreenButtonCore,\n  stateAttrMap: FullscreenButtonDataAttrs,\n  selector: selectFullscreen,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'toggleFullscreen',\n  isSupported: (state) => !state.hidden,\n  focusContainerOnPointerActivation: true,\n});\n\nexport namespace FullscreenButton {\n  export type Props = FullscreenButtonProps;\n  export type State = FullscreenButtonCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,mBAAmB,kBAA+D;CAC7F,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;CAC/B,mCAAmC;AACrC,CAAC"}

package/dist/dev/ui/fullscreen-button/index.d.ts

@@ -1,2 +1,2 @@
-import { FullscreenButton, FullscreenButtonProps } from "./fullscreen-button.js";
+import { FullscreenButton, FullscreenButtonProps } from "./component.js";
 export { FullscreenButton, type FullscreenButtonProps };

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

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

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

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

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

@@ -0,0 +1,67 @@
+import { useContainer, usePlayer } from "../../player/context.js";
+import { createDoubleTapGesture, createTapGesture, getGestureActionValue, resolveGestureAction } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
+import { useEffect } from "react";
+//#region src/ui/gesture/component.tsx
+function Gesture(t0) {
+	const $ = c(10);
+	const { type, action, value, pointer, region, disabled } = t0;
+	const store = usePlayer();
+	const container = useContainer();
+	let t1;
+	let t2;
+	if ($[0] !== action || $[1] !== container || $[2] !== disabled || $[3] !== pointer || $[4] !== region || $[5] !== store || $[6] !== type || $[7] !== value) {
+		t1 = () => {
+			if (!container || !type || !action || disabled) return;
+			const resolver = resolveGestureAction(action);
+			if (!resolver) return;
+			const actionValue = getGestureActionValue(action, region, value);
+			const onActivate = (event) => {
+				resolver({
+					store,
+					value: actionValue,
+					event
+				});
+			};
+			const options = {
+				pointer,
+				region,
+				action,
+				value: actionValue
+			};
+			if (type === "doubletap") return createDoubleTapGesture(container, onActivate, options);
+			if (type === "tap") return createTapGesture(container, onActivate, options);
+		};
+		t2 = [
+			container,
+			store,
+			type,
+			action,
+			value,
+			pointer,
+			region,
+			disabled
+		];
+		$[0] = action;
+		$[1] = container;
+		$[2] = disabled;
+		$[3] = pointer;
+		$[4] = region;
+		$[5] = store;
+		$[6] = type;
+		$[7] = value;
+		$[8] = t1;
+		$[9] = t2;
+	} else {
+		t1 = $[8];
+		t2 = $[9];
+	}
+	useEffect(t1, t2);
+	return null;
+}
+/** @deprecated Use `Gesture` instead. */
+const MediaGesture = Gesture;
+//#endregion
+export { Gesture, MediaGesture };
+
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":["{ type, action, value, pointer, region, disabled }: GestureProps","() => {\n    if (!container || !type || !action || disabled) return;\n\n    const resolver = resolveGestureAction(action);\n    if (!resolver) return;\n\n    const actionValue = getGestureActionValue(action, region, value);\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value: actionValue, event });\n    };\n\n    const options = { pointer, region, action, value: actionValue };\n\n    if (type === 'doubletap') {\n      return createDoubleTapGesture(container, onActivate, options);\n    }\n\n    if (type === 'tap') return createTapGesture(container, onActivate, options);\n\n    return;\n  }","[container, store, type, action, value, pointer, region, disabled]"],"sources":["../../../../src/ui/gesture/component.tsx"],"sourcesContent":["import type { GestureProps as CoreGestureProps } from '@videojs/core';\nimport type { AnyPlayerStore } from '@videojs/core/dom';\nimport {\n  createDoubleTapGesture,\n  createTapGesture,\n  getGestureActionValue,\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 GestureProps extends CoreGestureProps {}\n\nexport function Gesture({ type, action, value, pointer, region, disabled }: GestureProps): 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 actionValue = getGestureActionValue(action, region, value);\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value: actionValue, event });\n    };\n\n    const options = { pointer, region, action, value: actionValue };\n\n    if (type === 'doubletap') {\n      return createDoubleTapGesture(container, onActivate, options);\n    }\n\n    if (type === 'tap') return createTapGesture(container, onActivate, options);\n\n    return;\n  }, [container, store, type, action, value, pointer, region, disabled]);\n\n  return null;\n}\n\nexport namespace Gesture {\n  export type Props = GestureProps;\n}\n\n/** @deprecated Use `GestureProps` instead. */\nexport type MediaGestureProps = GestureProps;\n\n/** @deprecated Use `Gesture` instead. */\nexport const MediaGesture = Gesture;\n"],"mappings":";;;;;AAeA,SAAgB,QAAA,IAAqF;;CAA7E,MAAA,EAAE,MAAM,QAAQ,OAAO,SAAS,QAAQ,aAAxCA;CACtB,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAErBC,IAAAA;CAqBPC,IAAAA;CApB2B,IAAA,EAAA,OAAA,UAAA,EAAA,OAAvB,aAAA,EAAA,OAAiC,YAAA,EAAA,OAWpB,WAAA,EAAA,OANgC,UAAA,EAAA,OAGrC,SAAA,EAAA,OARM,QAAA,EAAA,OAKuC,OAAA;EANlD,WAAM;GACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,UAAU;GAEhD,MAAM,WAAW,qBAAqB,MAAM;GAC5C,IAAI,CAAC,UAAU;GAEf,MAAM,cAAc,sBAAsB,QAAQ,QAAQ,KAAK;GAE/D,MAAM,cAAc,UAAwB;IAC1C,SAAS;KAAE;KAAO,OAAO;KAAa;IAAM,CAAC;GAC/C;GAEA,MAAM,UAAU;IAAE;IAAS;IAAQ;IAAQ,OAAO;GAAY;GAE9D,IAAI,SAAS,aACX,OAAO,uBAAuB,WAAW,YAAY,OAAO;GAG9D,IAAI,SAAS,OAAO,OAAO,iBAAiB,WAAW,YAAY,OAAO;EAG5E;EAAG,KAAA;GAAC;GAAW;GAAO;GAAM;GAAQ;GAAO;GAAS;GAAQ;EAAQ;EApBtC,EAAA,KAAA;EAAvB,EAAA,KAAA;EAAiC,EAAA,KAAA;EAWpB,EAAA,KAAA;EANgC,EAAA,KAAA;EAGrC,EAAA,KAAA;EARM,EAAA,KAAA;EAKuC,EAAA,KAAA;;;;;;;CAN5D,UAAUD,IAqBPC,EAAkE;CAErE,OAAO;AACT;;AAUA,MAAa,eAAe"}

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

@@ -1,2 +1,2 @@
-import { Gesture, GestureProps, MediaGesture, MediaGestureProps } from "./gesture.js";
+import { Gesture, GestureProps, MediaGesture, MediaGestureProps } from "./component.js";
 export { Gesture, GestureProps, MediaGesture, MediaGestureProps };

package/dist/dev/ui/gesture/index.js

@@ -1,2 +1,2 @@
-import { Gesture, MediaGesture } from "./gesture.js";
+import { Gesture, MediaGesture } from "./component.js";
 export { Gesture, MediaGesture };

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

@@ -1,6 +1,7 @@
 import { useContainer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createDoubleTapGesture } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { useEffect } from "react";
 //#region src/ui/gesture/use-doubletap-gesture.ts
 /**
@@ -10,22 +11,49 @@ import { useEffect } from "react";
 * @param options - Gesture matching, target, and disabled options.
 */
 function useDoubleTapGesture(onActivate, options) {
-	const { pointer, region, disabled = false, target } = options ?? {};
+	const $ = c(13);
+	let t0;
+	if ($[0] !== options) {
+		t0 = options ?? {};
+		$[0] = options;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { pointer, region, disabled: t1, target } = t0;
+	const disabled = t1 === void 0 ? false : t1;
 	const contextContainer = useContainer();
 	const container = target?.current ?? contextContainer;
 	const onActivateRef = useLatestRef(onActivate);
-	useEffect(() => {
-		if (!container || disabled) return;
-		return createDoubleTapGesture(container, (event) => onActivateRef.current(event), {
+	let t2;
+	if ($[2] !== container || $[3] !== disabled || $[4] !== onActivateRef || $[5] !== pointer || $[6] !== region) {
+		t2 = () => {
+			if (!container || disabled) return;
+			return createDoubleTapGesture(container, (event) => onActivateRef.current(event), {
+				pointer,
+				region
+			});
+		};
+		$[2] = container;
+		$[3] = disabled;
+		$[4] = onActivateRef;
+		$[5] = pointer;
+		$[6] = region;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== container || $[9] !== disabled || $[10] !== pointer || $[11] !== region) {
+		t3 = [
+			container,
+			disabled,
 			pointer,
 			region
-		});
-	}, [
-		container,
-		disabled,
-		pointer,
-		region
-	]);
+		];
+		$[8] = container;
+		$[9] = disabled;
+		$[10] = pointer;
+		$[11] = region;
+		$[12] = t3;
+	} else t3 = $[12];
+	useEffect(t2, t3);
 }
 //#endregion
 export { useDoubleTapGesture };

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

@@ -1 +1 @@
-{"version":3,"file":"use-doubletap-gesture.js","names":[],"sources":["../../../../src/ui/gesture/use-doubletap-gesture.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport { createDoubleTapGesture } 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 extends Pick<GestureProps, 'pointer' | 'region' | 'disabled'> {\n  target?: RefObject<HTMLElement | null>;\n}\n\n/**\n * Registers a double-tap gesture on the current player container or an explicit target.\n *\n * @param onActivate - Callback invoked when a matching double tap is recognized.\n * @param options - Gesture matching, target, and disabled options.\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]);\n}\n"],"mappings":";;;;;;;;;;;AAkBA,SAAgB,oBACd,YACA,SACM;CACN,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,uBAAuB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;GAAE;GAAS;EAAO,CAAC;CACvG,GAAG;EAAC;EAAW;EAAU;EAAS;CAAM,CAAC;AAC3C"}
+{"version":3,"file":"use-doubletap-gesture.js","names":["options ?? {}","disabled = false","() => {\n    if (!container || disabled) return;\n\n    return createDoubleTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n  }","[container, disabled, pointer, region]"],"sources":["../../../../src/ui/gesture/use-doubletap-gesture.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport { createDoubleTapGesture } 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 extends Pick<GestureProps, 'pointer' | 'region' | 'disabled'> {\n  target?: RefObject<HTMLElement | null>;\n}\n\n/**\n * Registers a double-tap gesture on the current player container or an explicit target.\n *\n * @param onActivate - Callback invoked when a matching double tap is recognized.\n * @param options - Gesture matching, target, and disabled options.\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]);\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,SAAgB,oBACd,YACA,SACM;;CACgDA,IAAAA;;EAAW,KAAA,WAAA,CAAC;EAAZ,EAAA,KAAA;;;CAAtD,MAAM,EAAE,SAAS,QAAQ,UAAA,IAAkB,WAAWA;CAA7B,MAAA,WAAA,OAAA,KAAA,IAAW,QAAXC;CACzB,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAEnCC,IAAAA;CACH,IAAA,EAAA,OAAA,aAAA,EAAA,OAAa,YAAA,EAAA,OAEkC,iBAAA,EAAA,OAAgC,WAAA,EAAA,OAAS,QAAA;EAHrF,WAAM;GACd,IAAI,CAAC,aAAa,UAAU;GAE5B,OAAO,uBAAuB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;IAAE;IAAS;GAAO,CAAC;EACvG;EAHO,EAAA,KAAA;EAAa,EAAA,KAAA;EAEkC,EAAA,KAAA;EAAgC,EAAA,KAAA;EAAS,EAAA,KAAA;;;CAC5FC,IAAAA;CAAC,IAAA,EAAA,OAAA,aAAA,EAAA,OAAW,YAAA,EAAA,QAAU,WAAA,EAAA,QAAS,QAAA;EAA/B,KAAA;GAAC;GAAW;GAAU;GAAS;EAAM;EAApC,EAAA,KAAA;EAAW,EAAA,KAAA;EAAU,EAAA,MAAA;EAAS,EAAA,MAAA;;;CAJlC,UAAUD,IAIPC,EAAsC;AAC3C"}

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

@@ -1,6 +1,7 @@
 import { useContainer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createTapGesture } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { useEffect } from "react";
 //#region src/ui/gesture/use-tap-gesture.ts
 /**
@@ -10,22 +11,49 @@ import { useEffect } from "react";
 * @param options - Gesture matching, target, and disabled options.
 */
 function useTapGesture(onActivate, options) {
-	const { pointer, region, disabled = false, target } = options ?? {};
+	const $ = c(13);
+	let t0;
+	if ($[0] !== options) {
+		t0 = options ?? {};
+		$[0] = options;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { pointer, region, disabled: t1, target } = t0;
+	const disabled = t1 === void 0 ? false : t1;
 	const contextContainer = useContainer();
 	const container = target?.current ?? contextContainer;
 	const onActivateRef = useLatestRef(onActivate);
-	useEffect(() => {
-		if (!container || disabled) return;
-		return createTapGesture(container, (event) => onActivateRef.current(event), {
+	let t2;
+	if ($[2] !== container || $[3] !== disabled || $[4] !== onActivateRef || $[5] !== pointer || $[6] !== region) {
+		t2 = () => {
+			if (!container || disabled) return;
+			return createTapGesture(container, (event) => onActivateRef.current(event), {
+				pointer,
+				region
+			});
+		};
+		$[2] = container;
+		$[3] = disabled;
+		$[4] = onActivateRef;
+		$[5] = pointer;
+		$[6] = region;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== container || $[9] !== disabled || $[10] !== pointer || $[11] !== region) {
+		t3 = [
+			container,
+			disabled,
 			pointer,
 			region
-		});
-	}, [
-		container,
-		disabled,
-		pointer,
-		region
-	]);
+		];
+		$[8] = container;
+		$[9] = disabled;
+		$[10] = pointer;
+		$[11] = region;
+		$[12] = t3;
+	} else t3 = $[12];
+	useEffect(t2, t3);
 }
 //#endregion
 export { useTapGesture };

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

@@ -1 +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\n/**\n * Registers a tap gesture on the current player container or an explicit target.\n *\n * @param onActivate - Callback invoked when a matching tap is recognized.\n * @param options - Gesture matching, target, and disabled options.\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":";;;;;;;;;;;AAkBA,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"}
+{"version":3,"file":"use-tap-gesture.js","names":["options ?? {}","disabled = false","() => {\n    if (!container || disabled) return;\n\n    return createTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n  }","[container, disabled, pointer, region]"],"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\n/**\n * Registers a tap gesture on the current player container or an explicit target.\n *\n * @param onActivate - Callback invoked when a matching tap is recognized.\n * @param options - Gesture matching, target, and disabled options.\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":";;;;;;;;;;;;AAkBA,SAAgB,cAAc,YAA2C,SAAsC;;CACvDA,IAAAA;;EAAW,KAAA,WAAA,CAAC;EAAZ,EAAA,KAAA;;;CAAtD,MAAM,EAAE,SAAS,QAAQ,UAAA,IAAkB,WAAWA;CAA7B,MAAA,WAAA,OAAA,KAAA,IAAW,QAAXC;CACzB,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAEnCC,IAAAA;CACH,IAAA,EAAA,OAAA,aAAA,EAAA,OAAa,YAAA,EAAA,OAE4B,iBAAA,EAAA,OAAgC,WAAA,EAAA,OAAS,QAAA;EAH/E,WAAM;GACd,IAAI,CAAC,aAAa,UAAU;GAE5B,OAAO,iBAAiB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;IAAE;IAAS;GAAO,CAAC;EACjG;EAHO,EAAA,KAAA;EAAa,EAAA,KAAA;EAE4B,EAAA,KAAA;EAAgC,EAAA,KAAA;EAAS,EAAA,KAAA;;;CACtFC,IAAAA;CAAC,IAAA,EAAA,OAAA,aAAA,EAAA,OAAW,YAAA,EAAA,QAAU,WAAA,EAAA,QAAS,QAAA;EAA/B,KAAA;GAAC;GAAW;GAAU;GAAS;EAAM;EAApC,EAAA,KAAA;EAAW,EAAA,KAAA;EAAU,EAAA,MAAA;EAAS,EAAA,MAAA;;;CAJlC,UAAUD,IAIPC,EAAsC;AAC3C"}

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

@@ -1,6 +1,6 @@
 import { mergeProps } from "../../utils/merge-props.js";
 import { createButton } from "@videojs/core/dom";
-import { useCallback } from "react";
+import { c } from "react-compiler-runtime";
 //#region src/ui/hooks/use-button.ts
 /**
 * Hook for button behavior with keyboard and pointer interaction.
@@ -23,20 +23,42 @@ import { useCallback } from "react";
 * @param params - Button configuration with activation handler and disabled check.
 */
 function useButton(params) {
+	const $ = c(8);
 	const { displayName, onActivate, isDisabled } = params;
-	const buttonRef = useCallback((element) => {
-		if (element && element.tagName !== "BUTTON") console.warn(`${displayName} should render a <button> element for accessibility`);
-	}, [displayName]);
-	return {
-		getButtonProps: useCallback((externalProps) => {
+	let t0;
+	if ($[0] !== displayName) {
+		t0 = (element) => {
+			if (element && element.tagName !== "BUTTON") console.warn(`${displayName} should render a <button> element for accessibility`);
+		};
+		$[0] = displayName;
+		$[1] = t0;
+	} else t0 = $[1];
+	const buttonRef = t0;
+	let t1;
+	if ($[2] !== isDisabled || $[3] !== onActivate) {
+		t1 = (externalProps) => {
 			const buttonProps = createButton({
 				onActivate,
 				isDisabled
 			});
 			return mergeProps(buttonProps, externalProps);
-		}, [onActivate, isDisabled]),
-		buttonRef
-	};
+		};
+		$[2] = isDisabled;
+		$[3] = onActivate;
+		$[4] = t1;
+	} else t1 = $[4];
+	const getButtonProps = t1;
+	let t2;
+	if ($[5] !== buttonRef || $[6] !== getButtonProps) {
+		t2 = {
+			getButtonProps,
+			buttonRef
+		};
+		$[5] = buttonRef;
+		$[6] = getButtonProps;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 }
 //#endregion
 export { useButton };

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":["import { type ButtonActivationSource, createButton, type UIEvent } from '@videojs/core/dom';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useCallback } from 'react';\n\nimport { mergeProps } from '../../utils/merge-props';\n\nexport interface UseButtonParameters {\n  displayName: string;\n  onActivate: (event: UIEvent, source: ButtonActivationSource) => 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\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":";;;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAgB,UAAU,QAAmD;CAC3E,MAAM,EAAE,aAAa,YAAY,eAAe;CAEhD,MAAM,YAAY,aACf,YAAgC;EAC/B,IAAe,WAAW,QAAQ,YAAY,UAC5C,QAAQ,KAAK,GAAG,YAAY,oDAAoD;CAEpF,GACA,CAAC,WAAW,CACd;CAWA,OAAO;EAAE,gBATc,aACpB,kBAAqF;GACpF,MAAM,cAAc,aAAa;IAAE;IAAY;GAAW,CAAC;GAE3D,OAAO,WAAW,aAAa,aAAa;EAC9C,GACA,CAAC,YAAY,UAAU,CAGH;EAAG;CAAU;AACrC"}
+{"version":3,"file":"use-button.js","names":["(element: HTMLElement | null) => {\n      if (__DEV__ && element && element.tagName !== 'BUTTON') {\n        console.warn(`${displayName} should render a <button> element for accessibility`);\n      }\n    }","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  )","(externalProps?: ComponentPropsWithRef<'button'>): ComponentPropsWithRef<'button'> => {\n      const buttonProps = createButton({ onActivate, isDisabled });\n\n      return mergeProps(buttonProps, externalProps);\n    }","useCallback(\n    (externalProps?: ComponentPropsWithRef<'button'>): ComponentPropsWithRef<'button'> => {\n      const buttonProps = createButton({ onActivate, isDisabled });\n\n      return mergeProps(buttonProps, externalProps);\n    },\n    [onActivate, isDisabled]\n  )","{ getButtonProps, buttonRef }"],"sources":["../../../../src/ui/hooks/use-button.ts"],"sourcesContent":["import { type ButtonActivationSource, createButton, type UIEvent } from '@videojs/core/dom';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useCallback } from 'react';\n\nimport { mergeProps } from '../../utils/merge-props';\n\nexport interface UseButtonParameters {\n  displayName: string;\n  onActivate: (event: UIEvent, source: ButtonActivationSource) => 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\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":";;;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAgB,UAAU,QAAmD;;CAC3E,MAAM,EAAE,aAAa,YAAY,eAAe;CAG9CA,IAAAA;CAEoB,IAAA,EAAA,OAAA,aAAA;EAFpB,MAAC,YAAgC;GAC/B,IAAe,WAAW,QAAQ,YAAY,UAC5C,QAAQ,KAAK,GAAG,YAAY,oDAAoD;EAEpF;EAFoB,EAAA,KAAA;;;CAHtB,MAAM,YAAYC;CAUhBC,IAAAA;CACiD,IAAA,EAAA,OAAA,cAAA,EAAA,OAAZ,YAAA;EADrC,MAAC,kBAAqF;GACpF,MAAM,cAAc,aAAa;IAAE;IAAY;GAAW,CAAC;GAE3D,OAAO,WAAW,aAAa,aAAa;EAC9C;EAHiD,EAAA,KAAA;EAAZ,EAAA,KAAA;;;CAFvC,MAAM,iBAAiBC;CAShBC,IAAAA;CAAkB,IAAA,EAAA,OAAA,aAAA,EAAA,OAAhB,gBAAA;EAAF,KAAA;GAAE;GAAgB;EAAU;EAAV,EAAA,KAAA;EAAhB,EAAA,KAAA;;;CAAT,OAAOA;AACT"}