analytica-frontend-lib 1.1.11 → 1.1.13

package/dist/index.mjs

@@ -6789,6 +6789,9 @@ import {
   DotsThreeVertical as DotsThreeVertical2
 } from "phosphor-react";
 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);
@@ -6907,29 +6910,44 @@ 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;
+    }
+    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;
+      }
+    }
+    return false;
+  }, [showSpeedMenu]);
   const clearControlsTimeout = useCallback(() => {
     if (controlsTimeoutRef.current) {
       clearTimeout(controlsTimeoutRef.current);
       controlsTimeoutRef.current = null;
     }
   }, []);
-  const clearMouseMoveTimeout = useCallback(() => {
-    if (mouseMoveTimeoutRef.current) {
-      clearTimeout(mouseMoveTimeoutRef.current);
-      mouseMoveTimeoutRef.current = null;
-    }
-  }, []);
   const showControlsWithTimer = useCallback(() => {
     setShowControls(true);
     clearControlsTimeout();
-    if (isPlaying) {
-      const timeout = isFullscreen ? 2e3 : 3e3;
+    if (isFullscreen) {
+      if (isPlaying) {
+        controlsTimeoutRef.current = window.setTimeout(() => {
+          setShowControls(false);
+        }, CONTROLS_HIDE_TIMEOUT);
+      }
+    } else {
       controlsTimeoutRef.current = window.setTimeout(() => {
         setShowControls(false);
-      }, timeout);
+      }, CONTROLS_HIDE_TIMEOUT);
     }
-  }, [isPlaying, isFullscreen, clearControlsTimeout]);
+  }, [isFullscreen, isPlaying, clearControlsTimeout]);
   const handleMouseMove = useCallback(
     (event) => {
       const currentX = event.clientX;
@@ -6943,6 +6961,18 @@ var VideoPlayer = ({
     },
     [showControlsWithTimer]
   );
+  const handleMouseEnter = useCallback(() => {
+    showControlsWithTimer();
+  }, [showControlsWithTimer]);
+  const handleMouseLeave = useCallback(() => {
+    const userInteracting = isUserInteracting();
+    clearControlsTimeout();
+    if (!isFullscreen && !userInteracting) {
+      controlsTimeoutRef.current = window.setTimeout(() => {
+        setShowControls(false);
+      }, LEAVE_HIDE_TIMEOUT);
+    }
+  }, [isFullscreen, clearControlsTimeout, isUserInteracting]);
   useEffect11(() => {
     if (videoRef.current) {
       videoRef.current.volume = volume;
@@ -6969,9 +6999,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;
@@ -6985,6 +7019,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;
@@ -7141,22 +7197,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) {
@@ -7213,7 +7262,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,
         {
@@ -7242,13 +7291,15 @@ var VideoPlayer = ({
       {
         className: cn(
           "relative w-full bg-background overflow-hidden group",
-          title || subtitleText ? "rounded-b-xl" : "rounded-xl",
-          // Hide cursor when controls are hidden and video is playing in fullscreen
-          isFullscreen && isPlaying && !showControls ? "cursor-none" : "cursor-default"
+          "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: isFullscreen ? handleMouseMove : showControlsWithTimer,
-        onMouseEnter: showControlsWithTimer,
+        onMouseMove: handleMouseMove,
+        onMouseEnter: handleMouseEnter,
+        onTouchStart: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
         children: [
           /* @__PURE__ */ jsx36(
             "video",