@videojs/react 10.0.0-beta.1 → 10.0.0-beta.11

package/dist/dev/ui/tooltip/tooltip-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-root.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"sourcesContent":["'use client';\n\nimport { type TooltipProps as CoreTooltipProps, TooltipCore, TooltipDataAttrs } from '@videojs/core';\nimport { createTooltip, createTransition, type TooltipChangeDetails } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { TooltipContextProvider } from './context';\nimport { useTooltipGroup } from './group-context';\n\nexport interface TooltipRootProps extends CoreTooltipProps {\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  children,\n  ...coreProps\n}: TooltipRootProps): ReactNode {\n  const [core] = useState(() => new TooltipCore(coreProps));\n  core.setProps(coreProps);\n\n  const isControlled = controlledOpen !== undefined;\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\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    });\n\n    // Apply defaultOpen on creation (uncontrolled only)\n    if (!isControlled && defaultOpen) {\n      instance.open();\n    }\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const popupId = useSafeId('tooltip-');\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (controlledOpen === undefined) 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  // Cleanup on unmount\n  useEffect(() => () => tooltip.destroy(), [tooltip]);\n\n  const input = useSnapshot(tooltip.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  return (\n    <TooltipContextProvider value={{ core, tooltip, state, stateAttrMap: TooltipDataAttrs, anchorName, popupId }}>\n      {children}\n    </TooltipContextProvider>\n  );\n}\n\nexport namespace TooltipRoot {\n  export type Props = TooltipRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,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,UACA,GAAG,aAC2B;CAC9B,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,UAAU,CAAC;AACzD,MAAK,SAAS,UAAU;CAExB,MAAM,eAAe,mBAAmB;CAExC,MAAM,mBAAmB,iBAAiB;CAI1C,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CACtE,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,gBAAgB,aAAa,WAAW;CAC9C,MAAM,2BAA2B,aAAa,sBAAsB;CACpE,MAAM,cAAc,aAAa,SAAS;CAC1C,MAAM,WAAW,aAAa,iBAAiB;CAE/C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,kBAAkB;GAC9B,eAAe,UAAmB,YAAkC;AAClE,oBAAgB,UAAU,UAAU,QAAQ;;GAE9C,uBAAuB,aAAsB;AAC3C,4BAAwB,UAAU,SAAS;;GAE7C,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,6BAA6B,yBAAyB;GACtD,gBAAgB,YAAY;GAC5B,aAAa,SAAS;GACvB,CAAC;AAGF,MAAI,CAAC,gBAAgB,YACnB,UAAS,MAAM;AAGjB,SAAO;GACP;CAEF,MAAM,aAAa,WAAW;CAC9B,MAAM,UAAU,UAAU,WAAW;AAGrC,iBAAgB;AACd,MAAI,mBAAmB,OAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;AAC5C,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,SAAQ,MAAM;MAEd,SAAQ,OAAO;IAEhB,CAAC,gBAAgB,QAAQ,CAAC;AAG7B,uBAAsB,QAAQ,SAAS,EAAE,CAAC,QAAQ,CAAC;CAEnD,MAAM,QAAQ,YAAY,QAAQ,MAAM;AACxC,MAAK,SAAS,MAAM;AAGpB,QACE,oBAAC;EAAuB,OAAO;GAAE;GAAM;GAAS,OAHpC,KAAK,UAAU;GAG4B,cAAc;GAAkB;GAAY;GAAS;EACzG;GACsB"}
+{"version":3,"file":"tooltip-root.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"sourcesContent":["'use client';\n\nimport { type TooltipProps as CoreTooltipProps, TooltipCore, TooltipDataAttrs } from '@videojs/core';\nimport { createTooltip, createTransition, type TooltipChangeDetails } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { TooltipContextProvider } from './context';\nimport { useTooltipGroup } from './group-context';\n\nexport interface TooltipRootProps extends CoreTooltipProps {\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  children,\n  ...coreProps\n}: TooltipRootProps): ReactNode {\n  const [core] = useState(() => new TooltipCore(coreProps));\n  core.setProps(coreProps);\n\n  const isControlled = controlledOpen !== undefined;\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\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    });\n\n    // Apply defaultOpen on creation (uncontrolled only)\n    if (!isControlled && defaultOpen) {\n      instance.open();\n    }\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const popupId = useSafeId('tooltip-');\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (controlledOpen === undefined) 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  useDestroy(tooltip);\n\n  const input = useSnapshot(tooltip.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  return (\n    <TooltipContextProvider value={{ core, tooltip, state, stateAttrMap: TooltipDataAttrs, anchorName, popupId }}>\n      {children}\n    </TooltipContextProvider>\n  );\n}\n\nexport namespace TooltipRoot {\n  export type Props = TooltipRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,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,UACA,GAAG,aAC2B;CAC9B,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,UAAU,CAAC;AACzD,MAAK,SAAS,UAAU;CAExB,MAAM,eAAe,mBAAmB;CAExC,MAAM,mBAAmB,iBAAiB;CAI1C,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CACtE,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,gBAAgB,aAAa,WAAW;CAC9C,MAAM,2BAA2B,aAAa,sBAAsB;CACpE,MAAM,cAAc,aAAa,SAAS;CAC1C,MAAM,WAAW,aAAa,iBAAiB;CAE/C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,kBAAkB;GAC9B,eAAe,UAAmB,YAAkC;AAClE,oBAAgB,UAAU,UAAU,QAAQ;;GAE9C,uBAAuB,aAAsB;AAC3C,4BAAwB,UAAU,SAAS;;GAE7C,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,6BAA6B,yBAAyB;GACtD,gBAAgB,YAAY;GAC5B,aAAa,SAAS;GACvB,CAAC;AAGF,MAAI,CAAC,gBAAgB,YACnB,UAAS,MAAM;AAGjB,SAAO;GACP;CAEF,MAAM,aAAa,WAAW;CAC9B,MAAM,UAAU,UAAU,WAAW;AAGrC,iBAAgB;AACd,MAAI,mBAAmB,OAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;AAC5C,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,SAAQ,MAAM;MAEd,SAAQ,OAAO;IAEhB,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,YAAW,QAAQ;CAEnB,MAAM,QAAQ,YAAY,QAAQ,MAAM;AACxC,MAAK,SAAS,MAAM;AAGpB,QACE,oBAAC;EAAuB,OAAO;GAAE;GAAM;GAAS,OAHpC,KAAK,UAAU;GAG4B,cAAc;GAAkB;GAAY;GAAS;EACzG;GACsB"}

package/dist/dev/ui/tooltip/tooltip-trigger.d.ts

@@ -1,6 +1,6 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
 import { TooltipState } from "@videojs/core";
+import * as react from "react";
 
 //#region src/ui/tooltip/tooltip-trigger.d.ts
 interface TooltipTriggerProps extends UIComponentProps<'button', TooltipState> {}

package/dist/dev/ui/volume-slider/volume-slider-root.d.ts

@@ -1,6 +1,6 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
 import { VolumeSliderCore } from "@videojs/core";
+import * as react from "react";
 
 //#region src/ui/volume-slider/volume-slider-root.d.ts
 interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {

package/dist/dev/ui/volume-slider/volume-slider-root.js

@@ -1,14 +1,14 @@
 'use client';
 
 import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { renderElement } from "../../utils/use-render.js";
 import { useSlider } from "../hooks/use-slider.js";
 import { SliderProvider } from "../slider/context.js";
+import { VolumeSliderCore, VolumeSliderDataAttrs } from "@videojs/core";
 import { getSliderCSSVars, logMissingFeature, selectVolume } from "@videojs/core/dom";
 import { forwardRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { SliderDataAttrs, VolumeSliderCore } from "@videojs/core";
 
 //#region src/ui/volume-slider/volume-slider-root.tsx
 const noopVolume = {
@@ -63,7 +63,7 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 			pointerValue: core.valueFromPercent(state.pointerPercent),
 			thumbRef,
 			thumbProps,
-			stateAttrMap: SliderDataAttrs,
+			stateAttrMap: VolumeSliderDataAttrs,
 			getAttrs: (sliderState) => core.getAttrs(sliderState),
 			formatValue: (value) => `${Math.round(value)}%`
 		},
@@ -73,7 +73,7 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 			style
 		}, {
 			state,
-			stateAttrMap: SliderDataAttrs,
+			stateAttrMap: VolumeSliderDataAttrs,
 			ref: [forwardedRef, rootRef],
 			props: [
 				{ style: {

package/dist/dev/ui/volume-slider/volume-slider-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-slider-root.js","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { SliderDataAttrs, VolumeSliderCore } from '@videojs/core';\nimport { getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport { forwardRef, useState } from 'react';\n\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  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      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      ...elementProps\n    } = componentProps;\n\n    const volume = usePlayer(selectVolume);\n\n    const [core] = useState(() => new VolumeSliderCore());\n    core.setProps({ label, orientation, step, largeStep, disabled, thumbAlignment });\n\n    // Keep a ref to the latest volume state for callbacks.\n    const volumeRef = useLatestRef(volume);\n\n    const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<VolumeSliderCore.State>({\n      computeState: (input) => {\n        core.setInput(input);\n        core.setMedia(volume ?? noopVolume);\n        return core.getState();\n      },\n      getPercent: () => (volume ? volume.volume * 100 : 0),\n      getStepPercent: () => core.getStepPercent(),\n      getLargeStepPercent: () => core.getLargeStepPercent(),\n      orientation,\n      disabled,\n      adjustPercent: (rawPercent, thumbSize, trackSize) =>\n        core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n      getCSSVars: getSliderCSSVars,\n      onValueChange: (percent) => {\n        volumeRef.current?.setVolume(percent / 100);\n      },\n      onValueCommit: (percent) => {\n        volumeRef.current?.setVolume(percent / 100);\n      },\n      onDragStart,\n      onDragEnd,\n    });\n\n    if (!volume) {\n      if (__DEV__) logMissingFeature('VolumeSlider', 'volume');\n      return null;\n    }\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.valueFromPercent(state.pointerPercent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: SliderDataAttrs,\n          getAttrs: (sliderState) => core.getAttrs(sliderState as VolumeSliderCore.State),\n          formatValue: (value) => `${Math.round(value)}%`,\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: SliderDataAttrs,\n            ref: [forwardedRef, rootRef],\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":";;;;;;;;;;;;;AAaA,MAAM,aAAa;CACjB,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,iBAAiB;CACjB,mBAAmB;CACpB;AAOD,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,gBAAgB,cAAc;CACtD,MAAM,EACJ,QACA,WACA,OACA,OACA,aACA,OAAO,iBAAiB,aAAa,MACrC,YAAY,iBAAiB,aAAa,WAC1C,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,kBAAkB,CAAC;AACrD,MAAK,SAAS;EAAE;EAAO;EAAa;EAAM;EAAW;EAAU;EAAgB,CAAC;CAGhF,MAAM,YAAY,aAAa,OAAO;CAEtC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAkC;EAChH,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,QAAK,SAAS,UAAU,WAAW;AACnC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,SAAS,OAAO,SAAS,MAAM;EAClD,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;AAC1B,aAAU,SAAS,UAAU,UAAU,IAAI;;EAE7C,gBAAgB,YAAY;AAC1B,aAAU,SAAS,UAAU,UAAU,IAAI;;EAE7C;EACA;EACD,CAAC;AAEF,KAAI,CAAC,QAAQ;AACE,oBAAkB,gBAAgB,SAAS;AACxD,SAAO;;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAsC;GAC/E,cAAc,UAAU,GAAG,KAAK,MAAM,MAAM,CAAC;GAC9C;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;GACc;EAGtB"}
+{"version":3,"file":"volume-slider-root.js","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { VolumeSliderCore, VolumeSliderDataAttrs } from '@videojs/core';\nimport { getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport { forwardRef, useState } from 'react';\n\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  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      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      ...elementProps\n    } = componentProps;\n\n    const volume = usePlayer(selectVolume);\n\n    const [core] = useState(() => new VolumeSliderCore());\n    core.setProps({ label, orientation, step, largeStep, disabled, thumbAlignment });\n\n    // Keep a ref to the latest volume state for callbacks.\n    const volumeRef = useLatestRef(volume);\n\n    const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<VolumeSliderCore.State>({\n      computeState: (input) => {\n        core.setInput(input);\n        core.setMedia(volume ?? noopVolume);\n        return core.getState();\n      },\n      getPercent: () => (volume ? volume.volume * 100 : 0),\n      getStepPercent: () => core.getStepPercent(),\n      getLargeStepPercent: () => core.getLargeStepPercent(),\n      orientation,\n      disabled,\n      adjustPercent: (rawPercent, thumbSize, trackSize) =>\n        core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n      getCSSVars: getSliderCSSVars,\n      onValueChange: (percent) => {\n        volumeRef.current?.setVolume(percent / 100);\n      },\n      onValueCommit: (percent) => {\n        volumeRef.current?.setVolume(percent / 100);\n      },\n      onDragStart,\n      onDragEnd,\n    });\n\n    if (!volume) {\n      if (__DEV__) logMissingFeature('VolumeSlider', 'volume');\n      return null;\n    }\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.valueFromPercent(state.pointerPercent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: VolumeSliderDataAttrs,\n          getAttrs: (sliderState) => core.getAttrs(sliderState as VolumeSliderCore.State),\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],\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":";;;;;;;;;;;;;AAaA,MAAM,aAAa;CACjB,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,iBAAiB;CACjB,mBAAmB;CACpB;AAOD,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,gBAAgB,cAAc;CACtD,MAAM,EACJ,QACA,WACA,OACA,OACA,aACA,OAAO,iBAAiB,aAAa,MACrC,YAAY,iBAAiB,aAAa,WAC1C,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,kBAAkB,CAAC;AACrD,MAAK,SAAS;EAAE;EAAO;EAAa;EAAM;EAAW;EAAU;EAAgB,CAAC;CAGhF,MAAM,YAAY,aAAa,OAAO;CAEtC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAkC;EAChH,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,QAAK,SAAS,UAAU,WAAW;AACnC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,SAAS,OAAO,SAAS,MAAM;EAClD,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;AAC1B,aAAU,SAAS,UAAU,UAAU,IAAI;;EAE7C,gBAAgB,YAAY;AAC1B,aAAU,SAAS,UAAU,UAAU,IAAI;;EAE7C;EACA;EACD,CAAC;AAEF,KAAI,CAAC,QAAQ;AACE,oBAAkB,gBAAgB,SAAS;AACxD,SAAO;;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAsC;GAC/E,cAAc,UAAU,GAAG,KAAK,MAAM,MAAM,CAAC;GAC9C;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;GACc;EAGtB"}

package/dist/dev/utils/attach-media-element.d.ts

@@ -0,0 +1,9 @@
+//#region src/utils/attach-media-element.d.ts
+interface Attachable {
+  attach(target: EventTarget): void;
+  detach(): void;
+}
+declare function attachMediaElement<T extends HTMLVideoElement>(media: Attachable): (element: T | null) => void;
+//#endregion
+export { attachMediaElement };
+//# sourceMappingURL=attach-media-element.d.ts.map

package/dist/dev/utils/attach-media-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attach-media-element.d.ts","names":[],"sources":["../../../src/utils/attach-media-element.ts"],"mappings":";UAAU,UAAA;EACR,MAAA,CAAO,MAAA,EAAQ,WAAA;EACf,MAAA;AAAA;AAAA,iBAGc,kBAAA,WAA6B,gBAAA,CAAA,CAAkB,KAAA,EAAO,UAAA,IAAc,OAAA,EAAS,CAAA"}

package/dist/dev/utils/media-props.d.ts

@@ -0,0 +1,307 @@
+import { MediaApi } from "@videojs/core/dom";
+import * as react from "react";
+import { VideoHTMLAttributes } from "react";
+
+//#region src/utils/media-props.d.ts
+interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}
+declare function mediaProps(media: MediaApi, props: VideoProps): {
+  height?: number | string | undefined;
+  playsInline?: boolean | undefined;
+  poster?: string | undefined;
+  width?: number | string | undefined;
+  disablePictureInPicture?: boolean | undefined;
+  disableRemotePlayback?: boolean | undefined;
+  onResize?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onResizeCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  autoPlay?: boolean | undefined;
+  controls?: boolean | undefined;
+  controlsList?: string | undefined;
+  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
+  loop?: boolean | undefined;
+  mediaGroup?: string | undefined;
+  muted?: boolean | undefined;
+  preload?: string | undefined;
+  defaultChecked?: boolean | undefined;
+  defaultValue?: string | number | readonly string[] | undefined;
+  suppressContentEditableWarning?: boolean | undefined;
+  suppressHydrationWarning?: boolean | undefined;
+  accessKey?: string | undefined;
+  autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+  autoFocus?: boolean | undefined;
+  className?: string | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contextMenu?: string | undefined;
+  dir?: string | undefined;
+  draggable?: (boolean | "true" | "false") | undefined;
+  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+  hidden?: boolean | undefined;
+  id?: string | undefined;
+  lang?: string | undefined;
+  nonce?: string | undefined;
+  slot?: string | undefined;
+  spellCheck?: (boolean | "true" | "false") | undefined;
+  style?: react.CSSProperties | undefined;
+  tabIndex?: number | undefined;
+  title?: string | undefined;
+  translate?: "yes" | "no" | undefined;
+  radioGroup?: string | undefined;
+  role?: react.AriaRole | undefined;
+  about?: string | undefined;
+  content?: string | undefined;
+  datatype?: string | undefined;
+  inlist?: any;
+  prefix?: string | undefined;
+  property?: string | undefined;
+  rel?: string | undefined;
+  resource?: string | undefined;
+  rev?: string | undefined;
+  typeof?: string | undefined;
+  vocab?: string | undefined;
+  autoCorrect?: string | undefined;
+  autoSave?: string | undefined;
+  color?: string | undefined;
+  itemProp?: string | undefined;
+  itemScope?: boolean | undefined;
+  itemType?: string | undefined;
+  itemID?: string | undefined;
+  itemRef?: string | undefined;
+  results?: number | undefined;
+  security?: string | undefined;
+  unselectable?: "on" | "off" | undefined;
+  popover?: "" | "auto" | "manual" | "hint" | undefined;
+  popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+  popoverTarget?: string | undefined;
+  inert?: boolean | undefined;
+  inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+  is?: string | undefined;
+  exportparts?: string | undefined;
+  part?: string | undefined;
+  "aria-activedescendant"?: string | undefined;
+  "aria-atomic"?: (boolean | "true" | "false") | undefined;
+  "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+  "aria-braillelabel"?: string | undefined;
+  "aria-brailleroledescription"?: string | undefined;
+  "aria-busy"?: (boolean | "true" | "false") | undefined;
+  "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+  "aria-colcount"?: number | undefined;
+  "aria-colindex"?: number | undefined;
+  "aria-colindextext"?: string | undefined;
+  "aria-colspan"?: number | undefined;
+  "aria-controls"?: string | undefined;
+  "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+  "aria-describedby"?: string | undefined;
+  "aria-description"?: string | undefined;
+  "aria-details"?: string | undefined;
+  "aria-disabled"?: (boolean | "true" | "false") | undefined;
+  "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+  "aria-errormessage"?: string | undefined;
+  "aria-expanded"?: (boolean | "true" | "false") | undefined;
+  "aria-flowto"?: string | undefined;
+  "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+  "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+  "aria-hidden"?: (boolean | "true" | "false") | undefined;
+  "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+  "aria-keyshortcuts"?: string | undefined;
+  "aria-label"?: string | undefined;
+  "aria-labelledby"?: string | undefined;
+  "aria-level"?: number | undefined;
+  "aria-live"?: "off" | "assertive" | "polite" | undefined;
+  "aria-modal"?: (boolean | "true" | "false") | undefined;
+  "aria-multiline"?: (boolean | "true" | "false") | undefined;
+  "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+  "aria-orientation"?: "horizontal" | "vertical" | undefined;
+  "aria-owns"?: string | undefined;
+  "aria-placeholder"?: string | undefined;
+  "aria-posinset"?: number | undefined;
+  "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+  "aria-readonly"?: (boolean | "true" | "false") | undefined;
+  "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+  "aria-required"?: (boolean | "true" | "false") | undefined;
+  "aria-roledescription"?: string | undefined;
+  "aria-rowcount"?: number | undefined;
+  "aria-rowindex"?: number | undefined;
+  "aria-rowindextext"?: string | undefined;
+  "aria-rowspan"?: number | undefined;
+  "aria-selected"?: (boolean | "true" | "false") | undefined;
+  "aria-setsize"?: number | undefined;
+  "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+  "aria-valuemax"?: number | undefined;
+  "aria-valuemin"?: number | undefined;
+  "aria-valuenow"?: number | undefined;
+  "aria-valuetext"?: string | undefined;
+  children?: react.ReactNode | undefined;
+  dangerouslySetInnerHTML?: {
+    __html: string | TrustedHTML;
+  } | undefined;
+  onCopy?: react.ClipboardEventHandler<HTMLVideoElement> | undefined;
+  onCopyCapture?: react.ClipboardEventHandler<HTMLVideoElement> | undefined;
+  onCut?: react.ClipboardEventHandler<HTMLVideoElement> | undefined;
+  onCutCapture?: react.ClipboardEventHandler<HTMLVideoElement> | undefined;
+  onPaste?: react.ClipboardEventHandler<HTMLVideoElement> | undefined;
+  onPasteCapture?: react.ClipboardEventHandler<HTMLVideoElement> | undefined;
+  onCompositionEnd?: react.CompositionEventHandler<HTMLVideoElement> | undefined;
+  onCompositionEndCapture?: react.CompositionEventHandler<HTMLVideoElement> | undefined;
+  onCompositionStart?: react.CompositionEventHandler<HTMLVideoElement> | undefined;
+  onCompositionStartCapture?: react.CompositionEventHandler<HTMLVideoElement> | undefined;
+  onCompositionUpdate?: react.CompositionEventHandler<HTMLVideoElement> | undefined;
+  onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLVideoElement> | undefined;
+  onFocus?: react.FocusEventHandler<HTMLVideoElement> | undefined;
+  onFocusCapture?: react.FocusEventHandler<HTMLVideoElement> | undefined;
+  onBlur?: react.FocusEventHandler<HTMLVideoElement> | undefined;
+  onBlurCapture?: react.FocusEventHandler<HTMLVideoElement> | undefined;
+  onChange?: react.ChangeEventHandler<HTMLVideoElement, Element> | undefined;
+  onChangeCapture?: react.ChangeEventHandler<HTMLVideoElement, Element> | undefined;
+  onBeforeInput?: react.InputEventHandler<HTMLVideoElement> | undefined;
+  onBeforeInputCapture?: react.InputEventHandler<HTMLVideoElement> | undefined;
+  onInput?: react.InputEventHandler<HTMLVideoElement> | undefined;
+  onInputCapture?: react.InputEventHandler<HTMLVideoElement> | undefined;
+  onReset?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onResetCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onSubmit?: react.SubmitEventHandler<HTMLVideoElement> | undefined;
+  onSubmitCapture?: react.SubmitEventHandler<HTMLVideoElement> | undefined;
+  onInvalid?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onInvalidCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onLoad?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onLoadCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onError?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onErrorCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onKeyDown?: react.KeyboardEventHandler<HTMLVideoElement> | undefined;
+  onKeyDownCapture?: react.KeyboardEventHandler<HTMLVideoElement> | undefined;
+  onKeyPress?: react.KeyboardEventHandler<HTMLVideoElement> | undefined;
+  onKeyPressCapture?: react.KeyboardEventHandler<HTMLVideoElement> | undefined;
+  onKeyUp?: react.KeyboardEventHandler<HTMLVideoElement> | undefined;
+  onKeyUpCapture?: react.KeyboardEventHandler<HTMLVideoElement> | undefined;
+  onAbort?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onAbortCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onCanPlay?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onCanPlayCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onCanPlayThrough?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onCanPlayThroughCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onDurationChange?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onDurationChangeCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onEmptied?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onEmptiedCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onEncrypted?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onEncryptedCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onEnded?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onEndedCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onLoadedData?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onLoadedDataCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onLoadedMetadata?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onLoadedMetadataCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onLoadStart?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onLoadStartCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onPause?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onPauseCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onPlay?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onPlayCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onPlaying?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onPlayingCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onProgress?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onProgressCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onRateChange?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onRateChangeCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onSeeked?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onSeekedCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onSeeking?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onSeekingCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onStalled?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onStalledCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onSuspend?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onSuspendCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onTimeUpdate?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onTimeUpdateCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onVolumeChange?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onVolumeChangeCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onWaiting?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onWaitingCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onAuxClick?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onAuxClickCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onClick?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onClickCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onContextMenu?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onContextMenuCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onDoubleClick?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onDoubleClickCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onDrag?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onDragCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onDragEnd?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onDragEndCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onDragEnter?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onDragEnterCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onDragExit?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onDragExitCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onDragLeave?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onDragLeaveCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onDragOver?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onDragOverCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onDragStart?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onDragStartCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onDrop?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onDropCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
+  onMouseDown?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onMouseDownCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onMouseEnter?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onMouseLeave?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onMouseMove?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onMouseMoveCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onMouseOut?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onMouseOutCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onMouseOver?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onMouseOverCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onMouseUp?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onMouseUpCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
+  onSelect?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onSelectCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
+  onTouchCancel?: react.TouchEventHandler<HTMLVideoElement> | undefined;
+  onTouchCancelCapture?: react.TouchEventHandler<HTMLVideoElement> | undefined;
+  onTouchEnd?: react.TouchEventHandler<HTMLVideoElement> | undefined;
+  onTouchEndCapture?: react.TouchEventHandler<HTMLVideoElement> | undefined;
+  onTouchMove?: react.TouchEventHandler<HTMLVideoElement> | undefined;
+  onTouchMoveCapture?: react.TouchEventHandler<HTMLVideoElement> | undefined;
+  onTouchStart?: react.TouchEventHandler<HTMLVideoElement> | undefined;
+  onTouchStartCapture?: react.TouchEventHandler<HTMLVideoElement> | undefined;
+  onPointerDown?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onPointerDownCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onPointerMove?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onPointerMoveCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onPointerUp?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onPointerUpCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onPointerCancel?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onPointerCancelCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onPointerEnter?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onPointerLeave?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onPointerOver?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onPointerOverCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onPointerOut?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onPointerOutCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onGotPointerCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onLostPointerCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
+  onScroll?: react.UIEventHandler<HTMLVideoElement> | undefined;
+  onScrollCapture?: react.UIEventHandler<HTMLVideoElement> | undefined;
+  onScrollEnd?: react.UIEventHandler<HTMLVideoElement> | undefined;
+  onScrollEndCapture?: react.UIEventHandler<HTMLVideoElement> | undefined;
+  onWheel?: react.WheelEventHandler<HTMLVideoElement> | undefined;
+  onWheelCapture?: react.WheelEventHandler<HTMLVideoElement> | undefined;
+  onAnimationStart?: react.AnimationEventHandler<HTMLVideoElement> | undefined;
+  onAnimationStartCapture?: react.AnimationEventHandler<HTMLVideoElement> | undefined;
+  onAnimationEnd?: react.AnimationEventHandler<HTMLVideoElement> | undefined;
+  onAnimationEndCapture?: react.AnimationEventHandler<HTMLVideoElement> | undefined;
+  onAnimationIteration?: react.AnimationEventHandler<HTMLVideoElement> | undefined;
+  onAnimationIterationCapture?: react.AnimationEventHandler<HTMLVideoElement> | undefined;
+  onToggle?: react.ToggleEventHandler<HTMLVideoElement> | undefined;
+  onBeforeToggle?: react.ToggleEventHandler<HTMLVideoElement> | undefined;
+  onTransitionCancel?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
+  onTransitionCancelCapture?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
+  onTransitionEnd?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
+  onTransitionEndCapture?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
+  onTransitionRun?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
+  onTransitionRunCapture?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
+  onTransitionStart?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
+  onTransitionStartCapture?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
+};
+//#endregion
+export { mediaProps };
+//# sourceMappingURL=media-props.d.ts.map

package/dist/dev/utils/media-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-props.d.ts","names":[],"sources":["../../../src/utils/media-props.ts"],"mappings":";;;;;UAGU,UAAA,SAAmB,mBAAA,CAAoB,gBAAA;AAAA,iBAEjC,UAAA,CAAW,KAAA,EAAO,QAAA,EAAU,KAAA,EAAO,UAAA"}

package/dist/dev/utils/use-composed-refs.d.ts

@@ -0,0 +1,29 @@
+import { Ref, RefCallback } from "react";
+
+//#region src/utils/use-composed-refs.d.ts
+type OptionalRef<T> = Ref<T> | undefined;
+/**
+ * Compose multiple refs into a single callback ref.
+ *
+ * @example
+ * ```tsx
+ * const composedRef = composeRefs(ref1, ref2, ref3);
+ * return <div ref={composedRef} />;
+ * ```
+ */
+declare function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]): RefCallback<T>;
+/**
+ * Hook that composes multiple refs into a single callback ref.
+ *
+ * Memoized for stable reference.
+ *
+ * @example
+ * ```tsx
+ * const composedRef = useComposedRefs(forwardedRef, localRef);
+ * return <div ref={composedRef} />;
+ * ```
+ */
+declare function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T>;
+//#endregion
+export { composeRefs, useComposedRefs };
+//# sourceMappingURL=use-composed-refs.d.ts.map

package/dist/dev/utils/use-composed-refs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-composed-refs.d.ts","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"mappings":";;;KAOK,WAAA,MAAiB,GAAA,CAAI,CAAA;;AAJoB;;;;;;;;iBA8B9B,WAAA,GAAA,CAAA,GAAkB,IAAA,GAAO,WAAA,CAAY,CAAA,IAAK,WAAA,CAAY,CAAA,SAAU,WAAA,CAAY,CAAA;AAA5F;;;;;;;;;;;AAAA,iBAkCgB,eAAA,GAAA,CAAA,GAAsB,IAAA,EAAM,WAAA,CAAY,CAAA,MAAO,WAAA,CAAY,CAAA"}

package/dist/dev/utils/use-destroy.d.ts

@@ -0,0 +1,22 @@
+//#region src/utils/use-destroy.d.ts
+interface Destroyable {
+  destroy(): void;
+}
+/**
+ * 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.
+ *
+ * @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.
+ */
+declare function useDestroy(instance: Destroyable, setup?: () => void, teardown?: () => void): void;
+//#endregion
+export { useDestroy };
+//# sourceMappingURL=use-destroy.d.ts.map

package/dist/dev/utils/use-destroy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-destroy.d.ts","names":[],"sources":["../../../src/utils/use-destroy.ts"],"mappings":";UAMU,WAAA;EACR,OAAA;AAAA;;;;AAiBF;;;;;;;;;;;iBAAgB,UAAA,CAAW,QAAA,EAAU,WAAA,EAAa,KAAA,eAAoB,QAAA"}

package/dist/dev/utils/use-destroy.js

@@ -1,5 +1,6 @@
 'use client';
 
+import { useLatestRef } from "./use-latest-ref.js";
 import { useEffect, useRef } from "react";
 
 //#region src/utils/use-destroy.ts
@@ -14,18 +15,25 @@ import { useEffect, useRef } from "react";
 * @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.
 */
-function useDestroy(instance, setup) {
+function useDestroy(instance, setup, teardown) {
 	const pendingRef = useRef(null);
+	const setupRef = useLatestRef(setup);
+	const teardownRef = useLatestRef(teardown);
 	useEffect(() => {
 		if (pendingRef.current !== null) {
 			clearTimeout(pendingRef.current);
 			pendingRef.current = null;
-		} else setup?.();
+		} else setupRef.current?.();
 		return () => {
-			pendingRef.current = setTimeout(() => instance.destroy(), 0);
+			pendingRef.current = setTimeout(() => {
+				teardownRef.current?.();
+				instance.destroy();
+			}, 0);
 		};
-	}, [instance, setup]);
+	}, [instance]);
 }
 
 //#endregion

package/dist/dev/utils/use-destroy.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\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 */\nexport function useDestroy(instance: Destroyable, setup?: () => void): void {\n  const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (pendingRef.current !== null) {\n      clearTimeout(pendingRef.current);\n      pendingRef.current = null;\n    } else {\n      setup?.();\n    }\n\n    return () => {\n      pendingRef.current = setTimeout(() => instance.destroy(), 0);\n    };\n  }, [instance, setup]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,SAAgB,WAAW,UAAuB,OAA0B;CAC1E,MAAM,aAAa,OAA6C,KAAK;AAErE,iBAAgB;AACd,MAAI,WAAW,YAAY,MAAM;AAC/B,gBAAa,WAAW,QAAQ;AAChC,cAAW,UAAU;QAErB,UAAS;AAGX,eAAa;AACX,cAAW,UAAU,iBAAiB,SAAS,SAAS,EAAE,EAAE;;IAE7D,CAAC,UAAU,MAAM,CAAC"}
+{"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["'use client';\n\nimport { 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":";;;;;;;;;;;;;;;;;;;;AAwBA,SAAgB,WAAW,UAAuB,OAAoB,UAA6B;CACjG,MAAM,aAAa,OAA6C,KAAK;CACrE,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,cAAc,aAAa,SAAS;AAE1C,iBAAgB;AACd,MAAI,WAAW,YAAY,MAAM;AAC/B,gBAAa,WAAW,QAAQ;AAChC,cAAW,UAAU;QAErB,UAAS,WAAW;AAGtB,eAAa;AACX,cAAW,UAAU,iBAAiB;AACpC,gBAAY,WAAW;AACvB,aAAS,SAAS;MACjB,EAAE;;IAEN,CAAC,SAAS,CAAC"}

package/dist/dev/utils/use-latest-ref.d.ts

@@ -0,0 +1,18 @@
+//#region src/utils/use-latest-ref.d.ts
+/**
+ * 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.
+ */
+declare function useLatestRef<Value>(value: Value): Readonly<{
+  current: Value;
+}>;
+declare namespace useLatestRef {
+  type Result<Value> = Readonly<{
+    current: Value;
+  }>;
+}
+//#endregion
+export { useLatestRef };
+//# sourceMappingURL=use-latest-ref.d.ts.map

package/dist/dev/utils/use-latest-ref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-latest-ref.d.ts","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"mappings":";;AAUA;;;;;iBAAgB,YAAA,OAAA,CAAoB,KAAA,EAAO,KAAA,GAAQ,QAAA;EAAW,OAAA,EAAS,KAAA;AAAA;AAAA,kBAMtD,YAAA;EAAA,KACH,MAAA,UAAgB,QAAA;IAAW,OAAA,EAAS,KAAA;EAAA;AAAA"}

package/dist/dev/utils/use-media-instance.d.ts

@@ -0,0 +1,16 @@
+import { Media } from "@videojs/core/dom";
+
+//#region src/utils/use-media-instance.d.ts
+/**
+ * Create and manage a media instance lifecycle within a player context.
+ *
+ * Instantiates the media class once, attaches it to the player on mount,
+ * and safely detaches on unmount using a functional updater to avoid race
+ * conditions when swapping media components (e.g. DashVideo → HlsVideo).
+ */
+declare function useMediaInstance<Instance extends Media & {
+  destroy(): void;
+}>(MediaClass: new () => Instance): Instance;
+//#endregion
+export { useMediaInstance };
+//# sourceMappingURL=use-media-instance.d.ts.map

package/dist/dev/utils/use-media-instance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-instance.d.ts","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"mappings":";;;;;AAeA;;;;;iBAAgB,gBAAA,kBAAkC,KAAA;EAAU,OAAA;AAAA,EAAA,CAC1D,UAAA,YAAsB,QAAA,GACrB,QAAA"}

package/dist/dev/utils/use-media-instance.js

@@ -0,0 +1,24 @@
+'use client';
+
+import { useMediaAttach } from "../player/context.js";
+import { useDestroy } from "./use-destroy.js";
+import { useState } from "react";
+
+//#region src/utils/use-media-instance.ts
+/**
+* Create and manage a media instance lifecycle within a player context.
+*
+* Instantiates the media class once, attaches it to the player on mount,
+* and safely detaches on unmount using a functional updater to avoid race
+* conditions when swapping media components (e.g. DashVideo → HlsVideo).
+*/
+function useMediaInstance(MediaClass) {
+	const [instance] = useState(() => new MediaClass());
+	const setMedia = useMediaAttach();
+	useDestroy(instance, () => setMedia?.(instance), () => setMedia?.((prev) => prev === instance ? null : prev));
+	return instance;
+}
+
+//#endregion
+export { useMediaInstance };
+//# sourceMappingURL=use-media-instance.js.map

package/dist/dev/utils/use-media-instance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-instance.js","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"sourcesContent":["'use client';\n\nimport type { Media } from '@videojs/core/dom';\nimport { useState } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create and manage a media instance lifecycle within a player context.\n *\n * Instantiates the media class once, attaches it to the player on mount,\n * and safely detaches on unmount using a functional updater to avoid race\n * conditions when swapping media components (e.g. DashVideo → HlsVideo).\n */\nexport function useMediaInstance<Instance extends Media & { destroy(): void }>(\n  MediaClass: new () => Instance\n): Instance {\n  const [instance] = useState(() => new MediaClass());\n  const setMedia = useMediaAttach();\n\n  useDestroy(\n    instance,\n    () => setMedia?.(instance),\n    () => setMedia?.((prev) => (prev === instance ? null : prev))\n  );\n\n  return instance;\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAgB,iBACd,YACU;CACV,MAAM,CAAC,YAAY,eAAe,IAAI,YAAY,CAAC;CACnD,MAAM,WAAW,gBAAgB;AAEjC,YACE,gBACM,WAAW,SAAS,QACpB,YAAY,SAAU,SAAS,WAAW,OAAO,KAAM,CAC9D;AAED,QAAO"}

package/dist/dev/utils/use-render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-render.d.ts","names":[],"sources":["../../../src/utils/use-render.tsx"],"mappings":";;;;;KAUK,gBAAA,SAAyB,KAAA,CAAM,GAAA,CAAI,iBAAA;AAAA,UAEvB,uBAAA;EACf,SAAA,cAAuB,KAAA,EAAO,KAAA;EAC9B,KAAA,GAAQ,aAAA,KAAkB,KAAA,EAAO,KAAA,KAAU,aAAA;EAC3C,MAAA,GAAS,UAAA,CAAW,KAAA;AAAA;AAAA,UAGL,mBAAA,oCAAuD,OAAA;EACtE,KAAA,EAAO,KAAA;EACP,GAAA,GAAM,GAAA,CAAI,mBAAA,IAAuB,GAAA,CAAI,mBAAA;EACrC,KAAA;EACA,YAAA,GAAe,YAAA,CAAa,KAAA;AAAA;;;;;;;;;;;;;;;;;;;;;iBA4Cd,aAAA,mDAEc,OAAA,kBACZ,gBAAA,CAAA,CAEhB,OAAA,EAAS,OAAA,EACT,cAAA,EAAgB,uBAAA,CAAwB,KAAA,GACxC,MAAA,EAAQ,mBAAA,CAAoB,KAAA,EAAO,mBAAA,IAClC,YAAA;AAAA,kBAgDc,aAAA;EAAA,KACH,cAAA,UAAwB,uBAAA,CAAwB,KAAA;EAAA,KAChD,UAAA,oCAA8C,OAAA,IAAW,mBAAA,CAAoB,KAAA,EAAO,mBAAA;AAAA"}
+{"version":3,"file":"use-render.d.ts","names":[],"sources":["../../../src/utils/use-render.tsx"],"mappings":";;;;;KAeK,gBAAA,SAAyB,KAAA,CAAM,GAAA,CAAI,iBAAA;AAAA,UAEvB,uBAAA;EACf,SAAA,cAAuB,KAAA,EAAO,KAAA;EAC9B,KAAA,GAAQ,aAAA,KAAkB,KAAA,EAAO,KAAA,KAAU,aAAA;EAC3C,MAAA,GAAS,UAAA,CAAW,KAAA;AAAA;AAAA,UAGL,mBAAA,oCAAuD,OAAA;EACtE,KAAA,EAAO,KAAA;EACP,GAAA,GAAM,GAAA,CAAI,mBAAA,IAAuB,GAAA,CAAI,mBAAA;EACrC,KAAA;EACA,YAAA,GAAe,YAAA,CAAa,KAAA;AAAA;;;;;;;;;;;;;;;;;;;;;iBA4Cd,aAAA,mDAEc,OAAA,kBACZ,gBAAA,CAAA,CAEhB,OAAA,EAAS,OAAA,EACT,cAAA,EAAgB,uBAAA,CAAwB,KAAA,GACxC,MAAA,EAAQ,mBAAA,CAAoB,KAAA,EAAO,mBAAA,IAClC,YAAA;AAAA,kBAgDc,aAAA;EAAA,KACH,cAAA,UAAwB,uBAAA,CAAwB,KAAA;EAAA,KAChD,UAAA,oCAA8C,OAAA,IAAW,mBAAA,CAAoB,KAAA,EAAO,mBAAA;AAAA"}