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

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

@@ -0,0 +1,15 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TimeSliderCore } from "@videojs/core";
+//#region src/ui/time-slider/root.d.ts
+interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {
+  onDragStart?: (() => void) | undefined;
+  onDragEnd?: (() => void) | undefined;
+}
+declare const TimeSliderRoot: import("react").ForwardRefExoticComponent<Omit<TimeSliderRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace TimeSliderRoot {
+  type Props = TimeSliderRootProps;
+  type State = TimeSliderCore.State;
+}
+//#endregion
+export { TimeSliderRoot, TimeSliderRootProps };
+//# sourceMappingURL=root.d.ts.map

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

@@ -0,0 +1,280 @@
+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 { TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
+import { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from "@videojs/core/dom";
+import { hasTimeRange } from "@videojs/media";
+import { translateText } from "@videojs/core/i18n";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { formatTime } from "@videojs/utils/time";
+//#region src/ui/time-slider/root.tsx
+const noopSeek = () => Promise.resolve(0);
+const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwardedRef) {
+	const $ = c(69);
+	const { render, className, style, label, changeThrottle: t0, step: t1, largeStep: t2, orientation, disabled, thumbAlignment, onDragStart, onDragEnd, pauseOnDrag, ...elementProps } = componentProps;
+	const changeThrottle = t0 === void 0 ? TimeSliderCore.defaultProps.changeThrottle : t0;
+	const step = t1 === void 0 ? TimeSliderCore.defaultProps.step : t1;
+	const largeStep = t2 === void 0 ? TimeSliderCore.defaultProps.largeStep : t2;
+	const time = usePlayer(selectTime);
+	const buffer = usePlayer(selectBuffer);
+	const playback = usePlayer(selectPlayback);
+	const translator = useTranslator();
+	const locale = useLocale();
+	const [core] = useState(_temp);
+	core.setProps({
+		label,
+		step,
+		largeStep,
+		orientation,
+		disabled,
+		thumbAlignment,
+		pauseOnDrag,
+		changeThrottle
+	});
+	core.setFormatLocale(locale);
+	let t3;
+	if ($[0] !== buffer || $[1] !== time) {
+		t3 = time ? {
+			...time,
+			...buffer ?? {
+				buffered: [],
+				seekable: []
+			}
+		} : null;
+		$[0] = buffer;
+		$[1] = time;
+		$[2] = t3;
+	} else t3 = $[2];
+	const media = t3;
+	const mediaRef = useLatestRef(media);
+	const playbackRef = useLatestRef(playback);
+	let t4;
+	if ($[3] !== core || $[4] !== playbackRef) {
+		t4 = () => () => core.endDrag(playbackRef.current);
+		$[3] = core;
+		$[4] = playbackRef;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== core) {
+		t5 = [core];
+		$[6] = core;
+		$[7] = t5;
+	} else t5 = $[7];
+	useEffect(t4, t5);
+	let t6;
+	if ($[8] !== core || $[9] !== media) {
+		t6 = (input) => {
+			core.setInput(input);
+			core.setMedia(media ?? {
+				currentTime: 0,
+				duration: 0,
+				seeking: false,
+				seek: noopSeek,
+				buffered: [],
+				seekable: []
+			});
+			return core.getState();
+		};
+		$[8] = core;
+		$[9] = media;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== core || $[12] !== time?.currentTime) {
+		t7 = () => core.percentFromValue(time?.currentTime ?? 0);
+		$[11] = core;
+		$[12] = time?.currentTime;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	let t9;
+	if ($[14] !== core) {
+		t8 = () => core.getStepPercent();
+		t9 = () => core.getLargeStepPercent();
+		$[14] = core;
+		$[15] = t8;
+		$[16] = t9;
+	} else {
+		t8 = $[15];
+		t9 = $[16];
+	}
+	let t10;
+	if ($[17] !== disabled || $[18] !== media) {
+		t10 = disabled || !media || !hasTimeRange(media);
+		$[17] = disabled;
+		$[18] = media;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== core) {
+		t11 = (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize);
+		$[20] = core;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== core || $[23] !== mediaRef) {
+		t12 = (percent) => {
+			const media_0 = mediaRef.current;
+			if (media_0) media_0.seek(core.rawValueFromPercent(percent));
+		};
+		$[22] = core;
+		$[23] = mediaRef;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== core || $[26] !== onDragStart || $[27] !== playbackRef) {
+		t13 = () => {
+			core.startDrag(playbackRef.current);
+			onDragStart?.();
+		};
+		$[25] = core;
+		$[26] = onDragStart;
+		$[27] = playbackRef;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== core || $[30] !== onDragEnd || $[31] !== playbackRef) {
+		t14 = () => {
+			core.endDrag(playbackRef.current);
+			onDragEnd?.();
+		};
+		$[29] = core;
+		$[30] = onDragEnd;
+		$[31] = playbackRef;
+		$[32] = t14;
+	} else t14 = $[32];
+	let t15;
+	if ($[33] !== changeThrottle || $[34] !== orientation || $[35] !== t10 || $[36] !== t11 || $[37] !== t12 || $[38] !== t13 || $[39] !== t14 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9) {
+		t15 = {
+			computeState: t6,
+			getPercent: t7,
+			getStepPercent: t8,
+			getLargeStepPercent: t9,
+			orientation,
+			disabled: t10,
+			changeThrottle,
+			adjustPercent: t11,
+			getCSSVars: getTimeSliderCSSVars,
+			onValueCommit: t12,
+			onDragStart: t13,
+			onDragEnd: t14
+		};
+		$[33] = changeThrottle;
+		$[34] = orientation;
+		$[35] = t10;
+		$[36] = t11;
+		$[37] = t12;
+		$[38] = t13;
+		$[39] = t14;
+		$[40] = t6;
+		$[41] = t7;
+		$[42] = t8;
+		$[43] = t9;
+		$[44] = t15;
+	} else t15 = $[44];
+	const { state, input: input_0, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider(t15);
+	if (!time) {
+		logMissingFeature("TimeSlider", "time");
+		return null;
+	}
+	const T0 = SliderProvider;
+	let t16;
+	if ($[45] !== core || $[46] !== state.pointerPercent) {
+		t16 = core.rawValueFromPercent(state.pointerPercent);
+		$[45] = core;
+		$[46] = state.pointerPercent;
+		$[47] = t16;
+	} else t16 = $[47];
+	let t17;
+	if ($[48] !== core) {
+		t17 = (percent_0) => core.rawValueFromPercent(percent_0);
+		$[48] = core;
+		$[49] = t17;
+	} else t17 = $[49];
+	let t18;
+	if ($[50] !== core || $[51] !== translator) {
+		t18 = (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))
+			};
+		};
+		$[50] = core;
+		$[51] = translator;
+		$[52] = t18;
+	} else t18 = $[52];
+	let t19;
+	if ($[53] !== locale || $[54] !== state.duration) {
+		t19 = (value) => formatTime(value, state.duration, { locale });
+		$[53] = locale;
+		$[54] = state.duration;
+		$[55] = t19;
+	} else t19 = $[55];
+	let t20;
+	if ($[56] !== input_0 || $[57] !== state || $[58] !== t16 || $[59] !== t17 || $[60] !== t18 || $[61] !== t19 || $[62] !== thumbProps || $[63] !== thumbRef) {
+		t20 = {
+			state,
+			pointerValue: t16,
+			input: input_0,
+			getPointerValue: t17,
+			thumbRef,
+			thumbProps,
+			stateAttrMap: TimeSliderDataAttrs,
+			getAttrs: t18,
+			formatValue: t19
+		};
+		$[56] = input_0;
+		$[57] = state;
+		$[58] = t16;
+		$[59] = t17;
+		$[60] = t18;
+		$[61] = t19;
+		$[62] = thumbProps;
+		$[63] = thumbRef;
+		$[64] = t20;
+	} else t20 = $[64];
+	const t21 = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: TimeSliderDataAttrs,
+		ref: [forwardedRef, rootRef],
+		props: [
+			{ style: {
+				...cssVars,
+				...rootStyle
+			} },
+			rootProps,
+			elementProps
+		]
+	});
+	let t22;
+	if ($[65] !== T0 || $[66] !== t20 || $[67] !== t21) {
+		t22 = /* @__PURE__ */ jsx(T0, {
+			value: t20,
+			children: t21
+		});
+		$[65] = T0;
+		$[66] = t20;
+		$[67] = t21;
+		$[68] = t22;
+	} else t22 = $[68];
+	return t22;
+});
+function _temp() {
+	return new TimeSliderCore();
+}
+//#endregion
+export { TimeSliderRoot };
+
+//# sourceMappingURL=root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":["changeThrottle = TimeSliderCore.defaultProps.changeThrottle","step = TimeSliderCore.defaultProps.step","largeStep = TimeSliderCore.defaultProps.largeStep","() => new TimeSliderCore()","time ? { ...time, ...(buffer ?? { buffered: [], seekable: [] }) } : null","() => {\n      return () => core.endDrag(playbackRef.current);\n    }","playbackRef.current","[core]","(input) => {\n          core.setInput(input);\n\n          core.setMedia(\n            media ?? {\n              currentTime: 0,\n              duration: 0,\n              seeking: false,\n              seek: noopSeek,\n              buffered: [],\n              seekable: [],\n            }\n          );\n\n          return core.getState();\n        }","() => core.percentFromValue(time?.currentTime ?? 0)","currentTime","() => core.getStepPercent()","() => core.getLargeStepPercent()","disabled || !media || !hasTimeRange(media)","(rawPercent, thumbSize, trackSize) =>\n          core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize)","(percent) => {\n          const media = mediaRef.current;\n\n          if (media) media.seek(core.rawValueFromPercent(percent));\n        }","mediaRef.current","media","() => {\n          core.startDrag(playbackRef.current);\n          onDragStart?.();\n        }","() => {\n          core.endDrag(playbackRef.current);\n          onDragEnd?.();\n        }","{\n        computeState: (input) => {\n          core.setInput(input);\n\n          core.setMedia(\n            media ?? {\n              currentTime: 0,\n              duration: 0,\n              seeking: false,\n              seek: noopSeek,\n              buffered: [],\n              seekable: [],\n            }\n          );\n\n          return core.getState();\n        },\n        getPercent: () => core.percentFromValue(time?.currentTime ?? 0),\n        getStepPercent: () => core.getStepPercent(),\n        getLargeStepPercent: () => core.getLargeStepPercent(),\n        orientation,\n        disabled: disabled || !media || !hasTimeRange(media),\n        changeThrottle,\n        adjustPercent: (rawPercent, thumbSize, trackSize) =>\n          core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n        getCSSVars: getTimeSliderCSSVars,\n        onValueCommit: (percent) => {\n          const media = mediaRef.current;\n\n          if (media) media.seek(core.rawValueFromPercent(percent));\n        },\n        onDragStart: () => {\n          core.startDrag(playbackRef.current);\n          onDragStart?.();\n        },\n        onDragEnd: () => {\n          core.endDrag(playbackRef.current);\n          onDragEnd?.();\n        },\n      }","core.rawValueFromPercent(state.pointerPercent)","pointerPercent","(percent) => core.rawValueFromPercent(percent)","percent","(sliderState) => {\n            const attrs = core.getAttrs(sliderState as TimeSliderCore.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 TimeSliderCore.State)\n              ),\n            };\n          }","(value) => formatTime(value, state.duration, { locale })","duration","{\n          state,\n          pointerValue: core.rawValueFromPercent(state.pointerPercent),\n          input,\n          getPointerValue: (percent) => core.rawValueFromPercent(percent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => {\n            const attrs = core.getAttrs(sliderState as TimeSliderCore.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 TimeSliderCore.State)\n              ),\n            };\n          },\n          formatValue: (value) => formatTime(value, state.duration, { locale }),\n        }","input","<SliderProvider\n        value={{\n          state,\n          pointerValue: core.rawValueFromPercent(state.pointerPercent),\n          input,\n          getPointerValue: (percent) => core.rawValueFromPercent(percent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => {\n            const attrs = core.getAttrs(sliderState as TimeSliderCore.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 TimeSliderCore.State)\n              ),\n            };\n          },\n          formatValue: (value) => formatTime(value, state.duration, { locale }),\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: TimeSliderDataAttrs,\n            ref: [forwardedRef, rootRef],\n            props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n          }\n        )}\n      </SliderProvider>","SliderProvider","renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: TimeSliderDataAttrs,\n            ref: [forwardedRef, rootRef],\n            props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n          }\n        )"],"sources":["../../../../src/ui/time-slider/root.tsx"],"sourcesContent":["import { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { hasTimeRange } from '@videojs/media';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useEffect, 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 noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n  function TimeSliderRoot(componentProps, forwardedRef) {\n    const {\n      render,\n      className,\n      style,\n      label,\n      changeThrottle = TimeSliderCore.defaultProps.changeThrottle,\n      step = TimeSliderCore.defaultProps.step,\n      largeStep = TimeSliderCore.defaultProps.largeStep,\n      orientation,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      pauseOnDrag,\n      ...elementProps\n    } = componentProps;\n\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n    const playback = usePlayer(selectPlayback);\n\n    const translator = useTranslator();\n    const locale = useLocale();\n\n    const [core] = useState(() => new TimeSliderCore());\n\n    core.setProps({\n      label,\n      step,\n      largeStep,\n      orientation,\n      disabled,\n      thumbAlignment,\n      pauseOnDrag,\n      changeThrottle,\n    });\n    core.setFormatLocale(locale);\n\n    // `bufferFeature` is optional: compositions that omit it still get a working slider, with an empty buffer.\n    const media = time ? { ...time, ...(buffer ?? { buffered: [], seekable: [] }) } : null;\n\n    // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n    const mediaRef = useLatestRef(media);\n    const playbackRef = useLatestRef(playback);\n\n    // Resume playback if the slider unmounts mid-drag — createSlider's destroy()\n    // does not fire onDragEnd, so without this the player would stay paused.\n    useEffect(() => {\n      return () => core.endDrag(playbackRef.current);\n    }, [core]);\n\n    const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } =\n      useSlider<TimeSliderCore.State>({\n        computeState: (input) => {\n          core.setInput(input);\n\n          core.setMedia(\n            media ?? {\n              currentTime: 0,\n              duration: 0,\n              seeking: false,\n              seek: noopSeek,\n              buffered: [],\n              seekable: [],\n            }\n          );\n\n          return core.getState();\n        },\n        getPercent: () => core.percentFromValue(time?.currentTime ?? 0),\n        getStepPercent: () => core.getStepPercent(),\n        getLargeStepPercent: () => core.getLargeStepPercent(),\n        orientation,\n        disabled: disabled || !media || !hasTimeRange(media),\n        changeThrottle,\n        adjustPercent: (rawPercent, thumbSize, trackSize) =>\n          core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n        getCSSVars: getTimeSliderCSSVars,\n        onValueCommit: (percent) => {\n          const media = mediaRef.current;\n\n          if (media) media.seek(core.rawValueFromPercent(percent));\n        },\n        onDragStart: () => {\n          core.startDrag(playbackRef.current);\n          onDragStart?.();\n        },\n        onDragEnd: () => {\n          core.endDrag(playbackRef.current);\n          onDragEnd?.();\n        },\n      });\n\n    if (!time) {\n      if (__DEV__) logMissingFeature('TimeSlider', 'time');\n\n      return null;\n    }\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.rawValueFromPercent(state.pointerPercent),\n          input,\n          getPointerValue: (percent) => core.rawValueFromPercent(percent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => {\n            const attrs = core.getAttrs(sliderState as TimeSliderCore.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 TimeSliderCore.State)\n              ),\n            };\n          },\n          formatValue: (value) => formatTime(value, state.duration, { locale }),\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: TimeSliderDataAttrs,\n            ref: [forwardedRef, rootRef],\n            props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n          }\n        )}\n      </SliderProvider>\n    );\n  }\n);\n\nexport namespace TimeSliderRoot {\n  export type Props = TimeSliderRootProps;\n  export type State = TimeSliderCore.State;\n}\n"],"mappings":"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"}

package/dist/dev/ui/time-slider/segments.js

@@ -0,0 +1,60 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useSliderContext, useSliderPointerValue } from "../slider/context.js";
+import { SliderSegmentsCore, TimeSliderChapterCSSVars } from "@videojs/core";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { Fragment, forwardRef, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/time-slider/segments.tsx
+/** Private React adapter for rendering normalized numeric slider segments. */
+const SliderSegments = forwardRef(function SliderSegments(componentProps, ref) {
+	const { ranges, min, max, renderSegment, render, className, style, ...elementProps } = componentProps;
+	const slider = useSliderContext();
+	const pointerValue = useSliderPointerValue();
+	const [core] = useState(() => new SliderSegmentsCore());
+	const geometry = useMemo(() => core.getGeometry({
+		ranges,
+		min,
+		max,
+		orientation: slider.state.orientation
+	}), [
+		core,
+		ranges,
+		min,
+		max,
+		slider.state.orientation
+	]);
+	const sliderAttrs = getStateDataAttrs(slider.state, slider.stateAttrMap);
+	const segments = geometry.map((segment) => {
+		const state = core.getState(segment, slider.state, pointerValue);
+		const segmentStyle = {
+			[TimeSliderChapterCSSVars.start]: state.startPercent,
+			[TimeSliderChapterCSSVars.end]: state.endPercent,
+			[TimeSliderChapterCSSVars.width]: state.width ?? state.height,
+			[TimeSliderChapterCSSVars.fill]: `${state.fillPercent}%`
+		};
+		return /* @__PURE__ */ jsx(Fragment, { children: renderSegment({
+			...sliderAttrs,
+			style: segmentStyle
+		}, state) }, state.key);
+	});
+	const state = geometry.length > 0 ? core.getState(geometry[0], slider.state, pointerValue) : null;
+	if (!state) return null;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref,
+		props: [
+			{ "aria-hidden": "true" },
+			sliderAttrs,
+			elementProps,
+			{ children: segments }
+		]
+	});
+});
+//#endregion
+export { SliderSegments };
+
+//# sourceMappingURL=segments.js.map

package/dist/dev/ui/time-slider/segments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segments.js","names":[],"sources":["../../../../src/ui/time-slider/segments.tsx"],"sourcesContent":["import {\n  type SliderSegmentRange,\n  type SliderSegmentState,\n  SliderSegmentsCore,\n  TimeSliderChapterCSSVars,\n} from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport type { CSSProperties, ReactElement } from 'react';\nimport { Fragment, forwardRef, useMemo, useState } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSliderContext, useSliderPointerValue } from '../slider/context';\n\ntype SegmentProps = Omit<HTMLProps<HTMLElement>, 'ref'>;\n\ninterface SliderSegmentsProps extends Omit<UIComponentProps<'div', SliderSegmentState>, 'children'> {\n  ranges: readonly SliderSegmentRange[];\n  min: number;\n  max: number;\n  renderSegment: (props: SegmentProps, state: SliderSegmentState) => ReactElement;\n}\n\n/** Private React adapter for rendering normalized numeric slider segments. */\nexport const SliderSegments = forwardRef<HTMLDivElement, SliderSegmentsProps>(\n  function SliderSegments(componentProps, ref) {\n    const { ranges, min, max, renderSegment, render, className, style, ...elementProps } = componentProps;\n\n    const slider = useSliderContext();\n    const pointerValue = useSliderPointerValue();\n\n    const [core] = useState(() => new SliderSegmentsCore());\n\n    const geometry = useMemo(\n      () => core.getGeometry({ ranges, min, max, orientation: slider.state.orientation }),\n      [core, ranges, min, max, slider.state.orientation]\n    );\n    const sliderAttrs = getStateDataAttrs(slider.state, slider.stateAttrMap);\n\n    const segments = geometry.map((segment) => {\n      const state = core.getState(segment, slider.state, pointerValue);\n      const segmentStyle = {\n        [TimeSliderChapterCSSVars.start]: state.startPercent,\n        [TimeSliderChapterCSSVars.end]: state.endPercent,\n        [TimeSliderChapterCSSVars.width]: state.width ?? state.height,\n        [TimeSliderChapterCSSVars.fill]: `${state.fillPercent}%`,\n      } as CSSProperties;\n\n      return (\n        <Fragment key={state.key}>\n          {renderSegment(\n            {\n              ...sliderAttrs,\n              style: segmentStyle,\n            },\n            state\n          )}\n        </Fragment>\n      );\n    });\n\n    const state = geometry.length > 0 ? core.getState(geometry[0]!, slider.state, pointerValue) : null;\n    if (!state) return null;\n\n    return renderElement(\n      'div',\n      { render, className, style },\n      {\n        state,\n        ref,\n        props: [{ 'aria-hidden': 'true' }, sliderAttrs, elementProps, { children: segments }],\n      }\n    );\n  }\n);\n"],"mappings":";;;;;;;;AAwBA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,KAAK;CAC3C,MAAM,EAAE,QAAQ,KAAK,KAAK,eAAe,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEvF,MAAM,SAAS,iBAAiB;CAChC,MAAM,eAAe,sBAAsB;CAE3C,MAAM,CAAC,QAAQ,eAAe,IAAI,mBAAmB,CAAC;CAEtD,MAAM,WAAW,cACT,KAAK,YAAY;EAAE;EAAQ;EAAK;EAAK,aAAa,OAAO,MAAM;CAAY,CAAC,GAClF;EAAC;EAAM;EAAQ;EAAK;EAAK,OAAO,MAAM;CAAW,CACnD;CACA,MAAM,cAAc,kBAAkB,OAAO,OAAO,OAAO,YAAY;CAEvE,MAAM,WAAW,SAAS,KAAK,YAAY;EACzC,MAAM,QAAQ,KAAK,SAAS,SAAS,OAAO,OAAO,YAAY;EAC/D,MAAM,eAAe;IAClB,yBAAyB,QAAQ,MAAM;IACvC,yBAAyB,MAAM,MAAM;IACrC,yBAAyB,QAAQ,MAAM,SAAS,MAAM;IACtD,yBAAyB,OAAO,GAAG,MAAM,YAAY;EACxD;EAEA,OACE,oBAAC,UAAD,EAAA,UACG,cACC;GACE,GAAG;GACH,OAAO;EACT,GACA,KACF,EACQ,GARK,MAAM,GAQX;CAEd,CAAC;CAED,MAAM,QAAQ,SAAS,SAAS,IAAI,KAAK,SAAS,SAAS,IAAK,OAAO,OAAO,YAAY,IAAI;CAC9F,IAAI,CAAC,OAAO,OAAO;CAEnB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,OAAO;GAAC,EAAE,eAAe,OAAO;GAAG;GAAa;GAAc,EAAE,UAAU,SAAS;EAAC;CACtF,CACF;AACF,CACF"}

package/dist/dev/ui/title/component.d.ts

@@ -0,0 +1,22 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TitleCore } from "@videojs/core";
+//#region src/ui/title/component.d.ts
+interface TitleProps extends Omit<UIComponentProps<'div', TitleCore.State>, 'children'> {}
+/**
+ * Displays the resolved content title. Renders nothing when no title resolves.
+ *
+ * The component owns its text content. Set the title through the player's `title` prop rather than by passing children.
+ *
+ * @example
+ *   ```tsx
+ *   <Title />
+ *   ```;
+ */
+declare const Title: import("react").ForwardRefExoticComponent<Omit<TitleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace Title {
+  type Props = TitleProps;
+  type State = TitleCore.State;
+}
+//#endregion
+export { Title, TitleProps };
+//# sourceMappingURL=component.d.ts.map

package/dist/dev/ui/title/component.js

@@ -0,0 +1,43 @@
+"use client";
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { TitleCore, TitleDataAttrs } from "@videojs/core";
+import { logMissingFeature, selectControls, selectMetadata } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+//#region src/ui/title/component.tsx
+/**
+* Displays the resolved content title. Renders nothing when no title resolves.
+*
+* The component owns its text content. Set the title through the player's `title` prop rather than by passing children.
+*
+* @example
+*   ```tsx
+*   <Title />
+*   ```;
+*/
+const Title = forwardRef(function Title(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const metadata = usePlayer(selectMetadata);
+	const controls = usePlayer(selectControls);
+	const [core] = useState(() => new TitleCore());
+	if (!metadata) {
+		logMissingFeature("Title", "metadata");
+		return null;
+	}
+	const state = core.getState(metadata, controls);
+	if (state.hidden) return null;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: TitleDataAttrs,
+		ref: [forwardedRef],
+		props: [{ children: state.title }, elementProps]
+	});
+});
+//#endregion
+export { Title };
+
+//# sourceMappingURL=component.js.map

package/dist/dev/ui/title/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/title/component.tsx"],"sourcesContent":["'use client';\n\nimport { TitleCore, TitleDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectControls, selectMetadata } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface TitleProps extends Omit<UIComponentProps<'div', TitleCore.State>, 'children'> {}\n\n/**\n * Displays the resolved content title. Renders nothing when no title resolves.\n *\n * The component owns its text content. Set the title through the player's `title` prop rather than by passing children.\n *\n * @example\n *   ```tsx\n *   <Title />\n *   ```;\n */\nexport const Title = forwardRef(function Title(componentProps: TitleProps, forwardedRef: ForwardedRef<HTMLDivElement>) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const metadata = usePlayer(selectMetadata);\n  const controls = usePlayer(selectControls);\n\n  const [core] = useState(() => new TitleCore());\n\n  if (!metadata) {\n    if (__DEV__) logMissingFeature('Title', 'metadata');\n\n    return null;\n  }\n\n  const state = core.getState(metadata, controls);\n  if (state.hidden) return null;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TitleDataAttrs,\n      ref: [forwardedRef],\n      props: [{ children: state.title }, elementProps],\n    }\n  );\n});\n\nexport namespace Title {\n  export type Props = TitleProps;\n  export type State = TitleCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,MAAa,QAAQ,WAAW,SAAS,MAAM,gBAA4B,cAA4C;CACrH,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;CAE7C,IAAI,CAAC,UAAU;EACA,kBAAkB,SAAS,UAAU;EAElD,OAAO;CACT;CAEA,MAAM,QAAQ,KAAK,SAAS,UAAU,QAAQ;CAC9C,IAAI,MAAM,QAAQ,OAAO;CAEzB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,UAAU,MAAM,MAAM,GAAG,YAAY;CACjD,CACF;AACF,CAAC"}

package/dist/dev/ui/title/index.d.ts

@@ -1,2 +1,2 @@
-import { Title, TitleProps } from "./title.js";
-export { Title, type TitleProps };
+import { Title, TitleProps } from "./component.js";
+export { Title, TitleProps };

package/dist/dev/ui/title/index.js

@@ -1,2 +1,2 @@
-import { Title } from "./title.js";
+import { Title } from "./component.js";
 export { Title };

package/dist/dev/ui/tooltip/arrow.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TooltipState } from "@videojs/core";
+//#region src/ui/tooltip/arrow.d.ts
+interface TooltipArrowProps extends UIComponentProps<'div', TooltipState> {}
+/** Decorative arrow pointing from the tooltip toward the trigger. Hidden from assistive technology. */
+declare const TooltipArrow: import("react").ForwardRefExoticComponent<TooltipArrowProps>;
+declare namespace TooltipArrow {
+  type Props = TooltipArrowProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipArrow, TooltipArrowProps };
+//# sourceMappingURL=arrow.d.ts.map

package/dist/dev/ui/tooltip/arrow.js

@@ -0,0 +1,14 @@
+import { useTooltipContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
+//#region src/ui/tooltip/arrow.tsx
+/** Decorative arrow pointing from the tooltip toward the trigger. Hidden from assistive technology. */
+const TooltipArrow = createContextPart({
+	displayName: "TooltipArrow",
+	tag: "div",
+	useContext: useTooltipContext,
+	staticProps: { "aria-hidden": "true" }
+});
+//#endregion
+export { TooltipArrow };
+
+//# sourceMappingURL=arrow.js.map

package/dist/dev/ui/tooltip/arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.js","names":[],"sources":["../../../../src/ui/tooltip/arrow.tsx"],"sourcesContent":["import type { TooltipState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipArrowProps extends UIComponentProps<'div', TooltipState> {}\n\n/** Decorative arrow pointing from the tooltip toward the trigger. Hidden from assistive technology. */\nexport const TooltipArrow = createContextPart<TooltipArrowProps, TooltipState>({\n  displayName: 'TooltipArrow',\n  tag: 'div',\n  useContext: useTooltipContext,\n  staticProps: { 'aria-hidden': 'true' as const },\n});\n\nexport namespace TooltipArrow {\n  export type Props = TooltipArrowProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;AASA,MAAa,eAAe,kBAAmD;CAC7E,aAAa;CACb,KAAK;CACL,YAAY;CACZ,aAAa,EAAE,eAAe,OAAgB;AAChD,CAAC"}

package/dist/dev/ui/tooltip/index.parts.d.ts

@@ -1,10 +1,10 @@
-import { TooltipArrow, TooltipArrowProps } from "./tooltip-arrow.js";
-import { TooltipLabel, TooltipLabelProps } from "./tooltip-label.js";
-import { TooltipPopup, TooltipPopupProps } from "./tooltip-popup.js";
-import { TooltipProvider, TooltipProviderProps } from "./tooltip-provider.js";
-import { TooltipRoot, TooltipRootProps } from "./tooltip-root.js";
-import { TooltipShortcut, TooltipShortcutProps } from "./tooltip-shortcut.js";
-import { TooltipTrigger, TooltipTriggerProps } from "./tooltip-trigger.js";
+import { TooltipArrow, TooltipArrowProps } from "./arrow.js";
+import { TooltipLabel, TooltipLabelProps } from "./label.js";
+import { TooltipPopup, TooltipPopupProps } from "./popup.js";
+import { TooltipProvider, TooltipProviderProps } from "./provider.js";
+import { TooltipRoot, TooltipRootProps } from "./root.js";
+import { TooltipShortcut, TooltipShortcutProps } from "./shortcut.js";
+import { TooltipTrigger, TooltipTriggerProps } from "./trigger.js";
 declare namespace index_parts_d_exports {
   export { TooltipArrow as Arrow, TooltipArrowProps as ArrowProps, TooltipLabel as Label, TooltipLabelProps as LabelProps, TooltipPopup as Popup, TooltipPopupProps as PopupProps, TooltipProvider as Provider, TooltipProviderProps as ProviderProps, TooltipRoot as Root, TooltipRootProps as RootProps, TooltipShortcut as Shortcut, TooltipShortcutProps as ShortcutProps, TooltipTrigger as Trigger, TooltipTriggerProps as TriggerProps };
 }

package/dist/dev/ui/tooltip/index.parts.js

@@ -1,11 +1,11 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { TooltipArrow } from "./tooltip-arrow.js";
-import { TooltipLabel } from "./tooltip-label.js";
-import { TooltipShortcut } from "./tooltip-shortcut.js";
-import { TooltipPopup } from "./tooltip-popup.js";
-import { TooltipProvider } from "./tooltip-provider.js";
-import { TooltipRoot } from "./tooltip-root.js";
-import { TooltipTrigger } from "./tooltip-trigger.js";
+import { TooltipArrow } from "./arrow.js";
+import { TooltipLabel } from "./label.js";
+import { TooltipShortcut } from "./shortcut.js";
+import { TooltipPopup } from "./popup.js";
+import { TooltipProvider } from "./provider.js";
+import { TooltipRoot } from "./root.js";
+import { TooltipTrigger } from "./trigger.js";
 //#region src/ui/tooltip/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Arrow: () => TooltipArrow,

package/dist/dev/ui/tooltip/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/tooltip/index.parts.ts"],"sourcesContent":["export { TooltipArrow as Arrow, type TooltipArrowProps as ArrowProps } from './tooltip-arrow';\nexport { TooltipLabel as Label, type TooltipLabelProps as LabelProps } from './tooltip-label';\nexport { TooltipPopup as Popup, type TooltipPopupProps as PopupProps } from './tooltip-popup';\nexport { TooltipProvider as Provider, type TooltipProviderProps as ProviderProps } from './tooltip-provider';\nexport { TooltipRoot as Root, type TooltipRootProps as RootProps } from './tooltip-root';\nexport { TooltipShortcut as Shortcut, type TooltipShortcutProps as ShortcutProps } from './tooltip-shortcut';\nexport { TooltipTrigger as Trigger, type TooltipTriggerProps as TriggerProps } from './tooltip-trigger';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/tooltip/index.parts.ts"],"sourcesContent":["export { TooltipArrow as Arrow, type TooltipArrowProps as ArrowProps } from './arrow';\nexport { TooltipLabel as Label, type TooltipLabelProps as LabelProps } from './label';\nexport { TooltipPopup as Popup, type TooltipPopupProps as PopupProps } from './popup';\nexport { TooltipProvider as Provider, type TooltipProviderProps as ProviderProps } from './provider';\nexport { TooltipRoot as Root, type TooltipRootProps as RootProps } from './root';\nexport { TooltipShortcut as Shortcut, type TooltipShortcutProps as ShortcutProps } from './shortcut';\nexport { TooltipTrigger as Trigger, type TooltipTriggerProps as TriggerProps } from './trigger';\n"],"mappings":""}

package/dist/dev/ui/tooltip/label.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TooltipState } from "@videojs/core";
+//#region src/ui/tooltip/label.d.ts
+interface TooltipLabelProps extends UIComponentProps<'span', TooltipState> {}
+/** Tooltip body label; defaults to context `content.label` from the linked trigger. */
+declare const TooltipLabel: import("react").ForwardRefExoticComponent<Omit<TooltipLabelProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare namespace TooltipLabel {
+  type Props = TooltipLabelProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipLabel, TooltipLabelProps };
+//# sourceMappingURL=label.d.ts.map

package/dist/dev/ui/tooltip/label.js

@@ -0,0 +1,23 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/tooltip/label.tsx
+/** Tooltip body label; defaults to context `content.label` from the linked trigger. */
+const TooltipLabel = forwardRef(function TooltipLabel({ render, className, style, children, ...elementProps }, forwardedRef) {
+	const { state, stateAttrMap, content } = useTooltipContext();
+	const body = children !== void 0 ? children : content?.label ?? "";
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: forwardedRef,
+		props: [elementProps, { children: body }]
+	});
+});
+//#endregion
+export { TooltipLabel };
+
+//# sourceMappingURL=label.js.map

package/dist/dev/ui/tooltip/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","names":[],"sources":["../../../../src/ui/tooltip/label.tsx"],"sourcesContent":["import type { TooltipState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipLabelProps extends UIComponentProps<'span', TooltipState> {}\n\n/** Tooltip body label; defaults to context `content.label` from the linked trigger. */\nexport const TooltipLabel = forwardRef<HTMLSpanElement, TooltipLabelProps>(function TooltipLabel(\n  { render, className, style, children, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap, content } = useTooltipContext();\n  const body = children !== undefined ? children : (content?.label ?? '');\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [elementProps, { children: body }],\n    }\n  );\n});\n\nexport namespace TooltipLabel {\n  export type Props = TooltipLabelProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;AAUA,MAAa,eAAe,WAA+C,SAAS,aAClF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,OAAO,cAAc,YAAY,kBAAkB;CAC3D,MAAM,OAAO,aAAa,KAAA,IAAY,WAAY,SAAS,SAAS;CAEpE,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC,cAAc,EAAE,UAAU,KAAK,CAAC;CAC1C,CACF;AACF,CAAC"}

package/dist/dev/ui/tooltip/popup.d.ts

@@ -0,0 +1,16 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TooltipState } from "@videojs/core";
+//#region src/ui/tooltip/popup.d.ts
+interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}
+/**
+ * Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript
+ * fallback.
+ */
+declare const TooltipPopup: import("react").ForwardRefExoticComponent<Omit<TooltipPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace TooltipPopup {
+  type Props = TooltipPopupProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipPopup, TooltipPopupProps };
+//# sourceMappingURL=popup.d.ts.map