@geekapps/silo-elements-nextjs 0.1.19 → 0.1.21

package/dist/index.js

@@ -1430,12 +1430,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(() => {
@@ -1662,13 +1672,44 @@ 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.");
     }
@@ -1878,14 +1919,6 @@ function Video({
                       }
                     )
                   ] }),
-                  activeCue && /* @__PURE__ */ jsx("div", { className: "pointer-events-none relative z-10 flex justify-center px-4 pb-3 @sm:pb-4", children: /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "max-w-3xl rounded-lg bg-black/70 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.8)" },
-                      children: activeCue
-                    }
-                  ) }),
                   /* @__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: [
                     /* @__PURE__ */ jsxs(
                       "div",
@@ -2096,6 +2129,20 @@ function Video({
                   ] })
                 ]
               }
+            ),
+            activeCue && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `pointer-events-none absolute inset-x-0 z-40 flex justify-center px-4 transition-all duration-200 ${controlsVisible ? "bottom-20 @sm:bottom-24 @lg:bottom-28" : "bottom-4 @sm:bottom-6"}`,
+                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)" },
+                    children: activeCue
+                  }
+                )
+              }
             )
           ]
         }