@geekapps/silo-elements-nextjs 0.2.31 → 0.2.33

package/dist/index.js

@@ -3,7 +3,7 @@ import { useMultipartUpload, useBatchUpload, useSignedUrl, useFileStatus } from
 export { SiloProvider, useBatchUpload, useFileStatus, useMultipartUpload, useSignedUrl, useSiloClient } from '@geekapps/silo-nextjs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import gsap from 'gsap';
-import { Play, Pause, VolumeX, Volume2, Captions, Settings, Minimize, Maximize } from 'lucide-react';
+import { Pause, Play, VolumeX, Volume2, Captions, Settings, Minimize, Maximize } from 'lucide-react';
 
 // src/ImageUploader.tsx
 
@@ -1278,6 +1278,8 @@ function Video({
   const [duration, setDuration] = useState(0);
   const [currentTime, setCurrentTime] = useState(0);
   const [bufferedTime, setBufferedTime] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragPointerIdRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [hasPlayed, setHasPlayed] = useState(false);
   const [clickIcon, setClickIcon] = useState(null);
@@ -1801,44 +1803,69 @@ function Video({
     },
     [qualities]
   );
-  const handleProgressPointerMove = useCallback(
-    (event) => {
+  const seekFromPointer = useCallback(
+    (clientX) => {
+      const video = videoRef.current;
+      const progress = progressRef.current;
+      if (!video || !progress || !duration) return;
+      const rect = progress.getBoundingClientRect();
+      const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+      const nextTime = x / rect.width * duration;
+      video.currentTime = nextTime;
+      setCurrentTime(nextTime);
+    },
+    [duration]
+  );
+  const updatePreview = useCallback(
+    (clientX) => {
       const progress = progressRef.current;
       if (!progress || !duration || storyboardCues.length === 0) {
         setPreview(null);
         return;
       }
       const rect = progress.getBoundingClientRect();
-      const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width));
+      const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
       const time = x / rect.width * duration;
       const cue = findStoryboardCue(storyboardCues, time);
       if (!cue) {
         setPreview(null);
         return;
       }
-      setPreview({
-        cue,
-        time,
-        left: Math.max(80, Math.min(x, rect.width - 80))
-      });
+      setPreview({ cue, time, left: Math.max(80, Math.min(x, rect.width - 80)) });
     },
     [duration, storyboardCues]
   );
+  const handleProgressPointerMove = useCallback(
+    (event) => {
+      updatePreview(event.clientX);
+      if (isDragging) seekFromPointer(event.clientX);
+    },
+    [isDragging, seekFromPointer, updatePreview]
+  );
   const handleProgressPointerLeave = useCallback(() => {
-    setPreview(null);
-  }, []);
+    if (!isDragging) setPreview(null);
+  }, [isDragging]);
   const handleProgressPointerDown = useCallback(
     (event) => {
-      const video = videoRef.current;
       const progress = progressRef.current;
-      if (!video || !progress || !duration) return;
-      const rect = progress.getBoundingClientRect();
-      const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width));
-      const nextTime = x / rect.width * duration;
-      video.currentTime = nextTime;
-      setCurrentTime(nextTime);
+      if (!progress) return;
+      progress.setPointerCapture(event.pointerId);
+      dragPointerIdRef.current = event.pointerId;
+      setIsDragging(true);
+      seekFromPointer(event.clientX);
+      updatePreview(event.clientX);
     },
-    [duration]
+    [seekFromPointer, updatePreview]
+  );
+  const handleProgressPointerUp = useCallback(
+    (event) => {
+      if (dragPointerIdRef.current === event.pointerId) {
+        setIsDragging(false);
+        dragPointerIdRef.current = null;
+        setPreview(null);
+      }
+    },
+    []
   );
   const handleKeyDown = useCallback(
     (event) => {
@@ -1936,8 +1963,9 @@ function Video({
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: `pointer-events-none absolute inset-0 z-10 grid place-items-center transition ${isPlaying ? "opacity-0" : "opacity-100"}`,
-                children: /* @__PURE__ */ jsx("span", { className: "grid size-10 place-items-center rounded-full bg-white/15 text-white backdrop-blur-xl ring-1 ring-white/20 @sm:size-14 @lg:size-16", children: /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-4 @sm:size-6 @lg:size-7" }) })
+                className: "pointer-events-none absolute inset-0 z-10 grid place-items-center",
+                style: { opacity: clickIcon ? 1 : 0, transition: clickIcon ? "opacity 0.08s ease-in" : "opacity 0.45s ease-out" },
+                children: /* @__PURE__ */ jsx("span", { className: "grid size-10 place-items-center text-white drop-shadow-[0_2px_12px_rgba(0,0,0,0.8)] @sm:size-14 @lg:size-16", children: clickIcon === "pause" ? /* @__PURE__ */ jsx(Pause, { className: "size-5 @sm:size-7 @lg:size-8" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-5 @sm:size-7 @lg:size-8" }) })
               }
             ),
             isLoading && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-20 grid place-items-center bg-black/10", children: /* @__PURE__ */ jsx("div", { className: "size-9 animate-spin rounded-full border-2 border-white/25 border-t-white" }) }),
@@ -1957,8 +1985,8 @@ function Video({
                   ] }) }),
                   /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "relative z-10 px-4 pb-4 text-white", children: [
                     settingsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setSettingsOpen(false) }),
-                      /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-0 z-50 mb-2 w-56 overflow-hidden rounded-2xl bg-[#1c1c1e]/95 shadow-2xl backdrop-blur-xl ring-1 ring-white/10", style: { animation: "spFadeIn 0.15s ease" }, children: [
+                      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-70", onClick: () => setSettingsOpen(false) }),
+                      /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-2 z-70 mb-2 overflow-hidden rounded-2xl bg-[#1c1c1e]/95 shadow-2xl backdrop-blur-xl ring-1 ring-white/10", style: { width: Math.min(224, Math.max(180, (playerWidth || 640) * 0.22)) + "px", animation: "spFadeIn 0.15s ease" }, children: [
                         settingsTab === "root" && /* @__PURE__ */ jsx("div", { children: [
                           { id: "quality", label: "Qualidade", value: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" },
                           ...parsed.subtitles.length > 0 ? [{ id: "subtitles", label: "Legendas", value: subtitleStyle.track === "off" ? "Desligado" : parsed.subtitles.find((s) => s.srclang === subtitleStyle.track)?.label ?? subtitleStyle.track }] : [],
@@ -2034,7 +2062,6 @@ function Video({
                                 const next = s.srclang === "off" ? "off" : s.srclang;
                                 setSubtitleMode(next);
                                 setSubtitleStyle((st) => ({ ...st, track: next }));
-                                setSettingsTab("root");
                               },
                               className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
                               children: [
@@ -2043,7 +2070,75 @@ function Video({
                               ]
                             },
                             s.srclang
-                          )) })
+                          )) }),
+                          subtitleStyle.track !== "off" && /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => setSettingsTab("subtitles-style"),
+                              className: "flex w-full items-center justify-between gap-3 border-t border-white/8 px-4 py-3 text-sm transition hover:bg-white/8",
+                              children: [
+                                /* @__PURE__ */ jsx("span", { className: "text-white/60", children: "Apar\xEAncia" }),
+                                /* @__PURE__ */ jsx("svg", { className: "size-3 opacity-50", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M4.5 3l3 3-3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                              ]
+                            }
+                          )
+                        ] }),
+                        settingsTab === "subtitles-style" && /* @__PURE__ */ jsxs("div", { children: [
+                          /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => setSettingsTab("subtitles"),
+                              className: "flex w-full items-center gap-2 border-b border-white/8 px-4 py-3 text-xs font-semibold text-white/50 transition hover:text-white",
+                              children: [
+                                /* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7.5 3L4.5 6l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+                                "Apar\xEAncia"
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 flex flex-col gap-3", children: [
+                            /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Tamanho" }),
+                              /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: ["small", "medium", "large", "xlarge"].map((s) => /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => setSubtitleStyle((st) => ({ ...st, size: s })),
+                                  className: `flex-1 rounded-lg py-1.5 text-xs font-medium transition ${subtitleStyle.size === s ? "bg-white/20 text-white" : "text-white/45 hover:bg-white/10"}`,
+                                  children: s === "small" ? "P" : s === "medium" ? "M" : s === "large" ? "G" : "GG"
+                                },
+                                s
+                              )) })
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Cor" }),
+                              /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: [["white", "Branco", "#fff"], ["yellow", "Amarelo", "#facc15"], ["cyan", "Ciano", "#22d3ee"]].map(([val, label, color]) => /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => setSubtitleStyle((st) => ({ ...st, color: val })),
+                                  className: `flex-1 rounded-lg py-1.5 text-xs font-medium transition ring-1 ${subtitleStyle.color === val ? "ring-white/40" : "ring-transparent hover:ring-white/15"}`,
+                                  style: { color },
+                                  children: label
+                                },
+                                val
+                              )) })
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-semibold text-white/40 uppercase tracking-wide", children: "Fundo" }),
+                              /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: [["none", "Nenhum"], ["semi", "Semi"], ["solid", "S\xF3lido"]].map(([val, label]) => /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => setSubtitleStyle((st) => ({ ...st, bg: val })),
+                                  className: `flex-1 rounded-lg py-1.5 text-xs font-medium transition ${subtitleStyle.bg === val ? "bg-white/20 text-white" : "text-white/45 hover:bg-white/10"}`,
+                                  children: label
+                                },
+                                val
+                              )) })
+                            ] })
+                          ] })
                         ] }),
                         settingsTab === "audio" && /* @__PURE__ */ jsxs("div", { children: [
                           /* @__PURE__ */ jsxs(
@@ -2109,84 +2204,90 @@ function Video({
                       ] }),
                       /* @__PURE__ */ jsx("style", { children: `@keyframes spFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}` })
                     ] }),
-                    /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsxs(
                       "div",
                       {
                         ref: progressRef,
                         onPointerMove: handleProgressPointerMove,
                         onPointerLeave: handleProgressPointerLeave,
                         onPointerDown: handleProgressPointerDown,
-                        className: "group relative mb-2 h-5 cursor-pointer",
-                        children: /* @__PURE__ */ jsxs("div", { className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white/22 transition-[height] duration-150 group-hover:h-1", style: { height: "2px" }, children: [
-                          /* @__PURE__ */ jsx(
+                        onPointerUp: handleProgressPointerUp,
+                        className: "group relative mb-3 h-7 cursor-pointer",
+                        children: [
+                          /* @__PURE__ */ jsxs(
                             "div",
                             {
-                              className: "absolute inset-y-0 left-0 bg-white/30",
-                              style: { width: `${bufferedPercent}%` }
+                              className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white/22 transition-[height] duration-150",
+                              style: { height: isDragging ? "6px" : "3px" },
+                              children: [
+                                /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 rounded-full bg-white/30", style: { width: `${bufferedPercent}%` } }),
+                                /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 rounded-full bg-white/90", style: { width: `${progressPercent}%` } })
+                              ]
                             }
                           ),
                           /* @__PURE__ */ jsx(
                             "div",
                             {
-                              className: "absolute inset-y-0 left-0 bg-white/85",
-                              style: { width: `${progressPercent}%` }
+                              className: "pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-md transition-[width,height] duration-100 group-hover:size-4",
+                              style: {
+                                left: `${progressPercent}%`,
+                                width: isDragging ? "16px" : "10px",
+                                height: isDragging ? "16px" : "10px"
+                              }
                             }
                           )
-                        ] })
+                        ]
                       }
                     ),
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 @sm:gap-2", children: [
-                        /* @__PURE__ */ jsx(SeekButton, { seconds: 15, direction: "back", onClick: () => seekRelative(-15) }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 @sm:gap-2", children: [
                         /* @__PURE__ */ jsx(
                           "button",
                           {
                             type: "button",
                             onClick: togglePlay,
-                            className: "grid size-8 place-items-center text-white transition hover:scale-110 hover:text-white/80 @sm:size-10",
+                            className: "grid size-8 place-items-center rounded-full bg-white/15 text-white backdrop-blur-sm ring-1 ring-white/15 transition hover:bg-white/25 @sm:size-9",
                             "aria-label": isPlaying ? "Pause" : "Play",
-                            children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-5 @sm:size-6" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-5 @sm:size-6" })
+                            children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-4 @sm:size-5" })
                           }
                         ),
-                        /* @__PURE__ */ jsx(SeekButton, { seconds: 15, direction: "forward", onClick: () => seekRelative(15) }),
-                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs font-semibold text-white/75 @sm:text-sm", children: [
-                          /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
-                          /* @__PURE__ */ jsx("span", { className: "text-white/35", children: "/" }),
-                          /* @__PURE__ */ jsxs("span", { className: "text-white/50", children: [
-                            "-",
-                            formatTime(Math.max(0, duration - currentTime))
-                          ] })
+                        /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-medium tabular-nums text-white/80", children: [
+                          formatTime(currentTime),
+                          /* @__PURE__ */ jsx("span", { className: "text-white/30", children: "/" }),
+                          /* @__PURE__ */ jsx("span", { className: "text-white/45", children: formatTime(duration) })
                         ] })
                       ] }),
                       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 @sm:gap-1", children: [
-                        /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            type: "button",
-                            onClick: () => setIsMuted((value) => !value),
-                            className: "grid size-8 place-items-center text-white transition hover:scale-110 hover:text-white/80 @sm:size-10",
-                            "aria-label": isMuted ? "Unmute" : "Mute",
-                            children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-4 @sm:size-5" })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "input",
-                          {
-                            type: "range",
-                            min: "0",
-                            max: "1",
-                            step: "0.01",
-                            value: isMuted ? 0 : volume,
-                            onChange: (event) => {
-                              const nextVolume = Number(event.target.value);
-                              setVolume(nextVolume);
-                              setIsMuted(nextVolume === 0);
-                            },
-                            className: "hidden h-1 w-14 accent-white @md:block @md:w-20",
-                            "aria-label": "Audio level"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx("div", { className: "mx-0.5 hidden h-4 w-px bg-white/20 @md:mx-1 @md:block" }),
+                        /* @__PURE__ */ jsxs("div", { className: "group flex items-center", children: [
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => setIsMuted((value) => !value),
+                              className: "grid size-8 place-items-center text-white/70 transition hover:text-white @sm:size-9",
+                              "aria-label": isMuted ? "Unmute" : "Mute",
+                              children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "size-4 @sm:size-5" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-4 @sm:size-5" })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("div", { className: "w-0 overflow-hidden transition-all duration-200 group-hover:w-16 @md:group-hover:w-20", children: /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              type: "range",
+                              min: "0",
+                              max: "1",
+                              step: "0.01",
+                              value: isMuted ? 0 : volume,
+                              onChange: (event) => {
+                                const nextVolume = Number(event.target.value);
+                                setVolume(nextVolume);
+                                setIsMuted(nextVolume === 0);
+                              },
+                              className: "h-1 w-14 accent-white @md:w-20",
+                              "aria-label": "Audio level"
+                            }
+                          ) })
+                        ] }),
+                        /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-4 w-px bg-white/20 @md:mx-1" }),
                         parsed.subtitles.length > 0 && /* @__PURE__ */ jsx(
                           "button",
                           {
@@ -2226,51 +2327,35 @@ function Video({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "pointer-events-none absolute inset-0 z-50 grid place-items-center",
-                style: { opacity: clickIcon ? 1 : 0, transition: clickIcon ? "opacity 0.08s ease-in" : "opacity 0.45s ease-out" },
-                children: /* @__PURE__ */ jsx("span", { className: "grid size-10 place-items-center rounded-full bg-black/40 text-white backdrop-blur-sm ring-1 ring-white/20 @sm:size-14 @lg:size-16", children: clickIcon === "pause" ? /* @__PURE__ */ jsx(Pause, { className: "size-4 @sm:size-6 @lg:size-7" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-4 @sm:size-6 @lg:size-7" }) })
-              }
-            ),
             preview && (() => {
               const srcW = preview.cue.w ?? 160;
               const srcH = preview.cue.h ?? 90;
-              const thumbW = Math.max(120, Math.round((playerWidth || 640) * 0.1));
+              const thumbW = Math.max(140, Math.round((playerWidth || 640) * 0.13));
               const thumbH = Math.round(thumbW * (srcH / srcW));
               const scale = thumbW / srcW;
               const isSprite = preview.cue.x != null && preview.cue.y != null;
-              return /* @__PURE__ */ jsxs(
+              return /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "pointer-events-none absolute z-50 -translate-x-1/2 rounded-xl bg-black/75 p-1 shadow-2xl ring-1 ring-white/15 backdrop-blur-sm",
-                  style: { bottom: controlsVisible ? "72px" : "16px", left: preview.left, transition: "bottom 0.2s" },
-                  children: [
-                    /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg", style: { width: thumbW, height: thumbH }, children: isSprite ? (
-                      // Inner div at native tile size, positioned to show the right sprite cell,
-                      // then scaled up to fill thumbW×thumbH. transformOrigin top-left ensures
-                      // the clip window aligns correctly.
-                      /* @__PURE__ */ jsx("div", { style: {
-                        width: srcW,
-                        height: srcH,
-                        backgroundImage: `url(${preview.cue.image})`,
-                        backgroundPosition: `-${preview.cue.x ?? 0}px -${preview.cue.y ?? 0}px`,
-                        backgroundSize: "auto",
-                        backgroundRepeat: "no-repeat",
-                        transform: `scale(${scale})`,
-                        transformOrigin: "top left"
-                      } })
-                    ) : /* @__PURE__ */ jsx("div", { style: {
-                      width: thumbW,
-                      height: thumbH,
-                      backgroundImage: `url(${preview.cue.image})`,
-                      backgroundSize: "cover",
-                      backgroundPosition: "center",
-                      backgroundRepeat: "no-repeat"
-                    } }) }),
-                    /* @__PURE__ */ jsx("div", { className: "pt-1 text-center text-[11px] font-semibold text-white/75", children: formatTime(preview.time) })
-                  ]
+                  className: "pointer-events-none absolute z-60 -translate-x-1/2 -translate-y-2 overflow-hidden rounded-xl shadow-2xl ring-1 ring-white/15",
+                  style: { bottom: controlsVisible ? "80px" : "20px", left: preview.left, transition: "bottom 0.2s" },
+                  children: isSprite ? /* @__PURE__ */ jsx("div", { style: { width: thumbW, height: thumbH, overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: {
+                    width: srcW,
+                    height: srcH,
+                    backgroundImage: `url(${preview.cue.image})`,
+                    backgroundPosition: `-${preview.cue.x ?? 0}px -${preview.cue.y ?? 0}px`,
+                    backgroundSize: "auto",
+                    backgroundRepeat: "no-repeat",
+                    transform: `scale(${scale})`,
+                    transformOrigin: "top left"
+                  } }) }) : /* @__PURE__ */ jsx("div", { style: {
+                    width: thumbW,
+                    height: thumbH,
+                    backgroundImage: `url(${preview.cue.image})`,
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat"
+                  } })
                 }
               );
             })(),
@@ -2307,39 +2392,6 @@ function Video({
   );
 }
 var VideoPlayer = Video;
-function SeekButton({ seconds, direction, onClick }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: "grid size-8 place-items-center text-white transition hover:scale-110 hover:text-white/80 @sm:size-10",
-      "aria-label": `${direction === "back" ? "Rewind" : "Forward"} ${seconds} seconds`,
-      children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 36 36", fill: "none", className: "size-7 @sm:size-8", children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: direction === "back" ? "M18 6C11.373 6 6 11.373 6 18s5.373 12 12 12 12-5.373 12-12" : "M18 6C24.627 6 30 11.373 30 18S24.627 30 18 30 6 24.627 6 18",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: direction === "back" ? "M18 6l-4 4 4 4" : "M18 6l4 4-4 4",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx("text", { x: "18", y: "22", textAnchor: "middle", fill: "currentColor", fontSize: "9", fontWeight: "600", fontFamily: "system-ui", children: seconds })
-      ] })
-    }
-  );
-}
 function parseVideoChildren(children) {
   const parsed = {
     sources: [],
@@ -2444,18 +2496,15 @@ function parseVttTimestamp(value) {
   return Number(normalized) || 0;
 }
 function formatTime(seconds) {
-  if (!Number.isFinite(seconds)) return "00:00";
+  if (!Number.isFinite(seconds)) return "0:00";
   const safeSeconds = Math.max(0, Math.floor(seconds));
   const hours = Math.floor(safeSeconds / 3600);
   const minutes = Math.floor(safeSeconds % 3600 / 60);
   const secs = safeSeconds % 60;
   if (hours > 0) {
-    return `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(
-      2,
-      "0"
-    )}`;
+    return `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
   }
-  return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+  return `${minutes}:${String(secs).padStart(2, "0")}`;
 }
 var RADIUS = { full: "50%", md: "12px", sm: "6px" };
 function Avatar({