analytica-frontend-lib 1.1.77 → 1.1.78

package/dist/VideoPlayer/index.mjs

@@ -1,8 +1,8 @@
 // src/components/VideoPlayer/VideoPlayer.tsx
 import {
   useRef,
-  useState,
-  useEffect,
+  useState as useState2,
+  useEffect as useEffect2,
   useCallback
 } from "react";
 import { createPortal } from "react-dom";
@@ -128,6 +128,86 @@ var Text = ({
 };
 var Text_default = Text;
 
+// src/hooks/useMobile.ts
+import { useState, useEffect } from "react";
+var MOBILE_WIDTH = 500;
+var TABLET_WIDTH = 931;
+var SMALL_MOBILE_WIDTH = 425;
+var EXTRA_SMALL_MOBILE_WIDTH = 375;
+var ULTRA_SMALL_MOBILE_WIDTH = 375;
+var TINY_MOBILE_WIDTH = 320;
+var DEFAULT_WIDTH = 1200;
+var getWindowWidth = () => {
+  if (typeof window === "undefined") {
+    return DEFAULT_WIDTH;
+  }
+  return window.innerWidth;
+};
+var getDeviceType = () => {
+  const width = getWindowWidth();
+  return width < TABLET_WIDTH ? "responsive" : "desktop";
+};
+var useMobile = () => {
+  const [isMobile, setIsMobile] = useState(false);
+  const [isTablet, setIsTablet] = useState(false);
+  const [isSmallMobile, setIsSmallMobile] = useState(false);
+  const [isExtraSmallMobile, setIsExtraSmallMobile] = useState(false);
+  const [isUltraSmallMobile, setIsUltraSmallMobile] = useState(false);
+  const [isTinyMobile, setIsTinyMobile] = useState(false);
+  useEffect(() => {
+    const checkScreenSize = () => {
+      const width = getWindowWidth();
+      setIsMobile(width < MOBILE_WIDTH);
+      setIsTablet(width < TABLET_WIDTH);
+      setIsSmallMobile(width < SMALL_MOBILE_WIDTH);
+      setIsExtraSmallMobile(width < EXTRA_SMALL_MOBILE_WIDTH);
+      setIsUltraSmallMobile(width < ULTRA_SMALL_MOBILE_WIDTH);
+      setIsTinyMobile(width < TINY_MOBILE_WIDTH);
+    };
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
+  const getFormContainerClasses = () => {
+    if (isMobile) {
+      return "w-full px-4";
+    }
+    if (isTablet) {
+      return "w-full px-6";
+    }
+    return "w-full max-w-[992px] mx-auto px-0";
+  };
+  const getMobileHeaderClasses = () => {
+    return "flex flex-col items-start gap-4 mb-6";
+  };
+  const getDesktopHeaderClasses = () => {
+    return "flex flex-row justify-between items-center gap-6 mb-8";
+  };
+  const getHeaderClasses = () => {
+    return isMobile ? getMobileHeaderClasses() : getDesktopHeaderClasses();
+  };
+  const getVideoContainerClasses = () => {
+    if (isTinyMobile) return "aspect-square";
+    if (isExtraSmallMobile) return "aspect-[4/3]";
+    if (isSmallMobile) return "aspect-[16/12]";
+    return "aspect-video";
+  };
+  return {
+    isMobile,
+    isTablet,
+    isSmallMobile,
+    isExtraSmallMobile,
+    isUltraSmallMobile,
+    isTinyMobile,
+    getFormContainerClasses,
+    getHeaderClasses,
+    getMobileHeaderClasses,
+    getDesktopHeaderClasses,
+    getVideoContainerClasses,
+    getDeviceType
+  };
+};
+
 // src/components/VideoPlayer/VideoPlayer.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var CONTROLS_HIDE_TIMEOUT = 3e3;
@@ -143,8 +223,9 @@ var ProgressBar = ({
   currentTime,
   duration,
   progressPercentage,
-  onSeek
-}) => /* @__PURE__ */ jsx3("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsx3(
+  onSeek,
+  className = "px-4 pb-2"
+}) => /* @__PURE__ */ jsx3("div", { className, children: /* @__PURE__ */ jsx3(
   "input",
   {
     type: "range",
@@ -163,18 +244,20 @@ var VolumeControls = ({
   volume,
   isMuted,
   onVolumeChange,
-  onToggleMute
+  onToggleMute,
+  iconSize = 24,
+  showSlider = true
 }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
   /* @__PURE__ */ jsx3(
     IconButton_default,
     {
-      icon: isMuted ? /* @__PURE__ */ jsx3(SpeakerSlash, { size: 24 }) : /* @__PURE__ */ jsx3(SpeakerHigh, { size: 24 }),
+      icon: isMuted ? /* @__PURE__ */ jsx3(SpeakerSlash, { size: iconSize }) : /* @__PURE__ */ jsx3(SpeakerHigh, { size: iconSize }),
       onClick: onToggleMute,
       "aria-label": isMuted ? "Unmute" : "Mute",
       className: "!bg-transparent !text-white hover:!bg-white/20"
     }
   ),
-  /* @__PURE__ */ jsx3(
+  showSlider && /* @__PURE__ */ jsx3(
     "input",
     {
       type: "range",
@@ -195,7 +278,9 @@ var SpeedMenu = ({
   playbackRate,
   onToggleMenu,
   onSpeedChange,
-  isFullscreen
+  isFullscreen,
+  iconSize = 24,
+  isTinyMobile = false
 }) => {
   const buttonRef = useRef(null);
   const speedMenuContainerRef = useRef(null);
@@ -203,14 +288,17 @@ var SpeedMenu = ({
   const getMenuPosition = () => {
     if (!buttonRef.current) return { top: 0, left: 0 };
     const rect = buttonRef.current.getBoundingClientRect();
+    const menuHeight = isTinyMobile ? 150 : 180;
+    const menuWidth = isTinyMobile ? 60 : 80;
+    const padding = isTinyMobile ? 4 : 8;
     return {
       // Fixed coords are viewport-based — no scroll offsets.
-      top: Math.max(8, rect.top - 180),
-      left: Math.max(8, rect.right - 80)
+      top: Math.max(padding, rect.top - menuHeight),
+      left: Math.max(padding, rect.right - menuWidth)
     };
   };
   const position = getMenuPosition();
-  useEffect(() => {
+  useEffect2(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       const isOutsideContainer = speedMenuContainerRef.current && !speedMenuContainerRef.current.contains(target);
@@ -259,7 +347,7 @@ var SpeedMenu = ({
       IconButton_default,
       {
         ref: buttonRef,
-        icon: /* @__PURE__ */ jsx3(DotsThreeVertical, { size: 24 }),
+        icon: /* @__PURE__ */ jsx3(DotsThreeVertical, { size: iconSize }),
         onClick: onToggleMenu,
         "aria-label": "Playback speed",
         "aria-haspopup": "menu",
@@ -285,20 +373,21 @@ var VideoPlayer = ({
   storageKey = "video-progress"
 }) => {
   const videoRef = useRef(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [currentTime, setCurrentTime] = useState(0);
-  const [duration, setDuration] = useState(0);
-  const [isMuted, setIsMuted] = useState(false);
-  const [volume, setVolume] = useState(1);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const [showControls, setShowControls] = useState(true);
-  const [hasCompleted, setHasCompleted] = useState(false);
-  const [showCaptions, setShowCaptions] = useState(false);
-  useEffect(() => {
+  const { isUltraSmallMobile, isTinyMobile } = useMobile();
+  const [isPlaying, setIsPlaying] = useState2(false);
+  const [currentTime, setCurrentTime] = useState2(0);
+  const [duration, setDuration] = useState2(0);
+  const [isMuted, setIsMuted] = useState2(false);
+  const [volume, setVolume] = useState2(1);
+  const [isFullscreen, setIsFullscreen] = useState2(false);
+  const [showControls, setShowControls] = useState2(true);
+  const [hasCompleted, setHasCompleted] = useState2(false);
+  const [showCaptions, setShowCaptions] = useState2(false);
+  useEffect2(() => {
     setHasCompleted(false);
   }, [src]);
-  const [playbackRate, setPlaybackRate] = useState(1);
-  const [showSpeedMenu, setShowSpeedMenu] = useState(false);
+  const [playbackRate, setPlaybackRate] = useState2(1);
+  const [showSpeedMenu, setShowSpeedMenu] = useState2(false);
   const lastSaveTimeRef = useRef(0);
   const trackRef = useRef(null);
   const controlsTimeoutRef = useRef(null);
@@ -366,13 +455,13 @@ var VideoPlayer = ({
       }, LEAVE_HIDE_TIMEOUT);
     }
   }, [isFullscreen, clearControlsTimeout, isUserInteracting]);
-  useEffect(() => {
+  useEffect2(() => {
     if (videoRef.current) {
       videoRef.current.volume = volume;
       videoRef.current.muted = isMuted;
     }
   }, [volume, isMuted]);
-  useEffect(() => {
+  useEffect2(() => {
     const video = videoRef.current;
     if (!video) return;
     const onPlay = () => setIsPlaying(true);
@@ -387,7 +476,13 @@ var VideoPlayer = ({
       video.removeEventListener("ended", onEnded);
     };
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.setAttribute("playsinline", "");
+    video.setAttribute("webkit-playsinline", "");
+  }, []);
+  useEffect2(() => {
     if (isPlaying) {
       showControlsWithTimer();
     } else {
@@ -399,7 +494,7 @@ var VideoPlayer = ({
       }
     }
   }, [isPlaying, isFullscreen, showControlsWithTimer, clearControlsTimeout]);
-  useEffect(() => {
+  useEffect2(() => {
     const handleFullscreenChange = () => {
       const isCurrentlyFullscreen = !!document.fullscreenElement;
       setIsFullscreen(isCurrentlyFullscreen);
@@ -412,7 +507,7 @@ var VideoPlayer = ({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [showControlsWithTimer]);
-  useEffect(() => {
+  useEffect2(() => {
     const init = () => {
       if (!isFullscreen) {
         showControlsWithTimer();
@@ -445,7 +540,7 @@ var VideoPlayer = ({
     if (hasValidSaved) return saved;
     return void 0;
   }, [autoSave, storageKey, src, initialTime]);
-  useEffect(() => {
+  useEffect2(() => {
     const start = getInitialTime();
     if (start !== void 0 && videoRef.current) {
       videoRef.current.currentTime = start;
@@ -566,12 +661,12 @@ var VideoPlayer = ({
       setDuration(videoRef.current.duration);
     }
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     if (trackRef.current?.track) {
       trackRef.current.track.mode = showCaptions && subtitles ? "showing" : "hidden";
     }
   }, [subtitles, showCaptions]);
-  useEffect(() => {
+  useEffect2(() => {
     const handleVisibilityChange = () => {
       if (document.hidden && isPlaying && videoRef.current) {
         videoRef.current.pause();
@@ -593,6 +688,31 @@ var VideoPlayer = ({
     };
   }, [isPlaying, clearControlsTimeout]);
   const progressPercentage = duration > 0 ? currentTime / duration * 100 : 0;
+  const getIconSize = useCallback(() => {
+    if (isTinyMobile) return 18;
+    if (isUltraSmallMobile) return 20;
+    return 24;
+  }, [isTinyMobile, isUltraSmallMobile]);
+  const getControlsPadding = useCallback(() => {
+    if (isTinyMobile) return "px-2 pb-2 pt-1";
+    if (isUltraSmallMobile) return "px-3 pb-3 pt-1";
+    return "px-4 pb-4";
+  }, [isTinyMobile, isUltraSmallMobile]);
+  const getControlsGap = useCallback(() => {
+    if (isTinyMobile) return "gap-1";
+    if (isUltraSmallMobile) return "gap-2";
+    return "gap-4";
+  }, [isTinyMobile, isUltraSmallMobile]);
+  const getProgressBarPadding = useCallback(() => {
+    if (isTinyMobile) return "px-2 pb-1";
+    if (isUltraSmallMobile) return "px-3 pb-1";
+    return "px-4 pb-2";
+  }, [isTinyMobile, isUltraSmallMobile]);
+  const getCenterPlayButtonPosition = useCallback(() => {
+    if (isTinyMobile) return "items-center justify-center -translate-y-12";
+    if (isUltraSmallMobile) return "items-center justify-center -translate-y-8";
+    return "items-center justify-center";
+  }, [isTinyMobile, isUltraSmallMobile]);
   const getTopControlsOpacity = useCallback(() => {
     return showControls ? "opacity-100" : "opacity-0";
   }, [showControls]);
@@ -700,8 +820,9 @@ var VideoPlayer = ({
               ref: videoRef,
               src,
               poster,
-              className: "w-full h-full object-contain",
+              className: "w-full h-full object-contain analytica-video",
               controlsList: "nodownload",
+              playsInline: true,
               onTimeUpdate: handleTimeUpdate,
               onLoadedMetadata: handleLoadedMetadata,
               onClick: togglePlayPause,
@@ -721,15 +842,24 @@ var VideoPlayer = ({
               )
             }
           ),
-          !isPlaying && /* @__PURE__ */ jsx3("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 transition-opacity", children: /* @__PURE__ */ jsx3(
-            IconButton_default,
+          !isPlaying && /* @__PURE__ */ jsx3(
+            "div",
             {
-              icon: /* @__PURE__ */ jsx3(Play, { size: 32, weight: "regular", className: "ml-1" }),
-              onClick: togglePlayPause,
-              "aria-label": "Play video",
-              className: "!bg-transparent !text-white !w-auto !h-auto hover:!bg-transparent hover:!text-gray-200"
+              className: cn(
+                "absolute inset-0 flex bg-black/30 transition-opacity",
+                getCenterPlayButtonPosition()
+              ),
+              children: /* @__PURE__ */ jsx3(
+                IconButton_default,
+                {
+                  icon: /* @__PURE__ */ jsx3(Play, { size: 32, weight: "regular", className: "ml-1" }),
+                  onClick: togglePlayPause,
+                  "aria-label": "Play video",
+                  className: "!bg-transparent !text-white !w-auto !h-auto hover:!bg-transparent hover:!text-gray-200"
+                }
+              )
             }
-          ) }),
+          ),
           /* @__PURE__ */ jsx3(
             "div",
             {
@@ -762,58 +892,72 @@ var VideoPlayer = ({
                     currentTime,
                     duration,
                     progressPercentage,
-                    onSeek: handleSeek
+                    onSeek: handleSeek,
+                    className: getProgressBarPadding()
                   }
                 ),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 pb-4", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-                    /* @__PURE__ */ jsx3(
-                      IconButton_default,
-                      {
-                        icon: isPlaying ? /* @__PURE__ */ jsx3(Pause, { size: 24 }) : /* @__PURE__ */ jsx3(Play, { size: 24 }),
-                        onClick: togglePlayPause,
-                        "aria-label": isPlaying ? "Pause" : "Play",
-                        className: "!bg-transparent !text-white hover:!bg-white/20"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx3(
-                      VolumeControls,
-                      {
-                        volume,
-                        isMuted,
-                        onVolumeChange: handleVolumeChange,
-                        onToggleMute: toggleMute
-                      }
-                    ),
-                    subtitles && /* @__PURE__ */ jsx3(
-                      IconButton_default,
-                      {
-                        icon: /* @__PURE__ */ jsx3(ClosedCaptioning, { size: 24 }),
-                        onClick: toggleCaptions,
-                        "aria-label": showCaptions ? "Hide captions" : "Show captions",
-                        className: cn(
-                          "!bg-transparent hover:!bg-white/20",
-                          showCaptions ? "!text-primary-400" : "!text-white"
-                        )
-                      }
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center justify-between",
+                      getControlsPadding()
                     ),
-                    /* @__PURE__ */ jsxs(Text_default, { size: "sm", weight: "medium", color: "text-white", children: [
-                      formatTime(currentTime),
-                      " / ",
-                      formatTime(duration)
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsx3(
-                    SpeedMenu,
-                    {
-                      showSpeedMenu,
-                      playbackRate,
-                      onToggleMenu: toggleSpeedMenu,
-                      onSpeedChange: handleSpeedChange,
-                      isFullscreen
-                    }
-                  ) })
-                ] })
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: cn("flex items-center", getControlsGap()), children: [
+                        /* @__PURE__ */ jsx3(
+                          IconButton_default,
+                          {
+                            icon: isPlaying ? /* @__PURE__ */ jsx3(Pause, { size: getIconSize() }) : /* @__PURE__ */ jsx3(Play, { size: getIconSize() }),
+                            onClick: togglePlayPause,
+                            "aria-label": isPlaying ? "Pause" : "Play",
+                            className: "!bg-transparent !text-white hover:!bg-white/20"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx3(
+                          VolumeControls,
+                          {
+                            volume,
+                            isMuted,
+                            onVolumeChange: handleVolumeChange,
+                            onToggleMute: toggleMute,
+                            iconSize: getIconSize(),
+                            showSlider: !isUltraSmallMobile
+                          }
+                        ),
+                        subtitles && /* @__PURE__ */ jsx3(
+                          IconButton_default,
+                          {
+                            icon: /* @__PURE__ */ jsx3(ClosedCaptioning, { size: getIconSize() }),
+                            onClick: toggleCaptions,
+                            "aria-label": showCaptions ? "Hide captions" : "Show captions",
+                            className: cn(
+                              "!bg-transparent hover:!bg-white/20",
+                              showCaptions ? "!text-primary-400" : "!text-white"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(Text_default, { size: "sm", weight: "medium", color: "text-white", children: [
+                          formatTime(currentTime),
+                          " / ",
+                          formatTime(duration)
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsx3(
+                        SpeedMenu,
+                        {
+                          showSpeedMenu,
+                          playbackRate,
+                          onToggleMenu: toggleSpeedMenu,
+                          onSpeedChange: handleSpeedChange,
+                          iconSize: getIconSize(),
+                          isTinyMobile,
+                          isFullscreen
+                        }
+                      ) })
+                    ]
+                  }
+                )
               ]
             }
           )