npm - @videojs/react - Versions diffs - 10.0.0-beta.31 → 10.0.0-beta.32 - Mend

@videojs/react 10.0.0-beta.31 → 10.0.0-beta.32

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 (1552) hide show

package/dist/default/ui/tooltip/tooltip-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-root.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"sourcesContent":["import { type TooltipProps as CoreTooltipProps, TooltipCore, TooltipDataAttrs } from '@videojs/core';\nimport {\n createTooltip,\n createTransition,\n type PositioningBoundary,\n type TooltipChangeDetails,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\nimport { useOptionalContainer } from '../../player/context';\nimport { useOptionalPopupGroup } from '../../player/popup-group-context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { type TooltipContent, TooltipContextProvider } from './context';\nimport { useTooltipGroup } from './group-context';\n\nexport interface TooltipRootProps extends CoreTooltipProps {\n /** Boundary used to constrain the popup size. /\n boundary?: PositioningBoundary;\n /* Called when the tooltip open state changes (fires immediately, before animations). /\n onOpenChange?: (open: boolean, details: TooltipChangeDetails) => void;\n /* Called after open/close animations complete. */\n onOpenChangeComplete?: (open: boolean) => void;\n children?: ReactNode;\n}\n\nexport function TooltipRoot({\n open: controlledOpen,\n defaultOpen = TooltipCore.defaultProps.defaultOpen,\n onOpenChange: onOpenChangeProp,\n onOpenChangeComplete: onOpenChangeCompleteProp,\n delay = TooltipCore.defaultProps.delay,\n closeDelay = TooltipCore.defaultProps.closeDelay,\n disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup,\n disabled = TooltipCore.defaultProps.disabled,\n boundary = 'container',\n children,\n ...coreProps\n}: TooltipRootProps): ReactNode {\n const container = useOptionalContainer();\n const popupGroup = useOptionalPopupGroup();\n const controls = useOptionalControlsContext();\n const [core] = useState(() => new TooltipCore(coreProps));\n core.setProps(coreProps);\n\n const isControlled = !isUndefined(controlledOpen);\n\n const groupFromContext = useTooltipGroup();\n\n // Keep refs that always point to the latest values so the\n // createTooltip closure never reads stale props.\n const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n const delayRef = useLatestRef(delay);\n const closeDelayRef = useLatestRef(closeDelay);\n const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);\n const disabledRef = useLatestRef(disabled);\n const groupRef = useLatestRef(groupFromContext);\n const popupGroupRef = useLatestRef(popupGroup);\n\n const [tooltip] = useState(() => {\n const instance = createTooltip({\n transition: createTransition(),\n onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n onOpenChangeRef.current?.(nextOpen, details);\n },\n onOpenChangeComplete: (nextOpen: boolean) => {\n onOpenChangeCompleteRef.current?.(nextOpen);\n },\n delay: () => delayRef.current,\n closeDelay: () => closeDelayRef.current,\n disableHoverablePopup: () => disableHoverablePopupRef.current,\n disabled: () => disabledRef.current,\n group: () => groupRef.current,\n popupGroup: () => popupGroupRef.current,\n });\n\n // Apply defaultOpen on creation (uncontrolled only)\n if (!isControlled && defaultOpen) {\n instance.open();\n }\n\n return instance;\n });\n\n const [content, setContent] = useState<TooltipContent \| undefined>();\n\n const anchorName = useSafeId();\n const popupId = useSafeId('tooltip');\n\n // Sync controlled open prop -> internal input state.\n useEffect(() => {\n if (isUndefined(controlledOpen)) return;\n\n const { active: inputOpen } = tooltip.input.current;\n if (controlledOpen === inputOpen) return;\n\n if (controlledOpen) {\n tooltip.open();\n } else {\n tooltip.close();\n }\n }, [controlledOpen, tooltip]);\n\n useEffect(() => {\n if (isUndefined(controls?.state.visible)) return;\n if (controls.state.visible) return;\n\n tooltip.close('imperative-action');\n }, [controls?.state.visible, tooltip]);\n\n useDestroy(tooltip);\n\n const input = useSnapshot(tooltip.input);\n core.setInput(input);\n const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());\n\n return (\n <TooltipContextProvider\n value={{\n core,\n tooltip,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap: TooltipDataAttrs,\n anchorName,\n popupId,\n content,\n setContent,\n boundary,\n container,\n }}\n >\n {children}\n </TooltipContextProvider>\n );\n}\n\nexport namespace TooltipRoot {\n export type Props = TooltipRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;~~AA+BA~~,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,wBAAwB,YAAY,aAAa,uBACjD,WAAW,YAAY,aAAa,UACpC,WAAW,aACX,UACA,GAAG,aAC2B;CAC9B,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,WAAW,2BAA2B;CAC5C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,SAAS,CAAC;~~CACxD~~,KAAK,SAAS,SAAS;CAEvB,MAAM,eAAe,CAAC,YAAY,cAAc;CAEhD,MAAM,mBAAmB,gBAAgB;CAIzC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,2BAA2B,aAAa,qBAAqB;CACnE,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,WAAW,aAAa,gBAAgB;CAC9C,MAAM,gBAAgB,aAAa,UAAU;CAE7C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,iBAAiB;GAC7B,eAAe,UAAmB,YAAkC;IAClE,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,uBAAuB,aAAsB;IAC3C,wBAAwB,UAAU,QAAQ;GAC5C;GACA,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,6BAA6B,yBAAyB;GACtD,gBAAgB,YAAY;GAC5B,aAAa,SAAS;GACtB,kBAAkB,cAAc;EAClC,CAAC;EAGD,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK;EAGhB,OAAO;CACT,CAAC;CAED,MAAM,CAAC,SAAS,cAAc,SAAqC;CAEnE,MAAM,aAAa,UAAU;CAC7B,MAAM,UAAU,UAAU,SAAS;CAGnC,gBAAgB;EACd,IAAI,YAAY,cAAc,GAAG;EAEjC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;EAC5C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,QAAQ,KAAK;OAEb,QAAQ,MAAM;CAElB,GAAG,CAAC,gBAAgB,OAAO,CAAC;CAE5B,gBAAgB;EACd,IAAI,YAAY,UAAU,MAAM,OAAO,GAAG;~~EAC1C~~,IAAI,SAAS,MAAM,SAAS;EAE5B,QAAQ,MAAM,mBAAmB;CACnC,GAAG,CAAC,UAAU,MAAM,SAAS,OAAO,CAAC;CAErC,WAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,QAAQ,KAAK;~~CACvC~~,KAAK,SAAS,KAAK;CACnB,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAAmB,KAAK,SAAS,CAAC;CAEtF,OACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,cAAc;GACd;GACA;GACA;GACA;GACA;GACA;EACF;EAEC;CACqB,CAAA;AAE5B"}
1	+ {"version":3,"file":"tooltip-root.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"sourcesContent":["import { type TooltipProps as CoreTooltipProps, TooltipCore, TooltipDataAttrs } from '@videojs/core';\nimport {\n createTooltip,\n createTransition,\n type PositioningBoundary,\n type TooltipChangeDetails,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useOptionalContainer } from '../../player/context';\nimport { useOptionalPopupGroup } from '../../player/popup-group-context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { type TooltipContent, TooltipContextProvider } from './context';\nimport { useTooltipGroup } from './group-context';\n\nexport interface TooltipRootProps extends CoreTooltipProps {\n /** Boundary used to constrain the popup size. /\n boundary?: PositioningBoundary;\n /* Called when the tooltip open state changes (fires immediately, before animations). /\n onOpenChange?: (open: boolean, details: TooltipChangeDetails) => void;\n /* Called after open/close animations complete. */\n onOpenChangeComplete?: (open: boolean) => void;\n children?: ReactNode;\n}\n\nexport function TooltipRoot({\n open: controlledOpen,\n defaultOpen = TooltipCore.defaultProps.defaultOpen,\n onOpenChange: onOpenChangeProp,\n onOpenChangeComplete: onOpenChangeCompleteProp,\n delay = TooltipCore.defaultProps.delay,\n closeDelay = TooltipCore.defaultProps.closeDelay,\n disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup,\n disabled = TooltipCore.defaultProps.disabled,\n sticky = TooltipCore.defaultProps.sticky,\n boundary = 'container',\n children,\n ...coreProps\n}: TooltipRootProps): ReactNode {\n const container = useOptionalContainer();\n const popupGroup = useOptionalPopupGroup();\n const controls = useOptionalControlsContext();\n const [core] = useState(() => new TooltipCore(coreProps));\n\n core.setProps(coreProps);\n\n const isControlled = !isUndefined(controlledOpen);\n\n const groupFromContext = useTooltipGroup();\n\n // Keep refs that always point to the latest values so the\n // createTooltip closure never reads stale props.\n const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n const delayRef = useLatestRef(delay);\n const closeDelayRef = useLatestRef(closeDelay);\n const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);\n const disabledRef = useLatestRef(disabled);\n const stickyRef = useLatestRef(sticky);\n const groupRef = useLatestRef(groupFromContext);\n const popupGroupRef = useLatestRef(popupGroup);\n\n const [tooltip] = useState(() => {\n const instance = createTooltip({\n transition: createTransition(),\n onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n onOpenChangeRef.current?.(nextOpen, details);\n },\n onOpenChangeComplete: (nextOpen: boolean) => {\n onOpenChangeCompleteRef.current?.(nextOpen);\n },\n delay: () => delayRef.current,\n closeDelay: () => closeDelayRef.current,\n disableHoverablePopup: () => disableHoverablePopupRef.current,\n disabled: () => disabledRef.current,\n sticky: () => stickyRef.current,\n group: () => groupRef.current,\n popupGroup: () => popupGroupRef.current,\n });\n\n // Apply defaultOpen on creation (uncontrolled only)\n if (!isControlled && defaultOpen) {\n instance.open();\n }\n\n return instance;\n });\n\n const [content, setContent] = useState<TooltipContent \| undefined>();\n\n const anchorName = useSafeId();\n const popupId = useSafeId('tooltip');\n\n // Sync controlled open prop -> internal input state.\n useEffect(() => {\n if (isUndefined(controlledOpen)) return;\n\n const { active: inputOpen } = tooltip.input.current;\n if (controlledOpen === inputOpen) return;\n\n if (controlledOpen) {\n tooltip.open();\n } else {\n tooltip.close();\n }\n }, [controlledOpen, tooltip]);\n\n useEffect(() => {\n if (isUndefined(controls?.state.visible)) return;\n\n if (controls.state.visible) return;\n\n tooltip.close('imperative-action');\n }, [controls?.state.visible, tooltip]);\n\n useDestroy(tooltip);\n\n const input = useSnapshot(tooltip.input);\n\n core.setInput(input);\n const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());\n\n return (\n <TooltipContextProvider\n value={{\n core,\n tooltip,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap: TooltipDataAttrs,\n anchorName,\n popupId,\n content,\n setContent,\n boundary,\n container,\n }}\n >\n {children}\n </TooltipContextProvider>\n );\n}\n\nexport namespace TooltipRoot {\n export type Props = TooltipRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,wBAAwB,YAAY,aAAa,uBACjD,WAAW,YAAY,aAAa,UACpC,SAAS,YAAY,aAAa,QAClC,WAAW,aACX,UACA,GAAG,aAC2B;CAC9B,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,WAAW,2BAA2B;CAC5C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,SAAS,CAAC;CAExD,KAAK,SAAS,SAAS;CAEvB,MAAM,eAAe,CAAC,YAAY,cAAc;CAEhD,MAAM,mBAAmB,gBAAgB;CAIzC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,2BAA2B,aAAa,qBAAqB;CACnE,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,YAAY,aAAa,MAAM;CACrC,MAAM,WAAW,aAAa,gBAAgB;CAC9C,MAAM,gBAAgB,aAAa,UAAU;CAE7C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,iBAAiB;GAC7B,eAAe,UAAmB,YAAkC;IAClE,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,uBAAuB,aAAsB;IAC3C,wBAAwB,UAAU,QAAQ;GAC5C;GACA,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,6BAA6B,yBAAyB;GACtD,gBAAgB,YAAY;GAC5B,cAAc,UAAU;GACxB,aAAa,SAAS;GACtB,kBAAkB,cAAc;EAClC,CAAC;EAGD,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK;EAGhB,OAAO;CACT,CAAC;CAED,MAAM,CAAC,SAAS,cAAc,SAAqC;CAEnE,MAAM,aAAa,UAAU;CAC7B,MAAM,UAAU,UAAU,SAAS;CAGnC,gBAAgB;EACd,IAAI,YAAY,cAAc,GAAG;EAEjC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;EAC5C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,QAAQ,KAAK;OAEb,QAAQ,MAAM;CAElB,GAAG,CAAC,gBAAgB,OAAO,CAAC;CAE5B,gBAAgB;EACd,IAAI,YAAY,UAAU,MAAM,OAAO,GAAG;EAE1C,IAAI,SAAS,MAAM,SAAS;EAE5B,QAAQ,MAAM,mBAAmB;CACnC,GAAG,CAAC,UAAU,MAAM,SAAS,OAAO,CAAC;CAErC,WAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,QAAQ,KAAK;CAEvC,KAAK,SAAS,KAAK;CACnB,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAAmB,KAAK,SAAS,CAAC;CAEtF,OACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,cAAc;GACd;GACA;GACA;GACA;GACA;GACA;EACF;EAEC;CACqB,CAAA;AAE5B"}

package/dist/default/ui/tooltip/tooltip-shortcut.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-shortcut.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-shortcut.tsx"],"sourcesContent":["import type { TooltipState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipShortcutProps extends UIComponentProps<'kbd', TooltipState> {}\n\n/** Keyboard shortcut hint; apply skin `className` (CSS: `media-tooltip__kbd`; Tailwind: `popup.tooltipShortcut`). */\nexport const TooltipShortcut = forwardRef<HTMLElement, TooltipShortcutProps>(function TooltipShortcut(\n { render, className, style, children, ...elementProps },\n forwardedRef\n) {\n const { state, stateAttrMap, content } = useTooltipContext();\n const shortcut = children !== undefined && children !== null ? children : (content?.shortcut ?? null);\n\n if (!shortcut) ~~{\n~~ return null;\n }\n\n return renderElement(\n 'kbd',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: forwardedRef,\n props: [elementProps, { children: shortcut }],\n }\n );\n});\n\nexport namespace TooltipShortcut {\n export type Props = TooltipShortcutProps;\n export type State = TooltipState;\n}\n"],"mappings":";;;;;AAUA,MAAa,kBAAkB,WAA8C,SAAS,gBACpF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,OAAO,cAAc,YAAY,kBAAkB;CAC3D,MAAM,WAAW,aAAa,KAAA,KAAa,aAAa,OAAO,WAAY,SAAS,YAAY;~~CAEhG~~,IAAI,CAAC,~~UACH~~,OAAO;~~CAGT~~,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC,cAAc,EAAE,UAAU,SAAS,CAAC;CAC9C,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"tooltip-shortcut.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-shortcut.tsx"],"sourcesContent":["import type { TooltipState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipShortcutProps extends UIComponentProps<'kbd', TooltipState> {}\n\n/** Keyboard shortcut hint; apply skin `className` (CSS: `media-tooltip__kbd`; Tailwind: `popup.tooltipShortcut`). */\nexport const TooltipShortcut = forwardRef<HTMLElement, TooltipShortcutProps>(function TooltipShortcut(\n { render, className, style, children, ...elementProps },\n forwardedRef\n) {\n const { state, stateAttrMap, content } = useTooltipContext();\n const shortcut = children !== undefined && children !== null ? children : (content?.shortcut ?? null);\n if (!shortcut) return null;\n\n return renderElement(\n 'kbd',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: forwardedRef,\n props: [elementProps, { children: shortcut }],\n }\n );\n});\n\nexport namespace TooltipShortcut {\n export type Props = TooltipShortcutProps;\n export type State = TooltipState;\n}\n"],"mappings":";;;;;AAUA,MAAa,kBAAkB,WAA8C,SAAS,gBACpF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,OAAO,cAAc,YAAY,kBAAkB;CAC3D,MAAM,WAAW,aAAa,KAAA,KAAa,aAAa,OAAO,WAAY,SAAS,YAAY;CAChG,IAAI,CAAC,UAAU,OAAO;CAEtB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC,cAAc,EAAE,UAAU,SAAS,CAAC;CAC9C,CACF;AACF,CAAC"}

package/dist/default/ui/volume-indicator/context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/volume-indicator/context.tsx"],"sourcesContent":["import type { VolumeIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface VolumeIndicatorContextValue {\n state: VolumeIndicatorCore.State;\n}\n\nconst VolumeIndicatorContext = createContext<VolumeIndicatorContextValue \| null>(null);\n\nexport function VolumeIndicatorProvider({ value, children }: ProviderProps<VolumeIndicatorContextValue>) {\n return <VolumeIndicatorContext.Provider value={value}>{children}</VolumeIndicatorContext.Provider>;\n}\n\nexport function useVolumeIndicatorContext(): VolumeIndicatorContextValue {\n const ctx = useContext(VolumeIndicatorContext);\n if (!ctx) throw new Error('VolumeIndicator child compounds must be used within a VolumeIndicator.Root');\n return ctx;\n}\n"],"mappings":";;;AAOA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,SAAgB,wBAAwB,EAAE,OAAO,YAAwD;CACvG,OAAO,oBAAC,uBAAuB,UAAxB;EAAwC;EAAQ;CAA0C,CAAA;AACnG;AAEA,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,sBAAsB;CAC7C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,4EAA4E;~~CACtG~~,OAAO;AACT"}
1	+ {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/volume-indicator/context.tsx"],"sourcesContent":["import type { VolumeIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface VolumeIndicatorContextValue {\n state: VolumeIndicatorCore.State;\n}\n\nconst VolumeIndicatorContext = createContext<VolumeIndicatorContextValue \| null>(null);\n\nexport function VolumeIndicatorProvider({ value, children }: ProviderProps<VolumeIndicatorContextValue>) {\n return <VolumeIndicatorContext.Provider value={value}>{children}</VolumeIndicatorContext.Provider>;\n}\n\nexport function useVolumeIndicatorContext(): VolumeIndicatorContextValue {\n const ctx = useContext(VolumeIndicatorContext);\n if (!ctx) throw new Error('VolumeIndicator child compounds must be used within a VolumeIndicator.Root');\n\n return ctx;\n}\n"],"mappings":";;;AAOA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,SAAgB,wBAAwB,EAAE,OAAO,YAAwD;CACvG,OAAO,oBAAC,uBAAuB,UAAxB;EAAwC;EAAQ;CAA0C,CAAA;AACnG;AAEA,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,sBAAsB;CAC7C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,4EAA4E;CAEtG,OAAO;AACT"}

package/dist/default/ui/volume-indicator/index.parts.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-indicator/index.parts.ts"],"sourcesContent":["export { VolumeIndicatorFill as Fill, type VolumeIndicatorFillProps as FillProps } from './volume-indicator-fill';\nexport { VolumeIndicatorRoot as Root, type VolumeIndicatorRootProps as RootProps } from './volume-indicator-root';\nexport {\n VolumeIndicatorValue as Value~~,\n~~ type VolumeIndicatorValueProps as ValueProps~~,\n~~} from './volume-indicator-value';\n"],"mappings":""}
1	+ {"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-indicator/index.parts.ts"],"sourcesContent":["export { VolumeIndicatorFill as Fill, type VolumeIndicatorFillProps as FillProps } from './volume-indicator-fill';\nexport { VolumeIndicatorRoot as Root, type VolumeIndicatorRootProps as RootProps } from './volume-indicator-root';\nexport { VolumeIndicatorValue as Value, type VolumeIndicatorValueProps as ValueProps } from './volume-indicator-value';\n"],"mappings":""}

package/dist/default/ui/volume-indicator/volume-indicator-fill.js CHANGED Viewed

@@ -1,16 +1,17 @@
 import { renderElement } from "../../utils/use-render.js";
 import { useVolumeIndicatorContext } from "./context.js";
 import { forwardRef } from "react";
-import { isFunction } from "@videojs/utils/predicate";
 import { VolumeIndicatorCSSVars } from "@videojs/core";
+import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/volume-indicator/volume-indicator-fill.tsx
 const VolumeIndicatorFill = forwardRef(function VolumeIndicatorFill(componentProps, forwardedRef) {
 	const { render, className, style, ...elementProps } = componentProps;
 	const { state } = useVolumeIndicatorContext();
+	const fillStyle = getVolumeIndicatorFillStyle(state, style);
 	return renderElement("div", {
 		render,
 		className,
-		style: getVolumeIndicatorFillStyle(state, style)
+		style: fillStyle
 	}, {
 		state,
 		ref: forwardedRef,

package/dist/default/ui/volume-indicator/volume-indicator-fill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"volume-indicator-fill.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-fill.tsx"],"sourcesContent":["import { type VolumeIndicatorCore, VolumeIndicatorCSSVars } from '@videojs/core';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useVolumeIndicatorContext } from './context';\n\nexport interface VolumeIndicatorFillProps extends UIComponentProps<'div', VolumeIndicatorCore.State> {}\n\nexport const VolumeIndicatorFill = forwardRef(function VolumeIndicatorFill(\n componentProps: VolumeIndicatorFillProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, ...elementProps } = componentProps;\n const { state } = useVolumeIndicatorContext();\n const fillStyle = getVolumeIndicatorFillStyle(state, style);\n\n return renderElement(\n 'div',\n { render, className, style: fillStyle },\n {\n state,\n ref: forwardedRef,\n props: [elementProps],\n }\n );\n});\n\nexport namespace VolumeIndicatorFill {\n export type Props = VolumeIndicatorFillProps;\n}\n\nfunction getVolumeIndicatorFillStyle(\n state: VolumeIndicatorCore.State,\n style: VolumeIndicatorFillProps['style']\n): VolumeIndicatorFillProps['style'] {\n const vars = state.fill\n ? ({\n [VolumeIndicatorCSSVars.fill]: state.fill,\n } as CSSProperties)\n : undefined;\n\n if (!vars) return style;\n\n if (isFunction(style)) {\n return (nextState) => ({\n ...style(nextState),\n ...vars,\n });\n }\n\n return {\n ...style,\n ...vars,\n };\n}\n"],"mappings":";;;;;;AAWA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,0BAA0B;~~CAG5C~~,OAAO,cACL,OACA;EAAE;EAAQ;EAAW,~~OAJL,4BAA4B,~~OAAO~~,KAIf~~;~~CAAE~~,GACtC;EACE;EACA,KAAK;EACL,OAAO,CAAC,YAAY;CACtB,CACF;AACF,CAAC;AAMD,SAAS,4BACP,OACA,OACmC;CACnC,MAAM,OAAO,MAAM,OACd,GACE,uBAAuB,OAAO,MAAM,KACvC,IACA,KAAA;~~CAEJ~~,IAAI,CAAC,MAAM,OAAO;CAElB,IAAI,WAAW,KAAK,GAClB,QAAQ,eAAe;EACrB,GAAG,MAAM,SAAS;EAClB,GAAG;CACL;CAGF,OAAO;EACL,GAAG;EACH,GAAG;CACL;AACF"}
1	+ {"version":3,"file":"volume-indicator-fill.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-fill.tsx"],"sourcesContent":["import { type VolumeIndicatorCore, VolumeIndicatorCSSVars } from '@videojs/core';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useVolumeIndicatorContext } from './context';\n\nexport interface VolumeIndicatorFillProps extends UIComponentProps<'div', VolumeIndicatorCore.State> {}\n\nexport const VolumeIndicatorFill = forwardRef(function VolumeIndicatorFill(\n componentProps: VolumeIndicatorFillProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, ...elementProps } = componentProps;\n const { state } = useVolumeIndicatorContext();\n const fillStyle = getVolumeIndicatorFillStyle(state, style);\n\n return renderElement(\n 'div',\n { render, className, style: fillStyle },\n {\n state,\n ref: forwardedRef,\n props: [elementProps],\n }\n );\n});\n\nexport namespace VolumeIndicatorFill {\n export type Props = VolumeIndicatorFillProps;\n}\n\nfunction getVolumeIndicatorFillStyle(\n state: VolumeIndicatorCore.State,\n style: VolumeIndicatorFillProps['style']\n): VolumeIndicatorFillProps['style'] {\n const vars = state.fill\n ? ({\n [VolumeIndicatorCSSVars.fill]: state.fill,\n } as CSSProperties)\n : undefined;\n if (!vars) return style;\n\n if (isFunction(style)) {\n return (nextState) => ({\n ...style(nextState),\n ...vars,\n });\n }\n\n return {\n ...style,\n ...vars,\n };\n}\n"],"mappings":";;;;;;AAWA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,0BAA0B;CAC5C,MAAM,YAAY,4BAA4B,OAAO,KAAK;CAE1D,OAAO,cACL,OACA;EAAE;EAAQ;EAAW,OAAO;CAAU,GACtC;EACE;EACA,KAAK;EACL,OAAO,CAAC,YAAY;CACtB,CACF;AACF,CAAC;AAMD,SAAS,4BACP,OACA,OACmC;CACnC,MAAM,OAAO,MAAM,OACd,GACE,uBAAuB,OAAO,MAAM,KACvC,IACA,KAAA;CACJ,IAAI,CAAC,MAAM,OAAO;CAElB,IAAI,WAAW,KAAK,GAClB,QAAQ,eAAe;EACrB,GAAG,MAAM,SAAS;EAClB,GAAG;CACL;CAGF,OAAO;EACL,GAAG;EACH,GAAG;CACL;AACF"}

package/dist/default/ui/volume-indicator/volume-indicator-root.js CHANGED Viewed

@@ -8,9 +8,10 @@ import { VolumeIndicatorCore, VolumeIndicatorDataAttrs, createInputIndicatorLabe
 //#region src/ui/volume-indicator/volume-indicator-root.tsx
 const VolumeIndicatorRoot = forwardRef(function VolumeIndicatorRoot(componentProps, forwardedRef) {
 	const { render, className, style, closeDelay, ...elementProps } = componentProps;
+	const translator = useTranslator();
 	const { elementRef, present, state } = useInputIndicatorRoot(() => new VolumeIndicatorCore(), {
 		closeDelay,
-		labels: createInputIndicatorLabels(useTranslator())
+		labels: createInputIndicatorLabels(translator)
 	}, { replayOnUpdate: false });
 	if (!present) return null;
 	return /* @__PURE__ */ jsx(VolumeIndicatorProvider, {

package/dist/default/ui/volume-indicator/volume-indicator-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"volume-indicator-root.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-root.tsx"],"sourcesContent":["import { createInputIndicatorLabels, VolumeIndicatorCore, VolumeIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicator/use-input-indicator-root';\nimport { VolumeIndicatorProvider } from './context';\n\nexport interface VolumeIndicatorRootProps\n extends UIComponentProps<'div', VolumeIndicatorCore.State~~>,\n~~ Omit<VolumeIndicatorCore.Props, 'labels'> {}\n\nexport const VolumeIndicatorRoot = forwardRef(function VolumeIndicatorRoot(\n componentProps: VolumeIndicatorRootProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, closeDelay, ...elementProps } = componentProps;\n const translator = useTranslator();\n const { elementRef, present, state } = useInputIndicatorRoot(\n () => new VolumeIndicatorCore(),\n {\n closeDelay,\n labels: createInputIndicatorLabels(translator),\n },\n { replayOnUpdate: false }\n );\n\n if (!present) return null;\n\n return (\n <VolumeIndicatorProvider value={{ state }}>\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: VolumeIndicatorDataAttrs,\n ref: [forwardedRef, elementRef],\n props: [elementProps],\n }\n )}\n </VolumeIndicatorProvider>\n );\n});\n\nexport namespace VolumeIndicatorRoot {\n export type Props = VolumeIndicatorRootProps;\n export type State = VolumeIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;~~AAcA~~,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,GAAG,iBAAiB;~~CAElE~~,MAAM,EAAE,YAAY,SAAS,UAAU,4BAC/B,IAAI,oBAAoB,GAC9B;EACE;EACA,QAAQ,~~2BALO~~,~~cAK6B,CAAC~~;CAC/C,GACA,EAAE,gBAAgB,MAAM,CAC1B;~~CAEA~~,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,yBAAD;EAAyB,OAAO,EAAE,MAAM;EACrC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CAAC,YAAY;EACtB,CACF;CACuB,CAAA;AAE7B,CAAC"}
1	+ {"version":3,"file":"volume-indicator-root.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-root.tsx"],"sourcesContent":["import { createInputIndicatorLabels, VolumeIndicatorCore, VolumeIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicator/use-input-indicator-root';\nimport { VolumeIndicatorProvider } from './context';\n\nexport interface VolumeIndicatorRootProps\n extends UIComponentProps<'div', VolumeIndicatorCore.State>, Omit<VolumeIndicatorCore.Props, 'labels'> {}\n\nexport const VolumeIndicatorRoot = forwardRef(function VolumeIndicatorRoot(\n componentProps: VolumeIndicatorRootProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, closeDelay, ...elementProps } = componentProps;\n const translator = useTranslator();\n const { elementRef, present, state } = useInputIndicatorRoot(\n () => new VolumeIndicatorCore(),\n {\n closeDelay,\n labels: createInputIndicatorLabels(translator),\n },\n { replayOnUpdate: false }\n );\n if (!present) return null;\n\n return (\n <VolumeIndicatorProvider value={{ state }}>\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: VolumeIndicatorDataAttrs,\n ref: [forwardedRef, elementRef],\n props: [elementProps],\n }\n )}\n </VolumeIndicatorProvider>\n );\n});\n\nexport namespace VolumeIndicatorRoot {\n export type Props = VolumeIndicatorRootProps;\n export type State = VolumeIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,GAAG,iBAAiB;CAClE,MAAM,aAAa,cAAc;CACjC,MAAM,EAAE,YAAY,SAAS,UAAU,4BAC/B,IAAI,oBAAoB,GAC9B;EACE;EACA,QAAQ,2BAA2B,UAAU;CAC/C,GACA,EAAE,gBAAgB,MAAM,CAC1B;CACA,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,yBAAD;EAAyB,OAAO,EAAE,MAAM;EACrC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CAAC,YAAY;EACtB,CACF;CACuB,CAAA;AAE7B,CAAC"}

package/dist/default/ui/volume-popover/context.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+//#region src/ui/volume-popover/context.tsx
+const VolumePopoverContext = createContext(null);
+const VolumePopoverContextProvider = VolumePopoverContext.Provider;
+function useVolumePopoverContext() {
+	const context = useContext(VolumePopoverContext);
+	if (!context) throw new Error("VolumePopover compound components must be used within a VolumePopover.Root");
+	return context;
+}
+//#endregion
+export { VolumePopoverContextProvider, useVolumePopoverContext };
+//# sourceMappingURL=context.js.map

package/dist/default/ui/volume-popover/context.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/volume-popover/context.tsx"],"sourcesContent":["import type { VolumePopoverCore } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\nexport interface VolumePopoverContextValue {\n state: VolumePopoverCore.State;\n}\n\nconst VolumePopoverContext = createContext<VolumePopoverContextValue | null>(null);\n\nexport const VolumePopoverContextProvider = VolumePopoverContext.Provider;\n\nexport function useVolumePopoverContext(): VolumePopoverContextValue {\n const context = useContext(VolumePopoverContext);\n if (!context) throw new Error('VolumePopover compound components must be used within a VolumePopover.Root');\n\n return context;\n}\n"],"mappings":";;AAOA,MAAM,uBAAuB,cAAgD,IAAI;AAEjF,MAAa,+BAA+B,qBAAqB;AAEjE,SAAgB,0BAAqD;CACnE,MAAM,UAAU,WAAW,oBAAoB;CAC/C,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,4EAA4E;CAE1G,OAAO;AACT"}

package/dist/default/ui/volume-popover/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { index_parts_exports } from "./index.parts.js";
2	+ export { index_parts_exports as VolumePopover };

package/dist/default/ui/volume-popover/index.parts.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { VolumePopoverPopup } from "./volume-popover-popup.js";
+import { VolumePopoverRoot } from "./volume-popover-root.js";
+import { VolumePopoverTrigger } from "./volume-popover-trigger.js";
+//#region src/ui/volume-popover/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Popup: () => VolumePopoverPopup,
+	Root: () => VolumePopoverRoot,
+	Trigger: () => VolumePopoverTrigger
+});
+//#endregion
+export { VolumePopoverPopup as Popup, VolumePopoverRoot as Root, VolumePopoverTrigger as Trigger, index_parts_exports };
+//# sourceMappingURL=index.parts.js.map

package/dist/default/ui/volume-popover/index.parts.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-popover/index.parts.ts"],"sourcesContent":["export { VolumePopoverPopup as Popup, type VolumePopoverPopupProps as PopupProps } from './volume-popover-popup';\nexport { VolumePopoverRoot as Root, type VolumePopoverRootProps as RootProps } from './volume-popover-root';\nexport {\n VolumePopoverTrigger as Trigger,\n type VolumePopoverTriggerProps as TriggerProps,\n} from './volume-popover-trigger';\n"],"mappings":""}

package/dist/default/ui/volume-popover/volume-popover-popup.js ADDED Viewed

@@ -0,0 +1,21 @@
+import { PopoverPopup } from "../popover/popover-popup.js";
+import { useVolumePopoverContext } from "./context.js";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { VolumePopoverDataAttrs } from "@videojs/core";
+//#region src/ui/volume-popover/volume-popover-popup.tsx
+/** Positioned volume content. Omitted when volume level controls are unavailable. */
+const VolumePopoverPopup = forwardRef(function VolumePopoverPopup(props, forwardedRef) {
+	const { state } = useVolumePopoverContext();
+	if (state.hidden) return null;
+	return /* @__PURE__ */ jsx(PopoverPopup, {
+		ref: forwardedRef,
+		...getStateDataAttrs(state, VolumePopoverDataAttrs),
+		...props
+	});
+});
+//#endregion
+export { VolumePopoverPopup };
+//# sourceMappingURL=volume-popover-popup.js.map

package/dist/default/ui/volume-popover/volume-popover-popup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"volume-popover-popup.js","names":[],"sources":["../../../../src/ui/volume-popover/volume-popover-popup.tsx"],"sourcesContent":["import { VolumePopoverDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { forwardRef } from 'react';\n\nimport { PopoverPopup, type PopoverPopupProps } from '../popover/popover-popup';\nimport { useVolumePopoverContext } from './context';\n\nexport interface VolumePopoverPopupProps extends PopoverPopupProps {}\n\n/** Positioned volume content. Omitted when volume level controls are unavailable. */\nexport const VolumePopoverPopup = forwardRef<HTMLDivElement, VolumePopoverPopupProps>(\n function VolumePopoverPopup(props, forwardedRef) {\n const { state } = useVolumePopoverContext();\n if (state.hidden) return null;\n\n return <PopoverPopup ref={forwardedRef} {...getStateDataAttrs(state, VolumePopoverDataAttrs)} {...props} />;\n }\n);\n\nexport namespace VolumePopoverPopup {\n export type Props = VolumePopoverPopupProps;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,OAAO,cAAc;CAC/C,MAAM,EAAE,UAAU,wBAAwB;CAC1C,IAAI,MAAM,QAAQ,OAAO;CAEzB,OAAO,oBAAC,cAAD;EAAc,KAAK;EAAc,GAAI,kBAAkB,OAAO,sBAAsB;EAAG,GAAI;CAAQ,CAAA;AAC5G,CACF"}

package/dist/default/ui/volume-popover/volume-popover-root.js ADDED Viewed

@@ -0,0 +1,47 @@
+import { usePlayer } from "../../player/context.js";
+import { usePopoverContext } from "../popover/context.js";
+import { PopoverRoot } from "../popover/popover-root.js";
+import { VolumePopoverContextProvider } from "./context.js";
+import { selectVolume } from "@videojs/core/dom";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { VolumePopoverCore } from "@videojs/core";
+//#region src/ui/volume-popover/volume-popover-root.tsx
+const unavailableVolume = {
+	volume: 0,
+	muted: false,
+	volumeAvailability: "unsupported",
+	mutedAvailability: "unsupported",
+	setVolume: () => 0,
+	toggleMuted: () => false
+};
+/** Owns volume availability and the popover interaction lifecycle. */
+function VolumePopoverRoot({ children, ...props }) {
+	const volume = usePlayer(selectVolume);
+	const [core] = useState(() => new VolumePopoverCore(props));
+	core.setProps(props);
+	core.setMedia(volume ?? unavailableVolume);
+	return /* @__PURE__ */ jsx(PopoverRoot, {
+		...props,
+		children: /* @__PURE__ */ jsx(VolumePopoverState, {
+			core,
+			children
+		})
+	});
+}
+function VolumePopoverState({ core, children }) {
+	const { popover } = usePopoverContext();
+	core.setInput(popover.input.current);
+	const state = core.getState();
+	useEffect(() => {
+		if (state.hidden) popover.close("imperative-action");
+	}, [popover, state.hidden]);
+	return /* @__PURE__ */ jsx(VolumePopoverContextProvider, {
+		value: { state },
+		children
+	});
+}
+//#endregion
+export { VolumePopoverRoot };
+//# sourceMappingURL=volume-popover-root.js.map

package/dist/default/ui/volume-popover/volume-popover-root.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"volume-popover-root.js","names":["Popover.Root"],"sources":["../../../../src/ui/volume-popover/volume-popover-root.tsx"],"sourcesContent":["import { VolumePopoverCore } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\nimport type { MediaVolumeState } from '@videojs/media';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { Popover } from '../popover';\nimport { usePopoverContext } from '../popover/context';\nimport type { PopoverRootProps } from '../popover/popover-root';\nimport { VolumePopoverContextProvider } from './context';\n\nconst unavailableVolume: MediaVolumeState = {\n volume: 0,\n muted: false,\n volumeAvailability: 'unsupported',\n mutedAvailability: 'unsupported',\n setVolume: () => 0,\n toggleMuted: () => false,\n};\n\nexport interface VolumePopoverRootProps extends PopoverRootProps {}\n\n/** Owns volume availability and the popover interaction lifecycle. */\nexport function VolumePopoverRoot({ children, ...props }: VolumePopoverRootProps): ReactNode {\n const volume = usePlayer(selectVolume);\n const [core] = useState(() => new VolumePopoverCore(props));\n\n core.setProps(props);\n core.setMedia(volume ?? unavailableVolume);\n\n return (\n <Popover.Root {...props}>\n <VolumePopoverState core={core}>{children}</VolumePopoverState>\n </Popover.Root>\n );\n}\n\nfunction VolumePopoverState({ core, children }: { core: VolumePopoverCore; children?: ReactNode }): ReactNode {\n const { popover } = usePopoverContext();\n\n core.setInput(popover.input.current);\n const state = core.getState();\n\n useEffect(() => {\n if (state.hidden) popover.close('imperative-action');\n }, [popover, state.hidden]);\n\n return <VolumePopoverContextProvider value={{ state }}>{children}</VolumePopoverContextProvider>;\n}\n\nexport namespace VolumePopoverRoot {\n export type Props = VolumePopoverRootProps;\n export type State = VolumePopoverCore.State;\n}\n"],"mappings":";;;;;;;;;AAYA,MAAM,oBAAsC;CAC1C,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,mBAAmB;CACnB,iBAAiB;CACjB,mBAAmB;AACrB;;AAKA,SAAgB,kBAAkB,EAAE,UAAU,GAAG,SAA4C;CAC3F,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,CAAC,QAAQ,eAAe,IAAI,kBAAkB,KAAK,CAAC;CAE1D,KAAK,SAAS,KAAK;CACnB,KAAK,SAAS,UAAU,iBAAiB;CAEzC,OACE,oBAACA,aAAD;EAAc,GAAI;EAChB,UAAA,oBAAC,oBAAD;GAA0B;GAAO;EAA6B,CAAA;CAClD,CAAA;AAElB;AAEA,SAAS,mBAAmB,EAAE,MAAM,YAA0E;CAC5G,MAAM,EAAE,YAAY,kBAAkB;CAEtC,KAAK,SAAS,QAAQ,MAAM,OAAO;CACnC,MAAM,QAAQ,KAAK,SAAS;CAE5B,gBAAgB;EACd,IAAI,MAAM,QAAQ,QAAQ,MAAM,mBAAmB;CACrD,GAAG,CAAC,SAAS,MAAM,MAAM,CAAC;CAE1B,OAAO,oBAAC,8BAAD;EAA8B,OAAO,EAAE,MAAM;EAAI;CAAuC,CAAA;AACjG"}

package/dist/default/ui/volume-popover/volume-popover-trigger.js ADDED Viewed

@@ -0,0 +1,32 @@
+import { renderElement } from "../../utils/use-render.js";
+import { usePopoverContext } from "../popover/context.js";
+import { PopoverTrigger } from "../popover/popover-trigger.js";
+import { useVolumePopoverContext } from "./context.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/volume-popover/volume-popover-trigger.tsx
+/** Opens the volume popup, or renders its mute-button fallback when volume level controls are unavailable. */
+const VolumePopoverTrigger = forwardRef(function VolumePopoverTrigger({ render, className, style, ...elementProps }, forwardedRef) {
+	const { state: popoverState } = usePopoverContext();
+	const { state } = useVolumePopoverContext();
+	if (!state.hidden) return /* @__PURE__ */ jsx(PopoverTrigger, {
+		ref: forwardedRef,
+		render,
+		className,
+		style,
+		...elementProps
+	});
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state: popoverState,
+		ref: forwardedRef,
+		props: [{ type: "button" }, elementProps]
+	});
+});
+//#endregion
+export { VolumePopoverTrigger };
+//# sourceMappingURL=volume-popover-trigger.js.map

package/dist/default/ui/volume-popover/volume-popover-trigger.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"volume-popover-trigger.js","names":[],"sources":["../../../../src/ui/volume-popover/volume-popover-trigger.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from '../popover/context';\nimport { PopoverTrigger, type PopoverTriggerProps } from '../popover/popover-trigger';\nimport { useVolumePopoverContext } from './context';\n\nexport interface VolumePopoverTriggerProps extends PopoverTriggerProps {}\n\n/** Opens the volume popup, or renders its mute-button fallback when volume level controls are unavailable. */\nexport const VolumePopoverTrigger = forwardRef<HTMLButtonElement, VolumePopoverTriggerProps>(\n function VolumePopoverTrigger({ render, className, style, ...elementProps }, forwardedRef) {\n const { state: popoverState } = usePopoverContext();\n const { state } = useVolumePopoverContext();\n\n if (!state.hidden) {\n return (\n <PopoverTrigger ref={forwardedRef} render={render} className={className} style={style} {...elementProps} />\n );\n }\n\n return renderElement(\n 'button',\n { render, className, style },\n {\n state: popoverState,\n ref: forwardedRef,\n props: [{ type: 'button' as const }, elementProps],\n }\n );\n }\n);\n\nexport namespace VolumePopoverTrigger {\n export type Props = VolumePopoverTriggerProps;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,uBAAuB,WAClC,SAAS,qBAAqB,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAAgB,cAAc;CACzF,MAAM,EAAE,OAAO,iBAAiB,kBAAkB;CAClD,MAAM,EAAE,UAAU,wBAAwB;CAE1C,IAAI,CAAC,MAAM,QACT,OACE,oBAAC,gBAAD;EAAgB,KAAK;EAAsB;EAAmB;EAAkB;EAAO,GAAI;CAAe,CAAA;CAI9G,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAO;EACP,KAAK;EACL,OAAO,CAAC,EAAE,MAAM,SAAkB,GAAG,YAAY;CACnD,CACF;AACF,CACF"}

package/dist/default/ui/volume-slider/volume-slider-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"volume-slider-root.js","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"sourcesContent":["import { VolumeSliderCore, VolumeSliderDataAttrs } from '@videojs/core';\nimport { createWheelStep, getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { listen } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useRef, useState } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopVolume = {\n volume: 0,\n muted: false,\n volumeAvailability: 'unsupported' as const,\n mutedAvailability: 'unsupported' as const,\n setVolume: () => 0,\n toggleMuted: () => false,\n};\n\nexport interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {\n onDragStart?: (() => void) \| undefined;\n onDragEnd?: (() => void) \| undefined;\n}\n\nexport const VolumeSliderRoot = forwardRef<HTMLDivElement, VolumeSliderRootProps>(\n function VolumeSliderRoot(componentProps, forwardedRef) {\n const {\n render,\n className,\n style,\n label,\n orientation,\n step = VolumeSliderCore.defaultProps.step,\n largeStep = VolumeSliderCore.defaultProps.largeStep,\n wheelStep = VolumeSliderCore.defaultProps.wheelStep,\n disabled,\n thumbAlignment,\n onDragStart,\n onDragEnd,\n ...elementProps\n } = componentProps;\n\n const volume = usePlayer(selectVolume);\n const translator = useTranslator();\n const locale = useLocale();\n const isUnavailable = volume?.volumeAvailability !== 'available';\n const isDisabled = Boolean(disabled) \|\| isUnavailable;\n\n const [core] = useState(() => new VolumeSliderCore());\n core.setProps({ label, orientation, step, largeStep, wheelStep, disabled, thumbAlignment });\n core.setFormatLocale(locale);\n\n // Keep refs to the latest dynamic values for stable closures.\n const volumeRef = useLatestRef(volume);\n const disabledRef = useLatestRef(isDisabled);\n\n const getPercent = () => (volumeRef.current?.volume ?? 0) * 100;\n const getStepPercent = () => core.getStepPercent();\n const setVolume = (percent: number) => volumeRef.current?.setVolume(percent / 100);\n\n const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } =\n useSlider<VolumeSliderCore.State>({\n computeState: (input) => {\n core.setInput(input);\n core.setMedia(volume ?? noopVolume);\n return core.getState();\n },\n getPercent,\n getStepPercent,\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled: isDisabled,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getSliderCSSVars,\n onValueChange: setVolume,\n onValueCommit: setVolume,\n onDragStart,\n onDragEnd,\n });\n\n const [wheelHandler] = useState(() =>\n createWheelStep({\n isDisabled: () => disabledRef.current,\n getPercent: () => (volumeRef.current?.volume ?? 0) * 100,\n getStepPercent: () => core.getWheelStepPercent(),\n onValueChange: (percent) => volumeRef.current?.setVolume(percent / 100),\n })\n );\n\n // Attach non-passive wheel listener via callback ref so it covers\n // late-mounted elements (null → mounted after volume appears).\n const wheelCleanupRef = useRef<(() => void) \| null>(null);\n const wheelRef = useCallback(\n (element: HTMLDivElement \| null) => {\n wheelCleanupRef.current?.();\n wheelCleanupRef.current = null;\n if (element) {\n wheelCleanupRef.current = listen(element, 'wheel', wheelHandler.onWheel, { passive: false });\n }\n },\n [wheelHandler]\n );\n\n if (!volume) {\n if (__DEV__) logMissingFeature('VolumeSlider', 'volume');\n return null;\n }\n\n if (state.hidden) return null;\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.valueFromPercent(state.pointerPercent),\n input,\n getPointerValue: (percent) => core.valueFromPercent(percent),\n thumbRef,\n thumbProps,\n stateAttrMap: VolumeSliderDataAttrs,\n getAttrs: (sliderState) => {\n const attrs = core.getAttrs(sliderState as VolumeSliderCore.State);\n return {\n ...attrs,\n 'aria-label': translateText(attrs['aria-label'], translator),\n 'aria-valuetext': translateText(\n attrs['aria-valuetext'],\n translator,\n core.getValueTextParams(sliderState as VolumeSliderCore.State)\n ),\n };\n },\n formatValue: (value) => `${Math.round(value)}%`,\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: VolumeSliderDataAttrs,\n ref: [forwardedRef, rootRef, wheelRef],\n props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n }\n);\n\nexport namespace VolumeSliderRoot {\n export type Props = VolumeSliderRootProps;\n export type State = VolumeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,aAAa;CACjB,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,mBAAmB;CACnB,iBAAiB;CACjB,mBAAmB;AACrB;AAOA,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,gBAAgB,cAAc;CACtD,MAAM,EACJ,QACA,WACA,OACA,OACA,aACA,OAAO,iBAAiB,aAAa,MACrC,YAAY,iBAAiB,aAAa,WAC1C,YAAY,iBAAiB,aAAa,WAC1C,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;~~CACzB~~,MAAM,gBAAgB,QAAQ,uBAAuB;CACrD,MAAM,aAAa,QAAQ,QAAQ,KAAK;CAExC,MAAM,CAAC,QAAQ,eAAe,IAAI,iBAAiB,CAAC;~~CACpD~~,KAAK,SAAS;EAAE;EAAO;EAAa;EAAM;EAAW;EAAW;EAAU;CAAe,CAAC;CAC1F,KAAK,gBAAgB,MAAM;CAG3B,MAAM,YAAY,aAAa,MAAM;CACrC,MAAM,cAAc,aAAa,UAAU;CAE3C,MAAM,oBAAoB,UAAU,SAAS,UAAU,KAAK;CAC5D,MAAM,uBAAuB,KAAK,eAAe;CACjD,MAAM,aAAa,YAAoB,UAAU,SAAS,UAAU,UAAU,GAAG;CAEjF,MAAM,EAAE,OAAO,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eACtE,UAAkC;EAChC,eAAe,UAAU;GACvB,KAAK,SAAS,KAAK;GACnB,KAAK,SAAS,UAAU,UAAU;GAClC,OAAO,KAAK,SAAS;EACvB;EACA;EACA;EACA,2BAA2B,KAAK,oBAAoB;EACpD;EACA,UAAU;EACV,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,SAAS;EACjE,YAAY;EACZ,eAAe;EACf,eAAe;EACf;EACA;CACF,CAAC;CAEH,MAAM,CAAC,gBAAgB,eACrB,gBAAgB;EACd,kBAAkB,YAAY;EAC9B,mBAAmB,UAAU,SAAS,UAAU,KAAK;EACrD,sBAAsB,KAAK,oBAAoB;EAC/C,gBAAgB,YAAY,UAAU,SAAS,UAAU,UAAU,GAAG;CACxE,CAAC,CACH;CAIA,MAAM,kBAAkB,OAA4B,IAAI;CACxD,MAAM,WAAW,aACd,YAAmC;EAClC,gBAAgB,UAAU;EAC1B,gBAAgB,UAAU;~~EAC1B~~,IAAI,SACF,gBAAgB,UAAU,OAAO,SAAS,SAAS,aAAa,SAAS,EAAE,SAAS,MAAM,CAAC;CAE/F,GACA,CAAC,YAAY,CACf;CAEA,IAAI,CAAC,~~QAEH~~,OAAO;CAGT,IAAI,MAAM,QAAQ,OAAO;CAEzB,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,cAAc;GACxD;GACA,kBAAkB,YAAY,KAAK,iBAAiB,OAAO;GAC3D;GACA;GACA,cAAc;GACd,WAAW,gBAAgB;IACzB,MAAM,QAAQ,KAAK,SAAS,WAAqC;~~IACjE~~,OAAO;KACL,GAAG;KACH,cAAc,cAAc,MAAM,eAAe,UAAU;KAC3D,kBAAkB,cAChB,MAAM,mBACN,YACA,KAAK,mBAAmB,WAAqC,CAC/D;IACF;GACF;GACA,cAAc,UAAU,GAAG,KAAK,MAAM,KAAK,EAAE;EAC/C;EAEC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK;IAAC;IAAc;IAAS;GAAQ;GACrC,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;IAAU,EAAE;IAAG;IAAW;GAAY;EAC1E,CACF;CACc,CAAA;AAEpB,CACF"}
1	+ {"version":3,"file":"volume-slider-root.js","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"sourcesContent":["import { VolumeSliderCore, VolumeSliderDataAttrs } from '@videojs/core';\nimport { createWheelStep, getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { listen } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useRef, useState } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopVolume = {\n volume: 0,\n muted: false,\n volumeAvailability: 'unsupported' as const,\n mutedAvailability: 'unsupported' as const,\n setVolume: () => 0,\n toggleMuted: () => false,\n};\n\nexport interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {\n onDragStart?: (() => void) \| undefined;\n onDragEnd?: (() => void) \| undefined;\n}\n\nexport const VolumeSliderRoot = forwardRef<HTMLDivElement, VolumeSliderRootProps>(\n function VolumeSliderRoot(componentProps, forwardedRef) {\n const {\n render,\n className,\n style,\n label,\n orientation,\n step = VolumeSliderCore.defaultProps.step,\n largeStep = VolumeSliderCore.defaultProps.largeStep,\n wheelStep = VolumeSliderCore.defaultProps.wheelStep,\n disabled,\n thumbAlignment,\n onDragStart,\n onDragEnd,\n ...elementProps\n } = componentProps;\n\n const volume = usePlayer(selectVolume);\n const translator = useTranslator();\n const locale = useLocale();\n\n const isUnavailable = volume?.volumeAvailability !== 'available';\n const isDisabled = Boolean(disabled) \|\| isUnavailable;\n\n const [core] = useState(() => new VolumeSliderCore());\n\n core.setProps({ label, orientation, step, largeStep, wheelStep, disabled, thumbAlignment });\n core.setFormatLocale(locale);\n\n // Keep refs to the latest dynamic values for stable closures.\n const volumeRef = useLatestRef(volume);\n const disabledRef = useLatestRef(isDisabled);\n\n const getPercent = () => (volumeRef.current?.volume ?? 0) * 100;\n const getStepPercent = () => core.getStepPercent();\n const setVolume = (percent: number) => volumeRef.current?.setVolume(percent / 100);\n\n const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } =\n useSlider<VolumeSliderCore.State>({\n computeState: (input) => {\n core.setInput(input);\n core.setMedia(volume ?? noopVolume);\n return core.getState();\n },\n getPercent,\n getStepPercent,\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled: isDisabled,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getSliderCSSVars,\n onValueChange: setVolume,\n onValueCommit: setVolume,\n onDragStart,\n onDragEnd,\n });\n\n const [wheelHandler] = useState(() =>\n createWheelStep({\n isDisabled: () => disabledRef.current,\n getPercent: () => (volumeRef.current?.volume ?? 0) * 100,\n getStepPercent: () => core.getWheelStepPercent(),\n onValueChange: (percent) => volumeRef.current?.setVolume(percent / 100),\n })\n );\n\n // Attach non-passive wheel listener via callback ref so it covers\n // late-mounted elements (null → mounted after volume appears).\n const wheelCleanupRef = useRef<(() => void) \| null>(null);\n const wheelRef = useCallback(\n (element: HTMLDivElement \| null) => {\n wheelCleanupRef.current?.();\n wheelCleanupRef.current = null;\n\n if (element) {\n wheelCleanupRef.current = listen(element, 'wheel', wheelHandler.onWheel, { passive: false });\n }\n },\n [wheelHandler]\n );\n\n if (!volume) {\n if (__DEV__) logMissingFeature('VolumeSlider', 'volume');\n\n return null;\n }\n\n if (state.hidden) return null;\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.valueFromPercent(state.pointerPercent),\n input,\n getPointerValue: (percent) => core.valueFromPercent(percent),\n thumbRef,\n thumbProps,\n stateAttrMap: VolumeSliderDataAttrs,\n getAttrs: (sliderState) => {\n const attrs = core.getAttrs(sliderState as VolumeSliderCore.State);\n\n return {\n ...attrs,\n 'aria-label': translateText(attrs['aria-label'], translator),\n 'aria-valuetext': translateText(\n attrs['aria-valuetext'],\n translator,\n core.getValueTextParams(sliderState as VolumeSliderCore.State)\n ),\n };\n },\n formatValue: (value) => `${Math.round(value)}%`,\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: VolumeSliderDataAttrs,\n ref: [forwardedRef, rootRef, wheelRef],\n props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n }\n);\n\nexport namespace VolumeSliderRoot {\n export type Props = VolumeSliderRootProps;\n export type State = VolumeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,aAAa;CACjB,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,mBAAmB;CACnB,iBAAiB;CACjB,mBAAmB;AACrB;AAOA,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,gBAAgB,cAAc;CACtD,MAAM,EACJ,QACA,WACA,OACA,OACA,aACA,OAAO,iBAAiB,aAAa,MACrC,YAAY,iBAAiB,aAAa,WAC1C,YAAY,iBAAiB,aAAa,WAC1C,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CAEzB,MAAM,gBAAgB,QAAQ,uBAAuB;CACrD,MAAM,aAAa,QAAQ,QAAQ,KAAK;CAExC,MAAM,CAAC,QAAQ,eAAe,IAAI,iBAAiB,CAAC;CAEpD,KAAK,SAAS;EAAE;EAAO;EAAa;EAAM;EAAW;EAAW;EAAU;CAAe,CAAC;CAC1F,KAAK,gBAAgB,MAAM;CAG3B,MAAM,YAAY,aAAa,MAAM;CACrC,MAAM,cAAc,aAAa,UAAU;CAE3C,MAAM,oBAAoB,UAAU,SAAS,UAAU,KAAK;CAC5D,MAAM,uBAAuB,KAAK,eAAe;CACjD,MAAM,aAAa,YAAoB,UAAU,SAAS,UAAU,UAAU,GAAG;CAEjF,MAAM,EAAE,OAAO,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eACtE,UAAkC;EAChC,eAAe,UAAU;GACvB,KAAK,SAAS,KAAK;GACnB,KAAK,SAAS,UAAU,UAAU;GAClC,OAAO,KAAK,SAAS;EACvB;EACA;EACA;EACA,2BAA2B,KAAK,oBAAoB;EACpD;EACA,UAAU;EACV,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,SAAS;EACjE,YAAY;EACZ,eAAe;EACf,eAAe;EACf;EACA;CACF,CAAC;CAEH,MAAM,CAAC,gBAAgB,eACrB,gBAAgB;EACd,kBAAkB,YAAY;EAC9B,mBAAmB,UAAU,SAAS,UAAU,KAAK;EACrD,sBAAsB,KAAK,oBAAoB;EAC/C,gBAAgB,YAAY,UAAU,SAAS,UAAU,UAAU,GAAG;CACxE,CAAC,CACH;CAIA,MAAM,kBAAkB,OAA4B,IAAI;CACxD,MAAM,WAAW,aACd,YAAmC;EAClC,gBAAgB,UAAU;EAC1B,gBAAgB,UAAU;EAE1B,IAAI,SACF,gBAAgB,UAAU,OAAO,SAAS,SAAS,aAAa,SAAS,EAAE,SAAS,MAAM,CAAC;CAE/F,GACA,CAAC,YAAY,CACf;CAEA,IAAI,CAAC,QAGH,OAAO;CAGT,IAAI,MAAM,QAAQ,OAAO;CAEzB,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,cAAc;GACxD;GACA,kBAAkB,YAAY,KAAK,iBAAiB,OAAO;GAC3D;GACA;GACA,cAAc;GACd,WAAW,gBAAgB;IACzB,MAAM,QAAQ,KAAK,SAAS,WAAqC;IAEjE,OAAO;KACL,GAAG;KACH,cAAc,cAAc,MAAM,eAAe,UAAU;KAC3D,kBAAkB,cAChB,MAAM,mBACN,YACA,KAAK,mBAAmB,WAAqC,CAC/D;IACF;GACF;GACA,cAAc,UAAU,GAAG,KAAK,MAAM,KAAK,EAAE;EAC/C;EAEC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK;IAAC;IAAc;IAAS;GAAQ;GACrC,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;IAAU,EAAE;IAAG;IAAW;GAAY;EAC1E,CACF;CACc,CAAA;AAEpB,CACF"}

package/dist/default/utils/merge-props.js CHANGED Viewed

@@ -1,19 +1,13 @@
 //#region src/utils/merge-props.ts
-/**
-* Check if a key is an event handler key (on* with capital letter).
-*/
+/** Check if a key is an event handler key (on* with capital letter). */
 function isEventHandlerKey(key) {
 	return key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90;
 }
-/**
-* Check if a key/value pair is an event handler (includes undefined values).
-*/
+/** Check if a key/value pair is an event handler (includes undefined values). */
 function isEventHandler(key, value) {
 	return isEventHandlerKey(key) && (typeof value === "function" || typeof value === "undefined");
 }
-/**
-* Merge two event handlers - external runs first, ours runs second.
-*/
+/** Merge two event handlers - external runs first, ours runs second. */
 function mergeEventHandlers(ours, theirs) {
 	if (!theirs) return ours;
 	if (!ours) return theirs;
@@ -22,16 +16,12 @@ function mergeEventHandlers(ours, theirs) {
 		ours(event);
 	};
 }
-/**
-* Merge two className values - concatenate strings.
-*/
+/** Merge two className values - concatenate strings. */
 function mergeClassNames(ours, theirs) {
 	if (theirs && ours) return `${theirs} ${ours}`;
 	return theirs || ours;
 }
-/**
-* Merge two style objects - theirs overwrites conflicts.
-*/
+/** Merge two style objects - theirs overwrites conflicts. */
 function mergeStyles(ours, theirs) {
 	if (!theirs) return ours;
 	if (!ours) return theirs;
@@ -40,9 +30,7 @@ function mergeStyles(ours, theirs) {
 		...theirs
 	};
 }
-/**
-* Merge a single props object into accumulated result.
-*/
+/** Merge a single props object into accumulated result. */
 function mergeOne(merged, props) {
 	if (!props) return merged;
 	for (const key in props) {
@@ -57,20 +45,22 @@ function mergeOne(merged, props) {
 /**
 * Merge multiple props objects.
 *
-* - Event handlers (on*): chained - external first, ours second
-* - className: concatenated
-* - style: merged objects (external wins conflicts)
-* - other: last one wins
+* - Event handlers (`on*`): chained right to left
+* - `className`: concatenated right to left
+* - `style`: merged with rightmost values winning conflicts
+* - Other props: rightmost value wins
 *
-* @public
 * @example
-* ```ts
-* const merged = mergeProps(
-*   { onClick: ourHandler, className: 'base' },
-*   { onClick: theirHandler, className: 'custom' }
-* );
-* // { onClick: chainedHandler, className: 'custom base' }
-* ```
+*   ```ts
+*   const merged = mergeProps(
+*     { onClick: ourHandler, className: 'base' },
+*     { onClick: theirHandler, className: 'custom' }
+*   );
+*   // { onClick: chainedHandler, className: 'custom base' }
+*   ```;
+*
+* @param propSets - Props objects to merge in order.
+* @public
 */
 function mergeProps(...propSets) {
 	let merged = {};

package/dist/default/utils/merge-props.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["import type { ComponentPropsWithRef, CSSProperties, ElementType, SyntheticEvent } from 'react';\n\ntype Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;\n\n~~/*\n~~ Check if a key is an event handler key (on* with capital letter)~~.\n~~ /\nfunction isEventHandlerKey(key: string): boolean {\n return (\n key.charCodeAt(0) === 111 / o / &&\n key.charCodeAt(1) === 110 / n / &&\n key.charCodeAt(2) >= 65 / A / &&\n key.charCodeAt(2) <= 90 / Z /\n );\n}\n\n~~/\n~~ Check if a key/value pair is an event handler (includes undefined values)~~.\n~~ /\nfunction isEventHandler(key: string, value: unknown): boolean {\n return isEventHandlerKey(key) && (typeof value === 'function' \|\| typeof value === 'undefined');\n}\n\n~~/\n~~ Merge two event handlers - external runs first, ours runs second~~.\n~~ /\nfunction mergeEventHandlers(\n ours: ((event: SyntheticEvent) => void) \| undefined,\n theirs: ((event: SyntheticEvent) => void) \| undefined\n): ((event: SyntheticEvent) => void) \| undefined {\n if (!theirs) return ours;\n if (!ours) return theirs;\n\n return (event: SyntheticEvent) => {\n theirs(event);\n ours(event);\n };\n}\n\n~~/\n~~ Merge two className values - concatenate strings~~.\n~~ /\nfunction mergeClassNames(ours: string \| undefined, theirs: string \| undefined): string \| undefined {\n if (theirs && ours) return `${theirs} ${ours}`;\n return theirs \|\| ours;\n}\n\n~~/\n~~ Merge two style objects - theirs overwrites conflicts~~.\n~~ /\nfunction mergeStyles(ours: CSSProperties \| undefined, theirs: CSSProperties \| undefined): CSSProperties \| undefined {\n if (!theirs) return ours;\n if (!ours) return theirs;\n return { ...ours, ...theirs };\n}\n\n~~/\n~~ Merge a single props object into accumulated result~~.\n~~ /\nfunction mergeOne<T extends ElementType>(\n merged: Record<string, unknown>,\n props: Props<T> \| undefined\n): Record<string, unknown> {\n if (!props) return merged;\n\n for (const key in props) {\n const value = props[key as keyof typeof props];\n\n if (key === 'className') {\n merged.className = mergeClassNames(merged.className as string \| undefined, value as string);\n } else if (key === 'style') {\n merged.style = mergeStyles(merged.style as CSSProperties \| undefined, value as CSSProperties);\n } else if (isEventHandler(key, value)) {\n merged[key] = mergeEventHandlers(\n merged[key] as ((event: SyntheticEvent) => void) \| undefined,\n value as (event: SyntheticEvent) => void\n );\n } else {\n merged[key] = value;\n }\n }\n\n return merged;\n}\n\n/\n Merge multiple props objects.\n \n - Event handlers (on): chained - ~~external~~ ~~first, ours second~~\n - className: concatenated\n * - style: merged ~~objects~~ ~~(external~~ ~~wins~~ conflicts)\n * - ~~other~~: ~~last~~ ~~one~~ wins\n \n @~~public\n * @~~example\n * ```ts\n * const merged = mergeProps(\n * { onClick: ourHandler, className: 'base' },\n * { onClick: theirHandler, className: 'custom' }\n * );\n * // { onClick: chainedHandler, className: 'custom base' }\n * ~~```\~~n */\nexport function mergeProps<T extends ElementType>(...propSets: (Props<T> \| undefined)[]): Props<T> {\n let merged: Record<string, unknown> = {};\n\n for (const props of propSets) {\n merged = mergeOne(merged, props);\n }\n\n return merged as Props<T>;\n}\n"],"mappings":"~~;;;;AAOA~~,SAAS,kBAAkB,KAAsB;CAC/C,OACE,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,KAAK,MACrB,IAAI,WAAW,CAAC,KAAK;AAEzB~~;;;;AAKA~~,SAAS,eAAe,KAAa,OAAyB;CAC5D,OAAO,kBAAkB,GAAG,MAAM,OAAO,UAAU,cAAc,OAAO,UAAU;AACpF~~;;;;AAKA~~,SAAS,mBACP,MACA,QAC+C;CAC/C,IAAI,CAAC,QAAQ,OAAO;~~CACpB~~,IAAI,CAAC,MAAM,OAAO;CAElB,QAAQ,UAA0B;EAChC,OAAO,KAAK;EACZ,KAAK,KAAK;CACZ;AACF~~;;;;AAKA~~,SAAS,gBAAgB,MAA0B,QAAgD;CACjG,IAAI,UAAU,MAAM,OAAO,GAAG,OAAO,GAAG;~~CACxC~~,OAAO,UAAU;AACnB~~;;;;AAKA~~,SAAS,YAAY,MAAiC,QAA8D;CAClH,IAAI,CAAC,QAAQ,OAAO;~~CACpB~~,IAAI,CAAC,MAAM,OAAO;~~CAClB~~,OAAO;EAAE,GAAG;EAAM,GAAG;CAAO;AAC9B~~;;;;AAKA~~,SAAS,SACP,QACA,OACyB;CACzB,IAAI,CAAC,OAAO,OAAO;CAEnB,KAAK,MAAM,OAAO,OAAO;EACvB,MAAM,QAAQ,MAAM;EAEpB,IAAI,QAAQ,aACV,OAAO,YAAY,gBAAgB,OAAO,WAAiC,KAAe;OACrF,IAAI,QAAQ,SACjB,OAAO,QAAQ,YAAY,OAAO,OAAoC,KAAsB;OACvF,IAAI,eAAe,KAAK,KAAK,GAClC,OAAO,OAAO,mBACZ,OAAO,MACP,KACF;OAEA,OAAO,OAAO;CAElB;CAEA,OAAO;AACT~~;;;;;;;;;;;;;;;;;;;AAoBA~~,SAAgB,WAAkC,GAAG,UAA8C;CACjG,IAAI,SAAkC,CAAC;CAEvC,KAAK,MAAM,SAAS,UAClB,SAAS,SAAS,QAAQ,KAAK;CAGjC,OAAO;AACT"}
1	+ {"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["import type { ComponentPropsWithRef, CSSProperties, ElementType, SyntheticEvent } from 'react';\n\ntype Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;\n\n/** Check if a key is an event handler key (on* with capital letter). /\nfunction isEventHandlerKey(key: string): boolean {\n return (\n key.charCodeAt(0) === 111 / o / &&\n key.charCodeAt(1) === 110 / n / &&\n key.charCodeAt(2) >= 65 / A / &&\n key.charCodeAt(2) <= 90 / Z /\n );\n}\n\n/* Check if a key/value pair is an event handler (includes undefined values). /\nfunction isEventHandler(key: string, value: unknown): boolean {\n return isEventHandlerKey(key) && (typeof value === 'function' \|\| typeof value === 'undefined');\n}\n\n/* Merge two event handlers - external runs first, ours runs second. /\nfunction mergeEventHandlers(\n ours: ((event: SyntheticEvent) => void) \| undefined,\n theirs: ((event: SyntheticEvent) => void) \| undefined\n): ((event: SyntheticEvent) => void) \| undefined {\n if (!theirs) return ours;\n\n if (!ours) return theirs;\n\n return (event: SyntheticEvent) => {\n theirs(event);\n ours(event);\n };\n}\n\n/* Merge two className values - concatenate strings. /\nfunction mergeClassNames(ours: string \| undefined, theirs: string \| undefined): string \| undefined {\n if (theirs && ours) return `${theirs} ${ours}`;\n\n return theirs \|\| ours;\n}\n\n/* Merge two style objects - theirs overwrites conflicts. /\nfunction mergeStyles(ours: CSSProperties \| undefined, theirs: CSSProperties \| undefined): CSSProperties \| undefined {\n if (!theirs) return ours;\n\n if (!ours) return theirs;\n\n return { ...ours, ...theirs };\n}\n\n/* Merge a single props object into accumulated result. /\nfunction mergeOne<T extends ElementType>(\n merged: Record<string, unknown>,\n props: Props<T> \| undefined\n): Record<string, unknown> {\n if (!props) return merged;\n\n for (const key in props) {\n const value = props[key as keyof typeof props];\n\n if (key === 'className') {\n merged.className = mergeClassNames(merged.className as string \| undefined, value as string);\n } else if (key === 'style') {\n merged.style = mergeStyles(merged.style as CSSProperties \| undefined, value as CSSProperties);\n } else if (isEventHandler(key, value)) {\n merged[key] = mergeEventHandlers(\n merged[key] as ((event: SyntheticEvent) => void) \| undefined,\n value as (event: SyntheticEvent) => void\n );\n } else {\n merged[key] = value;\n }\n }\n\n return merged;\n}\n\n/\n Merge multiple props objects.\n \n - Event handlers (`on`): chained right to left\n - `className`: concatenated right to left\n * - `style`: merged with rightmost values winning conflicts\n * - Other props: rightmost value wins\n \n @example\n * ```ts\n * const merged = mergeProps(\n * { onClick: ourHandler, className: 'base' },\n * { onClick: theirHandler, className: 'custom' }\n * );\n * // { onClick: chainedHandler, className: 'custom base' }\n * ```;\n \n @param propSets - Props objects to merge in order.\n * @public\n */\nexport function mergeProps<T extends ElementType>(...propSets: (Props<T> \| undefined)[]): Props<T> {\n let merged: Record<string, unknown> = {};\n\n for (const props of propSets) {\n merged = mergeOne(merged, props);\n }\n\n return merged as Props<T>;\n}\n"],"mappings":";;AAKA,SAAS,kBAAkB,KAAsB;CAC/C,OACE,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,KAAK,MACrB,IAAI,WAAW,CAAC,KAAK;AAEzB;;AAGA,SAAS,eAAe,KAAa,OAAyB;CAC5D,OAAO,kBAAkB,GAAG,MAAM,OAAO,UAAU,cAAc,OAAO,UAAU;AACpF;;AAGA,SAAS,mBACP,MACA,QAC+C;CAC/C,IAAI,CAAC,QAAQ,OAAO;CAEpB,IAAI,CAAC,MAAM,OAAO;CAElB,QAAQ,UAA0B;EAChC,OAAO,KAAK;EACZ,KAAK,KAAK;CACZ;AACF;;AAGA,SAAS,gBAAgB,MAA0B,QAAgD;CACjG,IAAI,UAAU,MAAM,OAAO,GAAG,OAAO,GAAG;CAExC,OAAO,UAAU;AACnB;;AAGA,SAAS,YAAY,MAAiC,QAA8D;CAClH,IAAI,CAAC,QAAQ,OAAO;CAEpB,IAAI,CAAC,MAAM,OAAO;CAElB,OAAO;EAAE,GAAG;EAAM,GAAG;CAAO;AAC9B;;AAGA,SAAS,SACP,QACA,OACyB;CACzB,IAAI,CAAC,OAAO,OAAO;CAEnB,KAAK,MAAM,OAAO,OAAO;EACvB,MAAM,QAAQ,MAAM;EAEpB,IAAI,QAAQ,aACV,OAAO,YAAY,gBAAgB,OAAO,WAAiC,KAAe;OACrF,IAAI,QAAQ,SACjB,OAAO,QAAQ,YAAY,OAAO,OAAoC,KAAsB;OACvF,IAAI,eAAe,KAAK,KAAK,GAClC,OAAO,OAAO,mBACZ,OAAO,MACP,KACF;OAEA,OAAO,OAAO;CAElB;CAEA,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,WAAkC,GAAG,UAA8C;CACjG,IAAI,SAAkC,CAAC;CAEvC,KAAK,MAAM,SAAS,UAClB,SAAS,SAAS,QAAQ,KAAK;CAGjC,OAAO;AACT"}

package/dist/default/utils/use-attach-iframe.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-attach-iframe.js","names":[],"sources":["../../../src/utils/use-attach-iframe.ts"],"sourcesContent":["import type { MediaEngineHost } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachIframe<T extends HTMLIFrameElement>(media: MediaEngineHost): RefCallback<T> {\n return useCallback(\n (element: T \| null) => {\n if (element) media.attach?.(element);\n else media.detach?.();\n return () => media.detach?.();\n },\n [media]\n );\n}\n"],"mappings":";;AAIA,SAAgB,gBAA6C,OAAwC;CACnG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;~~EACpB~~,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}
1	+ {"version":3,"file":"use-attach-iframe.js","names":[],"sources":["../../../src/utils/use-attach-iframe.ts"],"sourcesContent":["import type { MediaEngineHost } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachIframe<T extends HTMLIFrameElement>(media: MediaEngineHost): RefCallback<T> {\n return useCallback(\n (element: T \| null) => {\n if (element) media.attach?.(element);\n else media.detach?.();\n\n return () => media.detach?.();\n },\n [media]\n );\n}\n"],"mappings":";;AAIA,SAAgB,gBAA6C,OAAwC;CACnG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EAEpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}

package/dist/default/utils/use-attach-media.js CHANGED Viewed

@@ -1,5 +1,10 @@
 import { useCallback } from "react";
 //#region src/utils/use-attach-media.ts
+/**
+* Returns a callback ref that attaches an HTML media element to a media engine host and detaches it during cleanup.
+*
+* @param media - Media engine host to attach and detach.
+*/
 function useAttachMedia(media) {
 	return useCallback((element) => {
 		if (element) media.attach?.(element);

package/dist/default/utils/use-attach-media.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["import type { MediaEngineHost } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachMedia<T extends HTMLMediaElement>(media: MediaEngineHost): RefCallback<T> {\n return useCallback(\n (element: T \| null) => {\n if (element) media.attach?.(element);\n else media.detach?.();\n return () => media.detach?.();\n },\n [media]\n );\n}\n"],"mappings":"~~;;AAIA~~,SAAgB,eAA2C,OAAwC;CACjG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;~~EACpB~~,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}
1	+ {"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["import type { MediaEngineHost } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\n/*\n Returns a callback ref that attaches an HTML media element to a media engine host and detaches it during cleanup.\n \n @param media - Media engine host to attach and detach.\n */\nexport function useAttachMedia<T extends HTMLMediaElement>(media: MediaEngineHost): RefCallback<T> {\n return useCallback(\n (element: T \| null) => {\n if (element) media.attach?.(element);\n else media.detach?.();\n\n return () => media.detach?.();\n },\n [media]\n );\n}\n"],"mappings":";;;;;;;AASA,SAAgB,eAA2C,OAAwC;CACjG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EAEpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}

package/dist/default/utils/use-composed-refs.js CHANGED Viewed

@@ -16,10 +16,10 @@ function setRef(ref, value) {
 * Compose multiple refs into a single callback ref.
 *
 * @example
-* ```tsx
-* const composedRef = composeRefs(ref1, ref2, ref3);
-* return <div ref={composedRef} />;
-* ```
+*   ```tsx
+*   const composedRef = composeRefs(ref1, ref2, ref3);
+*   return <div ref={composedRef} />;
+*   ```;
 */
 function composeRefs(...refs) {
 	const flatRefs = refs.flat();
@@ -40,10 +40,12 @@ function composeRefs(...refs) {
 * Memoized for stable reference.
 *
 * @example
-* ```tsx
-* const composedRef = useComposedRefs(forwardedRef, localRef);
-* return <div ref={composedRef} />;
-* ```
+*   ```tsx
+*   const composedRef = useComposedRefs(forwardedRef, localRef);
+*   return <div ref={composedRef} />;
+*   ```;
+*
+* @param refs - Refs to update from the returned callback.
 */
 function useComposedRefs(...refs) {
 	return useCallback(composeRefs(...refs), [...refs]);

package/dist/default/utils/use-composed-refs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["import { isFunction } from '@videojs/utils/predicate';\nimport type { Ref, RefCallback } from 'react';\n\nimport { useCallback } from 'react';\n\ntype OptionalRef<T> = Ref<T> \| undefined;\n\n/*\n Set a given ref to a given value.\n \n Handles both callback refs and RefObject(s).\n \n @returns Cleanup function if the ref callback returned one (React 19+)\n /\nfunction setRef<T>(ref: OptionalRef<T>, value: T): (() => void) \| void \| undefined {\n if (isFunction(ref)) {\n return ref(value);\n } else if (ref !== null && ref !== undefined) {\n ref.current = value;\n }\n}\n\n/\n Compose multiple refs into a single callback ref.\n \n @example\n * ```tsx\n * const composedRef = composeRefs(ref1, ref2, ref3);\n * return <div ref={composedRef} />;\n * ~~```\~~n /\nexport function composeRefs<T>(...refs: (OptionalRef<T> \| OptionalRef<T>[])[]): RefCallback<T> {\n const flatRefs = refs.flat();\n\n return (node): (() => void) \| void => {\n const cleanups = flatRefs.map((ref) => setRef(ref, node));\n\n // Only return cleanup if any refs returned one (React 19+).\n // React 18 handles cleanup by calling the ref callback with null.\n if (cleanups.some(isFunction)) {\n return () => {\n for (let i = 0; i < cleanups.length; i++) {\n const cleanup = cleanups[i];\n if (isFunction(cleanup)) {\n cleanup();\n } else {\n setRef(flatRefs[i], null);\n }\n }\n };\n }\n };\n}\n\n/\n Hook that composes multiple refs into a single callback ref.\n \n Memoized for stable reference.\n \n @example\n * ```tsx\n * const composedRef = useComposedRefs(forwardedRef, localRef);\n * return <div ref={composedRef} />;\n * ~~```\~~n */\nexport function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T> {\n return useCallback(composeRefs(...refs), [...refs]);\n}\n"],"mappings":";;;;;;;;;;~~AAcA~~,SAAS,OAAU,KAAqB,OAA2C;CACjF,IAAI,WAAW,GAAG,GAChB,OAAO,IAAI,KAAK;MACX,IAAI,QAAQ,QAAQ,QAAQ,KAAA,GACjC,IAAI,UAAU;AAElB;;;;;;;;;;AAWA,SAAgB,YAAe,GAAG,MAA6D;CAC7F,MAAM,WAAW,KAAK,KAAK;CAE3B,QAAQ,SAA8B;EACpC,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO,KAAK,IAAI,CAAC;EAIxD,IAAI,SAAS,KAAK,UAAU,GAC1B,aAAa;GACX,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;~~IACzB~~,IAAI,WAAW,OAAO,GACpB,QAAQ;SAER,OAAO,SAAS,IAAI,IAAI;GAE5B;EACF;CAEJ;AACF~~;;;;;;;;;;;;AAaA~~,SAAgB,gBAAmB,GAAG,MAAwC;CAC5E,OAAO,YAAY,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;AACpD"}
1	+ {"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["import { isFunction } from '@videojs/utils/predicate';\nimport type { Ref, RefCallback } from 'react';\nimport { useCallback } from 'react';\n\ntype OptionalRef<T> = Ref<T> \| undefined;\n\n/*\n Set a given ref to a given value.\n \n Handles both callback refs and RefObject(s).\n \n @returns Cleanup function if the ref callback returned one (React 19+)\n /\nfunction setRef<T>(ref: OptionalRef<T>, value: T): (() => void) \| void \| undefined {\n if (isFunction(ref)) {\n return ref(value);\n } else if (ref !== null && ref !== undefined) {\n ref.current = value;\n }\n}\n\n/\n Compose multiple refs into a single callback ref.\n \n @example\n * ```tsx\n * const composedRef = composeRefs(ref1, ref2, ref3);\n * return <div ref={composedRef} />;\n * ```;\n /\nexport function composeRefs<T>(...refs: (OptionalRef<T> \| OptionalRef<T>[])[]): RefCallback<T> {\n const flatRefs = refs.flat();\n\n return (node): (() => void) \| void => {\n const cleanups = flatRefs.map((ref) => setRef(ref, node));\n\n // Only return cleanup if any refs returned one (React 19+).\n // React 18 handles cleanup by calling the ref callback with null.\n if (cleanups.some(isFunction)) {\n return () => {\n for (let i = 0; i < cleanups.length; i++) {\n const cleanup = cleanups[i];\n\n if (isFunction(cleanup)) {\n cleanup();\n } else {\n setRef(flatRefs[i], null);\n }\n }\n };\n }\n };\n}\n\n/\n Hook that composes multiple refs into a single callback ref.\n \n Memoized for stable reference.\n \n @example\n * ```tsx\n * const composedRef = useComposedRefs(forwardedRef, localRef);\n * return <div ref={composedRef} />;\n * ```;\n \n @param refs - Refs to update from the returned callback.\n */\nexport function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T> {\n return useCallback(composeRefs(...refs), [...refs]);\n}\n"],"mappings":";;;;;;;;;;AAaA,SAAS,OAAU,KAAqB,OAA2C;CACjF,IAAI,WAAW,GAAG,GAChB,OAAO,IAAI,KAAK;MACX,IAAI,QAAQ,QAAQ,QAAQ,KAAA,GACjC,IAAI,UAAU;AAElB;;;;;;;;;;AAWA,SAAgB,YAAe,GAAG,MAA6D;CAC7F,MAAM,WAAW,KAAK,KAAK;CAE3B,QAAQ,SAA8B;EACpC,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO,KAAK,IAAI,CAAC;EAIxD,IAAI,SAAS,KAAK,UAAU,GAC1B,aAAa;GACX,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;IAEzB,IAAI,WAAW,OAAO,GACpB,QAAQ;SAER,OAAO,SAAS,IAAI,IAAI;GAE5B;EACF;CAEJ;AACF;;;;;;;;;;;;;;AAeA,SAAgB,gBAAmB,GAAG,MAAwC;CAC5E,OAAO,YAAY,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;AACpD"}

package/dist/default/utils/use-destroy.js CHANGED Viewed

@@ -2,18 +2,16 @@ import { useLatestRef } from "./use-latest-ref.js";
 import { useEffect, useRef } from "react";
 //#region src/utils/use-destroy.ts
 /**
-* Destroy an instance on unmount, deferring destruction to survive React
-* StrictMode's simulated unmount/re-mount cycle.
+* Destroy an instance on unmount, deferring destruction to survive React StrictMode's simulated unmount/re-mount cycle.
 *
-* StrictMode runs effects, then immediately runs cleanup, then re-runs
-* effects — all synchronously. By deferring `destroy()` to a macrotask,
-* the re-mount effect can cancel it before it fires.
+* StrictMode runs effects, then immediately runs cleanup, then re-runs effects — all synchronously. By deferring
+* `destroy()` to a macrotask, the re-mount effect can cancel it before it fires.
 *
 * @param instance - Object with a `destroy()` method.
-* @param setup - Optional setup called on first mount. Skipped on StrictMode
-*   re-mount since the previous setup was never torn down.
-* @param teardown - Optional teardown called right before `destroy()` on real
-*   unmount. Skipped on StrictMode simulated unmount.
+* @param setup - Optional setup called on first mount. Skipped on StrictMode re-mount since the previous setup was
+*   never torn down.
+* @param teardown - Optional teardown called right before `destroy()` on real unmount. Skipped on StrictMode simulated
+*   unmount.
 */
 function useDestroy(instance, setup, teardown) {
 	const pendingRef = useRef(null);

package/dist/default/utils/use-destroy.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { useLatestRef } from './use-latest-ref';\n\ninterface Destroyable {\n destroy(): void;\n}\n\n/*\n Destroy an instance on unmount, deferring destruction to survive React\n * StrictMode's simulated unmount/re-mount cycle.\n \n StrictMode runs effects, then immediately runs cleanup, then re-runs\n * effects — all synchronously. By deferring `destroy()` to a macrotask~~,\n~~ * the re-mount effect can cancel it before it fires.\n \n @param instance - Object with a `destroy()` method.\n * @param setup - Optional setup called on first mount. Skipped on StrictMode\n * re-mount since the previous setup was never torn down.\n * @param teardown - Optional teardown called right before `destroy()` on real\n * unmount. Skipped on StrictMode simulated unmount.\n */\nexport function useDestroy(instance: Destroyable, setup?: () => void, teardown?: () => void): void {\n const pendingRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const setupRef = useLatestRef(setup);\n const teardownRef = useLatestRef(teardown);\n\n useEffect(() => {\n if (pendingRef.current !== null) {\n clearTimeout(pendingRef.current);\n pendingRef.current = null;\n } else {\n setupRef.current?.();\n }\n\n return () => {\n pendingRef.current = setTimeout(() => {\n teardownRef.current?.();\n instance.destroy();\n }, 0);\n };\n }, [instance]);\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;AAsBA~~,SAAgB,WAAW,UAAuB,OAAoB,UAA6B;CACjG,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,cAAc,aAAa,QAAQ;CAEzC,gBAAgB;EACd,IAAI,WAAW,YAAY,MAAM;GAC/B,aAAa,WAAW,OAAO;GAC/B,WAAW,UAAU;EACvB,OACE,SAAS,UAAU;EAGrB,aAAa;GACX,WAAW,UAAU,iBAAiB;IACpC,YAAY,UAAU;IACtB,SAAS,QAAQ;GACnB,GAAG,CAAC;EACN;CACF,GAAG,CAAC,QAAQ,CAAC;AACf"}
1	+ {"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { useLatestRef } from './use-latest-ref';\n\ninterface Destroyable {\n destroy(): void;\n}\n\n/*\n Destroy an instance on unmount, deferring destruction to survive React StrictMode's simulated unmount/re-mount cycle.\n \n StrictMode runs effects, then immediately runs cleanup, then re-runs effects — all synchronously. By deferring\n * `destroy()` to a macrotask, the re-mount effect can cancel it before it fires.\n \n @param instance - Object with a `destroy()` method.\n * @param setup - Optional setup called on first mount. Skipped on StrictMode re-mount since the previous setup was\n * never torn down.\n * @param teardown - Optional teardown called right before `destroy()` on real unmount. Skipped on StrictMode simulated\n * unmount.\n */\nexport function useDestroy(instance: Destroyable, setup?: () => void, teardown?: () => void): void {\n const pendingRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const setupRef = useLatestRef(setup);\n const teardownRef = useLatestRef(teardown);\n\n useEffect(() => {\n if (pendingRef.current !== null) {\n clearTimeout(pendingRef.current);\n pendingRef.current = null;\n } else {\n setupRef.current?.();\n }\n\n return () => {\n pendingRef.current = setTimeout(() => {\n teardownRef.current?.();\n instance.destroy();\n }, 0);\n };\n }, [instance]);\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,SAAgB,WAAW,UAAuB,OAAoB,UAA6B;CACjG,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,cAAc,aAAa,QAAQ;CAEzC,gBAAgB;EACd,IAAI,WAAW,YAAY,MAAM;GAC/B,aAAa,WAAW,OAAO;GAC/B,WAAW,UAAU;EACvB,OACE,SAAS,UAAU;EAGrB,aAAa;GACX,WAAW,UAAU,iBAAiB;IACpC,YAAY,UAAU;IACtB,SAAS,QAAQ;GACnB,GAAG,CAAC;EACN;CACF,GAAG,CAAC,QAAQ,CAAC;AACf"}

package/dist/default/utils/use-force-render.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["import { useReducer } from 'react';\n\nexport function useForceRender() {\n const [, forceRender] = useReducer((c: number) => c + 1, 0);\n return forceRender;\n}\n\nexport namespace useForceRender {\n export type Result = () => void;\n}\n"],"mappings":";;AAEA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,CAAC;~~CAC1D~~,OAAO;AACT"}
1	+ {"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["import { useReducer } from 'react';\n\nexport function useForceRender() {\n const [, forceRender] = useReducer((c: number) => c + 1, 0);\n\n return forceRender;\n}\n\nexport namespace useForceRender {\n export type Result = () => void;\n}\n"],"mappings":";;AAEA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,CAAC;CAE1D,OAAO;AACT"}

package/dist/default/utils/use-latest-ref.js CHANGED Viewed

@@ -3,8 +3,10 @@ import { useRef } from "react";
 /**
 * Keep a ref that always points to the latest value.
 *
-* Useful for capturing callbacks or derived values inside closures
-* that are created once (e.g. factory callbacks) without stale reads.
+* Useful for capturing callbacks or derived values inside closures that are created once (e.g. factory callbacks)
+* without stale reads.
+*
+* @param value - Value the ref should expose after each render.
 */
 function useLatestRef(value) {
 	const ref = useRef(value);

package/dist/default/utils/use-latest-ref.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-latest-ref.js","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"sourcesContent":["import { useRef } from 'react';\n\n/*\n Keep a ref that always points to the latest value.\n \n Useful for capturing callbacks or derived values inside closures\n * that are created once (e.g. factory callbacks) without stale reads.\n */\nexport function useLatestRef<Value>(value: Value): Readonly<{ current: Value }> {\n const ref = useRef(value);\n ref.current = value;\n return ref;\n}\n\nexport namespace useLatestRef {\n export type Result<Value> = Readonly<{ current: Value }>;\n}\n"],"mappings":"~~;;;;;;;;AAQA~~,SAAgB,aAAoB,OAA4C;CAC9E,MAAM,MAAM,OAAO,KAAK;~~CACxB~~,IAAI,UAAU;CACd,OAAO;AACT"}
1	+ {"version":3,"file":"use-latest-ref.js","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"sourcesContent":["import { useRef } from 'react';\n\n/*\n Keep a ref that always points to the latest value.\n \n Useful for capturing callbacks or derived values inside closures that are created once (e.g. factory callbacks)\n * without stale reads.\n \n @param value - Value the ref should expose after each render.\n */\nexport function useLatestRef<Value>(value: Value): Readonly<{ current: Value }> {\n const ref = useRef(value);\n\n ref.current = value;\n return ref;\n}\n\nexport namespace useLatestRef {\n export type Result<Value> = Readonly<{ current: Value }>;\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,aAAoB,OAA4C;CAC9E,MAAM,MAAM,OAAO,KAAK;CAExB,IAAI,UAAU;CACd,OAAO;AACT"}