@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/Video/parts/HoverPreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverPreview.mjs","names":[],"sources":["../../../src/Video/parts/HoverPreview.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { markerColor, styles } from '../style';\nimport { formatTime } from '../time';\nimport type { VideoMarker, VideoSection } from '../type';\n\nexport interface HoverPreviewProps {\n  marker?: VideoMarker;\n  section?: VideoSection;\n  src: string;\n  thumbnail: boolean;\n  time: number;\n  visible: boolean;\n  x: number;\n}\n\n// The frame comes from a hidden second <video>: seeking the one on screen\n// would move the playhead the viewer is holding. Seeks queue so a fast sweep\n// paints the latest position instead of stalling on stale frames.\nconst Thumbnail = ({ src, time }: { src: string; time: number }) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const probeRef = useRef<HTMLVideoElement>(null);\n  const pendingRef = useRef<number | null>(null);\n  const busyRef = useRef(false);\n\n  useEffect(() => {\n    const probe = probeRef.current;\n    if (!probe) return;\n    const paint = () => {\n      const canvas = canvasRef.current;\n      try {\n        canvas?.getContext('2d')?.drawImage(probe, 0, 0, canvas.width, canvas.height);\n      } catch {\n        // A frame that cannot be decoded yet leaves the previous paint in place.\n      }\n      busyRef.current = false;\n      if (pendingRef.current === null) return;\n      busyRef.current = true;\n      probe.currentTime = pendingRef.current;\n      pendingRef.current = null;\n    };\n    const reset = () => {\n      busyRef.current = false;\n    };\n    probe.addEventListener('seeked', paint);\n    probe.addEventListener('error', reset);\n    return () => {\n      probe.removeEventListener('seeked', paint);\n      probe.removeEventListener('error', reset);\n      // An unmounted element with a src keeps downloading until it is collected.\n      probe.removeAttribute('src');\n      probe.load?.();\n    };\n  }, []);\n\n  useEffect(() => {\n    const probe = probeRef.current;\n    if (!probe) return;\n    if (busyRef.current) {\n      pendingRef.current = time;\n      return;\n    }\n    busyRef.current = true;\n    probe.currentTime = time;\n  }, [time]);\n\n  return (\n    <>\n      <video\n        muted\n        playsInline\n        preload=\"auto\"\n        ref={probeRef}\n        src={src}\n        style={{ display: 'none' }}\n      />\n      <canvas height={99} ref={canvasRef} width={176} {...styleProps(styles.previewCanvas)} />\n    </>\n  );\n};\n\nconst HoverPreview = ({ marker, section, src, thumbnail, time, visible, x }: HoverPreviewProps) => (\n  <div\n    {...styleProps(styles.preview, undefined, { display: visible ? undefined : 'none', left: x })}\n  >\n    {thumbnail && <Thumbnail src={src} time={time} />}\n    {(section || marker) && (\n      <div {...styleProps(styles.previewLabel)}>\n        {section && <div {...styleProps(styles.previewTitle)}>{section.title}</div>}\n        {marker && (\n          <div>\n            <span\n              {...styleProps(styles.dot, undefined, {\n                background: markerColor(marker.color),\n                display: 'inline-block',\n                marginInlineEnd: 6,\n              })}\n            />\n            {marker.content ?? marker.label}\n          </div>\n        )}\n      </div>\n    )}\n    <div {...styleProps(styles.previewTime)}>{formatTime(time)}</div>\n  </div>\n);\n\nexport default HoverPreview;\n"],"mappings":";;;;;;;AAuBA,MAAM,aAAa,EAAE,KAAK,WAA0C;CAClE,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,aAAa,OAAsB,IAAI;CAC7C,MAAM,UAAU,OAAO,KAAK;CAE5B,gBAAgB;EACd,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,MAAM,cAAc;GAClB,MAAM,SAAS,UAAU;GACzB,IAAI;IACF,QAAQ,WAAW,IAAI,CAAC,EAAE,UAAU,OAAO,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;GAC9E,QAAQ,CAER;GACA,QAAQ,UAAU;GAClB,IAAI,WAAW,YAAY,MAAM;GACjC,QAAQ,UAAU;GAClB,MAAM,cAAc,WAAW;GAC/B,WAAW,UAAU;EACvB;EACA,MAAM,cAAc;GAClB,QAAQ,UAAU;EACpB;EACA,MAAM,iBAAiB,UAAU,KAAK;EACtC,MAAM,iBAAiB,SAAS,KAAK;EACrC,aAAa;GACX,MAAM,oBAAoB,UAAU,KAAK;GACzC,MAAM,oBAAoB,SAAS,KAAK;GAExC,MAAM,gBAAgB,KAAK;GAC3B,MAAM,OAAO;EACf;CACF,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,IAAI,QAAQ,SAAS;GACnB,WAAW,UAAU;GACrB;EACF;EACA,QAAQ,UAAU;EAClB,MAAM,cAAc;CACtB,GAAG,CAAC,IAAI,CAAC;CAET,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EACE,OAAA;EACA,aAAA;EACA,SAAQ;EACR,KAAK;EACA;EACL,OAAO,EAAE,SAAS,OAAO;CAC1B,CAAA,GACD,oBAAC,UAAD;EAAQ,QAAQ;EAAI,KAAK;EAAW,OAAO;EAAK,GAAI,WAAW,OAAO,aAAa;CAAI,CAAA,CACvF,EAAA,CAAA;AAEN;AAEA,MAAM,gBAAgB,EAAE,QAAQ,SAAS,KAAK,WAAW,MAAM,SAAS,QACtE,qBAAC,OAAD;CACE,GAAI,WAAW,OAAO,SAAS,KAAA,GAAW;EAAE,SAAS,UAAU,KAAA,IAAY;EAAQ,MAAM;CAAE,CAAC;CAD9F,UAAA;EAGG,aAAa,oBAAC,WAAD;GAAgB;GAAW;EAAO,CAAA;GAC9C,WAAW,WACX,qBAAC,OAAD;GAAK,GAAI,WAAW,OAAO,YAAY;GAAvC,UAAA,CACG,WAAW,oBAAC,OAAD;IAAK,GAAI,WAAW,OAAO,YAAY;IAAI,UAAA,QAAQ;GAAW,CAAA,GACzE,UACC,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,QAAD,EACE,GAAI,WAAW,OAAO,KAAK,KAAA,GAAW;IACpC,YAAY,YAAY,OAAO,KAAK;IACpC,SAAS;IACT,iBAAiB;GACnB,CAAC,EACF,CAAA,GACA,OAAO,WAAW,OAAO,KACvB,EAAA,CAAA,CAEJ;;EAEP,oBAAC,OAAD;GAAK,GAAI,WAAW,OAAO,WAAW;GAAI,UAAA,WAAW,IAAI;EAAO,CAAA;CAC7D"}

package/es/Video/parts/LoadError.d.mts

@@ -0,0 +1,8 @@
+//#region src/Video/parts/LoadError.d.ts
+declare const LoadError: {
+  (): import("react").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+export { LoadError as default };
+//# sourceMappingURL=LoadError.d.mts.map

package/es/Video/parts/LoadError.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { useVideoContext } from "../context.mjs";
+import { styles } from "../style.mjs";
+import { useVideo } from "../useVideo.mjs";
+import video_default from "../../i18n/resources/en/video.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, Download, RefreshCw } from "lucide-react";
+//#region src/Video/parts/LoadError.tsx
+const LoadError = () => {
+	const { config, media, store } = useVideoContext();
+	const { t } = useTranslation(video_default);
+	if (!useVideo((state) => state.status === "error")) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		...styleProps(styles.error),
+		onClick: (event) => event.stopPropagation(),
+		children: [
+			/* @__PURE__ */ jsx(AlertTriangle, { size: 22 }),
+			/* @__PURE__ */ jsx("span", { children: t("video.loadFailed") }),
+			/* @__PURE__ */ jsxs("div", {
+				...styleProps(styles.errorActions),
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					...styleProps(styles.errorButton),
+					onClick: async () => {
+						await config.onRetry?.();
+						store.reload();
+					},
+					children: [/* @__PURE__ */ jsx(RefreshCw, { size: 14 }), t("video.reload")]
+				}), /* @__PURE__ */ jsxs("a", {
+					href: media.src,
+					rel: "noreferrer",
+					target: "_blank",
+					...styleProps(styles.errorButton),
+					children: [/* @__PURE__ */ jsx(Download, { size: 14 }), t("video.download")]
+				})]
+			})
+		]
+	});
+};
+LoadError.displayName = "VideoLoadError";
+//#endregion
+export { LoadError as default };
+
+//# sourceMappingURL=LoadError.mjs.map

package/es/Video/parts/LoadError.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadError.mjs","names":["videoMessages"],"sources":["../../../src/Video/parts/LoadError.tsx"],"sourcesContent":["'use client';\n\nimport { AlertTriangle, Download, RefreshCw } from 'lucide-react';\n\nimport videoMessages from '@/i18n/resources/en/video';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useVideoContext } from '../context';\nimport { styles } from '../style';\nimport { useVideo } from '../useVideo';\n\nconst LoadError = () => {\n  const { config, media, store } = useVideoContext();\n  const { t } = useTranslation(videoMessages);\n  const failed = useVideo((state) => state.status === 'error');\n  if (!failed) return null;\n\n  return (\n    <div role=\"alert\" {...styleProps(styles.error)} onClick={(event) => event.stopPropagation()}>\n      <AlertTriangle size={22} />\n      <span>{t('video.loadFailed')}</span>\n      <div {...styleProps(styles.errorActions)}>\n        <button\n          type=\"button\"\n          {...styleProps(styles.errorButton)}\n          onClick={async () => {\n            await config.onRetry?.();\n            store.reload();\n          }}\n        >\n          <RefreshCw size={14} />\n          {t('video.reload')}\n        </button>\n        <a href={media.src} rel=\"noreferrer\" target=\"_blank\" {...styleProps(styles.errorButton)}>\n          <Download size={14} />\n          {t('video.download')}\n        </a>\n      </div>\n    </div>\n  );\n};\n\nLoadError.displayName = 'VideoLoadError';\n\nexport default LoadError;\n"],"mappings":";;;;;;;;;;AAYA,MAAM,kBAAkB;CACtB,MAAM,EAAE,QAAQ,OAAO,UAAU,gBAAgB;CACjD,MAAM,EAAE,MAAM,eAAeA,aAAa;CAE1C,IAAI,CADW,UAAU,UAAU,MAAM,WAAW,OAC1C,GAAG,OAAO;CAEpB,OACE,qBAAC,OAAD;EAAK,MAAK;EAAQ,GAAI,WAAW,OAAO,KAAK;EAAG,UAAU,UAAU,MAAM,gBAAgB;EAA1F,UAAA;GACE,oBAAC,eAAD,EAAe,MAAM,GAAK,CAAA;GAC1B,oBAAC,QAAD,EAAA,UAAO,EAAE,kBAAkB,EAAQ,CAAA;GACnC,qBAAC,OAAD;IAAK,GAAI,WAAW,OAAO,YAAY;IAAvC,UAAA,CACE,qBAAC,UAAD;KACE,MAAK;KACL,GAAI,WAAW,OAAO,WAAW;KACjC,SAAS,YAAY;MACnB,MAAM,OAAO,UAAU;MACvB,MAAM,OAAO;KACf;KANF,UAAA,CAQE,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA,GACrB,EAAE,cAAc,CACX;IACR,CAAA,GAAA,qBAAC,KAAD;KAAG,MAAM,MAAM;KAAK,KAAI;KAAa,QAAO;KAAS,GAAI,WAAW,OAAO,WAAW;KAAtF,UAAA,CACE,oBAAC,UAAD,EAAU,MAAM,GAAK,CAAA,GACpB,EAAE,gBAAgB,CAClB;IACA,CAAA,CAAA;;EACF;;AAET;AAEA,UAAU,cAAc"}

package/es/Video/parts/PlayPauseIcon.mjs

@@ -0,0 +1,48 @@
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Video/parts/PlayPauseIcon.tsx
+const styles = {
+	half: {
+		kWkggS: "lbtwfq29",
+		kpwlN0: "lb10a8y8t",
+		kVAEAm: "lb10l6tqk",
+		kmkexE: "lbdn3phn lb9kvfbb",
+		$$css: true
+	},
+	leftPause: {
+		kz4h6p: "lb54tv3e",
+		$$css: true
+	},
+	leftPlay: {
+		kz4h6p: "lbw0i5o0",
+		$$css: true
+	},
+	rightPause: {
+		kz4h6p: "lbn4v9xm",
+		$$css: true
+	},
+	rightPlay: {
+		kz4h6p: "lb1qujkey",
+		$$css: true
+	},
+	root: {
+		k1xSpc: "lb1rg5ohu",
+		kUk6DE: "lb1okw0bk",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	}
+};
+const PlayPauseIcon = ({ paused, size = 16 }) => /* @__PURE__ */ jsxs("span", {
+	"aria-hidden": "true",
+	"data-state": paused ? "play" : "pause",
+	"data-video-play-icon": "",
+	...styleProps(styles.root, void 0, {
+		height: size,
+		width: size
+	}),
+	children: [/* @__PURE__ */ jsx("span", { ...styleProps([styles.half, paused ? styles.leftPlay : styles.leftPause]) }), /* @__PURE__ */ jsx("span", { ...styleProps([styles.half, paused ? styles.rightPlay : styles.rightPause]) })]
+});
+//#endregion
+export { PlayPauseIcon as default };
+
+//# sourceMappingURL=PlayPauseIcon.mjs.map

package/es/Video/parts/PlayPauseIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayPauseIcon.mjs","names":[],"sources":["../../../src/Video/parts/PlayPauseIcon.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\n\n// Each half keeps four points in both states (TL, TR, BR, BL), so clip-path\n// interpolates the pause bars into the two halves of the play triangle.\nconst styles = stylex.create({\n  half: {\n    backgroundColor: 'currentColor',\n    inset: 0,\n    position: 'absolute',\n    transition: {\n      default: 'clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1)',\n      [reducedMotion]: 'none',\n    },\n  },\n  leftPause: {\n    clipPath: 'polygon(19% 12%, 41% 12%, 41% 88%, 19% 88%)',\n  },\n  leftPlay: {\n    clipPath: 'polygon(22% 10%, 55% 30%, 55% 70%, 22% 90%)',\n  },\n  rightPause: {\n    clipPath: 'polygon(59% 12%, 81% 12%, 81% 88%, 59% 88%)',\n  },\n  rightPlay: {\n    clipPath: 'polygon(55% 30%, 88% 50%, 88% 50%, 55% 70%)',\n  },\n  root: {\n    display: 'inline-block',\n    flex: 'none',\n    position: 'relative',\n  },\n});\n\nconst PlayPauseIcon = ({ paused, size = 16 }: { paused: boolean; size?: number }) => (\n  <span\n    aria-hidden=\"true\"\n    data-state={paused ? 'play' : 'pause'}\n    data-video-play-icon=\"\"\n    {...styleProps(styles.root, undefined, { height: size, width: size })}\n  >\n    <span {...styleProps([styles.half, paused ? styles.leftPlay : styles.leftPause])} />\n    <span {...styleProps([styles.half, paused ? styles.rightPlay : styles.rightPause])} />\n  </span>\n);\n\nexport default PlayPauseIcon;\n"],"mappings":";;;AAMA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,iBAAiB,EACrB,QACA,OAAO,SAIH,qBAAC,QAAD;CAAM,eAAY;CAAO,cAAY,SAAS,SAAS;CAAS,wBAAqB;CAAG,GAAI,WAAW,OAAO,MAAM,KAAA,GAAW;EACnI,QAAQ;EACR,OAAO;CACT,CAAC;CAHK,UAAA,CAIF,oBAAC,QAAD,EAAM,GAAI,WAAW,CAAC,OAAO,MAAM,SAAS,OAAO,WAAW,OAAO,SAAS,CAAC,EAAI,CAAA,GACnF,oBAAC,QAAD,EAAM,GAAI,WAAW,CAAC,OAAO,MAAM,SAAS,OAAO,YAAY,OAAO,UAAU,CAAC,EAAI,CAAA,CACjF"}

package/es/Video/parts/RateMenu.mjs

@@ -0,0 +1,48 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import DropdownMenu from "../../DropdownMenu/DropdownMenu.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { FrameContext, useVideoContext } from "../context.mjs";
+import { styles } from "../style.mjs";
+import { useVideo } from "../useVideo.mjs";
+import video_default from "../../i18n/resources/en/video.mjs";
+import { useFullscreen } from "../useFullscreen.mjs";
+import { DEFAULT_PLAYBACK_RATES } from "../useKeyboard.mjs";
+import { use } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+//#region src/Video/parts/RateMenu.tsx
+const RateMenu = () => {
+	const { config, store } = useVideoContext();
+	const frame = use(FrameContext);
+	const fullscreen = useFullscreen(store);
+	const { t } = useTranslation(video_default);
+	const rate = useVideo((state) => state.rate);
+	const rates = config.playbackRates ?? DEFAULT_PLAYBACK_RATES;
+	return /* @__PURE__ */ jsx(DropdownMenu, {
+		portalProps: fullscreen && store.root ? { container: store.root } : void 0,
+		items: rates.map((value) => ({
+			extra: value === rate ? /* @__PURE__ */ jsx(Check, { size: 14 }) : void 0,
+			key: `${value}`,
+			label: `${value}×`,
+			onClick: () => store.setRate(value)
+		})),
+		onOpenChange: (open) => frame?.hold(open),
+		children: /* @__PURE__ */ jsxs("button", {
+			"aria-label": t("video.speed"),
+			title: `${t("video.speed")} (J / L)`,
+			type: "button",
+			...styleProps([
+				styles.barButton,
+				styles.rateButton,
+				rate !== 1 && styles.barButtonActive
+			]),
+			children: [rate, "×"]
+		})
+	});
+};
+RateMenu.displayName = "VideoRateMenu";
+//#endregion
+export { RateMenu as default };
+
+//# sourceMappingURL=RateMenu.mjs.map

package/es/Video/parts/RateMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RateMenu.mjs","names":["videoMessages"],"sources":["../../../src/Video/parts/RateMenu.tsx"],"sourcesContent":["'use client';\n\nimport { Check } from 'lucide-react';\nimport { use } from 'react';\n\nimport DropdownMenu from '@/DropdownMenu';\nimport videoMessages from '@/i18n/resources/en/video';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext, useVideoContext } from '../context';\nimport { styles } from '../style';\nimport { useFullscreen } from '../useFullscreen';\nimport { DEFAULT_PLAYBACK_RATES } from '../useKeyboard';\nimport { useVideo } from '../useVideo';\n\nconst RateMenu = () => {\n  const { config, store } = useVideoContext();\n  const frame = use(FrameContext);\n  const fullscreen = useFullscreen(store);\n  const { t } = useTranslation(videoMessages);\n  const rate = useVideo((state) => state.rate);\n  const rates = config.playbackRates ?? DEFAULT_PLAYBACK_RATES;\n\n  return (\n    <DropdownMenu\n      portalProps={fullscreen && store.root ? { container: store.root } : undefined}\n      items={rates.map((value) => ({\n        extra: value === rate ? <Check size={14} /> : undefined,\n        key: `${value}`,\n        label: `${value}×`,\n        onClick: () => store.setRate(value),\n      }))}\n      onOpenChange={(open) => frame?.hold(open)}\n    >\n      <button\n        aria-label={t('video.speed')}\n        title={`${t('video.speed')} (J / L)`}\n        type=\"button\"\n        {...styleProps([styles.barButton, styles.rateButton, rate !== 1 && styles.barButtonActive])}\n      >\n        {rate}×\n      </button>\n    </DropdownMenu>\n  );\n};\n\nRateMenu.displayName = 'VideoRateMenu';\n\nexport default RateMenu;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,iBAAiB;CACrB,MAAM,EAAE,QAAQ,UAAU,gBAAgB;CAC1C,MAAM,QAAQ,IAAI,YAAY;CAC9B,MAAM,aAAa,cAAc,KAAK;CACtC,MAAM,EAAE,MAAM,eAAeA,aAAa;CAC1C,MAAM,OAAO,UAAU,UAAU,MAAM,IAAI;CAC3C,MAAM,QAAQ,OAAO,iBAAiB;CAEtC,OACE,oBAAC,cAAD;EACE,aAAa,cAAc,MAAM,OAAO,EAAE,WAAW,MAAM,KAAK,IAAI,KAAA;EACpE,OAAO,MAAM,KAAK,WAAW;GAC3B,OAAO,UAAU,OAAO,oBAAC,OAAD,EAAO,MAAM,GAAK,CAAA,IAAI,KAAA;GAC9C,KAAK,GAAG;GACR,OAAO,GAAG,MAAM;GAChB,eAAe,MAAM,QAAQ,KAAK;EACpC,EAAE;EACF,eAAe,SAAS,OAAO,KAAK,IAAI;EAExC,UAAA,qBAAC,UAAD;GACE,cAAY,EAAE,aAAa;GAC3B,OAAO,GAAG,EAAE,aAAa,EAAE;GAC3B,MAAK;GACL,GAAI,WAAW;IAAC,OAAO;IAAW,OAAO;IAAY,SAAS,KAAK,OAAO;GAAe,CAAC;GAJ5F,UAAA,CAMG,MAAK,GACA;;CACI,CAAA;AAElB;AAEA,SAAS,cAAc"}

package/es/Video/parts/Root.d.mts

@@ -0,0 +1,9 @@
+import { VideoRootProps } from "../type.mjs";
+//#region src/Video/parts/Root.d.ts
+declare const Root: {
+  ({ ref, player, src, poster, autoPlay, loop, preload, onPlay, onPause, onEnded, onError, onTimeUpdate, sections, markers, fps, playbackRates, defaultPlaybackRate, muted, onMutedChange, onRateChange, onMarkerClick, onRetry, captions, width, height, maxHeight, className, style, children }: VideoRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Root as default };
+//# sourceMappingURL=Root.d.mts.map

package/es/Video/parts/Root.mjs

@@ -0,0 +1,110 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { VideoContext } from "../context.mjs";
+import { styles } from "../style.mjs";
+import { sortSections } from "../time.mjs";
+import { createVideoStore } from "../store.mjs";
+import { useVideoState } from "../useVideo.mjs";
+import { handleVideoKey } from "../useKeyboard.mjs";
+import { useImperativeHandle, useLayoutEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Video/parts/Root.tsx
+const NO_MARKERS = [];
+const NO_SECTIONS = [];
+const Root = ({ ref, player, src, poster, autoPlay, loop, preload = "metadata", onPlay, onPause, onEnded, onError, onTimeUpdate, sections = NO_SECTIONS, markers = NO_MARKERS, fps = 30, playbackRates, defaultPlaybackRate, muted, onMutedChange, onRateChange, onMarkerClick, onRetry, captions = true, width, height, maxHeight, className, style, children }) => {
+	const [ownStore] = useState(createVideoStore);
+	const store = player ?? ownStore;
+	store.setOptions({
+		defaultPlaybackRate,
+		muted,
+		onMutedChange,
+		onRateChange
+	});
+	useImperativeHandle(ref, () => store, [store]);
+	const sorted = useMemo(() => sortSections(sections), [sections]);
+	useLayoutEffect(() => {
+		store.setData({
+			fps,
+			markers,
+			sections: sorted
+		});
+	}, [
+		store,
+		fps,
+		markers,
+		sorted
+	]);
+	useLayoutEffect(() => {
+		if (!captions) store.setCaptions(false);
+	}, [store]);
+	const size = useVideoState(store, (state) => state.size);
+	const aspect = size?.height ? size.width / size.height : 16 / 9;
+	const sizing = maxHeight === void 0 ? {
+		height,
+		width
+	} : {
+		maxWidth: `${Math.round(maxHeight * aspect)}px`,
+		width: "100%"
+	};
+	const value = useMemo(() => ({
+		config: {
+			fps,
+			markers,
+			onMarkerClick,
+			onRetry,
+			playbackRates,
+			sections: sorted
+		},
+		media: {
+			autoPlay,
+			loop,
+			onEnded,
+			onError,
+			onPause,
+			onPlay,
+			onTimeUpdate,
+			poster,
+			preload,
+			src
+		},
+		store
+	}), [
+		autoPlay,
+		fps,
+		loop,
+		markers,
+		onEnded,
+		onError,
+		onMarkerClick,
+		onPause,
+		onPlay,
+		onRetry,
+		onTimeUpdate,
+		playbackRates,
+		poster,
+		preload,
+		sorted,
+		src,
+		store
+	]);
+	return /* @__PURE__ */ jsx(VideoContext, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: store.attachRoot,
+			tabIndex: 0,
+			onKeyDown: (event) => {
+				if (handleVideoKey(event, store, playbackRates)) event.preventDefault();
+			},
+			...styleProps(styles.root, className, {
+				...sizing,
+				...style
+			}),
+			children
+		})
+	});
+};
+Root.displayName = "VideoRoot";
+//#endregion
+export { Root as default };
+
+//# sourceMappingURL=Root.mjs.map

package/es/Video/parts/Root.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Root.mjs","names":[],"sources":["../../../src/Video/parts/Root.tsx"],"sourcesContent":["'use client';\n\nimport { useImperativeHandle, useLayoutEffect, useMemo, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { VideoContext, type VideoContextValue } from '../context';\nimport { createVideoStore, type VideoStore } from '../store';\nimport { styles } from '../style';\nimport { sortSections } from '../time';\nimport type { VideoMarker, VideoRootProps, VideoSection } from '../type';\nimport { handleVideoKey } from '../useKeyboard';\nimport { useVideoState } from '../useVideo';\n\nconst NO_MARKERS: VideoMarker[] = [];\nconst NO_SECTIONS: VideoSection[] = [];\n\nconst Root = ({\n  ref,\n  player,\n  src,\n  poster,\n  autoPlay,\n  loop,\n  preload = 'metadata',\n  onPlay,\n  onPause,\n  onEnded,\n  onError,\n  onTimeUpdate,\n  sections = NO_SECTIONS,\n  markers = NO_MARKERS,\n  fps = 30,\n  playbackRates,\n  defaultPlaybackRate,\n  muted,\n  onMutedChange,\n  onRateChange,\n  onMarkerClick,\n  onRetry,\n  captions = true,\n  width,\n  height,\n  maxHeight,\n  className,\n  style,\n  children,\n}: VideoRootProps) => {\n  const [ownStore] = useState(createVideoStore);\n  const store = (player as VideoStore | undefined) ?? ownStore;\n\n  // Assigned during render so the store already has them when a child Frame\n  // attaches its <video> in an effect, which runs before this component's own.\n  store.setOptions({ defaultPlaybackRate, muted, onMutedChange, onRateChange });\n\n  useImperativeHandle(ref, () => store, [store]);\n\n  const sorted = useMemo(() => sortSections(sections), [sections]);\n\n  useLayoutEffect(() => {\n    store.setData({ fps, markers, sections: sorted });\n  }, [store, fps, markers, sorted]);\n\n  useLayoutEffect(() => {\n    if (!captions) store.setCaptions(false);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [store]);\n\n  const size = useVideoState(store, (state) => state.size);\n  const aspect = size?.height ? size.width / size.height : 16 / 9;\n  const sizing =\n    maxHeight === undefined\n      ? { height, width }\n      : { maxWidth: `${Math.round(maxHeight * aspect)}px`, width: '100%' };\n\n  const value = useMemo<VideoContextValue>(\n    () => ({\n      config: { fps, markers, onMarkerClick, onRetry, playbackRates, sections: sorted },\n      media: {\n        autoPlay,\n        loop,\n        onEnded,\n        onError,\n        onPause,\n        onPlay,\n        onTimeUpdate,\n        poster,\n        preload,\n        src,\n      },\n      store,\n    }),\n    [\n      autoPlay,\n      fps,\n      loop,\n      markers,\n      onEnded,\n      onError,\n      onMarkerClick,\n      onPause,\n      onPlay,\n      onRetry,\n      onTimeUpdate,\n      playbackRates,\n      poster,\n      preload,\n      sorted,\n      src,\n      store,\n    ],\n  );\n\n  return (\n    <VideoContext value={value}>\n      <div\n        ref={store.attachRoot}\n        tabIndex={0}\n        onKeyDown={(event) => {\n          if (handleVideoKey(event, store, playbackRates)) event.preventDefault();\n        }}\n        {...styleProps(styles.root, className, { ...sizing, ...style })}\n      >\n        {children}\n      </div>\n    </VideoContext>\n  );\n};\n\nRoot.displayName = 'VideoRoot';\n\nexport default Root;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,aAA4B,CAAC;AACnC,MAAM,cAA8B,CAAC;AAErC,MAAM,QAAQ,EACZ,KACA,QACA,KACA,QACA,UACA,MACA,UAAU,YACV,QACA,SACA,SACA,SACA,cACA,WAAW,aACX,UAAU,YACV,MAAM,IACN,eACA,qBACA,OACA,eACA,cACA,eACA,SACA,WAAW,MACX,OACA,QACA,WACA,WACA,OACA,eACoB;CACpB,MAAM,CAAC,YAAY,SAAS,gBAAgB;CAC5C,MAAM,QAAS,UAAqC;CAIpD,MAAM,WAAW;EAAE;EAAqB;EAAO;EAAe;CAAa,CAAC;CAE5E,oBAAoB,WAAW,OAAO,CAAC,KAAK,CAAC;CAE7C,MAAM,SAAS,cAAc,aAAa,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAE/D,sBAAsB;EACpB,MAAM,QAAQ;GAAE;GAAK;GAAS,UAAU;EAAO,CAAC;CAClD,GAAG;EAAC;EAAO;EAAK;EAAS;CAAM,CAAC;CAEhC,sBAAsB;EACpB,IAAI,CAAC,UAAU,MAAM,YAAY,KAAK;CAExC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,OAAO,cAAc,QAAQ,UAAU,MAAM,IAAI;CACvD,MAAM,SAAS,MAAM,SAAS,KAAK,QAAQ,KAAK,SAAS,KAAK;CAC9D,MAAM,SACJ,cAAc,KAAA,IACV;EAAE;EAAQ;CAAM,IAChB;EAAE,UAAU,GAAG,KAAK,MAAM,YAAY,MAAM,EAAE;EAAK,OAAO;CAAO;CAEvE,MAAM,QAAQ,eACL;EACL,QAAQ;GAAE;GAAK;GAAS;GAAe;GAAS;GAAe,UAAU;EAAO;EAChF,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,cAAD;EAAqB;EACnB,UAAA,oBAAC,OAAD;GACE,KAAK,MAAM;GACX,UAAU;GACV,YAAY,UAAU;IACpB,IAAI,eAAe,OAAO,OAAO,aAAa,GAAG,MAAM,eAAe;GACxE;GACA,GAAI,WAAW,OAAO,MAAM,WAAW;IAAE,GAAG;IAAQ,GAAG;GAAM,CAAC;GAE7D;EACE,CAAA;CACO,CAAA;AAElB;AAEA,KAAK,cAAc"}

package/es/Video/parts/SectionList.d.mts

@@ -0,0 +1,9 @@
+import { VideoSectionListProps } from "../type.mjs";
+//#region src/Video/parts/SectionList.d.ts
+declare const SectionList: {
+  ({ className, style }: VideoSectionListProps): import("react").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+export { SectionList as default };
+//# sourceMappingURL=SectionList.d.mts.map

package/es/Video/parts/SectionList.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { useVideoContext } from "../context.mjs";
+import { styles } from "../style.mjs";
+import { formatTime } from "../time.mjs";
+import { useVideo } from "../useVideo.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Video/parts/SectionList.tsx
+const SectionList = ({ className, style }) => {
+	const { config, store } = useVideoContext();
+	const active = useVideo((state) => state.activeSection);
+	if (config.sections.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...styleProps(styles.sectionList, className, style),
+		children: config.sections.map((section) => /* @__PURE__ */ jsxs("button", {
+			"aria-current": section === active ? "true" : void 0,
+			"data-video-section": "",
+			type: "button",
+			...styleProps([styles.sectionChip, section === active && styles.sectionChipActive]),
+			onClick: () => store.seek(section.start),
+			children: [/* @__PURE__ */ jsx("span", {
+				...styleProps(styles.sectionChipTime),
+				children: formatTime(section.start)
+			}), section.title]
+		}, section.start))
+	});
+};
+SectionList.displayName = "VideoSectionList";
+//#endregion
+export { SectionList as default };
+
+//# sourceMappingURL=SectionList.mjs.map

package/es/Video/parts/SectionList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionList.mjs","names":[],"sources":["../../../src/Video/parts/SectionList.tsx"],"sourcesContent":["'use client';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useVideoContext } from '../context';\nimport { styles } from '../style';\nimport { formatTime } from '../time';\nimport type { VideoSectionListProps } from '../type';\nimport { useVideo } from '../useVideo';\n\nconst SectionList = ({ className, style }: VideoSectionListProps) => {\n  const { config, store } = useVideoContext();\n  const active = useVideo((state) => state.activeSection);\n  if (config.sections.length === 0) return null;\n\n  return (\n    <div {...styleProps(styles.sectionList, className, style)}>\n      {config.sections.map((section) => (\n        <button\n          aria-current={section === active ? 'true' : undefined}\n          data-video-section=\"\"\n          key={section.start}\n          type=\"button\"\n          {...styleProps([styles.sectionChip, section === active && styles.sectionChipActive])}\n          onClick={() => store.seek(section.start)}\n        >\n          <span {...styleProps(styles.sectionChipTime)}>{formatTime(section.start)}</span>\n          {section.title}\n        </button>\n      ))}\n    </div>\n  );\n};\n\nSectionList.displayName = 'VideoSectionList';\n\nexport default SectionList;\n"],"mappings":";;;;;;;;AAUA,MAAM,eAAe,EAAE,WAAW,YAAmC;CACnE,MAAM,EAAE,QAAQ,UAAU,gBAAgB;CAC1C,MAAM,SAAS,UAAU,UAAU,MAAM,aAAa;CACtD,IAAI,OAAO,SAAS,WAAW,GAAG,OAAO;CAEzC,OACE,oBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,aAAa,WAAW,KAAK;EACrD,UAAA,OAAO,SAAS,KAAK,YACpB,qBAAC,UAAD;GACE,gBAAc,YAAY,SAAS,SAAS,KAAA;GAC5C,sBAAmB;GAEnB,MAAK;GACL,GAAI,WAAW,CAAC,OAAO,aAAa,YAAY,UAAU,OAAO,iBAAiB,CAAC;GACnF,eAAe,MAAM,KAAK,QAAQ,KAAK;GANzC,UAAA,CAQE,oBAAC,QAAD;IAAM,GAAI,WAAW,OAAO,eAAe;IAAI,UAAA,WAAW,QAAQ,KAAK;GAAQ,CAAA,GAC9E,QAAQ,KACH;EAPD,GAAA,QAAQ,KAOP,CACT;CACE,CAAA;AAET;AAEA,YAAY,cAAc"}

package/es/Video/parts/SectionMenu.mjs

@@ -0,0 +1,63 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import DropdownMenu from "../../DropdownMenu/DropdownMenu.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { FrameContext, useVideoContext } from "../context.mjs";
+import { styles } from "../style.mjs";
+import { formatTime } from "../time.mjs";
+import { useVideo } from "../useVideo.mjs";
+import video_default from "../../i18n/resources/en/video.mjs";
+import { useFullscreen } from "../useFullscreen.mjs";
+import { use, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronRight } from "lucide-react";
+//#region src/Video/parts/SectionMenu.tsx
+const SectionMenu = () => {
+	const { config, store } = useVideoContext();
+	const frame = use(FrameContext);
+	const fullscreen = useFullscreen(store);
+	const { t } = useTranslation(video_default);
+	const active = useVideo((state) => state.activeSection);
+	const [shown, setShown] = useState({
+		direction: "none",
+		section: active
+	});
+	if (shown.section !== active) {
+		const from = shown.section ? config.sections.indexOf(shown.section) : -1;
+		setShown({
+			direction: (active ? config.sections.indexOf(active) : -1) >= from ? "forward" : "backward",
+			section: active
+		});
+	}
+	if (config.sections.length === 0) return null;
+	return /* @__PURE__ */ jsx(DropdownMenu, {
+		portalProps: fullscreen && store.root ? { container: store.root } : void 0,
+		items: config.sections.map((section) => ({
+			extra: section === active ? /* @__PURE__ */ jsx(Check, { size: 14 }) : formatTime(section.start),
+			key: `${section.start}`,
+			label: section.title,
+			onClick: () => store.seek(section.start)
+		})),
+		onOpenChange: (open) => frame?.hold(open),
+		children: /* @__PURE__ */ jsxs("button", {
+			title: t("video.sections"),
+			type: "button",
+			...styleProps(styles.chip),
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-direction": shown.direction,
+				"data-video-section-label": "",
+				...styleProps([
+					styles.chipText,
+					shown.direction === "forward" && styles.chipLabelForward,
+					shown.direction === "backward" && styles.chipLabelBackward
+				]),
+				children: active?.title ?? t("video.sections")
+			}, active?.start ?? "none"), /* @__PURE__ */ jsx(ChevronRight, { size: 14 })]
+		})
+	});
+};
+SectionMenu.displayName = "VideoSectionMenu";
+//#endregion
+export { SectionMenu as default };
+
+//# sourceMappingURL=SectionMenu.mjs.map

package/es/Video/parts/SectionMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionMenu.mjs","names":["videoMessages"],"sources":["../../../src/Video/parts/SectionMenu.tsx"],"sourcesContent":["'use client';\n\nimport { Check, ChevronRight } from 'lucide-react';\nimport { use, useState } from 'react';\n\nimport DropdownMenu from '@/DropdownMenu';\nimport videoMessages from '@/i18n/resources/en/video';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext, useVideoContext } from '../context';\nimport { styles } from '../style';\nimport { formatTime } from '../time';\nimport { useFullscreen } from '../useFullscreen';\nimport { useVideo } from '../useVideo';\n\nconst SectionMenu = () => {\n  const { config, store } = useVideoContext();\n  const frame = use(FrameContext);\n  const fullscreen = useFullscreen(store);\n  const { t } = useTranslation(videoMessages);\n  const active = useVideo((state) => state.activeSection);\n  const [shown, setShown] = useState({ direction: 'none', section: active });\n  if (shown.section !== active) {\n    const from = shown.section ? config.sections.indexOf(shown.section) : -1;\n    const to = active ? config.sections.indexOf(active) : -1;\n    setShown({ direction: to >= from ? 'forward' : 'backward', section: active });\n  }\n  if (config.sections.length === 0) return null;\n\n  return (\n    <DropdownMenu\n      portalProps={fullscreen && store.root ? { container: store.root } : undefined}\n      items={config.sections.map((section) => ({\n        extra: section === active ? <Check size={14} /> : formatTime(section.start),\n        key: `${section.start}`,\n        label: section.title,\n        onClick: () => store.seek(section.start),\n      }))}\n      onOpenChange={(open) => frame?.hold(open)}\n    >\n      <button title={t('video.sections')} type=\"button\" {...styleProps(styles.chip)}>\n        <span\n          data-direction={shown.direction}\n          data-video-section-label=\"\"\n          key={active?.start ?? 'none'}\n          {...styleProps([\n            styles.chipText,\n            shown.direction === 'forward' && styles.chipLabelForward,\n            shown.direction === 'backward' && styles.chipLabelBackward,\n          ])}\n        >\n          {active?.title ?? t('video.sections')}\n        </span>\n        <ChevronRight size={14} />\n      </button>\n    </DropdownMenu>\n  );\n};\n\nSectionMenu.displayName = 'VideoSectionMenu';\n\nexport default SectionMenu;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,oBAAoB;CACxB,MAAM,EAAE,QAAQ,UAAU,gBAAgB;CAC1C,MAAM,QAAQ,IAAI,YAAY;CAC9B,MAAM,aAAa,cAAc,KAAK;CACtC,MAAM,EAAE,MAAM,eAAeA,aAAa;CAC1C,MAAM,SAAS,UAAU,UAAU,MAAM,aAAa;CACtD,MAAM,CAAC,OAAO,YAAY,SAAS;EAAE,WAAW;EAAQ,SAAS;CAAO,CAAC;CACzE,IAAI,MAAM,YAAY,QAAQ;EAC5B,MAAM,OAAO,MAAM,UAAU,OAAO,SAAS,QAAQ,MAAM,OAAO,IAAI;EAEtE,SAAS;GAAE,YADA,SAAS,OAAO,SAAS,QAAQ,MAAM,IAAI,OAC1B,OAAO,YAAY;GAAY,SAAS;EAAO,CAAC;CAC9E;CACA,IAAI,OAAO,SAAS,WAAW,GAAG,OAAO;CAEzC,OACE,oBAAC,cAAD;EACE,aAAa,cAAc,MAAM,OAAO,EAAE,WAAW,MAAM,KAAK,IAAI,KAAA;EACpE,OAAO,OAAO,SAAS,KAAK,aAAa;GACvC,OAAO,YAAY,SAAS,oBAAC,OAAD,EAAO,MAAM,GAAK,CAAA,IAAI,WAAW,QAAQ,KAAK;GAC1E,KAAK,GAAG,QAAQ;GAChB,OAAO,QAAQ;GACf,eAAe,MAAM,KAAK,QAAQ,KAAK;EACzC,EAAE;EACF,eAAe,SAAS,OAAO,KAAK,IAAI;EAExC,UAAA,qBAAC,UAAD;GAAQ,OAAO,EAAE,gBAAgB;GAAG,MAAK;GAAS,GAAI,WAAW,OAAO,IAAI;GAA5E,UAAA,CACE,oBAAC,QAAD;IACE,kBAAgB,MAAM;IACtB,4BAAyB;IAEzB,GAAI,WAAW;KACb,OAAO;KACP,MAAM,cAAc,aAAa,OAAO;KACxC,MAAM,cAAc,cAAc,OAAO;IAC3C,CAAC;IAEA,UAAA,QAAQ,SAAS,EAAE,gBAAgB;GAChC,GARC,QAAQ,SAAS,MAQlB,GACN,oBAAC,cAAD,EAAc,MAAM,GAAK,CAAA,CACnB;;CACI,CAAA;AAElB;AAEA,YAAY,cAAc"}

package/es/Video/parts/Timeline.d.mts

@@ -0,0 +1,9 @@
+import { VideoTimelineProps } from "../type.mjs";
+//#region src/Video/parts/Timeline.d.ts
+declare const Timeline: {
+  ({ children, className, style, thumbnails }: VideoTimelineProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Timeline as default };
+//# sourceMappingURL=Timeline.d.mts.map

package/es/Video/parts/Timeline.mjs

@@ -0,0 +1,169 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { useVideoContext } from "../context.mjs";
+import { markerColor, styles } from "../style.mjs";
+import { formatTime, mergeSegments, sectionAt } from "../time.mjs";
+import { useVideo } from "../useVideo.mjs";
+import video_default from "../../i18n/resources/en/video.mjs";
+import HoverPreview from "./HoverPreview.mjs";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Video/parts/Timeline.tsx
+const SNAP_RATIO = .012;
+const GAP_PX = 3;
+const PREVIEW_HALF = 88;
+const canHover = () => typeof window === "undefined" || !window.matchMedia?.("(hover: none)").matches;
+const markerName = (marker) => [
+	formatTime(marker.time),
+	marker.label,
+	marker.content
+].filter((part) => typeof part === "string").join(" ");
+const Timeline = ({ children, className, style, thumbnails = true }) => {
+	const { config, media, store } = useVideoContext();
+	const { t } = useTranslation(video_default);
+	const duration = useVideo((state) => Number.isFinite(state.duration) ? state.duration : 0);
+	const trackRef = useRef(null);
+	const [width, setWidth] = useState(0);
+	const [hover, setHover] = useState(null);
+	const [hovering, setHovering] = useState(false);
+	useLayoutEffect(() => {
+		const track = trackRef.current;
+		if (!track) return;
+		setWidth(track.getBoundingClientRect().width);
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+		observer.observe(track);
+		return () => observer.disconnect();
+	}, []);
+	useLayoutEffect(() => {
+		const track = trackRef.current;
+		if (!track) return;
+		const setOnChange = (name, value) => {
+			if (track.getAttribute(name) !== value) track.setAttribute(name, value);
+		};
+		const paint = (state) => {
+			track.style.setProperty("--video-time", String(state.time));
+			setOnChange("aria-valuenow", String(Math.round(state.time)));
+			setOnChange("aria-valuetext", [`${formatTime(state.time)} / ${formatTime(state.duration)}`, state.activeSection?.title].filter(Boolean).join(", "));
+		};
+		paint(store.getState());
+		return store.subscribe(paint);
+	}, [store]);
+	const { hairlines, segments } = useMemo(() => mergeSegments(config.sections, duration, width), [
+		config.sections,
+		duration,
+		width
+	]);
+	const visibleMarkers = useMemo(() => config.markers.filter((marker) => marker.time >= 0 && marker.time <= duration), [config.markers, duration]);
+	const pct = (seconds) => duration > 0 ? seconds / duration * 100 : 0;
+	const timeAt = (element, clientX) => {
+		const box = element.getBoundingClientRect();
+		if (!box.width) return 0;
+		return Math.min(Math.max((clientX - box.left) / box.width, 0), 1) * duration;
+	};
+	const onPointerDown = (event) => {
+		if (event.button !== 0 || !duration) return;
+		const element = event.currentTarget;
+		store.seek(timeAt(element, event.clientX));
+		element.setPointerCapture?.(event.pointerId);
+		const move = (next) => store.seek(timeAt(element, next.clientX));
+		const up = () => {
+			element.removeEventListener("pointermove", move);
+			element.removeEventListener("pointerup", up);
+			element.removeEventListener("pointercancel", up);
+		};
+		element.addEventListener("pointermove", move);
+		element.addEventListener("pointerup", up);
+		element.addEventListener("pointercancel", up);
+	};
+	const onPointerMove = (event) => {
+		if (event.pointerType === "touch" || !duration || !canHover()) return;
+		const element = event.currentTarget;
+		const box = element.getBoundingClientRect();
+		const seconds = timeAt(element, event.clientX);
+		const snap = duration * SNAP_RATIO;
+		const marker = visibleMarkers.find((item) => Math.abs(item.time - seconds) < snap);
+		setHovering(true);
+		setHover({
+			marker,
+			time: marker?.time ?? seconds,
+			x: Math.min(Math.max(event.clientX - box.left, PREVIEW_HALF), Math.max(box.width - PREVIEW_HALF, PREVIEW_HALF))
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...styleProps(void 0, className, {
+			position: "relative",
+			...style
+		}),
+		children: [
+			hover && /* @__PURE__ */ jsx(HoverPreview, {
+				marker: hover.marker,
+				section: sectionAt(config.sections, hover.time),
+				src: media.src,
+				thumbnail: thumbnails,
+				time: hover.time,
+				visible: hovering,
+				x: hover.x
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"aria-label": t("video.seek"),
+				"aria-valuemax": Math.round(duration),
+				"aria-valuemin": 0,
+				ref: trackRef,
+				role: "slider",
+				...styleProps(styles.track),
+				onPointerDown,
+				onPointerLeave: () => setHovering(false),
+				onPointerMove,
+				children: [
+					segments.map((segment, index) => {
+						const span = segment.end - segment.start;
+						const hovered = hovering && hover !== null && hover.time >= segment.start && hover.time < segment.end;
+						const hoverFill = hovering && hover ? Math.min(Math.max((hover.time - segment.start) / span, 0), 1) : 0;
+						const leftInset = index === 0 ? 0 : GAP_PX / 2;
+						const rightInset = index === segments.length - 1 ? 0 : GAP_PX / 2;
+						return /* @__PURE__ */ jsxs("div", {
+							"data-video-segment": "",
+							...styleProps([styles.segment, hovered && styles.segmentHovered], void 0, {
+								left: `calc(${pct(segment.start)}% + ${leftInset}px)`,
+								width: `calc(${pct(span)}% - ${leftInset + rightInset}px)`
+							}),
+							children: [hoverFill > 0 && /* @__PURE__ */ jsx("div", { ...styleProps(styles.segmentFill, void 0, {
+								background: "rgb(255 255 255 / 32%)",
+								width: `${hoverFill * 100}%`
+							}) }), /* @__PURE__ */ jsx("div", { ...styleProps(styles.segmentFill, void 0, {
+								background: "#fff",
+								width: `calc(clamp(0, (var(--video-time, 0) - ${segment.start}) / ${span}, 1) * 100%)`
+							}) })]
+						}, segment.start);
+					}),
+					hairlines.map((at) => /* @__PURE__ */ jsx("div", { ...styleProps(styles.hairline, void 0, { left: `${pct(at)}%` }) }, at)),
+					/* @__PURE__ */ jsx("div", { ...styleProps(styles.head, void 0, { left: duration > 0 ? `calc(var(--video-time, 0) / ${duration} * 100%)` : 0 }) }),
+					visibleMarkers.map((marker, index) => /* @__PURE__ */ jsx("button", {
+						"aria-label": markerName(marker),
+						type: "button",
+						...styleProps(styles.marker, void 0, {
+							background: markerColor(marker.color),
+							left: `${pct(marker.time)}%`
+						}),
+						onPointerDown: (event) => event.stopPropagation(),
+						onClick: (event) => {
+							event.stopPropagation();
+							store.pause();
+							store.seek(marker.time);
+							store.setCaptions(true);
+							config.onMarkerClick?.(marker);
+						}
+					}, marker.key ?? `${marker.time}-${index}`))
+				]
+			}),
+			children
+		]
+	});
+};
+Timeline.displayName = "VideoTimeline";
+//#endregion
+export { Timeline as default };
+
+//# sourceMappingURL=Timeline.mjs.map