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

package/dist/default/ui/status-indicator/root.js

@@ -0,0 +1,35 @@
+import { useTranslator } from "../../i18n/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useInputIndicatorRoot } from "../input-indicator/use-input-indicator-root.js";
+import { StatusIndicatorProvider } from "./context.js";
+import { StatusIndicatorCore, StatusIndicatorDataAttrs, createInputIndicatorLabels } from "@videojs/core";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/status-indicator/root.tsx
+const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(componentProps, forwardedRef) {
+	const { render, className, style, actions, closeDelay, ...elementProps } = componentProps;
+	const translator = useTranslator();
+	const { elementRef, present, state } = useInputIndicatorRoot(() => new StatusIndicatorCore(), {
+		actions,
+		closeDelay,
+		labels: createInputIndicatorLabels(translator)
+	}, { replayOnUpdate: false });
+	if (!present) return null;
+	return /* @__PURE__ */ jsx(StatusIndicatorProvider, {
+		value: { state },
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: StatusIndicatorDataAttrs,
+			ref: [forwardedRef, elementRef],
+			props: [elementProps]
+		})
+	});
+});
+//#endregion
+export { StatusIndicatorRoot };
+
+//# sourceMappingURL=root.js.map

package/dist/default/ui/status-indicator/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/status-indicator/root.tsx"],"sourcesContent":["import { createInputIndicatorLabels, StatusIndicatorCore, StatusIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicator/use-input-indicator-root';\nimport { StatusIndicatorProvider } from './context';\n\nexport interface StatusIndicatorRootProps\n  extends UIComponentProps<'div', StatusIndicatorCore.State>, Omit<StatusIndicatorCore.Props, 'labels'> {}\n\nexport const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(\n  componentProps: StatusIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, actions, closeDelay, ...elementProps } = componentProps;\n  const translator = useTranslator();\n  const { elementRef, present, state } = useInputIndicatorRoot(\n    () => new StatusIndicatorCore(),\n    {\n      actions,\n      closeDelay,\n      labels: createInputIndicatorLabels(translator),\n    },\n    { replayOnUpdate: false }\n  );\n  if (!present) return null;\n\n  return (\n    <StatusIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: StatusIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </StatusIndicatorProvider>\n  );\n});\n\nexport namespace StatusIndicatorRoot {\n  export type Props = StatusIndicatorRootProps;\n  export type State = StatusIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,YAAY,GAAG,iBAAiB;CAC3E,MAAM,aAAa,cAAc;CACjC,MAAM,EAAE,YAAY,SAAS,UAAU,4BAC/B,IAAI,oBAAoB,GAC9B;EACE;EACA;EACA,QAAQ,2BAA2B,UAAU;CAC/C,GACA,EAAE,gBAAgB,MAAM,CAC1B;CACA,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,yBAAD;EAAyB,OAAO,EAAE,MAAM;EACrC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CAAC,YAAY;EACtB,CACF;CACuB,CAAA;AAE7B,CAAC"}

package/dist/default/ui/status-indicator/value.js

@@ -0,0 +1,22 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useStatusIndicatorContext } from "./context.js";
+import { getStatusIndicatorDisplayValue } from "@videojs/core";
+import { forwardRef } from "react";
+//#region src/ui/status-indicator/value.tsx
+const StatusIndicatorValue = forwardRef(function StatusIndicatorValue(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const { state } = useStatusIndicatorContext();
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: forwardedRef,
+		props: [{ children: getStatusIndicatorDisplayValue(state) }, elementProps]
+	});
+});
+//#endregion
+export { StatusIndicatorValue };
+
+//# sourceMappingURL=value.js.map

package/dist/default/ui/status-indicator/value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.js","names":[],"sources":["../../../../src/ui/status-indicator/value.tsx"],"sourcesContent":["import { getStatusIndicatorDisplayValue, type StatusIndicatorCore } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useStatusIndicatorContext } from './context';\n\nexport interface StatusIndicatorValueProps extends UIComponentProps<'span', StatusIndicatorCore.State> {}\n\nexport const StatusIndicatorValue = forwardRef(function StatusIndicatorValue(\n  componentProps: StatusIndicatorValueProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const { state } = useStatusIndicatorContext();\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: forwardedRef,\n      props: [{ children: getStatusIndicatorDisplayValue(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace StatusIndicatorValue {\n  export type Props = StatusIndicatorValueProps;\n}\n"],"mappings":";;;;;AAUA,MAAa,uBAAuB,WAAW,SAAS,qBACtD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,0BAA0B;CAE5C,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,+BAA+B,KAAK,EAAE,GAAG,YAAY;CAC3E,CACF;AACF,CAAC"}

package/dist/default/ui/thumbnail/context.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/thumbnail/context.tsx
+const ThumbnailContext = createContext(null);
+function ThumbnailProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(ThumbnailContext.Provider, {
+		value,
+		children
+	});
+}
+function useThumbnailContext() {
+	const ctx = useContext(ThumbnailContext);
+	if (!ctx) throw new Error("Thumbnail compound components must be used within a Thumbnail.Root");
+	return ctx;
+}
+//#endregion
+export { ThumbnailProvider, useThumbnailContext };
+
+//# sourceMappingURL=context.js.map

package/dist/default/ui/thumbnail/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/thumbnail/context.tsx"],"sourcesContent":["import type { ThumbnailCore, ThumbnailState } from '@videojs/core';\nimport { createContext, type CSSProperties, type ProviderProps, type RefCallback, useContext } from 'react';\n\nexport interface ThumbnailContextValue {\n  core: ThumbnailCore;\n  state: ThumbnailState;\n  src: string | undefined;\n  imageStyle: CSSProperties | undefined;\n  /** CORS mode inherited from the media element, supplied only for `<track>`-sourced thumbnails. */\n  inheritedCrossOrigin: ThumbnailCore.ImageProps['crossOrigin'];\n  /** Attach to the image so the root can track its loading lifecycle. */\n  imageRef: RefCallback<HTMLImageElement>;\n}\n\nconst ThumbnailContext = createContext<ThumbnailContextValue | null>(null);\n\nexport function ThumbnailProvider({ value, children }: ProviderProps<ThumbnailContextValue>) {\n  return <ThumbnailContext.Provider value={value}>{children}</ThumbnailContext.Provider>;\n}\n\nexport function useThumbnailContext(): ThumbnailContextValue {\n  const ctx = useContext(ThumbnailContext);\n  if (!ctx) throw new Error('Thumbnail compound components must be used within a Thumbnail.Root');\n\n  return ctx;\n}\n"],"mappings":";;;AAcA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,SAAgB,kBAAkB,EAAE,OAAO,YAAkD;CAC3F,OAAO,oBAAC,iBAAiB,UAAlB;EAAkC;EAAQ;CAAoC,CAAA;AACvF;AAEA,SAAgB,sBAA6C;CAC3D,MAAM,MAAM,WAAW,gBAAgB;CACvC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,oEAAoE;CAE9F,OAAO;AACT"}

package/dist/default/ui/thumbnail/image.js

@@ -0,0 +1,43 @@
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useThumbnailContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/thumbnail/image.tsx
+/**
+* Displays the image selected and measured by `Thumbnail.Root`.
+*
+* Renders an `img`, so native image attributes and the `render` escape hatch remain available without replacing the
+* root that owns thumbnail state.
+*/
+const ThumbnailImage = forwardRef(function ThumbnailImage(componentProps, forwardedRef) {
+	const { render, className, style, crossOrigin, loading, fetchPriority, ...elementProps } = componentProps;
+	const { core, state, src, imageStyle, inheritedCrossOrigin, imageRef } = useThumbnailContext();
+	const ref = useComposedRefs(forwardedRef, imageRef);
+	return renderElement("img", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref,
+		props: [
+			{
+				alt: "",
+				"aria-hidden": "true",
+				decoding: "async"
+			},
+			elementProps,
+			{
+				src,
+				crossOrigin: core.resolveCrossOrigin(crossOrigin, inheritedCrossOrigin),
+				loading,
+				style: imageStyle,
+				fetchPriority
+			}
+		]
+	});
+});
+//#endregion
+export { ThumbnailImage };
+
+//# sourceMappingURL=image.js.map

package/dist/default/ui/thumbnail/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","names":[],"sources":["../../../../src/ui/thumbnail/image.tsx"],"sourcesContent":["import type { ThumbnailCore, ThumbnailFetchPriority } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useThumbnailContext } from './context';\n\nexport interface ThumbnailImageProps extends Omit<\n  UIComponentProps<'img', ThumbnailCore.State>,\n  'crossOrigin' | 'fetchPriority' | 'loading' | 'src'\n> {\n  /** CORS setting for the selected image. Leave unset to follow the media element, or pass `null` to opt out. */\n  crossOrigin?: ThumbnailCore.ImageProps['crossOrigin'];\n  /** Image loading strategy. */\n  loading?: ThumbnailCore.ImageProps['loading'];\n  /** Image fetch priority hint. */\n  fetchPriority?: ThumbnailCore.ImageProps['fetchPriority'];\n}\n\n/**\n * Displays the image selected and measured by `Thumbnail.Root`.\n *\n * Renders an `img`, so native image attributes and the `render` escape hatch remain available without replacing the\n * root that owns thumbnail state.\n */\nexport const ThumbnailImage = forwardRef(function ThumbnailImage(\n  componentProps: ThumbnailImageProps,\n  forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n  const { render, className, style, crossOrigin, loading, fetchPriority, ...elementProps } = componentProps;\n  const { core, state, src, imageStyle, inheritedCrossOrigin, imageRef } = useThumbnailContext();\n\n  // One stable callback, so React does not detach and reattach the image on every render\n  // and the root only hears about mounts, unmounts, and `render` swaps.\n  const ref = useComposedRefs(forwardedRef, imageRef);\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state,\n      ref,\n      props: [\n        { alt: '', 'aria-hidden': 'true', decoding: 'async' },\n        elementProps,\n        {\n          src,\n          crossOrigin: core.resolveCrossOrigin(crossOrigin, inheritedCrossOrigin),\n          loading,\n          style: imageStyle,\n          // SAFETY: The core and React types contain the same fetch-priority literals; React alone omits `undefined`.\n          fetchPriority: fetchPriority as ThumbnailFetchPriority,\n        },\n      ],\n    }\n  );\n});\n\nexport namespace ThumbnailImage {\n  export type Props = ThumbnailImageProps;\n}\n"],"mappings":";;;;;;;;;;;AA2BA,MAAa,iBAAiB,WAAW,SAAS,eAChD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,aAAa,SAAS,eAAe,GAAG,iBAAiB;CAC3F,MAAM,EAAE,MAAM,OAAO,KAAK,YAAY,sBAAsB,aAAa,oBAAoB;CAI7F,MAAM,MAAM,gBAAgB,cAAc,QAAQ;CAElD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,OAAO;GACL;IAAE,KAAK;IAAI,eAAe;IAAQ,UAAU;GAAQ;GACpD;GACA;IACE;IACA,aAAa,KAAK,mBAAmB,aAAa,oBAAoB;IACtE;IACA,OAAO;IAEQ;GACjB;EACF;CACF,CACF;AACF,CAAC"}

package/dist/default/ui/thumbnail/index.js

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

package/dist/default/ui/thumbnail/index.parts.js

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { ThumbnailImage } from "./image.js";
+import { ThumbnailRoot } from "./root.js";
+//#region src/ui/thumbnail/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Image: () => ThumbnailImage,
+	Root: () => ThumbnailRoot
+});
+//#endregion
+export { ThumbnailImage as Image, ThumbnailRoot as Root, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/default/ui/thumbnail/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/thumbnail/index.parts.ts"],"sourcesContent":["export { ThumbnailImage as Image, type ThumbnailImageProps as ImageProps } from './image';\nexport { ThumbnailRoot as Root, type ThumbnailRootProps as RootProps } from './root';\n"],"mappings":""}

package/dist/default/ui/thumbnail/root.js

@@ -0,0 +1,93 @@
+import { useOptionalPlayer } from "../../player/context.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { renderElement } from "../../utils/use-render.js";
+import { ThumbnailProvider } from "./context.js";
+import { ThumbnailCore, ThumbnailDataAttrs, mapCuesToThumbnails } from "@videojs/core";
+import { createThumbnail, selectTextTrack } from "@videojs/core/dom";
+import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/thumbnail/root.tsx
+/**
+* Resolves, sizes, and clips a thumbnail for a point in time.
+*
+* Renders a `div` and exposes `data-hidden`, `data-loading`, and `data-error` for styling every layer in the preview.
+* Render `Thumbnail.Image` inside it for the image the root controls and measures.
+*/
+const ThumbnailRoot = forwardRef(function ThumbnailRoot(componentProps, forwardedRef) {
+	const { render, className, style, time = 0, thumbnails: externalThumbnails, ...elementProps } = componentProps;
+	const [core] = useState(() => new ThumbnailCore());
+	const divRef = useRef(null);
+	const imgRef = useRef(null);
+	const textTrack = useOptionalPlayer(selectTextTrack);
+	const [, setRenderToken] = useState(0);
+	const [handle] = useState(() => createThumbnail({
+		getContainer: () => divRef.current,
+		getImg: () => imgRef.current,
+		onStateChange: () => setRenderToken((token) => token + 1)
+	}));
+	useDestroy(handle, () => handle.connect());
+	const imageRef = useCallback((img) => {
+		const previous = imgRef.current;
+		imgRef.current = img;
+		if (img) handle.connect();
+		else if (previous) handle.disconnectImg(previous);
+	}, [handle]);
+	const thumbnails = useMemo(() => {
+		if (externalThumbnails && externalThumbnails.length > 0) return externalThumbnails;
+		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
+	]);
+	handle.updateSrc(thumbnail?.url);
+	const state = core.getState(handle.loading, handle.error, thumbnail);
+	let containerStyle = { overflow: "hidden" };
+	let imageStyle;
+	if (thumbnail && handle.naturalWidth && handle.naturalHeight) {
+		const constraints = handle.readConstraints();
+		const result = core.resize(thumbnail, handle.naturalWidth, handle.naturalHeight, constraints);
+		if (result) {
+			containerStyle = {
+				overflow: "hidden",
+				width: result.containerWidth,
+				height: result.containerHeight
+			};
+			imageStyle = {
+				width: result.imageWidth,
+				height: result.imageHeight,
+				maxWidth: "none",
+				transform: result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : void 0
+			};
+		}
+	}
+	return /* @__PURE__ */ jsx(ThumbnailProvider, {
+		value: {
+			core,
+			state,
+			src: thumbnail?.url,
+			imageStyle,
+			inheritedCrossOrigin: externalThumbnails?.length ? void 0 : textTrack?.thumbnailTrackCrossOrigin,
+			imageRef
+		},
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: ThumbnailDataAttrs,
+			ref: [forwardedRef, divRef],
+			props: [
+				core.getAttrs(state),
+				{ style: containerStyle },
+				elementProps
+			]
+		})
+	});
+});
+//#endregion
+export { ThumbnailRoot };
+
+//# sourceMappingURL=root.js.map

package/dist/default/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, 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  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  // 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;CACA,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,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/default/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/default/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,CAAI;EACJ,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY;CACpC,CACF;AACF,CAAC"}

package/dist/default/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/default/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/default/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/default/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,CAAI;EACJ,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC;GAAE,eAAe;GAAQ;EAAS,GAAG,YAAY;CAC3D,CACF;AACF,CAAC"}

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

@@ -0,0 +1,100 @@
+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 { 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) 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/default/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,MAGH,OAAO;CAGT,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/default/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/default/ui/time-slider/chapter-title.js.map

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

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

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

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

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