@geekapps/silo-elements-nextjs 0.2.52 → 0.2.54

package/dist/VideoPlayer.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import gsap from 'gsap';
-import { Pause, Play, VolumeX, Volume2, Captions as Captions$1, Settings, Minimize, Maximize } from 'lucide-react';
+import { Pause, Play, Captions as Captions$1, Settings, Minimize, Maximize, VolumeX, Volume2 } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var AUTO_QUALITY = {
@@ -104,6 +104,8 @@ function Video({
   const [audioTracks, setAudioTracks] = useState([]);
   const [selectedAudio, setSelectedAudio] = useState(0);
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsVisible, setSettingsVisible] = useState(false);
+  const settingsCloseTimerRef = useRef(null);
   const [settingsTab, setSettingsTab] = useState("root");
   const [playbackRate, setPlaybackRate] = useState(1);
   const [subtitleStyle, setSubtitleStyle] = useState({
@@ -114,6 +116,8 @@ function Video({
   });
   const [subtitleMode, setSubtitleMode] = useState(initialSubtitleMode);
   const [activeCue, setActiveCue] = useState(null);
+  const [storyboardSheetSize, setStoryboardSheetSize] = useState(null);
+  const storyboardSheetUrlRef = useRef("");
   const [storyboardCues, setStoryboardCues] = useState(
     []
   );
@@ -122,6 +126,7 @@ function Video({
   const [currentTime, setCurrentTime] = useState(0);
   const [bufferedTime, setBufferedTime] = useState(0);
   const [isDragging, setIsDragging] = useState(false);
+  const [isHoveringProgress, setIsHoveringProgress] = useState(false);
   const dragPointerIdRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [hasPlayed, setHasPlayed] = useState(false);
@@ -197,6 +202,16 @@ function Video({
       }
     );
   }, []);
+  const openSettings = useCallback(() => {
+    setSettingsOpen(true);
+    setSettingsTab("root");
+    window.setTimeout(() => setSettingsVisible(true), 10);
+  }, []);
+  const closeSettings = useCallback(() => {
+    setSettingsVisible(false);
+    if (settingsCloseTimerRef.current) window.clearTimeout(settingsCloseTimerRef.current);
+    settingsCloseTimerRef.current = window.setTimeout(() => setSettingsOpen(false), 200);
+  }, []);
   useEffect(() => {
     if (sourceIndex >= parsed.sources.length) {
       setSourceIndex(initialSourceIndex);
@@ -422,7 +437,7 @@ function Video({
     setQualities([AUTO_QUALITY]);
     setAudioTracks([]);
     setSelectedAudio(0);
-    setSettingsOpen(false);
+    closeSettings();
     video.pause();
     video.removeAttribute("src");
     video.load();
@@ -649,17 +664,17 @@ function Video({
   }, []);
   const changeAudio = useCallback((trackId) => {
     setSelectedAudio(trackId);
-    setSettingsOpen(false);
+    closeSettings();
     if (hlsRef.current) {
       hlsRef.current.audioTrack = trackId;
     }
-  }, []);
+  }, [closeSettings]);
   const changeQuality = useCallback(
     (qualityId) => {
       const option = qualities.find((quality) => quality.id === qualityId);
       if (!option) return;
       setSelectedQuality(qualityId);
-      setSettingsOpen(false);
+      closeSettings();
       if (option.type === "auto") {
         if (hlsRef.current) {
           hlsRef.current.currentLevel = -1;
@@ -694,7 +709,7 @@ function Video({
         dashRef.current.setQualityFor("video", option.index);
       }
     },
-    [qualities]
+    [qualities, closeSettings]
   );
   const seekFromPointer = useCallback(
     (clientX) => {
@@ -739,7 +754,11 @@ function Video({
     },
     [isDragging, seekFromPointer, updatePreview]
   );
+  const handleProgressPointerEnter = useCallback(() => {
+    setIsHoveringProgress(true);
+  }, []);
   const handleProgressPointerLeave = useCallback(() => {
+    setIsHoveringProgress(false);
     if (!isDragging) setPreview(null);
   }, [isDragging]);
   const handleProgressPointerDown = useCallback(
@@ -810,10 +829,18 @@ function Video({
           onKeyDown: handleKeyDown,
           onMouseMove: showControlsTemporarily,
           onMouseLeave: () => {
+            closeSettings();
             if (isPlaying && autoHideControls) {
               setControlsVisible(false);
             }
           },
+          onBlur: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+              closeSettings();
+            }
+          },
+          onTouchStart: showControlsTemporarily,
+          onTouchMove: showControlsTemporarily,
           className: "relative w-full overflow-hidden rounded-[14px] bg-black shadow-[0_30px_90px_rgba(15,15,15,0.22)] outline-none ring-1 ring-black/5",
           style: fixedHeight ? {
             height: typeof fixedHeight === "number" ? `${fixedHeight}px` : fixedHeight
@@ -826,7 +853,7 @@ function Video({
               "video",
               {
                 ref: videoRef,
-                className: "h-full w-full object-contain",
+                className: `h-full w-full ${isFullscreen ? "object-contain" : "object-cover"}`,
                 playsInline: true,
                 preload: "metadata",
                 crossOrigin: "anonymous",
@@ -917,7 +944,7 @@ function Video({
                             "div",
                             {
                               className: "fixed inset-0 z-70",
-                              onClick: () => setSettingsOpen(false)
+                              onClick: closeSettings
                             }
                           ),
                           /* @__PURE__ */ jsxs(
@@ -929,7 +956,9 @@ function Video({
                                   224,
                                   Math.max(180, (playerWidth || 640) * 0.22)
                                 ) + "px",
-                                animation: "spFadeIn 0.15s ease"
+                                opacity: settingsVisible ? 1 : 0,
+                                transform: settingsVisible ? "translateY(0) scale(1)" : "translateY(8px) scale(0.97)",
+                                transition: "opacity 0.18s ease, transform 0.18s ease"
                               },
                               children: [
                                 settingsTab === "root" && /* @__PURE__ */ jsx("div", { children: [
@@ -1363,8 +1392,7 @@ function Video({
                                       type: "button",
                                       onClick: () => {
                                         setPlaybackRate(speed);
-                                        setSettingsOpen(false);
-                                        setSettingsTab("root");
+                                        closeSettings();
                                       },
                                       className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
                                       children: [
@@ -1400,37 +1428,40 @@ function Video({
                                 ] })
                               ]
                             }
-                          ),
-                          /* @__PURE__ */ jsx("style", { children: `@keyframes spFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}` })
+                          )
                         ] }),
                         /* @__PURE__ */ jsxs(
                           "div",
                           {
                             ref: progressRef,
                             onPointerMove: handleProgressPointerMove,
+                            onPointerEnter: handleProgressPointerEnter,
                             onPointerLeave: handleProgressPointerLeave,
                             onPointerDown: handleProgressPointerDown,
                             onPointerUp: handleProgressPointerUp,
-                            className: "group relative mb-3 h-7 cursor-pointer",
+                            className: "relative mb-2 h-8 cursor-pointer overflow-visible",
                             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",
-                                  style: { height: isDragging ? "6px" : "3px" },
+                                  className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white/18",
+                                  style: {
+                                    height: isDragging ? "7px" : isHoveringProgress ? "5px" : "3px",
+                                    transition: "height 0.15s ease"
+                                  },
                                   children: [
                                     /* @__PURE__ */ jsx(
                                       "div",
                                       {
-                                        className: "absolute inset-y-0 left-0 rounded-full bg-white/30",
+                                        className: "absolute inset-y-0 left-0 rounded-full bg-white/28",
                                         style: { width: `${bufferedPercent}%` }
                                       }
                                     ),
                                     /* @__PURE__ */ jsx(
                                       "div",
                                       {
-                                        className: "absolute inset-y-0 left-0 rounded-full bg-white/90",
-                                        style: { width: `${progressPercent}%` }
+                                        className: "absolute inset-y-0 left-0 rounded-full bg-white",
+                                        style: { width: `${progressPercent}%`, transition: "width 0.05s linear" }
                                       }
                                     )
                                   ]
@@ -1439,14 +1470,90 @@ function Video({
                               /* @__PURE__ */ jsx(
                                 "div",
                                 {
-                                  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",
+                                  className: "pointer-events-none absolute rounded-full bg-white shadow-[0_1px_6px_rgba(0,0,0,0.5)]",
                                   style: {
+                                    top: "50%",
                                     left: `${progressPercent}%`,
-                                    width: isDragging ? "16px" : "10px",
-                                    height: isDragging ? "16px" : "10px"
+                                    transform: "translate(-50%, -50%)",
+                                    width: isDragging ? "18px" : isHoveringProgress ? "14px" : "10px",
+                                    height: isDragging ? "18px" : isHoveringProgress ? "14px" : "10px",
+                                    transition: "width 0.2s cubic-bezier(0.34,1.56,0.64,1), height 0.2s cubic-bezier(0.34,1.56,0.64,1)"
                                   }
                                 }
-                              )
+                              ),
+                              preview && (() => {
+                                const frameW = preview.cue.w ?? 160;
+                                const frameH = preview.cue.h ?? 90;
+                                const thumbW = 200;
+                                const thumbH = Math.round(thumbW * (frameH / frameW));
+                                const scale = thumbW / frameW;
+                                const isSprite = preview.cue.x != null && preview.cue.y != null;
+                                return /* @__PURE__ */ jsxs(
+                                  "div",
+                                  {
+                                    className: "pointer-events-none absolute flex flex-col items-center gap-1",
+                                    style: {
+                                      bottom: "calc(100% + 6px)",
+                                      left: preview.left,
+                                      transform: "translateX(-50%)",
+                                      zIndex: 80
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsx(
+                                        "div",
+                                        {
+                                          className: "overflow-hidden rounded-lg shadow-2xl ring-1 ring-white/20",
+                                          style: { width: thumbW, height: thumbH, flexShrink: 0 },
+                                          children: isSprite ? (
+                                            // Sprite: need full sheet dimensions to compute backgroundSize correctly.
+                                            // Load them once from the image's natural size.
+                                            (() => {
+                                              const imgUrl = preview.cue.image;
+                                              if (storyboardSheetUrlRef.current !== imgUrl) {
+                                                storyboardSheetUrlRef.current = imgUrl;
+                                                const img = new window.Image();
+                                                img.onload = () => setStoryboardSheetSize({ w: img.naturalWidth, h: img.naturalHeight });
+                                                img.src = imgUrl;
+                                              }
+                                              if (!storyboardSheetSize) return null;
+                                              const bsW = storyboardSheetSize.w * scale;
+                                              const bsH = storyboardSheetSize.h * scale;
+                                              return /* @__PURE__ */ jsx(
+                                                "div",
+                                                {
+                                                  style: {
+                                                    width: thumbW,
+                                                    height: thumbH,
+                                                    backgroundImage: `url(${imgUrl})`,
+                                                    backgroundRepeat: "no-repeat",
+                                                    backgroundPosition: `-${(preview.cue.x ?? 0) * scale}px -${(preview.cue.y ?? 0) * scale}px`,
+                                                    backgroundSize: `${bsW}px ${bsH}px`
+                                                  }
+                                                }
+                                              );
+                                            })()
+                                          ) : /* @__PURE__ */ jsx(
+                                            "img",
+                                            {
+                                              src: preview.cue.image,
+                                              alt: "",
+                                              style: { width: thumbW, height: thumbH, objectFit: "cover", objectPosition: "center", display: "block" }
+                                            }
+                                          )
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx(
+                                        "span",
+                                        {
+                                          className: "rounded-md px-2 py-0.5 text-[11px] font-semibold tabular-nums text-white/90",
+                                          style: { background: "rgba(0,0,0,0.55)", backdropFilter: "blur(6px)" },
+                                          children: formatTime(preview.time)
+                                        }
+                                      )
+                                    ]
+                                  }
+                                );
+                              })()
                             ]
                           }
                         ),
@@ -1469,44 +1576,29 @@ function Video({
                             ] })
                           ] }),
                           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 @sm:gap-1", children: [
-                            /* @__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(
+                              VolumeSlider,
+                              {
+                                volume: isMuted ? 0 : volume,
+                                onMuteToggle: () => setIsMuted((v) => !v),
+                                onVolumeChange: (v) => {
+                                  setVolume(v);
+                                  setIsMuted(v === 0);
+                                },
+                                isMuted
+                              }
+                            ),
                             /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-4 w-px bg-white/20 @md:mx-1" }),
                             captions.length > 0 && /* @__PURE__ */ jsx(
                               "button",
                               {
                                 type: "button",
-                                onClick: () => setSubtitleMode(
-                                  (m) => m === "off" ? captions[0]?.srclang ?? "off" : "off"
-                                ),
-                                className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
+                                onClick: () => {
+                                  const next = subtitleMode === "off" ? captions[0]?.srclang ?? "off" : "off";
+                                  setSubtitleMode(next);
+                                  setSubtitleStyle((st) => ({ ...st, track: next }));
+                                },
+                                className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10 ${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
                                 "aria-label": "Captions",
                                 children: /* @__PURE__ */ jsx(Captions$1, { className: "size-4 @sm:size-5" })
                               }
@@ -1515,11 +1607,8 @@ function Video({
                               "button",
                               {
                                 type: "button",
-                                onClick: () => {
-                                  setSettingsOpen((v) => !v);
-                                  setSettingsTab("root");
-                                },
-                                className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10${settingsOpen ? "text-white" : "text-white/60"}`,
+                                onClick: () => settingsOpen ? closeSettings() : openSettings(),
+                                className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10 ${settingsOpen ? "text-white" : "text-white/60"}`,
                                 "aria-label": "Settings",
                                 children: /* @__PURE__ */ jsx(Settings, { className: "size-4 @sm:size-5" })
                               }
@@ -1542,65 +1631,6 @@ function Video({
                 ]
               }
             ),
-            preview && (() => {
-              const srcW = preview.cue.w ?? 160;
-              const srcH = preview.cue.h ?? 90;
-              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__ */ jsx(
-                "div",
-                {
-                  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"
-                      }
-                    }
-                  )
-                }
-              );
-            })(),
             activeCue && /* @__PURE__ */ jsx(
               "div",
               {
@@ -1634,6 +1664,109 @@ function Video({
   );
 }
 var VideoPlayer = Video;
+function VolumeSlider({
+  volume,
+  isMuted,
+  onMuteToggle,
+  onVolumeChange
+}) {
+  const [hovered, setHovered] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const trackRef = useRef(null);
+  const expanded = hovered || dragging;
+  const seek = useCallback((clientX) => {
+    const track = trackRef.current;
+    if (!track) return;
+    const rect = track.getBoundingClientRect();
+    const v = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    onVolumeChange(v);
+  }, [onVolumeChange]);
+  const onPointerDown = useCallback((e) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setDragging(true);
+    seek(e.clientX);
+  }, [seek]);
+  const onPointerMove = useCallback((e) => {
+    if (dragging) seek(e.clientX);
+  }, [dragging, seek]);
+  const onPointerUp = useCallback(() => setDragging(false), []);
+  const fillPercent = volume * 100;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center",
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => {
+        if (!dragging) setHovered(false);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onMuteToggle,
+            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",
+          {
+            style: {
+              width: expanded ? "64px" : "0px",
+              opacity: expanded ? 1 : 0,
+              transition: "width 0.2s ease, opacity 0.2s ease",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: trackRef,
+                onPointerDown,
+                onPointerMove,
+                onPointerUp,
+                className: "relative mx-1 flex h-7 cursor-pointer items-center",
+                style: { width: "52px" },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "absolute inset-x-0 rounded-full bg-white/20",
+                      style: {
+                        height: dragging ? "5px" : hovered ? "4px" : "3px",
+                        transition: "height 0.15s ease"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "absolute inset-y-0 left-0 rounded-full bg-white",
+                          style: { width: `${fillPercent}%` }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-md",
+                      style: {
+                        left: `${fillPercent}%`,
+                        width: dragging ? "14px" : hovered ? "11px" : "0px",
+                        height: dragging ? "14px" : hovered ? "11px" : "0px",
+                        transition: "width 0.15s ease, height 0.15s ease"
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 function parseVideoChildren(children) {
   const parsed = {
     sources: []
@@ -1696,7 +1829,13 @@ function inferSourceType(source) {
   return "file";
 }
 function findStoryboardCue(cues, time) {
-  return cues.find((cue) => time >= cue.start && time <= cue.end) ?? null;
+  if (cues.length === 0) return null;
+  let best = null;
+  for (const cue of cues) {
+    if (cue.start <= time) best = cue;
+    else break;
+  }
+  return best;
 }
 function parseStoryboardVtt(text, baseUrl) {
   const lines = text.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);