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

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

@@ -1,99 +0,0 @@
-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, 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/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 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);
-	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) return;
-		toggleType();
-	};
-	const handleKeyDown = (event) => {
-		if (event.defaultPrevented || !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 ? 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=time-value.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["import { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, 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 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);\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) return;\n\n    toggleType();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented || !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 ? 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,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,IAAI;CAClB,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,kBAAkB;EAE5B,WAAW;CACb;CAEA,MAAM,iBAAiB,UAA0C;EAC/D,IAAI,MAAM,oBAAoB,CAAC,wBAAwB,MAAM,WAAW,GAAG;EAG3E,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,SAAS,KAAA,IAAY,MAAM;GACrC,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/time-slider-chapters/slider-segments.js

@@ -1,60 +0,0 @@
-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/time-slider-chapters/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=slider-segments.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"slider-segments.js","names":[],"sources":["../../../../../src/ui/time-slider/time-slider-chapters/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/time-slider/time-slider-chapters/time-slider-chapter-title.d.ts

@@ -1,19 +0,0 @@
-import { UIComponentProps } from "../../../utils/types.js";
-import { MediaTextCue } from "@videojs/media";
-//#region src/ui/time-slider/time-slider-chapters/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=time-slider-chapter-title.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"time-slider-chapter-title.d.ts","names":[],"sources":["../../../../../src/ui/time-slider/time-slider-chapters/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/time-slider-chapters/time-slider-chapter-title.js

@@ -1,45 +0,0 @@
-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/time-slider-chapters/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=time-slider-chapter-title.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"time-slider-chapter-title.js","names":[],"sources":["../../../../../src/ui/time-slider/time-slider-chapters/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/time-slider-chapters/time-slider-chapters.d.ts

@@ -1,22 +0,0 @@
-import { HTMLProps, UIComponentProps } from "../../../utils/types.js";
-import { TimeSliderChapterRange, TimeSliderChaptersCore } from "@videojs/core";
-import { ReactElement } from "react";
-//#region src/ui/time-slider/time-slider-chapters/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=time-slider-chapters.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"time-slider-chapters.d.ts","names":[],"sources":["../../../../../src/ui/time-slider/time-slider-chapters/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/time-slider-chapters/time-slider-chapters.js

@@ -1,51 +0,0 @@
-import { usePlayer } from "../../../player/context.js";
-import { SliderSegments } from "./slider-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/time-slider-chapters/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=time-slider-chapters.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"time-slider-chapters.js","names":[],"sources":["../../../../../src/ui/time-slider/time-slider-chapters/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 './slider-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/time-slider-root.d.ts

@@ -1,15 +0,0 @@
-import { UIComponentProps } from "../../utils/types.js";
-import { TimeSliderCore } from "@videojs/core";
-//#region src/ui/time-slider/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=time-slider-root.d.ts.map

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

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

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

@@ -1,126 +0,0 @@
-import { useLocale, useTranslator } from "../../i18n/context.js";
-import { usePlayer } from "../../player/context.js";
-import { useLatestRef } from "../../utils/use-latest-ref.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useSlider } from "../hooks/use-slider.js";
-import { SliderProvider } from "../slider/context.js";
-import { TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
-import { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from "@videojs/core/dom";
-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/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 duration = time?.duration ?? 0;
-	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,
-		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, duration, { locale })
-		},
-		children: renderElement("div", {
-			render,
-			className,
-			style
-		}, {
-			state,
-			stateAttrMap: TimeSliderDataAttrs,
-			ref: [forwardedRef, rootRef],
-			props: [
-				{ style: {
-					...cssVars,
-					...rootStyle
-				} },
-				rootProps,
-				elementProps
-			]
-		})
-	});
-});
-//#endregion
-export { TimeSliderRoot };
-
-//# sourceMappingURL=time-slider-root.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/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 { 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 duration = time?.duration ?? 0;\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,\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, 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":";;;;;;;;;;;;;AAcA,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,WAAW,MAAM,YAAY;CAEnC,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;EACA;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,UAAU,EAAE,OAAO,CAAC;EAChE;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/title/title.d.ts

@@ -1,26 +0,0 @@
-import { UIComponentProps } from "../../utils/types.js";
-import { TitleCore } from "@videojs/core";
-//#region src/ui/title/title.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=title.d.ts.map

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

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

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

@@ -1,46 +0,0 @@
-"use client";
-import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
-import { TitleCore, TitleDataAttrs } from "@videojs/core";
-import { logMissingFeature, selectMetadata } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
-//#region src/ui/title/title.tsx
-/**
-* 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" />
-*   ```;
-*/
-const Title = forwardRef(function Title(componentProps, forwardedRef) {
-	const { render, className, style, ...elementProps } = componentProps;
-	const metadata = usePlayer(selectMetadata);
-	const [core] = useState(() => new TitleCore());
-	if (!metadata) {
-		logMissingFeature("Title", "metadata");
-		return null;
-	}
-	const state = core.getState(metadata);
-	if (state.hidden) return null;
-	return renderElement("span", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: TitleDataAttrs,
-		ref: [forwardedRef],
-		props: [{ children: state.title }, elementProps]
-	});
-});
-//#endregion
-export { Title };
-
-//# sourceMappingURL=title.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"title.js","names":[],"sources":["../../../../src/ui/title/title.tsx"],"sourcesContent":["'use client';\n\nimport { TitleCore, TitleDataAttrs } from '@videojs/core';\nimport { logMissingFeature, 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<'span', TitleCore.State>, 'children'> {}\n\n/**\n * Displays the resolved content title.\n *\n * The component owns its text content. Set the title through the player's `title` prop rather than by passing children.\n *\n * Renders nothing when no title resolves.\n *\n * @example\n *   ```tsx\n *   <Title />\n *\n *   <Title className=\"title\" />\n *   ```;\n */\nexport const Title = forwardRef(function Title(\n  componentProps: TitleProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const metadata = usePlayer(selectMetadata);\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);\n  if (state.hidden) return null;\n\n  return renderElement(\n    'span',\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":";;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,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,QAAQ;CACpC,IAAI,MAAM,QAAQ,OAAO;CAEzB,OAAO,cACL,QACA;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/tooltip/tooltip-arrow.d.ts

@@ -1,13 +0,0 @@
-import { UIComponentProps } from "../../utils/types.js";
-import { TooltipState } from "@videojs/core";
-//#region src/ui/tooltip/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=tooltip-arrow.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip-arrow.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-arrow.tsx"],"mappings":";;;UAMiB,0BAA0B,wBAAwB;;cAGtD,8BAAY,0BAAA;kBAOR;OACH,QAAQ;OACR,QAAQ"}

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

@@ -1,14 +0,0 @@
-import { useTooltipContext } from "./context.js";
-import { createContextPart } from "../create-context-part.js";
-//#region src/ui/tooltip/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=tooltip-arrow.js.map