@videojs/react 10.0.0-alpha.3 → 10.0.0-alpha.5

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

@@ -0,0 +1,19 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { SliderFill } from "../slider/slider-fill.js";
+import { SliderThumb } from "../slider/slider-thumb.js";
+import { SliderTrack } from "../slider/slider-track.js";
+import { SliderValue } from "../slider/slider-value.js";
+import { VolumeSliderRoot } from "./volume-slider-root.js";
+
+//#region src/ui/volume-slider/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Fill: () => SliderFill,
+	Root: () => VolumeSliderRoot,
+	Thumb: () => SliderThumb,
+	Track: () => SliderTrack,
+	Value: () => SliderValue
+});
+
+//#endregion
+export { index_parts_exports };
+//# sourceMappingURL=index.parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-slider/index.parts.ts"],"sourcesContent":["export {\n  Fill,\n  type FillProps,\n  Thumb,\n  type ThumbProps,\n  Track,\n  type TrackProps,\n  Value,\n  type ValueProps,\n} from '../slider/index.parts';\nexport { VolumeSliderRoot as Root, type VolumeSliderRootProps as RootProps } from './volume-slider-root';\n"],"mappings":""}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"volume-slider-root.d.ts","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"mappings":";;;;;UAqBiB,qBAAA,SAA8B,gBAAA,QAAwB,gBAAA,CAAiB,KAAA,GAAQ,gBAAA,CAAiB,KAAA;EAC/G,WAAA;EACA,SAAA;AAAA;AAAA,cAGW,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,qBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAiFZ,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,gBAAA,CAAiB,KAAA;AAAA"}

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

@@ -0,0 +1,89 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useSlider } from "../hooks/use-slider.js";
+import { SliderProvider } from "../slider/context.js";
+import { getSliderCSSVars, logMissingFeature, selectVolume } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { SliderDataAttrs, VolumeSliderCore } from "@videojs/core";
+
+//#region src/ui/volume-slider/volume-slider-root.tsx
+const noopVolume = {
+	volume: 0,
+	muted: false,
+	volumeAvailability: "unsupported",
+	changeVolume: () => 0,
+	toggleMute: () => false
+};
+const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, forwardedRef) {
+	const { render, className, style, label, orientation, step = VolumeSliderCore.defaultProps.step, largeStep = VolumeSliderCore.defaultProps.largeStep, disabled, thumbAlignment, onDragStart, onDragEnd, ...elementProps } = componentProps;
+	const volume = usePlayer(selectVolume);
+	const [core] = useState(() => new VolumeSliderCore());
+	core.setProps({
+		label,
+		orientation,
+		step,
+		largeStep,
+		disabled,
+		thumbAlignment
+	});
+	const volumeRef = useLatestRef(volume);
+	const { state, cssVars, rootRef, thumbRef, rootProps, thumbProps } = useSlider({
+		computeState: (input) => {
+			core.setInput(input);
+			core.setMedia(volume ?? noopVolume);
+			return core.getState();
+		},
+		getPercent: () => volume ? volume.volume * 100 : 0,
+		getStepPercent: () => core.getStepPercent(),
+		getLargeStepPercent: () => core.getLargeStepPercent(),
+		orientation,
+		disabled,
+		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
+		getCSSVars: getSliderCSSVars,
+		onValueChange: (percent) => {
+			volumeRef.current?.changeVolume(percent / 100);
+		},
+		onValueCommit: (percent) => {
+			volumeRef.current?.changeVolume(percent / 100);
+		},
+		onDragStart,
+		onDragEnd
+	});
+	if (!volume) {
+		logMissingFeature("VolumeSlider", "volume");
+		return null;
+	}
+	return /* @__PURE__ */ jsx(SliderProvider, {
+		value: {
+			state,
+			pointerValue: core.valueFromPercent(state.pointerPercent),
+			thumbRef,
+			thumbProps,
+			stateAttrMap: SliderDataAttrs,
+			getAttrs: (sliderState) => core.getAttrs(sliderState),
+			formatValue: (value) => `${Math.round(value)}%`
+		},
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: SliderDataAttrs,
+			ref: [forwardedRef, rootRef],
+			props: [
+				{ style: cssVars },
+				rootProps,
+				elementProps
+			]
+		})
+	});
+});
+
+//#endregion
+export { VolumeSliderRoot };
+//# sourceMappingURL=volume-slider-root.js.map

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

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

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

@@ -0,0 +1,13 @@
+'use client';
+
+import { useReducer } from "react";
+
+//#region src/utils/use-force-render.ts
+function useForceRender() {
+	const [, forceRender] = useReducer((c) => c + 1, 0);
+	return forceRender;
+}
+
+//#endregion
+export { useForceRender };
+//# sourceMappingURL=use-force-render.js.map

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

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

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

@@ -0,0 +1,20 @@
+'use client';
+
+import { useRef } from "react";
+
+//#region src/utils/use-latest-ref.ts
+/**
+* Keep a ref that always points to the latest value.
+*
+* Useful for capturing callbacks or derived values inside closures
+* that are created once (e.g. factory callbacks) without stale reads.
+*/
+function useLatestRef(value) {
+	const ref = useRef(value);
+	ref.current = value;
+	return ref;
+}
+
+//#endregion
+export { useLatestRef };
+//# sourceMappingURL=use-latest-ref.js.map

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

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

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

@@ -0,0 +1,22 @@
+'use client';
+
+import { useId } from "react";
+
+//#region src/utils/use-safe-id.ts
+const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;
+/**
+* Generate a CSS-safe identifier from React's `useId()`.
+*
+* `useId()` returns values like `:r0:` which contain colons — invalid
+* in CSS `<dashed-ident>` tokens (used by `anchor-name` / `position-anchor`).
+* This hook strips non-alphanumeric/underscore/hyphen characters and
+* optionally prepends a prefix.
+*/
+function useSafeId(prefix) {
+	const raw = useId().replace(UNSAFE_CHARS, "");
+	return prefix ? `${prefix}${raw}` : raw;
+}
+
+//#endregion
+export { useSafeId };
+//# sourceMappingURL=use-safe-id.js.map

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

@@ -0,0 +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,OAAO,CAAC,QAAQ,cAAc,GAAG;AAC7C,QAAO,SAAS,GAAG,SAAS,QAAQ"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/react",
   "type": "module",
-  "version": "10.0.0-alpha.3",
+  "version": "10.0.0-alpha.5",
   "description": "React library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -28,30 +28,20 @@
       "default": "./dist/default/media/*/index.js"
     },
     "./*.css": "./dist/default/presets/*.css",
-    "./audio": {
-      "types": "./dist/dev/presets/audio/index.d.ts",
-      "development": "./dist/dev/presets/audio/index.js",
-      "default": "./dist/default/presets/audio/index.js"
-    },
-    "./background": {
-      "types": "./dist/dev/presets/background/index.d.ts",
-      "development": "./dist/dev/presets/background/index.js",
-      "default": "./dist/default/presets/background/index.js"
-    },
-    "./video": {
-      "types": "./dist/dev/presets/video/index.d.ts",
-      "development": "./dist/dev/presets/video/index.js",
-      "default": "./dist/default/presets/video/index.js"
+    "./*": {
+      "types": "./dist/dev/presets/*/index.d.ts",
+      "development": "./dist/dev/presets/*/index.js",
+      "default": "./dist/default/presets/*/index.js"
     }
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-alpha.3",
-    "@videojs/store": "10.0.0-alpha.3",
-    "@videojs/icons": "10.0.0-alpha.3",
-    "@videojs/utils": "10.0.0-alpha.3"
+    "@videojs/skins": "10.0.0-alpha.4",
+    "@videojs/store": "10.0.0-alpha.5",
+    "@videojs/core": "10.0.0-alpha.5",
+    "@videojs/utils": "10.0.0-alpha.5"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
@@ -61,7 +51,8 @@
     "react-dom": "^19.2.1",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "@videojs/icons": "10.0.0-alpha.5"
   },
   "publishConfig": {
     "access": "public"