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

package/dist/dev/ui/volume-indicator/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/volume-indicator/context.tsx"],"sourcesContent":["'use client';\n\nimport 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":";;;;AASA,MAAM,yBAAyB,cAAkD,KAAK;AAEtF,SAAgB,wBAAwB,EAAE,OAAO,YAAwD;AACvG,QAAO,oBAAC,uBAAuB,UAAxB;EAAwC;EAAQ;EAA2C,CAAA;;AAGpG,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,uBAAuB;AAC9C,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,6EAA6E;AACvG,QAAO"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/volume-indicator/context.tsx"],"sourcesContent":["'use client';\n\nimport 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":";;;;AASA,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"}

package/dist/dev/ui/volume-indicator/index.parts.d.ts

@@ -1,11 +1,9 @@
 import { VolumeIndicatorFill, VolumeIndicatorFillProps } from "./volume-indicator-fill.js";
 import { VolumeIndicatorRoot, VolumeIndicatorRootProps } from "./volume-indicator-root.js";
 import { VolumeIndicatorValue, VolumeIndicatorValueProps } from "./volume-indicator-value.js";
-
-//#region src/ui/volume-indicator/index.parts.d.ts
 declare namespace index_parts_d_exports {
   export { VolumeIndicatorFill as Fill, VolumeIndicatorFillProps as FillProps, VolumeIndicatorRoot as Root, VolumeIndicatorRootProps as RootProps, VolumeIndicatorValue as Value, VolumeIndicatorValueProps as ValueProps };
 }
 //#endregion
-export { index_parts_d_exports };
+export { VolumeIndicatorFill as Fill, type VolumeIndicatorFillProps as FillProps, VolumeIndicatorRoot as Root, type VolumeIndicatorRootProps as RootProps, VolumeIndicatorValue as Value, type VolumeIndicatorValueProps as ValueProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

package/dist/dev/ui/volume-indicator/index.parts.js

@@ -9,6 +9,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Value: () => VolumeIndicatorValue
 });
 //#endregion
-export { index_parts_exports };
+export { VolumeIndicatorFill as Fill, VolumeIndicatorRoot as Root, VolumeIndicatorValue as Value, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

package/dist/dev/ui/volume-indicator/volume-indicator-fill.d.ts

@@ -1,10 +1,8 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { VolumeIndicatorCore } from "@videojs/core";
-
 //#region src/ui/volume-indicator/volume-indicator-fill.d.ts
 interface VolumeIndicatorFillProps extends UIComponentProps<'div', VolumeIndicatorCore.State> {}
-declare const VolumeIndicatorFill: _$react.ForwardRefExoticComponent<Omit<VolumeIndicatorFillProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const VolumeIndicatorFill: import("react").ForwardRefExoticComponent<Omit<VolumeIndicatorFillProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace VolumeIndicatorFill {
   type Props = VolumeIndicatorFillProps;
 }

package/dist/dev/ui/volume-indicator/volume-indicator-fill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"volume-indicator-fill.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-fill.tsx"],"mappings":";;;;;UAWiB,wBAAA,SAAiC,gBAAA,QAAwB,mBAAA,CAAoB,KAAA;AAAA,cAEjF,mBAAA,EAAmB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,wBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAmBf,mBAAA;EAAA,KACH,KAAA,GAAQ,wBAAA;AAAA"}
+{"version":3,"file":"volume-indicator-fill.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-fill.tsx"],"mappings":";;;UAWiB,iCAAiC,wBAAwB,oBAAoB;cAEjF,qCAAmB,0BAAA,KAAA,mDAAA,cAAA;kBAmBf;OACH,QAAQ"}

package/dist/dev/ui/volume-indicator/volume-indicator-fill.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-indicator-fill.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-fill.tsx"],"sourcesContent":["'use client';\n\nimport { 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":";;;;;;;AAaA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,2BAA2B;AAG7C,QAAO,cACL,OACA;EAAE;EAAQ;EAAW,OAJL,4BAA4B,OAAO,MAAM;EAIlB,EACvC;EACE;EACA,KAAK;EACL,OAAO,CAAC,aAAa;EACtB,CACF;EACD;AAMF,SAAS,4BACP,OACA,OACmC;CACnC,MAAM,OAAO,MAAM,OACd,GACE,uBAAuB,OAAO,MAAM,MACtC,GACD,KAAA;AAEJ,KAAI,CAAC,KAAM,QAAO;AAElB,KAAI,WAAW,MAAM,CACnB,SAAQ,eAAe;EACrB,GAAG,MAAM,UAAU;EACnB,GAAG;EACJ;AAGH,QAAO;EACL,GAAG;EACH,GAAG;EACJ"}
+{"version":3,"file":"volume-indicator-fill.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-fill.tsx"],"sourcesContent":["'use client';\n\nimport { 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":";;;;;;;AAaA,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"}

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

@@ -1,10 +1,8 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { VolumeIndicatorCore } from "@videojs/core";
-
 //#region src/ui/volume-indicator/volume-indicator-root.d.ts
-interface VolumeIndicatorRootProps extends UIComponentProps<'div', VolumeIndicatorCore.State>, VolumeIndicatorCore.Props {}
-declare const VolumeIndicatorRoot: _$react.ForwardRefExoticComponent<Omit<VolumeIndicatorRootProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+interface VolumeIndicatorRootProps extends UIComponentProps<'div', VolumeIndicatorCore.State>, Omit<VolumeIndicatorCore.Props, 'labels'> {}
+declare const VolumeIndicatorRoot: import("react").ForwardRefExoticComponent<Omit<VolumeIndicatorRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace VolumeIndicatorRoot {
   type Props = VolumeIndicatorRootProps;
   type State = VolumeIndicatorCore.State;

package/dist/dev/ui/volume-indicator/volume-indicator-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"volume-indicator-root.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-root.tsx"],"mappings":";;;;;UAWiB,wBAAA,SACP,gBAAA,QAAwB,mBAAA,CAAoB,KAAA,GAClD,mBAAA,CAAoB,KAAA;AAAA,cAEX,mBAAA,EAAmB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,wBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA6Bf,mBAAA;EAAA,KACH,KAAA,GAAQ,wBAAA;EAAA,KACR,KAAA,GAAQ,mBAAA,CAAoB,KAAA;AAAA"}
+{"version":3,"file":"volume-indicator-root.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-root.tsx"],"mappings":";;;UAYiB,iCACP,wBAAwB,oBAAoB,QAClD,KAAK,oBAAoB;cAEhB,qCAAmB,0BAAA,KAAA,mDAAA,cAAA;kBAiCf;OACH,QAAQ;OACR,QAAQ,oBAAoB"}

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

@@ -1,14 +1,18 @@
 "use client";
+import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useInputIndicatorRoot } from "../input-indicators/use-input-indicator-root.js";
 import { VolumeIndicatorProvider } from "./context.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { VolumeIndicatorCore, VolumeIndicatorDataAttrs } from "@videojs/core";
+import { VolumeIndicatorCore, VolumeIndicatorDataAttrs, createInputIndicatorLabels } from "@videojs/core";
 //#region src/ui/volume-indicator/volume-indicator-root.tsx
 const VolumeIndicatorRoot = forwardRef(function VolumeIndicatorRoot(componentProps, forwardedRef) {
 	const { render, className, style, closeDelay, ...elementProps } = componentProps;
-	const { elementRef, present, state } = useInputIndicatorRoot(() => new VolumeIndicatorCore(), { closeDelay }, { replayOnUpdate: false });
+	const { elementRef, present, state } = useInputIndicatorRoot(() => new VolumeIndicatorCore(), {
+		closeDelay,
+		labels: createInputIndicatorLabels(useTranslator())
+	}, { replayOnUpdate: false });
 	if (!present) return null;
 	return /* @__PURE__ */ jsx(VolumeIndicatorProvider, {
 		value: { state },

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

@@ -1 +1 @@
-{"version":3,"file":"volume-indicator-root.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-root.tsx"],"sourcesContent":["'use client';\n\nimport { VolumeIndicatorCore, VolumeIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicators/use-input-indicator-root';\nimport { VolumeIndicatorProvider } from './context';\n\nexport interface VolumeIndicatorRootProps\n  extends UIComponentProps<'div', VolumeIndicatorCore.State>,\n    VolumeIndicatorCore.Props {}\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 { elementRef, present, state } = useInputIndicatorRoot(\n    () => new VolumeIndicatorCore(),\n    { closeDelay },\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":";;;;;;;;AAeA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,GAAG,iBAAiB;CAClE,MAAM,EAAE,YAAY,SAAS,UAAU,4BAC/B,IAAI,qBAAqB,EAC/B,EAAE,YAAY,EACd,EAAE,gBAAgB,OAAO,CAC1B;AAED,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAAC,yBAAD;EAAyB,OAAO,EAAE,OAAO;YACtC,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,WAAW;GAC/B,OAAO,CAAC,aAAa;GACtB,CACF;EACuB,CAAA;EAE5B"}
+{"version":3,"file":"volume-indicator-root.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-root.tsx"],"sourcesContent":["'use client';\n\nimport { 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-indicators/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":";;;;;;;;;AAgBA,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"}

package/dist/dev/ui/volume-indicator/volume-indicator-value.d.ts

@@ -1,10 +1,8 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { VolumeIndicatorCore } from "@videojs/core";
-
 //#region src/ui/volume-indicator/volume-indicator-value.d.ts
 interface VolumeIndicatorValueProps extends UIComponentProps<'span', VolumeIndicatorCore.State> {}
-declare const VolumeIndicatorValue: _$react.ForwardRefExoticComponent<Omit<VolumeIndicatorValueProps, "ref"> & _$react.RefAttributes<HTMLSpanElement>>;
+declare const VolumeIndicatorValue: import("react").ForwardRefExoticComponent<Omit<VolumeIndicatorValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare namespace VolumeIndicatorValue {
   type Props = VolumeIndicatorValueProps;
 }

package/dist/dev/ui/volume-indicator/volume-indicator-value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"volume-indicator-value.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-value.tsx"],"mappings":";;;;;UAUiB,yBAAA,SAAkC,gBAAA,SAAyB,mBAAA,CAAoB,KAAA;AAAA,cAEnF,oBAAA,EAAoB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,yBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBAkBhB,oBAAA;EAAA,KACH,KAAA,GAAQ,yBAAA;AAAA"}
+{"version":3,"file":"volume-indicator-value.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-value.tsx"],"mappings":";;;UAUiB,kCAAkC,yBAAyB,oBAAoB;cAEnF,sCAAoB,0BAAA,KAAA,oDAAA,cAAA;kBAkBhB;OACH,QAAQ"}

package/dist/dev/ui/volume-indicator/volume-indicator-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-indicator-value.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-value.tsx"],"sourcesContent":["'use client';\n\nimport { getVolumeIndicatorDisplayValue, type VolumeIndicatorCore } from '@videojs/core';\nimport type { 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 VolumeIndicatorValueProps extends UIComponentProps<'span', VolumeIndicatorCore.State> {}\n\nexport const VolumeIndicatorValue = forwardRef(function VolumeIndicatorValue(\n  componentProps: VolumeIndicatorValueProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const { state } = useVolumeIndicatorContext();\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: forwardedRef,\n      props: [{ children: getVolumeIndicatorDisplayValue(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace VolumeIndicatorValue {\n  export type Props = VolumeIndicatorValueProps;\n}\n"],"mappings":";;;;;;AAYA,MAAa,uBAAuB,WAAW,SAAS,qBACtD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,2BAA2B;AAE7C,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,+BAA+B,MAAM,EAAE,EAAE,aAAa;EAC3E,CACF;EACD"}
+{"version":3,"file":"volume-indicator-value.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-value.tsx"],"sourcesContent":["'use client';\n\nimport { getVolumeIndicatorDisplayValue, type VolumeIndicatorCore } from '@videojs/core';\nimport type { 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 VolumeIndicatorValueProps extends UIComponentProps<'span', VolumeIndicatorCore.State> {}\n\nexport const VolumeIndicatorValue = forwardRef(function VolumeIndicatorValue(\n  componentProps: VolumeIndicatorValueProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const { state } = useVolumeIndicatorContext();\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: forwardedRef,\n      props: [{ children: getVolumeIndicatorDisplayValue(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace VolumeIndicatorValue {\n  export type Props = VolumeIndicatorValueProps;\n}\n"],"mappings":";;;;;;AAYA,MAAa,uBAAuB,WAAW,SAAS,qBACtD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,0BAA0B;CAE5C,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,+BAA+B,KAAK,EAAE,GAAG,YAAY;CAC3E,CACF;AACF,CAAC"}

package/dist/dev/ui/volume-slider/index.parts.d.ts

@@ -3,12 +3,11 @@ import { SliderPreview, SliderPreviewProps } from "../slider/slider-preview.js";
 import { SliderThumb, SliderThumbProps } from "../slider/slider-thumb.js";
 import { SliderTrack, SliderTrackProps } from "../slider/slider-track.js";
 import { SliderValue, SliderValueProps } from "../slider/slider-value.js";
+import "../slider/index.parts.js";
 import { VolumeSliderRoot, VolumeSliderRootProps } from "./volume-slider-root.js";
-
-//#region src/ui/volume-slider/index.parts.d.ts
 declare namespace index_parts_d_exports {
   export { SliderFill as Fill, SliderFillProps as FillProps, SliderPreview as Preview, SliderPreviewProps as PreviewProps, VolumeSliderRoot as Root, VolumeSliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
 }
 //#endregion
-export { index_parts_d_exports };
+export { SliderFill as Fill, type SliderFillProps as FillProps, SliderPreview as Preview, type SliderPreviewProps as PreviewProps, VolumeSliderRoot as Root, type VolumeSliderRootProps as RootProps, SliderThumb as Thumb, type SliderThumbProps as ThumbProps, SliderTrack as Track, type SliderTrackProps as TrackProps, SliderValue as Value, type SliderValueProps as ValueProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

package/dist/dev/ui/volume-slider/index.parts.js

@@ -15,6 +15,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Value: () => SliderValue
 });
 //#endregion
-export { index_parts_exports };
+export { SliderFill as Fill, SliderPreview as Preview, VolumeSliderRoot as Root, SliderThumb as Thumb, SliderTrack as Track, SliderValue as Value, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

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

@@ -1,13 +1,11 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { VolumeSliderCore } from "@videojs/core";
-
 //#region src/ui/volume-slider/volume-slider-root.d.ts
 interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {
   onDragStart?: (() => void) | undefined;
   onDragEnd?: (() => void) | undefined;
 }
-declare const VolumeSliderRoot: _$react.ForwardRefExoticComponent<Omit<VolumeSliderRootProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const VolumeSliderRoot: import("react").ForwardRefExoticComponent<Omit<VolumeSliderRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace VolumeSliderRoot {
   type Props = VolumeSliderRootProps;
   type State = VolumeSliderCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"volume-slider-root.d.ts","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"mappings":";;;;;UAsBiB,qBAAA,SAA8B,gBAAA,QAAwB,gBAAA,CAAiB,KAAA,GAAQ,gBAAA,CAAiB,KAAA;EAC/G,WAAA;EACA,SAAA;AAAA;AAAA,cAGW,gBAAA,EAAgB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,qBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA0GZ,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,gBAAA,CAAiB,KAAA;AAAA"}
+{"version":3,"file":"volume-slider-root.d.ts","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"mappings":";;;UAwBiB,8BAA8B,wBAAwB,iBAAiB,QAAQ,iBAAiB;EAC/G;EACA;;cAGW,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBAwHZ;OACH,QAAQ;OACR,QAAQ,iBAAiB"}

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

@@ -1,14 +1,16 @@
 "use client";
+import { useLocale, useTranslator } from "../../i18n/context.js";
 import { usePlayer } from "../../player/context.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 { createWheelStep, getSliderCSSVars, logMissingFeature, selectVolume } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
 import { forwardRef, useCallback, useRef, useState } from "react";
+import { listen } from "@videojs/utils/dom";
 import { jsx } from "react/jsx-runtime";
 import { VolumeSliderCore, VolumeSliderDataAttrs } from "@videojs/core";
-import { listen } from "@videojs/utils/dom";
 //#region src/ui/volume-slider/volume-slider-root.tsx
 const noopVolume = {
 	volume: 0,
@@ -20,6 +22,8 @@ const noopVolume = {
 const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, forwardedRef) {
 	const { render, className, style, label, orientation, step = VolumeSliderCore.defaultProps.step, largeStep = VolumeSliderCore.defaultProps.largeStep, wheelStep = VolumeSliderCore.defaultProps.wheelStep, disabled, thumbAlignment, onDragStart, onDragEnd, ...elementProps } = componentProps;
 	const volume = usePlayer(selectVolume);
+	const translator = useTranslator();
+	const locale = useLocale();
 	const [core] = useState(() => new VolumeSliderCore());
 	core.setProps({
 		label,
@@ -30,6 +34,7 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 		disabled,
 		thumbAlignment
 	});
+	core.setFormatLocale(locale);
 	const volumeRef = useLatestRef(volume);
 	const disabledRef = useLatestRef(disabled);
 	const getPercent = () => (volumeRef.current?.volume ?? 0) * 100;
@@ -76,7 +81,14 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 			thumbRef,
 			thumbProps,
 			stateAttrMap: VolumeSliderDataAttrs,
-			getAttrs: (sliderState) => core.getAttrs(sliderState),
+			getAttrs: (sliderState) => {
+				const attrs = core.getAttrs(sliderState);
+				return {
+					...attrs,
+					"aria-label": translateText(attrs["aria-label"], translator),
+					"aria-valuetext": translateText(attrs["aria-valuetext"], translator, core.getValueTextParams(sliderState))
+				};
+			},
 			formatValue: (value) => `${Math.round(value)}%`
 		},
 		children: renderElement("div", {

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 { VolumeSliderCore, VolumeSliderDataAttrs } from '@videojs/core';\nimport { createWheelStep, getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport { listen } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useRef, 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      wheelStep = VolumeSliderCore.defaultProps.wheelStep,\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, wheelStep, disabled, thumbAlignment });\n\n    // Keep refs to the latest dynamic values for stable closures.\n    const volumeRef = useLatestRef(volume);\n    const disabledRef = useLatestRef(disabled);\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, 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,\n      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: setVolume,\n      onValueCommit: setVolume,\n      onDragStart,\n      onDragEnd,\n    });\n\n    const [wheelHandler] = useState(() =>\n      createWheelStep({\n        isDisabled: () => !!disabledRef.current || !volumeRef.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    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, 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,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,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;EAAW;EAAU;EAAgB,CAAC;CAG3F,MAAM,YAAY,aAAa,OAAO;CACtC,MAAM,cAAc,aAAa,SAAS;CAE1C,MAAM,oBAAoB,UAAU,SAAS,UAAU,KAAK;CAC5D,MAAM,uBAAuB,KAAK,gBAAgB;CAClD,MAAM,aAAa,YAAoB,UAAU,SAAS,UAAU,UAAU,IAAI;CAElF,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;EACA;EACA,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,eAAe;EACf,eAAe;EACf;EACA;EACD,CAAC;CAEF,MAAM,CAAC,gBAAgB,eACrB,gBAAgB;EACd,kBAAkB,CAAC,CAAC,YAAY,WAAW,CAAC,UAAU;EACtD,mBAAmB,UAAU,SAAS,UAAU,KAAK;EACrD,sBAAsB,KAAK,qBAAqB;EAChD,gBAAgB,YAAY,UAAU,SAAS,UAAU,UAAU,IAAI;EACxE,CAAC,CACH;CAID,MAAM,kBAAkB,OAA4B,KAAK;CACzD,MAAM,WAAW,aACd,YAAmC;AAClC,kBAAgB,WAAW;AAC3B,kBAAgB,UAAU;AAC1B,MAAI,QACF,iBAAgB,UAAU,OAAO,SAAS,SAAS,aAAa,SAAS,EAAE,SAAS,OAAO,CAAC;IAGhG,CAAC,aAAa,CACf;AAED,KAAI,CAAC,QAAQ;AACE,oBAAkB,gBAAgB,SAAS;AACxD,SAAO;;AAGT,QACE,oBAAC,gBAAD;EACE,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;IAAC;IAAc;IAAS;IAAS;GACtC,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;EACc,CAAA;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 { 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  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 [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(disabled);\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, 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,\n      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: setVolume,\n      onValueCommit: setVolume,\n      onDragStart,\n      onDragEnd,\n    });\n\n    const [wheelHandler] = useState(() =>\n      createWheelStep({\n        isDisabled: () => !!disabledRef.current || !volumeRef.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    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.valueFromPercent(state.pointerPercent),\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":";;;;;;;;;;;;;;AAgBA,MAAM,aAAa;CACjB,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,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,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,QAAQ;CAEzC,MAAM,oBAAoB,UAAU,SAAS,UAAU,KAAK;CAC5D,MAAM,uBAAuB,KAAK,eAAe;CACjD,MAAM,aAAa,YAAoB,UAAU,SAAS,UAAU,UAAU,GAAG;CAEjF,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAkC;EAChH,eAAe,UAAU;GACvB,KAAK,SAAS,KAAK;GACnB,KAAK,SAAS,UAAU,UAAU;GAClC,OAAO,KAAK,SAAS;EACvB;EACA;EACA;EACA,2BAA2B,KAAK,oBAAoB;EACpD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,SAAS;EACjE,YAAY;EACZ,eAAe;EACf,eAAe;EACf;EACA;CACF,CAAC;CAED,MAAM,CAAC,gBAAgB,eACrB,gBAAgB;EACd,kBAAkB,CAAC,CAAC,YAAY,WAAW,CAAC,UAAU;EACtD,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,QAAQ;EACE,kBAAkB,gBAAgB,QAAQ;EACvD,OAAO;CACT;CAEA,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,cAAc;GACxD;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"}

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

@@ -1,5 +1,4 @@
 import { ComponentPropsWithRef, ElementType } from "react";
-
 //#region src/utils/merge-props.d.ts
 type Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"merge-props.d.ts","names":[],"sources":["../../../src/utils/merge-props.ts"],"mappings":";;;KAIK,KAAA,WAAgB,WAAA,GAAc,WAAA,IAAe,qBAAA,CAAsB,CAAA;;AAFuB;;;;;;;;;;;;;;;;AAuG/F;iBAAgB,UAAA,WAAqB,WAAA,CAAA,CAAA,GAAgB,QAAA,GAAW,KAAA,CAAM,CAAA,mBAAoB,KAAA,CAAM,CAAA"}
+{"version":3,"file":"merge-props.d.ts","names":[],"sources":["../../../src/utils/merge-props.ts"],"mappings":";;KAIK,MAAM,UAAU,cAAc,eAAe,sBAAsB;;;;;;;;;;;;;;;;;;;iBAqGxD,WAAW,UAAU,gBAAgB,WAAW,MAAM,oBAAoB,MAAM"}

package/dist/dev/utils/merge-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["'use client';\n\nimport 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":";;;;;AASA,SAAS,kBAAkB,KAAsB;AAC/C,QACE,IAAI,WAAW,EAAE,KAAK,OACtB,IAAI,WAAW,EAAE,KAAK,OACtB,IAAI,WAAW,EAAE,IAAI,MACrB,IAAI,WAAW,EAAE,IAAI;;;;;AAOzB,SAAS,eAAe,KAAa,OAAyB;AAC5D,QAAO,kBAAkB,IAAI,KAAK,OAAO,UAAU,cAAc,OAAO,UAAU;;;;;AAMpF,SAAS,mBACP,MACA,QAC+C;AAC/C,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,CAAC,KAAM,QAAO;AAElB,SAAQ,UAA0B;AAChC,SAAO,MAAM;AACb,OAAK,MAAM;;;;;;AAOf,SAAS,gBAAgB,MAA0B,QAAgD;AACjG,KAAI,UAAU,KAAM,QAAO,GAAG,OAAO,GAAG;AACxC,QAAO,UAAU;;;;;AAMnB,SAAS,YAAY,MAAiC,QAA8D;AAClH,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,CAAC,KAAM,QAAO;AAClB,QAAO;EAAE,GAAG;EAAM,GAAG;EAAQ;;;;;AAM/B,SAAS,SACP,QACA,OACyB;AACzB,KAAI,CAAC,MAAO,QAAO;AAEnB,MAAK,MAAM,OAAO,OAAO;EACvB,MAAM,QAAQ,MAAM;AAEpB,MAAI,QAAQ,YACV,QAAO,YAAY,gBAAgB,OAAO,WAAiC,MAAgB;WAClF,QAAQ,QACjB,QAAO,QAAQ,YAAY,OAAO,OAAoC,MAAuB;WACpF,eAAe,KAAK,MAAM,CACnC,QAAO,OAAO,mBACZ,OAAO,MACP,MACD;MAED,QAAO,OAAO;;AAIlB,QAAO;;;;;;;;;;;;;;;;;;;;AAqBT,SAAgB,WAAkC,GAAG,UAA8C;CACjG,IAAI,SAAkC,EAAE;AAExC,MAAK,MAAM,SAAS,SAClB,UAAS,SAAS,QAAQ,MAAM;AAGlC,QAAO"}
+{"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["'use client';\n\nimport 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":";;;;;AASA,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"}

package/dist/dev/utils/types.d.ts

@@ -1,5 +1,4 @@
 import { CSSProperties, ComponentPropsWithRef, ElementType, ReactElement } from "react";
-
 //#region src/utils/types.d.ts
 /** Props that can be spread on any HTML element. */
 type HTMLProps<T = any> = React.HTMLAttributes<T> & {
@@ -18,8 +17,11 @@ type RenderProp<State> = ReactElement | RenderFunction<HTMLProps, State>;
  * - `render` prop for element customization
  */
 type UIComponentProps<TagName extends keyof React.JSX.IntrinsicElements, State> = Omit<React.JSX.IntrinsicElements[TagName], 'className' | 'style'> & {
-  /** Class name or function returning class name from state. */className?: string | ((state: State) => string | undefined) | undefined; /** Style or function returning style from state. */
-  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined; /** Render prop for custom element. */
+  /** Class name or function returning class name from state. */
+  className?: string | ((state: State) => string | undefined) | undefined;
+  /** Style or function returning style from state. */
+  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;
+  /** Render prop for custom element. */
   render?: RenderProp<State> | undefined;
 };
 //#endregion

package/dist/dev/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/utils/types.ts"],"mappings":";;;;KAGY,SAAA,YAAqB,KAAA,CAAM,cAAA,CAAe,CAAA;EACpD,GAAA,GAAM,KAAA,CAAM,GAAA,CAAI,CAAA;AAAA;;KAIN,cAAA,kBAAgC,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,KAAA,KAAU,YAAA;;KAG/D,UAAA,UAAoB,YAAA,GAAe,cAAA,CAAe,SAAA,EAAW,KAAA;;;;;;;;;KAU7D,gBAAA,uBAAuC,KAAA,CAAM,GAAA,CAAI,iBAAA,WAA4B,IAAA,CACvF,KAAA,CAAM,GAAA,CAAI,iBAAA,CAAkB,OAAA;EAlBhB,8DAsBZ,SAAA,cAAuB,KAAA,EAAO,KAAA,sCAtBb;EAwBjB,KAAA,GAAQ,aAAA,KAAkB,KAAA,EAAO,KAAA,KAAU,aAAA,2BApBjC;EAsBV,MAAA,GAAS,UAAA,CAAW,KAAA;AAAA"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/utils/types.ts"],"mappings":";;;KAGY,UAAU,WAAW,MAAM,eAAe;EACpD,MAAM,MAAM,IAAI;;;KAIN,eAAe,OAAO,UAAU,OAAO,OAAO,OAAO,UAAU;;KAG/D,WAAW,SAAS,eAAe,eAAe,WAAW;;;;;;;;;KAU7D,iBAAiB,sBAAsB,MAAM,IAAI,mBAAmB,SAAS,KACvF,MAAM,IAAI,kBAAkB;;EAI5B,uBAAuB,OAAO;;EAE9B,QAAQ,kBAAkB,OAAO,UAAU;;EAE3C,SAAS,WAAW"}

package/dist/dev/utils/use-attach-iframe.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-attach-iframe.js","names":[],"sources":["../../../src/utils/use-attach-iframe.ts"],"sourcesContent":["'use client';\n\nimport type { MediaEngineHost } from '@videojs/core';\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":";;;AAMA,SAAgB,gBAA6C,OAAwC;AACnG,QAAO,aACJ,YAAsB;AACrB,MAAI,QAAS,OAAM,SAAS,QAAQ;MAC/B,OAAM,UAAU;AACrB,eAAa,MAAM,UAAU;IAE/B,CAAC,MAAM,CACR"}
+{"version":3,"file":"use-attach-iframe.js","names":[],"sources":["../../../src/utils/use-attach-iframe.ts"],"sourcesContent":["'use client';\n\nimport 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":";;;AAMA,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"}

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

@@ -1,6 +1,5 @@
+import { MediaEngineHost } from "@videojs/media";
 import { RefCallback } from "react";
-import { MediaEngineHost } from "@videojs/core";
-
 //#region src/utils/use-attach-media.d.ts
 declare function useAttachMedia<T extends HTMLMediaElement>(media: MediaEngineHost): RefCallback<T>;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"use-attach-media.d.ts","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"mappings":";;;;iBAMgB,cAAA,WAAyB,gBAAA,CAAA,CAAkB,KAAA,EAAO,eAAA,GAAkB,WAAA,CAAY,CAAA"}
+{"version":3,"file":"use-attach-media.d.ts","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"mappings":";;;iBAMgB,eAAe,UAAU,kBAAkB,OAAO,kBAAkB,YAAY"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["'use client';\n\nimport type { MediaEngineHost } from '@videojs/core';\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":";;;AAMA,SAAgB,eAA2C,OAAwC;AACjG,QAAO,aACJ,YAAsB;AACrB,MAAI,QAAS,OAAM,SAAS,QAAQ;MAC/B,OAAM,UAAU;AACrB,eAAa,MAAM,UAAU;IAE/B,CAAC,MAAM,CACR"}
+{"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["'use client';\n\nimport 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":";;;AAMA,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"}

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

@@ -1,5 +1,4 @@
 import { Ref, RefCallback } from "react";
-
 //#region src/utils/use-composed-refs.d.ts
 type OptionalRef<T> = Ref<T> | undefined;
 /**

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

@@ -1 +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"}
+{"version":3,"file":"use-composed-refs.d.ts","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"mappings":";;KAOK,YAAY,KAAK,IAAI;;;;;;;;;;iBA0BV,YAAY,MAAM,OAAO,YAAY,KAAK,YAAY,UAAU,YAAY;;;;;;;;;;;;iBAkC5E,gBAAgB,MAAM,MAAM,YAAY,OAAO,YAAY"}

package/dist/dev/utils/use-composed-refs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["'use client';\n\nimport { 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":";;;;;;;;;;;AAgBA,SAAS,OAAU,KAAqB,OAA2C;AACjF,KAAI,WAAW,IAAI,CACjB,QAAO,IAAI,MAAM;UACR,QAAQ,QAAQ,QAAQ,KAAA,EACjC,KAAI,UAAU;;;;;;;;;;;AAalB,SAAgB,YAAe,GAAG,MAA6D;CAC7F,MAAM,WAAW,KAAK,MAAM;AAE5B,SAAQ,SAA8B;EACpC,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO,KAAK,KAAK,CAAC;AAIzD,MAAI,SAAS,KAAK,WAAW,CAC3B,cAAa;AACX,QAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;AACzB,QAAI,WAAW,QAAQ,CACrB,UAAS;QAET,QAAO,SAAS,IAAI,KAAK;;;;;;;;;;;;;;;;AAmBrC,SAAgB,gBAAmB,GAAG,MAAwC;AAC5E,QAAO,YAAY,YAAY,GAAG,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC"}
+{"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["'use client';\n\nimport { 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":";;;;;;;;;;;AAgBA,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"}

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

@@ -1 +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"}
+{"version":3,"file":"use-destroy.d.ts","names":[],"sources":["../../../src/utils/use-destroy.ts"],"mappings":";UAMU;EACR;;;;;;;;;;;;;;;;iBAiBc,WAAW,UAAU,aAAa,oBAAoB"}

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\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"}
+{"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,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/dev/utils/use-force-render.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["'use client';\n\nimport { 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":";;;AAIA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,EAAE;AAC3D,QAAO"}
+{"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["'use client';\n\nimport { 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":";;;AAIA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,CAAC;CAC1D,OAAO;AACT"}

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

@@ -1 +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"}
+{"version":3,"file":"use-latest-ref.d.ts","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"mappings":";;;;;;;iBAUgB,aAAa,OAAO,OAAO,QAAQ;EAAW,SAAS;;kBAMtD;OACH,OAAO,SAAS;IAAW,SAAS"}

package/dist/dev/utils/use-latest-ref.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-latest-ref.js","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"sourcesContent":["'use client';\n\nimport { 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":";;;;;;;;;AAUA,SAAgB,aAAoB,OAA4C;CAC9E,MAAM,MAAM,OAAO,MAAM;AACzB,KAAI,UAAU;AACd,QAAO"}
+{"version":3,"file":"use-latest-ref.js","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"sourcesContent":["'use client';\n\nimport { 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":";;;;;;;;;AAUA,SAAgB,aAAoB,OAA4C;CAC9E,MAAM,MAAM,OAAO,KAAK;CACxB,IAAI,UAAU;CACd,OAAO;AACT"}

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

@@ -0,0 +1,17 @@
+import { MediaComponent } from "@videojs/media/dom/media-host";
+//#region src/utils/use-media-component.d.ts
+/**
+ * Create a media component (e.g. `GoogleCast`, `MuxData`) and register it
+ * with the media provided by the surrounding player context.
+ *
+ * Instantiates the component class once, registers it when a media host is
+ * available, follows the media when it changes, and destroys the component
+ * on unmount. Media that is not a media host (e.g. a plain `<video>`
+ * element) cannot carry media components and is ignored.
+ */
+declare function useMediaComponent<Component extends MediaComponent & {
+  destroy(): void;
+}>(ComponentClass: new () => Component): Component;
+//#endregion
+export { useMediaComponent };
+//# sourceMappingURL=use-media-component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-component.d.ts","names":[],"sources":["../../../src/utils/use-media-component.ts"],"mappings":";;;;;;;;;;;iBAkBgB,kBAAkB,kBAAkB;EAAmB;GACrE,0BAA0B,YACzB"}

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

@@ -0,0 +1,29 @@
+"use client";
+import { useMedia } from "../player/context.js";
+import { useDestroy } from "./use-destroy.js";
+import { useEffect, useState } from "react";
+import { HTMLMediaElementHost, addMediaComponent } from "@videojs/media/dom/media-host";
+//#region src/utils/use-media-component.ts
+/**
+* Create a media component (e.g. `GoogleCast`, `MuxData`) and register it
+* with the media provided by the surrounding player context.
+*
+* Instantiates the component class once, registers it when a media host is
+* available, follows the media when it changes, and destroys the component
+* on unmount. Media that is not a media host (e.g. a plain `<video>`
+* element) cannot carry media components and is ignored.
+*/
+function useMediaComponent(ComponentClass) {
+	const media = useMedia();
+	const [component] = useState(() => new ComponentClass());
+	useDestroy(component);
+	useEffect(() => {
+		if (!(media instanceof HTMLMediaElementHost)) return;
+		return addMediaComponent(media, component);
+	}, [media, component]);
+	return component;
+}
+//#endregion
+export { useMediaComponent };
+
+//# sourceMappingURL=use-media-component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-component.js","names":[],"sources":["../../../src/utils/use-media-component.ts"],"sourcesContent":["'use client';\n\nimport type { HTMLMediaTargetLike, MediaComponent } from '@videojs/media/dom/media-host';\nimport { addMediaComponent, HTMLMediaElementHost } from '@videojs/media/dom/media-host';\nimport { useEffect, useState } from 'react';\n\nimport { useMedia } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create a media component (e.g. `GoogleCast`, `MuxData`) and register it\n * with the media provided by the surrounding player context.\n *\n * Instantiates the component class once, registers it when a media host is\n * available, follows the media when it changes, and destroys the component\n * on unmount. Media that is not a media host (e.g. a plain `<video>`\n * element) cannot carry media components and is ignored.\n */\nexport function useMediaComponent<Component extends MediaComponent & { destroy(): void }>(\n  ComponentClass: new () => Component\n): Component {\n  const media = useMedia();\n  const [component] = useState(() => new ComponentClass());\n\n  useDestroy(component);\n\n  useEffect(() => {\n    if (!(media instanceof HTMLMediaElementHost)) return;\n    return addMediaComponent(media as HTMLMediaElementHost<HTMLMediaTargetLike, any>, component);\n  }, [media, component]);\n\n  return component;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,SAAgB,kBACd,gBACW;CACX,MAAM,QAAQ,SAAS;CACvB,MAAM,CAAC,aAAa,eAAe,IAAI,eAAe,CAAC;CAEvD,WAAW,SAAS;CAEpB,gBAAgB;EACd,IAAI,EAAE,iBAAiB,uBAAuB;EAC9C,OAAO,kBAAkB,OAAyD,SAAS;CAC7F,GAAG,CAAC,OAAO,SAAS,CAAC;CAErB,OAAO;AACT"}

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

@@ -1,5 +1,4 @@
-import { Media } from "@videojs/core";
-
+import { Media } from "@videojs/media";
 //#region src/utils/use-media-instance.d.ts
 /**
  * Create and manage a media instance lifecycle within a player context.
@@ -9,7 +8,7 @@ import { Media } from "@videojs/core";
  * conditions when swapping media components (e.g. DashVideo → HlsJsVideo).
  *
  * An optional `setup` callback runs once on mount — e.g. to add media
- * components via `addComponent`. Components registered there are destroyed
+ * components via `addMediaComponent`. Components registered there are destroyed
  * together with the media instance on unmount (`media.destroy()` destroys
  * all of its registered components).
  */

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

@@ -1 +1 @@
-{"version":3,"file":"use-media-instance.d.ts","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"mappings":";;;;;AAoBA;;;;;;;;;;iBAAgB,gBAAA,kBAAkC,KAAA;EAAU,OAAA;AAAA,EAAA,CAC1D,UAAA,YAAsB,QAAA,EACtB,KAAA,IAAS,KAAA,EAAO,QAAA,YACf,QAAA"}
+{"version":3,"file":"use-media-instance.d.ts","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"mappings":";;;;;;;;;;;;;;iBAoBgB,iBAAiB,iBAAiB;EAAU;GAC1D,sBAAsB,UACtB,SAAS,OAAO,oBACf"}

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

@@ -11,7 +11,7 @@ import { useState } from "react";
 * conditions when swapping media components (e.g. DashVideo → HlsJsVideo).
 *
 * An optional `setup` callback runs once on mount — e.g. to add media
-* components via `addComponent`. Components registered there are destroyed
+* components via `addMediaComponent`. Components registered there are destroyed
 * together with the media instance on unmount (`media.destroy()` destroys
 * all of its registered components).
 */

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

@@ -1 +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';\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 → HlsJsVideo).\n *\n * An optional `setup` callback runs once on mount — e.g. to add media\n * components via `addComponent`. Components registered there are destroyed\n * together with the media instance on unmount (`media.destroy()` destroys\n * all of its registered components).\n */\nexport function useMediaInstance<Instance extends Media & { destroy(): void }>(\n  MediaClass: new () => Instance,\n  setup?: (media: Instance) => void\n): Instance {\n  const [instance] = useState(() => new MediaClass());\n  const setMedia = useMediaAttach();\n\n  useDestroy(\n    instance,\n    () => {\n      setup?.(instance);\n      setMedia?.(instance);\n    },\n    () => setMedia?.((prev) => (prev === instance ? null : prev))\n  );\n\n  return instance;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,SAAgB,iBACd,YACA,OACU;CACV,MAAM,CAAC,YAAY,eAAe,IAAI,YAAY,CAAC;CACnD,MAAM,WAAW,gBAAgB;AAEjC,YACE,gBACM;AACJ,UAAQ,SAAS;AACjB,aAAW,SAAS;UAEhB,YAAY,SAAU,SAAS,WAAW,OAAO,KAAM,CAC9D;AAED,QAAO"}
+{"version":3,"file":"use-media-instance.js","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"sourcesContent":["'use client';\n\nimport type { Media } from '@videojs/media';\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 → HlsJsVideo).\n *\n * An optional `setup` callback runs once on mount — e.g. to add media\n * components via `addMediaComponent`. Components registered there are destroyed\n * together with the media instance on unmount (`media.destroy()` destroys\n * all of its registered components).\n */\nexport function useMediaInstance<Instance extends Media & { destroy(): void }>(\n  MediaClass: new () => Instance,\n  setup?: (media: Instance) => void\n): Instance {\n  const [instance] = useState(() => new MediaClass());\n  const setMedia = useMediaAttach();\n\n  useDestroy(\n    instance,\n    () => {\n      setup?.(instance);\n      setMedia?.(instance);\n    },\n    () => setMedia?.((prev) => (prev === instance ? null : prev))\n  );\n\n  return instance;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,SAAgB,iBACd,YACA,OACU;CACV,MAAM,CAAC,YAAY,eAAe,IAAI,WAAW,CAAC;CAClD,MAAM,WAAW,eAAe;CAEhC,WACE,gBACM;EACJ,QAAQ,QAAQ;EAChB,WAAW,QAAQ;CACrB,SACM,YAAY,SAAU,SAAS,WAAW,OAAO,IAAK,CAC9D;CAEA,OAAO;AACT"}