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

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

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

Files changed (1415) hide show

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

@@ -1,4 +1,3 @@
-"use client";
 import { useLocale, useTranslator } from "../../i18n/context.js";
 import { usePlayer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
@@ -16,6 +15,7 @@ const noopVolume = {
 	volume: 0,
 	muted: false,
 	volumeAvailability: "unsupported",
+	mutedAvailability: "unsupported",
 	setVolume: () => 0,
 	toggleMuted: () => false
 };
@@ -24,6 +24,8 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 	const volume = usePlayer(selectVolume);
 	const translator = useTranslator();
 	const locale = useLocale();
+	const isUnavailable = volume?.volumeAvailability !== "available";
+	const isDisabled = Boolean(disabled) || isUnavailable;
 	const [core] = useState(() => new VolumeSliderCore());
 	core.setProps({
 		label,
@@ -36,11 +38,11 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 	});
 	core.setFormatLocale(locale);
 	const volumeRef = useLatestRef(volume);
-	const disabledRef = useLatestRef(disabled);
+	const disabledRef = useLatestRef(isDisabled);
 	const getPercent = () => (volumeRef.current?.volume ?? 0) * 100;
 	const getStepPercent = () => core.getStepPercent();
 	const setVolume = (percent) => volumeRef.current?.setVolume(percent / 100);
-	const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
+	const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
 		computeState: (input) => {
 			core.setInput(input);
 			core.setMedia(volume ?? noopVolume);
@@ -50,7 +52,7 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 		getStepPercent,
 		getLargeStepPercent: () => core.getLargeStepPercent(),
 		orientation,
-		disabled,
+		disabled: isDisabled,
 		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
 		getCSSVars: getSliderCSSVars,
 		onValueChange: setVolume,
@@ -59,7 +61,7 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 		onDragEnd
 	});
 	const [wheelHandler] = useState(() => createWheelStep({
-		isDisabled: () => !!disabledRef.current || !volumeRef.current,
+		isDisabled: () => disabledRef.current,
 		getPercent: () => (volumeRef.current?.volume ?? 0) * 100,
 		getStepPercent: () => core.getWheelStepPercent(),
 		onValueChange: (percent) => volumeRef.current?.setVolume(percent / 100)
@@ -74,10 +76,13 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 		logMissingFeature("VolumeSlider", "volume");
 		return null;
 	}
+	if (state.hidden) return null;
 	return /* @__PURE__ */ jsx(SliderProvider, {
 		value: {
 			state,
 			pointerValue: core.valueFromPercent(state.pointerPercent),
+			input,
+			getPointerValue: (percent) => core.valueFromPercent(percent),
 			thumbRef,
 			thumbProps,
 			stateAttrMap: VolumeSliderDataAttrs,

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

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

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

	@@ -1 +1 @@
1	- {"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"}
1	+ {"version":3,"file":"merge-props.d.ts","names":[],"sources":["../../../src/utils/merge-props.ts"],"mappings":";;KAEK,MAAM,UAAU,cAAc,eAAe,sBAAsB;;;;;;;;;;;;;;;;;;;iBAqGxD,WAAW,UAAU,gBAAgB,WAAW,MAAM,oBAAoB,MAAM"}

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

@@ -1,4 +1,3 @@
-"use client";
 //#region src/utils/merge-props.ts
 /**
 * Check if a key is an event handler key (on* with capital letter).

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

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

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

@@ -1,4 +1,3 @@
-"use client";
 import { useCallback } from "react";
 //#region src/utils/use-attach-iframe.ts
 function useAttachIframe(media) {

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-attach-media.d.ts","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"mappings":";;;~~iBAMgB~~,eAAe,UAAU,kBAAkB,OAAO,kBAAkB,YAAY"}
1	+ {"version":3,"file":"use-attach-media.d.ts","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"mappings":";;;iBAIgB,eAAe,UAAU,kBAAkB,OAAO,kBAAkB,YAAY"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { useCallback } from "react";
 //#region src/utils/use-attach-media.ts
 function useAttachMedia(media) {

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

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

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

	@@ -1 +1 @@
1	- {"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"}
1	+ {"version":3,"file":"use-composed-refs.d.ts","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"mappings":";;KAKK,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 CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { useCallback } from "react";
 import { isFunction } from "@videojs/utils/predicate";
 //#region src/utils/use-composed-refs.ts

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-destroy.d.ts","names":[],"sources":["../../../src/utils/use-destroy.ts"],"mappings":";~~UAMU~~;EACR;;;;;;;;;;;;;;;;iBAiBc,WAAW,UAAU,aAAa,oBAAoB"}
1	+ {"version":3,"file":"use-destroy.d.ts","names":[],"sources":["../../../src/utils/use-destroy.ts"],"mappings":";UAIU;EACR;;;;;;;;;;;;;;;;iBAiBc,WAAW,UAAU,aAAa,oBAAoB"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { useLatestRef } from "./use-latest-ref.js";
 import { useEffect, useRef } from "react";
 //#region src/utils/use-destroy.ts

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

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

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

@@ -1,4 +1,3 @@
-"use client";
 import { useReducer } from "react";
 //#region src/utils/use-force-render.ts
 function useForceRender() {

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

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

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

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

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

@@ -1,4 +1,3 @@
-"use client";
 import { useRef } from "react";
 //#region src/utils/use-latest-ref.ts
 /**

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

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

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"use-media-component.d.ts","names":[],"sources":["../../../src/utils/use-media-component.ts"],"mappings":";;;;;;;;;;;iBAgBgB,kBAAkB,kBAAkB;EAAmB;GACrE,0BAA0B,YACzB"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { useMedia } from "../player/context.js";
 import { useDestroy } from "./use-destroy.js";
 import { useEffect, useState } from "react";

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"use-media-component.js","names":[],"sources":["../../../src/utils/use-media-component.ts"],"sourcesContent":["import 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":";;;;;;;;;;;;;;AAgBA,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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"version":3,"file":"use-media-instance.d.ts","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"mappings":";;;;;;;;;;;;;;iBAkBgB,iBAAiB,iBAAiB;EAAU;GAC1D,sBAAsB,UACtB,SAAS,OAAO,oBACf"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { useMediaAttach } from "../player/context.js";
 import { useDestroy } from "./use-destroy.js";
 import { useState } from "react";

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

	@@ -1 +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/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"}
1	+ {"version":3,"file":"use-media-instance.js","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"sourcesContent":["import 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":";;;;;;;;;;;;;;;;AAkBA,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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-render.d.ts","names":[],"sources":["../../../src/utils/use-render.tsx"],"mappings":";;;;~~KAeK~~,yBAAyB,MAAM,IAAI;UAEvB,wBAAwB;EACvC,uBAAuB,OAAO;EAC9B,QAAQ,kBAAkB,OAAO,UAAU;EAC3C,SAAS,WAAW;;UAGL,oBAAoB,OAAO,4BAA4B;EACtE,OAAO;EACP,MAAM,IAAI,uBAAuB,IAAI;EACrC;EACA,eAAe,aAAa;;;;;;;;;;;;;;;;;;;;;;iBA4Cd,cACd,sBACA,4BAA4B,SAC5B,gBAAgB,kBAEhB,SAAS,SACT,gBAAgB,wBAAwB,QACxC,QAAQ,oBAAoB,OAAO,uBAClC;kBAiDc;OACH,eAAe,SAAS,wBAAwB;OAChD,WAAW,OAAO,4BAA4B,WAAW,oBAAoB,OAAO"}
1	+ {"version":3,"file":"use-render.d.ts","names":[],"sources":["../../../src/utils/use-render.tsx"],"mappings":";;;;KAaK,yBAAyB,MAAM,IAAI;UAEvB,wBAAwB;EACvC,uBAAuB,OAAO;EAC9B,QAAQ,kBAAkB,OAAO,UAAU;EAC3C,SAAS,WAAW;;UAGL,oBAAoB,OAAO,4BAA4B;EACtE,OAAO;EACP,MAAM,IAAI,uBAAuB,IAAI;EACrC;EACA,eAAe,aAAa;;;;;;;;;;;;;;;;;;;;;;iBA4Cd,cACd,sBACA,4BAA4B,SAC5B,gBAAgB,kBAEhB,SAAS,SACT,gBAAgB,wBAAwB,QACxC,QAAQ,oBAAoB,OAAO,uBAClC;kBAiDc;OACH,eAAe,SAAS,wBAAwB;OAChD,WAAW,OAAO,4BAA4B,WAAW,oBAAoB,OAAO"}

package/dist/dev/utils/use-render.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { composeRefs } from "./use-composed-refs.js";
 import { mergeProps } from "./merge-props.js";
 import { getStateDataAttrs } from "@videojs/core/dom";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\n/** Check if a value is a render prop (function or React element). /\nexport function isRenderProp(value: unknown): value is RenderProp<unknown> {\n return isFunction(value) \|\| isValidElement(value);\n}\n\ntype IntrinsicTagName = keyof React.JSX.IntrinsicElements;\n\nexport interface UseRenderComponentProps<State> {\n className?: string \| ((state: State) => string \| undefined) \| undefined;\n style?: CSSProperties \| ((state: State) => CSSProperties \| undefined) \| undefined;\n render?: RenderProp<State> \| undefined;\n}\n\nexport interface UseRenderParameters<State, RenderedElementType extends Element> {\n state: State;\n ref?: Ref<RenderedElementType> \| Ref<RenderedElementType>[] \| undefined;\n props?: object \| object[] \| undefined;\n stateAttrMap?: StateAttrMap<State> \| undefined;\n}\n\nfunction resolveClassName<State>(\n className: string \| ((state: State) => string \| undefined) \| undefined,\n state: State\n): string \| undefined {\n return isFunction(className) ? className(state) : className;\n}\n\nfunction resolveStyle<State>(\n style: CSSProperties \| ((state: State) => CSSProperties \| undefined) \| undefined,\n state: State\n): CSSProperties \| undefined {\n return isFunction(style) ? style(state) : style;\n}\n\nfunction getElementRef(element: ReactElement): Ref<unknown> \| undefined {\n // React 19+ uses element.props.ref, older versions use element.ref\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const elementAny = element as any;\n return elementAny.ref ?? elementAny.props?.ref;\n}\n\n/\n Render a UI component element.\n \n Handles:\n * - Default tag rendering\n * - Render prop (element or function)\n * - Props merging (event handlers chained, className concatenated, style merged)\n * - Ref composition\n * - className/style as functions of state\n \n @public\n * @example\n * ```tsx\n * return renderElement('button', componentProps, {\n * state,\n * ref: [forwardedRef, buttonRef],\n * props: [{ type: 'button' }, elementProps, getButtonProps],\n * });\n * ```\n */\nexport function renderElement<\n State extends object,\n RenderedElementType extends Element,\n TagName extends IntrinsicTagName,\n>(\n element: TagName,\n componentProps: UseRenderComponentProps<State>,\n params: UseRenderParameters<State, RenderedElementType>\n): ReactElement \| null {\n const { className: classNameProp, style: styleProp, render } = componentProps;\n const { state, ref, props, stateAttrMap } = params;\n\n // Resolve className and style if they're functions\n const className = resolveClassName(classNameProp, state);\n const style = resolveStyle(styleProp, state);\n\n // Generate data attributes only when a component explicitly opts in with a\n // mapping. State is still passed to render/className/style callbacks.\n const stateDataAttrs = stateAttrMap ? getStateDataAttrs(state, stateAttrMap) : {};\n\n // Merge: state data attrs first, then props (so props can override)\n const propsArray = Array.isArray(props) ? props : props ? [props] : [];\n const mergedProps = mergeProps(stateDataAttrs, ...(propsArray as Record<string, unknown>[]));\n\n if (className !== undefined) {\n // Add resolved className and style\n mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;\n }\n\n if (style !== undefined) {\n mergedProps.style = mergedProps.style ? { ...(mergedProps.style as CSSProperties), ...style } : style;\n }\n\n if (isFunction(render)) {\n // Render function: call with props and state\n const mergedRef = composeRefs(ref, mergedProps.ref);\n return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n }\n\n if (isValidElement(render)) {\n const elementRef = getElementRef(render);\n\n const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);\n\n const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n elementProps.ref = mergedRef;\n\n return cloneElement(render, elementProps);\n }\n\n // Default tag\n const mergedRef = composeRefs(ref, mergedProps.ref);\n mergedProps.ref = mergedRef;\n\n return createElement(element, mergedProps);\n}\n\nexport namespace renderElement {\n export type ComponentProps<State> = UseRenderComponentProps<State>;\n export type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;\n}\n"],"mappings":"~~;;;;;;;;AAWA~~,SAAgB,aAAa,OAA8C;CACzE,OAAO,WAAW,KAAK,KAAK,eAAe,KAAK;AAClD;AAiBA,SAAS,iBACP,WACA,OACoB;CACpB,OAAO,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;AACpD;AAEA,SAAS,aACP,OACA,OAC2B;CAC3B,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;AAC5C;AAEA,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;CACnB,OAAO,WAAW,OAAO,WAAW,OAAO;AAC7C;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,cAKd,SACA,gBACA,QACqB;CACrB,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,WAAW;CAC/D,MAAM,EAAE,OAAO,KAAK,OAAO,iBAAiB;CAG5C,MAAM,YAAY,iBAAiB,eAAe,KAAK;CACvD,MAAM,QAAQ,aAAa,WAAW,KAAK;CAQ3C,MAAM,cAAc,WAJG,eAAe,kBAAkB,OAAO,YAAY,IAAI,CAAC,GAIjC,GAD5B,MAAM,QAAQ,KAAK,IAAI,QAAQ,QAAQ,CAAC,KAAK,IAAI,CAAC,CACsB;CAE3F,IAAI,cAAc,KAAA,GAEhB,YAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;CAG5F,IAAI,UAAU,KAAA,GACZ,YAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;CAAM,IAAI;CAGlG,IAAI,WAAW,MAAM,GAAG;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,GAAG;EAClD,OAAO,OAAO;GAAE,GAAG;GAAa,KAAK;EAAU,GAAgB,KAAK;CACtE;CAEA,IAAI,eAAe,MAAM,GAAG;EAC1B,MAAM,aAAa,cAAc,MAAM;EAEvC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,UAAU;EAE9D,MAAM,eAAe,WAAW,aAAa,OAAO,KAAgC;EACpF,aAAa,MAAM;EAEnB,OAAO,aAAa,QAAQ,YAAY;CAC1C;CAIA,YAAY,MADM,YAAY,KAAK,YAAY,GACrB;CAE1B,OAAO,cAAc,SAAS,WAAW;AAC3C"}
1	+ {"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["import { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\n/** Check if a value is a render prop (function or React element). /\nexport function isRenderProp(value: unknown): value is RenderProp<unknown> {\n return isFunction(value) \|\| isValidElement(value);\n}\n\ntype IntrinsicTagName = keyof React.JSX.IntrinsicElements;\n\nexport interface UseRenderComponentProps<State> {\n className?: string \| ((state: State) => string \| undefined) \| undefined;\n style?: CSSProperties \| ((state: State) => CSSProperties \| undefined) \| undefined;\n render?: RenderProp<State> \| undefined;\n}\n\nexport interface UseRenderParameters<State, RenderedElementType extends Element> {\n state: State;\n ref?: Ref<RenderedElementType> \| Ref<RenderedElementType>[] \| undefined;\n props?: object \| object[] \| undefined;\n stateAttrMap?: StateAttrMap<State> \| undefined;\n}\n\nfunction resolveClassName<State>(\n className: string \| ((state: State) => string \| undefined) \| undefined,\n state: State\n): string \| undefined {\n return isFunction(className) ? className(state) : className;\n}\n\nfunction resolveStyle<State>(\n style: CSSProperties \| ((state: State) => CSSProperties \| undefined) \| undefined,\n state: State\n): CSSProperties \| undefined {\n return isFunction(style) ? style(state) : style;\n}\n\nfunction getElementRef(element: ReactElement): Ref<unknown> \| undefined {\n // React 19+ uses element.props.ref, older versions use element.ref\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const elementAny = element as any;\n return elementAny.ref ?? elementAny.props?.ref;\n}\n\n/\n Render a UI component element.\n \n Handles:\n * - Default tag rendering\n * - Render prop (element or function)\n * - Props merging (event handlers chained, className concatenated, style merged)\n * - Ref composition\n * - className/style as functions of state\n \n @public\n * @example\n * ```tsx\n * return renderElement('button', componentProps, {\n * state,\n * ref: [forwardedRef, buttonRef],\n * props: [{ type: 'button' }, elementProps, getButtonProps],\n * });\n * ```\n */\nexport function renderElement<\n State extends object,\n RenderedElementType extends Element,\n TagName extends IntrinsicTagName,\n>(\n element: TagName,\n componentProps: UseRenderComponentProps<State>,\n params: UseRenderParameters<State, RenderedElementType>\n): ReactElement \| null {\n const { className: classNameProp, style: styleProp, render } = componentProps;\n const { state, ref, props, stateAttrMap } = params;\n\n // Resolve className and style if they're functions\n const className = resolveClassName(classNameProp, state);\n const style = resolveStyle(styleProp, state);\n\n // Generate data attributes only when a component explicitly opts in with a\n // mapping. State is still passed to render/className/style callbacks.\n const stateDataAttrs = stateAttrMap ? getStateDataAttrs(state, stateAttrMap) : {};\n\n // Merge: state data attrs first, then props (so props can override)\n const propsArray = Array.isArray(props) ? props : props ? [props] : [];\n const mergedProps = mergeProps(stateDataAttrs, ...(propsArray as Record<string, unknown>[]));\n\n if (className !== undefined) {\n // Add resolved className and style\n mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;\n }\n\n if (style !== undefined) {\n mergedProps.style = mergedProps.style ? { ...(mergedProps.style as CSSProperties), ...style } : style;\n }\n\n if (isFunction(render)) {\n // Render function: call with props and state\n const mergedRef = composeRefs(ref, mergedProps.ref);\n return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n }\n\n if (isValidElement(render)) {\n const elementRef = getElementRef(render);\n\n const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);\n\n const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n elementProps.ref = mergedRef;\n\n return cloneElement(render, elementProps);\n }\n\n // Default tag\n const mergedRef = composeRefs(ref, mergedProps.ref);\n mergedProps.ref = mergedRef;\n\n return createElement(element, mergedProps);\n}\n\nexport namespace renderElement {\n export type ComponentProps<State> = UseRenderComponentProps<State>;\n export type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;\n}\n"],"mappings":";;;;;;;AASA,SAAgB,aAAa,OAA8C;CACzE,OAAO,WAAW,KAAK,KAAK,eAAe,KAAK;AAClD;AAiBA,SAAS,iBACP,WACA,OACoB;CACpB,OAAO,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;AACpD;AAEA,SAAS,aACP,OACA,OAC2B;CAC3B,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;AAC5C;AAEA,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;CACnB,OAAO,WAAW,OAAO,WAAW,OAAO;AAC7C;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,cAKd,SACA,gBACA,QACqB;CACrB,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,WAAW;CAC/D,MAAM,EAAE,OAAO,KAAK,OAAO,iBAAiB;CAG5C,MAAM,YAAY,iBAAiB,eAAe,KAAK;CACvD,MAAM,QAAQ,aAAa,WAAW,KAAK;CAQ3C,MAAM,cAAc,WAJG,eAAe,kBAAkB,OAAO,YAAY,IAAI,CAAC,GAIjC,GAD5B,MAAM,QAAQ,KAAK,IAAI,QAAQ,QAAQ,CAAC,KAAK,IAAI,CAAC,CACsB;CAE3F,IAAI,cAAc,KAAA,GAEhB,YAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;CAG5F,IAAI,UAAU,KAAA,GACZ,YAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;CAAM,IAAI;CAGlG,IAAI,WAAW,MAAM,GAAG;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,GAAG;EAClD,OAAO,OAAO;GAAE,GAAG;GAAa,KAAK;EAAU,GAAgB,KAAK;CACtE;CAEA,IAAI,eAAe,MAAM,GAAG;EAC1B,MAAM,aAAa,cAAc,MAAM;EAEvC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,UAAU;EAE9D,MAAM,eAAe,WAAW,aAAa,OAAO,KAAgC;EACpF,aAAa,MAAM;EAEnB,OAAO,aAAa,QAAQ,YAAY;CAC1C;CAIA,YAAY,MADM,YAAY,KAAK,YAAY,GACrB;CAE1B,OAAO,cAAc,SAAS,WAAW;AAC3C"}

package/dist/dev/utils/use-safe-id.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { useId } from "react";
 //#region src/utils/use-safe-id.ts
 const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;

package/dist/dev/utils/use-safe-id.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-safe-id.js","names":[],"sources":["../../../src/utils/use-safe-id.ts"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { useId } from 'react';\n\nconst UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;\n\n/*\n Generate a CSS-safe identifier from React's `useId()`.\n \n `useId()` returns values like `:r0:` which contain colons — invalid\n * in CSS `<dashed-ident>` tokens (used by `anchor-name` / `position-anchor`).\n * This hook strips non-alphanumeric/underscore/hyphen characters and\n * optionally prepends a prefix.\n */\nexport function useSafeId(prefix?: string): string {\n const raw = useId().replace(UNSAFE_CHARS, '');\n return prefix ? `${prefix}-${raw}` : raw;\n}\n"],"mappings":"~~;;;AAIA~~,MAAM,eAAe;;;;;;;;;AAUrB,SAAgB,UAAU,QAAyB;CACjD,MAAM,MAAM,MAAM,CAAC,CAAC,QAAQ,cAAc,EAAE;CAC5C,OAAO,SAAS,GAAG,OAAO,GAAG,QAAQ;AACvC"}
1	+ {"version":3,"file":"use-safe-id.js","names":[],"sources":["../../../src/utils/use-safe-id.ts"],"sourcesContent":["import { useId } from 'react';\n\nconst UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;\n\n/*\n Generate a CSS-safe identifier from React's `useId()`.\n \n `useId()` returns values like `:r0:` which contain colons — invalid\n * in CSS `<dashed-ident>` tokens (used by `anchor-name` / `position-anchor`).\n * This hook strips non-alphanumeric/underscore/hyphen characters and\n * optionally prepends a prefix.\n */\nexport function useSafeId(prefix?: string): string {\n const raw = useId().replace(UNSAFE_CHARS, '');\n return prefix ? `${prefix}-${raw}` : raw;\n}\n"],"mappings":";;AAEA,MAAM,eAAe;;;;;;;;;AAUrB,SAAgB,UAAU,QAAyB;CACjD,MAAM,MAAM,MAAM,CAAC,CAAC,QAAQ,cAAc,EAAE;CAC5C,OAAO,SAAS,GAAG,OAAO,GAAG,QAAQ;AACvC"}

package/docs/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # @videojs/react documentation
-Bundled markdown documentation for `@videojs/react` v10.0.0-beta.26.
+Bundled markdown documentation for `@videojs/react` v10.0.0-beta.28.
 Start at [`./llms.txt`](./llms.txt) — it's the structured index of every page in this directory.

package/docs/concepts/cast.md CHANGED Viewed

@@ -7,17 +7,17 @@ Add Google Cast to any Video.js streaming media element (HLS and DASH) by placin
 App.tsx
 ```
-import { CastButton, createPlayer } from '@videojs/react';
+import { CastButton, Container, createPlayer } from '@videojs/react';
 import { GoogleCast } from '@videojs/react/media/google-cast';
 import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
 import { videoFeatures } from '@videojs/react/video';
-const Player = createPlayer({ features: videoFeatures });
+const { Player } = createPlayer({ features: videoFeatures });
 export default function App() {
   return (
-    <Player.Provider>
-      <Player.Container>
+    <Player>
+      <Container>
         <HlsJsVideo
           src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
           autoPlay
@@ -27,8 +27,8 @@ export default function App() {
         />
         <GoogleCast />
         <CastButton />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```

package/docs/concepts/features.md CHANGED Viewed

@@ -10,15 +10,18 @@ Not every player needs to support every use case. To address this, Video.js has
 You probably don’t want to hand-pick every feature your player needs. A **feature bundle** groups the features needed for a specific use case into a single array.
-For example, `videoFeatures` bundles playback, volume, time, fullscreen, and more — everything a general video player needs:
+For example, the `/video` preset configures `VideoPlayer` with `videoFeatures`, which bundles playback, volume, time, fullscreen, and more — everything a general video player needs:
 tsx
 ```
-import { createPlayer } from '@videojs/react';
-import { videoFeatures } from '@videojs/react/video';
+import { VideoPlayer, Video, VideoSkin } from '@videojs/react/video';
-const Player = createPlayer({ features: videoFeatures });
+<VideoPlayer>
+  <VideoSkin>
+    <Video src="movie.mp4" />
+  </VideoSkin>
+</VideoPlayer>
 ```
 Feature bundles are usually paired with specific skins and media elements in a **preset**. To learn more about this, and the available presets, you’ll want to check out the presets guide.
@@ -34,7 +37,7 @@ tsx
 ```
 import { createPlayer, playbackFeature, volumeFeature, timeFeature, controlsFeature } from '@videojs/react';
-const Player = createPlayer({
+const { Player } = createPlayer({
   features: [playbackFeature, volumeFeature, timeFeature, controlsFeature],
 });
 ```
@@ -49,7 +52,7 @@ tsx
 import { createPlayer, playbackFeature } from '@videojs/react';
 import { backgroundFeatures } from '@videojs/react/background';
-const Player = createPlayer({
+const { Player } = createPlayer({
   features: [...backgroundFeatures, playbackFeature],
 });
 ```
@@ -88,7 +91,7 @@ playback?.play();
 ### Checking for feature support
-Volume, fullscreen, and picture-in-picture expose an `*Availability` property because platform support varies. For example, iOS Safari doesn’t allow programmatic volume control.
+Volume, fullscreen, and picture-in-picture expose availability properties because platform support varies. Volume has two independent properties: `volumeAvailability` for changing the volume level and `mutedAvailability` for toggling mute. For example, iOS Safari allows muting but doesn’t allow programmatic volume control.
 Value
@@ -106,7 +109,7 @@ Could work, not ready yet
 Platform can never do this
-Components that depend on availability (like [`PiPButton`](../reference/pip-button.md) and [`FullscreenButton`](../reference/fullscreen-button.md)) handle the three states for you:
+Components that depend on availability (like [`MuteButton`](../reference/mute-button.md), [`PiPButton`](../reference/pip-button.md), and [`FullscreenButton`](../reference/fullscreen-button.md)) handle the three states for you:
 *   **`unsupported`** — the HTML custom element receives the native `hidden` attribute (and `data-hidden`); React buttons return `null`. No CSS needed.
 *   **`unavailable`** — the presentation controls stay hidden while capability detection is unresolved. Cast remains visible but disabled when its API is supported and no device is reachable.