@geekapps/silo-elements-nextjs 0.1.21 → 0.1.23

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, FastForward, VolumeX, Volume2, AudioLines, Captions, Settings, Minimize, Maximize } from 'lucide-react';
+import { Play, Rewind, Pause, FastForward, VolumeX, Volume2, Captions, Settings, Minimize, Maximize } from 'lucide-react';
 
 // src/ImageUploader.tsx
 
@@ -1208,6 +1208,7 @@ var AUTO_QUALITY = {
   label: "Auto",
   type: "auto"
 };
+var PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
 function Sources(_props) {
   return null;
 }
@@ -1258,7 +1259,15 @@ function Video({
   const [selectedQuality, setSelectedQuality] = useState("auto");
   const [audioTracks, setAudioTracks] = useState([]);
   const [selectedAudio, setSelectedAudio] = useState(0);
-  const [openMenu, setOpenMenu] = useState(null);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsTab, setSettingsTab] = useState("quality");
+  const [playbackRate, setPlaybackRate] = useState(1);
+  const [subtitleStyle, setSubtitleStyle] = useState({
+    track: initialSubtitleMode,
+    size: "medium",
+    color: "white",
+    bg: "semi"
+  });
   const [subtitleMode, setSubtitleMode] = useState(initialSubtitleMode);
   const [activeCue, setActiveCue] = useState(null);
   const [storyboardCues, setStoryboardCues] = useState(
@@ -1270,6 +1279,8 @@ function Video({
   const [bufferedTime, setBufferedTime] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
   const [hasPlayed, setHasPlayed] = useState(false);
+  const [clickIcon, setClickIcon] = useState(null);
+  const clickIconTimerRef = useRef(null);
   const [isLoading, setIsLoading] = useState(true);
   const [controlsVisible, setControlsVisible] = useState(true);
   const [volume, setVolume] = useState(defaultVolume);
@@ -1293,6 +1304,7 @@ function Video({
     const video = videoRef.current;
     if (!video) return;
     Array.from(video.textTracks).forEach((track) => {
+      if (track.kind === "metadata") return;
       track.mode = mode !== "off" && track.language === mode ? "hidden" : "disabled";
     });
     if (mode === "off") setActiveCue(null);
@@ -1395,6 +1407,11 @@ function Video({
     applySubtitleMode(subtitleMode);
     if (subtitleMode === "off") setActiveCue(null);
   }, [subtitleMode, applySubtitleMode]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.playbackRate = playbackRate;
+  }, [playbackRate]);
   const subtitleModeRef = useRef(subtitleMode);
   useEffect(() => {
     subtitleModeRef.current = subtitleMode;
@@ -1408,7 +1425,7 @@ function Video({
         setActiveCue(null);
         return;
       }
-      const track = Array.from(video.textTracks).find((t) => t.language === mode);
+      const track = Array.from(video.textTracks).find((t) => t.language === mode && t.kind !== "metadata");
       if (!track || !track.activeCues || track.activeCues.length === 0) {
         setActiveCue(null);
         return;
@@ -1418,6 +1435,7 @@ function Video({
     };
     const bindTracks = () => {
       Array.from(video.textTracks).forEach((t) => {
+        if (t.kind === "metadata") return;
         t.removeEventListener("cuechange", onCueChange);
         t.addEventListener("cuechange", onCueChange);
       });
@@ -1511,7 +1529,7 @@ function Video({
     setQualities([AUTO_QUALITY]);
     setAudioTracks([]);
     setSelectedAudio(0);
-    setOpenMenu(null);
+    setSettingsOpen(false);
     video.pause();
     video.removeAttribute("src");
     video.load();
@@ -1653,11 +1671,15 @@ function Video({
     const video = videoRef.current;
     if (!video) return;
     try {
-      if (video.paused) {
+      const wasPaused = video.paused;
+      if (wasPaused) {
         await video.play();
       } else {
         video.pause();
       }
+      if (clickIconTimerRef.current) window.clearTimeout(clickIconTimerRef.current);
+      setClickIcon(wasPaused ? "play" : "pause");
+      clickIconTimerRef.current = window.setTimeout(() => setClickIcon(null), 600);
     } catch {
       setError("O navegador bloqueou a reprodu\xE7\xE3o autom\xE1tica.");
     }
@@ -1716,7 +1738,7 @@ function Video({
   }, []);
   const changeAudio = useCallback((trackId) => {
     setSelectedAudio(trackId);
-    setOpenMenu(null);
+    setSettingsOpen(false);
     if (hlsRef.current) {
       hlsRef.current.audioTrack = trackId;
     }
@@ -1726,7 +1748,7 @@ function Video({
       const option = qualities.find((quality) => quality.id === qualityId);
       if (!option) return;
       setSelectedQuality(qualityId);
-      setOpenMenu(null);
+      setSettingsOpen(false);
       if (option.type === "auto") {
         if (hlsRef.current) {
           hlsRef.current.currentLevel = -1;
@@ -1856,7 +1878,7 @@ function Video({
           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: maxHeight ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight, aspectRatio: "16/9" } : { aspectRatio: "16/9" },
           children: [
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs(
               "video",
               {
                 ref: videoRef,
@@ -1864,17 +1886,27 @@ function Video({
                 playsInline: true,
                 preload: "metadata",
                 crossOrigin: "anonymous",
-                children: parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
-                  "track",
-                  {
-                    kind: "subtitles",
-                    src: subtitle.src,
-                    srcLang: subtitle.srclang,
-                    label: subtitle.label,
-                    default: subtitle.default
-                  },
-                  `${activeSource.src}-${subtitle.srclang}`
-                ))
+                children: [
+                  parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
+                    "track",
+                    {
+                      kind: "subtitles",
+                      src: subtitle.src,
+                      srcLang: subtitle.srclang,
+                      label: subtitle.label,
+                      default: subtitle.default
+                    },
+                    `${activeSource.src}-${subtitle.srclang}`
+                  )),
+                  parsed.storyboard?.src && /* @__PURE__ */ jsx(
+                    "track",
+                    {
+                      kind: "metadata",
+                      label: "thumbnails",
+                      src: parsed.storyboard.src
+                    }
+                  )
+                ]
               }
             ),
             poster && !hasPlayed && /* @__PURE__ */ jsx(
@@ -1882,7 +1914,7 @@ function Video({
               {
                 src: poster,
                 "aria-hidden": true,
-                className: "pointer-events-none absolute inset-0 h-full w-full object-cover"
+                className: "pointer-events-none absolute inset-0 h-full w-full object-contain bg-black"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -1920,6 +1952,114 @@ function Video({
                     )
                   ] }),
                   /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "relative z-10 px-3 pb-3 text-white @sm:px-5 @sm:pb-5 @lg:px-9 @lg:pb-8", 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-3 z-50 mb-2 w-52 overflow-hidden rounded-xl border border-white/10 bg-black/90 shadow-2xl backdrop-blur-xl @sm:right-5 @lg:right-9", children: [
+                        /* @__PURE__ */ jsx("div", { className: "flex border-b border-white/10", children: ["quality", ...parsed.subtitles.length > 0 ? ["subtitles"] : [], ...audioTracks.length > 1 ? ["audio"] : [], "playback"].map((tab) => /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setSettingsTab(tab),
+                            className: `flex-1 px-3 py-2.5 text-xs font-semibold capitalize transition ${settingsTab === tab ? "text-white border-b-2 border-white -mb-px" : "text-white/50 hover:text-white/80"}`,
+                            children: tab
+                          },
+                          tab
+                        )) }),
+                        /* @__PURE__ */ jsxs("div", { className: "max-h-48 overflow-y-auto py-1", children: [
+                          settingsTab === "quality" && /* @__PURE__ */ jsx(Fragment, { children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
+                            SettingsItem,
+                            {
+                              active: selectedQuality === quality.id,
+                              onClick: () => changeQuality(quality.id),
+                              children: [
+                                quality.label,
+                                quality.id === "auto" && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] text-white/40", children: "ABR" })
+                              ]
+                            },
+                            quality.id
+                          )) }),
+                          settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 space-y-3", children: [
+                            /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Track" }),
+                              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: [{ srclang: "off", label: "Off" }, ...parsed.subtitles].map((s) => /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => {
+                                    const next = s.srclang === "off" ? "off" : s.srclang;
+                                    setSubtitleMode(next);
+                                    setSubtitleStyle((st) => ({ ...st, track: next }));
+                                  },
+                                  className: `rounded-md px-2 py-1 text-xs font-medium transition ${subtitleStyle.track === s.srclang ? "bg-white text-black" : "bg-white/10 text-white hover:bg-white/20"}`,
+                                  children: s.label
+                                },
+                                s.srclang
+                              )) })
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Size" }),
+                              /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: ["small", "medium", "large"].map((s) => /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => setSubtitleStyle((st) => ({ ...st, size: s })),
+                                  className: `rounded-md px-2 py-1 text-xs font-medium capitalize transition ${subtitleStyle.size === s ? "bg-white text-black" : "bg-white/10 text-white hover:bg-white/20"}`,
+                                  children: s
+                                },
+                                s
+                              )) })
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Color" }),
+                              /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [["white", "#fff"], ["yellow", "#facc15"], ["cyan", "#22d3ee"]].map(([c, hex]) => /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => setSubtitleStyle((st) => ({ ...st, color: c })),
+                                  className: `size-5 rounded-full ring-2 transition ${subtitleStyle.color === c ? "ring-white" : "ring-transparent"}`,
+                                  style: { backgroundColor: hex }
+                                },
+                                c
+                              )) })
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Background" }),
+                              /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [["none", "None"], ["semi", "Semi"], ["solid", "Solid"]].map(([v, label]) => /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => setSubtitleStyle((st) => ({ ...st, bg: v })),
+                                  className: `rounded-md px-2 py-1 text-xs font-medium transition ${subtitleStyle.bg === v ? "bg-white text-black" : "bg-white/10 text-white hover:bg-white/20"}`,
+                                  children: label
+                                },
+                                v
+                              )) })
+                            ] })
+                          ] }),
+                          settingsTab === "audio" && audioTracks.length > 1 && /* @__PURE__ */ jsx(Fragment, { children: audioTracks.map((track) => /* @__PURE__ */ jsx(
+                            SettingsItem,
+                            {
+                              active: selectedAudio === track.id,
+                              onClick: () => changeAudio(track.id),
+                              children: track.label
+                            },
+                            track.id
+                          )) }),
+                          settingsTab === "playback" && /* @__PURE__ */ jsx(Fragment, { children: PLAYBACK_SPEEDS.map((speed) => /* @__PURE__ */ jsx(
+                            SettingsItem,
+                            {
+                              active: playbackRate === speed,
+                              onClick: () => {
+                                setPlaybackRate(speed);
+                                setSettingsOpen(false);
+                              },
+                              children: speed === 1 ? "Normal" : `${speed}x`
+                            },
+                            speed
+                          )) })
+                        ] })
+                      ] })
+                    ] }),
                     /* @__PURE__ */ jsxs(
                       "div",
                       {
@@ -1974,6 +2114,16 @@ function Video({
                     ),
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 @sm:gap-4 @lg:gap-5", children: [
                       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 @sm:gap-4 @lg:gap-5", children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => seekRelative(-10),
+                            className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
+                            "aria-label": "Rewind 10 seconds",
+                            children: /* @__PURE__ */ jsx(Rewind, { className: "size-5 @sm:size-7" })
+                          }
+                        ),
                         /* @__PURE__ */ jsx(
                           "button",
                           {
@@ -1989,7 +2139,7 @@ function Video({
                           {
                             type: "button",
                             onClick: () => seekRelative(10),
-                            className: "hidden size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:grid @sm:size-8",
+                            className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
                             "aria-label": "Forward 10 seconds",
                             children: /* @__PURE__ */ jsx(FastForward, { className: "size-5 @sm:size-7" })
                           }
@@ -2029,91 +2179,29 @@ function Video({
                           }
                         ),
                         /* @__PURE__ */ jsx("div", { className: "mx-0.5 hidden h-4 w-px bg-white/20 @md:mx-1 @md:block" }),
-                        audioTracks.length > 1 && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              type: "button",
-                              onClick: () => setOpenMenu(openMenu === "audio" ? null : "audio"),
-                              className: `grid size-6 place-items-center rounded transition hover:text-white/80 @sm:size-8 ${openMenu === "audio" ? "text-white" : "text-white/60"}`,
-                              "aria-label": "Audio track",
-                              children: /* @__PURE__ */ jsx(AudioLines, { className: "size-4 @sm:size-5" })
-                            }
-                          ),
-                          openMenu === "audio" && /* @__PURE__ */ jsx(PopoverMenu, { onClose: () => setOpenMenu(null), children: audioTracks.map((track) => /* @__PURE__ */ jsx(
-                            PopoverItem,
-                            {
-                              active: selectedAudio === track.id,
-                              onClick: () => changeAudio(track.id),
-                              children: track.label
-                            },
-                            track.id
-                          )) })
-                        ] }),
-                        parsed.subtitles.length > 0 && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              type: "button",
-                              onClick: () => setOpenMenu(openMenu === "captions" ? null : "captions"),
-                              className: `grid size-6 place-items-center rounded transition hover:text-white/80 @sm:size-8 ${subtitleMode !== "off" || openMenu === "captions" ? "text-white" : "text-white/60"}`,
-                              "aria-label": "Captions",
-                              children: /* @__PURE__ */ jsx(Captions, { className: "size-4 @sm:size-5" })
-                            }
-                          ),
-                          openMenu === "captions" && /* @__PURE__ */ jsxs(PopoverMenu, { onClose: () => setOpenMenu(null), children: [
-                            /* @__PURE__ */ jsx(
-                              PopoverItem,
-                              {
-                                active: subtitleMode === "off",
-                                onClick: () => {
-                                  setSubtitleMode("off");
-                                  setOpenMenu(null);
-                                },
-                                children: "Off"
-                              }
-                            ),
-                            parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
-                              PopoverItem,
-                              {
-                                active: subtitleMode === subtitle.srclang,
-                                onClick: () => {
-                                  setSubtitleMode(subtitle.srclang);
-                                  setOpenMenu(null);
-                                },
-                                children: subtitle.label
-                              },
-                              subtitle.srclang
-                            ))
-                          ] })
-                        ] }),
-                        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                          /* @__PURE__ */ jsxs(
-                            "button",
-                            {
-                              type: "button",
-                              onClick: () => setOpenMenu(openMenu === "quality" ? null : "quality"),
-                              className: `flex h-6 items-center gap-1 rounded px-1.5 text-xs font-semibold transition hover:text-white/80 @sm:h-8 @sm:px-2 ${openMenu === "quality" ? "text-white" : "text-white/60"}`,
-                              "aria-label": "Quality",
-                              children: [
-                                /* @__PURE__ */ jsx(Settings, { className: "size-3.5 @sm:size-4" }),
-                                /* @__PURE__ */ jsx("span", { className: "hidden @sm:inline", children: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" })
-                              ]
-                            }
-                          ),
-                          openMenu === "quality" && /* @__PURE__ */ jsx(PopoverMenu, { onClose: () => setOpenMenu(null), children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
-                            PopoverItem,
-                            {
-                              active: selectedQuality === quality.id,
-                              onClick: () => changeQuality(quality.id),
-                              children: [
-                                quality.label,
-                                quality.id === "auto" && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] text-white/40", children: "ABR" })
-                              ]
-                            },
-                            quality.id
-                          )) })
-                        ] }),
+                        parsed.subtitles.length > 0 && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setSubtitleMode((m) => m === "off" ? parsed.subtitles[0]?.srclang ?? "off" : "off"),
+                            className: `grid size-6 place-items-center rounded transition hover:text-white/80 @sm:size-8 ${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
+                            "aria-label": "Captions",
+                            children: /* @__PURE__ */ jsx(Captions, { className: "size-4 @sm:size-5" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setSettingsOpen((v) => !v),
+                            className: `flex h-6 items-center gap-1 rounded px-1.5 text-xs font-semibold transition hover:text-white/80 @sm:h-8 @sm:px-2 ${settingsOpen ? "text-white" : "text-white/60"}`,
+                            "aria-label": "Settings",
+                            children: [
+                              /* @__PURE__ */ jsx(Settings, { className: "size-3.5 @sm:size-4" }),
+                              /* @__PURE__ */ jsx("span", { className: "hidden @sm:inline", children: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" })
+                            ]
+                          }
+                        ) }),
                         /* @__PURE__ */ jsx(
                           "button",
                           {
@@ -2130,6 +2218,14 @@ 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-14 place-items-center rounded-full bg-black/40 text-white backdrop-blur-sm ring-1 ring-white/20 @sm:size-18 @lg:size-22", children: clickIcon === "pause" ? /* @__PURE__ */ jsx(Pause, { className: "size-6 @sm:size-8 @lg:size-10" }) : /* @__PURE__ */ jsx(Play, { className: "ml-1 size-6 @sm:size-8 @lg:size-10" }) })
+              }
+            ),
             activeCue && /* @__PURE__ */ jsx(
               "div",
               {
@@ -2137,8 +2233,14 @@ function Video({
                 children: /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: "max-w-3xl rounded-lg bg-black/75 px-4 py-2 text-center text-sm font-medium leading-snug text-white backdrop-blur-sm @sm:text-base @lg:text-lg",
-                    style: { textShadow: "0 1px 4px rgba(0,0,0,0.9)" },
+                    className: "max-w-3xl rounded-lg px-4 py-2 text-center font-medium leading-snug",
+                    style: {
+                      fontSize: subtitleStyle.size === "small" ? "0.8rem" : subtitleStyle.size === "large" ? "1.25rem" : "1rem",
+                      color: subtitleStyle.color === "yellow" ? "#facc15" : subtitleStyle.color === "cyan" ? "#22d3ee" : "#ffffff",
+                      backgroundColor: subtitleStyle.bg === "none" ? "transparent" : subtitleStyle.bg === "solid" ? "rgba(0,0,0,0.9)" : "rgba(0,0,0,0.7)",
+                      backdropFilter: subtitleStyle.bg === "semi" ? "blur(4px)" : void 0,
+                      textShadow: subtitleStyle.bg === "none" ? "0 1px 6px rgba(0,0,0,1), 0 0 12px rgba(0,0,0,0.8)" : "0 1px 3px rgba(0,0,0,0.6)"
+                    },
                     children: activeCue
                   }
                 )
@@ -2151,13 +2253,7 @@ function Video({
   );
 }
 var VideoPlayer = Video;
-function PopoverMenu({ children, onClose }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: onClose }),
-    /* @__PURE__ */ jsx("div", { className: "absolute bottom-full right-0 z-50 mb-2 min-w-35 overflow-hidden rounded-xl border border-white/10 bg-black/85 py-1 shadow-2xl backdrop-blur-xl", children })
-  ] });
-}
-function PopoverItem({
+function SettingsItem({
   children,
   active,
   onClick