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

package/dist/dev/ui/thumbnail/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/thumbnail/root.tsx"],"sourcesContent":["import { mapCuesToThumbnails, ThumbnailCore, ThumbnailDataAttrs } from '@videojs/core';\nimport { createThumbnail, selectFullscreen, selectTextTrack } from '@videojs/core/dom';\nimport type { CSSProperties, ForwardedRef } from 'react';\nimport { forwardRef, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { useOptionalPlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\nimport { ThumbnailProvider } from './context';\n\nexport interface ThumbnailRootProps extends UIComponentProps<'div', ThumbnailCore.State>, ThumbnailCore.RootProps {}\n\n/**\n * Resolves, sizes, and clips a thumbnail for a point in time.\n *\n * Renders a `div` and exposes `data-hidden`, `data-loading`, and `data-error` for styling every layer in the preview.\n * Render `Thumbnail.Image` inside it for the image the root controls and measures.\n */\nexport const ThumbnailRoot = forwardRef(function ThumbnailRoot(\n  componentProps: ThumbnailRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  // Image state and measured CSS constraints mutate outside React, so every forced render must recompute them.\n  'use no memo';\n\n  const { render, className, style, time = 0, thumbnails: externalThumbnails, ...elementProps } = componentProps;\n\n  const [core] = useState(() => new ThumbnailCore());\n  const divRef = useRef<HTMLDivElement>(null);\n  const imgRef = useRef<HTMLImageElement>(null);\n  const textTrack = useOptionalPlayer(selectTextTrack);\n\n  // Fullscreen container queries change the constraints without resizing an explicitly sized thumbnail.\n  useOptionalPlayer(selectFullscreen);\n\n  // Force a render when the image loads, fails, or the root is resized.\n  const [, setRenderToken] = useState(0);\n  const [handle] = useState(() =>\n    createThumbnail({\n      getContainer: () => divRef.current,\n      getImg: () => imgRef.current,\n      onStateChange: () => setRenderToken((token) => token + 1),\n    })\n  );\n\n  useDestroy(handle, () => handle.connect());\n\n  // The image reports itself through this ref, so a mount, unmount, or `render` swap rebinds without an effect.\n  const imageRef = useCallback(\n    (img: HTMLImageElement | null) => {\n      const previous = imgRef.current;\n\n      imgRef.current = img;\n\n      if (img) handle.connect();\n      else if (previous) handle.disconnectImg(previous);\n    },\n    [handle]\n  );\n\n  // A supplied list takes priority over automatic <track> detection.\n  const thumbnails = useMemo(() => {\n    if (externalThumbnails && externalThumbnails.length > 0) return externalThumbnails;\n\n    return textTrack && textTrack.thumbnailCues.length > 0\n      ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined)\n      : [];\n  }, [externalThumbnails, textTrack]);\n\n  const thumbnail = useMemo(() => core.findActiveThumbnail(thumbnails, time), [core, thumbnails, time]);\n\n  handle.updateSrc(thumbnail?.url);\n\n  const state = core.getState(handle.loading, handle.error, thumbnail);\n\n  let containerStyle: CSSProperties = { overflow: 'hidden' };\n  let imageStyle: CSSProperties | undefined;\n\n  if (thumbnail && handle.naturalWidth && handle.naturalHeight) {\n    const constraints = handle.readConstraints();\n    const result = core.resize(thumbnail, handle.naturalWidth, handle.naturalHeight, constraints);\n\n    if (result) {\n      containerStyle = {\n        overflow: 'hidden',\n        width: result.containerWidth,\n        height: result.containerHeight,\n      };\n      imageStyle = {\n        width: result.imageWidth,\n        height: result.imageHeight,\n        maxWidth: 'none',\n        transform:\n          result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : undefined,\n      };\n    }\n  }\n\n  return (\n    <ThumbnailProvider\n      value={{\n        core,\n        state,\n        src: thumbnail?.url,\n        imageStyle,\n        // Only `<track>`-sourced thumbnails follow the media element's CORS mode.\n        inheritedCrossOrigin: externalThumbnails?.length ? undefined : textTrack?.thumbnailTrackCrossOrigin,\n        imageRef,\n      }}\n    >\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: ThumbnailDataAttrs,\n          ref: [forwardedRef, divRef],\n          props: [core.getAttrs(state), { style: containerStyle }, elementProps],\n        }\n      )}\n    </ThumbnailProvider>\n  );\n});\n\nexport namespace ThumbnailRoot {\n  export type Props = ThumbnailRootProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CAEA;CAEA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,GAAG,YAAY,oBAAoB,GAAG,iBAAiB;CAEhG,MAAM,CAAC,QAAQ,eAAe,IAAI,cAAc,CAAC;CACjD,MAAM,SAAS,OAAuB,IAAI;CAC1C,MAAM,SAAS,OAAyB,IAAI;CAC5C,MAAM,YAAY,kBAAkB,eAAe;CAGnD,kBAAkB,gBAAgB;CAGlC,MAAM,GAAG,kBAAkB,SAAS,CAAC;CACrC,MAAM,CAAC,UAAU,eACf,gBAAgB;EACd,oBAAoB,OAAO;EAC3B,cAAc,OAAO;EACrB,qBAAqB,gBAAgB,UAAU,QAAQ,CAAC;CAC1D,CAAC,CACH;CAEA,WAAW,cAAc,OAAO,QAAQ,CAAC;CAGzC,MAAM,WAAW,aACd,QAAiC;EAChC,MAAM,WAAW,OAAO;EAExB,OAAO,UAAU;EAEjB,IAAI,KAAK,OAAO,QAAQ;OACnB,IAAI,UAAU,OAAO,cAAc,QAAQ;CAClD,GACA,CAAC,MAAM,CACT;CAGA,MAAM,aAAa,cAAc;EAC/B,IAAI,sBAAsB,mBAAmB,SAAS,GAAG,OAAO;EAEhE,OAAO,aAAa,UAAU,cAAc,SAAS,IACjD,oBAAoB,UAAU,eAAe,UAAU,qBAAqB,KAAA,CAAS,IACrF,CAAC;CACP,GAAG,CAAC,oBAAoB,SAAS,CAAC;CAElC,MAAM,YAAY,cAAc,KAAK,oBAAoB,YAAY,IAAI,GAAG;EAAC;EAAM;EAAY;CAAI,CAAC;CAEpG,OAAO,UAAU,WAAW,GAAG;CAE/B,MAAM,QAAQ,KAAK,SAAS,OAAO,SAAS,OAAO,OAAO,SAAS;CAEnE,IAAI,iBAAgC,EAAE,UAAU,SAAS;CACzD,IAAI;CAEJ,IAAI,aAAa,OAAO,gBAAgB,OAAO,eAAe;EAC5D,MAAM,cAAc,OAAO,gBAAgB;EAC3C,MAAM,SAAS,KAAK,OAAO,WAAW,OAAO,cAAc,OAAO,eAAe,WAAW;EAE5F,IAAI,QAAQ;GACV,iBAAiB;IACf,UAAU;IACV,OAAO,OAAO;IACd,QAAQ,OAAO;GACjB;GACA,aAAa;IACX,OAAO,OAAO;IACd,QAAQ,OAAO;IACf,UAAU;IACV,WACE,OAAO,WAAW,OAAO,UAAU,cAAc,OAAO,QAAQ,OAAO,OAAO,QAAQ,OAAO,KAAA;GACjG;EACF;CACF;CAEA,OACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA;GACA,KAAK,WAAW;GAChB;GAEA,sBAAsB,oBAAoB,SAAS,KAAA,IAAY,WAAW;GAC1E;EACF;EAEC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,MAAM;GAC1B,OAAO;IAAC,KAAK,SAAS,KAAK;IAAG,EAAE,OAAO,eAAe;IAAG;GAAY;EACvE,CACF;CACiB,CAAA;AAEvB,CAAC"}

package/dist/dev/ui/time/group.d.ts

@@ -0,0 +1,27 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { ReactNode } from "react";
+//#region src/ui/time/group.d.ts
+type GroupState = Record<string, never>;
+interface GroupProps extends UIComponentProps<'span', GroupState> {
+  /** Time value components to render inside the group. */
+  children?: ReactNode | undefined;
+}
+/**
+ * Container for composed time displays. Renders a `<span>` element.
+ *
+ * @example
+ *   ```tsx
+ *   <Time.Group>
+ *     <Time.Value type="current" />
+ *     <Time.Separator />
+ *     <Time.Value type="duration" />
+ *   </Time.Group>;
+ *   ```;
+ */
+declare const Group: import("react").ForwardRefExoticComponent<Omit<GroupProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare namespace Group {
+  type Props = GroupProps;
+}
+//#endregion
+export { Group, GroupProps };
+//# sourceMappingURL=group.d.ts.map

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

@@ -0,0 +1,31 @@
+import { renderElement } from "../../utils/use-render.js";
+import { forwardRef } from "react";
+//#region src/ui/time/group.tsx
+/**
+* Container for composed time displays. Renders a `<span>` element.
+*
+* @example
+*   ```tsx
+*   <Time.Group>
+*     <Time.Value type="current" />
+*     <Time.Separator />
+*     <Time.Value type="duration" />
+*   </Time.Group>;
+*   ```;
+*/
+const Group = forwardRef(function Group(componentProps, forwardedRef) {
+	const { render, className, style, children, ...elementProps } = componentProps;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state: {},
+		ref: [forwardedRef],
+		props: [{ children }, elementProps]
+	});
+});
+//#endregion
+export { Group };
+
+//# sourceMappingURL=group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","names":[],"sources":["../../../../src/ui/time/group.tsx"],"sourcesContent":["import type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Group (no dynamic state)\ntype GroupState = Record<string, never>;\n\nexport interface GroupProps extends UIComponentProps<'span', GroupState> {\n  /** Time value components to render inside the group. */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Container for composed time displays. Renders a `<span>` element.\n *\n * @example\n *   ```tsx\n *   <Time.Group>\n *     <Time.Value type=\"current\" />\n *     <Time.Separator />\n *     <Time.Value type=\"duration\" />\n *   </Time.Group>;\n *   ```;\n */\nexport const Group = forwardRef(function Group(\n  componentProps: GroupProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const state: GroupState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ children }, elementProps],\n    }\n  );\n});\n\nexport namespace Group {\n  export type Props = GroupProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAIhE,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAA,CAAA;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY;CACpC,CACF;AACF,CAAC"}

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

@@ -1,6 +1,6 @@
-import { Group, GroupProps } from "./time-group.js";
-import { Separator, SeparatorProps } from "./time-separator.js";
-import { Value, ValueProps } from "./time-value.js";
+import { Group, GroupProps } from "./group.js";
+import { Separator, SeparatorProps } from "./separator.js";
+import { Value, ValueProps } from "./value.js";
 declare namespace index_parts_d_exports {
   export { Group, GroupProps, Separator, SeparatorProps, Value, ValueProps };
 }

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

@@ -1,7 +1,7 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { Group } from "./time-group.js";
-import { Separator } from "./time-separator.js";
-import { Value } from "./time-value.js";
+import { Group } from "./group.js";
+import { Separator } from "./separator.js";
+import { Value } from "./value.js";
 //#region src/ui/time/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Group: () => Group,

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

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/time/index.parts.ts"],"sourcesContent":["export { Group, type GroupProps } from './time-group';\nexport { Separator, type SeparatorProps } from './time-separator';\nexport { Value, type ValueProps } from './time-value';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/time/index.parts.ts"],"sourcesContent":["export { Group, type GroupProps } from './group';\nexport { Separator, type SeparatorProps } from './separator';\nexport { Value, type ValueProps } from './value';\n"],"mappings":""}

package/dist/dev/ui/time/separator.d.ts

@@ -0,0 +1,24 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { ReactNode } from "react";
+//#region src/ui/time/separator.d.ts
+type SeparatorState = Record<string, never>;
+interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {
+  /** Separator content. Defaults to "/". */
+  children?: ReactNode | undefined;
+}
+/**
+ * Divider between time values. Hidden from screen readers.
+ *
+ * @example
+ *   ```tsx
+ *   <Time.Separator />
+ *   <Time.Separator> of </Time.Separator>
+ *   ```;
+ */
+declare const Separator: import("react").ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare namespace Separator {
+  type Props = SeparatorProps;
+}
+//#endregion
+export { Separator, SeparatorProps };
+//# sourceMappingURL=separator.d.ts.map

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

@@ -0,0 +1,31 @@
+import { renderElement } from "../../utils/use-render.js";
+import { forwardRef } from "react";
+//#region src/ui/time/separator.tsx
+/**
+* Divider between time values. Hidden from screen readers.
+*
+* @example
+*   ```tsx
+*   <Time.Separator />
+*   <Time.Separator> of </Time.Separator>
+*   ```;
+*/
+const Separator = forwardRef(function Separator(componentProps, forwardedRef) {
+	const { render, className, style, children = "/", ...elementProps } = componentProps;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state: {},
+		ref: [forwardedRef],
+		props: [{
+			"aria-hidden": "true",
+			children
+		}, elementProps]
+	});
+});
+//#endregion
+export { Separator };
+
+//# sourceMappingURL=separator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":[],"sources":["../../../../src/ui/time/separator.tsx"],"sourcesContent":["import type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Separator (no dynamic state)\ntype SeparatorState = Record<string, never>;\n\nexport interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {\n  /** Separator content. Defaults to \"/\". */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Divider between time values. Hidden from screen readers.\n *\n * @example\n *   ```tsx\n *   <Time.Separator />\n *   <Time.Separator> of </Time.Separator>\n *   ```;\n */\nexport const Separator = forwardRef(function Separator(\n  componentProps: SeparatorProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children = '/', ...elementProps } = componentProps;\n\n  const state: SeparatorState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ 'aria-hidden': 'true', children }, elementProps],\n    }\n  );\n});\n\nexport namespace Separator {\n  export type Props = SeparatorProps;\n}\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAa,YAAY,WAAW,SAAS,UAC3C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,KAAK,GAAG,iBAAiB;CAItE,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAA,CAAA;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC;GAAE,eAAe;GAAQ;EAAS,GAAG,YAAY;CAC3D,CACF;AACF,CAAC"}

package/dist/dev/ui/time/value.d.ts

@@ -0,0 +1,22 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TimeCore } from "@videojs/core";
+//#region src/ui/time/value.d.ts
+interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}
+/**
+ * Displays a formatted time value (current, duration, or remaining).
+ *
+ * @example
+ *   ```tsx
+ *   <Time.Value />
+ *   <Time.Value type="duration" />
+ *   <Time.Value type="remaining" negativeSign="−" />
+ *   ```;
+ */
+declare const Value: import("react").ForwardRefExoticComponent<Omit<ValueProps, "ref"> & import("react").RefAttributes<HTMLTimeElement>>;
+declare namespace Value {
+  type Props = ValueProps;
+  type State = TimeCore.State;
+}
+//#endregion
+export { Value, ValueProps };
+//# sourceMappingURL=value.d.ts.map

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.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,KAC/B,CAAA,EAAS,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.js

@@ -0,0 +1,141 @@
+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 { c } from "react-compiler-runtime";
+import { forwardRef, 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 $ = c(39);
+	let className;
+	let props;
+	let render;
+	let renderChapter;
+	let style;
+	if ($[0] !== componentProps) {
+		({renderChapter, className, style, render, ...props} = componentProps);
+		$[0] = componentProps;
+		$[1] = className;
+		$[2] = props;
+		$[3] = render;
+		$[4] = renderChapter;
+		$[5] = style;
+	} else {
+		className = $[1];
+		props = $[2];
+		render = $[3];
+		renderChapter = $[4];
+		style = $[5];
+	}
+	const textTrack = usePlayer(selectTextTrack);
+	const buffer = usePlayer(selectBuffer);
+	const duration = usePlayer(selectTime)?.duration ?? 0;
+	const [core] = useState(_temp);
+	textTrack?.chaptersCues;
+	let t0;
+	if ($[6] !== core || $[7] !== duration || $[8] !== textTrack?.chaptersCues) {
+		let t1;
+		if ($[10] !== textTrack?.chaptersCues) {
+			t1 = textTrack?.chaptersCues ?? [];
+			$[10] = textTrack?.chaptersCues;
+			$[11] = t1;
+		} else t1 = $[11];
+		t0 = core.getRanges(t1, 0, duration);
+		$[6] = core;
+		$[7] = duration;
+		$[8] = textTrack?.chaptersCues;
+		$[9] = t0;
+	} else t0 = $[9];
+	const { chapters, ranges, max } = t0;
+	const bufferedEnd = buffer?.buffered.length ? buffer.buffered[buffer.buffered.length - 1][1] : 0;
+	let t1;
+	if ($[12] !== bufferedEnd || $[13] !== chapters || $[14] !== core) {
+		t1 = (segment) => core.getState(segment, chapters, bufferedEnd);
+		$[12] = bufferedEnd;
+		$[13] = chapters;
+		$[14] = core;
+		$[15] = t1;
+	} else t1 = $[15];
+	const getChapterState = t1;
+	let t2;
+	if ($[16] !== chapters) {
+		t2 = { chapters };
+		$[16] = chapters;
+		$[17] = t2;
+	} else t2 = $[17];
+	const state = t2;
+	let t3;
+	if ($[18] !== className || $[19] !== state) {
+		t3 = isFunction(className) ? className(state) : className;
+		$[18] = className;
+		$[19] = state;
+		$[20] = t3;
+	} else t3 = $[20];
+	let t4;
+	if ($[21] !== state || $[22] !== style) {
+		t4 = isFunction(style) ? style(state) : style;
+		$[21] = state;
+		$[22] = style;
+		$[23] = t4;
+	} else t4 = $[23];
+	let t5;
+	if ($[24] !== render || $[25] !== state) {
+		t5 = isFunction(render) ? (renderProps) => render(renderProps, state) : render;
+		$[24] = render;
+		$[25] = state;
+		$[26] = t5;
+	} else t5 = $[26];
+	let t6;
+	if ($[27] !== getChapterState || $[28] !== renderChapter) {
+		t6 = (segmentProps, segment_0) => {
+			const state_0 = getChapterState(segment_0);
+			const chapterProps = {
+				...segmentProps,
+				...getStateDataAttrs(state_0, TimeSliderChapterDataAttrs),
+				style: {
+					...segmentProps.style,
+					pointerEvents: state_0.cue ? void 0 : "none",
+					[TimeSliderChapterCSSVars.buffer]: `${state_0.bufferPercent}%`
+				}
+			};
+			return renderChapter(chapterProps, state_0);
+		};
+		$[27] = getChapterState;
+		$[28] = renderChapter;
+		$[29] = t6;
+	} else t6 = $[29];
+	let t7;
+	if ($[30] !== max || $[31] !== props || $[32] !== ranges || $[33] !== ref || $[34] !== t3 || $[35] !== t4 || $[36] !== t5 || $[37] !== t6) {
+		t7 = /* @__PURE__ */ jsx(SliderSegments, {
+			ref,
+			...props,
+			className: t3,
+			style: t4,
+			render: t5,
+			ranges,
+			min: 0,
+			max,
+			renderSegment: t6
+		});
+		$[30] = max;
+		$[31] = props;
+		$[32] = ranges;
+		$[33] = ref;
+		$[34] = t3;
+		$[35] = t4;
+		$[36] = t5;
+		$[37] = t6;
+		$[38] = t7;
+	} else t7 = $[38];
+	return t7;
+});
+function _temp() {
+	return new TimeSliderChaptersCore();
+}
+//#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":["() => new TimeSliderChaptersCore()","core.getRanges(textTrack?.chaptersCues ?? [], 0, duration)","chaptersCues","textTrack?.chaptersCues ?? []","useMemo(\n      () => core.getRanges(textTrack?.chaptersCues ?? [], 0, duration),\n      [core, textTrack?.chaptersCues, duration]\n    )","(segment: SliderSegmentState) => core.getState(segment, chapters, bufferedEnd)","{ chapters }","useMemo(() => ({ chapters }), [chapters])","isFunction(className) ? className(state) : className","isFunction(style) ? style(state) : style","isFunction(render) ? (renderProps) => render(renderProps, state) : render","(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        }","state","segment","<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      />"],"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":"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"}

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":""}