@videojs/react 10.0.0-beta.9 → 10.0.0-rc.1

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

@@ -0,0 +1,64 @@
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { DialogCore, DialogDataAttrs } from "@videojs/core";
+import { createDialog, createTransition } from "@videojs/core/dom";
+import { useSnapshot } from "@videojs/store/react";
+import { useEffect, useLayoutEffect, useState } from "react";
+//#region src/ui/dialog/use-dialog-root.ts
+function useDialogRoot({ open: controlledOpen, defaultOpen = DialogCore.defaultProps.defaultOpen, closeOnEscape = DialogCore.defaultProps.closeOnEscape, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, coreFactory = createDialogCore, stateAttrMap = DialogDataAttrs, idPrefix = "dialog", interactionRoot }) {
+	const [core] = useState(coreFactory);
+	core.setProps({
+		open: controlledOpen,
+		defaultOpen,
+		closeOnEscape
+	});
+	const isControlled = controlledOpen !== void 0;
+	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
+	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
+	const closeOnEscapeRef = useLatestRef(closeOnEscape);
+	const [dialog] = useState(() => {
+		const instance = createDialog({
+			transition: createTransition(),
+			onOpenChange: (nextOpen) => onOpenChangeRef.current?.(nextOpen),
+			onOpenChangeComplete: (nextOpen) => onOpenChangeCompleteRef.current?.(nextOpen),
+			closeOnEscape: () => closeOnEscapeRef.current
+		});
+		if (!isControlled && defaultOpen) instance.open();
+		return instance;
+	});
+	const popupId = useSafeId(`${idPrefix}-popup`);
+	const titleId = useSafeId(`${idPrefix}-title`);
+	const descriptionId = useSafeId(`${idPrefix}-desc`);
+	core.setTitleId(titleId);
+	core.setDescriptionId(descriptionId);
+	useEffect(() => {
+		if (controlledOpen === void 0) return;
+		const { active: inputOpen } = dialog.input.current;
+		if (controlledOpen === inputOpen) return;
+		if (controlledOpen) dialog.open();
+		else dialog.close();
+	}, [controlledOpen, dialog]);
+	useLayoutEffect(() => {
+		dialog.setInteractionRoot(interactionRoot ?? null);
+	}, [dialog, interactionRoot]);
+	useDestroy(dialog);
+	const input = useSnapshot(dialog.input);
+	const modality = useSnapshot(dialog.modality);
+	core.setInput(input);
+	core.setDocumentModal(modality.documentModal);
+	return {
+		core,
+		dialog,
+		state: core.getState(),
+		stateAttrMap,
+		popupId
+	};
+}
+function createDialogCore() {
+	return new DialogCore();
+}
+//#endregion
+export { useDialogRoot };
+
+//# sourceMappingURL=use-dialog-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-dialog-root.js","names":[],"sources":["../../../../src/ui/dialog/use-dialog-root.ts"],"sourcesContent":["import { DialogCore, DialogDataAttrs, type DialogProps, type DialogState, type StateAttrMap } from '@videojs/core';\nimport { createDialog, createTransition } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { useEffect, useLayoutEffect, useState } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport type { DialogContextValue } from './context';\n\nexport interface UseDialogRootOptions extends DialogProps {\n  onOpenChange?: (open: boolean) => void;\n  onOpenChangeComplete?: (open: boolean) => void;\n  coreFactory?: () => DialogCore;\n  stateAttrMap?: StateAttrMap<DialogState>;\n  idPrefix?: string;\n  interactionRoot?: HTMLElement | null;\n}\n\nexport function useDialogRoot({\n  open: controlledOpen,\n  defaultOpen = DialogCore.defaultProps.defaultOpen,\n  closeOnEscape = DialogCore.defaultProps.closeOnEscape,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  coreFactory = createDialogCore,\n  stateAttrMap = DialogDataAttrs,\n  idPrefix = 'dialog',\n  interactionRoot,\n}: UseDialogRootOptions): DialogContextValue {\n  const [core] = useState(coreFactory);\n\n  core.setProps({ open: controlledOpen, defaultOpen, closeOnEscape });\n\n  const isControlled = controlledOpen !== undefined;\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const closeOnEscapeRef = useLatestRef(closeOnEscape);\n\n  const [dialog] = useState(() => {\n    const instance = createDialog({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean) => onOpenChangeRef.current?.(nextOpen),\n      onOpenChangeComplete: (nextOpen: boolean) => onOpenChangeCompleteRef.current?.(nextOpen),\n      closeOnEscape: () => closeOnEscapeRef.current,\n    });\n\n    if (!isControlled && defaultOpen) instance.open();\n\n    return instance;\n  });\n\n  const popupId = useSafeId(`${idPrefix}-popup`);\n  const titleId = useSafeId(`${idPrefix}-title`);\n  const descriptionId = useSafeId(`${idPrefix}-desc`);\n\n  core.setTitleId(titleId);\n  core.setDescriptionId(descriptionId);\n\n  useEffect(() => {\n    if (controlledOpen === undefined) return;\n\n    const { active: inputOpen } = dialog.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) dialog.open();\n    else dialog.close();\n  }, [controlledOpen, dialog]);\n\n  useLayoutEffect(() => {\n    dialog.setInteractionRoot(interactionRoot ?? null);\n  }, [dialog, interactionRoot]);\n\n  useDestroy(dialog);\n\n  const input = useSnapshot(dialog.input);\n  const modality = useSnapshot(dialog.modality);\n\n  core.setInput(input);\n  core.setDocumentModal(modality.documentModal);\n\n  return {\n    core,\n    dialog,\n    state: core.getState(),\n    stateAttrMap,\n    popupId,\n  };\n}\n\nfunction createDialogCore(): DialogCore {\n  return new DialogCore();\n}\n"],"mappings":";;;;;;;;AAmBA,SAAgB,cAAc,EAC5B,MAAM,gBACN,cAAc,WAAW,aAAa,aACtC,gBAAgB,WAAW,aAAa,eACxC,cAAc,kBACd,sBAAsB,0BACtB,cAAc,kBACd,eAAe,iBACf,WAAW,UACX,mBAC2C;CAC3C,MAAM,CAAC,QAAQ,SAAS,WAAW;CAEnC,KAAK,SAAS;EAAE,MAAM;EAAgB;EAAa;CAAc,CAAC;CAElE,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,mBAAmB,aAAa,aAAa;CAEnD,MAAM,CAAC,UAAU,eAAe;EAC9B,MAAM,WAAW,aAAa;GAC5B,YAAY,iBAAiB;GAC7B,eAAe,aAAsB,gBAAgB,UAAU,QAAQ;GACvE,uBAAuB,aAAsB,wBAAwB,UAAU,QAAQ;GACvF,qBAAqB,iBAAiB;EACxC,CAAC;EAED,IAAI,CAAC,gBAAgB,aAAa,SAAS,KAAK;EAEhD,OAAO;CACT,CAAC;CAED,MAAM,UAAU,UAAU,GAAG,SAAS,OAAO;CAC7C,MAAM,UAAU,UAAU,GAAG,SAAS,OAAO;CAC7C,MAAM,gBAAgB,UAAU,GAAG,SAAS,MAAM;CAElD,KAAK,WAAW,OAAO;CACvB,KAAK,iBAAiB,aAAa;CAEnC,gBAAgB;EACd,IAAI,mBAAmB,KAAA,GAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,OAAO,MAAM;EAC3C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBAAgB,OAAO,KAAK;OAC3B,OAAO,MAAM;CACpB,GAAG,CAAC,gBAAgB,MAAM,CAAC;CAE3B,sBAAsB;EACpB,OAAO,mBAAmB,mBAAmB,IAAI;CACnD,GAAG,CAAC,QAAQ,eAAe,CAAC;CAE5B,WAAW,MAAM;CAEjB,MAAM,QAAQ,YAAY,OAAO,KAAK;CACtC,MAAM,WAAW,YAAY,OAAO,QAAQ;CAE5C,KAAK,SAAS,KAAK;CACnB,KAAK,iBAAiB,SAAS,aAAa;CAE5C,OAAO;EACL;EACA;EACA,OAAO,KAAK,SAAS;EACrB;EACA;CACF;AACF;AAEA,SAAS,mBAA+B;CACtC,OAAO,IAAI,WAAW;AACxB"}

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

@@ -0,0 +1,10 @@
+import { ErrorLike } from "@videojs/media";
+//#region src/ui/error-dialog/context.d.ts
+interface ErrorDialogContextValue {
+  lastError: ErrorLike | null;
+}
+/** Returns the current error dialog compound-component context. Throws outside `ErrorDialog.Root`. */
+declare function useErrorDialogContext(): ErrorDialogContextValue;
+//#endregion
+export { ErrorDialogContextValue, useErrorDialogContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/dev/ui/error-dialog/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/context.tsx"],"mappings":";;UAGiB;EACf,WAAW;;;iBAQG,yBAAyB"}

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

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+//#region src/ui/error-dialog/context.tsx
+const ErrorDialogContext = createContext(null);
+const ErrorDialogContextProvider = ErrorDialogContext.Provider;
+/** Returns the current error dialog compound-component context. Throws outside `ErrorDialog.Root`. */
+function useErrorDialogContext() {
+	const ctx = useContext(ErrorDialogContext);
+	if (!ctx) throw new Error("ErrorDialog compound components must be used within an ErrorDialog.Root");
+	return ctx;
+}
+//#endregion
+export { ErrorDialogContextProvider, useErrorDialogContext };
+
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/error-dialog/context.tsx"],"sourcesContent":["import type { ErrorLike } from '@videojs/media';\nimport { createContext, useContext } from 'react';\n\nexport interface ErrorDialogContextValue {\n  lastError: ErrorLike | null;\n}\n\nconst ErrorDialogContext = createContext<ErrorDialogContextValue | null>(null);\n\nexport const ErrorDialogContextProvider = ErrorDialogContext.Provider;\n\n/** Returns the current error dialog compound-component context. Throws outside `ErrorDialog.Root`. */\nexport function useErrorDialogContext(): ErrorDialogContextValue {\n  const ctx = useContext(ErrorDialogContext);\n  if (!ctx) throw new Error('ErrorDialog compound components must be used within an ErrorDialog.Root');\n\n  return ctx;\n}\n"],"mappings":";;AAOA,MAAM,qBAAqB,cAA8C,IAAI;AAE7E,MAAa,6BAA6B,mBAAmB;;AAG7D,SAAgB,wBAAiD;CAC/D,MAAM,MAAM,WAAW,kBAAkB;CACzC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,yEAAyE;CAEnG,OAAO;AACT"}

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

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { DialogCore } from "@videojs/core";
+//#region src/ui/error-dialog/error-dialog-close.d.ts
+interface ErrorDialogCloseProps extends UIComponentProps<'button', DialogCore.State> {}
+/** Renders a localized button that closes the dialog and dismisses the player error. */
+declare const ErrorDialogClose: import("react").ForwardRefExoticComponent<Omit<ErrorDialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace ErrorDialogClose {
+  type Props = ErrorDialogCloseProps;
+  type State = DialogCore.State;
+}
+//#endregion
+export { ErrorDialogClose, ErrorDialogCloseProps };
+//# sourceMappingURL=error-dialog-close.d.ts.map

package/dist/dev/ui/error-dialog/error-dialog-close.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog-close.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-close.tsx"],"mappings":";;;UASiB,8BAA8B,2BAA2B,WAAW;;cAGxE,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBA2BZ;OACH,QAAQ;OACR,QAAQ,WAAW"}

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

@@ -0,0 +1,36 @@
+import { useTranslator } from "../../i18n/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useDialogContext } from "../dialog/context.js";
+import { getErrorDialogDismissText } from "@videojs/core";
+import { translateText } from "@videojs/core/i18n";
+import { forwardRef, useCallback } from "react";
+//#region src/ui/error-dialog/error-dialog-close.tsx
+/** Renders a localized button that closes the dialog and dismisses the player error. */
+const ErrorDialogClose = forwardRef(function ErrorDialogClose({ render, className, style, disabled, children, ...elementProps }, forwardedRef) {
+	const t = useTranslator();
+	const { dialog, state, stateAttrMap } = useDialogContext();
+	const handleClick = useCallback(() => {
+		if (disabled) return;
+		dialog.close();
+	}, [dialog, disabled]);
+	const content = children ?? translateText(getErrorDialogDismissText(), t);
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: forwardedRef,
+		props: [{
+			type: "button",
+			disabled,
+			onClick: handleClick,
+			children: content
+		}, elementProps]
+	});
+});
+//#endregion
+export { ErrorDialogClose };
+
+//# sourceMappingURL=error-dialog-close.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog-close.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-close.tsx"],"sourcesContent":["import { type DialogCore, getErrorDialogDismissText } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode, useCallback } 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 ErrorDialogCloseProps extends UIComponentProps<'button', DialogCore.State> {}\n\n/** Renders a localized button that closes the dialog and dismisses the player error. */\nexport const ErrorDialogClose = forwardRef<HTMLButtonElement, ErrorDialogCloseProps>(function ErrorDialogClose(\n  { render, className, style, disabled, children, ...elementProps },\n  forwardedRef\n) {\n  const t = useTranslator();\n  const { dialog, state, stateAttrMap } = useDialogContext();\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n\n    dialog.close();\n  }, [dialog, disabled]);\n\n  const content: ReactNode = children ?? translateText(getErrorDialogDismissText(), t);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [{ type: 'button' as const, disabled, onClick: handleClick, children: content }, elementProps],\n    }\n  );\n});\n\nexport namespace ErrorDialogClose {\n  export type Props = ErrorDialogCloseProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,mBAAmB,WAAqD,SAAS,iBAC5F,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,GAAG,gBACnD,cACA;CACA,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,QAAQ,OAAO,iBAAiB,iBAAiB;CAEzD,MAAM,cAAc,kBAAkB;EACpC,IAAI,UAAU;EAEd,OAAO,MAAM;CACf,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAErB,MAAM,UAAqB,YAAY,cAAc,0BAA0B,GAAG,CAAC;CAEnF,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,MAAM;GAAmB;GAAU,SAAS;GAAa,UAAU;EAAQ,GAAG,YAAY;CACtG,CACF;AACF,CAAC"}

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

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

package/dist/dev/ui/error-dialog/error-dialog-description.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog-description.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-description.tsx"],"mappings":";;;UAUiB,oCAAoC,sBAAsB,WAAW;;cAGzE,wCAAsB,0BAAA,KAAA,sDAAA,cAAA;kBAqBlB;OACH,QAAQ;OACR,QAAQ,WAAW"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog-description.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-description.tsx"],"sourcesContent":["import { type DialogCore, resolveErrorDialogDescription } 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';\nimport { useErrorDialogContext } from './context';\n\nexport interface ErrorDialogDescriptionProps extends UIComponentProps<'p', DialogCore.State> {}\n\n/** Renders the localized playback error message, or authored children when provided. */\nexport const ErrorDialogDescription = forwardRef<HTMLParagraphElement, ErrorDialogDescriptionProps>(\n  function ErrorDialogDescription({ render, className, style, children, ...elementProps }, forwardedRef) {\n    const t = useTranslator();\n    const { state, stateAttrMap } = useDialogContext();\n    const { lastError } = useErrorDialogContext();\n    const description = resolveErrorDialogDescription(lastError);\n    const content: ReactNode = children ?? translateText(description, t);\n\n    return renderElement(\n      'p',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap,\n        ref: forwardedRef,\n        props: [{ id: state.descriptionId, children: content }, elementProps],\n      }\n    );\n  }\n);\n\nexport namespace ErrorDialogDescription {\n  export type Props = ErrorDialogDescriptionProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;;;;;AAaA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBAAgB,cAAc;CACrG,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,OAAO,iBAAiB,iBAAiB;CACjD,MAAM,EAAE,cAAc,sBAAsB;CAC5C,MAAM,cAAc,8BAA8B,SAAS;CAC3D,MAAM,UAAqB,YAAY,cAAc,aAAa,CAAC;CAEnE,OAAO,cACL,KACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,IAAI,MAAM;GAAe,UAAU;EAAQ,GAAG,YAAY;CACtE,CACF;AACF,CACF"}

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

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+//#region src/ui/error-dialog/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=error-dialog-root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog-root.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"mappings":";;UAWiB;EACf,WAAW;;;iBAIG,kBAAkB,YAAY,uBAAuB;kBAgCpD;OACH,QAAQ"}

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

@@ -0,0 +1,43 @@
+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 { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/error-dialog/error-dialog-root.tsx
+/** Opens from player error state and provides it to the shared dialog parts. */
+function ErrorDialogRoot({ children }) {
+	const errorState = usePlayer(selectError);
+	const container = useContainer();
+	const lastError = useRef(errorState?.error ?? null);
+	if (errorState?.error) lastError.current = errorState.error;
+	const errorStateRef = useLatestRef(errorState);
+	const dialogContext = useDialogRoot({
+		open: Boolean(errorState?.error),
+		onOpenChange(nextOpen) {
+			if (!nextOpen) errorStateRef.current?.dismissError();
+		},
+		coreFactory: createErrorDialogCore,
+		stateAttrMap: ErrorDialogDataAttrs,
+		idPrefix: "error-dialog",
+		interactionRoot: container
+	});
+	if (!errorState) return null;
+	return /* @__PURE__ */ jsx(ErrorDialogContextProvider, {
+		value: { lastError: lastError.current },
+		children: /* @__PURE__ */ jsx(DialogContextProvider, {
+			value: dialogContext,
+			children
+		})
+	});
+}
+function createErrorDialogCore() {
+	return new ErrorDialogCore();
+}
+//#endregion
+export { ErrorDialogRoot };
+
+//# sourceMappingURL=error-dialog-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog-root.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"sourcesContent":["import { ErrorDialogCore, ErrorDialogDataAttrs } from '@videojs/core';\nimport { selectError } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useRef } 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  const lastError = useRef(errorState?.error ?? null);\n\n  if (errorState?.error) lastError.current = 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: lastError.current }}>\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,gBAAgB,EAAE,YAA6C;CAC7E,MAAM,aAAa,UAAU,WAAW;CACxC,MAAM,YAAY,aAAa;CAC/B,MAAM,YAAY,OAAO,YAAY,SAAS,IAAI;CAElD,IAAI,YAAY,OAAO,UAAU,UAAU,WAAW;CAEtD,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,gBAAgB,cAAc;EAClC,MAAM,QAAQ,YAAY,KAAK;EAC/B,aAAa,UAAU;GACrB,IAAI,CAAC,UAAU,cAAc,SAAS,aAAa;EACrD;EACA,aAAa;EACb,cAAc;EACd,UAAU;EACV,iBAAiB;CACnB,CAAC;CAED,IAAI,CAAC,YAAY,OAAO;CAExB,OACE,oBAAC,4BAAD;EAA4B,OAAO,EAAE,WAAW,UAAU,QAAQ;EAChE,UAAA,oBAAC,uBAAD;GAAuB,OAAO;GAAgB;EAAgC,CAAA;CACpD,CAAA;AAEhC;AAEA,SAAS,wBAAyC;CAChD,OAAO,IAAI,gBAAgB;AAC7B"}

package/dist/dev/ui/error-dialog/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/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=error-dialog-title.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog-title.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-title.tsx"],"mappings":";;;UASiB,8BAA8B,uBAAuB,WAAW;;cAGpE,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBAoBZ;OACH,QAAQ;OACR,QAAQ,WAAW"}

package/dist/dev/ui/error-dialog/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/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=error-dialog-title.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog-title.js","names":[],"sources":["../../../../src/ui/error-dialog/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/error-dialog/index.d.ts

@@ -0,0 +1,3 @@
+import { ErrorDialogContextValue, useErrorDialogContext } from "./context.js";
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as ErrorDialog, type ErrorDialogContextValue, useErrorDialogContext };

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

@@ -0,0 +1,3 @@
+import { useErrorDialogContext } from "./context.js";
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as ErrorDialog, useErrorDialogContext };

package/dist/dev/ui/error-dialog/index.parts.d.ts

@@ -0,0 +1,13 @@
+import { DialogBackdrop, DialogBackdropProps } from "../dialog/dialog-backdrop.js";
+import { DialogPopup, DialogPopupProps } from "../dialog/dialog-popup.js";
+import "../dialog/index.parts.js";
+import { ErrorDialogClose, ErrorDialogCloseProps } from "./error-dialog-close.js";
+import { ErrorDialogDescription, ErrorDialogDescriptionProps } from "./error-dialog-description.js";
+import { ErrorDialogRoot, ErrorDialogRootProps } from "./error-dialog-root.js";
+import { ErrorDialogTitle, ErrorDialogTitleProps } from "./error-dialog-title.js";
+declare namespace index_parts_d_exports {
+  export { DialogBackdrop as Backdrop, DialogBackdropProps as BackdropProps, ErrorDialogClose as Close, ErrorDialogCloseProps as CloseProps, ErrorDialogDescription as Description, ErrorDialogDescriptionProps as DescriptionProps, DialogPopup as Popup, DialogPopupProps as PopupProps, ErrorDialogRoot as Root, ErrorDialogRootProps as RootProps, ErrorDialogTitle as Title, ErrorDialogTitleProps as TitleProps };
+}
+//#endregion
+export { DialogBackdrop as Backdrop, type DialogBackdropProps as BackdropProps, ErrorDialogClose as Close, type ErrorDialogCloseProps as CloseProps, ErrorDialogDescription as Description, type ErrorDialogDescriptionProps as DescriptionProps, DialogPopup as Popup, type DialogPopupProps as PopupProps, ErrorDialogRoot as Root, type ErrorDialogRootProps as RootProps, ErrorDialogTitle as Title, type ErrorDialogTitleProps as TitleProps, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/index.parts.ts"],"mappings":""}

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

@@ -0,0 +1,20 @@
+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";
+//#region src/ui/error-dialog/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Backdrop: () => DialogBackdrop,
+	Close: () => ErrorDialogClose,
+	Description: () => ErrorDialogDescription,
+	Popup: () => DialogPopup,
+	Root: () => ErrorDialogRoot,
+	Title: () => ErrorDialogTitle
+});
+//#endregion
+export { DialogBackdrop as Backdrop, ErrorDialogClose as Close, ErrorDialogDescription as Description, DialogPopup as Popup, ErrorDialogRoot as Root, ErrorDialogTitle as Title, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-button.d.ts","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"mappings":";;;;;UAQiB,qBAAA,SACP,gBAAA,WAA2B,oBAAA,CAAqB,KAAA,GACtD,oBAAA,CAAqB,KAAA;;cAGZ,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAQZ,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,oBAAA,CAAqB,KAAA;AAAA"}
+{"version":3,"file":"fullscreen-button.d.ts","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"mappings":";;;UAMiB,8BACP,2BAA2B,qBAAqB,QAAQ,qBAAqB;;cAG1E,kCAAgB,0BAAA,wCAAA,cAAA;kBAWZ;OACH,QAAQ;OACR,QAAQ,qBAAqB"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"sourcesContent":["'use client';\n\nimport { 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>,\n    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});\n\nexport namespace FullscreenButton {\n  export type Props = FullscreenButtonProps;\n  export type State = FullscreenButtonCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,mBAAmB,kBAA+D;CAC7F,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}
+{"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.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.js

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

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

@@ -0,0 +1,15 @@
+import { GestureProps } from "@videojs/core";
+import { ReactNode } from "react";
+//#region src/ui/gesture/gesture.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=gesture.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gesture.d.ts","names":[],"sources":["../../../../src/ui/gesture/gesture.tsx"],"mappings":";;;UAaiB,uBAAqB;iBAEtB,UAAU,MAAM,QAAQ,OAAO,SAAS,QAAQ,YAAY,iBAAe;kBA8B1E;OACH,QAAQ;;;KAIV,oBAAoB;;cAGnB,qBAAY"}

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

@@ -0,0 +1,45 @@
+import { useContainer, usePlayer } from "../../player/context.js";
+import { createDoubleTapGesture, createTapGesture, getGestureActionValue, resolveGestureAction } from "@videojs/core/dom";
+import { useEffect } from "react";
+//#region src/ui/gesture/gesture.tsx
+function Gesture({ 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 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);
+	}, [
+		container,
+		store,
+		type,
+		action,
+		value,
+		pointer,
+		region,
+		disabled
+	]);
+	return null;
+}
+/** @deprecated Use `Gesture` instead. */
+const MediaGesture = Gesture;
+//#endregion
+export { Gesture, MediaGesture };
+
+//# sourceMappingURL=gesture.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gesture.js","names":[],"sources":["../../../../src/ui/gesture/gesture.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,QAAQ,EAAE,MAAM,QAAQ,OAAO,SAAS,QAAQ,YAAqC;CACnG,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAE/B,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,UAAU;EAEhD,MAAM,WAAW,qBAAqB,MAAM;EAC5C,IAAI,CAAC,UAAU;EAEf,MAAM,cAAc,sBAAsB,QAAQ,QAAQ,KAAK;EAE/D,MAAM,cAAc,UAAwB;GAC1C,SAAS;IAAE;IAAO,OAAO;IAAa;GAAM,CAAC;EAC/C;EAEA,MAAM,UAAU;GAAE;GAAS;GAAQ;GAAQ,OAAO;EAAY;EAE9D,IAAI,SAAS,aACX,OAAO,uBAAuB,WAAW,YAAY,OAAO;EAG9D,IAAI,SAAS,OAAO,OAAO,iBAAiB,WAAW,YAAY,OAAO;CAG5E,GAAG;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAS;EAAQ;CAAQ,CAAC;CAErE,OAAO;AACT;;AAUA,MAAa,eAAe"}

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { GestureProps } from "@videojs/core";
+import { RefObject } from "react";
+//#region src/ui/gesture/use-doubletap-gesture.d.ts
+interface UseDoubleTapGestureOptions extends Pick<GestureProps, 'pointer' | 'region' | 'disabled'> {
+  target?: RefObject<HTMLElement | null>;
+}
+/**
+ * Registers a double-tap gesture on the current player container or an explicit target.
+ *
+ * @param onActivate - Callback invoked when a matching double tap is recognized.
+ * @param options - Gesture matching, target, and disabled options.
+ */
+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":";;;UAQiB,mCAAmC,KAAK;EACvD,SAAS,UAAU;;;;;;;;iBASL,oBACd,aAAa,OAAO,uBACpB,UAAU"}

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

@@ -0,0 +1,33 @@
+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
+/**
+* Registers a double-tap gesture on the current player container or an explicit target.
+*
+* @param onActivate - Callback invoked when a matching double tap is recognized.
+* @param options - Gesture matching, target, and disabled options.
+*/
+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
+	]);
+}
+//#endregion
+export { useDoubleTapGesture };
+
+//# sourceMappingURL=use-doubletap-gesture.js.map