@videojs/react 10.0.0-beta.3 → 10.0.0-beta.31

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

@@ -1,14 +1,27 @@
-'use client';
-
 import { useOptionalPlayer } from "../../player/context.js";
 import { useDestroy } from "../../utils/use-destroy.js";
 import { renderElement } from "../../utils/use-render.js";
 import { createThumbnail, selectTextTrack } from "@videojs/core/dom";
 import { forwardRef, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { isNull, isUndefined } from "@videojs/utils/predicate";
 import { ThumbnailCore, ThumbnailDataAttrs, mapCuesToThumbnails } from "@videojs/core";
-
 //#region src/ui/thumbnail/thumbnail.tsx
+/**
+* Leaving `crossOrigin` unset means "follow the media element", so thumbnails
+* keep working on a CORS-enabled player without a skin having to thread a prop
+* through. `null` opts out and fetches the sprites no-CORS. `''` is passed
+* straight through, since the CORS-settings attribute reads it as Anonymous.
+*
+* Only the `<track>` path inherits: `thumbnails` passed directly may point at a
+* host that has nothing to do with the media element.
+*/
+function resolveCrossOrigin(explicit, external, inherited) {
+	if (isNull(explicit)) return void 0;
+	if (!isUndefined(explicit)) return explicit;
+	if (external?.length) return void 0;
+	return inherited ?? void 0;
+}
 const Thumbnail = forwardRef(function Thumbnail(componentProps, forwardedRef) {
 	const { render, className, style, time = 0, thumbnails: externalThumbnails, crossOrigin, loading, fetchPriority, ...elementProps } = componentProps;
 	const [core] = useState(() => new ThumbnailCore());
@@ -24,14 +37,14 @@ const Thumbnail = forwardRef(function Thumbnail(componentProps, forwardedRef) {
 	useDestroy(handle, () => handle.connect());
 	const thumbnails = useMemo(() => {
 		if (externalThumbnails && externalThumbnails.length > 0) return externalThumbnails;
-		if (!textTrack?.thumbnailCues.length) return [];
-		return mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? void 0);
+		return textTrack && textTrack.thumbnailCues.length > 0 ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? void 0) : [];
 	}, [externalThumbnails, textTrack]);
 	const thumbnail = useMemo(() => core.findActiveThumbnail(thumbnails, time), [
 		core,
 		thumbnails,
 		time
 	]);
+	const resolvedCrossOrigin = resolveCrossOrigin(crossOrigin, externalThumbnails, textTrack?.thumbnailTrackCrossOrigin);
 	handle.updateSrc(thumbnail?.url);
 	const state = core.getState(handle.loading, handle.error, thumbnail);
 	let containerStyle = { overflow: "hidden" };
@@ -71,7 +84,7 @@ const Thumbnail = forwardRef(function Thumbnail(componentProps, forwardedRef) {
 				"aria-hidden": "true",
 				decoding: "async",
 				src: thumbnail?.url,
-				crossOrigin: crossOrigin === "" || crossOrigin === null ? void 0 : crossOrigin,
+				crossOrigin: resolvedCrossOrigin,
 				loading,
 				style: imgStyle,
 				fetchPriority
@@ -79,7 +92,7 @@ const Thumbnail = forwardRef(function Thumbnail(componentProps, forwardedRef) {
 		]
 	});
 });
-
 //#endregion
 export { Thumbnail };
+
 //# sourceMappingURL=thumbnail.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.js","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"sourcesContent":["'use client';\n\nimport {\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailFetchPriority,\n  type ThumbnailImage,\n} from '@videojs/core';\nimport { createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, 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';\n\nexport interface ThumbnailProps extends UIComponentProps<'div', ThumbnailCore.State>, ThumbnailCore.Props {\n  /** Pre-parsed thumbnail images — bypasses the automatic `<track>` detection. */\n  thumbnails?: ThumbnailImage[] | undefined;\n}\n\nexport const Thumbnail = forwardRef<HTMLDivElement, ThumbnailProps>(function Thumbnail(componentProps, forwardedRef) {\n  const {\n    render,\n    className,\n    style,\n    time = 0,\n    thumbnails: externalThumbnails,\n    crossOrigin,\n    loading,\n    fetchPriority,\n    ...elementProps\n  } = 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  // Force re-render when the handle's state changes (img load/error, resize).\n  const [, setRenderToken] = useState(0);\n\n  const [handle] = useState(() =>\n    createThumbnail({\n      getContainer: () => divRef.current,\n      getImg: () => imgRef.current,\n      onStateChange: () => setRenderToken((n) => n + 1),\n    })\n  );\n\n  useDestroy(handle, () => handle.connect());\n\n  // Resolve thumbnails: external prop takes priority over auto <track> path.\n  const thumbnails = useMemo(() => {\n    if (externalThumbnails && externalThumbnails.length > 0) return externalThumbnails;\n    if (!textTrack?.thumbnailCues.length) return [];\n    return mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined);\n  }, [externalThumbnails, textTrack]);\n\n  const thumbnail = useMemo(() => core.findActiveThumbnail(thumbnails, time), [core, thumbnails, time]);\n\n  // Track src changes via the handle.\n  handle.updateSrc(thumbnail?.url);\n\n  const state = core.getState(handle.loading, handle.error, thumbnail);\n\n  // Compute styles declaratively from resize result.\n  let containerStyle: CSSProperties = { overflow: 'hidden' };\n  let imgStyle: 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      imgStyle = {\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 renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: ThumbnailDataAttrs,\n      ref: [forwardedRef, divRef],\n      props: [\n        core.getAttrs(state),\n        { style: containerStyle },\n        elementProps,\n        {\n          children: (\n            <img\n              ref={imgRef}\n              alt=\"\"\n              aria-hidden=\"true\"\n              decoding=\"async\"\n              src={thumbnail?.url}\n              crossOrigin={crossOrigin === '' || crossOrigin === null ? undefined : crossOrigin}\n              loading={loading}\n              style={imgStyle}\n              // React's types omit `| undefined` from fetchPriority — cast to satisfy exactOptionalPropertyTypes.\n              fetchPriority={fetchPriority as ThumbnailFetchPriority}\n            />\n          ),\n        },\n      ],\n    }\n  );\n});\n\nexport namespace Thumbnail {\n  export type Props = ThumbnailProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;;;;AAuBA,MAAa,YAAY,WAA2C,SAAS,UAAU,gBAAgB,cAAc;CACnH,MAAM,EACJ,QACA,WACA,OACA,OAAO,GACP,YAAY,oBACZ,aACA,SACA,eACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAClD,MAAM,SAAS,OAAuB,KAAK;CAC3C,MAAM,SAAS,OAAyB,KAAK;CAC7C,MAAM,YAAY,kBAAkB,gBAAgB;CAGpD,MAAM,GAAG,kBAAkB,SAAS,EAAE;CAEtC,MAAM,CAAC,UAAU,eACf,gBAAgB;EACd,oBAAoB,OAAO;EAC3B,cAAc,OAAO;EACrB,qBAAqB,gBAAgB,MAAM,IAAI,EAAE;EAClD,CAAC,CACH;AAED,YAAW,cAAc,OAAO,SAAS,CAAC;CAG1C,MAAM,aAAa,cAAc;AAC/B,MAAI,sBAAsB,mBAAmB,SAAS,EAAG,QAAO;AAChE,MAAI,CAAC,WAAW,cAAc,OAAQ,QAAO,EAAE;AAC/C,SAAO,oBAAoB,UAAU,eAAe,UAAU,qBAAqB,OAAU;IAC5F,CAAC,oBAAoB,UAAU,CAAC;CAEnC,MAAM,YAAY,cAAc,KAAK,oBAAoB,YAAY,KAAK,EAAE;EAAC;EAAM;EAAY;EAAK,CAAC;AAGrG,QAAO,UAAU,WAAW,IAAI;CAEhC,MAAM,QAAQ,KAAK,SAAS,OAAO,SAAS,OAAO,OAAO,UAAU;CAGpE,IAAI,iBAAgC,EAAE,UAAU,UAAU;CAC1D,IAAI;AAEJ,KAAI,aAAa,OAAO,gBAAgB,OAAO,eAAe;EAC5D,MAAM,cAAc,OAAO,iBAAiB;EAC5C,MAAM,SAAS,KAAK,OAAO,WAAW,OAAO,cAAc,OAAO,eAAe,YAAY;AAE7F,MAAI,QAAQ;AACV,oBAAiB;IACf,UAAU;IACV,OAAO,OAAO;IACd,QAAQ,OAAO;IAChB;AACD,cAAW;IACT,OAAO,OAAO;IACd,QAAQ,OAAO;IACf,UAAU;IACV,WACE,OAAO,WAAW,OAAO,UAAU,cAAc,OAAO,QAAQ,OAAO,OAAO,QAAQ,OAAO;IAChG;;;AAIL,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,OAAO;EAC3B,OAAO;GACL,KAAK,SAAS,MAAM;GACpB,EAAE,OAAO,gBAAgB;GACzB;GACA,EACE,UACE,oBAAC;IACC,KAAK;IACL,KAAI;IACJ,eAAY;IACZ,UAAS;IACT,KAAK,WAAW;IAChB,aAAa,gBAAgB,MAAM,gBAAgB,OAAO,SAAY;IAC7D;IACT,OAAO;IAEQ;KACf,EAEL;GACF;EACF,CACF;EACD"}
+{"version":3,"file":"thumbnail.js","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"sourcesContent":["import {\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailFetchPriority,\n  type ThumbnailImage,\n} from '@videojs/core';\nimport { createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { MediaTextTrackState } from '@videojs/media';\nimport { isNull, isUndefined } from '@videojs/utils/predicate';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, 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';\n\nexport interface ThumbnailProps extends UIComponentProps<'div', ThumbnailCore.State>, ThumbnailCore.Props {\n  /** Pre-parsed thumbnail images — bypasses the automatic `<track>` detection. */\n  thumbnails?: ThumbnailImage[] | undefined;\n}\n\n/**\n * Leaving `crossOrigin` unset means \"follow the media element\", so thumbnails\n * keep working on a CORS-enabled player without a skin having to thread a prop\n * through. `null` opts out and fetches the sprites no-CORS. `''` is passed\n * straight through, since the CORS-settings attribute reads it as Anonymous.\n *\n * Only the `<track>` path inherits: `thumbnails` passed directly may point at a\n * host that has nothing to do with the media element.\n */\nfunction resolveCrossOrigin(\n  explicit: ThumbnailCore.Props['crossOrigin'],\n  external: ThumbnailImage[] | undefined,\n  inherited: MediaTextTrackState['thumbnailTrackCrossOrigin'] | undefined\n) {\n  if (isNull(explicit)) return undefined;\n  if (!isUndefined(explicit)) return explicit;\n  if (external?.length) return undefined;\n\n  return inherited ?? undefined;\n}\n\nexport const Thumbnail = forwardRef<HTMLDivElement, ThumbnailProps>(function Thumbnail(componentProps, forwardedRef) {\n  const {\n    render,\n    className,\n    style,\n    time = 0,\n    thumbnails: externalThumbnails,\n    crossOrigin,\n    loading,\n    fetchPriority,\n    ...elementProps\n  } = 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  // Force re-render when the handle's state changes (img load/error, resize).\n  const [, setRenderToken] = useState(0);\n\n  const [handle] = useState(() =>\n    createThumbnail({\n      getContainer: () => divRef.current,\n      getImg: () => imgRef.current,\n      onStateChange: () => setRenderToken((n) => n + 1),\n    })\n  );\n\n  useDestroy(handle, () => handle.connect());\n\n  // Resolve thumbnails: external prop takes priority over auto <track> path.\n  const thumbnails = useMemo(() => {\n    if (externalThumbnails && externalThumbnails.length > 0) return externalThumbnails;\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  const resolvedCrossOrigin = resolveCrossOrigin(crossOrigin, externalThumbnails, textTrack?.thumbnailTrackCrossOrigin);\n\n  // Track src changes via the handle.\n  handle.updateSrc(thumbnail?.url);\n\n  const state = core.getState(handle.loading, handle.error, thumbnail);\n\n  // Compute styles declaratively from resize result.\n  let containerStyle: CSSProperties = { overflow: 'hidden' };\n  let imgStyle: 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      imgStyle = {\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 renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: ThumbnailDataAttrs,\n      ref: [forwardedRef, divRef],\n      props: [\n        core.getAttrs(state),\n        { style: containerStyle },\n        elementProps,\n        {\n          children: (\n            <img\n              ref={imgRef}\n              alt=\"\"\n              aria-hidden=\"true\"\n              decoding=\"async\"\n              src={thumbnail?.url}\n              crossOrigin={resolvedCrossOrigin}\n              loading={loading}\n              style={imgStyle}\n              // React's types omit `| undefined` from fetchPriority — cast to satisfy exactOptionalPropertyTypes.\n              fetchPriority={fetchPriority as ThumbnailFetchPriority}\n            />\n          ),\n        },\n      ],\n    }\n  );\n});\n\nexport namespace Thumbnail {\n  export type Props = ThumbnailProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgCA,SAAS,mBACP,UACA,UACA,WACA;CACA,IAAI,OAAO,QAAQ,GAAG,OAAO,KAAA;CAC7B,IAAI,CAAC,YAAY,QAAQ,GAAG,OAAO;CACnC,IAAI,UAAU,QAAQ,OAAO,KAAA;CAE7B,OAAO,aAAa,KAAA;AACtB;AAEA,MAAa,YAAY,WAA2C,SAAS,UAAU,gBAAgB,cAAc;CACnH,MAAM,EACJ,QACA,WACA,OACA,OAAO,GACP,YAAY,oBACZ,aACA,SACA,eACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,cAAc,CAAC;CACjD,MAAM,SAAS,OAAuB,IAAI;CAC1C,MAAM,SAAS,OAAyB,IAAI;CAC5C,MAAM,YAAY,kBAAkB,eAAe;CAGnD,MAAM,GAAG,kBAAkB,SAAS,CAAC;CAErC,MAAM,CAAC,UAAU,eACf,gBAAgB;EACd,oBAAoB,OAAO;EAC3B,cAAc,OAAO;EACrB,qBAAqB,gBAAgB,MAAM,IAAI,CAAC;CAClD,CAAC,CACH;CAEA,WAAW,cAAc,OAAO,QAAQ,CAAC;CAGzC,MAAM,aAAa,cAAc;EAC/B,IAAI,sBAAsB,mBAAmB,SAAS,GAAG,OAAO;EAChE,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,MAAM,sBAAsB,mBAAmB,aAAa,oBAAoB,WAAW,yBAAyB;CAGpH,OAAO,UAAU,WAAW,GAAG;CAE/B,MAAM,QAAQ,KAAK,SAAS,OAAO,SAAS,OAAO,OAAO,SAAS;CAGnE,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,WAAW;IACT,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,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,MAAM;EAC1B,OAAO;GACL,KAAK,SAAS,KAAK;GACnB,EAAE,OAAO,eAAe;GACxB;GACA,EACE,UACE,oBAAC,OAAD;IACE,KAAK;IACL,KAAI;IACJ,eAAY;IACZ,UAAS;IACT,KAAK,WAAW;IAChB,aAAa;IACJ;IACT,OAAO;IAEQ;GAChB,CAAA,EAEL;EACF;CACF,CACF;AACF,CAAC"}

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

@@ -1,3 +1,2 @@
 import { index_parts_exports } from "./index.parts.js";
-
-export { index_parts_exports as Time };
+export { index_parts_exports as Time };

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

@@ -1,11 +1,9 @@
 import { Group, GroupProps } from "./time-group.js";
 import { Separator, SeparatorProps } from "./time-separator.js";
 import { Value, ValueProps } from "./time-value.js";
-
-//#region src/ui/time/index.parts.d.ts
 declare namespace index_parts_d_exports {
   export { Group, GroupProps, Separator, SeparatorProps, Value, ValueProps };
 }
 //#endregion
-export { index_parts_d_exports };
+export { Group, type GroupProps, Separator, type SeparatorProps, Value, type ValueProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

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

@@ -2,14 +2,13 @@ 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";
-
 //#region src/ui/time/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Group: () => Group,
 	Separator: () => Separator,
 	Value: () => Value
 });
-
 //#endregion
-export { index_parts_exports };
+export { Group, Separator, Value, index_parts_exports };
+
 //# sourceMappingURL=index.parts.js.map

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

@@ -1,7 +1,5 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
 import { ReactNode } from "react";
-
 //#region src/ui/time/time-group.d.ts
 type GroupState = Record<string, never>;
 interface GroupProps extends UIComponentProps<'span', GroupState> {
@@ -20,7 +18,7 @@ interface GroupProps extends UIComponentProps<'span', GroupState> {
  * </Time.Group>
  * ```
  */
-declare const Group: react.ForwardRefExoticComponent<Omit<GroupProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+declare const Group: import("react").ForwardRefExoticComponent<Omit<GroupProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare namespace Group {
   type Props = GroupProps;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"time-group.d.ts","names":[],"sources":["../../../../src/ui/time/time-group.tsx"],"mappings":";;;;;KASK,UAAA,GAAa,MAAA;AAAA,UAED,UAAA,SAAmB,gBAAA,SAAyB,UAAA;;EAE3D,QAAA,GAAW,SAAA;AAAA;;;;AAFb;;;;;;;;;cAiBa,KAAA,EAAK,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,UAAA,WAAA,KAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBAmBD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;AAAA"}
+{"version":3,"file":"time-group.d.ts","names":[],"sources":["../../../../src/ui/time/time-group.tsx"],"mappings":";;;KAOK,aAAa;UAED,mBAAmB,yBAAyB;;EAE3D,WAAW;;;;;;;;;;;;;;cAeA,uBAAK,0BAAA,KAAA,qCAAA,cAAA;kBAmBD;OACH,QAAQ"}

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

@@ -1,8 +1,5 @@
-'use client';
-
 import { renderElement } from "../../utils/use-render.js";
 import { forwardRef } from "react";
-
 //#region src/ui/time/time-group.tsx
 /**
 * Container for composed time displays. Renders a `<span>` element.
@@ -28,7 +25,7 @@ const Group = forwardRef(function Group(componentProps, forwardedRef) {
 		props: [{ children }, elementProps]
 	});
 });
-
 //#endregion
 export { Group };
+
 //# sourceMappingURL=time-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"time-group.js","names":[],"sources":["../../../../src/ui/time/time-group.tsx"],"sourcesContent":["'use client';\n\nimport 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":";;;;;;;;;;;;;;;;;;AA4BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;AAIhE,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OANsB,EAAE;EAOxB,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,EAAE,UAAU,EAAE,aAAa;EACpC,CACF;EACD"}
+{"version":3,"file":"time-group.js","names":[],"sources":["../../../../src/ui/time/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,CAAI;EACJ,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY;CACpC,CACF;AACF,CAAC"}

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

@@ -1,7 +1,5 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
 import { ReactNode } from "react";
-
 //#region src/ui/time/time-separator.d.ts
 type SeparatorState = Record<string, never>;
 interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {
@@ -17,7 +15,7 @@ interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {
  * <Time.Separator> of </Time.Separator>
  * ```
  */
-declare const Separator: react.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+declare const Separator: import("react").ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare namespace Separator {
   type Props = SeparatorProps;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"time-separator.d.ts","names":[],"sources":["../../../../src/ui/time/time-separator.tsx"],"mappings":";;;;;KASK,cAAA,GAAiB,MAAA;AAAA,UAEL,cAAA,SAAuB,gBAAA,SAAyB,cAAA;;EAE/D,QAAA,GAAW,SAAA;AAAA;;;;AAFb;;;;;;cAca,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,cAAA,WAAA,KAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBAmBL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;AAAA"}
+{"version":3,"file":"time-separator.d.ts","names":[],"sources":["../../../../src/ui/time/time-separator.tsx"],"mappings":";;;KAOK,iBAAiB;UAEL,uBAAuB,yBAAyB;;EAE/D,WAAW;;;;;;;;;;;cAYA,2BAAS,0BAAA,KAAA,yCAAA,cAAA;kBAmBL;OACH,QAAQ"}

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

@@ -1,8 +1,5 @@
-'use client';
-
 import { renderElement } from "../../utils/use-render.js";
 import { forwardRef } from "react";
-
 //#region src/ui/time/time-separator.tsx
 /**
 * Divider between time values. Hidden from screen readers.
@@ -28,7 +25,7 @@ const Separator = forwardRef(function Separator(componentProps, forwardedRef) {
 		}, elementProps]
 	});
 });
-
 //#endregion
 export { Separator };
+
 //# sourceMappingURL=time-separator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"time-separator.js","names":[],"sources":["../../../../src/ui/time/time-separator.tsx"],"sourcesContent":["'use client';\n\nimport 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":";;;;;;;;;;;;;;;AAyBA,MAAa,YAAY,WAAW,SAAS,UAC3C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,KAAK,GAAG,iBAAiB;AAItE,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAN0B,EAAE;EAO5B,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE,eAAe;GAAQ;GAAU,EAAE,aAAa;EAC3D,CACF;EACD"}
+{"version":3,"file":"time-separator.js","names":[],"sources":["../../../../src/ui/time/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,CAAI;EACJ,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC;GAAE,eAAe;GAAQ;EAAS,GAAG,YAAY;CAC3D,CACF;AACF,CAAC"}

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

@@ -1,7 +1,5 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
 import { TimeCore } from "@videojs/core";
-
 //#region src/ui/time/time-value.d.ts
 interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}
 /**
@@ -14,7 +12,7 @@ interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'chi
  * <Time.Value type="remaining" negativeSign="−" />
  * ```
  */
-declare const Value: react.ForwardRefExoticComponent<Omit<ValueProps, "ref"> & react.RefAttributes<HTMLTimeElement>>;
+declare const Value: import("react").ForwardRefExoticComponent<Omit<ValueProps, "ref"> & import("react").RefAttributes<HTMLTimeElement>>;
 declare namespace Value {
   type Props = ValueProps;
   type State = TimeCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"time-value.d.ts","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"mappings":";;;;;UAWiB,UAAA,SAAmB,IAAA,CAAK,gBAAA,SAAyB,QAAA,CAAS,KAAA,gBAAqB,QAAA,CAAS,KAAA;;AAAzG;;;;;;;;;cAYa,KAAA,EAAK,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,UAAA,WAAA,KAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBA+CD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;EAAA,KACR,KAAA,GAAQ,QAAA,CAAS,KAAA;AAAA"}
+{"version":3,"file":"time-value.d.ts","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"mappings":";;;UAciB,mBAAmB,KAAK,yBAAyB,SAAS,qBAAqB,SAAS;;;;;;;;;;;cAY5F,uBAAK,0BAAA,KAAA,qCAAA,cAAA;kBAwGD;OACH,QAAQ;OACR,QAAQ,SAAS"}

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

@@ -1,12 +1,14 @@
-'use client';
-
+import { useLocale, useTranslator } from "../../i18n/context.js";
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { logMissingFeature, selectTime } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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 { TimeCore, TimeDataAttrs } from "@videojs/core";
-
+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).
@@ -19,24 +21,57 @@ import { TimeCore, TimeDataAttrs } from "@videojs/core";
 * ```
 */
 const Value = forwardRef(function Value(componentProps, forwardedRef) {
-	const { render, className, style, type, negativeSign, label, ...elementProps } = componentProps;
+	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,
+		type: activeType,
 		negativeSign,
-		label
+		label,
+		toggle
 	});
 	if (!time) {
 		logMissingFeature("Time.Value", "time");
 		return null;
 	}
 	core.setMedia(time);
+	core.setFormatLocale(locale);
 	const state = core.getState();
-	const content = state.negative ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+	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,
@@ -46,13 +81,19 @@ const Value = forwardRef(function Value(componentProps, forwardedRef) {
 		stateAttrMap: TimeDataAttrs,
 		ref: [forwardedRef],
 		props: [{
-			dateTime: state.datetime,
+			dateTime: toggle ? void 0 : state.datetime,
 			children: content,
-			...core.getAttrs(state)
+			...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 +1 @@
-{"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["'use client';\n\nimport { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } 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 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, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n\n  const [core] = useState(() => new TimeCore());\n  core.setProps({ type, negativeSign, label });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('Time.Value', 'time');\n    return null;\n  }\n\n  core.setMedia(time);\n  const state = core.getState();\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  return renderElement(\n    'time',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TimeDataAttrs,\n      ref: [forwardedRef],\n      props: [\n        {\n          dateTime: state.datetime,\n          children: content,\n          ...core.getAttrs(state),\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":";;;;;;;;;;;;;;;;;;;;AAuBA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,OAAO,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,WAAW;CAElC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;AAC7C,MAAK,SAAS;EAAE;EAAM;EAAc;EAAO,CAAC;AAE5C,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,MAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,UAAU;CAE7B,MAAM,UAAU,MAAM,WACpB,4CACE,oBAAC;EAAK,eAAY;YAAQ,gBAAgB,SAAS,aAAa;GAAoB,EACnF,MAAM,QACN,GAEH,MAAM;AAGR,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CACL;GACE,UAAU,MAAM;GAChB,UAAU;GACV,GAAG,KAAK,SAAS,MAAM;GACxB,EACD,aACD;EACF,CACF;EACD"}
+{"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  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to listen for changes to defaultType and toggle (so we revert to default), this just means one less useEffect.\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    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      return value === 'duration' ? 'remaining' : 'duration';\n    });\n  };\n\n  const handleClick = (event: MouseEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented) return;\n    toggleType();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented || !isInteractiveActivation(event.nativeEvent)) return;\n    // Prevent space from scrolling page.\n    event.preventDefault();\n    if (event.repeat) return;\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;CAExD,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;EACnD,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;GAE7C,OAAO,UAAU,aAAa,cAAc;EAC9C,CAAC;CACH;CAEA,MAAM,eAAe,UAAuC;EAC1D,IAAI,MAAM,kBAAkB;EAC5B,WAAW;CACb;CAEA,MAAM,iBAAiB,UAA0C;EAC/D,IAAI,MAAM,oBAAoB,CAAC,wBAAwB,MAAM,WAAW,GAAG;EAE3E,MAAM,eAAe;EACrB,IAAI,MAAM,QAAQ;EAClB,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/index.js

@@ -1,3 +1,2 @@
 import { index_parts_exports } from "./index.parts.js";
-
-export { index_parts_exports as TimeSlider };
+export { index_parts_exports as TimeSlider };

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

@@ -4,12 +4,13 @@ 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 "../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";
-
-//#region src/ui/time-slider/index.parts.d.ts
 declare namespace index_parts_d_exports {
-  export { SliderBuffer as Buffer, SliderBufferProps as BufferProps, 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 };
+  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 };
 }
 //#endregion
-export { index_parts_d_exports };
+export { SliderBuffer as Buffer, type SliderBufferProps as BufferProps, TimeSliderChapterTitle as ChapterTitle, type TimeSliderChapterTitleProps as ChapterTitleProps, TimeSliderChapters as Chapters, type TimeSliderChaptersProps as ChaptersProps, SliderFill as Fill, type SliderFillProps as FillProps, SliderPreview as Preview, type SliderPreviewProps as PreviewProps, TimeSliderRoot as Root, type TimeSliderRootProps as RootProps, SliderThumb as Thumb, type SliderThumbProps as ThumbProps, SliderTrack as Track, type SliderTrackProps as TrackProps, SliderValue as Value, type SliderValueProps as ValueProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

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

@@ -5,11 +5,14 @@ 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";
-
 //#region src/ui/time-slider/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Buffer: () => SliderBuffer,
+	ChapterTitle: () => TimeSliderChapterTitle,
+	Chapters: () => TimeSliderChapters,
 	Fill: () => SliderFill,
 	Preview: () => SliderPreview,
 	Root: () => TimeSliderRoot,
@@ -17,7 +20,7 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Track: () => SliderTrack,
 	Value: () => SliderValue
 });
-
 //#endregion
-export { index_parts_exports };
+export { SliderBuffer as Buffer, TimeSliderChapterTitle as ChapterTitle, TimeSliderChapters as Chapters, SliderFill as Fill, SliderPreview as Preview, TimeSliderRoot as Root, SliderThumb as Thumb, SliderTrack as Track, SliderValue as Value, index_parts_exports };
+
 //# sourceMappingURL=index.parts.js.map

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 { 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 './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":""}

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

@@ -0,0 +1,60 @@
+import { renderElement } from "../../../utils/use-render.js";
+import { useSliderContext, useSliderPointerValue } from "../../slider/context.js";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { Fragment, forwardRef, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { SliderSegmentsCore, TimeSliderChapterCSSVars } from "@videojs/core";
+//#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

@@ -0,0 +1 @@
+{"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    const slider = useSliderContext();\n    const pointerValue = useSliderPointerValue();\n    const [core] = useState(() => new SliderSegmentsCore());\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;CACvF,MAAM,SAAS,iBAAiB;CAChC,MAAM,eAAe,sBAAsB;CAC3C,MAAM,CAAC,QAAQ,eAAe,IAAI,mBAAmB,CAAC;CACtD,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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -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 { selectTextTrack, selectTime } from "@videojs/core/dom";
+import { forwardRef, useMemo, useState } from "react";
+import { TimeSliderChaptersCore } from "@videojs/core";
+//#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

@@ -0,0 +1 @@
+{"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"}