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

package/es/Video/parts/Controls.mjs

@@ -0,0 +1,128 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { FrameContext, useVideoContext } from "../context.mjs";
+import { styles } from "../style.mjs";
+import { formatTime, frameOf } from "../time.mjs";
+import { useVideo } from "../useVideo.mjs";
+import video_default from "../../i18n/resources/en/video.mjs";
+import { useFullscreen } from "../useFullscreen.mjs";
+import PlayPauseIcon from "./PlayPauseIcon.mjs";
+import RateMenu from "./RateMenu.mjs";
+import SectionMenu from "./SectionMenu.mjs";
+import Timeline from "./Timeline.mjs";
+import { use, useLayoutEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Captions, ChevronLeft, ChevronRight, Maximize, Minimize, Volume2, VolumeX } from "lucide-react";
+//#region src/Video/parts/Controls.tsx
+const BarButton = ({ active, children, label, onClick, pressed, shortcut }) => /* @__PURE__ */ jsx("button", {
+	"aria-label": label,
+	"aria-pressed": pressed,
+	title: shortcut ? `${label} (${shortcut})` : label,
+	type: "button",
+	...styleProps([styles.barButton, active && styles.barButtonActive]),
+	onClick,
+	children
+});
+const TimeReadout = () => {
+	const seconds = useVideo((state) => Math.floor(state.time));
+	const duration = useVideo((state) => state.duration);
+	return /* @__PURE__ */ jsx("span", {
+		...styleProps(styles.time, void 0, { marginInline: 6 }),
+		children: `${formatTime(seconds)} / ${formatTime(duration)}`
+	});
+};
+const FrameReadout = () => {
+	const { config } = useVideoContext();
+	const { t } = useTranslation(video_default);
+	const frame = useVideo((state) => frameOf(state.time, config.fps));
+	return /* @__PURE__ */ jsx("span", {
+		...styleProps(styles.frameNo, void 0, { marginInlineEnd: 6 }),
+		children: `${t("video.frame")} ${frame}`
+	});
+};
+const Controls = ({ children, className, extra, frameStep, style }) => {
+	const { config, store } = useVideoContext();
+	const frame = use(FrameContext);
+	const { t } = useTranslation(video_default);
+	const paused = useVideo((state) => state.paused);
+	const muted = useVideo((state) => state.muted);
+	const captions = useVideo((state) => state.captions);
+	const ready = useVideo((state) => state.status === "ready");
+	const fullscreen = useFullscreen(store);
+	const overlay = frame !== null;
+	useLayoutEffect(() => {
+		if (!frame) return;
+		frame.setOverlay(true);
+		return () => frame.setOverlay(false);
+	}, [frame?.setOverlay]);
+	const visible = !overlay || frame.visible;
+	const hasCaptions = config.markers.some((marker) => marker.content !== void 0 && marker.content !== null);
+	return /* @__PURE__ */ jsx("div", {
+		"data-video-controls": "",
+		"data-visible": String(visible),
+		...styleProps([
+			styles.controls,
+			overlay ? styles.controlsOverlay : styles.controlsBelow,
+			overlay && !visible && styles.controlsHidden
+		], className, style),
+		onClick: (event) => event.stopPropagation(),
+		onDoubleClick: (event) => event.stopPropagation(),
+		children: /* @__PURE__ */ jsxs("div", {
+			...styleProps(!ready && styles.disabled),
+			children: [children ?? /* @__PURE__ */ jsx(Timeline, {}), /* @__PURE__ */ jsxs("div", {
+				...styleProps(styles.row),
+				children: [
+					/* @__PURE__ */ jsx(BarButton, {
+						label: paused ? t("video.play") : t("video.pause"),
+						shortcut: "K",
+						onClick: store.toggle,
+						children: /* @__PURE__ */ jsx(PlayPauseIcon, { paused })
+					}),
+					/* @__PURE__ */ jsx(BarButton, {
+						label: muted ? t("video.unmute") : t("video.mute"),
+						shortcut: "M",
+						onClick: store.toggleMute,
+						children: muted ? /* @__PURE__ */ jsx(VolumeX, { size: 16 }) : /* @__PURE__ */ jsx(Volume2, { size: 16 })
+					}),
+					frameStep && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BarButton, {
+						label: t("video.previousFrame"),
+						shortcut: ",",
+						onClick: () => store.step(-1),
+						children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
+					}), /* @__PURE__ */ jsx(BarButton, {
+						label: t("video.nextFrame"),
+						shortcut: ".",
+						onClick: () => store.step(1),
+						children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+					})] }),
+					/* @__PURE__ */ jsx(TimeReadout, {}),
+					frameStep && /* @__PURE__ */ jsx(FrameReadout, {}),
+					/* @__PURE__ */ jsx(SectionMenu, {}),
+					/* @__PURE__ */ jsx("div", { ...styleProps(styles.spacer) }),
+					extra,
+					hasCaptions && /* @__PURE__ */ jsx(BarButton, {
+						active: captions,
+						label: captions ? t("video.captionsHide") : t("video.captionsShow"),
+						pressed: captions,
+						shortcut: "C",
+						onClick: () => store.setCaptions(!captions),
+						children: /* @__PURE__ */ jsx(Captions, { size: 16 })
+					}),
+					/* @__PURE__ */ jsx(RateMenu, {}),
+					/* @__PURE__ */ jsx(BarButton, {
+						label: fullscreen ? t("video.exitFullscreen") : t("video.fullscreen"),
+						shortcut: "F",
+						onClick: store.toggleFullscreen,
+						children: fullscreen ? /* @__PURE__ */ jsx(Minimize, { size: 15 }) : /* @__PURE__ */ jsx(Maximize, { size: 15 })
+					})
+				]
+			})]
+		})
+	});
+};
+Controls.displayName = "VideoControls";
+//#endregion
+export { Controls as default };
+
+//# sourceMappingURL=Controls.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Controls.mjs","names":["videoMessages"],"sources":["../../../src/Video/parts/Controls.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Captions,\n  ChevronLeft,\n  ChevronRight,\n  Maximize,\n  Minimize,\n  Volume2,\n  VolumeX,\n} from 'lucide-react';\nimport { type ReactNode, use, useLayoutEffect } from 'react';\n\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, frameOf } from '../time';\nimport type { VideoControlsProps } from '../type';\nimport { useFullscreen } from '../useFullscreen';\nimport { useVideo } from '../useVideo';\nimport PlayPauseIcon from './PlayPauseIcon';\nimport RateMenu from './RateMenu';\nimport SectionMenu from './SectionMenu';\nimport Timeline from './Timeline';\n\nconst BarButton = ({\n  active,\n  children,\n  label,\n  onClick,\n  pressed,\n  shortcut,\n}: {\n  active?: boolean;\n  children: ReactNode;\n  label: string;\n  onClick: () => void;\n  pressed?: boolean;\n  shortcut?: string;\n}) => (\n  <button\n    aria-label={label}\n    aria-pressed={pressed}\n    title={shortcut ? `${label} (${shortcut})` : label}\n    type=\"button\"\n    {...styleProps([styles.barButton, active && styles.barButtonActive])}\n    onClick={onClick}\n  >\n    {children}\n  </button>\n);\n\n// Leaves so playback re-renders only these, and the clock only once a second.\nconst TimeReadout = () => {\n  const seconds = useVideo((state) => Math.floor(state.time));\n  const duration = useVideo((state) => state.duration);\n  return (\n    <span {...styleProps(styles.time, undefined, { marginInline: 6 })}>\n      {`${formatTime(seconds)} / ${formatTime(duration)}`}\n    </span>\n  );\n};\n\nconst FrameReadout = () => {\n  const { config } = useVideoContext();\n  const { t } = useTranslation(videoMessages);\n  const frame = useVideo((state) => frameOf(state.time, config.fps));\n  return (\n    <span {...styleProps(styles.frameNo, undefined, { marginInlineEnd: 6 })}>\n      {`${t('video.frame')} ${frame}`}\n    </span>\n  );\n};\n\nconst Controls = ({ children, className, extra, frameStep, style }: VideoControlsProps) => {\n  const { config, store } = useVideoContext();\n  const frame = use(FrameContext);\n  const { t } = useTranslation(videoMessages);\n  const paused = useVideo((state) => state.paused);\n  const muted = useVideo((state) => state.muted);\n  const captions = useVideo((state) => state.captions);\n  const ready = useVideo((state) => state.status === 'ready');\n  const fullscreen = useFullscreen(store);\n  const overlay = frame !== null;\n\n  useLayoutEffect(() => {\n    if (!frame) return;\n    frame.setOverlay(true);\n    return () => frame.setOverlay(false);\n  }, [frame?.setOverlay]);\n  const visible = !overlay || frame.visible;\n  const hasCaptions = config.markers.some(\n    (marker) => marker.content !== undefined && marker.content !== null,\n  );\n\n  return (\n    <div\n      data-video-controls=\"\"\n      data-visible={String(visible)}\n      {...styleProps(\n        [\n          styles.controls,\n          overlay ? styles.controlsOverlay : styles.controlsBelow,\n          overlay && !visible && styles.controlsHidden,\n        ],\n        className,\n        style,\n      )}\n      onClick={(event) => event.stopPropagation()}\n      onDoubleClick={(event) => event.stopPropagation()}\n    >\n      <div {...styleProps(!ready && styles.disabled)}>\n        {children ?? <Timeline />}\n        <div {...styleProps(styles.row)}>\n          <BarButton\n            label={paused ? t('video.play') : t('video.pause')}\n            shortcut=\"K\"\n            onClick={store.toggle}\n          >\n            <PlayPauseIcon paused={paused} />\n          </BarButton>\n          <BarButton\n            label={muted ? t('video.unmute') : t('video.mute')}\n            shortcut=\"M\"\n            onClick={store.toggleMute}\n          >\n            {muted ? <VolumeX size={16} /> : <Volume2 size={16} />}\n          </BarButton>\n          {frameStep && (\n            <>\n              <BarButton\n                label={t('video.previousFrame')}\n                shortcut=\",\"\n                onClick={() => store.step(-1)}\n              >\n                <ChevronLeft size={16} />\n              </BarButton>\n              <BarButton label={t('video.nextFrame')} shortcut=\".\" onClick={() => store.step(1)}>\n                <ChevronRight size={16} />\n              </BarButton>\n            </>\n          )}\n          <TimeReadout />\n          {frameStep && <FrameReadout />}\n          <SectionMenu />\n          <div {...styleProps(styles.spacer)} />\n          {extra}\n          {hasCaptions && (\n            <BarButton\n              active={captions}\n              label={captions ? t('video.captionsHide') : t('video.captionsShow')}\n              pressed={captions}\n              shortcut=\"C\"\n              onClick={() => store.setCaptions(!captions)}\n            >\n              <Captions size={16} />\n            </BarButton>\n          )}\n          <RateMenu />\n          <BarButton\n            label={fullscreen ? t('video.exitFullscreen') : t('video.fullscreen')}\n            shortcut=\"F\"\n            onClick={store.toggleFullscreen}\n          >\n            {fullscreen ? <Minimize size={15} /> : <Maximize size={15} />}\n          </BarButton>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nControls.displayName = 'VideoControls';\n\nexport default Controls;\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,MAAM,aAAa,EACjB,QACA,UACA,OACA,SACA,SACA,eASA,oBAAC,UAAD;CACE,cAAY;CACZ,gBAAc;CACd,OAAO,WAAW,GAAG,MAAM,IAAI,SAAS,KAAK;CAC7C,MAAK;CACL,GAAI,WAAW,CAAC,OAAO,WAAW,UAAU,OAAO,eAAe,CAAC;CAC1D;CAER;AACK,CAAA;AAIV,MAAM,oBAAoB;CACxB,MAAM,UAAU,UAAU,UAAU,KAAK,MAAM,MAAM,IAAI,CAAC;CAC1D,MAAM,WAAW,UAAU,UAAU,MAAM,QAAQ;CACnD,OACE,oBAAC,QAAD;EAAM,GAAI,WAAW,OAAO,MAAM,KAAA,GAAW,EAAE,cAAc,EAAE,CAAC;EAC7D,UAAA,GAAG,WAAW,OAAO,EAAE,KAAK,WAAW,QAAQ;CAC5C,CAAA;AAEV;AAEA,MAAM,qBAAqB;CACzB,MAAM,EAAE,WAAW,gBAAgB;CACnC,MAAM,EAAE,MAAM,eAAeA,aAAa;CAC1C,MAAM,QAAQ,UAAU,UAAU,QAAQ,MAAM,MAAM,OAAO,GAAG,CAAC;CACjE,OACE,oBAAC,QAAD;EAAM,GAAI,WAAW,OAAO,SAAS,KAAA,GAAW,EAAE,iBAAiB,EAAE,CAAC;EACnE,UAAA,GAAG,EAAE,aAAa,EAAE,GAAG;CACpB,CAAA;AAEV;AAEA,MAAM,YAAY,EAAE,UAAU,WAAW,OAAO,WAAW,YAAgC;CACzF,MAAM,EAAE,QAAQ,UAAU,gBAAgB;CAC1C,MAAM,QAAQ,IAAI,YAAY;CAC9B,MAAM,EAAE,MAAM,eAAeA,aAAa;CAC1C,MAAM,SAAS,UAAU,UAAU,MAAM,MAAM;CAC/C,MAAM,QAAQ,UAAU,UAAU,MAAM,KAAK;CAC7C,MAAM,WAAW,UAAU,UAAU,MAAM,QAAQ;CACnD,MAAM,QAAQ,UAAU,UAAU,MAAM,WAAW,OAAO;CAC1D,MAAM,aAAa,cAAc,KAAK;CACtC,MAAM,UAAU,UAAU;CAE1B,sBAAsB;EACpB,IAAI,CAAC,OAAO;EACZ,MAAM,WAAW,IAAI;EACrB,aAAa,MAAM,WAAW,KAAK;CACrC,GAAG,CAAC,OAAO,UAAU,CAAC;CACtB,MAAM,UAAU,CAAC,WAAW,MAAM;CAClC,MAAM,cAAc,OAAO,QAAQ,MAChC,WAAW,OAAO,YAAY,KAAA,KAAa,OAAO,YAAY,IACjE;CAEA,OACE,oBAAC,OAAD;EACE,uBAAoB;EACpB,gBAAc,OAAO,OAAO;EAC5B,GAAI,WACF;GACE,OAAO;GACP,UAAU,OAAO,kBAAkB,OAAO;GAC1C,WAAW,CAAC,WAAW,OAAO;EAChC,GACA,WACA,KACF;EACA,UAAU,UAAU,MAAM,gBAAgB;EAC1C,gBAAgB,UAAU,MAAM,gBAAgB;EAEhD,UAAA,qBAAC,OAAD;GAAK,GAAI,WAAW,CAAC,SAAS,OAAO,QAAQ;GAA7C,UAAA,CACG,YAAY,oBAAC,UAAD,CAAW,CAAA,GACxB,qBAAC,OAAD;IAAK,GAAI,WAAW,OAAO,GAAG;IAA9B,UAAA;KACE,oBAAC,WAAD;MACE,OAAO,SAAS,EAAE,YAAY,IAAI,EAAE,aAAa;MACjD,UAAS;MACT,SAAS,MAAM;MAEf,UAAA,oBAAC,eAAD,EAAuB,OAAS,CAAA;KACvB,CAAA;KACX,oBAAC,WAAD;MACE,OAAO,QAAQ,EAAE,cAAc,IAAI,EAAE,YAAY;MACjD,UAAS;MACT,SAAS,MAAM;MAEd,UAAA,QAAQ,oBAAC,SAAD,EAAS,MAAM,GAAK,CAAA,IAAI,oBAAC,SAAD,EAAS,MAAM,GAAK,CAAA;KAC5C,CAAA;KACV,aACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,WAAD;MACE,OAAO,EAAE,qBAAqB;MAC9B,UAAS;MACT,eAAe,MAAM,KAAK,EAAE;MAE5B,UAAA,oBAAC,aAAD,EAAa,MAAM,GAAK,CAAA;KACf,CAAA,GACX,oBAAC,WAAD;MAAW,OAAO,EAAE,iBAAiB;MAAG,UAAS;MAAI,eAAe,MAAM,KAAK,CAAC;MAC9E,UAAA,oBAAC,cAAD,EAAc,MAAM,GAAK,CAAA;KAChB,CAAA,CACX,EAAA,CAAA;KAEJ,oBAAC,aAAD,CAAc,CAAA;KACb,aAAa,oBAAC,cAAD,CAAe,CAAA;KAC7B,oBAAC,aAAD,CAAc,CAAA;KACd,oBAAC,OAAD,EAAK,GAAI,WAAW,OAAO,MAAM,EAAI,CAAA;KACpC;KACA,eACC,oBAAC,WAAD;MACE,QAAQ;MACR,OAAO,WAAW,EAAE,oBAAoB,IAAI,EAAE,oBAAoB;MAClE,SAAS;MACT,UAAS;MACT,eAAe,MAAM,YAAY,CAAC,QAAQ;MAE1C,UAAA,oBAAC,UAAD,EAAU,MAAM,GAAK,CAAA;KACZ,CAAA;KAEb,oBAAC,UAAD,CAAW,CAAA;KACX,oBAAC,WAAD;MACE,OAAO,aAAa,EAAE,sBAAsB,IAAI,EAAE,kBAAkB;MACpE,UAAS;MACT,SAAS,MAAM;MAEd,UAAA,aAAa,oBAAC,UAAD,EAAU,MAAM,GAAK,CAAA,IAAI,oBAAC,UAAD,EAAU,MAAM,GAAK,CAAA;KACnD,CAAA;IACR;GACF,CAAA,CAAA;;CACF,CAAA;AAET;AAEA,SAAS,cAAc"}

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

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

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