analytica-frontend-lib 1.1.12 → 1.1.14

package/dist/index.mjs

@@ -4655,6 +4655,8 @@ var CardAudio = forwardRef12(
     const [duration, setDuration] = useState8(0);
     const [volume, setVolume] = useState8(1);
     const [showVolumeControl, setShowVolumeControl] = useState8(false);
+    const [showSpeedMenu, setShowSpeedMenu] = useState8(false);
+    const [playbackRate, setPlaybackRate] = useState8(1);
     const audioRef = useRef6(null);
     const formatTime2 = (time) => {
       const minutes = Math.floor(time / 60);
@@ -4708,6 +4710,16 @@ var CardAudio = forwardRef12(
     const toggleVolumeControl = () => {
       setShowVolumeControl(!showVolumeControl);
     };
+    const toggleSpeedMenu = () => {
+      setShowSpeedMenu(!showSpeedMenu);
+    };
+    const handleSpeedChange = (speed) => {
+      setPlaybackRate(speed);
+      if (audioRef.current) {
+        audioRef.current.playbackRate = speed;
+      }
+      setShowSpeedMenu(false);
+    };
     const getVolumeIcon = () => {
       if (volume === 0) {
         return /* @__PURE__ */ jsx26(SpeakerSimpleX, {});
@@ -4864,13 +4876,35 @@ var CardAudio = forwardRef12(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx26(
-            DotsThreeVertical,
-            {
-              size: 24,
-              className: "text-text-950 cursor-pointer hover:text-primary-600"
-            }
-          )
+          /* @__PURE__ */ jsxs20("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx26(
+              "button",
+              {
+                type: "button",
+                onClick: toggleSpeedMenu,
+                className: "cursor-pointer text-text-950 hover:text-primary-600",
+                "aria-label": "Op\xE7\xF5es de velocidade",
+                children: /* @__PURE__ */ jsx26(DotsThreeVertical, { size: 24 })
+              }
+            ),
+            showSpeedMenu && /* @__PURE__ */ jsx26("div", { className: "absolute bottom-full right-0 mb-2 p-2 bg-background border border-border-100 rounded-lg shadow-lg min-w-24 z-10", children: /* @__PURE__ */ jsx26("div", { className: "flex flex-col gap-1", children: [
+              { speed: 1, label: "1x" },
+              { speed: 1.5, label: "1.5x" },
+              { speed: 2, label: "2x" }
+            ].map(({ speed, label }) => /* @__PURE__ */ jsx26(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleSpeedChange(speed),
+                className: cn(
+                  "px-3 py-1 text-sm text-left rounded hover:bg-border-50 transition-colors",
+                  playbackRate === speed ? "bg-primary-950 text-secondary-100 font-medium" : "text-text-950"
+                ),
+                children: label
+              },
+              speed
+            )) }) })
+          ] })
         ]
       }
     );
@@ -6791,6 +6825,7 @@ import {
 import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
 var CONTROLS_HIDE_TIMEOUT = 3e3;
 var LEAVE_HIDE_TIMEOUT = 1e3;
+var INIT_DELAY = 100;
 var formatTime = (seconds) => {
   if (!seconds || isNaN(seconds)) return "0:00";
   const mins = Math.floor(seconds / 60);
@@ -6909,14 +6944,20 @@ var VideoPlayer = ({
   const trackRef = useRef9(null);
   const controlsTimeoutRef = useRef9(null);
   const lastMousePositionRef = useRef9({ x: 0, y: 0 });
-  const mouseMoveTimeoutRef = useRef9(null);
   const isUserInteracting = useCallback(() => {
-    if (showSpeedMenu) return true;
+    if (showSpeedMenu) {
+      return true;
+    }
     const activeElement = document.activeElement;
     const videoContainer = videoRef.current?.parentElement;
     if (activeElement && videoContainer?.contains(activeElement)) {
+      if (activeElement === videoRef.current) {
+        return false;
+      }
       const isControl = activeElement.matches("button, input, [tabindex]");
-      if (isControl) return true;
+      if (isControl) {
+        return true;
+      }
     }
     return false;
   }, [showSpeedMenu]);
@@ -6926,21 +6967,21 @@ var VideoPlayer = ({
       controlsTimeoutRef.current = null;
     }
   }, []);
-  const clearMouseMoveTimeout = useCallback(() => {
-    if (mouseMoveTimeoutRef.current) {
-      clearTimeout(mouseMoveTimeoutRef.current);
-      mouseMoveTimeoutRef.current = null;
-    }
-  }, []);
   const showControlsWithTimer = useCallback(() => {
     setShowControls(true);
     clearControlsTimeout();
-    if (isPlaying) {
+    if (isFullscreen) {
+      if (isPlaying) {
+        controlsTimeoutRef.current = window.setTimeout(() => {
+          setShowControls(false);
+        }, CONTROLS_HIDE_TIMEOUT);
+      }
+    } else {
       controlsTimeoutRef.current = window.setTimeout(() => {
         setShowControls(false);
       }, CONTROLS_HIDE_TIMEOUT);
     }
-  }, [isPlaying, clearControlsTimeout]);
+  }, [isFullscreen, isPlaying, clearControlsTimeout]);
   const handleMouseMove = useCallback(
     (event) => {
       const currentX = event.clientX;
@@ -6954,14 +6995,18 @@ var VideoPlayer = ({
     },
     [showControlsWithTimer]
   );
+  const handleMouseEnter = useCallback(() => {
+    showControlsWithTimer();
+  }, [showControlsWithTimer]);
   const handleMouseLeave = useCallback(() => {
+    const userInteracting = isUserInteracting();
     clearControlsTimeout();
-    if (isPlaying && !isUserInteracting()) {
+    if (!isFullscreen && !userInteracting) {
       controlsTimeoutRef.current = window.setTimeout(() => {
         setShowControls(false);
       }, LEAVE_HIDE_TIMEOUT);
     }
-  }, [isPlaying, clearControlsTimeout, isUserInteracting]);
+  }, [isFullscreen, clearControlsTimeout, isUserInteracting]);
   useEffect11(() => {
     if (videoRef.current) {
       videoRef.current.volume = volume;
@@ -6988,9 +7033,13 @@ var VideoPlayer = ({
       showControlsWithTimer();
     } else {
       clearControlsTimeout();
-      setShowControls(true);
+      if (isFullscreen) {
+        setShowControls(true);
+      } else {
+        showControlsWithTimer();
+      }
     }
-  }, [isPlaying, showControlsWithTimer, clearControlsTimeout]);
+  }, [isPlaying, isFullscreen, showControlsWithTimer, clearControlsTimeout]);
   useEffect11(() => {
     const handleFullscreenChange = () => {
       const isCurrentlyFullscreen = !!document.fullscreenElement;
@@ -7004,6 +7053,28 @@ var VideoPlayer = ({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [showControlsWithTimer]);
+  useEffect11(() => {
+    const init = () => {
+      if (!isFullscreen) {
+        showControlsWithTimer();
+      }
+    };
+    let raf1 = 0, raf2 = 0, tid;
+    if (typeof window.requestAnimationFrame === "function") {
+      raf1 = requestAnimationFrame(() => {
+        raf2 = requestAnimationFrame(init);
+      });
+      return () => {
+        cancelAnimationFrame(raf1);
+        cancelAnimationFrame(raf2);
+      };
+    } else {
+      tid = window.setTimeout(init, INIT_DELAY);
+      return () => {
+        if (tid) clearTimeout(tid);
+      };
+    }
+  }, []);
   const getInitialTime = useCallback(() => {
     if (!autoSave || !storageKey) {
       return Number.isFinite(initialTime) && initialTime >= 0 ? initialTime : void 0;
@@ -7160,22 +7231,15 @@ var VideoPlayer = ({
       document.removeEventListener("visibilitychange", handleVisibilityChange);
       window.removeEventListener("blur", handleBlur);
       clearControlsTimeout();
-      clearMouseMoveTimeout();
     };
-  }, [isPlaying, clearControlsTimeout, clearMouseMoveTimeout]);
+  }, [isPlaying, clearControlsTimeout]);
   const progressPercentage = duration > 0 ? currentTime / duration * 100 : 0;
   const getTopControlsOpacity = useCallback(() => {
-    if (isFullscreen) {
-      return showControls ? "opacity-100" : "opacity-0";
-    }
-    return !isPlaying || showControls ? "opacity-100" : "opacity-0 group-hover:opacity-100";
-  }, [isFullscreen, showControls, isPlaying]);
+    return showControls ? "opacity-100" : "opacity-0";
+  }, [showControls]);
   const getBottomControlsOpacity = useCallback(() => {
-    if (isFullscreen) {
-      return showControls ? "opacity-100" : "opacity-0";
-    }
-    return !isPlaying || showControls ? "opacity-100" : "opacity-0 group-hover:opacity-100";
-  }, [isFullscreen, showControls, isPlaying]);
+    return showControls ? "opacity-100" : "opacity-0";
+  }, [showControls]);
   const handleVideoKeyDown = useCallback(
     (e) => {
       if (e.key) {
@@ -7232,7 +7296,7 @@ var VideoPlayer = ({
     ]
   );
   return /* @__PURE__ */ jsxs30("div", { className: cn("flex flex-col", className), children: [
-    (title || subtitleText) && /* @__PURE__ */ jsx36("div", { className: "bg-subject-1 rounded-t-xl px-8 py-4 flex items-end justify-between min-h-20", children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-1", children: [
+    (title || subtitleText) && /* @__PURE__ */ jsx36("div", { className: "bg-subject-1 px-8 py-4 flex items-end justify-between min-h-20", children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-1", children: [
       title && /* @__PURE__ */ jsx36(
         Text_default,
         {
@@ -7261,13 +7325,14 @@ var VideoPlayer = ({
       {
         className: cn(
           "relative w-full bg-background overflow-hidden group",
-          title || subtitleText ? "rounded-b-xl" : "rounded-xl",
+          "rounded-b-xl",
           // Hide cursor when controls are hidden and video is playing
           isPlaying && !showControls ? "cursor-none group-hover:cursor-default" : "cursor-default"
         ),
         "aria-label": title ? `Video player: ${title}` : "Video player",
         onMouseMove: handleMouseMove,
-        onMouseEnter: showControlsWithTimer,
+        onMouseEnter: handleMouseEnter,
+        onTouchStart: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         children: [
           /* @__PURE__ */ jsx36(