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

package/dist/default/tailwind.css

@@ -0,0 +1,42 @@
+/* -------------------------------------------------------------------------- */
+/* Supporting @keyframes, @properties and @theme for Tailwind CSS             */
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------------------------------------------------------- */
+/* Global @keyframes for all video skins (CSS & Tailwind)                     */
+/* -------------------------------------------------------------------------- */
+
+@keyframes media-shake {
+  0%,
+  100% {
+    translate: 0 0;
+  }
+  20% {
+    translate: -6px 0;
+  }
+  40% {
+    translate: 4px 0;
+  }
+  60% {
+    translate: -2px 0;
+  }
+  80% {
+    translate: 1px 0;
+  }
+}
+
+/* -------------------------------------------------------------------------- */
+/* Global @properties for all video skins (CSS & Tailwind)                    */
+/* -------------------------------------------------------------------------- */
+
+@property --media-progress-fill {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
+
+
+@theme {
+  --animate-media-shake: media-shake 300ms ease-in-out;
+}
+

package/dist/default/ui/airplay-button/airplay-button.js

@@ -0,0 +1,17 @@
+"use client";
+import { createMediaButton } from "../create-media-button.js";
+import { selectRemotePlayback } from "@videojs/core/dom";
+import { AirPlayButtonCore, AirPlayButtonDataAttrs } from "@videojs/core";
+//#region src/ui/airplay-button/airplay-button.tsx
+/** A button that toggles AirPlay to a remote device. */
+const AirPlayButton = createMediaButton({
+	displayName: "AirPlayButton",
+	core: AirPlayButtonCore,
+	stateAttrMap: AirPlayButtonDataAttrs,
+	selector: selectRemotePlayback,
+	action: (core, state) => core.toggle(state)
+});
+//#endregion
+export { AirPlayButton };
+
+//# sourceMappingURL=airplay-button.js.map

package/dist/default/ui/airplay-button/airplay-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"airplay-button.js","names":[],"sources":["../../../../src/ui/airplay-button/airplay-button.tsx"],"sourcesContent":["'use client';\n\nimport { AirPlayButtonCore, AirPlayButtonDataAttrs } from '@videojs/core';\nimport { selectRemotePlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface AirPlayButtonProps\n  extends UIComponentProps<'button', AirPlayButtonCore.State>,\n    AirPlayButtonCore.Props {}\n\n/** A button that toggles AirPlay to a remote device. */\nexport const AirPlayButton = createMediaButton<AirPlayButtonCore, AirPlayButtonProps>({\n  displayName: 'AirPlayButton',\n  core: AirPlayButtonCore,\n  stateAttrMap: AirPlayButtonDataAttrs,\n  selector: selectRemotePlayback,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace AirPlayButton {\n  export type Props = AirPlayButtonProps;\n  export type State = AirPlayButtonCore.State;\n}\n"],"mappings":";;;;;;AAaA,MAAa,gBAAgB,kBAAyD;CACpF,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}

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

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

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

@@ -1,6 +1,6 @@
 "use client";
-import { useAlertDialogContext } from "./context.js";
 import { renderElement } from "../../utils/use-render.js";
+import { useAlertDialogContext } from "./context.js";
 import { forwardRef, useCallback } from "react";
 //#region src/ui/alert-dialog/alert-dialog-close.tsx
 const AlertDialogClose = forwardRef(function AlertDialogClose({ render, className, style, disabled, ...elementProps }, forwardedRef) {

package/dist/default/ui/alert-dialog/alert-dialog-popup.js

@@ -1,7 +1,7 @@
 "use client";
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
-import { useAlertDialogContext } from "./context.js";
 import { renderElement } from "../../utils/use-render.js";
+import { useAlertDialogContext } from "./context.js";
 import { forwardRef, useCallback } from "react";
 //#region src/ui/alert-dialog/alert-dialog-popup.tsx
 const AlertDialogPopup = forwardRef(function AlertDialogPopup({ render, className, style, ...elementProps }, forwardedRef) {

package/dist/default/ui/audio-track/index.js

@@ -0,0 +1,2 @@
+import { useAudioTrackOptions } from "./use-audio-track-options.js";
+export { useAudioTrackOptions };

package/dist/default/ui/audio-track/use-audio-track-options.js

@@ -0,0 +1,31 @@
+"use client";
+import { usePlayer } from "../../player/context.js";
+import { selectAudioTrack } from "@videojs/core/dom";
+import { useCallback, useState } from "react";
+import { AudioTrackRadioGroupCore } from "@videojs/core";
+//#region src/ui/audio-track/use-audio-track-options.ts
+function useAudioTrackOptions(props) {
+	"use no memo";
+	const media = usePlayer(selectAudioTrack);
+	const [core] = useState(() => new AudioTrackRadioGroupCore());
+	core.setProps(props ?? {});
+	const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
+	if (!media) return null;
+	core.setMedia(media);
+	const state = core.getState();
+	return {
+		state,
+		value: state.value,
+		options: state.tracks.map((track) => ({
+			value: track.value,
+			label: track.label,
+			disabled: state.disabled
+		})),
+		disabled: state.disabled,
+		setValue
+	};
+}
+//#endregion
+export { useAudioTrackOptions };
+
+//# sourceMappingURL=use-audio-track-options.js.map

package/dist/default/ui/audio-track/use-audio-track-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-audio-track-options.js","names":[],"sources":["../../../../src/ui/audio-track/use-audio-track-options.ts"],"sourcesContent":["'use client';\n\nimport { AudioTrackRadioGroupCore } from '@videojs/core';\nimport { logMissingFeature, selectAudioTrack } from '@videojs/core/dom';\nimport { useCallback, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\n\nexport interface AudioTrackOptionsProps extends AudioTrackRadioGroupCore.Props {}\n\nexport interface AudioTrackOption {\n  value: string;\n  label: string;\n  disabled: boolean;\n}\n\nexport interface AudioTrackOptionsResult {\n  state: AudioTrackRadioGroupCore.State;\n  value: string;\n  options: AudioTrackOption[];\n  disabled: boolean;\n  setValue: (value: string) => void;\n}\n\nexport function useAudioTrackOptions(props?: AudioTrackOptionsProps): AudioTrackOptionsResult | null {\n  'use no memo';\n\n  const media = usePlayer(selectAudioTrack);\n  const [core] = useState(() => new AudioTrackRadioGroupCore());\n\n  core.setProps(props ?? {});\n\n  const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n  if (!media) {\n    if (__DEV__) logMissingFeature('useAudioTrackOptions', selectAudioTrack.displayName ?? 'audioTrack');\n    return null;\n  }\n\n  core.setMedia(media);\n  const state = core.getState();\n\n  return {\n    state,\n    value: state.value,\n    options: state.tracks.map((track) => ({\n      value: track.value,\n      label: track.label,\n      disabled: state.disabled,\n    })),\n    disabled: state.disabled,\n    setValue,\n  };\n}\n\nexport namespace useAudioTrackOptions {\n  export type Props = AudioTrackOptionsProps;\n  export type Result = AudioTrackOptionsResult;\n  export type Option = AudioTrackOption;\n}\n"],"mappings":";;;;;;AAwBA,SAAgB,qBAAqB,OAAgE;AACnG;CAEA,MAAM,QAAQ,UAAU,iBAAiB;CACzC,MAAM,CAAC,QAAQ,eAAe,IAAI,0BAA0B,CAAC;AAE7D,MAAK,SAAS,SAAS,EAAE,CAAC;CAE1B,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,MAAM,EAAE,CAAC,MAAM,MAAM,CAAC;AAE/F,KAAI,CAAC,MAEH,QAAO;AAGT,MAAK,SAAS,MAAM;CACpB,MAAM,QAAQ,KAAK,UAAU;AAE7B,QAAO;EACL;EACA,OAAO,MAAM;EACb,SAAS,MAAM,OAAO,KAAK,WAAW;GACpC,OAAO,MAAM;GACb,OAAO,MAAM;GACb,UAAU,MAAM;GACjB,EAAE;EACH,UAAU,MAAM;EAChB;EACD"}

package/dist/default/ui/captions-radio-group/index.js

@@ -0,0 +1,2 @@
+import { useCaptionsOptions } from "./use-captions-options.js";
+export { useCaptionsOptions };

package/dist/default/ui/captions-radio-group/use-captions-options.js

@@ -0,0 +1,37 @@
+"use client";
+import { usePlayer } from "../../player/context.js";
+import { selectTextTrack } from "@videojs/core/dom";
+import { useCallback, useState } from "react";
+import { CAPTIONS_OFF_VALUE, CaptionsRadioGroupCore } from "@videojs/core";
+//#region src/ui/captions-radio-group/use-captions-options.ts
+function useCaptionsOptions(props) {
+	"use no memo";
+	const media = usePlayer(selectTextTrack);
+	const [core] = useState(() => new CaptionsRadioGroupCore());
+	core.setProps(props ?? {});
+	const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
+	if (!media) return null;
+	core.setMedia(media);
+	const state = core.getState();
+	const showMenu = state.tracks.length > 1;
+	return {
+		state,
+		value: state.value,
+		options: [{
+			value: CAPTIONS_OFF_VALUE,
+			label: "Off",
+			disabled: state.disabled
+		}, ...state.tracks.map((track) => ({
+			value: track.value,
+			label: track.label,
+			disabled: state.disabled
+		}))],
+		disabled: state.disabled,
+		showMenu,
+		setValue
+	};
+}
+//#endregion
+export { useCaptionsOptions };
+
+//# sourceMappingURL=use-captions-options.js.map

package/dist/default/ui/captions-radio-group/use-captions-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-captions-options.js","names":[],"sources":["../../../../src/ui/captions-radio-group/use-captions-options.ts"],"sourcesContent":["'use client';\n\nimport { CAPTIONS_OFF_VALUE, CaptionsRadioGroupCore } from '@videojs/core';\nimport { logMissingFeature, selectTextTrack } from '@videojs/core/dom';\nimport { useCallback, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\n\nexport interface CaptionsOptionsProps extends CaptionsRadioGroupCore.Props {}\n\nexport interface CaptionsOption {\n  value: string;\n  label: string;\n  disabled: boolean;\n}\n\nexport interface CaptionsOptionsResult {\n  state: CaptionsRadioGroupCore.State;\n  value: string;\n  options: CaptionsOption[];\n  disabled: boolean;\n  showMenu: boolean;\n  setValue: (value: string) => void;\n}\n\nexport function useCaptionsOptions(props?: CaptionsOptionsProps): CaptionsOptionsResult | null {\n  'use no memo';\n\n  const media = usePlayer(selectTextTrack);\n  const [core] = useState(() => new CaptionsRadioGroupCore());\n\n  core.setProps(props ?? {});\n\n  const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n  if (!media) {\n    if (__DEV__) logMissingFeature('useCaptionsOptions', selectTextTrack.displayName ?? 'textTrack');\n    return null;\n  }\n\n  core.setMedia(media);\n  const state = core.getState();\n  const showMenu = state.tracks.length > 1;\n\n  return {\n    state,\n    value: state.value,\n    options: [\n      {\n        value: CAPTIONS_OFF_VALUE,\n        label: 'Off',\n        disabled: state.disabled,\n      },\n      ...state.tracks.map((track) => ({\n        value: track.value,\n        label: track.label,\n        disabled: state.disabled,\n      })),\n    ],\n    disabled: state.disabled,\n    showMenu,\n    setValue,\n  };\n}\n\nexport namespace useCaptionsOptions {\n  export type Props = CaptionsOptionsProps;\n  export type Result = CaptionsOptionsResult;\n  export type Option = CaptionsOption;\n}\n"],"mappings":";;;;;;AAyBA,SAAgB,mBAAmB,OAA4D;AAC7F;CAEA,MAAM,QAAQ,UAAU,gBAAgB;CACxC,MAAM,CAAC,QAAQ,eAAe,IAAI,wBAAwB,CAAC;AAE3D,MAAK,SAAS,SAAS,EAAE,CAAC;CAE1B,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,MAAM,EAAE,CAAC,MAAM,MAAM,CAAC;AAE/F,KAAI,CAAC,MAEH,QAAO;AAGT,MAAK,SAAS,MAAM;CACpB,MAAM,QAAQ,KAAK,UAAU;CAC7B,MAAM,WAAW,MAAM,OAAO,SAAS;AAEvC,QAAO;EACL;EACA,OAAO,MAAM;EACb,SAAS,CACP;GACE,OAAO;GACP,OAAO;GACP,UAAU,MAAM;GACjB,EACD,GAAG,MAAM,OAAO,KAAK,WAAW;GAC9B,OAAO,MAAM;GACb,OAAO,MAAM;GACb,UAAU,MAAM;GACjB,EAAE,CACJ;EACD,UAAU,MAAM;EAChB;EACA;EACD"}

package/dist/default/ui/controls/context.js

@@ -8,7 +8,10 @@ function useControlsContext() {
 	if (!ctx) throw new Error("Controls compound components must be used within a Controls.Root");
 	return ctx;
 }
+function useOptionalControlsContext() {
+	return useContext(ControlsContext);
+}
 //#endregion
-export { ControlsContextProvider, useControlsContext };
+export { ControlsContextProvider, useControlsContext, useOptionalControlsContext };
 
 //# sourceMappingURL=context.js.map

package/dist/default/ui/controls/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/controls/context.tsx"],"sourcesContent":["'use client';\n\nimport type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst ControlsContext = createContext<ControlsContextValue | null>(null);\n\nexport const ControlsContextProvider = ControlsContext.Provider;\n\nexport function useControlsContext(): ControlsContextValue {\n  const ctx = useContext(ControlsContext);\n  if (!ctx) throw new Error('Controls compound components must be used within a Controls.Root');\n  return ctx;\n}\n"],"mappings":";;;AAUA,MAAM,kBAAkB,cAA2C,KAAK;AAExE,MAAa,0BAA0B,gBAAgB;AAEvD,SAAgB,qBAA2C;CACzD,MAAM,MAAM,WAAW,gBAAgB;AACvC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,mEAAmE;AAC7F,QAAO"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/controls/context.tsx"],"sourcesContent":["'use client';\n\nimport type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst ControlsContext = createContext<ControlsContextValue | null>(null);\n\nexport const ControlsContextProvider = ControlsContext.Provider;\n\nexport function useControlsContext(): ControlsContextValue {\n  const ctx = useContext(ControlsContext);\n  if (!ctx) throw new Error('Controls compound components must be used within a Controls.Root');\n  return ctx;\n}\n\nexport function useOptionalControlsContext(): ControlsContextValue | null {\n  return useContext(ControlsContext);\n}\n"],"mappings":";;;AAUA,MAAM,kBAAkB,cAA2C,KAAK;AAExE,MAAa,0BAA0B,gBAAgB;AAEvD,SAAgB,qBAA2C;CACzD,MAAM,MAAM,WAAW,gBAAgB;AACvC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,mEAAmE;AAC7F,QAAO;;AAGT,SAAgB,6BAA0D;AACxE,QAAO,WAAW,gBAAgB"}

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

@@ -2,14 +2,16 @@
 import { usePlayer } from "../player/context.js";
 import { renderElement } from "../utils/use-render.js";
 import { useButton } from "./hooks/use-button.js";
-import { useAriaKeyShortcuts } from "./hotkey/use-aria-key-shortcuts.js";
+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 { forwardRef, useLayoutEffect, useState } from "react";
+import { isUndefined } from "@videojs/utils/predicate";
 //#region src/ui/create-media-button.tsx
 /** Creates a media button React component from a core class and config. */
 function createMediaButton(config) {
-	const { displayName, core: CoreClass, stateAttrMap, selector, action, hotkeyAction } = config;
+	const { displayName, core: CoreClass, stateAttrMap, selector, action, hotkeyAction, hotkeyValue, tooltipLabel } = config;
 	const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));
 	const Component = forwardRef(function MediaButton(componentProps, forwardedRef) {
 		const { render, className, style, ...rest } = componentProps;
@@ -18,9 +20,12 @@ function createMediaButton(config) {
 		for (const key of Object.keys(rest)) if (corePropKeys.has(key)) coreProps[key] = rest[key];
 		else elementProps[key] = rest[key];
 		const tooltipCtx = useOptionalTooltipContext();
+		const menuTriggerChild = useOptionalMenuTriggerChildContext();
+		const setTooltipContent = tooltipCtx?.setContent;
 		const feature = usePlayer(selector);
-		const shortcuts = useAriaKeyShortcuts(hotkeyAction);
+		const shortcut = useHotkeyShortcut(hotkeyAction, hotkeyValue?.(coreProps));
 		const [core] = useState(() => new CoreClass());
+		if (corePropKeys.has("menuTrigger") && isUndefined(coreProps.menuTrigger)) coreProps.menuTrigger = menuTriggerChild;
 		core.setProps(coreProps);
 		const { getButtonProps, buttonRef } = useButton({
 			displayName,
@@ -30,15 +35,23 @@ function createMediaButton(config) {
 		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;
 		useLayoutEffect(() => {
-			if (!tooltipCtx) return;
-			tooltipCtx.setContent(label);
-			return () => tooltipCtx.setContent(void 0);
-		}, [tooltipCtx, label]);
+			if (!setTooltipContent) return;
+			setTooltipContent(tooltipText ? {
+				label: tooltipText,
+				shortcut: shortcut.shortcut
+			} : void 0);
+			return () => setTooltipContent(void 0);
+		}, [
+			setTooltipContent,
+			tooltipText,
+			shortcut.shortcut
+		]);
 		if (!feature || !state) return null;
 		const attrs = {
 			...core.getAttrs(state),
-			"aria-keyshortcuts": shortcuts
+			"aria-keyshortcuts": shortcut.aria
 		};
 		return renderElement("button", {
 			render,
@@ -49,9 +62,9 @@ function createMediaButton(config) {
 			stateAttrMap,
 			ref: [forwardedRef, buttonRef],
 			props: [
-				attrs,
+				getButtonProps(),
 				elementProps,
-				getButtonProps()
+				attrs
 			]
 		});
 	});

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 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 { useAriaKeyShortcuts } from './hotkey/use-aria-key-shortcuts';\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}\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 { displayName, core: CoreClass, stateAttrMap, selector, action, hotkeyAction } = 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 feature = usePlayer(selector);\n    const shortcuts = useAriaKeyShortcuts(hotkeyAction);\n\n    const [core] = useState(() => new CoreClass());\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\n    // Forward label to tooltip popup content when inside a Tooltip.Root.\n    useLayoutEffect(() => {\n      if (!tooltipCtx) return;\n      tooltipCtx.setContent(label);\n      return () => tooltipCtx.setContent(undefined);\n    }, [tooltipCtx, label]);\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': shortcuts };\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: [attrs, elementProps, getButtonProps()],\n      }\n    );\n  });\n\n  Component.displayName = displayName;\n\n  return Component as unknown as ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>;\n}\n"],"mappings":";;;;;;;;;;AAyBA,SAAgB,kBACd,QACqE;CACrE,MAAM,EAAE,aAAa,MAAM,WAAW,cAAc,UAAU,QAAQ,iBAAiB;CAGvF,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,UAAU,UAAU,SAAS;EACnC,MAAM,YAAY,oBAAoB,aAAa;EAEnD,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;AAC9C,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;AAG7C,wBAAsB;AACpB,OAAI,CAAC,WAAY;AACjB,cAAW,WAAW,MAAM;AAC5B,gBAAa,WAAW,WAAW,KAAA,EAAU;KAC5C,CAAC,YAAY,MAAM,CAAC;AAEvB,MAAI,CAAC,WAAW,CAAC,MAEf,QAAO;EAGT,MAAM,QAAQ;GAAE,GAAG,KAAK,SAAS,MAAM;GAAE,qBAAqB;GAAW;AAEzE,SAAO,cACL,UACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA;GACA,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO;IAAC;IAAO;IAAc,gBAAgB;IAAC;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 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"}

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

@@ -1,6 +1,6 @@
 "use client";
-import { useAlertDialogContext } from "../alert-dialog/context.js";
 import { renderElement } from "../../utils/use-render.js";
+import { useAlertDialogContext } from "../alert-dialog/context.js";
 import { useErrorDialogContext } from "./context.js";
 import { forwardRef } from "react";
 //#region src/ui/error-dialog/error-dialog-description.tsx

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

@@ -20,7 +20,8 @@ function Gesture({ type, action, value, pointer, region, disabled }) {
 		const options = {
 			pointer,
 			region,
-			action
+			action,
+			value
 		};
 		if (type === "doubletap") return createDoubleTapGesture(container, onActivate, options);
 		return createTapGesture(container, onActivate, options);

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 };\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;AAE3C,MAAI,SAAS,YACX,QAAO,uBAAuB,WAAW,YAAY,QAAQ;AAG/D,SAAO,iBAAiB,WAAW,YAAY,QAAQ;IACtD;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAS;EAAQ;EAAS,CAAC;AAEtE,QAAO;;;AAWT,MAAa,eAAe"}
+{"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"}

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

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

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

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

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

@@ -13,6 +13,7 @@ function Hotkey({ keys, action, value, disabled, target }) {
 		return createHotkey(container, {
 			keys,
 			action,
+			value,
 			target,
 			disabled,
 			repeatable: !isHotkeyToggleAction(action),

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      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,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 {\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"}

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

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

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

@@ -0,0 +1,28 @@
+"use client";
+import { useContainer } from "../../player/context.js";
+import { getHotkeyCoordinator } from "@videojs/core/dom";
+import { useEffect, useState } from "react";
+//#region src/ui/hotkey/use-hotkey-shortcut.ts
+function useHotkeyShortcut(action, value) {
+	const container = useContainer();
+	const [shortcut, setShortcut] = useState({});
+	useEffect(() => {
+		if (!container || !action) {
+			setShortcut({});
+			return;
+		}
+		const coordinator = getHotkeyCoordinator(container);
+		const update = () => setShortcut(coordinator.getShortcut(action, value));
+		update();
+		return coordinator.subscribeShortcutChanges(update);
+	}, [
+		container,
+		action,
+		value
+	]);
+	return shortcut;
+}
+//#endregion
+export { useHotkeyShortcut };
+
+//# sourceMappingURL=use-hotkey-shortcut.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-hotkey-shortcut.js","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey-shortcut.ts"],"sourcesContent":["'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"}

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

@@ -22,8 +22,7 @@ function useHotkey(options) {
 		keys,
 		target,
 		repeatable,
-		disabled,
-		onActivateRef
+		disabled
 	]);
 }
 //#endregion

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, onActivateRef]);\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,UAAU,SAAiC;CACzD,MAAM,EAAE,MAAM,SAAS,UAAU,aAAa,MAAM,WAAW,UAAU;CACzE,MAAM,YAAY,cAAc;CAChC,MAAM,gBAAgB,aAAa,QAAQ,WAAW;AAEtD,iBAAgB;AACd,MAAI,CAAC,aAAa,CAAC,QAAQ,SAAU;AAErC,SAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA,aAAa,OAAO,QAAQ,cAAc,QAAQ,OAAO,IAAI;GAC9D,CAAC;IACD;EAAC;EAAW;EAAM;EAAQ;EAAY;EAAU;EAAc,CAAC"}
+{"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"}

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

@@ -0,0 +1,25 @@
+"use client";
+import { useContainer } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { getIndicatorVisibilityCoordinator } from "@videojs/core/dom";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/ui/input-indicators/use-indicator-visibility.ts
+function useIndicatorVisibility(close) {
+	const container = useContainer();
+	const closeRef = useLatestRef(close);
+	const coordinatorRef = useRef(null);
+	const [handle] = useState(() => ({ close: () => closeRef.current() }));
+	useEffect(() => {
+		if (!container) return;
+		const coordinator = getIndicatorVisibilityCoordinator(container);
+		coordinatorRef.current = coordinator;
+		return coordinator.register(handle);
+	}, [container, handle]);
+	return useCallback(() => {
+		coordinatorRef.current?.show(handle);
+	}, [handle]);
+}
+//#endregion
+export { useIndicatorVisibility };
+
+//# sourceMappingURL=use-indicator-visibility.js.map

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

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

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

@@ -0,0 +1,22 @@
+"use client";
+import { useContainer, usePlayer } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { getMediaSnapshot, subscribeToInputActions } from "@videojs/core/dom";
+import { useEffect } from "react";
+//#region src/ui/input-indicators/use-input-action-subscription.ts
+function useInputActionSubscription(callback) {
+	const container = useContainer();
+	const store = usePlayer();
+	const callbackRef = useLatestRef(callback);
+	const storeRef = useLatestRef(store);
+	useEffect(() => {
+		if (!container) return;
+		return subscribeToInputActions(container, (event) => {
+			callbackRef.current(event, getMediaSnapshot(storeRef.current));
+		});
+	}, [container]);
+}
+//#endregion
+export { useInputActionSubscription };
+
+//# sourceMappingURL=use-input-action-subscription.js.map

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

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

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

@@ -0,0 +1,21 @@
+"use client";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { useIndicatorVisibility } from "./use-indicator-visibility.js";
+import { useInputActionSubscription } from "./use-input-action-subscription.js";
+import { useRenderedIndicatorState } from "./use-rendered-indicator-state.js";
+import { useState, useSyncExternalStore } from "react";
+//#region src/ui/input-indicators/use-input-indicator-root.ts
+function useInputIndicatorRoot(createCore, props, options) {
+	const [core] = useState(createCore);
+	useDestroy(core);
+	core.setProps(props);
+	const showIndicator = useIndicatorVisibility(() => core.close());
+	useInputActionSubscription((event, snapshot) => {
+		if (core.processEvent(event, snapshot)) showIndicator();
+	});
+	return useRenderedIndicatorState(useSyncExternalStore((callback) => core.state.subscribe(callback), () => core.state.current, () => core.state.current), options);
+}
+//#endregion
+export { useInputIndicatorRoot };
+
+//# sourceMappingURL=use-input-indicator-root.js.map

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

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

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

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

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

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

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

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