@geekapps/silo-elements-nextjs 0.1.20 → 0.1.22

package/dist/VideoPlayer.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
 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, Settings, Minimize, Maximize } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var AUTO_QUALITY = {
@@ -8,6 +8,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;
 }
@@ -58,7 +59,9 @@ 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 [subtitleMode, setSubtitleMode] = useState(initialSubtitleMode);
   const [activeCue, setActiveCue] = useState(null);
   const [storyboardCues, setStoryboardCues] = useState(
@@ -70,6 +73,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);
@@ -93,6 +98,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);
@@ -195,6 +201,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;
@@ -208,7 +219,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;
@@ -218,6 +229,7 @@ function Video({
     };
     const bindTracks = () => {
       Array.from(video.textTracks).forEach((t) => {
+        if (t.kind === "metadata") return;
         t.removeEventListener("cuechange", onCueChange);
         t.addEventListener("cuechange", onCueChange);
       });
@@ -230,12 +242,22 @@ function Video({
     };
   }, []);
   useEffect(() => {
+    const video = videoRef.current;
     const onFullscreenChange = () => {
-      setIsFullscreen(Boolean(document.fullscreenElement));
+      const doc = document;
+      const nativeFullscreen = Boolean(document.fullscreenElement || doc.webkitFullscreenElement);
+      const iosVideoFullscreen = Boolean(video?.webkitDisplayingFullscreen);
+      setIsFullscreen(nativeFullscreen || iosVideoFullscreen);
     };
     document.addEventListener("fullscreenchange", onFullscreenChange);
+    document.addEventListener("webkitfullscreenchange", onFullscreenChange);
+    video?.addEventListener("webkitbeginfullscreen", onFullscreenChange);
+    video?.addEventListener("webkitendfullscreen", onFullscreenChange);
     return () => {
       document.removeEventListener("fullscreenchange", onFullscreenChange);
+      document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
+      video?.removeEventListener("webkitbeginfullscreen", onFullscreenChange);
+      video?.removeEventListener("webkitendfullscreen", onFullscreenChange);
     };
   }, []);
   useEffect(() => {
@@ -301,7 +323,7 @@ function Video({
     setQualities([AUTO_QUALITY]);
     setAudioTracks([]);
     setSelectedAudio(0);
-    setOpenMenu(null);
+    setSettingsOpen(false);
     video.pause();
     video.removeAttribute("src");
     video.load();
@@ -443,11 +465,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.");
     }
@@ -462,20 +488,51 @@ function Video({
   }, []);
   const toggleFullscreen = useCallback(async () => {
     const player = playerRef.current;
-    if (!player) return;
+    const video = videoRef.current;
+    const doc = document;
+    if (!player && !video) return;
     try {
-      if (!document.fullscreenElement) {
+      const nativeFullscreen = Boolean(document.fullscreenElement || doc.webkitFullscreenElement);
+      const iosVideoFullscreen = Boolean(video?.webkitDisplayingFullscreen);
+      if (nativeFullscreen || iosVideoFullscreen) {
+        if (document.fullscreenElement && document.exitFullscreen) {
+          await document.exitFullscreen();
+          return;
+        }
+        if (doc.webkitExitFullscreen) {
+          await doc.webkitExitFullscreen();
+          return;
+        }
+        if (video?.webkitExitFullscreen) {
+          video.webkitExitFullscreen();
+          return;
+        }
+        return;
+      }
+      if (player?.requestFullscreen) {
         await player.requestFullscreen();
-      } else {
-        await document.exitFullscreen();
+        return;
+      }
+      if (player?.webkitRequestFullscreen) {
+        await player.webkitRequestFullscreen();
+        return;
+      }
+      if (video?.webkitEnterFullscreen) {
+        video.webkitEnterFullscreen();
+        return;
+      }
+      if (video?.requestFullscreen) {
+        await video.requestFullscreen();
+        return;
       }
+      throw new Error("Fullscreen unavailable");
     } catch {
       setError("N\xE3o foi poss\xEDvel alterar o modo fullscreen.");
     }
   }, []);
   const changeAudio = useCallback((trackId) => {
     setSelectedAudio(trackId);
-    setOpenMenu(null);
+    setSettingsOpen(false);
     if (hlsRef.current) {
       hlsRef.current.audioTrack = trackId;
     }
@@ -485,7 +542,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;
@@ -615,7 +672,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,
@@ -623,17 +680,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(
@@ -641,7 +708,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(
@@ -679,6 +746,81 @@ 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 left-0 right-0 z-50 mb-2 mx-0 overflow-hidden rounded-xl border border-white/10 bg-black/90 shadow-2xl backdrop-blur-xl", children: [
+                        /* @__PURE__ */ jsx("div", { className: "flex border-b border-white/10", children: ["quality", "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(Fragment, { children: [
+                            /* @__PURE__ */ jsx(
+                              SettingsItem,
+                              {
+                                active: subtitleMode === "off",
+                                onClick: () => {
+                                  setSubtitleMode("off");
+                                  setSettingsOpen(false);
+                                },
+                                children: "Off"
+                              }
+                            ),
+                            parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
+                              SettingsItem,
+                              {
+                                active: subtitleMode === subtitle.srclang,
+                                onClick: () => {
+                                  setSubtitleMode(subtitle.srclang);
+                                  setSettingsOpen(false);
+                                },
+                                children: subtitle.label
+                              },
+                              subtitle.srclang
+                            ))
+                          ] }),
+                          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",
                       {
@@ -733,6 +875,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",
                           {
@@ -748,7 +900,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" })
                           }
@@ -788,91 +940,19 @@ 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
-                          )) })
-                        ] }),
+                        /* @__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",
                           {
@@ -889,6 +969,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",
               {
@@ -910,13 +998,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