npm - @videojs/react - Versions diffs - 10.0.0-beta.26 → 10.0.0-beta.28 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1415) hide show

package/dist/dev/ui/controls/controls-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"controls-root.js","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { ControlsContextProvider } from './context';\n\nexport interface ControlsRootProps extends UIComponentProps<'div', ControlsCore.State> {\n children?: ReactNode \| undefined;\n}\n\n/** Root container for player controls state and rendered control content. */\nexport const ControlsRoot = forwardRef(function ControlsRoot(\n componentProps: ControlsRootProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, children, ...elementProps } = componentProps;\n\n const controls = usePlayer(selectControls);\n\n const [core] = useState(() => new ControlsCore());\n\n if (!controls) {\n if (__DEV__) logMissingFeature('Controls.Root', 'controls');\n return null;\n }\n\n core.setMedia(controls);\n const state = core.getState();\n\n return (\n <ControlsContextProvider value={{ state, stateAttrMap: ControlsDataAttrs }}>\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: ControlsDataAttrs,\n ref: [forwardedRef],\n props: [{ children }, elementProps, { 'data-interactive': '' }],\n }\n )}\n </ControlsContextProvider>\n );\n});\n\nexport namespace ControlsRoot {\n export type Props = ControlsRootProps;\n export type State = ControlsCore.State;\n}\n"],"mappings":"~~;;;;;;;;;;AAiBA~~,MAAa,eAAe,WAAW,SAAS,aAC9C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,aAAa,CAAC;CAEhD,IAAI,CAAC,UAAU;EACA,kBAAkB,iBAAiB,UAAU;EAC1D,OAAO;CACT;CAEA,KAAK,SAAS,QAAQ;CACtB,MAAM,QAAQ,KAAK,SAAS;CAE5B,OACE,oBAAC,yBAAD;EAAyB,OAAO;GAAE;GAAO,cAAc;EAAkB;EACtE,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,YAAY;GAClB,OAAO;IAAC,EAAE,SAAS;IAAG;IAAc,EAAE,oBAAoB,GAAG;GAAC;EAChE,CACF;CACuB,CAAA;AAE7B,CAAC"}
1	+ {"version":3,"file":"controls-root.js","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { ControlsContextProvider } from './context';\n\nexport interface ControlsRootProps extends UIComponentProps<'div', ControlsCore.State> {\n children?: ReactNode \| undefined;\n}\n\n/** Root container for player controls state and rendered control content. */\nexport const ControlsRoot = forwardRef(function ControlsRoot(\n componentProps: ControlsRootProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, children, ...elementProps } = componentProps;\n\n const controls = usePlayer(selectControls);\n\n const [core] = useState(() => new ControlsCore());\n\n if (!controls) {\n if (__DEV__) logMissingFeature('Controls.Root', 'controls');\n return null;\n }\n\n core.setMedia(controls);\n const state = core.getState();\n\n return (\n <ControlsContextProvider value={{ state, stateAttrMap: ControlsDataAttrs }}>\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: ControlsDataAttrs,\n ref: [forwardedRef],\n props: [{ children }, elementProps, { 'data-interactive': '' }],\n }\n )}\n </ControlsContextProvider>\n );\n});\n\nexport namespace ControlsRoot {\n export type Props = ControlsRootProps;\n export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;;AAeA,MAAa,eAAe,WAAW,SAAS,aAC9C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,aAAa,CAAC;CAEhD,IAAI,CAAC,UAAU;EACA,kBAAkB,iBAAiB,UAAU;EAC1D,OAAO;CACT;CAEA,KAAK,SAAS,QAAQ;CACtB,MAAM,QAAQ,KAAK,SAAS;CAE5B,OACE,oBAAC,yBAAD;EAAyB,OAAO;GAAE;GAAO,cAAc;EAAkB;EACtE,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,YAAY;GAClB,OAAO;IAAC,EAAE,SAAS;IAAG;IAAc,EAAE,oBAAoB,GAAG;GAAC;EAChE,CACF;CACuB,CAAA;AAE7B,CAAC"}

package/dist/dev/ui/create-context-part.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { renderElement } from "../utils/use-render.js";
 import { forwardRef } from "react";
 //#region src/ui/create-context-part.tsx

package/dist/dev/ui/create-context-part.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"create-context-part.js","names":[],"sources":["../../../src/ui/create-context-part.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ type { StateAttrMap } from '@videojs/core';\nimport type { ForwardRefExoticComponent } from 'react';\nimport { forwardRef } from 'react';\nimport type { UIComponentProps } from '@/utils/types';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\n\ninterface ContextPartConfig<Props extends object, State extends object> {\n displayName: string;\n tag: keyof React.JSX.IntrinsicElements;\n useContext: () => { state: State; stateAttrMap: StateAttrMap<State> };\n staticProps?: Partial<Props>;\n /** Derive props from state on each render (e.g. `id` from a state field). */\n getProps?: (state: State) => Record<string, unknown>;\n}\n\nexport function createContextPart<Props extends UIComponentProps<any, any>, State extends object>(\n config: ContextPartConfig<Props, State>\n): ForwardRefExoticComponent<Props> {\n const { displayName, tag, useContext, staticProps, getProps } = config;\n\n const Component = forwardRef<HTMLElement, Props>(function ContextPart(componentProps, forwardedRef) {\n const { render, className, style, ...elementProps } = componentProps;\n const context = useContext();\n const dynamicProps = getProps?.(context.state);\n\n return renderElement(tag, { render, className, style } as renderElementFn.ComponentProps<State>, {\n state: context.state,\n stateAttrMap: context.stateAttrMap,\n ref: forwardedRef,\n props: [staticProps, dynamicProps, elementProps].filter(Boolean),\n });\n });\n\n Component.displayName = displayName;\n\n return Component as ForwardRefExoticComponent<Props>;\n}\n"],"mappings":"~~;;;;AAkBA~~,SAAgB,kBACd,QACkC;CAClC,MAAM,EAAE,aAAa,KAAK,YAAY,aAAa,aAAa;CAEhE,MAAM,YAAY,WAA+B,SAAS,YAAY,gBAAgB,cAAc;EAClG,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;EACtD,MAAM,UAAU,WAAW;EAC3B,MAAM,eAAe,WAAW,QAAQ,KAAK;EAE7C,OAAO,cAAc,KAAK;GAAE;GAAQ;GAAW;EAAM,GAA4C;GAC/F,OAAO,QAAQ;GACf,cAAc,QAAQ;GACtB,KAAK;GACL,OAAO;IAAC;IAAa;IAAc;GAAY,CAAC,CAAC,OAAO,OAAO;EACjE,CAAC;CACH,CAAC;CAED,UAAU,cAAc;CAExB,OAAO;AACT"}
1	+ {"version":3,"file":"create-context-part.js","names":[],"sources":["../../../src/ui/create-context-part.tsx"],"sourcesContent":["import type { StateAttrMap } from '@videojs/core';\nimport type { ForwardRefExoticComponent } from 'react';\nimport { forwardRef } from 'react';\nimport type { UIComponentProps } from '@/utils/types';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\n\ninterface ContextPartConfig<Props extends object, State extends object> {\n displayName: string;\n tag: keyof React.JSX.IntrinsicElements;\n useContext: () => { state: State; stateAttrMap: StateAttrMap<State> };\n staticProps?: Partial<Props>;\n /** Derive props from state on each render (e.g. `id` from a state field). */\n getProps?: (state: State) => Record<string, unknown>;\n}\n\nexport function createContextPart<Props extends UIComponentProps<any, any>, State extends object>(\n config: ContextPartConfig<Props, State>\n): ForwardRefExoticComponent<Props> {\n const { displayName, tag, useContext, staticProps, getProps } = config;\n\n const Component = forwardRef<HTMLElement, Props>(function ContextPart(componentProps, forwardedRef) {\n const { render, className, style, ...elementProps } = componentProps;\n const context = useContext();\n const dynamicProps = getProps?.(context.state);\n\n return renderElement(tag, { render, className, style } as renderElementFn.ComponentProps<State>, {\n state: context.state,\n stateAttrMap: context.stateAttrMap,\n ref: forwardedRef,\n props: [staticProps, dynamicProps, elementProps].filter(Boolean),\n });\n });\n\n Component.displayName = displayName;\n\n return Component as ForwardRefExoticComponent<Props>;\n}\n"],"mappings":";;;AAgBA,SAAgB,kBACd,QACkC;CAClC,MAAM,EAAE,aAAa,KAAK,YAAY,aAAa,aAAa;CAEhE,MAAM,YAAY,WAA+B,SAAS,YAAY,gBAAgB,cAAc;EAClG,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;EACtD,MAAM,UAAU,WAAW;EAC3B,MAAM,eAAe,WAAW,QAAQ,KAAK;EAE7C,OAAO,cAAc,KAAK;GAAE;GAAQ;GAAW;EAAM,GAA4C;GAC/F,OAAO,QAAQ;GACf,cAAc,QAAQ;GACtB,KAAK;GACL,OAAO;IAAC;IAAa;IAAc;GAAY,CAAC,CAAC,OAAO,OAAO;EACjE,CAAC;CACH,CAAC;CAED,UAAU,cAAc;CAExB,OAAO;AACT"}

package/dist/dev/ui/create-media-button.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { useTranslator } from "../i18n/context.js";
 import { usePlayer } from "../player/context.js";
 import { renderElement } from "../utils/use-render.js";

package/dist/dev/ui/create-media-button.js.map CHANGED Viewed

	@@ -1 +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 { 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;KAC1C,QAAQ,MAAM,IAAI,YAAY,IAAI,KAAK;IACtD,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,OAAO;GACT,kBAAkB,aAAa,SAAS,eAAe,WAAW;GAC/E,OAAO;EACT;EAEA,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"}
1	+ {"version":3,"file":"create-media-button.js","names":[],"sources":["../../../src/ui/create-media-button.tsx"],"sourcesContent":["import 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":";;;;;;;;;;;;AAmCA,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;KAC1C,QAAQ,MAAM,IAAI,YAAY,IAAI,KAAK;IACtD,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,OAAO;GACT,kBAAkB,aAAa,SAAS,eAAe,WAAW;GAC/E,OAAO;EACT;EAEA,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/dev/ui/error-dialog/context.d.ts.map CHANGED Viewed

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

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

@@ -1,4 +1,3 @@
-"use client";
 import { createContext, useContext } from "react";
 //#region src/ui/error-dialog/context.tsx
 const ErrorDialogContext = createContext(null);

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

	@@ -1 +1 @@
1	- {"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"}
1	+ {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/error-dialog/context.tsx"],"sourcesContent":["import type { ErrorLike } from '@videojs/media';\nimport { createContext, useContext } from 'react';\n\nexport interface ErrorDialogContextValue {\n lastError: ErrorLike \| null;\n}\n\nconst ErrorDialogContext = createContext<ErrorDialogContextValue \| null>(null);\n\nexport const ErrorDialogContextProvider = ErrorDialogContext.Provider;\n\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":";;AAOA,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/dev/ui/error-dialog/error-dialog-close.d.ts.map CHANGED Viewed

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

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

@@ -1,4 +1,3 @@
-"use client";
 import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useAlertDialogContext } from "../alert-dialog/context.js";

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"error-dialog-close.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-close.tsx"],"sourcesContent":["import 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":";;;;;;;AAWA,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/dev/ui/error-dialog/error-dialog-description.d.ts.map CHANGED Viewed

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

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

@@ -1,4 +1,3 @@
-"use client";
 import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useAlertDialogContext } from "../alert-dialog/context.js";

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

	@@ -1 +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 { 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"}
1	+ {"version":3,"file":"error-dialog-description.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-description.tsx"],"sourcesContent":["import 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":";;;;;;;;AAYA,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/dev/ui/error-dialog/error-dialog-root.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"error-dialog-root.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"mappings":";;~~UAeiB~~;EACf,WAAW;;iBAGG,kBAAkB,YAAY,uBAAuB;kBAsDpD;OACH,QAAQ"}
1	+ {"version":3,"file":"error-dialog-root.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"mappings":";;UAaiB;EACf,WAAW;;iBAGG,kBAAkB,YAAY,uBAAuB;kBAsDpD;OACH,QAAQ"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { usePlayer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { useDestroy } from "../../utils/use-destroy.js";

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

	@@ -1 +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,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"}
1	+ {"version":3,"file":"error-dialog-root.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"sourcesContent":["import { 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":";;;;;;;;;;;;AAiBA,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/dev/ui/error-dialog/error-dialog-title.d.ts.map CHANGED Viewed

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

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

@@ -1,4 +1,3 @@
-"use client";
 import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useAlertDialogContext } from "../alert-dialog/context.js";

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"error-dialog-title.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-title.tsx"],"sourcesContent":["import 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":";;;;;;;AAWA,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/dev/ui/fullscreen-button/fullscreen-button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fullscreen-button.d.ts","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"mappings":";;;~~UAQiB~~,8BACP,2BAA2B,qBAAqB,QACtD,qBAAqB;;cAGZ,kCAAgB,0BAAA,wCAAA,cAAA;kBAUZ;OACH,QAAQ;OACR,QAAQ,qBAAqB"}
1	+ {"version":3,"file":"fullscreen-button.d.ts","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"mappings":";;;UAMiB,8BACP,2BAA2B,qBAAqB,QACtD,qBAAqB;;cAGZ,kCAAgB,0BAAA,wCAAA,cAAA;kBAUZ;OACH,QAAQ;OACR,QAAQ,qBAAqB"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { selectFullscreen } from "@videojs/core/dom";
 import { FullscreenButtonCore, FullscreenButtonDataAttrs } from "@videojs/core";

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

	@@ -1 +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 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"}
1	+ {"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"sourcesContent":["import { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport { selectFullscreen } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface FullscreenButtonProps\n extends UIComponentProps<'button', FullscreenButtonCore.State>,\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":";;;;;AAWA,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/dev/ui/gesture/gesture.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gesture.d.ts","names":[],"sources":["../../../../src/ui/gesture/gesture.tsx"],"mappings":";;;~~UAgBiB~~;EACf;EACA,QAAQ;EACR;EACA,UAAU;EACV,SAAS;EACT;;iBAGc,UAAU,MAAM,QAAQ,OAAO,SAAS,QAAQ,YAAY,eAAe;kBA0B1E;OACH,QAAQ;;;KAIV,oBAAoB;;cAGnB,qBAAY"}
1	+ {"version":3,"file":"gesture.d.ts","names":[],"sources":["../../../../src/ui/gesture/gesture.tsx"],"mappings":";;;UAciB;EACf;EACA,QAAQ;EACR;EACA,UAAU;EACV,SAAS;EACT;;iBAGc,UAAU,MAAM,QAAQ,OAAO,SAAS,QAAQ,YAAY,eAAe;kBA0B1E;OACH,QAAQ;;;KAIV,oBAAoB;;cAGnB,qBAAY"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { useContainer, usePlayer } from "../../player/context.js";
 import { createDoubleTapGesture, createTapGesture, resolveGestureAction } from "@videojs/core/dom";
 import { useEffect } from "react";

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

	@@ -1 +1 @@
1	- {"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"}
1	+ {"version":3,"file":"gesture.js","names":[],"sources":["../../../../src/ui/gesture/gesture.tsx"],"sourcesContent":["import 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":";;;;AAuBA,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/dev/ui/gesture/use-doubletap-gesture.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-doubletap-gesture.d.ts","names":[],"sources":["../../../../src/ui/gesture/use-doubletap-gesture.ts"],"mappings":";;;~~UASiB~~;EACf,UAAU;EACV,SAAS;EACT;EACA,SAAS,UAAU;;iBAGL,oBACd,aAAa,OAAO,uBACpB,UAAU"}
1	+ {"version":3,"file":"use-doubletap-gesture.d.ts","names":[],"sources":["../../../../src/ui/gesture/use-doubletap-gesture.ts"],"mappings":";;;UAOiB;EACf,UAAU;EACV,SAAS;EACT;EACA,SAAS,UAAU;;iBAGL,oBACd,aAAa,OAAO,uBACpB,UAAU"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { useContainer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createDoubleTapGesture } from "@videojs/core/dom";

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

	@@ -1 +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]);\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"}
1	+ {"version":3,"file":"use-doubletap-gesture.js","names":[],"sources":["../../../../src/ui/gesture/use-doubletap-gesture.ts"],"sourcesContent":["import { 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":";;;;;AAcA,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/dev/ui/gesture/use-tap-gesture.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-tap-gesture.d.ts","names":[],"sources":["../../../../src/ui/gesture/use-tap-gesture.ts"],"mappings":";;;~~UASiB~~;EACf,UAAU;EACV,SAAS;EACT;EACA,SAAS,UAAU;;iBAGL,cAAc,aAAa,OAAO,uBAAuB,UAAU"}
1	+ {"version":3,"file":"use-tap-gesture.d.ts","names":[],"sources":["../../../../src/ui/gesture/use-tap-gesture.ts"],"mappings":";;;UAOiB;EACf,UAAU;EACV,SAAS;EACT;EACA,SAAS,UAAU;;iBAGL,cAAc,aAAa,OAAO,uBAAuB,UAAU"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { useContainer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createTapGesture } from "@videojs/core/dom";

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

	@@ -1 +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]);\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"}
1	+ {"version":3,"file":"use-tap-gesture.js","names":[],"sources":["../../../../src/ui/gesture/use-tap-gesture.ts"],"sourcesContent":["import { 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":";;;;;AAcA,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/dev/ui/hooks/create-radio-options-hook.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { UnknownState } from "@videojs/store";
+import "@videojs/core/i18n";
+import { RadioOption } from "@videojs/core";
+//#region src/ui/hooks/create-radio-options-hook.d.ts
+type TranslatedRadioOption<Option extends RadioOption> = Omit<Option, 'label' | 'labelParams' | 'disabled'> & {
+  label: string;
+  disabled: boolean;
+};
+//#endregion
+export { TranslatedRadioOption };
+//# sourceMappingURL=create-radio-options-hook.d.ts.map

package/dist/dev/ui/hooks/create-radio-options-hook.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"create-radio-options-hook.d.ts","names":[],"sources":["../../../../src/ui/hooks/create-radio-options-hook.ts"],"mappings":";;;;KA2BY,sBAAsB,eAAe,eAAe,KAAK;EACnE;EACA"}

package/dist/dev/ui/hooks/create-radio-options-hook.js ADDED Viewed

@@ -0,0 +1,45 @@
+import { useTranslator } from "../../i18n/context.js";
+import { usePlayer } from "../../player/context.js";
+import { logMissingFeature } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { useCallback, useState } from "react";
+//#region src/ui/hooks/create-radio-options-hook.ts
+/** Creates framework adapter mechanics shared by media-backed radio option hooks. */
+function createRadioOptionsHook({ name, feature, selector, createCore }) {
+	return function useRadioOptions(props) {
+		"use no memo";
+		const media = usePlayer(selector);
+		const t = useTranslator();
+		const [core] = useState(createCore);
+		core.setProps(props ?? {});
+		const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
+		if (!media) {
+			logMissingFeature(name, selector.displayName ?? feature);
+			return null;
+		}
+		core.setMedia(media);
+		const state = core.getState();
+		const options = state.options.map((option) => {
+			const { label, labelParams, disabled, ...rest } = option;
+			return {
+				...rest,
+				label: translateText(label, t, labelParams),
+				disabled: state.disabled || disabled
+			};
+		});
+		return {
+			state,
+			label: translateText(core.getLabel(state), t, core.getLabelParams?.(state)),
+			value: state.value,
+			selectedLabel: options.find((option) => option.value === state.value)?.label ?? "",
+			options,
+			disabled: state.disabled,
+			hidden: state.hidden,
+			setValue
+		};
+	};
+}
+//#endregion
+export { createRadioOptionsHook };
+//# sourceMappingURL=create-radio-options-hook.js.map

package/dist/dev/ui/hooks/create-radio-options-hook.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"create-radio-options-hook.js","names":[],"sources":["../../../../src/ui/hooks/create-radio-options-hook.ts"],"sourcesContent":["import type { RadioOption, RadioOptionsState } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport { type Text, type TextParams, translateText } from '@videojs/core/i18n';\nimport type { UnknownState } from '@videojs/store';\nimport { useCallback, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\n\ninterface RadioOptionsCore<Props, Media, State extends RadioOptionsState> {\n setProps(props: Props): void;\n setMedia(media: Media): void;\n getState(): State;\n getLabel(state: State): Text | string;\n getLabelParams?(state: State): TextParams | undefined;\n selectValue(media: Media, value: string): void;\n}\n\ninterface RadioOptionsHookConfig<Props, Media, State extends RadioOptionsState> {\n name: string;\n feature: string;\n selector: ((state: UnknownState) => Media | null) & { displayName?: string | undefined };\n createCore: () => RadioOptionsCore<Props, Media, State>;\n}\n\ntype StateOption<State extends RadioOptionsState> = State extends RadioOptionsState<infer Option> ? Option : never;\n\nexport type TranslatedRadioOption<Option extends RadioOption> = Omit<Option, 'label' | 'labelParams' | 'disabled'> & {\n label: string;\n disabled: boolean;\n};\n\nexport interface RadioOptionsHookResult<Option extends RadioOption, State extends RadioOptionsState> {\n state: State;\n label: string;\n value: string;\n selectedLabel: string;\n options: TranslatedRadioOption<Option>[];\n disabled: boolean;\n hidden: boolean;\n setValue: (value: string) => void;\n}\n\n/** Creates framework adapter mechanics shared by media-backed radio option hooks. */\nexport function createRadioOptionsHook<Props, Media, State extends RadioOptionsState>({\n name,\n feature,\n selector,\n createCore,\n}: RadioOptionsHookConfig<Props, Media, State>): (\n props?: Props\n) => RadioOptionsHookResult<StateOption<State>, State> | null {\n return function useRadioOptions(props?: Props): RadioOptionsHookResult<StateOption<State>, State> | null {\n 'use no memo';\n\n const media = usePlayer(selector);\n const t = useTranslator();\n const [core] = useState(createCore);\n\n core.setProps(props ?? ({} as Props));\n\n const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n if (!media) {\n if (__DEV__) logMissingFeature(name, selector.displayName ?? feature);\n return null;\n }\n\n core.setMedia(media);\n const state = core.getState();\n const options = state.options.map((option) => {\n const { label, labelParams, disabled, ...rest } = option;\n\n return {\n ...rest,\n label: translateText(label, t, labelParams),\n disabled: state.disabled || disabled,\n } as TranslatedRadioOption<StateOption<State>>;\n });\n\n return {\n state,\n label: translateText(core.getLabel(state), t, core.getLabelParams?.(state)),\n value: state.value,\n selectedLabel: options.find((option) => option.value === state.value)?.label ?? '',\n options,\n disabled: state.disabled,\n hidden: state.hidden,\n setValue,\n };\n };\n}\n"],"mappings":";;;;;;;AA4CA,SAAgB,uBAAsE,EACpF,MACA,SACA,UACA,cAG4D;CAC5D,OAAO,SAAS,gBAAgB,OAAyE;EACvG;EAEA,MAAM,QAAQ,UAAU,QAAQ;EAChC,MAAM,IAAI,cAAc;EACxB,MAAM,CAAC,QAAQ,SAAS,UAAU;EAElC,KAAK,SAAS,SAAU,CAAC,CAAW;EAEpC,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC;EAE9F,IAAI,CAAC,OAAO;GACG,kBAAkB,MAAM,SAAS,eAAe,OAAO;GACpE,OAAO;EACT;EAEA,KAAK,SAAS,KAAK;EACnB,MAAM,QAAQ,KAAK,SAAS;EAC5B,MAAM,UAAU,MAAM,QAAQ,KAAK,WAAW;GAC5C,MAAM,EAAE,OAAO,aAAa,UAAU,GAAG,SAAS;GAElD,OAAO;IACL,GAAG;IACH,OAAO,cAAc,OAAO,GAAG,WAAW;IAC1C,UAAU,MAAM,YAAY;GAC9B;EACF,CAAC;EAED,OAAO;GACL;GACA,OAAO,cAAc,KAAK,SAAS,KAAK,GAAG,GAAG,KAAK,iBAAiB,KAAK,CAAC;GAC1E,OAAO,MAAM;GACb,eAAe,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,KAAK,CAAC,EAAE,SAAS;GAChF;GACA,UAAU,MAAM;GAChB,QAAQ,MAAM;GACd;EACF;CACF;AACF"}

package/dist/dev/ui/hooks/use-button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-button.d.ts","names":[],"sources":["../../../../src/ui/hooks/use-button.ts"],"mappings":";;;~~UAOiB~~;EACf;EACA,aAAa,OAAO;EACpB;;UAGe;EACf,iBAAiB,gBAAgB,oCAAoC;EACrE,WAAW,IAAI;;;;;;;;;;;;;;;;;;;;;;iBAuBD,UAAU,QAAQ,sBAAsB;kBAuBvC;OACH,aAAa;OACb,cAAc"}
1	+ {"version":3,"file":"use-button.d.ts","names":[],"sources":["../../../../src/ui/hooks/use-button.ts"],"mappings":";;;UAKiB;EACf;EACA,aAAa,OAAO;EACpB;;UAGe;EACf,iBAAiB,gBAAgB,oCAAoC;EACrE,WAAW,IAAI;;;;;;;;;;;;;;;;;;;;;;iBAuBD,UAAU,QAAQ,sBAAsB;kBAuBvC;OACH,aAAa;OACb,cAAc"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { mergeProps } from "../../utils/merge-props.js";
 import { createButton } from "@videojs/core/dom";
 import { useCallback } from "react";

package/dist/dev/ui/hooks/use-button.js.map CHANGED Viewed

	@@ -1 +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;EAC/B,IAAe,WAAW,QAAQ,YAAY,UAC5C,QAAQ,KAAK,GAAG,YAAY,oDAAoD;CAEpF,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"}
1	+ {"version":3,"file":"use-button.js","names":[],"sources":["../../../../src/ui/hooks/use-button.ts"],"sourcesContent":["import { 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":";;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,UAAU,QAAmD;CAC3E,MAAM,EAAE,aAAa,YAAY,eAAe;CAEhD,MAAM,YAAY,aACf,YAAgC;EAC/B,IAAe,WAAW,QAAQ,YAAY,UAC5C,QAAQ,KAAK,GAAG,YAAY,oDAAoD;CAEpF,GACA,CAAC,WAAW,CACd;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/dev/ui/hooks/use-positioned-state.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { useCallback, useEffect, useMemo, useState } from "react";
 //#region src/ui/hooks/use-positioned-state.ts
 function usePositionedState(preferredState) {

package/dist/dev/ui/hooks/use-positioned-state.js.map CHANGED Viewed

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"use-positioned-state.js","names":[],"sources":["../../../../src/ui/hooks/use-positioned-state.ts"],"sourcesContent":["import { 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":";;AAaA,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/dev/ui/hooks/use-slider.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { SliderOptions, SliderRootProps, SliderRootStyle, SliderThumbProps } from "@videojs/core/dom";
+import { SliderApi, SliderOptions, SliderRootProps, SliderRootStyle, SliderThumbProps } from "@videojs/core/dom";
 import { SliderInput, SliderState } from "@videojs/core";
 //#region src/ui/hooks/use-slider.d.ts
 interface UseSliderOptions<State extends SliderState = SliderState> extends Pick<SliderOptions, 'getPercent' | 'getStepPercent' | 'getLargeStepPercent' | 'changeThrottle' | 'onValueChange' | 'onValueCommit' | 'onDragStart' | 'onDragEnd'> {
@@ -12,6 +12,7 @@ interface UseSliderOptions<State extends SliderState = SliderState> extends Pick
 }
 interface UseSliderReturnValue<State extends SliderState = SliderState> {
   state: State;
+  input: SliderApi['input'];
   cssVars: Record<string, string>;
   rootRef: React.RefCallback<HTMLElement>;
   thumbRef: React.RefCallback<HTMLElement>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-slider.d.ts","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"mappings":";;;UAkBiB,iBAAiB,cAAc,cAAc,qBACpD,KACN;EAUF,eAAe,OAAO,gBAAgB;EACtC;EACA;;EAEA,kBAAkB,oBAAoB,mBAAmB;;EAEzD,aAAa,OAAO,UAAU;;UAGf,qBAAqB,cAAc,cAAc;EAChE,OAAO;EACP,SAAS;EACT,SAAS,MAAM,YAAY;EAC3B,UAAU,MAAM,YAAY;EAC5B,WAAW;EACX,WAAW;EACX,YAAY;;;;;;;;;iBAUE,UAAU,cAAc,cAAc,aACpD,SAAS,iBAAiB,SACzB,qBAAqB;~~kBAoEP~~;OACH,UAAU;OACV,cAAc"}
1	+ {"version":3,"file":"use-slider.d.ts","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"mappings":";;;UAkBiB,iBAAiB,cAAc,cAAc,qBACpD,KACN;EAUF,eAAe,OAAO,gBAAgB;EACtC;EACA;;EAEA,kBAAkB,oBAAoB,mBAAmB;;EAEzD,aAAa,OAAO,UAAU;;UAGf,qBAAqB,cAAc,cAAc;EAChE,OAAO;EACP,OAAO;EACP,SAAS;EACT,SAAS,MAAM,YAAY;EAC3B,UAAU,MAAM,YAAY;EAC5B,WAAW;EACX,WAAW;EACX,YAAY;;;;;;;;;iBAUE,UAAU,cAAc,cAAc,aACpD,SAAS,iBAAiB,SACzB,qBAAqB;kBA6GP;OACH,UAAU;OACV,cAAc"}

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

@@ -1,11 +1,11 @@
-"use client";
+import { useOptionalPlayer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { useDestroy } from "../../utils/use-destroy.js";
 import { useForceRender } from "../../utils/use-force-render.js";
-import { createSlider } from "@videojs/core/dom";
+import { createSlider, selectControls } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import { isRTL } from "@videojs/utils/dom";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { applyStyles, isRTL } from "@videojs/utils/dom";
 //#region src/ui/hooks/use-slider.ts
 /**
 * Manages slider input lifecycle for React.
@@ -16,6 +16,13 @@ import { isRTL } from "@videojs/utils/dom";
 */
 function useSlider(options) {
 	const optionsRef = useLatestRef(options);
+	const requestControlsLock = useOptionalPlayer(selectControls)?.requestControlsLock;
+	const releaseControlsLockRef = useRef(null);
+	const releaseControlsLock = useCallback(() => {
+		releaseControlsLockRef.current?.();
+		releaseControlsLockRef.current = null;
+	}, []);
+	useEffect(() => releaseControlsLock, [releaseControlsLock]);
 	const rootElementRef = useRef(null);
 	const thumbElementRef = useRef(null);
 	const forceRender = useForceRender();
@@ -33,25 +40,53 @@ function useSlider(options) {
 			adjustPercent: optionsRef.current.adjustPercent,
 			onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),
 			onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),
-			onDragStart: () => optionsRef.current.onDragStart?.(),
-			onDragEnd: () => optionsRef.current.onDragEnd?.()
+			onDragStart: () => {
+				releaseControlsLockRef.current ??= requestControlsLock?.() ?? null;
+				optionsRef.current.onDragStart?.();
+			},
+			onDragEnd: () => {
+				releaseControlsLock();
+				optionsRef.current.onDragEnd?.();
+			}
 		});
 	});
 	useDestroy(slider);
-	const input = useSnapshot(slider.input);
+	const interaction = useSnapshot(slider.input, ({ dragging, pointing, focused }) => ({
+		dragging,
+		pointing,
+		focused
+	}));
+	const input = {
+		...slider.input.current,
+		...interaction
+	};
 	const state = options.computeState(input);
 	useLayoutEffect(() => {
 		if (state.thumbAlignment === "edge" && rootElementRef.current && thumbElementRef.current) forceRender();
 	}, [state.thumbAlignment]);
+	const cssVars = options.getCSSVars(slider.adjustForAlignment(state));
+	const syncStyles = useCallback((element = rootElementRef.current) => {
+		if (!element) return;
+		const next = optionsRef.current.computeState(slider.input.current);
+		applyStyles(element, optionsRef.current.getCSSVars(slider.adjustForAlignment(next)));
+	}, [slider]);
+	useLayoutEffect(() => {
+		syncStyles();
+		return slider.input.subscribe(syncStyles);
+	}, [slider, syncStyles]);
+	const rootRef = useCallback((element) => {
+		rootElementRef.current = element;
+		syncStyles(element);
+	}, [syncStyles]);
+	const thumbRef = useCallback((element) => {
+		thumbElementRef.current = element;
+	}, []);
 	return {
 		state,
-		cssVars: options.getCSSVars(slider.adjustForAlignment(state)),
-		rootRef: useCallback((element) => {
-			rootElementRef.current = element;
-		}, []),
-		thumbRef: useCallback((element) => {
-			thumbElementRef.current = element;
-		}, []),
+		input: slider.input,
+		cssVars,
+		rootRef,
+		thumbRef,
 		rootProps: slider.rootProps,
 		rootStyle: slider.rootStyle,
 		thumbProps: slider.thumbProps

package/dist/dev/ui/hooks/use-slider.js.map CHANGED Viewed

	@@ -1 +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,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"}
1	+ {"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["import 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 selectControls,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { applyStyles, isRTL } from '@videojs/utils/dom';\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { useOptionalPlayer } from '../../player/context';\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 input: SliderApi['input'];\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 const controls = useOptionalPlayer(selectControls);\n const requestControlsLock = controls?.requestControlsLock;\n const releaseControlsLockRef = useRef<(() => void) \| null>(null);\n\n const releaseControlsLock = useCallback(() => {\n releaseControlsLockRef.current?.();\n releaseControlsLockRef.current = null;\n }, []);\n\n useEffect(() => releaseControlsLock, [releaseControlsLock]);\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: () => {\n releaseControlsLockRef.current ??= requestControlsLock?.() ?? null;\n optionsRef.current.onDragStart?.();\n },\n onDragEnd: () => {\n releaseControlsLock();\n optionsRef.current.onDragEnd?.();\n },\n };\n\n return createSlider(stableOptions);\n });\n\n useDestroy(slider);\n\n // Percentage changes are rendered directly below. React only needs to\n // re-render when interaction state changes.\n const interaction = useSnapshot(slider.input, ({ dragging, pointing, focused }) => ({\n dragging,\n pointing,\n focused,\n }));\n const input = { ...slider.input.current, ...interaction };\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 const syncStyles = useCallback(\n (element = rootElementRef.current) => {\n if (!element) return;\n const next = optionsRef.current.computeState(slider.input.current);\n applyStyles(element, optionsRef.current.getCSSVars(slider.adjustForAlignment(next)));\n },\n [slider]\n );\n\n useLayoutEffect(() => {\n syncStyles();\n return slider.input.subscribe(syncStyles);\n }, [slider, syncStyles]);\n\n // Ref callbacks for root and thumb elements.\n const rootRef = useCallback(\n (element: HTMLElement \| null) => {\n rootElementRef.current = element;\n syncStyles(element);\n },\n [syncStyles]\n );\n\n const thumbRef = useCallback((element: HTMLElement \| null) => {\n thumbElementRef.current = element;\n }, []);\n\n return {\n state,\n input: slider.input,\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":";;;;;;;;;;;;;;;;AAyDA,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,OAAO;CAEvC,MAAM,sBADW,kBAAkB,cACA,CAAC,EAAE;CACtC,MAAM,yBAAyB,OAA4B,IAAI;CAE/D,MAAM,sBAAsB,kBAAkB;EAC5C,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC,GAAG,CAAC,CAAC;CAEL,gBAAgB,qBAAqB,CAAC,mBAAmB,CAAC;CAE1D,MAAM,iBAAiB,OAA2B,IAAI;CACtD,MAAM,kBAAkB,OAA2B,IAAI;CACvD,MAAM,cAAc,eAAe;CAGnC,MAAM,CAAC,UAAU,eAA0B;EAwBzC,OAAO,aAAa;GAtBlB,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;IACjB,uBAAuB,YAAY,sBAAsB,KAAK;IAC9D,WAAW,QAAQ,cAAc;GACnC;GACA,iBAAiB;IACf,oBAAoB;IACpB,WAAW,QAAQ,YAAY;GACjC;EAG8B,CAAC;CACnC,CAAC;CAED,WAAW,MAAM;CAIjB,MAAM,cAAc,YAAY,OAAO,QAAQ,EAAE,UAAU,UAAU,eAAe;EAClF;EACA;EACA;CACF,EAAE;CACF,MAAM,QAAQ;EAAE,GAAG,OAAO,MAAM;EAAS,GAAG;CAAY;CAGxD,MAAM,QAAQ,QAAQ,aAAa,KAAK;CAIxC,sBAAsB;EACpB,IAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,SAC/E,YAAY;CAEhB,GAAG,CAAC,MAAM,cAAc,CAAC;CAGzB,MAAM,UAAU,QAAQ,WAAW,OAAO,mBAAmB,KAAK,CAAC;CAEnE,MAAM,aAAa,aAChB,UAAU,eAAe,YAAY;EACpC,IAAI,CAAC,SAAS;EACd,MAAM,OAAO,WAAW,QAAQ,aAAa,OAAO,MAAM,OAAO;EACjE,YAAY,SAAS,WAAW,QAAQ,WAAW,OAAO,mBAAmB,IAAI,CAAC,CAAC;CACrF,GACA,CAAC,MAAM,CACT;CAEA,sBAAsB;EACpB,WAAW;EACX,OAAO,OAAO,MAAM,UAAU,UAAU;CAC1C,GAAG,CAAC,QAAQ,UAAU,CAAC;CAGvB,MAAM,UAAU,aACb,YAAgC;EAC/B,eAAe,UAAU;EACzB,WAAW,OAAO;CACpB,GACA,CAAC,UAAU,CACb;CAEA,MAAM,WAAW,aAAa,YAAgC;EAC5D,gBAAgB,UAAU;CAC5B,GAAG,CAAC,CAAC;CAEL,OAAO;EACL;EACA,OAAO,OAAO;EACd;EACA;EACA;EACA,WAAW,OAAO;EAClB,WAAW,OAAO;EAClB,YAAY,OAAO;CACrB;AACF"}