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

package/dist/dev/ui/time/value.js

@@ -0,0 +1,103 @@
+import { useLocale, useTranslator } from "../../i18n/context.js";
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { TimeCore, TimeDataAttrs } from "@videojs/core";
+import { logMissingFeature, selectBuffer, selectTime } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { forwardRef, useEffect, useState } from "react";
+import { isInteractiveActivation } from "@videojs/utils/dom";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { durationSuffixText, elapsedSuffixText, remainingSuffixText } from "@videojs/core/i18n/text/time";
+import { formatTimeAsPhrase } from "@videojs/utils/time";
+//#region src/ui/time/value.tsx
+/**
+* Displays a formatted time value (current, duration, or remaining).
+*
+* @example
+*   ```tsx
+*   <Time.Value />
+*   <Time.Value type="duration" />
+*   <Time.Value type="remaining" negativeSign="−" />
+*   ```;
+*/
+const Value = forwardRef(function Value(componentProps, forwardedRef) {
+	const { render, className, style, type, negativeSign, label, toggle = false, ...elementProps } = componentProps;
+	const time = usePlayer(selectTime);
+	const buffer = usePlayer(selectBuffer);
+	const translator = useTranslator();
+	const locale = useLocale();
+	const [core] = useState(() => new TimeCore());
+	const defaultType = type ?? TimeCore.defaultProps.type;
+	const [activeType, setActiveType] = useState(defaultType);
+	useEffect(() => {
+		setActiveType(defaultType);
+	}, [defaultType, toggle]);
+	core.setProps({
+		type: activeType,
+		negativeSign,
+		label,
+		toggle
+	});
+	if (!time) {
+		logMissingFeature("Time.Value", "time");
+		return null;
+	}
+	core.setMedia({
+		...time,
+		seekable: buffer?.seekable ?? []
+	});
+	core.setFormatLocale(locale);
+	const state = core.getState();
+	const attrs = core.getAttrs(state, defaultType);
+	const labelParams = core.getLabelParams(state);
+	const suffixText = {
+		current: elapsedSuffixText,
+		duration: durationSuffixText,
+		remaining: remainingSuffixText
+	}[state.type];
+	const resolvedLabelParams = labelParams ? { duration: translateText(suffixText, translator, { duration: formatTimeAsPhrase(Math.abs(state.seconds), { locale }) }) } : void 0;
+	const content = state.negative ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		children: negativeSign ?? TimeCore.defaultProps.negativeSign
+	}), state.text] }) : state.text;
+	const toggleType = () => {
+		setActiveType((value) => {
+			if (defaultType === "current") return value === "remaining" ? "current" : "remaining";
+			return value === "duration" ? "remaining" : "duration";
+		});
+	};
+	const handleClick = (event) => {
+		if (event.defaultPrevented || state.disabled) return;
+		toggleType();
+	};
+	const handleKeyDown = (event) => {
+		if (event.defaultPrevented || state.disabled || !isInteractiveActivation(event.nativeEvent)) return;
+		event.preventDefault();
+		if (event.repeat) return;
+		toggleType();
+	};
+	return renderElement("time", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: TimeDataAttrs,
+		ref: [forwardedRef],
+		props: [{
+			dateTime: toggle || state.unavailable ? void 0 : state.datetime,
+			children: content,
+			...attrs,
+			"aria-label": translateText(attrs["aria-label"], translator, resolvedLabelParams),
+			"aria-description": attrs["aria-description"] ? translateText(attrs["aria-description"], translator) : void 0,
+			...toggle ? {
+				onClick: handleClick,
+				onKeyDown: handleKeyDown
+			} : void 0
+		}, elementProps]
+	});
+});
+//#endregion
+export { Value };
+
+//# sourceMappingURL=value.js.map

package/dist/dev/ui/time/value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.js","names":[],"sources":["../../../../src/ui/time/value.tsx"],"sourcesContent":["import { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { durationSuffixText, elapsedSuffixText, remainingSuffixText } from '@videojs/core/i18n/text/time';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport { formatTimeAsPhrase } from '@videojs/utils/time';\nimport type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';\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 { renderElement } from '../../utils/use-render';\n\nexport interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}\n\n/**\n * Displays a formatted time value (current, duration, or remaining).\n *\n * @example\n *   ```tsx\n *   <Time.Value />\n *   <Time.Value type=\"duration\" />\n *   <Time.Value type=\"remaining\" negativeSign=\"−\" />\n *   ```;\n */\nexport const Value = forwardRef(function Value(\n  componentProps: ValueProps,\n  forwardedRef: ForwardedRef<HTMLTimeElement>\n) {\n  const { render, className, style, type, negativeSign, label, toggle = false, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n  const buffer = usePlayer(selectBuffer);\n  const translator = useTranslator();\n  const locale = useLocale();\n\n  const [core] = useState(() => new TimeCore());\n\n  const defaultType = type ?? TimeCore.defaultProps.type;\n  const [activeType, setActiveType] = useState(defaultType);\n\n  // We want to listen for changes to defaultType and toggle (so we revert to default), this just means one less useEffect.\n  // oxlint-disable-next-line react/exhaustive-deps\n  useEffect(() => {\n    setActiveType(defaultType);\n  }, [defaultType, toggle]);\n\n  core.setProps({\n    type: activeType,\n    negativeSign,\n    label,\n    toggle,\n  });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('Time.Value', 'time');\n\n    return null;\n  }\n\n  core.setMedia({ ...time, seekable: buffer?.seekable ?? [] });\n  core.setFormatLocale(locale);\n  const state = core.getState();\n  const attrs = core.getAttrs(state, defaultType);\n  const labelParams = core.getLabelParams(state);\n  const suffixText = {\n    current: elapsedSuffixText,\n    duration: durationSuffixText,\n    remaining: remainingSuffixText,\n  }[state.type];\n  const resolvedLabelParams = labelParams\n    ? {\n        duration: translateText(suffixText, translator, {\n          duration: formatTimeAsPhrase(Math.abs(state.seconds), { locale }),\n        }),\n      }\n    : undefined;\n\n  const content = state.negative ? (\n    <>\n      <span aria-hidden=\"true\">{negativeSign ?? TimeCore.defaultProps.negativeSign}</span>\n      {state.text}\n    </>\n  ) : (\n    state.text\n  );\n\n  const toggleType = () => {\n    setActiveType((value) => {\n      if (defaultType === 'current') {\n        return value === 'remaining' ? 'current' : 'remaining';\n      }\n\n      return value === 'duration' ? 'remaining' : 'duration';\n    });\n  };\n\n  const handleClick = (event: MouseEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented || state.disabled) return;\n\n    toggleType();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented || state.disabled || !isInteractiveActivation(event.nativeEvent)) return;\n\n    // Prevent space from scrolling page.\n    event.preventDefault();\n\n    if (event.repeat) return;\n\n    toggleType();\n  };\n\n  return renderElement(\n    'time',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TimeDataAttrs,\n      ref: [forwardedRef],\n      props: [\n        {\n          dateTime: toggle || state.unavailable ? undefined : state.datetime,\n          children: content,\n          ...attrs,\n          'aria-label': translateText(attrs['aria-label'], translator, resolvedLabelParams),\n          'aria-description': attrs['aria-description']\n            ? translateText(attrs['aria-description'], translator)\n            : undefined,\n          ...(toggle ? { onClick: handleClick, onKeyDown: handleKeyDown } : undefined),\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace Value {\n  export type Props = ValueProps;\n  export type State = TimeCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,OAAO,SAAS,OAAO,GAAG,iBAAiB;CAEjG,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CAEzB,MAAM,CAAC,QAAQ,eAAe,IAAI,SAAS,CAAC;CAE5C,MAAM,cAAc,QAAQ,SAAS,aAAa;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,WAAW;CAIxD,gBAAgB;EACd,cAAc,WAAW;CAC3B,GAAG,CAAC,aAAa,MAAM,CAAC;CAExB,KAAK,SAAS;EACZ,MAAM;EACN;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC,MAAM;EACI,kBAAkB,cAAc,MAAM;EAEnD,OAAO;CACT;CAEA,KAAK,SAAS;EAAE,GAAG;EAAM,UAAU,QAAQ,YAAY,CAAC;CAAE,CAAC;CAC3D,KAAK,gBAAgB,MAAM;CAC3B,MAAM,QAAQ,KAAK,SAAS;CAC5B,MAAM,QAAQ,KAAK,SAAS,OAAO,WAAW;CAC9C,MAAM,cAAc,KAAK,eAAe,KAAK;CAC7C,MAAM,aAAa;EACjB,SAAS;EACT,UAAU;EACV,WAAW;CACb,EAAE,MAAM;CACR,MAAM,sBAAsB,cACxB,EACE,UAAU,cAAc,YAAY,YAAY,EAC9C,UAAU,mBAAmB,KAAK,IAAI,MAAM,OAAO,GAAG,EAAE,OAAO,CAAC,EAClE,CAAC,EACH,IACA,KAAA;CAEJ,MAAM,UAAU,MAAM,WACpB,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,eAAY;EAAQ,UAAA,gBAAgB,SAAS,aAAa;CAAmB,CAAA,GAClF,MAAM,IACP,EAAA,CAAA,IAEF,MAAM;CAGR,MAAM,mBAAmB;EACvB,eAAe,UAAU;GACvB,IAAI,gBAAgB,WAClB,OAAO,UAAU,cAAc,YAAY;GAG7C,OAAO,UAAU,aAAa,cAAc;EAC9C,CAAC;CACH;CAEA,MAAM,eAAe,UAAuC;EAC1D,IAAI,MAAM,oBAAoB,MAAM,UAAU;EAE9C,WAAW;CACb;CAEA,MAAM,iBAAiB,UAA0C;EAC/D,IAAI,MAAM,oBAAoB,MAAM,YAAY,CAAC,wBAAwB,MAAM,WAAW,GAAG;EAG7F,MAAM,eAAe;EAErB,IAAI,MAAM,QAAQ;EAElB,WAAW;CACb;CAEA,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,YAAY;EAClB,OAAO,CACL;GACE,UAAU,UAAU,MAAM,cAAc,KAAA,IAAY,MAAM;GAC1D,UAAU;GACV,GAAG;GACH,cAAc,cAAc,MAAM,eAAe,YAAY,mBAAmB;GAChF,oBAAoB,MAAM,sBACtB,cAAc,MAAM,qBAAqB,UAAU,IACnD,KAAA;GACJ,GAAI,SAAS;IAAE,SAAS;IAAa,WAAW;GAAc,IAAI,KAAA;EACpE,GACA,YACF;CACF,CACF;AACF,CAAC"}

package/dist/dev/ui/time-slider/chapter-title.d.ts

@@ -0,0 +1,19 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MediaTextCue } from "@videojs/media";
+//#region src/ui/time-slider/chapter-title.d.ts
+interface TimeSliderChapterTitleState {
+  /** Chapter at the current interaction value. */
+  cue: MediaTextCue | null;
+  /** Chapter cue text, or an empty string for an uncovered interval. */
+  text: string;
+}
+interface TimeSliderChapterTitleProps extends UIComponentProps<'span', TimeSliderChapterTitleState> {}
+/** Displays the chapter title at the current pointer or keyboard position. */
+declare const TimeSliderChapterTitle: import("react").ForwardRefExoticComponent<Omit<TimeSliderChapterTitleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare namespace TimeSliderChapterTitle {
+  type Props = TimeSliderChapterTitleProps;
+  type State = TimeSliderChapterTitleState;
+}
+//#endregion
+export { TimeSliderChapterTitle, TimeSliderChapterTitleProps, TimeSliderChapterTitleState };
+//# sourceMappingURL=chapter-title.d.ts.map

package/dist/dev/ui/time-slider/chapter-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chapter-title.d.ts","names":[],"sources":["../../../../src/ui/time-slider/chapter-title.tsx"],"mappings":";;;UAUiB;;EAEf,KAAK;;EAEL;;UAGe,oCAAoC,yBAAyB;;cAGjE,wCAAsB,0BAAA,KAAA,sDAAA,cAAA;kBAqClB;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/time-slider/chapter-title.js

@@ -0,0 +1,45 @@
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useSliderContext, useSliderPointerValue } from "../slider/context.js";
+import { TimeSliderChaptersCore } from "@videojs/core";
+import { selectTextTrack, selectTime } from "@videojs/core/dom";
+import { forwardRef, useMemo, useState } from "react";
+//#region src/ui/time-slider/chapter-title.tsx
+/** Displays the chapter title at the current pointer or keyboard position. */
+const TimeSliderChapterTitle = forwardRef(function TimeSliderChapterTitle(componentProps, ref) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const slider = useSliderContext();
+	const pointerValue = useSliderPointerValue();
+	const textTrack = usePlayer(selectTextTrack);
+	const time = usePlayer(selectTime);
+	const [core] = useState(() => new TimeSliderChaptersCore());
+	const { chapters } = useMemo(() => core.getRanges(textTrack?.chaptersCues ?? [], 0, time?.duration ?? 0), [
+		core,
+		textTrack?.chaptersCues,
+		time?.duration
+	]);
+	const keyboard = slider.state.interactive && !slider.state.pointing && !slider.state.dragging;
+	const value = slider.state.pointing || slider.state.dragging ? pointerValue : slider.state.value;
+	const cue = core.findChapter(chapters, value)?.cue ?? null;
+	const state = {
+		cue,
+		text: cue?.text ?? ""
+	};
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref,
+		props: [{
+			"aria-hidden": keyboard ? void 0 : true,
+			"aria-live": keyboard ? "polite" : void 0,
+			children: state.text
+		}, elementProps]
+	});
+});
+//#endregion
+export { TimeSliderChapterTitle };
+
+//# sourceMappingURL=chapter-title.js.map

package/dist/dev/ui/time-slider/chapter-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chapter-title.js","names":[],"sources":["../../../../src/ui/time-slider/chapter-title.tsx"],"sourcesContent":["import { TimeSliderChaptersCore } from '@videojs/core';\nimport { selectTextTrack, selectTime } from '@videojs/core/dom';\nimport type { MediaTextCue } from '@videojs/media';\nimport { forwardRef, useMemo, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSliderContext, useSliderPointerValue } from '../slider/context';\n\nexport interface TimeSliderChapterTitleState {\n  /** Chapter at the current interaction value. */\n  cue: MediaTextCue | null;\n  /** Chapter cue text, or an empty string for an uncovered interval. */\n  text: string;\n}\n\nexport interface TimeSliderChapterTitleProps extends UIComponentProps<'span', TimeSliderChapterTitleState> {}\n\n/** Displays the chapter title at the current pointer or keyboard position. */\nexport const TimeSliderChapterTitle = forwardRef<HTMLSpanElement, TimeSliderChapterTitleProps>(\n  function TimeSliderChapterTitle(componentProps, ref) {\n    const { render, className, style, ...elementProps } = componentProps;\n    const slider = useSliderContext();\n    const pointerValue = useSliderPointerValue();\n    const textTrack = usePlayer(selectTextTrack);\n    const time = usePlayer(selectTime);\n    const [core] = useState(() => new TimeSliderChaptersCore());\n    const { chapters } = useMemo(\n      () => core.getRanges(textTrack?.chaptersCues ?? [], 0, time?.duration ?? 0),\n      [core, textTrack?.chaptersCues, time?.duration]\n    );\n    const keyboard = slider.state.interactive && !slider.state.pointing && !slider.state.dragging;\n    const value = slider.state.pointing || slider.state.dragging ? pointerValue : slider.state.value;\n    const chapter = core.findChapter(chapters, value);\n    const cue = chapter?.cue ?? null;\n    const state = { cue, text: cue?.text ?? '' };\n\n    return renderElement(\n      'span',\n      { render, className, style },\n      {\n        state,\n        ref,\n        props: [\n          {\n            'aria-hidden': keyboard ? undefined : true,\n            'aria-live': keyboard ? 'polite' : undefined,\n            children: state.text,\n          },\n          elementProps,\n        ],\n      }\n    );\n  }\n);\n\nexport namespace TimeSliderChapterTitle {\n  export type Props = TimeSliderChapterTitleProps;\n  export type State = TimeSliderChapterTitleState;\n}\n"],"mappings":";;;;;;;;AAoBA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,gBAAgB,KAAK;CACnD,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,SAAS,iBAAiB;CAChC,MAAM,eAAe,sBAAsB;CAC3C,MAAM,YAAY,UAAU,eAAe;CAC3C,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;CAC1D,MAAM,EAAE,aAAa,cACb,KAAK,UAAU,WAAW,gBAAgB,CAAC,GAAG,GAAG,MAAM,YAAY,CAAC,GAC1E;EAAC;EAAM,WAAW;EAAc,MAAM;CAAQ,CAChD;CACA,MAAM,WAAW,OAAO,MAAM,eAAe,CAAC,OAAO,MAAM,YAAY,CAAC,OAAO,MAAM;CACrF,MAAM,QAAQ,OAAO,MAAM,YAAY,OAAO,MAAM,WAAW,eAAe,OAAO,MAAM;CAE3F,MAAM,MADU,KAAK,YAAY,UAAU,KACzB,CAAC,EAAE,OAAO;CAC5B,MAAM,QAAQ;EAAE;EAAK,MAAM,KAAK,QAAQ;CAAG;CAE3C,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,OAAO,CACL;GACE,eAAe,WAAW,KAAA,IAAY;GACtC,aAAa,WAAW,WAAW,KAAA;GACnC,UAAU,MAAM;EAClB,GACA,YACF;CACF,CACF;AACF,CACF"}

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

@@ -0,0 +1,22 @@
+import { HTMLProps, UIComponentProps } from "../../utils/types.js";
+import { TimeSliderChapterRange, TimeSliderChaptersCore } from "@videojs/core";
+import { ReactElement } from "react";
+//#region src/ui/time-slider/chapters.d.ts
+type TimeSliderChapterState = TimeSliderChaptersCore.State;
+interface TimeSliderChaptersState {
+  /** Normalized ranges spanning the full slider domain. */
+  chapters: readonly TimeSliderChapterRange[];
+}
+interface TimeSliderChaptersProps extends Omit<UIComponentProps<'div', TimeSliderChaptersState>, 'children'> {
+  /** Render one consumer-owned subtree for every normalized chapter range. */
+  renderChapter: (props: Omit<HTMLProps<HTMLElement>, 'ref'>, state: TimeSliderChapterState) => ReactElement;
+}
+/** Renders normalized chapter ranges across the full slider, including one full range when chapter cues are absent. */
+declare const TimeSliderChapters: import("react").ForwardRefExoticComponent<Omit<TimeSliderChaptersProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace TimeSliderChapters {
+  type Props = TimeSliderChaptersProps;
+  type State = TimeSliderChaptersState;
+}
+//#endregion
+export { TimeSliderChapterState, TimeSliderChapters, TimeSliderChaptersProps, TimeSliderChaptersState };
+//# sourceMappingURL=chapters.d.ts.map

package/dist/dev/ui/time-slider/chapters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chapters.d.ts","names":[],"sources":["../../../../src/ui/time-slider/chapters.tsx"],"mappings":";;;;KAgBY,yBAAyB,uBAAuB;UAE3C;;EAEf,mBAAmB;;UAGJ,gCAAgC,KAAK,wBAAwB;;EAE5E,gBAAgB,OAAO,KAAK,UAAU,sBAAsB,OAAO,2BAA2B;;;cAInF,oCAAkB,0BAAA,KAAA,kDAAA,cAAA;kBA6Cd;OACH,QAAQ;OACR,QAAQ"}

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

@@ -0,0 +1,51 @@
+import { usePlayer } from "../../player/context.js";
+import { SliderSegments } from "./segments.js";
+import { TimeSliderChapterCSSVars, TimeSliderChapterDataAttrs, TimeSliderChaptersCore } from "@videojs/core";
+import { getStateDataAttrs, selectBuffer, selectTextTrack, selectTime } from "@videojs/core/dom";
+import { forwardRef, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isFunction } from "@videojs/utils/predicate";
+//#region src/ui/time-slider/chapters.tsx
+/** Renders normalized chapter ranges across the full slider, including one full range when chapter cues are absent. */
+const TimeSliderChapters = forwardRef(function TimeSliderChapters(componentProps, ref) {
+	const { renderChapter, className, style, render, ...props } = componentProps;
+	const textTrack = usePlayer(selectTextTrack);
+	const buffer = usePlayer(selectBuffer);
+	const duration = usePlayer(selectTime)?.duration ?? 0;
+	const [core] = useState(() => new TimeSliderChaptersCore());
+	const { chapters, ranges, max } = useMemo(() => core.getRanges(textTrack?.chaptersCues ?? [], 0, duration), [
+		core,
+		textTrack?.chaptersCues,
+		duration
+	]);
+	const bufferedEnd = buffer?.buffered.length ? buffer.buffered[buffer.buffered.length - 1][1] : 0;
+	const getChapterState = (segment) => core.getState(segment, chapters, bufferedEnd);
+	const state = useMemo(() => ({ chapters }), [chapters]);
+	return /* @__PURE__ */ jsx(SliderSegments, {
+		ref,
+		...props,
+		className: isFunction(className) ? className(state) : className,
+		style: isFunction(style) ? style(state) : style,
+		render: isFunction(render) ? (renderProps) => render(renderProps, state) : render,
+		ranges,
+		min: 0,
+		max,
+		renderSegment: (segmentProps, segment) => {
+			const state = getChapterState(segment);
+			const chapterProps = {
+				...segmentProps,
+				...getStateDataAttrs(state, TimeSliderChapterDataAttrs),
+				style: {
+					...segmentProps.style,
+					pointerEvents: state.cue ? void 0 : "none",
+					[TimeSliderChapterCSSVars.buffer]: `${state.bufferPercent}%`
+				}
+			};
+			return renderChapter(chapterProps, state);
+		}
+	});
+});
+//#endregion
+export { TimeSliderChapters };
+
+//# sourceMappingURL=chapters.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chapters.js","names":[],"sources":["../../../../src/ui/time-slider/chapters.tsx"],"sourcesContent":["import {\n  type SliderSegmentState,\n  TimeSliderChapterCSSVars,\n  TimeSliderChapterDataAttrs,\n  type TimeSliderChapterRange,\n  TimeSliderChaptersCore,\n} from '@videojs/core';\nimport { getStateDataAttrs, selectBuffer, selectTextTrack, selectTime } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement } from 'react';\nimport { forwardRef, useMemo, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { SliderSegments } from './segments';\n\nexport type TimeSliderChapterState = TimeSliderChaptersCore.State;\n\nexport interface TimeSliderChaptersState {\n  /** Normalized ranges spanning the full slider domain. */\n  chapters: readonly TimeSliderChapterRange[];\n}\n\nexport interface TimeSliderChaptersProps extends Omit<UIComponentProps<'div', TimeSliderChaptersState>, 'children'> {\n  /** Render one consumer-owned subtree for every normalized chapter range. */\n  renderChapter: (props: Omit<HTMLProps<HTMLElement>, 'ref'>, state: TimeSliderChapterState) => ReactElement;\n}\n\n/** Renders normalized chapter ranges across the full slider, including one full range when chapter cues are absent. */\nexport const TimeSliderChapters = forwardRef<HTMLDivElement, TimeSliderChaptersProps>(\n  function TimeSliderChapters(componentProps, ref) {\n    const { renderChapter, className, style, render, ...props } = componentProps;\n    const textTrack = usePlayer(selectTextTrack);\n    const buffer = usePlayer(selectBuffer);\n    const time = usePlayer(selectTime);\n    const duration = time?.duration ?? 0;\n    const [core] = useState(() => new TimeSliderChaptersCore());\n    const { chapters, ranges, max } = useMemo(\n      () => core.getRanges(textTrack?.chaptersCues ?? [], 0, duration),\n      [core, textTrack?.chaptersCues, duration]\n    );\n    const bufferedEnd = buffer?.buffered.length ? buffer.buffered[buffer.buffered.length - 1]![1] : 0;\n    const getChapterState = (segment: SliderSegmentState) => core.getState(segment, chapters, bufferedEnd);\n    const state = useMemo(() => ({ chapters }), [chapters]);\n\n    return (\n      <SliderSegments\n        ref={ref}\n        {...props}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (renderProps) => render(renderProps, state) : render}\n        ranges={ranges}\n        min={0}\n        max={max}\n        renderSegment={(segmentProps, segment) => {\n          const state = getChapterState(segment);\n          const chapterProps = {\n            ...segmentProps,\n            ...getStateDataAttrs(state, TimeSliderChapterDataAttrs),\n            style: {\n              ...segmentProps.style,\n              pointerEvents: state.cue ? undefined : 'none',\n              [TimeSliderChapterCSSVars.buffer]: `${state.bufferPercent}%`,\n            } as CSSProperties,\n          };\n\n          return renderChapter(chapterProps, state);\n        }}\n      />\n    );\n  }\n);\n\nexport namespace TimeSliderChapters {\n  export type Props = TimeSliderChaptersProps;\n  export type State = TimeSliderChaptersState;\n}\n"],"mappings":";;;;;;;;;AA6BA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,gBAAgB,KAAK;CAC/C,MAAM,EAAE,eAAe,WAAW,OAAO,QAAQ,GAAG,UAAU;CAC9D,MAAM,YAAY,UAAU,eAAe;CAC3C,MAAM,SAAS,UAAU,YAAY;CAErC,MAAM,WADO,UAAU,UACH,CAAC,EAAE,YAAY;CACnC,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;CAC1D,MAAM,EAAE,UAAU,QAAQ,QAAQ,cAC1B,KAAK,UAAU,WAAW,gBAAgB,CAAC,GAAG,GAAG,QAAQ,GAC/D;EAAC;EAAM,WAAW;EAAc;CAAQ,CAC1C;CACA,MAAM,cAAc,QAAQ,SAAS,SAAS,OAAO,SAAS,OAAO,SAAS,SAAS,EAAE,CAAE,KAAK;CAChG,MAAM,mBAAmB,YAAgC,KAAK,SAAS,SAAS,UAAU,WAAW;CACrG,MAAM,QAAQ,eAAe,EAAE,SAAS,IAAI,CAAC,QAAQ,CAAC;CAEtD,OACE,oBAAC,gBAAD;EACO;EACL,GAAI;EACJ,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,gBAAgB,OAAO,aAAa,KAAK,IAAI;EACnE;EACR,KAAK;EACA;EACL,gBAAgB,cAAc,YAAY;GACxC,MAAM,QAAQ,gBAAgB,OAAO;GACrC,MAAM,eAAe;IACnB,GAAG;IACH,GAAG,kBAAkB,OAAO,0BAA0B;IACtD,OAAO;KACL,GAAG,aAAa;KAChB,eAAe,MAAM,MAAM,KAAA,IAAY;MACtC,yBAAyB,SAAS,GAAG,MAAM,cAAc;IAC5D;GACF;GAEA,OAAO,cAAc,cAAc,KAAK;EAC1C;CACD,CAAA;AAEL,CACF"}

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

@@ -1,13 +1,13 @@
-import { SliderBuffer, SliderBufferProps } from "../slider/slider-buffer.js";
-import { SliderFill, SliderFillProps } from "../slider/slider-fill.js";
-import { SliderPreview, SliderPreviewProps } from "../slider/slider-preview.js";
-import { SliderThumb, SliderThumbProps } from "../slider/slider-thumb.js";
-import { SliderTrack, SliderTrackProps } from "../slider/slider-track.js";
-import { SliderValue, SliderValueProps } from "../slider/slider-value.js";
+import { SliderBuffer, SliderBufferProps } from "../slider/buffer.js";
+import { SliderFill, SliderFillProps } from "../slider/fill.js";
+import { SliderPreview, SliderPreviewProps } from "../slider/preview.js";
+import { SliderThumb, SliderThumbProps } from "../slider/thumb.js";
+import { SliderTrack, SliderTrackProps } from "../slider/track.js";
+import { SliderValue, SliderValueProps } from "../slider/value.js";
 import "../slider/index.parts.js";
-import { TimeSliderChapterTitle, TimeSliderChapterTitleProps } from "./time-slider-chapters/time-slider-chapter-title.js";
-import { TimeSliderChapters, TimeSliderChaptersProps } from "./time-slider-chapters/time-slider-chapters.js";
-import { TimeSliderRoot, TimeSliderRootProps } from "./time-slider-root.js";
+import { TimeSliderChapterTitle, TimeSliderChapterTitleProps } from "./chapter-title.js";
+import { TimeSliderChapters, TimeSliderChaptersProps } from "./chapters.js";
+import { TimeSliderRoot, TimeSliderRootProps } from "./root.js";
 declare namespace index_parts_d_exports {
   export { SliderBuffer as Buffer, SliderBufferProps as BufferProps, TimeSliderChapterTitle as ChapterTitle, TimeSliderChapterTitleProps as ChapterTitleProps, TimeSliderChapters as Chapters, TimeSliderChaptersProps as ChaptersProps, SliderFill as Fill, SliderFillProps as FillProps, SliderPreview as Preview, SliderPreviewProps as PreviewProps, TimeSliderRoot as Root, TimeSliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
 }

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

@@ -1,13 +1,13 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { SliderBuffer } from "../slider/slider-buffer.js";
-import { SliderFill } from "../slider/slider-fill.js";
-import { SliderPreview } from "../slider/slider-preview.js";
-import { SliderThumb } from "../slider/slider-thumb.js";
-import { SliderTrack } from "../slider/slider-track.js";
-import { SliderValue } from "../slider/slider-value.js";
-import { TimeSliderChapterTitle } from "./time-slider-chapters/time-slider-chapter-title.js";
-import { TimeSliderChapters } from "./time-slider-chapters/time-slider-chapters.js";
-import { TimeSliderRoot } from "./time-slider-root.js";
+import { SliderBuffer } from "../slider/buffer.js";
+import { SliderFill } from "../slider/fill.js";
+import { SliderPreview } from "../slider/preview.js";
+import { SliderThumb } from "../slider/thumb.js";
+import { SliderTrack } from "../slider/track.js";
+import { SliderValue } from "../slider/value.js";
+import { TimeSliderChapterTitle } from "./chapter-title.js";
+import { TimeSliderChapters } from "./chapters.js";
+import { TimeSliderRoot } from "./root.js";
 //#region src/ui/time-slider/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Buffer: () => SliderBuffer,

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

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/time-slider/index.parts.ts"],"sourcesContent":["export {\n  Buffer,\n  type BufferProps,\n  Fill,\n  type FillProps,\n  Preview,\n  type PreviewProps,\n  Thumb,\n  type ThumbProps,\n  Track,\n  type TrackProps,\n  Value,\n  type ValueProps,\n} from '../slider/index.parts';\nexport {\n  TimeSliderChapterTitle as ChapterTitle,\n  type TimeSliderChapterTitleProps as ChapterTitleProps,\n} from './time-slider-chapters/time-slider-chapter-title';\nexport {\n  TimeSliderChapters as Chapters,\n  type TimeSliderChaptersProps as ChaptersProps,\n} from './time-slider-chapters/time-slider-chapters';\nexport { TimeSliderRoot as Root, type TimeSliderRootProps as RootProps } from './time-slider-root';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/time-slider/index.parts.ts"],"sourcesContent":["export {\n  Buffer,\n  type BufferProps,\n  Fill,\n  type FillProps,\n  Preview,\n  type PreviewProps,\n  Thumb,\n  type ThumbProps,\n  Track,\n  type TrackProps,\n  Value,\n  type ValueProps,\n} from '../slider/index.parts';\nexport {\n  TimeSliderChapterTitle as ChapterTitle,\n  type TimeSliderChapterTitleProps as ChapterTitleProps,\n} from './chapter-title';\nexport { TimeSliderChapters as Chapters, type TimeSliderChaptersProps as ChaptersProps } from './chapters';\nexport { TimeSliderRoot as Root, type TimeSliderRootProps as RootProps } from './root';\n"],"mappings":""}

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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","names":[],"sources":["../../../../src/ui/time-slider/root.tsx"],"mappings":";;;UAiBiB,4BAA4B,wBAAwB,eAAe,QAAQ,eAAe;EACzG;EACA;;cAGW,gCAAc,0BAAA,KAAA,8CAAA,cAAA;kBA6IV;OACH,QAAQ;OACR,QAAQ,eAAe"}

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

@@ -0,0 +1,129 @@
+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 { 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 { render, className, style, label, changeThrottle = TimeSliderCore.defaultProps.changeThrottle, step = TimeSliderCore.defaultProps.step, largeStep = TimeSliderCore.defaultProps.largeStep, orientation, disabled, thumbAlignment, onDragStart, onDragEnd, pauseOnDrag, ...elementProps } = componentProps;
+	const time = usePlayer(selectTime);
+	const buffer = usePlayer(selectBuffer);
+	const playback = usePlayer(selectPlayback);
+	const translator = useTranslator();
+	const locale = useLocale();
+	const [core] = useState(() => new TimeSliderCore());
+	core.setProps({
+		label,
+		step,
+		largeStep,
+		orientation,
+		disabled,
+		thumbAlignment,
+		pauseOnDrag,
+		changeThrottle
+	});
+	core.setFormatLocale(locale);
+	const mediaRef = useLatestRef(time && buffer ? {
+		...time,
+		...buffer
+	} : null);
+	const playbackRef = useLatestRef(playback);
+	useEffect(() => {
+		return () => core.endDrag(playbackRef.current);
+	}, [core]);
+	const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
+		computeState: (input) => {
+			core.setInput(input);
+			if (!time || !buffer) core.setMedia({
+				currentTime: 0,
+				duration: 0,
+				seeking: false,
+				seek: noopSeek,
+				buffered: [],
+				seekable: []
+			});
+			else core.setMedia({
+				...time,
+				...buffer
+			});
+			return core.getState();
+		},
+		getPercent: () => core.percentFromValue(time?.currentTime ?? 0),
+		getStepPercent: () => core.getStepPercent(),
+		getLargeStepPercent: () => core.getLargeStepPercent(),
+		orientation,
+		disabled: disabled || !time || !buffer || !hasTimeRange({
+			...time,
+			...buffer
+		}),
+		changeThrottle,
+		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
+		getCSSVars: getTimeSliderCSSVars,
+		onValueCommit: (percent) => {
+			const media = mediaRef.current;
+			if (media) media.seek(core.rawValueFromPercent(percent));
+		},
+		onDragStart: () => {
+			core.startDrag(playbackRef.current);
+			onDragStart?.();
+		},
+		onDragEnd: () => {
+			core.endDrag(playbackRef.current);
+			onDragEnd?.();
+		}
+	});
+	if (!time) {
+		logMissingFeature("TimeSlider", "time");
+		return null;
+	}
+	return /* @__PURE__ */ jsx(SliderProvider, {
+		value: {
+			state,
+			pointerValue: core.rawValueFromPercent(state.pointerPercent),
+			input,
+			getPointerValue: (percent) => core.rawValueFromPercent(percent),
+			thumbRef,
+			thumbProps,
+			stateAttrMap: TimeSliderDataAttrs,
+			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) => formatTime(value, state.duration, { locale })
+		},
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: TimeSliderDataAttrs,
+			ref: [forwardedRef, rootRef],
+			props: [
+				{ style: {
+					...cssVars,
+					...rootStyle
+				} },
+				rootProps,
+				elementProps
+			]
+		})
+	});
+});
+//#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":[],"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    // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n    const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\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          if (!time || !buffer) {\n            core.setMedia({\n              currentTime: 0,\n              duration: 0,\n              seeking: false,\n              seek: noopSeek,\n              buffered: [],\n              seekable: [],\n            });\n          } else {\n            core.setMedia({ ...time, ...buffer });\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 || !time || !buffer || !hasTimeRange({ ...time, ...buffer }),\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":";;;;;;;;;;;;;;AAeA,MAAM,iBAAkC,QAAQ,QAAQ,CAAC;AAOzD,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,aACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CAEzB,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAElD,KAAK,SAAS;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,KAAK,gBAAgB,MAAM;CAG3B,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;CAAO,IAAI,IAAI;CAC5E,MAAM,cAAc,aAAa,QAAQ;CAIzC,gBAAgB;EACd,aAAa,KAAK,QAAQ,YAAY,OAAO;CAC/C,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,EAAE,OAAO,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eACtE,UAAgC;EAC9B,eAAe,UAAU;GACvB,KAAK,SAAS,KAAK;GAEnB,IAAI,CAAC,QAAQ,CAAC,QACZ,KAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,CAAC;IACX,UAAU,CAAC;GACb,CAAC;QAED,KAAK,SAAS;IAAE,GAAG;IAAM,GAAG;GAAO,CAAC;GAGtC,OAAO,KAAK,SAAS;EACvB;EACA,kBAAkB,KAAK,iBAAiB,MAAM,eAAe,CAAC;EAC9D,sBAAsB,KAAK,eAAe;EAC1C,2BAA2B,KAAK,oBAAoB;EACpD;EACA,UAAU,YAAY,CAAC,QAAQ,CAAC,UAAU,CAAC,aAAa;GAAE,GAAG;GAAM,GAAG;EAAO,CAAC;EAC9E;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,SAAS;EACjE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;GAEvB,IAAI,OAAO,MAAM,KAAK,KAAK,oBAAoB,OAAO,CAAC;EACzD;EACA,mBAAmB;GACjB,KAAK,UAAU,YAAY,OAAO;GAClC,cAAc;EAChB;EACA,iBAAiB;GACf,KAAK,QAAQ,YAAY,OAAO;GAChC,YAAY;EACd;CACF,CAAC;CAEH,IAAI,CAAC,MAAM;EACI,kBAAkB,cAAc,MAAM;EAEnD,OAAO;CACT;CAEA,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,oBAAoB,MAAM,cAAc;GAC3D;GACA,kBAAkB,YAAY,KAAK,oBAAoB,OAAO;GAC9D;GACA;GACA,cAAc;GACd,WAAW,gBAAgB;IACzB,MAAM,QAAQ,KAAK,SAAS,WAAmC;IAE/D,OAAO;KACL,GAAG;KACH,cAAc,cAAc,MAAM,eAAe,UAAU;KAC3D,kBAAkB,cAChB,MAAM,mBACN,YACA,KAAK,mBAAmB,WAAmC,CAC7D;IACF;GACF;GACA,cAAc,UAAU,WAAW,OAAO,MAAM,UAAU,EAAE,OAAO,CAAC;EACtE;EAEC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,OAAO;GAC3B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;IAAU,EAAE;IAAG;IAAW;GAAY;EAC1E,CACF;CACc,CAAA;AAEpB,CACF"}

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,26 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TitleCore } from "@videojs/core";
+//#region src/ui/title/component.d.ts
+interface TitleProps extends Omit<UIComponentProps<'span', TitleCore.State>, 'children'> {}
+/**
+ * Displays the resolved content title.
+ *
+ * The component owns its text content. Set the title through the player's `title` prop rather than by passing children.
+ *
+ * Renders nothing when no title resolves.
+ *
+ * @example
+ *   ```tsx
+ *   <Title />
+ *
+ *   <Title className="title" />
+ *   ```;
+ */
+declare const Title: import("react").ForwardRefExoticComponent<Omit<TitleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","names":[],"sources":["../../../../src/ui/title/component.tsx"],"mappings":";;;UAWiB,mBAAmB,KAAK,yBAAyB,UAAU;;;;;;;;;;;;;;;cAgB/D,uBAAK,0BAAA,KAAA,qCAAA,cAAA;kBA+BD;OACH,QAAQ;OACR,QAAQ,UAAU"}