@lobehub/ui 6.0.0-beta.2 → 6.0.0-beta.4

package/es/Video/parts/Frame.mjs

@@ -0,0 +1,101 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { FrameContext, useVideoContext } from "../context.mjs";
+import { styles } from "../style.mjs";
+import { useVideo } from "../useVideo.mjs";
+import { useControlsIdle } from "../useControlsIdle.mjs";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Video/parts/Frame.tsx
+const isFocusVisible = (element) => {
+	try {
+		return element.matches(":focus-visible");
+	} catch {
+		return true;
+	}
+};
+const Frame = ({ children, className, style }) => {
+	const { media, store } = useVideoContext();
+	const videoRef = useRef(null);
+	const pointerTypeRef = useRef("mouse");
+	const size = useVideo((state) => state.size);
+	const idleForced = useVideo((state) => state.paused || state.status !== "ready");
+	const idle = useControlsIdle(idleForced);
+	const [overlay, setOverlay] = useState(false);
+	useEffect(() => {
+		const video = videoRef.current;
+		if (!video) return;
+		return store.attach(video);
+	}, [store, media.src]);
+	const frame = useMemo(() => ({
+		hold: idle.hold,
+		overlay,
+		setOverlay,
+		visible: idle.visible
+	}), [
+		idle.hold,
+		idle.visible,
+		overlay
+	]);
+	const aspectRatio = size?.height ? `${size.width} / ${size.height}` : "16 / 9";
+	return /* @__PURE__ */ jsx(FrameContext, {
+		value: frame,
+		children: /* @__PURE__ */ jsxs("div", {
+			...styleProps(styles.frame, className, {
+				aspectRatio,
+				...style
+			}),
+			onBlur: (event) => {
+				if (!event.currentTarget.contains(event.relatedTarget)) idle.setFocused(false);
+			},
+			onFocus: (event) => {
+				idle.setFocused(isFocusVisible(event.target));
+			},
+			onPointerDownCapture: (event) => {
+				pointerTypeRef.current = event.pointerType || "mouse";
+			},
+			onPointerLeave: (event) => {
+				if (event.pointerType !== "touch") idle.sleep();
+			},
+			onPointerMove: (event) => {
+				if (event.pointerType !== "touch") idle.wake();
+			},
+			children: [
+				/* @__PURE__ */ jsx("video", {
+					playsInline: true,
+					autoPlay: media.autoPlay,
+					loop: media.loop,
+					poster: media.poster,
+					preload: media.preload,
+					ref: videoRef,
+					src: media.src,
+					onEnded: media.onEnded,
+					onError: media.onError,
+					onPause: media.onPause,
+					onPlay: media.onPlay,
+					onTimeUpdate: media.onTimeUpdate,
+					...styleProps(styles.video)
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-video-surface": "",
+					...styleProps(styles.surface),
+					onDoubleClick: () => store.toggleFullscreen(),
+					onClick: () => {
+						if (pointerTypeRef.current === "touch" && !idle.visible) {
+							idle.wake();
+							return;
+						}
+						if (pointerTypeRef.current === "touch") idle.wake();
+						store.toggle();
+					}
+				}),
+				children
+			]
+		})
+	});
+};
+Frame.displayName = "VideoFrame";
+//#endregion
+export { Frame as default };
+
+//# sourceMappingURL=Frame.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Frame.mjs","names":[],"sources":["../../../src/Video/parts/Frame.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext, type FrameContextValue, useVideoContext } from '../context';\nimport { styles } from '../style';\nimport type { VideoFrameProps } from '../type';\nimport { useControlsIdle } from '../useControlsIdle';\nimport { useVideo } from '../useVideo';\n\nconst isFocusVisible = (element: Element) => {\n  try {\n    return element.matches(':focus-visible');\n  } catch {\n    return true;\n  }\n};\n\nconst Frame = ({ children, className, style }: VideoFrameProps) => {\n  const { media, store } = useVideoContext();\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const pointerTypeRef = useRef('mouse');\n  const size = useVideo((state) => state.size);\n  const idleForced = useVideo((state) => state.paused || state.status !== 'ready');\n  const idle = useControlsIdle(idleForced);\n  const [overlay, setOverlay] = useState(false);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video) return;\n    return store.attach(video);\n  }, [store, media.src]);\n\n  const frame = useMemo<FrameContextValue>(\n    () => ({ hold: idle.hold, overlay, setOverlay, visible: idle.visible }),\n    [idle.hold, idle.visible, overlay],\n  );\n\n  const aspectRatio = size?.height ? `${size.width} / ${size.height}` : '16 / 9';\n\n  return (\n    <FrameContext value={frame}>\n      <div\n        {...styleProps(styles.frame, className, { aspectRatio, ...style })}\n        onBlur={(event) => {\n          if (!event.currentTarget.contains(event.relatedTarget as Node | null))\n            idle.setFocused(false);\n        }}\n        onFocus={(event) => {\n          idle.setFocused(isFocusVisible(event.target));\n        }}\n        onPointerDownCapture={(event) => {\n          pointerTypeRef.current = event.pointerType || 'mouse';\n        }}\n        onPointerLeave={(event) => {\n          if (event.pointerType !== 'touch') idle.sleep();\n        }}\n        onPointerMove={(event) => {\n          if (event.pointerType !== 'touch') idle.wake();\n        }}\n      >\n        <video\n          playsInline\n          autoPlay={media.autoPlay}\n          loop={media.loop}\n          poster={media.poster}\n          preload={media.preload}\n          ref={videoRef}\n          src={media.src}\n          onEnded={media.onEnded}\n          onError={media.onError}\n          onPause={media.onPause}\n          onPlay={media.onPlay}\n          onTimeUpdate={media.onTimeUpdate}\n          {...styleProps(styles.video)}\n        />\n        <div\n          data-video-surface=\"\"\n          {...styleProps(styles.surface)}\n          onDoubleClick={() => store.toggleFullscreen()}\n          onClick={() => {\n            if (pointerTypeRef.current === 'touch' && !idle.visible) {\n              idle.wake();\n              return;\n            }\n            if (pointerTypeRef.current === 'touch') idle.wake();\n            store.toggle();\n          }}\n        />\n        {children}\n      </div>\n    </FrameContext>\n  );\n};\n\nFrame.displayName = 'VideoFrame';\n\nexport default Frame;\n"],"mappings":";;;;;;;;;AAYA,MAAM,kBAAkB,YAAqB;CAC3C,IAAI;EACF,OAAO,QAAQ,QAAQ,gBAAgB;CACzC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,MAAM,SAAS,EAAE,UAAU,WAAW,YAA6B;CACjE,MAAM,EAAE,OAAO,UAAU,gBAAgB;CACzC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,iBAAiB,OAAO,OAAO;CACrC,MAAM,OAAO,UAAU,UAAU,MAAM,IAAI;CAC3C,MAAM,aAAa,UAAU,UAAU,MAAM,UAAU,MAAM,WAAW,OAAO;CAC/E,MAAM,OAAO,gBAAgB,UAAU;CACvC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,gBAAgB;EACd,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,OAAO,MAAM,OAAO,KAAK;CAC3B,GAAG,CAAC,OAAO,MAAM,GAAG,CAAC;CAErB,MAAM,QAAQ,eACL;EAAE,MAAM,KAAK;EAAM;EAAS;EAAY,SAAS,KAAK;CAAQ,IACrE;EAAC,KAAK;EAAM,KAAK;EAAS;CAAO,CACnC;CAEA,MAAM,cAAc,MAAM,SAAS,GAAG,KAAK,MAAM,KAAK,KAAK,WAAW;CAEtE,OACE,oBAAC,cAAD;EAAc,OAAO;EACnB,UAAA,qBAAC,OAAD;GACE,GAAI,WAAW,OAAO,OAAO,WAAW;IAAE;IAAa,GAAG;GAAM,CAAC;GACjE,SAAS,UAAU;IACjB,IAAI,CAAC,MAAM,cAAc,SAAS,MAAM,aAA4B,GAClE,KAAK,WAAW,KAAK;GACzB;GACA,UAAU,UAAU;IAClB,KAAK,WAAW,eAAe,MAAM,MAAM,CAAC;GAC9C;GACA,uBAAuB,UAAU;IAC/B,eAAe,UAAU,MAAM,eAAe;GAChD;GACA,iBAAiB,UAAU;IACzB,IAAI,MAAM,gBAAgB,SAAS,KAAK,MAAM;GAChD;GACA,gBAAgB,UAAU;IACxB,IAAI,MAAM,gBAAgB,SAAS,KAAK,KAAK;GAC/C;GAjBF,UAAA;IAmBE,oBAAC,SAAD;KACE,aAAA;KACA,UAAU,MAAM;KAChB,MAAM,MAAM;KACZ,QAAQ,MAAM;KACd,SAAS,MAAM;KACf,KAAK;KACL,KAAK,MAAM;KACX,SAAS,MAAM;KACf,SAAS,MAAM;KACf,SAAS,MAAM;KACf,QAAQ,MAAM;KACd,cAAc,MAAM;KACpB,GAAI,WAAW,OAAO,KAAK;IAC5B,CAAA;IACD,oBAAC,OAAD;KACE,sBAAmB;KACnB,GAAI,WAAW,OAAO,OAAO;KAC7B,qBAAqB,MAAM,iBAAiB;KAC5C,eAAe;MACb,IAAI,eAAe,YAAY,WAAW,CAAC,KAAK,SAAS;OACvD,KAAK,KAAK;OACV;MACF;MACA,IAAI,eAAe,YAAY,SAAS,KAAK,KAAK;MAClD,MAAM,OAAO;KACf;IACD,CAAA;IACA;GACE;;CACO,CAAA;AAElB;AAEA,MAAM,cAAc"}

package/es/Video/parts/HoverPreview.mjs

@@ -0,0 +1,93 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { markerColor, styles } from "../style.mjs";
+import { formatTime } from "../time.mjs";
+import { useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/Video/parts/HoverPreview.tsx
+const Thumbnail = ({ src, time }) => {
+	const canvasRef = useRef(null);
+	const probeRef = useRef(null);
+	const pendingRef = useRef(null);
+	const busyRef = useRef(false);
+	useEffect(() => {
+		const probe = probeRef.current;
+		if (!probe) return;
+		const paint = () => {
+			const canvas = canvasRef.current;
+			try {
+				canvas?.getContext("2d")?.drawImage(probe, 0, 0, canvas.width, canvas.height);
+			} catch {}
+			busyRef.current = false;
+			if (pendingRef.current === null) return;
+			busyRef.current = true;
+			probe.currentTime = pendingRef.current;
+			pendingRef.current = null;
+		};
+		const reset = () => {
+			busyRef.current = false;
+		};
+		probe.addEventListener("seeked", paint);
+		probe.addEventListener("error", reset);
+		return () => {
+			probe.removeEventListener("seeked", paint);
+			probe.removeEventListener("error", reset);
+			probe.removeAttribute("src");
+			probe.load?.();
+		};
+	}, []);
+	useEffect(() => {
+		const probe = probeRef.current;
+		if (!probe) return;
+		if (busyRef.current) {
+			pendingRef.current = time;
+			return;
+		}
+		busyRef.current = true;
+		probe.currentTime = time;
+	}, [time]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("video", {
+		muted: true,
+		playsInline: true,
+		preload: "auto",
+		ref: probeRef,
+		src,
+		style: { display: "none" }
+	}), /* @__PURE__ */ jsx("canvas", {
+		height: 99,
+		ref: canvasRef,
+		width: 176,
+		...styleProps(styles.previewCanvas)
+	})] });
+};
+const HoverPreview = ({ marker, section, src, thumbnail, time, visible, x }) => /* @__PURE__ */ jsxs("div", {
+	...styleProps(styles.preview, void 0, {
+		display: visible ? void 0 : "none",
+		left: x
+	}),
+	children: [
+		thumbnail && /* @__PURE__ */ jsx(Thumbnail, {
+			src,
+			time
+		}),
+		(section || marker) && /* @__PURE__ */ jsxs("div", {
+			...styleProps(styles.previewLabel),
+			children: [section && /* @__PURE__ */ jsx("div", {
+				...styleProps(styles.previewTitle),
+				children: section.title
+			}), marker && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { ...styleProps(styles.dot, void 0, {
+				background: markerColor(marker.color),
+				display: "inline-block",
+				marginInlineEnd: 6
+			}) }), marker.content ?? marker.label] })]
+		}),
+		/* @__PURE__ */ jsx("div", {
+			...styleProps(styles.previewTime),
+			children: formatTime(time)
+		})
+	]
+});
+//#endregion
+export { HoverPreview as default };
+
+//# sourceMappingURL=HoverPreview.mjs.map

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"}