analytica-frontend-lib 1.1.76 → 1.1.78

package/dist/index.js

@@ -193,7 +193,7 @@ function getSubjectColorWithOpacity(hexColor, isDark) {
   } else {
     let resultColor;
     if (color.length === 6) {
-      resultColor = `#${color}b3`;
+      resultColor = `#${color}4d`;
     } else if (color.length === 8) {
       resultColor = `#${color}`;
     } else {
@@ -6780,6 +6780,10 @@ var getSubjectName = (subject) => {
 var import_react22 = require("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") {
@@ -6794,11 +6798,19 @@ var getDeviceType = () => {
 var useMobile = () => {
   const [isMobile, setIsMobile] = (0, import_react22.useState)(false);
   const [isTablet, setIsTablet] = (0, import_react22.useState)(false);
+  const [isSmallMobile, setIsSmallMobile] = (0, import_react22.useState)(false);
+  const [isExtraSmallMobile, setIsExtraSmallMobile] = (0, import_react22.useState)(false);
+  const [isUltraSmallMobile, setIsUltraSmallMobile] = (0, import_react22.useState)(false);
+  const [isTinyMobile, setIsTinyMobile] = (0, import_react22.useState)(false);
   (0, import_react22.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);
@@ -6822,13 +6834,24 @@ var useMobile = () => {
   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
   };
 };
@@ -7761,8 +7784,9 @@ var ProgressBar2 = ({
   currentTime,
   duration,
   progressPercentage,
-  onSeek
-}) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "px-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  onSeek,
+  className = "px-4 pb-2"
+}) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
   "input",
   {
     type: "range",
@@ -7781,18 +7805,20 @@ var VolumeControls = ({
   volume,
   isMuted,
   onVolumeChange,
-  onToggleMute
+  onToggleMute,
+  iconSize = 24,
+  showSlider = true
 }) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
   /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     IconButton_default,
     {
-      icon: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_phosphor_react20.SpeakerSlash, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_phosphor_react20.SpeakerHigh, { size: 24 }),
+      icon: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_phosphor_react20.SpeakerSlash, { size: iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_phosphor_react20.SpeakerHigh, { size: iconSize }),
       onClick: onToggleMute,
       "aria-label": isMuted ? "Unmute" : "Mute",
       className: "!bg-transparent !text-white hover:!bg-white/20"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  showSlider && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "input",
     {
       type: "range",
@@ -7813,7 +7839,9 @@ var SpeedMenu = ({
   playbackRate,
   onToggleMenu,
   onSpeedChange,
-  isFullscreen
+  isFullscreen,
+  iconSize = 24,
+  isTinyMobile = false
 }) => {
   const buttonRef = (0, import_react26.useRef)(null);
   const speedMenuContainerRef = (0, import_react26.useRef)(null);
@@ -7821,10 +7849,13 @@ 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();
@@ -7877,7 +7908,7 @@ var SpeedMenu = ({
       IconButton_default,
       {
         ref: buttonRef,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_phosphor_react20.DotsThreeVertical, { size: 24 }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_phosphor_react20.DotsThreeVertical, { size: iconSize }),
         onClick: onToggleMenu,
         "aria-label": "Playback speed",
         "aria-haspopup": "menu",
@@ -7903,6 +7934,7 @@ var VideoPlayer = ({
   storageKey = "video-progress"
 }) => {
   const videoRef = (0, import_react26.useRef)(null);
+  const { isUltraSmallMobile, isTinyMobile } = useMobile();
   const [isPlaying, setIsPlaying] = (0, import_react26.useState)(false);
   const [currentTime, setCurrentTime] = (0, import_react26.useState)(0);
   const [duration, setDuration] = (0, import_react26.useState)(0);
@@ -8005,6 +8037,12 @@ var VideoPlayer = ({
       video.removeEventListener("ended", onEnded);
     };
   }, []);
+  (0, import_react26.useEffect)(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.setAttribute("playsinline", "");
+    video.setAttribute("webkit-playsinline", "");
+  }, []);
   (0, import_react26.useEffect)(() => {
     if (isPlaying) {
       showControlsWithTimer();
@@ -8211,6 +8249,31 @@ var VideoPlayer = ({
     };
   }, [isPlaying, clearControlsTimeout]);
   const progressPercentage = duration > 0 ? currentTime / duration * 100 : 0;
+  const getIconSize2 = (0, import_react26.useCallback)(() => {
+    if (isTinyMobile) return 18;
+    if (isUltraSmallMobile) return 20;
+    return 24;
+  }, [isTinyMobile, isUltraSmallMobile]);
+  const getControlsPadding = (0, import_react26.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 = (0, import_react26.useCallback)(() => {
+    if (isTinyMobile) return "gap-1";
+    if (isUltraSmallMobile) return "gap-2";
+    return "gap-4";
+  }, [isTinyMobile, isUltraSmallMobile]);
+  const getProgressBarPadding = (0, import_react26.useCallback)(() => {
+    if (isTinyMobile) return "px-2 pb-1";
+    if (isUltraSmallMobile) return "px-3 pb-1";
+    return "px-4 pb-2";
+  }, [isTinyMobile, isUltraSmallMobile]);
+  const getCenterPlayButtonPosition = (0, import_react26.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 = (0, import_react26.useCallback)(() => {
     return showControls ? "opacity-100" : "opacity-0";
   }, [showControls]);
@@ -8318,8 +8381,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,
@@ -8339,15 +8403,24 @@ var VideoPlayer = ({
               )
             }
           ),
-          !isPlaying && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            IconButton_default,
+          !isPlaying && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            "div",
             {
-              icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_phosphor_react20.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__ */ (0, import_jsx_runtime44.jsx)(
+                IconButton_default,
+                {
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_phosphor_react20.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__ */ (0, import_jsx_runtime44.jsx)(
             "div",
             {
@@ -8380,58 +8453,72 @@ var VideoPlayer = ({
                     currentTime,
                     duration,
                     progressPercentage,
-                    onSeek: handleSeek
+                    onSeek: handleSeek,
+                    className: getProgressBarPadding()
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center justify-between px-4 pb-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-4", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                      IconButton_default,
-                      {
-                        icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_phosphor_react20.Pause, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_phosphor_react20.Play, { size: 24 }),
-                        onClick: togglePlayPause,
-                        "aria-label": isPlaying ? "Pause" : "Play",
-                        className: "!bg-transparent !text-white hover:!bg-white/20"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                      VolumeControls,
-                      {
-                        volume,
-                        isMuted,
-                        onVolumeChange: handleVolumeChange,
-                        onToggleMute: toggleMute
-                      }
-                    ),
-                    subtitles && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                      IconButton_default,
-                      {
-                        icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_phosphor_react20.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__ */ (0, import_jsx_runtime44.jsxs)(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center justify-between",
+                      getControlsPadding()
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Text_default, { size: "sm", weight: "medium", color: "text-white", children: [
-                      formatTime(currentTime),
-                      " / ",
-                      formatTime(duration)
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                    SpeedMenu,
-                    {
-                      showSpeedMenu,
-                      playbackRate,
-                      onToggleMenu: toggleSpeedMenu,
-                      onSpeedChange: handleSpeedChange,
-                      isFullscreen
-                    }
-                  ) })
-                ] })
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("flex items-center", getControlsGap()), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                          IconButton_default,
+                          {
+                            icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_phosphor_react20.Pause, { size: getIconSize2() }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_phosphor_react20.Play, { size: getIconSize2() }),
+                            onClick: togglePlayPause,
+                            "aria-label": isPlaying ? "Pause" : "Play",
+                            className: "!bg-transparent !text-white hover:!bg-white/20"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                          VolumeControls,
+                          {
+                            volume,
+                            isMuted,
+                            onVolumeChange: handleVolumeChange,
+                            onToggleMute: toggleMute,
+                            iconSize: getIconSize2(),
+                            showSlider: !isUltraSmallMobile
+                          }
+                        ),
+                        subtitles && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                          IconButton_default,
+                          {
+                            icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_phosphor_react20.ClosedCaptioning, { size: getIconSize2() }),
+                            onClick: toggleCaptions,
+                            "aria-label": showCaptions ? "Hide captions" : "Show captions",
+                            className: cn(
+                              "!bg-transparent hover:!bg-white/20",
+                              showCaptions ? "!text-primary-400" : "!text-white"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Text_default, { size: "sm", weight: "medium", color: "text-white", children: [
+                          formatTime(currentTime),
+                          " / ",
+                          formatTime(duration)
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                        SpeedMenu,
+                        {
+                          showSpeedMenu,
+                          playbackRate,
+                          onToggleMenu: toggleSpeedMenu,
+                          onSpeedChange: handleSpeedChange,
+                          iconSize: getIconSize2(),
+                          isTinyMobile,
+                          isFullscreen
+                        }
+                      ) })
+                    ]
+                  }
+                )
               ]
             }
           )