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

package/dist/default/ui/slider/slider-track.js

@@ -1,13 +0,0 @@
-import { createContextPart } from "../create-context-part.js";
-import { useSliderContext } from "./context.js";
-//#region src/ui/slider/slider-track.tsx
-/** Contains the slider's visual track and interactive hit zone. */
-const SliderTrack = createContextPart({
-	displayName: "SliderTrack",
-	tag: "div",
-	useContext: useSliderContext
-});
-//#endregion
-export { SliderTrack };
-
-//# sourceMappingURL=slider-track.js.map

package/dist/default/ui/slider/slider-track.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"slider-track.js","names":[],"sources":["../../../../src/ui/slider/slider-track.tsx"],"sourcesContent":["import type { SliderState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useSliderContext } from './context';\n\nexport interface SliderTrackProps extends UIComponentProps<'div', SliderState> {}\n\n/** Contains the slider's visual track and interactive hit zone. */\nexport const SliderTrack = createContextPart<SliderTrackProps, SliderState>({\n  displayName: 'SliderTrack',\n  tag: 'div',\n  useContext: useSliderContext,\n});\n\nexport namespace SliderTrack {\n  export type Props = SliderTrackProps;\n}\n"],"mappings":";;;;AASA,MAAa,cAAc,kBAAiD;CAC1E,aAAa;CACb,KAAK;CACL,YAAY;AACd,CAAC"}

package/dist/default/ui/slider/slider-value.js

@@ -1,30 +0,0 @@
-import { renderElement } from "../../utils/use-render.js";
-import { useSliderContext, useSliderPointerValue } from "./context.js";
-import { forwardRef } from "react";
-//#region src/ui/slider/slider-value.tsx
-/** Displays a formatted text representation of the slider value. Renders an `<output>` element. */
-const SliderValue = forwardRef(function SliderValue(componentProps, forwardedRef) {
-	const { render, className, style, type = "current", format, ...elementProps } = componentProps;
-	const context = useSliderContext();
-	const { state, formatValue } = context;
-	const pointerValue = useSliderPointerValue(type === "pointer");
-	const rawValue = type === "pointer" ? pointerValue : state.value;
-	const text = format ? format(rawValue) : formatValue ? formatValue(rawValue, type) : String(Math.round(rawValue));
-	return renderElement("output", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: context.stateAttrMap,
-		ref: forwardedRef,
-		props: [{
-			"aria-live": "off",
-			children: text
-		}, elementProps]
-	});
-});
-//#endregion
-export { SliderValue };
-
-//# sourceMappingURL=slider-value.js.map

package/dist/default/ui/slider/slider-value.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"slider-value.js","names":[],"sources":["../../../../src/ui/slider/slider-value.tsx"],"sourcesContent":["import type { SliderState } 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 { useSliderContext, useSliderPointerValue } from './context';\n\nexport interface SliderValueProps extends UIComponentProps<'output', SliderState> {\n  /** Which slider value to display: the current position or the pointer position. */\n  type?: 'current' | 'pointer' | undefined;\n  /** Custom formatter for the displayed value. Overrides the root's `formatValue`. */\n  format?: ((value: number) => string) | undefined;\n}\n\n/** Displays a formatted text representation of the slider value. Renders an `<output>` element. */\nexport const SliderValue = forwardRef(function SliderValue(\n  componentProps: SliderValueProps,\n  forwardedRef: ForwardedRef<HTMLOutputElement>\n) {\n  const { render, className, style, type = 'current', format, ...elementProps } = componentProps;\n\n  const context = useSliderContext();\n  const { state, formatValue } = context;\n  const pointerValue = useSliderPointerValue(type === 'pointer');\n\n  const rawValue = type === 'pointer' ? pointerValue : state.value;\n\n  const text = format ? format(rawValue) : formatValue ? formatValue(rawValue, type) : String(Math.round(rawValue));\n\n  return renderElement(\n    'output',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: context.stateAttrMap,\n      ref: forwardedRef,\n      props: [{ 'aria-live': 'off', children: text }, elementProps],\n    }\n  );\n});\n\nexport namespace SliderValue {\n  export type Props = SliderValueProps;\n}\n"],"mappings":";;;;;AAgBA,MAAa,cAAc,WAAW,SAAS,YAC7C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,WAAW,QAAQ,GAAG,iBAAiB;CAEhF,MAAM,UAAU,iBAAiB;CACjC,MAAM,EAAE,OAAO,gBAAgB;CAC/B,MAAM,eAAe,sBAAsB,SAAS,SAAS;CAE7D,MAAM,WAAW,SAAS,YAAY,eAAe,MAAM;CAE3D,MAAM,OAAO,SAAS,OAAO,QAAQ,IAAI,cAAc,YAAY,UAAU,IAAI,IAAI,OAAO,KAAK,MAAM,QAAQ,CAAC;CAEhH,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc,QAAQ;EACtB,KAAK;EACL,OAAO,CAAC;GAAE,aAAa;GAAO,UAAU;EAAK,GAAG,YAAY;CAC9D,CACF;AACF,CAAC"}

package/dist/default/ui/status-announcer/status-announcer.js

@@ -1,47 +0,0 @@
-import { useLocale, useTranslator } from "../../i18n/context.js";
-import { useContainer, usePlayer } from "../../player/context.js";
-import { useDestroy } from "../../utils/use-destroy.js";
-import { renderElement } from "../../utils/use-render.js";
-import { StatusAnnouncerCore, createStatusAnnouncerLabels } from "@videojs/core";
-import { shouldAnnounceStatusChange, subscribeToStatusAnnouncer } from "@videojs/core/dom";
-import { forwardRef, useEffect, useState, useSyncExternalStore } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/ui/status-announcer/status-announcer.tsx
-const StatusAnnouncer = forwardRef(function StatusAnnouncer(componentProps, forwardedRef) {
-	const { render, className, style, closeDelay, labels, ...elementProps } = componentProps;
-	const translator = useTranslator();
-	const locale = useLocale();
-	const [core] = useState(() => new StatusAnnouncerCore());
-	const store = usePlayer();
-	const container = useContainer();
-	useDestroy(core);
-	core.setProps({
-		closeDelay,
-		labels: {
-			...createStatusAnnouncerLabels(translator, locale),
-			...labels
-		},
-		shouldAnnounce: () => shouldAnnounceStatusChange(container)
-	});
-	useEffect(() => subscribeToStatusAnnouncer(store, core), [core, store]);
-	const state = useSyncExternalStore((callback) => core.state.subscribe(callback), () => core.state.current, () => core.state.current);
-	return renderElement("div", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		ref: forwardedRef,
-		props: [elementProps, {
-			role: "status",
-			children: /* @__PURE__ */ jsx("span", {
-				"data-status-announcer-content": "",
-				children: state.label ?? ""
-			}, state.generation)
-		}]
-	});
-});
-//#endregion
-export { StatusAnnouncer };
-
-//# sourceMappingURL=status-announcer.js.map

package/dist/default/ui/status-announcer/status-announcer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"status-announcer.js","names":[],"sources":["../../../../src/ui/status-announcer/status-announcer.tsx"],"sourcesContent":["import { createStatusAnnouncerLabels, StatusAnnouncerCore } from '@videojs/core';\nimport { shouldAnnounceStatusChange, subscribeToStatusAnnouncer } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useEffect, useState, useSyncExternalStore } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\nimport { useContainer, usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface StatusAnnouncerProps\n  extends\n    UIComponentProps<'div', StatusAnnouncerCore.State>,\n    Pick<StatusAnnouncerCore.Props, 'closeDelay' | 'labels'> {}\n\nexport const StatusAnnouncer = forwardRef(function StatusAnnouncer(\n  componentProps: StatusAnnouncerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, closeDelay, labels, ...elementProps } = componentProps;\n  const translator = useTranslator();\n  const locale = useLocale();\n  const [core] = useState(() => new StatusAnnouncerCore());\n  const store = usePlayer();\n  const container = useContainer();\n\n  useDestroy(core);\n  core.setProps({\n    closeDelay,\n    labels: {\n      ...createStatusAnnouncerLabels(translator, locale),\n      ...labels,\n    },\n    shouldAnnounce: () => shouldAnnounceStatusChange(container),\n  });\n\n  useEffect(() => subscribeToStatusAnnouncer(store, core), [core, store]);\n\n  const state = useSyncExternalStore(\n    (callback) => core.state.subscribe(callback),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: forwardedRef,\n      props: [\n        elementProps,\n        {\n          role: 'status',\n          children: (\n            <span key={state.generation} data-status-announcer-content=\"\">\n              {state.label ?? ''}\n            </span>\n          ),\n        },\n      ],\n    }\n  );\n});\n\nexport namespace StatusAnnouncer {\n  export type Props = StatusAnnouncerProps;\n  export type State = StatusAnnouncerCore.State;\n}\n"],"mappings":";;;;;;;;;AAgBA,MAAa,kBAAkB,WAAW,SAAS,gBACjD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,QAAQ,GAAG,iBAAiB;CAC1E,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CACzB,MAAM,CAAC,QAAQ,eAAe,IAAI,oBAAoB,CAAC;CACvD,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAE/B,WAAW,IAAI;CACf,KAAK,SAAS;EACZ;EACA,QAAQ;GACN,GAAG,4BAA4B,YAAY,MAAM;GACjD,GAAG;EACL;EACA,sBAAsB,2BAA2B,SAAS;CAC5D,CAAC;CAED,gBAAgB,2BAA2B,OAAO,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC;CAEtE,MAAM,QAAQ,sBACX,aAAa,KAAK,MAAM,UAAU,QAAQ,SACrC,KAAK,MAAM,eACX,KAAK,MAAM,OACnB;CAEA,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK;EACL,OAAO,CACL,cACA;GACE,MAAM;GACN,UACE,oBAAC,QAAD;IAA6B,iCAA8B;IACxD,UAAA,MAAM,SAAS;GACZ,GAFK,MAAM,UAEX;EAEV,CACF;CACF,CACF;AACF,CAAC"}

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

@@ -1,35 +0,0 @@
-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/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=status-indicator-root.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"status-indicator-root.js","names":[],"sources":["../../../../src/ui/status-indicator/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/status-indicator-value.js

@@ -1,22 +0,0 @@
-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/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=status-indicator-value.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"status-indicator-value.js","names":[],"sources":["../../../../src/ui/status-indicator/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/thumbnail.js

@@ -1,97 +0,0 @@
-import { useOptionalPlayer } from "../../player/context.js";
-import { useDestroy } from "../../utils/use-destroy.js";
-import { renderElement } from "../../utils/use-render.js";
-import { ThumbnailCore, ThumbnailDataAttrs, mapCuesToThumbnails } from "@videojs/core";
-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";
-//#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());
-	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((n) => n + 1)
-	}));
-	useDestroy(handle, () => handle.connect());
-	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
-	]);
-	const resolvedCrossOrigin = resolveCrossOrigin(crossOrigin, externalThumbnails, textTrack?.thumbnailTrackCrossOrigin);
-	handle.updateSrc(thumbnail?.url);
-	const state = core.getState(handle.loading, handle.error, thumbnail);
-	let containerStyle = { overflow: "hidden" };
-	let imgStyle;
-	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
-			};
-			imgStyle = {
-				width: result.imageWidth,
-				height: result.imageHeight,
-				maxWidth: "none",
-				transform: result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : void 0
-			};
-		}
-	}
-	return renderElement("div", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: ThumbnailDataAttrs,
-		ref: [forwardedRef, divRef],
-		props: [
-			core.getAttrs(state),
-			{ style: containerStyle },
-			elementProps,
-			{ children: /* @__PURE__ */ jsx("img", {
-				ref: imgRef,
-				alt: "",
-				"aria-hidden": "true",
-				decoding: "async",
-				src: thumbnail?.url,
-				crossOrigin: resolvedCrossOrigin,
-				loading,
-				style: imgStyle,
-				fetchPriority
-			}) }
-		]
-	});
-});
-//#endregion
-export { Thumbnail };
-
-//# sourceMappingURL=thumbnail.js.map

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

@@ -1 +0,0 @@
-{"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 keep working on a CORS-enabled player\n * without a skin having to thread a prop 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 host that has nothing to do with the\n * 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\n  if (!isUndefined(explicit)) return explicit;\n\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\n  const divRef = useRef<HTMLDivElement>(null);\n  const imgRef = useRef<HTMLImageElement>(null);\n\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\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":";;;;;;;;;;;;;;;;;AA+BA,SAAS,mBACP,UACA,UACA,WACA;CACA,IAAI,OAAO,QAAQ,GAAG,OAAO,KAAA;CAE7B,IAAI,CAAC,YAAY,QAAQ,GAAG,OAAO;CAEnC,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;CAEjD,MAAM,SAAS,OAAuB,IAAI;CAC1C,MAAM,SAAS,OAAyB,IAAI;CAE5C,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;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,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/default/ui/time/time-group.js

@@ -1,31 +0,0 @@
-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.
-*
-* @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=time-group.js.map

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

@@ -1 +0,0 @@
-{"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/default/ui/time/time-separator.js

@@ -1,31 +0,0 @@
-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.
-*
-* @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=time-separator.js.map

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

@@ -1 +0,0 @@
-{"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/default/ui/time/time-value.js

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

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

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

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

@@ -1,60 +0,0 @@
-import { renderElement } from "../../../utils/use-render.js";
-import { useSliderContext, useSliderPointerValue } from "../../slider/context.js";
-import { SliderSegmentsCore, TimeSliderChapterCSSVars } from "@videojs/core";
-import { getStateDataAttrs } from "@videojs/core/dom";
-import { Fragment, forwardRef, useMemo, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/ui/time-slider/time-slider-chapters/slider-segments.tsx
-/** Private React adapter for rendering normalized numeric slider segments. */
-const SliderSegments = forwardRef(function SliderSegments(componentProps, ref) {
-	const { ranges, min, max, renderSegment, render, className, style, ...elementProps } = componentProps;
-	const slider = useSliderContext();
-	const pointerValue = useSliderPointerValue();
-	const [core] = useState(() => new SliderSegmentsCore());
-	const geometry = useMemo(() => core.getGeometry({
-		ranges,
-		min,
-		max,
-		orientation: slider.state.orientation
-	}), [
-		core,
-		ranges,
-		min,
-		max,
-		slider.state.orientation
-	]);
-	const sliderAttrs = getStateDataAttrs(slider.state, slider.stateAttrMap);
-	const segments = geometry.map((segment) => {
-		const state = core.getState(segment, slider.state, pointerValue);
-		const segmentStyle = {
-			[TimeSliderChapterCSSVars.start]: state.startPercent,
-			[TimeSliderChapterCSSVars.end]: state.endPercent,
-			[TimeSliderChapterCSSVars.width]: state.width ?? state.height,
-			[TimeSliderChapterCSSVars.fill]: `${state.fillPercent}%`
-		};
-		return /* @__PURE__ */ jsx(Fragment, { children: renderSegment({
-			...sliderAttrs,
-			style: segmentStyle
-		}, state) }, state.key);
-	});
-	const state = geometry.length > 0 ? core.getState(geometry[0], slider.state, pointerValue) : null;
-	if (!state) return null;
-	return renderElement("div", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		ref,
-		props: [
-			{ "aria-hidden": "true" },
-			sliderAttrs,
-			elementProps,
-			{ children: segments }
-		]
-	});
-});
-//#endregion
-export { SliderSegments };
-
-//# sourceMappingURL=slider-segments.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"slider-segments.js","names":[],"sources":["../../../../../src/ui/time-slider/time-slider-chapters/slider-segments.tsx"],"sourcesContent":["import {\n  type SliderSegmentRange,\n  type SliderSegmentState,\n  SliderSegmentsCore,\n  TimeSliderChapterCSSVars,\n} from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport type { CSSProperties, ReactElement } from 'react';\nimport { Fragment, forwardRef, useMemo, useState } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../../utils/types';\nimport { renderElement } from '../../../utils/use-render';\nimport { useSliderContext, useSliderPointerValue } from '../../slider/context';\n\ntype SegmentProps = Omit<HTMLProps<HTMLElement>, 'ref'>;\n\ninterface SliderSegmentsProps extends Omit<UIComponentProps<'div', SliderSegmentState>, 'children'> {\n  ranges: readonly SliderSegmentRange[];\n  min: number;\n  max: number;\n  renderSegment: (props: SegmentProps, state: SliderSegmentState) => ReactElement;\n}\n\n/** Private React adapter for rendering normalized numeric slider segments. */\nexport const SliderSegments = forwardRef<HTMLDivElement, SliderSegmentsProps>(\n  function SliderSegments(componentProps, ref) {\n    const { ranges, min, max, renderSegment, render, className, style, ...elementProps } = componentProps;\n\n    const slider = useSliderContext();\n    const pointerValue = useSliderPointerValue();\n\n    const [core] = useState(() => new SliderSegmentsCore());\n\n    const geometry = useMemo(\n      () => core.getGeometry({ ranges, min, max, orientation: slider.state.orientation }),\n      [core, ranges, min, max, slider.state.orientation]\n    );\n    const sliderAttrs = getStateDataAttrs(slider.state, slider.stateAttrMap);\n\n    const segments = geometry.map((segment) => {\n      const state = core.getState(segment, slider.state, pointerValue);\n      const segmentStyle = {\n        [TimeSliderChapterCSSVars.start]: state.startPercent,\n        [TimeSliderChapterCSSVars.end]: state.endPercent,\n        [TimeSliderChapterCSSVars.width]: state.width ?? state.height,\n        [TimeSliderChapterCSSVars.fill]: `${state.fillPercent}%`,\n      } as CSSProperties;\n\n      return (\n        <Fragment key={state.key}>\n          {renderSegment(\n            {\n              ...sliderAttrs,\n              style: segmentStyle,\n            },\n            state\n          )}\n        </Fragment>\n      );\n    });\n\n    const state = geometry.length > 0 ? core.getState(geometry[0]!, slider.state, pointerValue) : null;\n    if (!state) return null;\n\n    return renderElement(\n      'div',\n      { render, className, style },\n      {\n        state,\n        ref,\n        props: [{ 'aria-hidden': 'true' }, sliderAttrs, elementProps, { children: segments }],\n      }\n    );\n  }\n);\n"],"mappings":";;;;;;;;AAwBA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,KAAK;CAC3C,MAAM,EAAE,QAAQ,KAAK,KAAK,eAAe,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEvF,MAAM,SAAS,iBAAiB;CAChC,MAAM,eAAe,sBAAsB;CAE3C,MAAM,CAAC,QAAQ,eAAe,IAAI,mBAAmB,CAAC;CAEtD,MAAM,WAAW,cACT,KAAK,YAAY;EAAE;EAAQ;EAAK;EAAK,aAAa,OAAO,MAAM;CAAY,CAAC,GAClF;EAAC;EAAM;EAAQ;EAAK;EAAK,OAAO,MAAM;CAAW,CACnD;CACA,MAAM,cAAc,kBAAkB,OAAO,OAAO,OAAO,YAAY;CAEvE,MAAM,WAAW,SAAS,KAAK,YAAY;EACzC,MAAM,QAAQ,KAAK,SAAS,SAAS,OAAO,OAAO,YAAY;EAC/D,MAAM,eAAe;IAClB,yBAAyB,QAAQ,MAAM;IACvC,yBAAyB,MAAM,MAAM;IACrC,yBAAyB,QAAQ,MAAM,SAAS,MAAM;IACtD,yBAAyB,OAAO,GAAG,MAAM,YAAY;EACxD;EAEA,OACE,oBAAC,UAAD,EAAA,UACG,cACC;GACE,GAAG;GACH,OAAO;EACT,GACA,KACF,EACQ,GARK,MAAM,GAQX;CAEd,CAAC;CAED,MAAM,QAAQ,SAAS,SAAS,IAAI,KAAK,SAAS,SAAS,IAAK,OAAO,OAAO,YAAY,IAAI;CAC9F,IAAI,CAAC,OAAO,OAAO;CAEnB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,OAAO;GAAC,EAAE,eAAe,OAAO;GAAG;GAAa;GAAc,EAAE,UAAU,SAAS;EAAC;CACtF,CACF;AACF,CACF"}

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

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

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

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