@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.3

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.mjs","names":["videoMessages"],"sources":["../../../src/Video/parts/Timeline.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type PointerEvent as ReactPointerEvent,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from '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 { markerColor, styles } from '../style';\nimport { formatTime, mergeSegments, sectionAt } from '../time';\nimport type { VideoMarker, VideoState, VideoTimelineProps } from '../type';\nimport { useVideo } from '../useVideo';\nimport HoverPreview from './HoverPreview';\n\nconst SNAP_RATIO = 0.012;\nconst GAP_PX = 3;\nconst PREVIEW_HALF = 88;\n\ninterface Hover {\n  marker?: VideoMarker;\n  time: number;\n  x: number;\n}\n\nconst canHover = () =>\n  typeof window === 'undefined' || !window.matchMedia?.('(hover: none)').matches;\n\nconst markerName = (marker: VideoMarker) =>\n  [formatTime(marker.time), marker.label, marker.content]\n    .filter((part) => typeof part === 'string')\n    .join(' ');\n\nconst Timeline = ({ children, className, style, thumbnails = true }: VideoTimelineProps) => {\n  const { config, media, store } = useVideoContext();\n  const { t } = useTranslation(videoMessages);\n  const duration = useVideo((state) => (Number.isFinite(state.duration) ? state.duration : 0));\n  const trackRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n  const [hover, setHover] = useState<Hover | null>(null);\n  const [hovering, setHovering] = useState(false);\n\n  useLayoutEffect(() => {\n    const track = trackRef.current;\n    if (!track) return;\n    setWidth(track.getBoundingClientRect().width);\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));\n    observer.observe(track);\n    return () => observer.disconnect();\n  }, []);\n\n  // Playback must not re-render the timeline: the playhead and the played\n  // fills read --video-time, written straight to the track on every frame.\n  useLayoutEffect(() => {\n    const track = trackRef.current;\n    if (!track) return;\n    const setOnChange = (name: string, value: string) => {\n      if (track.getAttribute(name) !== value) track.setAttribute(name, value);\n    };\n    const paint = (state: VideoState) => {\n      track.style.setProperty('--video-time', String(state.time));\n      setOnChange('aria-valuenow', String(Math.round(state.time)));\n      setOnChange(\n        'aria-valuetext',\n        [`${formatTime(state.time)} / ${formatTime(state.duration)}`, state.activeSection?.title]\n          .filter(Boolean)\n          .join(', '),\n      );\n    };\n    paint(store.getState());\n    return store.subscribe(paint);\n  }, [store]);\n\n  const { hairlines, segments } = useMemo(\n    () => mergeSegments(config.sections, duration, width),\n    [config.sections, duration, width],\n  );\n\n  const visibleMarkers = useMemo(\n    () => config.markers.filter((marker) => marker.time >= 0 && marker.time <= duration),\n    [config.markers, duration],\n  );\n\n  const pct = (seconds: number) => (duration > 0 ? (seconds / duration) * 100 : 0);\n  const timeAt = (element: HTMLElement, clientX: number) => {\n    const box = element.getBoundingClientRect();\n    if (!box.width) return 0;\n    return Math.min(Math.max((clientX - box.left) / box.width, 0), 1) * duration;\n  };\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0 || !duration) return;\n    const element = event.currentTarget;\n    store.seek(timeAt(element, event.clientX));\n    element.setPointerCapture?.(event.pointerId);\n    const move = (next: PointerEvent) => store.seek(timeAt(element, next.clientX));\n    const up = () => {\n      element.removeEventListener('pointermove', move);\n      element.removeEventListener('pointerup', up);\n      element.removeEventListener('pointercancel', up);\n    };\n    element.addEventListener('pointermove', move);\n    element.addEventListener('pointerup', up);\n    element.addEventListener('pointercancel', up);\n  };\n\n  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (event.pointerType === 'touch' || !duration || !canHover()) return;\n    const element = event.currentTarget;\n    const box = element.getBoundingClientRect();\n    const seconds = timeAt(element, event.clientX);\n    const snap = duration * SNAP_RATIO;\n    const marker = visibleMarkers.find((item) => Math.abs(item.time - seconds) < snap);\n    setHovering(true);\n    setHover({\n      marker,\n      time: marker?.time ?? seconds,\n      x: Math.min(\n        Math.max(event.clientX - box.left, PREVIEW_HALF),\n        Math.max(box.width - PREVIEW_HALF, PREVIEW_HALF),\n      ),\n    });\n  };\n\n  return (\n    <div {...styleProps(undefined, className, { position: 'relative', ...style })}>\n      {hover && (\n        <HoverPreview\n          marker={hover.marker}\n          section={sectionAt(config.sections, hover.time)}\n          src={media.src}\n          thumbnail={thumbnails}\n          time={hover.time}\n          visible={hovering}\n          x={hover.x}\n        />\n      )}\n      <div\n        aria-label={t('video.seek')}\n        aria-valuemax={Math.round(duration)}\n        aria-valuemin={0}\n        ref={trackRef}\n        role=\"slider\"\n        {...styleProps(styles.track)}\n        onPointerDown={onPointerDown}\n        onPointerLeave={() => setHovering(false)}\n        onPointerMove={onPointerMove}\n      >\n        {segments.map((segment, index) => {\n          const span = segment.end - segment.start;\n          const hovered =\n            hovering && hover !== null && hover.time >= segment.start && hover.time < segment.end;\n          const hoverFill =\n            hovering && hover ? Math.min(Math.max((hover.time - segment.start) / span, 0), 1) : 0;\n          const leftInset = index === 0 ? 0 : GAP_PX / 2;\n          const rightInset = index === segments.length - 1 ? 0 : GAP_PX / 2;\n          return (\n            <div\n              data-video-segment=\"\"\n              key={segment.start}\n              {...styleProps([styles.segment, hovered && styles.segmentHovered], undefined, {\n                left: `calc(${pct(segment.start)}% + ${leftInset}px)`,\n                width: `calc(${pct(span)}% - ${leftInset + rightInset}px)`,\n              })}\n            >\n              {hoverFill > 0 && (\n                <div\n                  {...styleProps(styles.segmentFill, undefined, {\n                    background: 'rgb(255 255 255 / 32%)',\n                    width: `${hoverFill * 100}%`,\n                  })}\n                />\n              )}\n              <div\n                {...styleProps(styles.segmentFill, undefined, {\n                  background: '#fff',\n                  width: `calc(clamp(0, (var(--video-time, 0) - ${segment.start}) / ${span}, 1) * 100%)`,\n                })}\n              />\n            </div>\n          );\n        })}\n        {hairlines.map((at) => (\n          <div key={at} {...styleProps(styles.hairline, undefined, { left: `${pct(at)}%` })} />\n        ))}\n        <div\n          {...styleProps(styles.head, undefined, {\n            left: duration > 0 ? `calc(var(--video-time, 0) / ${duration} * 100%)` : 0,\n          })}\n        />\n        {visibleMarkers.map((marker, index) => (\n          <button\n            aria-label={markerName(marker)}\n            key={marker.key ?? `${marker.time}-${index}`}\n            type=\"button\"\n            {...styleProps(styles.marker, undefined, {\n              background: markerColor(marker.color),\n              left: `${pct(marker.time)}%`,\n            })}\n            onPointerDown={(event) => event.stopPropagation()}\n            onClick={(event) => {\n              event.stopPropagation();\n              store.pause();\n              store.seek(marker.time);\n              store.setCaptions(true);\n              config.onMarkerClick?.(marker);\n            }}\n          />\n        ))}\n      </div>\n      {children}\n    </div>\n  );\n};\n\nTimeline.displayName = 'VideoTimeline';\n\nexport default Timeline;\n"],"mappings":"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"}