@geekapps/silo-elements-nextjs 0.2.30 → 0.2.32

package/dist/VideoPlayer.js

@@ -78,6 +78,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);
@@ -601,44 +603,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) => {
@@ -757,8 +784,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-0 z-70 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: [
                         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 }] : [],
@@ -909,30 +936,44 @@ 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,
+                        onPointerUp: handleProgressPointerUp,
                         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: [
+                        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: isDragging ? "4px" : "2px" }, children: [
+                            /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 bg-white/30", style: { width: `${bufferedPercent}%` } }),
+                            /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 bg-white/85", style: { width: `${progressPercent}%` } })
+                          ] }),
                           /* @__PURE__ */ jsx(
                             "div",
                             {
-                              className: "absolute inset-y-0 left-0 bg-white/30",
-                              style: { width: `${bufferedPercent}%` }
+                              className: "absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow transition-[width,height] duration-100",
+                              style: {
+                                left: `${progressPercent}%`,
+                                width: isDragging ? "14px" : "0px",
+                                height: isDragging ? "14px" : "0px",
+                                opacity: isDragging ? 1 : 0
+                              }
                             }
                           ),
                           /* @__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 opacity-0 transition-[width,height,opacity] duration-100 group-hover:opacity-100",
+                              style: {
+                                left: `${progressPercent}%`,
+                                width: isDragging ? "14px" : "10px",
+                                height: isDragging ? "14px" : "10px"
+                              }
                             }
                           )
-                        ] })
+                        ]
                       }
                     ),
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
@@ -1037,40 +1078,32 @@ function Video({
             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"
+                  } })
                 }
               );
             })(),