@videojs/react 10.0.0-rc.1 → 10.0.0-rc.3

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

@@ -1,22 +0,0 @@
-import { renderElement } from "../../utils/use-render.js";
-import { useVolumeIndicatorContext } from "./context.js";
-import { getVolumeIndicatorDisplayValue } from "@videojs/core";
-import { forwardRef } from "react";
-//#region src/ui/volume-indicator/volume-indicator-value.tsx
-const VolumeIndicatorValue = forwardRef(function VolumeIndicatorValue(componentProps, forwardedRef) {
-	const { render, className, style, ...elementProps } = componentProps;
-	const { state } = useVolumeIndicatorContext();
-	return renderElement("span", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		ref: forwardedRef,
-		props: [{ children: getVolumeIndicatorDisplayValue(state) }, elementProps]
-	});
-});
-//#endregion
-export { VolumeIndicatorValue };
-
-//# sourceMappingURL=volume-indicator-value.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"volume-indicator-value.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-value.tsx"],"sourcesContent":["import { 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":";;;;;AAUA,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-popover/index.parts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../../src/ui/volume-popover/index.parts.ts"],"mappings":""}

package/dist/dev/ui/volume-popover/volume-popover-popup.d.ts

@@ -1,11 +0,0 @@
-import { PopoverPopupProps } from "../popover/popover-popup.js";
-//#region src/ui/volume-popover/volume-popover-popup.d.ts
-interface VolumePopoverPopupProps extends PopoverPopupProps {}
-/** Positioned volume content. Omitted when volume level controls are unavailable. */
-declare const VolumePopoverPopup: import("react").ForwardRefExoticComponent<Omit<VolumePopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare namespace VolumePopoverPopup {
-  type Props = VolumePopoverPopupProps;
-}
-//#endregion
-export { VolumePopoverPopup, VolumePopoverPopupProps };
-//# sourceMappingURL=volume-popover-popup.d.ts.map

package/dist/dev/ui/volume-popover/volume-popover-popup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"volume-popover-popup.d.ts","names":[],"sources":["../../../../src/ui/volume-popover/volume-popover-popup.tsx"],"mappings":";;UAOiB,gCAAgC;;cAGpC,oCAAkB,0BAAA,KAAA,kDAAA,cAAA;kBASd;OACH,QAAQ"}

package/dist/dev/ui/volume-popover/volume-popover-popup.js

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

package/dist/dev/ui/volume-popover/volume-popover-popup.js.map

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

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

@@ -1,14 +0,0 @@
-import { PopoverRootProps } from "../popover/popover-root.js";
-import { VolumePopoverCore } from "@videojs/core";
-import { ReactNode } from "react";
-//#region src/ui/volume-popover/volume-popover-root.d.ts
-interface VolumePopoverRootProps extends PopoverRootProps {}
-/** Owns volume availability and the popover interaction lifecycle. */
-declare function VolumePopoverRoot({ children, ...props }: VolumePopoverRootProps): ReactNode;
-declare namespace VolumePopoverRoot {
-  type Props = VolumePopoverRootProps;
-  type State = VolumePopoverCore.State;
-}
-//#endregion
-export { VolumePopoverRoot, VolumePopoverRootProps };
-//# sourceMappingURL=volume-popover-root.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"volume-popover-root.d.ts","names":[],"sources":["../../../../src/ui/volume-popover/volume-popover-root.tsx"],"mappings":";;;;UAqBiB,+BAA+B;;iBAGhC,oBAAoB,aAAa,SAAS,yBAAyB;kBA2BlE;OACH,QAAQ;OACR,QAAQ,kBAAkB"}

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

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

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

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

package/dist/dev/ui/volume-popover/volume-popover-trigger.d.ts

@@ -1,11 +0,0 @@
-import { PopoverTriggerProps } from "../popover/popover-trigger.js";
-//#region src/ui/volume-popover/volume-popover-trigger.d.ts
-interface VolumePopoverTriggerProps extends PopoverTriggerProps {}
-/** Opens the volume popup, or renders its mute-button fallback when volume level controls are unavailable. */
-declare const VolumePopoverTrigger: import("react").ForwardRefExoticComponent<Omit<VolumePopoverTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-declare namespace VolumePopoverTrigger {
-  type Props = VolumePopoverTriggerProps;
-}
-//#endregion
-export { VolumePopoverTrigger, VolumePopoverTriggerProps };
-//# sourceMappingURL=volume-popover-trigger.d.ts.map

package/dist/dev/ui/volume-popover/volume-popover-trigger.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"volume-popover-trigger.d.ts","names":[],"sources":["../../../../src/ui/volume-popover/volume-popover-trigger.tsx"],"mappings":";;UAOiB,kCAAkC;;cAGtC,sCAAoB,0BAAA,KAAA,oDAAA,cAAA;kBAuBhB;OACH,QAAQ"}

package/dist/dev/ui/volume-popover/volume-popover-trigger.js

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

package/dist/dev/ui/volume-popover/volume-popover-trigger.js.map

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../../src/ui/volume-slider/index.parts.ts"],"mappings":""}

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

@@ -1,15 +0,0 @@
-import { UIComponentProps } from "../../utils/types.js";
-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: import("react").ForwardRefExoticComponent<Omit<VolumeSliderRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare namespace VolumeSliderRoot {
-  type Props = VolumeSliderRootProps;
-  type State = VolumeSliderCore.State;
-}
-//#endregion
-export { VolumeSliderRoot, VolumeSliderRootProps };
-//# sourceMappingURL=volume-slider-root.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"volume-slider-root.d.ts","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"mappings":";;;UAuBiB,8BAA8B,wBAAwB,iBAAiB,QAAQ,iBAAiB;EAC/G;EACA;;cAGW,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBAoIZ;OACH,QAAQ;OACR,QAAQ,iBAAiB"}

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

@@ -1,125 +0,0 @@
-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 { VolumeSliderCore, VolumeSliderDataAttrs } from "@videojs/core";
-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";
-//#region src/ui/volume-slider/volume-slider-root.tsx
-const noopVolume = {
-	volume: 0,
-	muted: false,
-	volumeAvailability: "unsupported",
-	mutedAvailability: "unsupported",
-	setVolume: () => 0,
-	toggleMuted: () => false
-};
-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 isUnavailable = volume?.volumeAvailability !== "available";
-	const isDisabled = Boolean(disabled) || isUnavailable;
-	const [core] = useState(() => new VolumeSliderCore());
-	core.setProps({
-		label,
-		orientation,
-		step,
-		largeStep,
-		wheelStep,
-		disabled,
-		thumbAlignment
-	});
-	core.setFormatLocale(locale);
-	const volumeRef = useLatestRef(volume);
-	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, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
-		computeState: (input) => {
-			core.setInput(input);
-			core.setMedia(volume ?? noopVolume);
-			return core.getState();
-		},
-		getPercent,
-		getStepPercent,
-		getLargeStepPercent: () => core.getLargeStepPercent(),
-		orientation,
-		disabled: isDisabled,
-		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
-		getCSSVars: getSliderCSSVars,
-		onValueChange: setVolume,
-		onValueCommit: setVolume,
-		onDragStart,
-		onDragEnd
-	});
-	const [wheelHandler] = useState(() => createWheelStep({
-		isDisabled: () => disabledRef.current,
-		getPercent: () => (volumeRef.current?.volume ?? 0) * 100,
-		getStepPercent: () => core.getWheelStepPercent(),
-		onValueChange: (percent) => volumeRef.current?.setVolume(percent / 100)
-	}));
-	const wheelCleanupRef = useRef(null);
-	const wheelRef = useCallback((element) => {
-		wheelCleanupRef.current?.();
-		wheelCleanupRef.current = null;
-		if (element) wheelCleanupRef.current = listen(element, "wheel", wheelHandler.onWheel, { passive: false });
-	}, [wheelHandler]);
-	if (!volume) {
-		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,
-			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", {
-			render,
-			className,
-			style
-		}, {
-			state,
-			stateAttrMap: VolumeSliderDataAttrs,
-			ref: [
-				forwardedRef,
-				rootRef,
-				wheelRef
-			],
-			props: [
-				{ style: {
-					...cssVars,
-					...rootStyle
-				} },
-				rootProps,
-				elementProps
-			]
-		})
-	});
-});
-//#endregion
-export { VolumeSliderRoot };
-
-//# sourceMappingURL=volume-slider-root.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"volume-slider-root.js","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"sourcesContent":["import { VolumeSliderCore, VolumeSliderDataAttrs } from '@videojs/core';\nimport { createWheelStep, getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { listen } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useRef, useState } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopVolume = {\n  volume: 0,\n  muted: false,\n  volumeAvailability: 'unsupported' as const,\n  mutedAvailability: 'unsupported' as const,\n  setVolume: () => 0,\n  toggleMuted: () => false,\n};\n\nexport interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const VolumeSliderRoot = forwardRef<HTMLDivElement, VolumeSliderRootProps>(\n  function VolumeSliderRoot(componentProps, forwardedRef) {\n    const {\n      render,\n      className,\n      style,\n      label,\n      orientation,\n      step = VolumeSliderCore.defaultProps.step,\n      largeStep = VolumeSliderCore.defaultProps.largeStep,\n      wheelStep = VolumeSliderCore.defaultProps.wheelStep,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      ...elementProps\n    } = componentProps;\n\n    const volume = usePlayer(selectVolume);\n    const translator = useTranslator();\n    const locale = useLocale();\n\n    const isUnavailable = volume?.volumeAvailability !== 'available';\n    const isDisabled = Boolean(disabled) || isUnavailable;\n\n    const [core] = useState(() => new VolumeSliderCore());\n\n    core.setProps({ label, orientation, step, largeStep, wheelStep, disabled, thumbAlignment });\n    core.setFormatLocale(locale);\n\n    // Keep refs to the latest dynamic values for stable closures.\n    const volumeRef = useLatestRef(volume);\n    const disabledRef = useLatestRef(isDisabled);\n\n    const getPercent = () => (volumeRef.current?.volume ?? 0) * 100;\n    const getStepPercent = () => core.getStepPercent();\n    const setVolume = (percent: number) => volumeRef.current?.setVolume(percent / 100);\n\n    const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } =\n      useSlider<VolumeSliderCore.State>({\n        computeState: (input) => {\n          core.setInput(input);\n          core.setMedia(volume ?? noopVolume);\n          return core.getState();\n        },\n        getPercent,\n        getStepPercent,\n        getLargeStepPercent: () => core.getLargeStepPercent(),\n        orientation,\n        disabled: isDisabled,\n        adjustPercent: (rawPercent, thumbSize, trackSize) =>\n          core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n        getCSSVars: getSliderCSSVars,\n        onValueChange: setVolume,\n        onValueCommit: setVolume,\n        onDragStart,\n        onDragEnd,\n      });\n\n    const [wheelHandler] = useState(() =>\n      createWheelStep({\n        isDisabled: () => disabledRef.current,\n        getPercent: () => (volumeRef.current?.volume ?? 0) * 100,\n        getStepPercent: () => core.getWheelStepPercent(),\n        onValueChange: (percent) => volumeRef.current?.setVolume(percent / 100),\n      })\n    );\n\n    // Attach non-passive wheel listener via callback ref so it covers\n    // late-mounted elements (null → mounted after volume appears).\n    const wheelCleanupRef = useRef<(() => void) | null>(null);\n    const wheelRef = useCallback(\n      (element: HTMLDivElement | null) => {\n        wheelCleanupRef.current?.();\n        wheelCleanupRef.current = null;\n\n        if (element) {\n          wheelCleanupRef.current = listen(element, 'wheel', wheelHandler.onWheel, { passive: false });\n        }\n      },\n      [wheelHandler]\n    );\n\n    if (!volume) {\n      if (__DEV__) logMissingFeature('VolumeSlider', 'volume');\n\n      return null;\n    }\n\n    if (state.hidden) return null;\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.valueFromPercent(state.pointerPercent),\n          input,\n          getPointerValue: (percent) => core.valueFromPercent(percent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: VolumeSliderDataAttrs,\n          getAttrs: (sliderState) => {\n            const attrs = core.getAttrs(sliderState as VolumeSliderCore.State);\n\n            return {\n              ...attrs,\n              'aria-label': translateText(attrs['aria-label'], translator),\n              'aria-valuetext': translateText(\n                attrs['aria-valuetext'],\n                translator,\n                core.getValueTextParams(sliderState as VolumeSliderCore.State)\n              ),\n            };\n          },\n          formatValue: (value) => `${Math.round(value)}%`,\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: VolumeSliderDataAttrs,\n            ref: [forwardedRef, rootRef, wheelRef],\n            props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n          }\n        )}\n      </SliderProvider>\n    );\n  }\n);\n\nexport namespace VolumeSliderRoot {\n  export type Props = VolumeSliderRootProps;\n  export type State = VolumeSliderCore.State;\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"merge-props.d.ts","names":[],"sources":["../../../src/utils/merge-props.ts"],"mappings":";;KAEK,MAAM,UAAU,cAAc,eAAe,sBAAsB;;;;;;;;;;;;;;;;;;;;;iBA+FxD,WAAW,UAAU,gBAAgB,WAAW,MAAM,oBAAoB,MAAM"}

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

@@ -1 +0,0 @@
-{"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;;;;;;;KAQ7D,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

@@ -1,13 +0,0 @@
-import { useCallback } from "react";
-//#region src/utils/use-attach-iframe.ts
-function useAttachIframe(media) {
-	return useCallback((element) => {
-		if (element) media.attach?.(element);
-		else media.detach?.();
-		return () => media.detach?.();
-	}, [media]);
-}
-//#endregion
-export { useAttachIframe };
-
-//# sourceMappingURL=use-attach-iframe.js.map

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"use-composed-refs.d.ts","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"mappings":";;KAIK,YAAY,KAAK,IAAI;;;;;;;;;;iBA0BV,YAAY,MAAM,OAAO,YAAY,KAAK,YAAY,UAAU,YAAY;;;;;;;;;;;;;;iBAqC5E,gBAAgB,MAAM,MAAM,YAAY,OAAO,YAAY"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"use-latest-ref.d.ts","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"mappings":";;;;;;;;;iBAUgB,aAAa,OAAO,OAAO,QAAQ;EAAW,SAAS;;kBAOtD;OACH,OAAO,SAAS;IAAW,SAAS"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"use-media-instance.d.ts","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"mappings":";;;;;;;;;;;;;;;iBAmBgB,iBAAiB,iBAAiB;EAAU;GAC1D,sBAAsB,UACtB,SAAS,OAAO,oBACf"}

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

@@ -1 +0,0 @@
-{"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;kBAoDc;OACH,eAAe,SAAS,wBAAwB;OAChD,WAAW,OAAO,4BAA4B,WAAW,oBAAoB,OAAO"}

package/docs/concepts/accessibility.md

@@ -1,68 +0,0 @@
-# Accessibility
-
-How Video.js approaches accessibility, and what you should consider if you're deeply customizing your player
-
-Video.js is built with accessibility in mind so your player can reach the widest possible audience.
-
-Here are some of the accessibility aspects we consider. You should consider them too if you’re performing deeper customization.
-
-## Standards we target
-
-*   [**WAI-ARIA 1.2**](https://www.w3.org/TR/wai-aria-1.2/) defines roles, states, and properties that [assistive technologies](https://www.w3.org/WAI/people-use-web/tools-techniques/) use to understand controls.
-*   [**WCAG 2.2**](https://www.w3.org/TR/WCAG22/) provides success criteria for perceivable, operable, understandable, and robust web content.
-*   [**CVAA**](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa) is a U.S. federal law requiring closed captioning and accessible controls for video content.
-*   [**ADA**](https://www.ada.gov/) is a U.S. civil rights law that prohibits disability discrimination. Courts increasingly apply it to websites, including video players.
-
-## ARIA roles and labels
-
-Components set ARIA roles and attributes automatically. For example, sliders render with `role="slider"` and value attributes, buttons update their `aria-label` based on player state, and decorative elements like time separators are hidden with `aria-hidden="true"`.
-
-Verify that labels are contextually correct for your content and language. Each component’s reference page documents the attributes it sets.
-
-## Keyboard interaction
-
-All interactive components support keyboard control. For example, buttons activate with Enter and Space, sliders respond to Arrow keys, Home, End, and Page Up/Page Down, and popovers close with Escape. Each component’s reference page lists its full keyboard support. We follow the patterns in the [WAI-ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/).
-
-## Focus management
-
-Interactive elements are focusable when enabled and leave the [tab order](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) when disabled. Popover triggers link to their popups with `aria-controls` and `aria-expanded`.
-
-The player container is focusable and labeled: it takes `role="group"`, `tabindex="0"`, and an `aria-label` you can override. Keyboard users can tab to the player as a whole, and screen readers announce it as a named group.
-
-## Status announcements
-
-The player announces confirmed state changes through a visually hidden live region (`role="status"`), so screen reader users hear when playback starts or pauses, captions turn on or off, fullscreen, picture-in-picture, playback rate, or volume change, and where a seek lands.
-
-Announcements follow confirmed state from the player store rather than requested changes, so routine time updates never reach the live region. Rapid volume and seek changes are grouped into a single announcement, and the player stays quiet while one of its sliders has focus, since the slider already announces its own value. State the store tracks is covered for you; a custom control that tracks its own state needs its own live region.
-
-## Captions and subtitles
-
-The [text tracks feature](../reference/feature-text-tracks.md) supports captions and subtitles. Closed captions in the U.S. are governed by the [FCC](https://www.fcc.gov/) under the [CVAA](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa), which requires both captioning and viewer control over caption appearance (font, size, color, opacity, and edge style). Non-compliance carries legal risk. The [WebKit Caption Display Settings explainer](https://github.com/WebKit/explainers/tree/main/CaptionDisplaySettings) tracks how browsers are bringing these customization preferences into the web platform natively.
-
-## Color contrast
-
-Skins respond to [`prefers-contrast: more`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) by increasing background opacity on overlays and controls, and to [`prefers-reduced-transparency: reduce`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) by raising baseline opacity so text stays readable over video.
-
-Video is harder than most UI for contrast because the background is always changing. A control that passes checks over a dark frame can disappear over a bright title card. Automated tools won’t catch this, so test your controls against light, dark, and mixed video content. Custom components should test against [WCAG 1.4.3 (contrast minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) and [1.4.11 (non-text contrast)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast).
-
-## Touch targets
-
-Controls use rem-based sizing so they scale with the user’s font size preference. All interactive elements set [`touch-action: manipulation`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) to eliminate tap delay on touch devices. Skins use [`pointer: fine` and `pointer: coarse`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) to adapt transitions for mouse and touch input.
-
-If you build custom controls, target at least 24x24 CSS pixels per [WCAG 2.5.8 (target size minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum). Larger is better on touch-first surfaces.
-
-## Color scheme
-
-Skins adapt to [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). Borders, backgrounds, and text colors adjust through CSS custom properties. Custom components can use the same design tokens. See [Skins](./skins.md) for details.
-
-## Reduced motion
-
-Skins respect [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) by simplifying or removing animations and transitions. Follow the same pattern in custom components.
-
-## Test with assistive technology
-
-Automated tools catch markup issues but miss real usability problems. Test your player with a [screen reader](https://www.w3.org/WAI/people-use-web/tools-techniques/) ([VoiceOver](https://support.apple.com/guide/voiceover/welcome/mac) on macOS, [NVDA](https://www.nvaccess.org/about-nvda/) or [JAWS](https://www.freedomscientific.com/products/software/jaws/) on Windows) and keyboard-only navigation. Verify that every control is reachable, operable, and announces its purpose and state. The [WAI “Easy Checks”](https://www.w3.org/WAI/test-evaluate/preliminary/) are a good starting point.
-
-## Further reading
-
-The W3C WAI guides on [making audio and video media accessible](https://www.w3.org/WAI/media/av/) and [accessible media players](https://www.w3.org/WAI/media/av/player/) go deeper on everything covered here.

package/docs/concepts/browser-support.md

@@ -1,45 +0,0 @@
-# Browser support
-
-Browsers and rendering environments supported by Video.js 10
-
-Support starts with an evergreen browser baseline and extends to the rendering environments described below.
-
-## Browser baseline
-
-Video.js 10 currently targets **evergreen browsers**: the latest two stable versions of Chrome, Firefox, Safari, and Edge.
-
-Note
-
-Video.js 10 is in beta. The browser support matrix may expand as we approach GA based on community feedback and usage data.
-
-### Why evergreen?
-
-Video.js 10 builds directly on the web platform: custom elements, CSS custom properties, anchor positioning, and modern JavaScript APIs. Targeting evergreen browsers lets us:
-
-*   **Ship smaller bundles** by avoiding polyfills and transpilation for outdated syntax
-*   **Use platform-native features** like `popover` and anchor positioning instead of JavaScript equivalents
-*   **Keep the core slim** so platform-specific adapters (HTML, React) add only what they need
-
-### Progressive enhancement
-
-When we use a platform feature that hasn’t landed in all supported browsers yet, we provide a fallback. The player works either way; the experience may differ slightly in older browsers. For example, tooltips and popovers use CSS anchor positioning where available and fall back to JavaScript-computed positioning where it isn’t.
-
-## Rendering contexts
-
-### WebViews
-
-A [WebView](https://developer.mozilla.org/en-US/docs/Glossary/WebView) is a browser engine embedded inside a native app. WebViews on iOS (WKWebView) and Android (Android WebView) can behave differently from the full browser; autoplay policies, fullscreen APIs, and hardware acceleration can vary.
-
-Video.js 10 beta targets standard browser environments. If you embed a player inside a native app, test it on each platform and WebView version you support.
-
-### Progressive Web Apps
-
-Installed Progressive Web Apps (PWAs) use the browser engine, but their standalone display mode and platform policies can affect fullscreen, media sessions, and other browser integration. Test playback both in a browser tab and in the installed app.
-
-### Smart TVs and set-top boxes
-
-TV platforms run embedded browsers with limited standards support. Video.js 10’s core is not tied to any specific platform, which makes future TV adapters possible, but TV is not a supported target today.
-
-### Server-side rendering
-
-Video.js components render valid markup on the server. Interactivity — state management, media playback, and event handling — requires the browser and kicks in after hydration.

package/docs/concepts/bundlers.md

@@ -1,43 +0,0 @@
-# Bundlers
-
-Bundler requirements for Video.js package exports, CSS, and wrapper libraries
-
-Before the browser runs your application, a bundler such as Vite combines its imports into files the browser can load. Your bundler must understand the import paths published by Video.js packages.
-
-## Package exports
-
-Each Video.js package has an `exports` field in its `package.json`. This field lists the import paths that applications and libraries can use, such as `@videojs/html/video/player` and `@videojs/react/live-video`.
-
-If an older bundler reports that one of these paths is missing or not exported, upgrade the bundler before adding an alias that bypasses the package’s public API.
-
-## Vite compatibility
-
-Use a current Vite release. Testing confirmed that Vite 5.4.19 can load Video.js JavaScript and CSS package exports. Vite 3.2.8 can load the JavaScript, but it cannot load an exported stylesheet such as `@videojs/html/video/skin.css`.
-
-Packaged HTML skins import their own styles, so an HTML application using `@videojs/html/video/skin` doesn’t need to import `skin.css` separately. The CSS limitation matters only when your application imports that stylesheet directly.
-
-## Externalize Video.js in a wrapper library
-
-You can skip this section when building an application.
-
-If you publish a library that expects its users to install Video.js separately, leave Video.js out of your library’s bundle. Rollup calls a dependency left out of the bundle **external**.
-
-Rollup’s array form matches only the exact package name, so `external: ['@videojs/html']` misses imports such as `@videojs/html/video/player`.
-
-Match the package name and everything below it instead:
-
-rollup.config.js
-
-```
-const videojsPeers = ['@videojs/html'];
-
-export default {
-  external(id) {
-    return videojsPeers.some(
-      (packageName) => id === packageName || id.startsWith(`${packageName}/`)
-    );
-  }
-};
-```
-
-Add every `@videojs/*` package your library imports directly to `videojsPeers` and list it in `peerDependencies`.