analytica-frontend-lib 1.1.77 → 1.1.78

package/dist/VideoPlayer/index.js

@@ -23,7 +23,7 @@ __export(VideoPlayer_exports, {
   default: () => VideoPlayer_default
 });
 module.exports = __toCommonJS(VideoPlayer_exports);
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_react_dom = require("react-dom");
 var import_phosphor_react = require("phosphor-react");
 
@@ -138,6 +138,86 @@ var Text = ({
 };
 var Text_default = Text;
 
+// src/hooks/useMobile.ts
+var import_react2 = 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") {
+    return DEFAULT_WIDTH;
+  }
+  return window.innerWidth;
+};
+var getDeviceType = () => {
+  const width = getWindowWidth();
+  return width < TABLET_WIDTH ? "responsive" : "desktop";
+};
+var useMobile = () => {
+  const [isMobile, setIsMobile] = (0, import_react2.useState)(false);
+  const [isTablet, setIsTablet] = (0, import_react2.useState)(false);
+  const [isSmallMobile, setIsSmallMobile] = (0, import_react2.useState)(false);
+  const [isExtraSmallMobile, setIsExtraSmallMobile] = (0, import_react2.useState)(false);
+  const [isUltraSmallMobile, setIsUltraSmallMobile] = (0, import_react2.useState)(false);
+  const [isTinyMobile, setIsTinyMobile] = (0, import_react2.useState)(false);
+  (0, import_react2.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
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var CONTROLS_HIDE_TIMEOUT = 3e3;
@@ -153,8 +233,9 @@ var ProgressBar = ({
   currentTime,
   duration,
   progressPercentage,
-  onSeek
-}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  onSeek,
+  className = "px-4 pb-2"
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   "input",
   {
     type: "range",
@@ -173,18 +254,20 @@ var VolumeControls = ({
   volume,
   isMuted,
   onVolumeChange,
-  onToggleMute
+  onToggleMute,
+  iconSize = 24,
+  showSlider = true
 }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     IconButton_default,
     {
-      icon: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.SpeakerSlash, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.SpeakerHigh, { size: 24 }),
+      icon: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.SpeakerSlash, { size: iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.SpeakerHigh, { size: iconSize }),
       onClick: onToggleMute,
       "aria-label": isMuted ? "Unmute" : "Mute",
       className: "!bg-transparent !text-white hover:!bg-white/20"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  showSlider && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "input",
     {
       type: "range",
@@ -205,22 +288,27 @@ var SpeedMenu = ({
   playbackRate,
   onToggleMenu,
   onSpeedChange,
-  isFullscreen
+  isFullscreen,
+  iconSize = 24,
+  isTinyMobile = false
 }) => {
-  const buttonRef = (0, import_react2.useRef)(null);
-  const speedMenuContainerRef = (0, import_react2.useRef)(null);
-  const speedMenuRef = (0, import_react2.useRef)(null);
+  const buttonRef = (0, import_react3.useRef)(null);
+  const speedMenuContainerRef = (0, import_react3.useRef)(null);
+  const speedMenuRef = (0, import_react3.useRef)(null);
   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();
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       const isOutsideContainer = speedMenuContainerRef.current && !speedMenuContainerRef.current.contains(target);
@@ -269,7 +357,7 @@ var SpeedMenu = ({
       IconButton_default,
       {
         ref: buttonRef,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.DotsThreeVertical, { size: 24 }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.DotsThreeVertical, { size: iconSize }),
         onClick: onToggleMenu,
         "aria-label": "Playback speed",
         "aria-haspopup": "menu",
@@ -294,26 +382,27 @@ var VideoPlayer = ({
   autoSave = true,
   storageKey = "video-progress"
 }) => {
-  const videoRef = (0, import_react2.useRef)(null);
-  const [isPlaying, setIsPlaying] = (0, import_react2.useState)(false);
-  const [currentTime, setCurrentTime] = (0, import_react2.useState)(0);
-  const [duration, setDuration] = (0, import_react2.useState)(0);
-  const [isMuted, setIsMuted] = (0, import_react2.useState)(false);
-  const [volume, setVolume] = (0, import_react2.useState)(1);
-  const [isFullscreen, setIsFullscreen] = (0, import_react2.useState)(false);
-  const [showControls, setShowControls] = (0, import_react2.useState)(true);
-  const [hasCompleted, setHasCompleted] = (0, import_react2.useState)(false);
-  const [showCaptions, setShowCaptions] = (0, import_react2.useState)(false);
-  (0, import_react2.useEffect)(() => {
+  const videoRef = (0, import_react3.useRef)(null);
+  const { isUltraSmallMobile, isTinyMobile } = useMobile();
+  const [isPlaying, setIsPlaying] = (0, import_react3.useState)(false);
+  const [currentTime, setCurrentTime] = (0, import_react3.useState)(0);
+  const [duration, setDuration] = (0, import_react3.useState)(0);
+  const [isMuted, setIsMuted] = (0, import_react3.useState)(false);
+  const [volume, setVolume] = (0, import_react3.useState)(1);
+  const [isFullscreen, setIsFullscreen] = (0, import_react3.useState)(false);
+  const [showControls, setShowControls] = (0, import_react3.useState)(true);
+  const [hasCompleted, setHasCompleted] = (0, import_react3.useState)(false);
+  const [showCaptions, setShowCaptions] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
     setHasCompleted(false);
   }, [src]);
-  const [playbackRate, setPlaybackRate] = (0, import_react2.useState)(1);
-  const [showSpeedMenu, setShowSpeedMenu] = (0, import_react2.useState)(false);
-  const lastSaveTimeRef = (0, import_react2.useRef)(0);
-  const trackRef = (0, import_react2.useRef)(null);
-  const controlsTimeoutRef = (0, import_react2.useRef)(null);
-  const lastMousePositionRef = (0, import_react2.useRef)({ x: 0, y: 0 });
-  const isUserInteracting = (0, import_react2.useCallback)(() => {
+  const [playbackRate, setPlaybackRate] = (0, import_react3.useState)(1);
+  const [showSpeedMenu, setShowSpeedMenu] = (0, import_react3.useState)(false);
+  const lastSaveTimeRef = (0, import_react3.useRef)(0);
+  const trackRef = (0, import_react3.useRef)(null);
+  const controlsTimeoutRef = (0, import_react3.useRef)(null);
+  const lastMousePositionRef = (0, import_react3.useRef)({ x: 0, y: 0 });
+  const isUserInteracting = (0, import_react3.useCallback)(() => {
     if (showSpeedMenu) {
       return true;
     }
@@ -330,13 +419,13 @@ var VideoPlayer = ({
     }
     return false;
   }, [showSpeedMenu]);
-  const clearControlsTimeout = (0, import_react2.useCallback)(() => {
+  const clearControlsTimeout = (0, import_react3.useCallback)(() => {
     if (controlsTimeoutRef.current) {
       clearTimeout(controlsTimeoutRef.current);
       controlsTimeoutRef.current = null;
     }
   }, []);
-  const showControlsWithTimer = (0, import_react2.useCallback)(() => {
+  const showControlsWithTimer = (0, import_react3.useCallback)(() => {
     setShowControls(true);
     clearControlsTimeout();
     if (isFullscreen) {
@@ -351,7 +440,7 @@ var VideoPlayer = ({
       }, CONTROLS_HIDE_TIMEOUT);
     }
   }, [isFullscreen, isPlaying, clearControlsTimeout]);
-  const handleMouseMove = (0, import_react2.useCallback)(
+  const handleMouseMove = (0, import_react3.useCallback)(
     (event) => {
       const currentX = event.clientX;
       const currentY = event.clientY;
@@ -364,10 +453,10 @@ var VideoPlayer = ({
     },
     [showControlsWithTimer]
   );
-  const handleMouseEnter = (0, import_react2.useCallback)(() => {
+  const handleMouseEnter = (0, import_react3.useCallback)(() => {
     showControlsWithTimer();
   }, [showControlsWithTimer]);
-  const handleMouseLeave = (0, import_react2.useCallback)(() => {
+  const handleMouseLeave = (0, import_react3.useCallback)(() => {
     const userInteracting = isUserInteracting();
     clearControlsTimeout();
     if (!isFullscreen && !userInteracting) {
@@ -376,13 +465,13 @@ var VideoPlayer = ({
       }, LEAVE_HIDE_TIMEOUT);
     }
   }, [isFullscreen, clearControlsTimeout, isUserInteracting]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (videoRef.current) {
       videoRef.current.volume = volume;
       videoRef.current.muted = isMuted;
     }
   }, [volume, isMuted]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const video = videoRef.current;
     if (!video) return;
     const onPlay = () => setIsPlaying(true);
@@ -397,7 +486,13 @@ var VideoPlayer = ({
       video.removeEventListener("ended", onEnded);
     };
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.setAttribute("playsinline", "");
+    video.setAttribute("webkit-playsinline", "");
+  }, []);
+  (0, import_react3.useEffect)(() => {
     if (isPlaying) {
       showControlsWithTimer();
     } else {
@@ -409,7 +504,7 @@ var VideoPlayer = ({
       }
     }
   }, [isPlaying, isFullscreen, showControlsWithTimer, clearControlsTimeout]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const handleFullscreenChange = () => {
       const isCurrentlyFullscreen = !!document.fullscreenElement;
       setIsFullscreen(isCurrentlyFullscreen);
@@ -422,7 +517,7 @@ var VideoPlayer = ({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [showControlsWithTimer]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const init = () => {
       if (!isFullscreen) {
         showControlsWithTimer();
@@ -444,7 +539,7 @@ var VideoPlayer = ({
       };
     }
   }, []);
-  const getInitialTime = (0, import_react2.useCallback)(() => {
+  const getInitialTime = (0, import_react3.useCallback)(() => {
     if (!autoSave || !storageKey) {
       return Number.isFinite(initialTime) && initialTime >= 0 ? initialTime : void 0;
     }
@@ -455,14 +550,14 @@ var VideoPlayer = ({
     if (hasValidSaved) return saved;
     return void 0;
   }, [autoSave, storageKey, src, initialTime]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const start = getInitialTime();
     if (start !== void 0 && videoRef.current) {
       videoRef.current.currentTime = start;
       setCurrentTime(start);
     }
   }, [getInitialTime]);
-  const saveProgress = (0, import_react2.useCallback)(
+  const saveProgress = (0, import_react3.useCallback)(
     (time) => {
       if (!autoSave || !storageKey) return;
       const now = Date.now();
@@ -473,7 +568,7 @@ var VideoPlayer = ({
     },
     [autoSave, storageKey, src]
   );
-  const togglePlayPause = (0, import_react2.useCallback)(async () => {
+  const togglePlayPause = (0, import_react3.useCallback)(async () => {
     const video = videoRef.current;
     if (!video) return;
     if (!video.paused) {
@@ -485,7 +580,7 @@ var VideoPlayer = ({
     } catch {
     }
   }, []);
-  const handleVolumeChange = (0, import_react2.useCallback)(
+  const handleVolumeChange = (0, import_react3.useCallback)(
     (newVolume) => {
       const video = videoRef.current;
       if (!video) return;
@@ -504,7 +599,7 @@ var VideoPlayer = ({
     },
     [isMuted]
   );
-  const toggleMute = (0, import_react2.useCallback)(() => {
+  const toggleMute = (0, import_react3.useCallback)(() => {
     const video = videoRef.current;
     if (!video) return;
     if (isMuted) {
@@ -518,13 +613,13 @@ var VideoPlayer = ({
       setIsMuted(true);
     }
   }, [isMuted, volume]);
-  const handleSeek = (0, import_react2.useCallback)((newTime) => {
+  const handleSeek = (0, import_react3.useCallback)((newTime) => {
     const video = videoRef.current;
     if (video) {
       video.currentTime = newTime;
     }
   }, []);
-  const toggleFullscreen = (0, import_react2.useCallback)(() => {
+  const toggleFullscreen = (0, import_react3.useCallback)(() => {
     const container = videoRef.current?.parentElement;
     if (!container) return;
     if (!isFullscreen && container.requestFullscreen) {
@@ -533,23 +628,23 @@ var VideoPlayer = ({
       document.exitFullscreen();
     }
   }, [isFullscreen]);
-  const handleSpeedChange = (0, import_react2.useCallback)((speed) => {
+  const handleSpeedChange = (0, import_react3.useCallback)((speed) => {
     if (videoRef.current) {
       videoRef.current.playbackRate = speed;
       setPlaybackRate(speed);
       setShowSpeedMenu(false);
     }
   }, []);
-  const toggleSpeedMenu = (0, import_react2.useCallback)(() => {
+  const toggleSpeedMenu = (0, import_react3.useCallback)(() => {
     setShowSpeedMenu(!showSpeedMenu);
   }, [showSpeedMenu]);
-  const toggleCaptions = (0, import_react2.useCallback)(() => {
+  const toggleCaptions = (0, import_react3.useCallback)(() => {
     if (!trackRef.current?.track || !subtitles) return;
     const newShowCaptions = !showCaptions;
     setShowCaptions(newShowCaptions);
     trackRef.current.track.mode = newShowCaptions && subtitles ? "showing" : "hidden";
   }, [showCaptions, subtitles]);
-  const checkVideoCompletion = (0, import_react2.useCallback)(
+  const checkVideoCompletion = (0, import_react3.useCallback)(
     (progressPercent) => {
       if (progressPercent >= 95 && !hasCompleted) {
         setHasCompleted(true);
@@ -558,7 +653,7 @@ var VideoPlayer = ({
     },
     [hasCompleted, onVideoComplete]
   );
-  const handleTimeUpdate = (0, import_react2.useCallback)(() => {
+  const handleTimeUpdate = (0, import_react3.useCallback)(() => {
     const video = videoRef.current;
     if (!video) return;
     const current = video.currentTime;
@@ -571,17 +666,17 @@ var VideoPlayer = ({
       checkVideoCompletion(progressPercent);
     }
   }, [duration, saveProgress, onTimeUpdate, onProgress, checkVideoCompletion]);
-  const handleLoadedMetadata = (0, import_react2.useCallback)(() => {
+  const handleLoadedMetadata = (0, import_react3.useCallback)(() => {
     if (videoRef.current) {
       setDuration(videoRef.current.duration);
     }
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (trackRef.current?.track) {
       trackRef.current.track.mode = showCaptions && subtitles ? "showing" : "hidden";
     }
   }, [subtitles, showCaptions]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const handleVisibilityChange = () => {
       if (document.hidden && isPlaying && videoRef.current) {
         videoRef.current.pause();
@@ -603,13 +698,38 @@ var VideoPlayer = ({
     };
   }, [isPlaying, clearControlsTimeout]);
   const progressPercentage = duration > 0 ? currentTime / duration * 100 : 0;
-  const getTopControlsOpacity = (0, import_react2.useCallback)(() => {
+  const getIconSize = (0, import_react3.useCallback)(() => {
+    if (isTinyMobile) return 18;
+    if (isUltraSmallMobile) return 20;
+    return 24;
+  }, [isTinyMobile, isUltraSmallMobile]);
+  const getControlsPadding = (0, import_react3.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_react3.useCallback)(() => {
+    if (isTinyMobile) return "gap-1";
+    if (isUltraSmallMobile) return "gap-2";
+    return "gap-4";
+  }, [isTinyMobile, isUltraSmallMobile]);
+  const getProgressBarPadding = (0, import_react3.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_react3.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_react3.useCallback)(() => {
     return showControls ? "opacity-100" : "opacity-0";
   }, [showControls]);
-  const getBottomControlsOpacity = (0, import_react2.useCallback)(() => {
+  const getBottomControlsOpacity = (0, import_react3.useCallback)(() => {
     return showControls ? "opacity-100" : "opacity-0";
   }, [showControls]);
-  const handleVideoKeyDown = (0, import_react2.useCallback)(
+  const handleVideoKeyDown = (0, import_react3.useCallback)(
     (e) => {
       if (e.key) {
         e.stopPropagation();
@@ -710,8 +830,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,
@@ -731,15 +852,24 @@ var VideoPlayer = ({
               )
             }
           ),
-          !isPlaying && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            IconButton_default,
+          !isPlaying && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
             {
-              icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.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_runtime3.jsx)(
+                IconButton_default,
+                {
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.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_runtime3.jsx)(
             "div",
             {
@@ -772,58 +902,72 @@ var VideoPlayer = ({
                     currentTime,
                     duration,
                     progressPercentage,
-                    onSeek: handleSeek
+                    onSeek: handleSeek,
+                    className: getProgressBarPadding()
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between px-4 pb-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-4", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      IconButton_default,
-                      {
-                        icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.Pause, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.Play, { size: 24 }),
-                        onClick: togglePlayPause,
-                        "aria-label": isPlaying ? "Pause" : "Play",
-                        className: "!bg-transparent !text-white hover:!bg-white/20"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      VolumeControls,
-                      {
-                        volume,
-                        isMuted,
-                        onVolumeChange: handleVolumeChange,
-                        onToggleMute: toggleMute
-                      }
-                    ),
-                    subtitles && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      IconButton_default,
-                      {
-                        icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.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_runtime3.jsxs)(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center justify-between",
+                      getControlsPadding()
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Text_default, { size: "sm", weight: "medium", color: "text-white", children: [
-                      formatTime(currentTime),
-                      " / ",
-                      formatTime(duration)
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    SpeedMenu,
-                    {
-                      showSpeedMenu,
-                      playbackRate,
-                      onToggleMenu: toggleSpeedMenu,
-                      onSpeedChange: handleSpeedChange,
-                      isFullscreen
-                    }
-                  ) })
-                ] })
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("flex items-center", getControlsGap()), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          IconButton_default,
+                          {
+                            icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.Pause, { size: getIconSize() }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.Play, { size: getIconSize() }),
+                            onClick: togglePlayPause,
+                            "aria-label": isPlaying ? "Pause" : "Play",
+                            className: "!bg-transparent !text-white hover:!bg-white/20"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          VolumeControls,
+                          {
+                            volume,
+                            isMuted,
+                            onVolumeChange: handleVolumeChange,
+                            onToggleMute: toggleMute,
+                            iconSize: getIconSize(),
+                            showSlider: !isUltraSmallMobile
+                          }
+                        ),
+                        subtitles && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          IconButton_default,
+                          {
+                            icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.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__ */ (0, import_jsx_runtime3.jsxs)(Text_default, { size: "sm", weight: "medium", color: "text-white", children: [
+                          formatTime(currentTime),
+                          " / ",
+                          formatTime(duration)
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        SpeedMenu,
+                        {
+                          showSpeedMenu,
+                          playbackRate,
+                          onToggleMenu: toggleSpeedMenu,
+                          onSpeedChange: handleSpeedChange,
+                          iconSize: getIconSize(),
+                          isTinyMobile,
+                          isFullscreen
+                        }
+                      ) })
+                    ]
+                  }
+                )
               ]
             }
           )