@videojs/react 10.0.0-beta.25 → 10.0.0-beta.26

package/dist/default/ui/create-media-button.js

@@ -1,4 +1,5 @@
 "use client";
+import { useTranslator } from "../i18n/context.js";
 import { usePlayer } from "../player/context.js";
 import { renderElement } from "../utils/use-render.js";
 import { useButton } from "./hooks/use-button.js";
@@ -6,12 +7,16 @@ import { useHotkeyShortcut } from "./hotkey/use-hotkey-shortcut.js";
 import { useOptionalMenuTriggerChildContext } from "./menu/context.js";
 import { useOptionalTooltipContext } from "./tooltip/context.js";
 import "@videojs/core/dom";
+import { isText, translateText } from "@videojs/core/i18n";
 import { forwardRef, useLayoutEffect, useState } from "react";
 import { isUndefined } from "@videojs/utils/predicate";
 //#region src/ui/create-media-button.tsx
+function getLabelParams(core, state) {
+	return core.getLabelParams?.(state);
+}
 /** Creates a media button React component from a core class and config. */
 function createMediaButton(config) {
-	const { displayName, core: CoreClass, stateAttrMap, selector, action, hotkeyAction, hotkeyValue, tooltipLabel } = config;
+	const { displayName, core: CoreClass, stateAttrMap, selector, action, hotkeyAction, hotkeyValue, tooltipLabel, isSupported } = config;
 	const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));
 	const Component = forwardRef(function MediaButton(componentProps, forwardedRef) {
 		const { render, className, style, ...rest } = componentProps;
@@ -24,18 +29,22 @@ function createMediaButton(config) {
 		const setTooltipContent = tooltipCtx?.setContent;
 		const feature = usePlayer(selector);
 		const shortcut = useHotkeyShortcut(hotkeyAction, hotkeyValue?.(coreProps));
+		const translator = useTranslator();
 		const [core] = useState(() => new CoreClass());
 		if (corePropKeys.has("menuTrigger") && isUndefined(coreProps.menuTrigger)) coreProps.menuTrigger = menuTriggerChild;
 		core.setProps(coreProps);
 		const { getButtonProps, buttonRef } = useButton({
 			displayName,
-			onActivate: () => action(core, feature),
+			onActivate: () => {
+				Promise.resolve(action(core, feature)).catch((error) => {});
+			},
 			isDisabled: () => !!coreProps.disabled || !feature
 		});
 		if (feature) core.setMedia(feature);
 		const state = feature ? core.getState() : null;
-		const label = state ? core.getLabel(state) : void 0;
-		const tooltipText = state ? tooltipLabel?.(core, state) ?? label : void 0;
+		const supported = state ? isSupported?.(state) ?? true : false;
+		const label = state && supported ? translateText(core.getLabel(state), translator, getLabelParams(core, state)) : void 0;
+		const tooltipText = state && supported ? tooltipLabel?.(core, state) ?? label : void 0;
 		useLayoutEffect(() => {
 			if (!setTooltipContent) return;
 			setTooltipContent(tooltipText ? {
@@ -49,8 +58,12 @@ function createMediaButton(config) {
 			shortcut.shortcut
 		]);
 		if (!feature || !state) return null;
-		const attrs = {
-			...core.getAttrs(state),
+		if (!supported) return null;
+		const attrs = core.getAttrs(state);
+		const ariaLabel = attrs["aria-label"];
+		const resolvedAttrs = {
+			...attrs,
+			...isText(ariaLabel) ? { "aria-label": translateText(ariaLabel, translator, getLabelParams(core, state)) } : void 0,
 			"aria-keyshortcuts": shortcut.aria
 		};
 		return renderElement("button", {
@@ -63,8 +76,8 @@ function createMediaButton(config) {
 			ref: [forwardedRef, buttonRef],
 			props: [
 				getButtonProps(),
-				elementProps,
-				attrs
+				resolvedAttrs,
+				elementProps
 			]
 		});
 	});

package/dist/default/ui/create-media-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-media-button.js","names":[],"sources":["../../../src/ui/create-media-button.tsx"],"sourcesContent":["'use client';\n\nimport type { InferComponentState, InferMediaState, MediaButtonComponent, StateAttrMap } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport type { Selector } from '@videojs/store';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ForwardedRef, ForwardRefExoticComponent, RefAttributes } from 'react';\nimport { forwardRef, useLayoutEffect, useState } from 'react';\n\nimport { usePlayer } from '../player/context';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\nimport { useButton } from './hooks/use-button';\nimport { useHotkeyShortcut } from './hotkey/use-hotkey-shortcut';\nimport { useOptionalMenuTriggerChildContext } from './menu/context';\nimport { useOptionalTooltipContext } from './tooltip/context';\n\ninterface MediaButtonConfig<Core extends Required<MediaButtonComponent>> {\n  displayName: string;\n  core: { new (): Core; defaultProps: Record<string, unknown> };\n  stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  selector: Selector<object, InferMediaState<Core> | undefined>;\n  action: (core: Core, state: InferMediaState<Core>) => void;\n  hotkeyAction?: string;\n  hotkeyValue?: (props: Record<string, unknown>) => number | undefined;\n  tooltipLabel?: (core: Core, state: InferComponentState<Core>) => string | undefined;\n}\n\n/** Creates a media button React component from a core class and config. */\nexport function createMediaButton<Core extends Required<MediaButtonComponent>, Props extends object>(\n  config: MediaButtonConfig<Core>\n): ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> {\n  const {\n    displayName,\n    core: CoreClass,\n    stateAttrMap,\n    selector,\n    action,\n    hotkeyAction,\n    hotkeyValue,\n    tooltipLabel,\n  } = config;\n\n  // Props that exist in the core's defaultProps are routed to setProps; the rest go to the DOM element.\n  const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));\n\n  const Component = forwardRef(function MediaButton(\n    componentProps: Record<string, unknown>,\n    forwardedRef: ForwardedRef<HTMLButtonElement>\n  ) {\n    const { render, className, style, ...rest } = componentProps;\n\n    const coreProps: Record<string, unknown> = {};\n    const elementProps: Record<string, unknown> = {};\n\n    for (const key of Object.keys(rest)) {\n      if (corePropKeys.has(key)) {\n        coreProps[key] = rest[key];\n      } else {\n        elementProps[key] = rest[key];\n      }\n    }\n\n    const tooltipCtx = useOptionalTooltipContext();\n    const menuTriggerChild = useOptionalMenuTriggerChildContext();\n    const setTooltipContent = tooltipCtx?.setContent;\n    const feature = usePlayer(selector);\n    const shortcut = useHotkeyShortcut(hotkeyAction, hotkeyValue?.(coreProps));\n\n    const [core] = useState(() => new CoreClass());\n\n    if (corePropKeys.has('menuTrigger') && isUndefined(coreProps.menuTrigger)) {\n      coreProps.menuTrigger = menuTriggerChild;\n    }\n\n    core.setProps(coreProps);\n\n    const { getButtonProps, buttonRef } = useButton({\n      displayName,\n      onActivate: () => action(core, feature!),\n      isDisabled: () => !!coreProps.disabled || !feature,\n    });\n\n    // Derive state and label before the hooks boundary so the\n    // useLayoutEffect below (called unconditionally) can reference them.\n    type State = InferComponentState<Core>;\n    if (feature) core.setMedia(feature);\n    const state = feature ? (core.getState() as State) : null;\n    const label = state ? core.getLabel(state) : undefined;\n    const tooltipText = state ? (tooltipLabel?.(core, state) ?? label) : undefined;\n\n    // Forward label to tooltip popup content when inside a Tooltip.Root.\n    useLayoutEffect(() => {\n      if (!setTooltipContent) return;\n      setTooltipContent(tooltipText ? { label: tooltipText, shortcut: shortcut.shortcut } : undefined);\n      return () => setTooltipContent(undefined);\n    }, [setTooltipContent, tooltipText, shortcut.shortcut]);\n\n    if (!feature || !state) {\n      if (__DEV__) logMissingFeature(displayName, selector.displayName ?? displayName);\n      return null;\n    }\n\n    const attrs = { ...core.getAttrs(state), 'aria-keyshortcuts': shortcut.aria };\n\n    return renderElement(\n      'button',\n      { render, className, style } as renderElementFn.ComponentProps<InferComponentState<Core>>,\n      {\n        state,\n        stateAttrMap,\n        ref: [forwardedRef, buttonRef],\n        props: [getButtonProps(), elementProps, attrs],\n      }\n    );\n  });\n\n  Component.displayName = displayName;\n\n  return Component as unknown as ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>;\n}\n"],"mappings":";;;;;;;;;;;;AA6BA,SAAgB,kBACd,QACqE;CACrE,MAAM,EACJ,aACA,MAAM,WACN,cACA,UACA,QACA,cACA,aACA,iBACE;CAGJ,MAAM,eAAe,IAAI,IAAI,OAAO,KAAK,UAAU,aAAa,CAAC;CAEjE,MAAM,YAAY,WAAW,SAAS,YACpC,gBACA,cACA;EACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,SAAS;EAE9C,MAAM,YAAqC,EAAE;EAC7C,MAAM,eAAwC,EAAE;AAEhD,OAAK,MAAM,OAAO,OAAO,KAAK,KAAK,CACjC,KAAI,aAAa,IAAI,IAAI,CACvB,WAAU,OAAO,KAAK;MAEtB,cAAa,OAAO,KAAK;EAI7B,MAAM,aAAa,2BAA2B;EAC9C,MAAM,mBAAmB,oCAAoC;EAC7D,MAAM,oBAAoB,YAAY;EACtC,MAAM,UAAU,UAAU,SAAS;EACnC,MAAM,WAAW,kBAAkB,cAAc,cAAc,UAAU,CAAC;EAE1E,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;AAE9C,MAAI,aAAa,IAAI,cAAc,IAAI,YAAY,UAAU,YAAY,CACvE,WAAU,cAAc;AAG1B,OAAK,SAAS,UAAU;EAExB,MAAM,EAAE,gBAAgB,cAAc,UAAU;GAC9C;GACA,kBAAkB,OAAO,MAAM,QAAS;GACxC,kBAAkB,CAAC,CAAC,UAAU,YAAY,CAAC;GAC5C,CAAC;AAKF,MAAI,QAAS,MAAK,SAAS,QAAQ;EACnC,MAAM,QAAQ,UAAW,KAAK,UAAU,GAAa;EACrD,MAAM,QAAQ,QAAQ,KAAK,SAAS,MAAM,GAAG,KAAA;EAC7C,MAAM,cAAc,QAAS,eAAe,MAAM,MAAM,IAAI,QAAS,KAAA;AAGrE,wBAAsB;AACpB,OAAI,CAAC,kBAAmB;AACxB,qBAAkB,cAAc;IAAE,OAAO;IAAa,UAAU,SAAS;IAAU,GAAG,KAAA,EAAU;AAChG,gBAAa,kBAAkB,KAAA,EAAU;KACxC;GAAC;GAAmB;GAAa,SAAS;GAAS,CAAC;AAEvD,MAAI,CAAC,WAAW,CAAC,MAEf,QAAO;EAGT,MAAM,QAAQ;GAAE,GAAG,KAAK,SAAS,MAAM;GAAE,qBAAqB,SAAS;GAAM;AAE7E,SAAO,cACL,UACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA;GACA,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO;IAAC,gBAAgB;IAAE;IAAc;IAAM;GAC/C,CACF;GACD;AAEF,WAAU,cAAc;AAExB,QAAO"}
+{"version":3,"file":"create-media-button.js","names":[],"sources":["../../../src/ui/create-media-button.tsx"],"sourcesContent":["'use client';\n\nimport type { InferComponentState, InferMediaState, MediaButtonComponent, StateAttrMap } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport { isText, translateText } from '@videojs/core/i18n';\nimport type { Selector } from '@videojs/store';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ForwardedRef, ForwardRefExoticComponent, RefAttributes } from 'react';\nimport { forwardRef, useLayoutEffect, useState } from 'react';\n\nimport { useTranslator } from '../i18n/context';\nimport { usePlayer } from '../player/context';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\nimport { useButton } from './hooks/use-button';\nimport { useHotkeyShortcut } from './hotkey/use-hotkey-shortcut';\nimport { useOptionalMenuTriggerChildContext } from './menu/context';\nimport { useOptionalTooltipContext } from './tooltip/context';\n\ninterface MediaButtonConfig<Core extends Required<MediaButtonComponent>> {\n  displayName: string;\n  core: { new (): Core; defaultProps: Record<string, unknown> };\n  stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  selector: Selector<object, InferMediaState<Core> | undefined>;\n  action: (core: Core, state: InferMediaState<Core>) => void | Promise<void>;\n  hotkeyAction?: string;\n  hotkeyValue?: (props: Record<string, unknown>) => number | undefined;\n  tooltipLabel?: (core: Core, state: InferComponentState<Core>) => string | undefined;\n  /** Returns `false` to render `null` (e.g., when the underlying feature is unsupported). */\n  isSupported?: (state: InferComponentState<Core>) => boolean;\n}\n\ntype LabelParams = Record<string, string | number>;\ntype LabelParamsCore<State> = {\n  getLabelParams?: (state: State) => LabelParams | undefined;\n};\n\nfunction getLabelParams<Core extends MediaButtonComponent>(\n  core: Core,\n  state: InferComponentState<Core>\n): LabelParams | undefined {\n  return (core as LabelParamsCore<InferComponentState<Core>>).getLabelParams?.(state);\n}\n\n/** Creates a media button React component from a core class and config. */\nexport function createMediaButton<Core extends Required<MediaButtonComponent>, Props extends object>(\n  config: MediaButtonConfig<Core>\n): ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> {\n  const {\n    displayName,\n    core: CoreClass,\n    stateAttrMap,\n    selector,\n    action,\n    hotkeyAction,\n    hotkeyValue,\n    tooltipLabel,\n    isSupported,\n  } = config;\n\n  // Props that exist in the core's defaultProps are routed to setProps; the rest go to the DOM element.\n  const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));\n\n  const Component = forwardRef(function MediaButton(\n    componentProps: Record<string, unknown>,\n    forwardedRef: ForwardedRef<HTMLButtonElement>\n  ) {\n    const { render, className, style, ...rest } = componentProps;\n\n    const coreProps: Record<string, unknown> = {};\n    const elementProps: Record<string, unknown> = {};\n\n    for (const key of Object.keys(rest)) {\n      if (corePropKeys.has(key)) {\n        coreProps[key] = rest[key];\n      } else {\n        elementProps[key] = rest[key];\n      }\n    }\n\n    const tooltipCtx = useOptionalTooltipContext();\n    const menuTriggerChild = useOptionalMenuTriggerChildContext();\n    const setTooltipContent = tooltipCtx?.setContent;\n    const feature = usePlayer(selector);\n    const shortcut = useHotkeyShortcut(hotkeyAction, hotkeyValue?.(coreProps));\n    const translator = useTranslator();\n\n    const [core] = useState(() => new CoreClass());\n\n    if (corePropKeys.has('menuTrigger') && isUndefined(coreProps.menuTrigger)) {\n      coreProps.menuTrigger = menuTriggerChild;\n    }\n\n    core.setProps(coreProps);\n\n    const { getButtonProps, buttonRef } = useButton({\n      displayName,\n      // `useButton` invokes `onActivate` synchronously from click/keyup\n      // handlers, so any rejection here would be unhandled. Log in dev for\n      // visibility but absorb the failure at this UI boundary.\n      onActivate: () => {\n        Promise.resolve(action(core, feature!)).catch((error) => {\n          if (__DEV__) console.error(`[${displayName}]`, error);\n        });\n      },\n      isDisabled: () => !!coreProps.disabled || !feature,\n    });\n\n    // Derive state and label before the hooks boundary so the\n    // useLayoutEffect below (called unconditionally) can reference them.\n    type State = InferComponentState<Core>;\n    if (feature) core.setMedia(feature);\n    const state = feature ? (core.getState() as State) : null;\n    const supported = state ? (isSupported?.(state) ?? true) : false;\n    const label =\n      state && supported ? translateText(core.getLabel(state), translator, getLabelParams(core, state)) : undefined;\n    const tooltipText = state && supported ? (tooltipLabel?.(core, state) ?? label) : undefined;\n\n    // Forward label to tooltip popup content when inside a Tooltip.Root.\n    useLayoutEffect(() => {\n      if (!setTooltipContent) return;\n      setTooltipContent(tooltipText ? { label: tooltipText, shortcut: shortcut.shortcut } : undefined);\n      return () => setTooltipContent(undefined);\n    }, [setTooltipContent, tooltipText, shortcut.shortcut]);\n\n    if (!feature || !state) {\n      if (__DEV__) logMissingFeature(displayName, selector.displayName ?? displayName);\n      return null;\n    }\n\n    if (!supported) return null;\n\n    const attrs = core.getAttrs(state) as Record<string, unknown>;\n    const ariaLabel = attrs['aria-label'];\n    const resolvedAttrs = {\n      ...attrs,\n      ...(isText(ariaLabel)\n        ? { 'aria-label': translateText(ariaLabel, translator, getLabelParams(core, state)) }\n        : undefined),\n      'aria-keyshortcuts': shortcut.aria,\n    };\n\n    return renderElement(\n      'button',\n      { render, className, style } as renderElementFn.ComponentProps<InferComponentState<Core>>,\n      {\n        state,\n        stateAttrMap,\n        ref: [forwardedRef, buttonRef],\n        props: [getButtonProps(), resolvedAttrs, elementProps],\n      }\n    );\n  });\n\n  Component.displayName = displayName;\n\n  return Component as unknown as ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>;\n}\n"],"mappings":";;;;;;;;;;;;;AAqCA,SAAS,eACP,MACA,OACyB;CACzB,OAAQ,KAAoD,iBAAiB,KAAK;AACpF;;AAGA,SAAgB,kBACd,QACqE;CACrE,MAAM,EACJ,aACA,MAAM,WACN,cACA,UACA,QACA,cACA,aACA,cACA,gBACE;CAGJ,MAAM,eAAe,IAAI,IAAI,OAAO,KAAK,UAAU,YAAY,CAAC;CAEhE,MAAM,YAAY,WAAW,SAAS,YACpC,gBACA,cACA;EACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,SAAS;EAE9C,MAAM,YAAqC,CAAC;EAC5C,MAAM,eAAwC,CAAC;EAE/C,KAAK,MAAM,OAAO,OAAO,KAAK,IAAI,GAChC,IAAI,aAAa,IAAI,GAAG,GACtB,UAAU,OAAO,KAAK;OAEtB,aAAa,OAAO,KAAK;EAI7B,MAAM,aAAa,0BAA0B;EAC7C,MAAM,mBAAmB,mCAAmC;EAC5D,MAAM,oBAAoB,YAAY;EACtC,MAAM,UAAU,UAAU,QAAQ;EAClC,MAAM,WAAW,kBAAkB,cAAc,cAAc,SAAS,CAAC;EACzE,MAAM,aAAa,cAAc;EAEjC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;EAE7C,IAAI,aAAa,IAAI,aAAa,KAAK,YAAY,UAAU,WAAW,GACtE,UAAU,cAAc;EAG1B,KAAK,SAAS,SAAS;EAEvB,MAAM,EAAE,gBAAgB,cAAc,UAAU;GAC9C;GAIA,kBAAkB;IAChB,QAAQ,QAAQ,OAAO,MAAM,OAAQ,CAAC,CAAC,CAAC,OAAO,UAAU,CAEzD,CAAC;GACH;GACA,kBAAkB,CAAC,CAAC,UAAU,YAAY,CAAC;EAC7C,CAAC;EAKD,IAAI,SAAS,KAAK,SAAS,OAAO;EAClC,MAAM,QAAQ,UAAW,KAAK,SAAS,IAAc;EACrD,MAAM,YAAY,QAAS,cAAc,KAAK,KAAK,OAAQ;EAC3D,MAAM,QACJ,SAAS,YAAY,cAAc,KAAK,SAAS,KAAK,GAAG,YAAY,eAAe,MAAM,KAAK,CAAC,IAAI,KAAA;EACtG,MAAM,cAAc,SAAS,YAAa,eAAe,MAAM,KAAK,KAAK,QAAS,KAAA;EAGlF,sBAAsB;GACpB,IAAI,CAAC,mBAAmB;GACxB,kBAAkB,cAAc;IAAE,OAAO;IAAa,UAAU,SAAS;GAAS,IAAI,KAAA,CAAS;GAC/F,aAAa,kBAAkB,KAAA,CAAS;EAC1C,GAAG;GAAC;GAAmB;GAAa,SAAS;EAAQ,CAAC;EAEtD,IAAI,CAAC,WAAW,CAAC,OAEf,OAAO;EAGT,IAAI,CAAC,WAAW,OAAO;EAEvB,MAAM,QAAQ,KAAK,SAAS,KAAK;EACjC,MAAM,YAAY,MAAM;EACxB,MAAM,gBAAgB;GACpB,GAAG;GACH,GAAI,OAAO,SAAS,IAChB,EAAE,cAAc,cAAc,WAAW,YAAY,eAAe,MAAM,KAAK,CAAC,EAAE,IAClF,KAAA;GACJ,qBAAqB,SAAS;EAChC;EAEA,OAAO,cACL,UACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA;GACA,KAAK,CAAC,cAAc,SAAS;GAC7B,OAAO;IAAC,eAAe;IAAG;IAAe;GAAY;EACvD,CACF;CACF,CAAC;CAED,UAAU,cAAc;CAExB,OAAO;AACT"}

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/error-dialog/context.tsx"],"sourcesContent":["'use client';\n\nimport type { MediaError } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\nexport interface ErrorDialogContextValue {\n  lastError: MediaError | null;\n}\n\nconst ErrorDialogContext = createContext<ErrorDialogContextValue | null>(null);\n\nexport const ErrorDialogContextProvider = ErrorDialogContext.Provider;\n\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  return ctx;\n}\n"],"mappings":";;;AASA,MAAM,qBAAqB,cAA8C,KAAK;AAE9E,MAAa,6BAA6B,mBAAmB;AAE7D,SAAgB,wBAAiD;CAC/D,MAAM,MAAM,WAAW,mBAAmB;AAC1C,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,0EAA0E;AACpG,QAAO"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/error-dialog/context.tsx"],"sourcesContent":["'use client';\n\nimport 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\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  return ctx;\n}\n"],"mappings":";;;AASA,MAAM,qBAAqB,cAA8C,IAAI;AAE7E,MAAa,6BAA6B,mBAAmB;AAE7D,SAAgB,wBAAiD;CAC/D,MAAM,MAAM,WAAW,kBAAkB;CACzC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,yEAAyE;CACnG,OAAO;AACT"}

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

@@ -0,0 +1,36 @@
+"use client";
+import { useTranslator } from "../../i18n/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useAlertDialogContext } from "../alert-dialog/context.js";
+import { translateText } from "@videojs/core/i18n";
+import { forwardRef, useCallback } from "react";
+import { getErrorDialogDismissText } from "@videojs/core";
+//#region src/ui/error-dialog/error-dialog-close.tsx
+const ErrorDialogClose = forwardRef(function ErrorDialogClose({ render, className, style, disabled, children, ...elementProps }, forwardedRef) {
+	const t = useTranslator();
+	const { dialog, state, stateAttrMap } = useAlertDialogContext();
+	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/default/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":["'use client';\n\nimport type { AlertDialogCore } from '@videojs/core';\nimport { getErrorDialogDismissText } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode, useCallback } from 'react';\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from '../alert-dialog/context';\n\nexport interface ErrorDialogCloseProps extends UIComponentProps<'button', AlertDialogCore.State> {}\n\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 } = useAlertDialogContext();\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\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 = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,mBAAmB,WAAqD,SAAS,iBAC5F,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,GAAG,gBACnD,cACA;CACA,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,QAAQ,OAAO,iBAAiB,sBAAsB;CAE9D,MAAM,cAAc,kBAAkB;EACpC,IAAI,UAAU;EACd,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/default/ui/error-dialog/error-dialog-description.js

@@ -1,13 +1,18 @@
 "use client";
+import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useAlertDialogContext } from "../alert-dialog/context.js";
 import { useErrorDialogContext } from "./context.js";
+import { translateText } from "@videojs/core/i18n";
 import { forwardRef } from "react";
+import { resolveErrorDialogDescription } from "@videojs/core";
 //#region src/ui/error-dialog/error-dialog-description.tsx
-const FALLBACK_MESSAGE = "An error occurred. Please try again.";
 const ErrorDialogDescription = forwardRef(function ErrorDialogDescription({ render, className, style, children, ...elementProps }, forwardedRef) {
+	const t = useTranslator();
 	const { state, stateAttrMap } = useAlertDialogContext();
 	const { lastError } = useErrorDialogContext();
+	const description = resolveErrorDialogDescription(lastError);
+	const content = children ?? translateText(description, t);
 	return renderElement("p", {
 		render,
 		className,
@@ -18,7 +23,7 @@ const ErrorDialogDescription = forwardRef(function ErrorDialogDescription({ rend
 		ref: forwardedRef,
 		props: [{
 			id: state.descriptionId,
-			children: children ?? lastError?.message ?? FALLBACK_MESSAGE
+			children: content
 		}, elementProps]
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"error-dialog-description.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-description.tsx"],"sourcesContent":["'use client';\n\nimport type { AlertDialogCore } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from '../alert-dialog/context';\nimport { useErrorDialogContext } from './context';\n\nconst FALLBACK_MESSAGE = 'An error occurred. Please try again.';\n\nexport interface ErrorDialogDescriptionProps extends UIComponentProps<'p', AlertDialogCore.State> {}\n\nexport const ErrorDialogDescription = forwardRef<HTMLParagraphElement, ErrorDialogDescriptionProps>(\n  function ErrorDialogDescription({ render, className, style, children, ...elementProps }, forwardedRef) {\n    const { state, stateAttrMap } = useAlertDialogContext();\n    const { lastError } = useErrorDialogContext();\n\n    return renderElement(\n      'p',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap,\n        ref: forwardedRef,\n        props: [\n          { id: state.descriptionId, children: children ?? lastError?.message ?? FALLBACK_MESSAGE },\n          elementProps,\n        ],\n      }\n    );\n  }\n);\n\nexport namespace ErrorDialogDescription {\n  export type Props = ErrorDialogDescriptionProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;AAUA,MAAM,mBAAmB;AAIzB,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBAAgB,cAAc;CACrG,MAAM,EAAE,OAAO,iBAAiB,uBAAuB;CACvD,MAAM,EAAE,cAAc,uBAAuB;AAE7C,QAAO,cACL,KACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO,CACL;GAAE,IAAI,MAAM;GAAe,UAAU,YAAY,WAAW,WAAW;GAAkB,EACzF,aACD;EACF,CACF;EAEJ"}
+{"version":3,"file":"error-dialog-description.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-description.tsx"],"sourcesContent":["'use client';\n\nimport type { AlertDialogCore } from '@videojs/core';\nimport { resolveErrorDialogDescription } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode } from 'react';\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from '../alert-dialog/context';\nimport { useErrorDialogContext } from './context';\n\nexport interface ErrorDialogDescriptionProps extends UIComponentProps<'p', AlertDialogCore.State> {}\n\nexport const ErrorDialogDescription = forwardRef<HTMLParagraphElement, ErrorDialogDescriptionProps>(\n  function ErrorDialogDescription({ render, className, style, children, ...elementProps }, forwardedRef) {\n    const t = useTranslator();\n    const { state, stateAttrMap } = useAlertDialogContext();\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 = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;;;;AAcA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBAAgB,cAAc;CACrG,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,OAAO,iBAAiB,sBAAsB;CACtD,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/default/ui/error-dialog/error-dialog-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"error-dialog-root.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"sourcesContent":["'use client';\n\nimport { AlertDialogDataAttrs, ErrorDialogCore } from '@videojs/core';\nimport { createAlertDialog, createTransition, selectError } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { AlertDialogContextProvider } from '../alert-dialog/context';\nimport { ErrorDialogContextProvider } from './context';\n\nexport interface ErrorDialogRootProps {\n  children?: ReactNode;\n}\n\nexport function ErrorDialogRoot({ children }: ErrorDialogRootProps): ReactNode {\n  const [core] = useState(() => new ErrorDialogCore());\n  const errorState = usePlayer(selectError);\n  const lastError = useRef(errorState?.error ?? null);\n\n  if (errorState?.error) lastError.current = errorState.error;\n\n  const errorStateRef = useLatestRef(errorState);\n\n  const [dialog] = useState(() =>\n    createAlertDialog({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean) => {\n        if (!nextOpen) {\n          errorStateRef.current?.dismissError();\n        }\n      },\n    })\n  );\n\n  const titleId = useSafeId('error-dialog-title');\n  const descriptionId = useSafeId('error-dialog-desc');\n\n  core.setTitleId(titleId);\n  core.setDescriptionId(descriptionId);\n\n  useEffect(() => {\n    const hasError = Boolean(errorState?.error);\n    const { active: isOpen } = dialog.input.current;\n\n    if (hasError && !isOpen) {\n      dialog.open();\n    } else if (!hasError && isOpen) {\n      dialog.close();\n    }\n  }, [errorState?.error, dialog]);\n\n  useDestroy(dialog);\n\n  const input = useSnapshot(dialog.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  if (!errorState) return null;\n\n  return (\n    <ErrorDialogContextProvider value={{ lastError: lastError.current }}>\n      <AlertDialogContextProvider value={{ core, dialog, state, stateAttrMap: AlertDialogDataAttrs }}>\n        {children}\n      </AlertDialogContextProvider>\n    </ErrorDialogContextProvider>\n  );\n}\n\nexport namespace ErrorDialogRoot {\n  export type Props = ErrorDialogRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAmBA,SAAgB,gBAAgB,EAAE,YAA6C;CAC7E,MAAM,CAAC,QAAQ,eAAe,IAAI,iBAAiB,CAAC;CACpD,MAAM,aAAa,UAAU,YAAY;CACzC,MAAM,YAAY,OAAO,YAAY,SAAS,KAAK;AAEnD,KAAI,YAAY,MAAO,WAAU,UAAU,WAAW;CAEtD,MAAM,gBAAgB,aAAa,WAAW;CAE9C,MAAM,CAAC,UAAU,eACf,kBAAkB;EAChB,YAAY,kBAAkB;EAC9B,eAAe,aAAsB;AACnC,OAAI,CAAC,SACH,eAAc,SAAS,cAAc;;EAG1C,CAAC,CACH;CAED,MAAM,UAAU,UAAU,qBAAqB;CAC/C,MAAM,gBAAgB,UAAU,oBAAoB;AAEpD,MAAK,WAAW,QAAQ;AACxB,MAAK,iBAAiB,cAAc;AAEpC,iBAAgB;EACd,MAAM,WAAW,QAAQ,YAAY,MAAM;EAC3C,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM;AAExC,MAAI,YAAY,CAAC,OACf,QAAO,MAAM;WACJ,CAAC,YAAY,OACtB,QAAO,OAAO;IAEf,CAAC,YAAY,OAAO,OAAO,CAAC;AAE/B,YAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,OAAO,MAAM;AACvC,MAAK,SAAS,MAAM;CACpB,MAAM,QAAQ,KAAK,UAAU;AAE7B,KAAI,CAAC,WAAY,QAAO;AAExB,QACE,oBAAC,4BAAD;EAA4B,OAAO,EAAE,WAAW,UAAU,SAAS;YACjE,oBAAC,4BAAD;GAA4B,OAAO;IAAE;IAAM;IAAQ;IAAO,cAAc;IAAsB;GAC3F;GAC0B,CAAA;EACF,CAAA"}
+{"version":3,"file":"error-dialog-root.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"sourcesContent":["'use client';\n\nimport { AlertDialogDataAttrs, ErrorDialogCore } from '@videojs/core';\nimport { createAlertDialog, createTransition, selectError } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { AlertDialogContextProvider } from '../alert-dialog/context';\nimport { ErrorDialogContextProvider } from './context';\n\nexport interface ErrorDialogRootProps {\n  children?: ReactNode;\n}\n\nexport function ErrorDialogRoot({ children }: ErrorDialogRootProps): ReactNode {\n  const [core] = useState(() => new ErrorDialogCore());\n  const errorState = usePlayer(selectError);\n  const lastError = useRef(errorState?.error ?? null);\n\n  if (errorState?.error) lastError.current = errorState.error;\n\n  const errorStateRef = useLatestRef(errorState);\n\n  const [dialog] = useState(() =>\n    createAlertDialog({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean) => {\n        if (!nextOpen) {\n          errorStateRef.current?.dismissError();\n        }\n      },\n    })\n  );\n\n  const titleId = useSafeId('error-dialog-title');\n  const descriptionId = useSafeId('error-dialog-desc');\n\n  core.setTitleId(titleId);\n  core.setDescriptionId(descriptionId);\n\n  useEffect(() => {\n    const hasError = Boolean(errorState?.error);\n    const { active: isOpen } = dialog.input.current;\n\n    if (hasError && !isOpen) {\n      dialog.open();\n    } else if (!hasError && isOpen) {\n      dialog.close();\n    }\n  }, [errorState?.error, dialog]);\n\n  useDestroy(dialog);\n\n  const input = useSnapshot(dialog.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  if (!errorState) return null;\n\n  return (\n    <ErrorDialogContextProvider value={{ lastError: lastError.current }}>\n      <AlertDialogContextProvider value={{ core, dialog, state, stateAttrMap: AlertDialogDataAttrs }}>\n        {children}\n      </AlertDialogContextProvider>\n    </ErrorDialogContextProvider>\n  );\n}\n\nexport namespace ErrorDialogRoot {\n  export type Props = ErrorDialogRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAmBA,SAAgB,gBAAgB,EAAE,YAA6C;CAC7E,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;CACnD,MAAM,aAAa,UAAU,WAAW;CACxC,MAAM,YAAY,OAAO,YAAY,SAAS,IAAI;CAElD,IAAI,YAAY,OAAO,UAAU,UAAU,WAAW;CAEtD,MAAM,gBAAgB,aAAa,UAAU;CAE7C,MAAM,CAAC,UAAU,eACf,kBAAkB;EAChB,YAAY,iBAAiB;EAC7B,eAAe,aAAsB;GACnC,IAAI,CAAC,UACH,cAAc,SAAS,aAAa;EAExC;CACF,CAAC,CACH;CAEA,MAAM,UAAU,UAAU,oBAAoB;CAC9C,MAAM,gBAAgB,UAAU,mBAAmB;CAEnD,KAAK,WAAW,OAAO;CACvB,KAAK,iBAAiB,aAAa;CAEnC,gBAAgB;EACd,MAAM,WAAW,QAAQ,YAAY,KAAK;EAC1C,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM;EAExC,IAAI,YAAY,CAAC,QACf,OAAO,KAAK;OACP,IAAI,CAAC,YAAY,QACtB,OAAO,MAAM;CAEjB,GAAG,CAAC,YAAY,OAAO,MAAM,CAAC;CAE9B,WAAW,MAAM;CAEjB,MAAM,QAAQ,YAAY,OAAO,KAAK;CACtC,KAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,SAAS;CAE5B,IAAI,CAAC,YAAY,OAAO;CAExB,OACE,oBAAC,4BAAD;EAA4B,OAAO,EAAE,WAAW,UAAU,QAAQ;EAChE,UAAA,oBAAC,4BAAD;GAA4B,OAAO;IAAE;IAAM;IAAQ;IAAO,cAAc;GAAqB;GAC1F;EACyB,CAAA;CACF,CAAA;AAEhC"}

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

@@ -0,0 +1,30 @@
+"use client";
+import { useTranslator } from "../../i18n/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useAlertDialogContext } from "../alert-dialog/context.js";
+import { translateText } from "@videojs/core/i18n";
+import { forwardRef } from "react";
+import { getErrorDialogTitleText } from "@videojs/core";
+//#region src/ui/error-dialog/error-dialog-title.tsx
+const ErrorDialogTitle = forwardRef(function ErrorDialogTitle({ render, className, style, children, ...elementProps }, forwardedRef) {
+	const t = useTranslator();
+	const { state, stateAttrMap } = useAlertDialogContext();
+	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/default/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":["'use client';\n\nimport type { AlertDialogCore } from '@videojs/core';\nimport { getErrorDialogTitleText } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode } from 'react';\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from '../alert-dialog/context';\n\nexport interface ErrorDialogTitleProps extends UIComponentProps<'h2', AlertDialogCore.State> {}\n\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 } = useAlertDialogContext();\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 = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,mBAAmB,WAAsD,SAAS,iBAC7F,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,OAAO,iBAAiB,sBAAsB;CACtD,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/default/ui/error-dialog/index.parts.js

@@ -1,18 +1,18 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { AlertDialogClose } from "../alert-dialog/alert-dialog-close.js";
 import { AlertDialogPopup } from "../alert-dialog/alert-dialog-popup.js";
-import { AlertDialogTitle } from "../alert-dialog/alert-dialog-title.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({
-	Close: () => AlertDialogClose,
+	Close: () => ErrorDialogClose,
 	Description: () => ErrorDialogDescription,
 	Popup: () => AlertDialogPopup,
 	Root: () => ErrorDialogRoot,
-	Title: () => AlertDialogTitle
+	Title: () => ErrorDialogTitle
 });
 //#endregion
-export { index_parts_exports };
+export { ErrorDialogClose as Close, ErrorDialogDescription as Description, AlertDialogPopup as Popup, ErrorDialogRoot as Root, ErrorDialogTitle as Title, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

package/dist/default/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 {\n  AlertDialogClose as Close,\n  type AlertDialogCloseProps as CloseProps,\n} from '../alert-dialog/alert-dialog-close';\nexport {\n  AlertDialogPopup as Popup,\n  type AlertDialogPopupProps as PopupProps,\n} from '../alert-dialog/alert-dialog-popup';\nexport {\n  AlertDialogTitle as Title,\n  type AlertDialogTitleProps as TitleProps,\n} from '../alert-dialog/alert-dialog-title';\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';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/error-dialog/index.parts.ts"],"sourcesContent":["export {\n  AlertDialogPopup as Popup,\n  type AlertDialogPopupProps as PopupProps,\n} from '../alert-dialog/alert-dialog-popup';\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/default/ui/fullscreen-button/fullscreen-button.js

@@ -10,7 +10,8 @@ const FullscreenButton = createMediaButton({
 	stateAttrMap: FullscreenButtonDataAttrs,
 	selector: selectFullscreen,
 	action: (core, state) => core.toggle(state),
-	hotkeyAction: "toggleFullscreen"
+	hotkeyAction: "toggleFullscreen",
+	isSupported: (state) => !state.hidden
 });
 //#endregion
 export { FullscreenButton };

package/dist/default/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  hotkeyAction: 'toggleFullscreen',\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;CAC3C,cAAc;CACf,CAAC"}
+{"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  hotkeyAction: 'toggleFullscreen',\n  isSupported: (state) => !state.hidden,\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,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"gesture.js","names":[],"sources":["../../../../src/ui/gesture/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 GestureProps {\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 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 onActivate = (event: PointerEvent) => {\n      resolver({ store, value, event });\n    };\n\n    const options = { pointer, region, action, value };\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\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":";;;;;AAyBA,SAAgB,QAAQ,EAAE,MAAM,QAAQ,OAAO,SAAS,QAAQ,YAAqC;CACnG,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;GAAO;AAElD,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;;;AAWT,MAAa,eAAe"}
+{"version":3,"file":"gesture.js","names":[],"sources":["../../../../src/ui/gesture/gesture.tsx"],"sourcesContent":["'use client';\n\nimport type { AnyPlayerStore } from '@videojs/core/dom';\nimport {\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 GestureProps {\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 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 onActivate = (event: PointerEvent) => {\n      resolver({ store, value, event });\n    };\n\n    const options = { pointer, region, action, value };\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\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":";;;;;AAyBA,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,UAAwB;GAC1C,SAAS;IAAE;IAAO;IAAO;GAAM,CAAC;EAClC;EAEA,MAAM,UAAU;GAAE;GAAS;GAAQ;GAAQ;EAAM;EAEjD,IAAI,SAAS,aACX,OAAO,uBAAuB,WAAW,YAAY,OAAO;EAG9D,OAAO,iBAAiB,WAAW,YAAY,OAAO;CACxD,GAAG;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAS;EAAQ;CAAQ,CAAC;CAErE,OAAO;AACT;;AAUA,MAAa,eAAe"}

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

@@ -19,8 +19,7 @@ function useDoubleTapGesture(onActivate, options) {
 		container,
 		disabled,
 		pointer,
-		region,
-		onActivateRef
+		region
 	]);
 }
 //#endregion

package/dist/default/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":["'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"}
+{"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]);\n}\n"],"mappings":";;;;;;AAgBA,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"}

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

@@ -19,8 +19,7 @@ function useTapGesture(onActivate, options) {
 		container,
 		disabled,
 		pointer,
-		region,
-		onActivateRef
+		region
 	]);
 }
 //#endregion

package/dist/default/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":["'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"}
+{"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]);\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,cAAc,YAA2C,SAAsC;CAC7G,MAAM,EAAE,SAAS,QAAQ,WAAW,OAAO,WAAW,WAAW,CAAC;CAClE,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAE7C,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU;EAE5B,OAAO,iBAAiB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;GAAE;GAAS;EAAO,CAAC;CACjG,GAAG;EAAC;EAAW;EAAU;EAAS;CAAM,CAAC;AAC3C"}

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

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

@@ -0,0 +1,39 @@
+"use client";
+import { useCallback, useEffect, useMemo, useState } from "react";
+//#region src/ui/hooks/use-positioned-state.ts
+function usePositionedState(preferredState) {
+	const preferredSide = preferredState.side;
+	const [position, setPosition] = useState({
+		preferred: preferredSide,
+		side: preferredSide
+	});
+	const side = preferredState.open && position.preferred === preferredSide ? position.side : preferredSide;
+	const state = useMemo(() => side === preferredSide ? preferredState : {
+		...preferredState,
+		side
+	}, [
+		side,
+		preferredState,
+		preferredSide
+	]);
+	const setPositionedSide = useCallback((nextSide) => setPosition((prev) => prev.preferred === preferredSide && prev.side === nextSide ? prev : {
+		preferred: preferredSide,
+		side: nextSide
+	}), [preferredSide]);
+	useEffect(() => {
+		if (!preferredState.open) setPositionedSide(preferredSide);
+	}, [
+		preferredState.open,
+		preferredSide,
+		setPositionedSide
+	]);
+	return {
+		state,
+		preferredSide,
+		setPositionedSide
+	};
+}
+//#endregion
+export { usePositionedState };
+
+//# sourceMappingURL=use-positioned-state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-positioned-state.js","names":[],"sources":["../../../../src/ui/hooks/use-positioned-state.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useState } from 'react';\n\ninterface PopupState {\n  open: boolean;\n  side: string | undefined;\n}\n\ninterface PositionedState<State extends PopupState> {\n  state: State;\n  preferredSide: State['side'];\n  setPositionedSide: (side: State['side']) => void;\n}\n\nexport function usePositionedState<State extends PopupState>(preferredState: State): PositionedState<State> {\n  const preferredSide = preferredState.side;\n  const [position, setPosition] = useState<{ preferred: State['side']; side: State['side'] }>({\n    preferred: preferredSide,\n    side: preferredSide,\n  });\n\n  const side = preferredState.open && position.preferred === preferredSide ? position.side : preferredSide;\n\n  const state = useMemo(\n    () => (side === preferredSide ? preferredState : { ...preferredState, side }),\n    [side, preferredState, preferredSide]\n  );\n\n  const setPositionedSide = useCallback(\n    (nextSide: State['side']) =>\n      setPosition((prev) =>\n        prev.preferred === preferredSide && prev.side === nextSide ? prev : { preferred: preferredSide, side: nextSide }\n      ),\n    [preferredSide]\n  );\n\n  useEffect(() => {\n    if (!preferredState.open) setPositionedSide(preferredSide);\n  }, [preferredState.open, preferredSide, setPositionedSide]);\n\n  return { state, preferredSide, setPositionedSide };\n}\n"],"mappings":";;;AAeA,SAAgB,mBAA6C,gBAA+C;CAC1G,MAAM,gBAAgB,eAAe;CACrC,MAAM,CAAC,UAAU,eAAe,SAA4D;EAC1F,WAAW;EACX,MAAM;CACR,CAAC;CAED,MAAM,OAAO,eAAe,QAAQ,SAAS,cAAc,gBAAgB,SAAS,OAAO;CAE3F,MAAM,QAAQ,cACL,SAAS,gBAAgB,iBAAiB;EAAE,GAAG;EAAgB;CAAK,GAC3E;EAAC;EAAM;EAAgB;CAAa,CACtC;CAEA,MAAM,oBAAoB,aACvB,aACC,aAAa,SACX,KAAK,cAAc,iBAAiB,KAAK,SAAS,WAAW,OAAO;EAAE,WAAW;EAAe,MAAM;CAAS,CACjH,GACF,CAAC,aAAa,CAChB;CAEA,gBAAgB;EACd,IAAI,CAAC,eAAe,MAAM,kBAAkB,aAAa;CAC3D,GAAG;EAAC,eAAe;EAAM;EAAe;CAAiB,CAAC;CAE1D,OAAO;EAAE;EAAO;EAAe;CAAkB;AACnD"}

package/dist/default/ui/hooks/use-slider.js.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    | '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"}
+{"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,OAAO;CAEvC,MAAM,iBAAiB,OAA2B,IAAI;CACtD,MAAM,kBAAkB,OAA2B,IAAI;CACvD,MAAM,cAAc,eAAe;CAGnC,MAAM,CAAC,UAAU,eAA0B;EAkBzC,OAAO,aAAa;GAhBlB,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,aAAc,eAAe,UAAU,MAAM,eAAe,OAAO,IAAI;GACvE,kBAAkB,WAAW,QAAQ,YAAY;GACjD,kBAAkB,WAAW,QAAQ,WAAW;GAChD,sBAAsB,WAAW,QAAQ,eAAe;GACxD,2BAA2B,WAAW,QAAQ,oBAAoB;GAClE,gBAAgB,WAAW,QAAQ;GACnC,eAAe,WAAW,QAAQ;GAClC,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,OAAO;GACtE,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,OAAO;GACtE,mBAAmB,WAAW,QAAQ,cAAc;GACpD,iBAAiB,WAAW,QAAQ,YAAY;EAGlB,CAAC;CACnC,CAAC;CAED,WAAW,MAAM;CAGjB,MAAM,QAAQ,YAAY,OAAO,KAAK;CAGtC,MAAM,QAAQ,QAAQ,aAAa,KAAK;CAIxC,sBAAsB;EACpB,IAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,SAC/E,YAAY;CAEhB,GAAG,CAAC,MAAM,cAAc,CAAC;CAczB,OAAO;EACL;EACA,SAbc,QAAQ,WAAW,OAAO,mBAAmB,KAAK,CAa1D;EACN,SAXc,aAAa,YAAgC;GAC3D,eAAe,UAAU;EAC3B,GAAG,CAAC,CASI;EACN,UARe,aAAa,YAAgC;GAC5D,gBAAgB,UAAU;EAC5B,GAAG,CAAC,CAMK;EACP,WAAW,OAAO;EAClB,WAAW,OAAO;EAClB,YAAY,OAAO;CACrB;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/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 HotkeyProps {\n  keys: string;\n  action: HotkeyActionName | (string & {});\n  value?: number;\n  disabled?: boolean;\n  target?: 'player' | 'document';\n}\n\nexport function Hotkey({ keys, action, value, disabled, target }: HotkeyProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !keys || !action || disabled) return;\n\n    const resolver = resolveHotkeyAction(action);\n    if (!resolver) return;\n\n    return createHotkey(container, {\n      keys,\n      action,\n      value,\n      target,\n      disabled,\n      repeatable: !isHotkeyToggleAction(action),\n      onActivate: (_event, key) => {\n        resolver({ store, key, value });\n      },\n    });\n  }, [container, store, keys, action, value, disabled, target]);\n\n  return null;\n}\n\nexport namespace Hotkey {\n  export type Props = HotkeyProps;\n}\n\n/** @deprecated Use `HotkeyProps` instead. */\nexport type MediaHotkeyProps = HotkeyProps;\n\n/** @deprecated Use `Hotkey` instead. */\nexport const MediaHotkey = Hotkey;\n"],"mappings":";;;;;AAsBA,SAAgB,OAAO,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAkC;CACxF,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;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;;;AAWT,MAAa,cAAc"}
+{"version":3,"file":"hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/hotkey.tsx"],"sourcesContent":["'use client';\n\nimport type { AnyPlayerStore } from '@videojs/core/dom';\nimport { createHotkey, type HotkeyActionName, isHotkeyToggleAction, resolveHotkeyAction } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface HotkeyProps {\n  keys: string;\n  action: HotkeyActionName | (string & {});\n  value?: number;\n  disabled?: boolean;\n  target?: 'player' | 'document';\n}\n\nexport function Hotkey({ keys, action, value, disabled, target }: HotkeyProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !keys || !action || disabled) return;\n\n    const resolver = resolveHotkeyAction(action);\n    if (!resolver) return;\n\n    return createHotkey(container, {\n      keys,\n      action,\n      value,\n      target,\n      disabled,\n      repeatable: !isHotkeyToggleAction(action),\n      onActivate: (_event, key) => {\n        resolver({ store, key, value });\n      },\n    });\n  }, [container, store, keys, action, value, disabled, target]);\n\n  return null;\n}\n\nexport namespace Hotkey {\n  export type Props = HotkeyProps;\n}\n\n/** @deprecated Use `HotkeyProps` instead. */\nexport type MediaHotkeyProps = HotkeyProps;\n\n/** @deprecated Use `Hotkey` instead. */\nexport const MediaHotkey = Hotkey;\n"],"mappings":";;;;;AAiBA,SAAgB,OAAO,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAkC;CACxF,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAE/B,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,UAAU;EAEhD,MAAM,WAAW,oBAAoB,MAAM;EAC3C,IAAI,CAAC,UAAU;EAEf,OAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA;GACA,YAAY,CAAC,qBAAqB,MAAM;GACxC,aAAa,QAAQ,QAAQ;IAC3B,SAAS;KAAE;KAAO;KAAK;IAAM,CAAC;GAChC;EACF,CAAC;CACH,GAAG;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAU;CAAM,CAAC;CAE5D,OAAO;AACT;;AAUA,MAAa,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-hotkey-shortcut.js","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey-shortcut.ts"],"sourcesContent":["'use client';\n\nimport { getHotkeyCoordinator, type HotkeyShortcutDetails } from '@videojs/core/dom';\nimport { useEffect, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\n\nexport function useHotkeyShortcut(action: string | undefined, value?: number | undefined): HotkeyShortcutDetails {\n  const container = useContainer();\n\n  const [shortcut, setShortcut] = useState<HotkeyShortcutDetails>({});\n\n  useEffect(() => {\n    if (!container || !action) {\n      setShortcut({});\n      return;\n    }\n\n    const coordinator = getHotkeyCoordinator(container);\n    const update = () => setShortcut(coordinator.getShortcut(action, value));\n\n    update();\n    return coordinator.subscribeShortcutChanges(update);\n  }, [container, action, value]);\n\n  return shortcut;\n}\n"],"mappings":";;;;;AAOA,SAAgB,kBAAkB,QAA4B,OAAmD;CAC/G,MAAM,YAAY,cAAc;CAEhC,MAAM,CAAC,UAAU,eAAe,SAAgC,EAAE,CAAC;AAEnE,iBAAgB;AACd,MAAI,CAAC,aAAa,CAAC,QAAQ;AACzB,eAAY,EAAE,CAAC;AACf;;EAGF,MAAM,cAAc,qBAAqB,UAAU;EACnD,MAAM,eAAe,YAAY,YAAY,YAAY,QAAQ,MAAM,CAAC;AAExE,UAAQ;AACR,SAAO,YAAY,yBAAyB,OAAO;IAClD;EAAC;EAAW;EAAQ;EAAM,CAAC;AAE9B,QAAO"}
+{"version":3,"file":"use-hotkey-shortcut.js","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey-shortcut.ts"],"sourcesContent":["'use client';\n\nimport { getHotkeyCoordinator, type HotkeyShortcutDetails } from '@videojs/core/dom';\nimport { useEffect, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\n\nexport function useHotkeyShortcut(action: string | undefined, value?: number | undefined): HotkeyShortcutDetails {\n  const container = useContainer();\n\n  const [shortcut, setShortcut] = useState<HotkeyShortcutDetails>({});\n\n  useEffect(() => {\n    if (!container || !action) {\n      setShortcut({});\n      return;\n    }\n\n    const coordinator = getHotkeyCoordinator(container);\n    const update = () => setShortcut(coordinator.getShortcut(action, value));\n\n    update();\n    return coordinator.subscribeShortcutChanges(update);\n  }, [container, action, value]);\n\n  return shortcut;\n}\n"],"mappings":";;;;;AAOA,SAAgB,kBAAkB,QAA4B,OAAmD;CAC/G,MAAM,YAAY,aAAa;CAE/B,MAAM,CAAC,UAAU,eAAe,SAAgC,CAAC,CAAC;CAElE,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ;GACzB,YAAY,CAAC,CAAC;GACd;EACF;EAEA,MAAM,cAAc,qBAAqB,SAAS;EAClD,MAAM,eAAe,YAAY,YAAY,YAAY,QAAQ,KAAK,CAAC;EAEvE,OAAO;EACP,OAAO,YAAY,yBAAyB,MAAM;CACpD,GAAG;EAAC;EAAW;EAAQ;CAAK,CAAC;CAE7B,OAAO;AACT"}

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

@@ -1 +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]);\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;EAAS,CAAC"}
+{"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]);\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,UAAU,SAAiC;CACzD,MAAM,EAAE,MAAM,SAAS,UAAU,aAAa,MAAM,WAAW,UAAU;CACzE,MAAM,YAAY,aAAa;CAC/B,MAAM,gBAAgB,aAAa,QAAQ,UAAU;CAErD,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,UAAU;EAErC,OAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA,aAAa,OAAO,QAAQ,cAAc,QAAQ,OAAO,GAAG;EAC9D,CAAC;CACH,GAAG;EAAC;EAAW;EAAM;EAAQ;EAAY;CAAQ,CAAC;AACpD"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-indicator-visibility.js","names":[],"sources":["../../../../src/ui/input-indicators/use-indicator-visibility.ts"],"sourcesContent":["'use client';\n\nimport type { IndicatorVisibilityHandle } from '@videojs/core';\nimport { getIndicatorVisibilityCoordinator } from '@videojs/core/dom';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useIndicatorVisibility(close: () => void): () => void {\n  const container = useContainer();\n  const closeRef = useLatestRef(close);\n  const coordinatorRef = useRef<ReturnType<typeof getIndicatorVisibilityCoordinator> | null>(null);\n  const [handle] = useState<IndicatorVisibilityHandle>(() => ({\n    close: () => closeRef.current(),\n  }));\n\n  useEffect(() => {\n    if (!container) return;\n\n    const coordinator = getIndicatorVisibilityCoordinator(container);\n    coordinatorRef.current = coordinator;\n\n    return coordinator.register(handle);\n  }, [container, handle]);\n\n  return useCallback(() => {\n    coordinatorRef.current?.show(handle);\n  }, [handle]);\n}\n"],"mappings":";;;;;;AASA,SAAgB,uBAAuB,OAA+B;CACpE,MAAM,YAAY,cAAc;CAChC,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,iBAAiB,OAAoE,KAAK;CAChG,MAAM,CAAC,UAAU,gBAA2C,EAC1D,aAAa,SAAS,SAAS,EAChC,EAAE;AAEH,iBAAgB;AACd,MAAI,CAAC,UAAW;EAEhB,MAAM,cAAc,kCAAkC,UAAU;AAChE,iBAAe,UAAU;AAEzB,SAAO,YAAY,SAAS,OAAO;IAClC,CAAC,WAAW,OAAO,CAAC;AAEvB,QAAO,kBAAkB;AACvB,iBAAe,SAAS,KAAK,OAAO;IACnC,CAAC,OAAO,CAAC"}
+{"version":3,"file":"use-indicator-visibility.js","names":[],"sources":["../../../../src/ui/input-indicators/use-indicator-visibility.ts"],"sourcesContent":["'use client';\n\nimport type { IndicatorVisibilityHandle } from '@videojs/core';\nimport { getIndicatorVisibilityCoordinator } from '@videojs/core/dom';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useIndicatorVisibility(close: () => void): () => void {\n  const container = useContainer();\n  const closeRef = useLatestRef(close);\n  const coordinatorRef = useRef<ReturnType<typeof getIndicatorVisibilityCoordinator> | null>(null);\n  const [handle] = useState<IndicatorVisibilityHandle>(() => ({\n    close: () => closeRef.current(),\n  }));\n\n  useEffect(() => {\n    if (!container) return;\n\n    const coordinator = getIndicatorVisibilityCoordinator(container);\n    coordinatorRef.current = coordinator;\n\n    return coordinator.register(handle);\n  }, [container, handle]);\n\n  return useCallback(() => {\n    coordinatorRef.current?.show(handle);\n  }, [handle]);\n}\n"],"mappings":";;;;;;AASA,SAAgB,uBAAuB,OAA+B;CACpE,MAAM,YAAY,aAAa;CAC/B,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,iBAAiB,OAAoE,IAAI;CAC/F,MAAM,CAAC,UAAU,gBAA2C,EAC1D,aAAa,SAAS,QAAQ,EAChC,EAAE;CAEF,gBAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,MAAM,cAAc,kCAAkC,SAAS;EAC/D,eAAe,UAAU;EAEzB,OAAO,YAAY,SAAS,MAAM;CACpC,GAAG,CAAC,WAAW,MAAM,CAAC;CAEtB,OAAO,kBAAkB;EACvB,eAAe,SAAS,KAAK,MAAM;CACrC,GAAG,CAAC,MAAM,CAAC;AACb"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-input-action-subscription.js","names":[],"sources":["../../../../src/ui/input-indicators/use-input-action-subscription.ts"],"sourcesContent":["'use client';\n\nimport type { InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport { getMediaSnapshot, subscribeToInputActions } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useInputActionSubscription(callback: (event: InputActionEvent, snapshot: MediaSnapshot) => void): void {\n  const container = useContainer();\n  const store = usePlayer();\n  const callbackRef = useLatestRef(callback);\n  const storeRef = useLatestRef(store);\n\n  useEffect(() => {\n    if (!container) return;\n\n    return subscribeToInputActions(container, (event) => {\n      callbackRef.current(event, getMediaSnapshot(storeRef.current));\n    });\n  }, [container]);\n}\n"],"mappings":";;;;;;AASA,SAAgB,2BAA2B,UAA4E;CACrH,MAAM,YAAY,cAAc;CAChC,MAAM,QAAQ,WAAW;CACzB,MAAM,cAAc,aAAa,SAAS;CAC1C,MAAM,WAAW,aAAa,MAAM;AAEpC,iBAAgB;AACd,MAAI,CAAC,UAAW;AAEhB,SAAO,wBAAwB,YAAY,UAAU;AACnD,eAAY,QAAQ,OAAO,iBAAiB,SAAS,QAAQ,CAAC;IAC9D;IACD,CAAC,UAAU,CAAC"}
+{"version":3,"file":"use-input-action-subscription.js","names":[],"sources":["../../../../src/ui/input-indicators/use-input-action-subscription.ts"],"sourcesContent":["'use client';\n\nimport type { InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport { getMediaSnapshot, subscribeToInputActions } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useInputActionSubscription(callback: (event: InputActionEvent, snapshot: MediaSnapshot) => void): void {\n  const container = useContainer();\n  const store = usePlayer();\n  const callbackRef = useLatestRef(callback);\n  const storeRef = useLatestRef(store);\n\n  useEffect(() => {\n    if (!container) return;\n\n    return subscribeToInputActions(container, (event) => {\n      callbackRef.current(event, getMediaSnapshot(storeRef.current));\n    });\n  }, [container]);\n}\n"],"mappings":";;;;;;AASA,SAAgB,2BAA2B,UAA4E;CACrH,MAAM,YAAY,aAAa;CAC/B,MAAM,QAAQ,UAAU;CACxB,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,WAAW,aAAa,KAAK;CAEnC,gBAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,OAAO,wBAAwB,YAAY,UAAU;GACnD,YAAY,QAAQ,OAAO,iBAAiB,SAAS,OAAO,CAAC;EAC/D,CAAC;CACH,GAAG,CAAC,SAAS,CAAC;AAChB"}

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

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

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

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