analytica-frontend-lib 1.1.10 → 1.1.12

package/dist/VideoPlayer/index.js

@@ -139,12 +139,93 @@ var Text_default = Text;
 
 // src/components/VideoPlayer/VideoPlayer.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var CONTROLS_HIDE_TIMEOUT = 3e3;
+var LEAVE_HIDE_TIMEOUT = 1e3;
 var formatTime = (seconds) => {
   if (!seconds || isNaN(seconds)) return "0:00";
   const mins = Math.floor(seconds / 60);
   const secs = Math.floor(seconds % 60);
   return `${mins}:${secs.toString().padStart(2, "0")}`;
 };
+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)(
+  "input",
+  {
+    type: "range",
+    min: 0,
+    max: duration || 100,
+    value: currentTime,
+    onChange: (e) => onSeek(parseFloat(e.target.value)),
+    className: "w-full h-1 bg-neutral-600 rounded-full appearance-none cursor-pointer slider:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500",
+    "aria-label": "Video progress",
+    style: {
+      background: `linear-gradient(to right, var(--color-primary-700) ${progressPercentage}%, var(--color-secondary-300) ${progressPercentage}%)`
+    }
+  }
+) });
+var VolumeControls = ({
+  volume,
+  isMuted,
+  onVolumeChange,
+  onToggleMute
+}) => /* @__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 }),
+      onClick: onToggleMute,
+      "aria-label": isMuted ? "Unmute" : "Mute",
+      className: "!bg-transparent !text-white hover:!bg-white/20"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "input",
+    {
+      type: "range",
+      min: 0,
+      max: 100,
+      value: Math.round(volume * 100),
+      onChange: (e) => onVolumeChange(parseInt(e.target.value)),
+      className: "w-20 h-1 bg-neutral-600 rounded-full appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-500",
+      "aria-label": "Volume control",
+      style: {
+        background: `linear-gradient(to right, var(--color-primary-700) ${volume * 100}%, var(--color-secondary-300) ${volume * 100}%)`
+      }
+    }
+  )
+] });
+var SpeedMenu = ({
+  showSpeedMenu,
+  playbackRate,
+  onToggleMenu,
+  onSpeedChange
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    IconButton_default,
+    {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.DotsThreeVertical, { size: 24 }),
+      onClick: onToggleMenu,
+      "aria-label": "Playback speed",
+      className: "!bg-transparent !text-white hover:!bg-white/20"
+    }
+  ),
+  showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute bottom-12 right-0 bg-black/90 rounded-lg p-2 min-w-20", children: [0.5, 0.75, 1, 1.25, 1.5, 2].map((speed) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "button",
+    {
+      onClick: () => onSpeedChange(speed),
+      className: `block w-full text-left px-3 py-1 text-sm rounded hover:bg-white/20 transition-colors ${playbackRate === speed ? "text-primary-400" : "text-white"}`,
+      children: [
+        speed,
+        "x"
+      ]
+    },
+    speed
+  )) })
+] });
 var VideoPlayer = ({
   src,
   poster,
@@ -169,10 +250,68 @@ var VideoPlayer = ({
   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)(() => {
+    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 mouseMoveTimeoutRef = (0, import_react2.useRef)(null);
+  const isUserInteracting = (0, import_react2.useCallback)(() => {
+    if (showSpeedMenu) return true;
+    const activeElement = document.activeElement;
+    const videoContainer = videoRef.current?.parentElement;
+    if (activeElement && videoContainer?.contains(activeElement)) {
+      const isControl = activeElement.matches("button, input, [tabindex]");
+      if (isControl) return true;
+    }
+    return false;
+  }, [showSpeedMenu]);
+  const clearControlsTimeout = (0, import_react2.useCallback)(() => {
+    if (controlsTimeoutRef.current) {
+      clearTimeout(controlsTimeoutRef.current);
+      controlsTimeoutRef.current = null;
+    }
+  }, []);
+  const clearMouseMoveTimeout = (0, import_react2.useCallback)(() => {
+    if (mouseMoveTimeoutRef.current) {
+      clearTimeout(mouseMoveTimeoutRef.current);
+      mouseMoveTimeoutRef.current = null;
+    }
+  }, []);
+  const showControlsWithTimer = (0, import_react2.useCallback)(() => {
+    setShowControls(true);
+    clearControlsTimeout();
+    if (isPlaying) {
+      controlsTimeoutRef.current = window.setTimeout(() => {
+        setShowControls(false);
+      }, CONTROLS_HIDE_TIMEOUT);
+    }
+  }, [isPlaying, clearControlsTimeout]);
+  const handleMouseMove = (0, import_react2.useCallback)(
+    (event) => {
+      const currentX = event.clientX;
+      const currentY = event.clientY;
+      const lastPos = lastMousePositionRef.current;
+      const hasMoved = Math.abs(currentX - lastPos.x) > 5 || Math.abs(currentY - lastPos.y) > 5;
+      if (hasMoved) {
+        lastMousePositionRef.current = { x: currentX, y: currentY };
+        showControlsWithTimer();
+      }
+    },
+    [showControlsWithTimer]
+  );
+  const handleMouseLeave = (0, import_react2.useCallback)(() => {
+    clearControlsTimeout();
+    if (isPlaying && !isUserInteracting()) {
+      controlsTimeoutRef.current = window.setTimeout(() => {
+        setShowControls(false);
+      }, LEAVE_HIDE_TIMEOUT);
+    }
+  }, [isPlaying, clearControlsTimeout, isUserInteracting]);
   (0, import_react2.useEffect)(() => {
     if (videoRef.current) {
       videoRef.current.volume = volume;
@@ -180,84 +319,129 @@ var VideoPlayer = ({
     }
   }, [volume, isMuted]);
   (0, import_react2.useEffect)(() => {
-    if (!autoSave || !storageKey) return;
-    const raw = localStorage.getItem(`${storageKey}-${src}`);
-    const saved = raw !== null ? Number(raw) : NaN;
-    const hasValidSaved = Number.isFinite(saved) && saved >= 0;
-    const hasValidInitial = Number.isFinite(initialTime) && initialTime >= 0;
-    let start;
-    if (hasValidInitial) {
-      start = initialTime;
-    } else if (hasValidSaved) {
-      start = saved;
+    const video = videoRef.current;
+    if (!video) return;
+    const onPlay = () => setIsPlaying(true);
+    const onPause = () => setIsPlaying(false);
+    const onEnded = () => setIsPlaying(false);
+    video.addEventListener("play", onPlay);
+    video.addEventListener("pause", onPause);
+    video.addEventListener("ended", onEnded);
+    return () => {
+      video.removeEventListener("play", onPlay);
+      video.removeEventListener("pause", onPause);
+      video.removeEventListener("ended", onEnded);
+    };
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (isPlaying) {
+      showControlsWithTimer();
     } else {
-      start = void 0;
+      clearControlsTimeout();
+      setShowControls(true);
+    }
+  }, [isPlaying, showControlsWithTimer, clearControlsTimeout]);
+  (0, import_react2.useEffect)(() => {
+    const handleFullscreenChange = () => {
+      const isCurrentlyFullscreen = !!document.fullscreenElement;
+      setIsFullscreen(isCurrentlyFullscreen);
+      if (isCurrentlyFullscreen) {
+        showControlsWithTimer();
+      }
+    };
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    };
+  }, [showControlsWithTimer]);
+  const getInitialTime = (0, import_react2.useCallback)(() => {
+    if (!autoSave || !storageKey) {
+      return Number.isFinite(initialTime) && initialTime >= 0 ? initialTime : void 0;
     }
+    const saved = Number(localStorage.getItem(`${storageKey}-${src}`) || NaN);
+    const hasValidInitial = Number.isFinite(initialTime) && initialTime >= 0;
+    const hasValidSaved = Number.isFinite(saved) && saved >= 0;
+    if (hasValidInitial) return initialTime;
+    if (hasValidSaved) return saved;
+    return void 0;
+  }, [autoSave, storageKey, src, initialTime]);
+  (0, import_react2.useEffect)(() => {
+    const start = getInitialTime();
     if (start !== void 0 && videoRef.current) {
       videoRef.current.currentTime = start;
       setCurrentTime(start);
     }
-  }, [src, storageKey, autoSave, initialTime]);
-  const saveProgress = (0, import_react2.useCallback)(() => {
-    if (!autoSave || !storageKey) return;
-    const now = Date.now();
-    if (now - lastSaveTimeRef.current > 5e3) {
-      localStorage.setItem(`${storageKey}-${src}`, currentTime.toString());
-      lastSaveTimeRef.current = now;
-    }
-  }, [autoSave, storageKey, src, currentTime]);
-  const togglePlayPause = (0, import_react2.useCallback)(() => {
-    if (videoRef.current) {
-      if (isPlaying) {
-        videoRef.current.pause();
-      } else {
-        videoRef.current.play();
+  }, [getInitialTime]);
+  const saveProgress = (0, import_react2.useCallback)(
+    (time) => {
+      if (!autoSave || !storageKey) return;
+      const now = Date.now();
+      if (now - lastSaveTimeRef.current > 5e3) {
+        localStorage.setItem(`${storageKey}-${src}`, time.toString());
+        lastSaveTimeRef.current = now;
       }
-      setIsPlaying(!isPlaying);
+    },
+    [autoSave, storageKey, src]
+  );
+  const togglePlayPause = (0, import_react2.useCallback)(async () => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (!video.paused) {
+      video.pause();
+      return;
     }
-  }, [isPlaying]);
+    try {
+      await video.play();
+    } catch {
+    }
+  }, []);
   const handleVolumeChange = (0, import_react2.useCallback)(
     (newVolume) => {
-      if (videoRef.current) {
-        const volumeValue = newVolume / 100;
-        videoRef.current.volume = volumeValue;
-        setVolume(volumeValue);
-        if (volumeValue === 0) {
-          videoRef.current.muted = true;
-          setIsMuted(true);
-        } else if (isMuted) {
-          videoRef.current.muted = false;
-          setIsMuted(false);
-        }
+      const video = videoRef.current;
+      if (!video) return;
+      const volumeValue = newVolume / 100;
+      video.volume = volumeValue;
+      setVolume(volumeValue);
+      const shouldMute = volumeValue === 0;
+      const shouldUnmute = volumeValue > 0 && isMuted;
+      if (shouldMute) {
+        video.muted = true;
+        setIsMuted(true);
+      } else if (shouldUnmute) {
+        video.muted = false;
+        setIsMuted(false);
       }
     },
     [isMuted]
   );
   const toggleMute = (0, import_react2.useCallback)(() => {
-    if (videoRef.current) {
-      if (isMuted) {
-        const restoreVolume = volume > 0 ? volume : 0.5;
-        videoRef.current.volume = restoreVolume;
-        videoRef.current.muted = false;
-        setVolume(restoreVolume);
-        setIsMuted(false);
-      } else {
-        videoRef.current.muted = true;
-        setIsMuted(true);
-      }
+    const video = videoRef.current;
+    if (!video) return;
+    if (isMuted) {
+      const restoreVolume = volume > 0 ? volume : 0.5;
+      video.volume = restoreVolume;
+      video.muted = false;
+      setVolume(restoreVolume);
+      setIsMuted(false);
+    } else {
+      video.muted = true;
+      setIsMuted(true);
     }
   }, [isMuted, volume]);
+  const handleSeek = (0, import_react2.useCallback)((newTime) => {
+    const video = videoRef.current;
+    if (video) {
+      video.currentTime = newTime;
+    }
+  }, []);
   const toggleFullscreen = (0, import_react2.useCallback)(() => {
     const container = videoRef.current?.parentElement;
     if (!container) return;
-    if (!isFullscreen) {
-      if (container.requestFullscreen) {
-        container.requestFullscreen();
-      }
-    } else if (document.exitFullscreen) {
+    if (!isFullscreen && container.requestFullscreen) {
+      container.requestFullscreen();
+    } else if (isFullscreen && document.exitFullscreen) {
       document.exitFullscreen();
     }
-    setIsFullscreen(!isFullscreen);
   }, [isFullscreen]);
   const handleSpeedChange = (0, import_react2.useCallback)((speed) => {
     if (videoRef.current) {
@@ -275,29 +459,28 @@ var VideoPlayer = ({
     setShowCaptions(newShowCaptions);
     trackRef.current.track.mode = newShowCaptions && subtitles ? "showing" : "hidden";
   }, [showCaptions, subtitles]);
-  const handleTimeUpdate = (0, import_react2.useCallback)(() => {
-    if (videoRef.current) {
-      const current = videoRef.current.currentTime;
-      setCurrentTime(current);
-      saveProgress();
-      onTimeUpdate?.(current);
-      if (duration > 0) {
-        const progressPercent = current / duration * 100;
-        onProgress?.(progressPercent);
-        if (progressPercent >= 95 && !hasCompleted) {
-          setHasCompleted(true);
-          onVideoComplete?.();
-        }
+  const checkVideoCompletion = (0, import_react2.useCallback)(
+    (progressPercent) => {
+      if (progressPercent >= 95 && !hasCompleted) {
+        setHasCompleted(true);
+        onVideoComplete?.();
       }
+    },
+    [hasCompleted, onVideoComplete]
+  );
+  const handleTimeUpdate = (0, import_react2.useCallback)(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const current = video.currentTime;
+    setCurrentTime(current);
+    saveProgress(current);
+    onTimeUpdate?.(current);
+    if (duration > 0) {
+      const progressPercent = current / duration * 100;
+      onProgress?.(progressPercent);
+      checkVideoCompletion(progressPercent);
     }
-  }, [
-    duration,
-    saveProgress,
-    onTimeUpdate,
-    onProgress,
-    onVideoComplete,
-    hasCompleted
-  ]);
+  }, [duration, saveProgress, onTimeUpdate, onProgress, checkVideoCompletion]);
   const handleLoadedMetadata = (0, import_react2.useCallback)(() => {
     if (videoRef.current) {
       setDuration(videoRef.current.duration);
@@ -326,9 +509,78 @@ var VideoPlayer = ({
     return () => {
       document.removeEventListener("visibilitychange", handleVisibilityChange);
       window.removeEventListener("blur", handleBlur);
+      clearControlsTimeout();
+      clearMouseMoveTimeout();
     };
-  }, [isPlaying]);
+  }, [isPlaying, clearControlsTimeout, clearMouseMoveTimeout]);
   const progressPercentage = duration > 0 ? currentTime / duration * 100 : 0;
+  const getTopControlsOpacity = (0, import_react2.useCallback)(() => {
+    if (isFullscreen) {
+      return showControls ? "opacity-100" : "opacity-0";
+    }
+    return !isPlaying || showControls ? "opacity-100" : "opacity-0 group-hover:opacity-100";
+  }, [isFullscreen, showControls, isPlaying]);
+  const getBottomControlsOpacity = (0, import_react2.useCallback)(() => {
+    if (isFullscreen) {
+      return showControls ? "opacity-100" : "opacity-0";
+    }
+    return !isPlaying || showControls ? "opacity-100" : "opacity-0 group-hover:opacity-100";
+  }, [isFullscreen, showControls, isPlaying]);
+  const handleVideoKeyDown = (0, import_react2.useCallback)(
+    (e) => {
+      if (e.key) {
+        e.stopPropagation();
+        showControlsWithTimer();
+      }
+      switch (e.key) {
+        case " ":
+        case "Enter":
+          e.preventDefault();
+          togglePlayPause();
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          if (videoRef.current) {
+            videoRef.current.currentTime -= 10;
+          }
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          if (videoRef.current) {
+            videoRef.current.currentTime += 10;
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          handleVolumeChange(Math.min(100, volume * 100 + 10));
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          handleVolumeChange(Math.max(0, volume * 100 - 10));
+          break;
+        case "m":
+        case "M":
+          e.preventDefault();
+          toggleMute();
+          break;
+        case "f":
+        case "F":
+          e.preventDefault();
+          toggleFullscreen();
+          break;
+        default:
+          break;
+      }
+    },
+    [
+      showControlsWithTimer,
+      togglePlayPause,
+      handleVolumeChange,
+      volume,
+      toggleMute,
+      toggleFullscreen
+    ]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("flex flex-col", className), children: [
     (title || subtitleText) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "bg-subject-1 rounded-t-xl px-8 py-4 flex items-end justify-between min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-1", children: [
       title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -355,12 +607,18 @@ var VideoPlayer = ({
       )
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "div",
+      "section",
       {
         className: cn(
           "relative w-full bg-background overflow-hidden group",
-          title || subtitleText ? "rounded-b-xl" : "rounded-xl"
+          title || subtitleText ? "rounded-b-xl" : "rounded-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,
+        onMouseLeave: handleMouseLeave,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "video",
@@ -373,39 +631,7 @@ var VideoPlayer = ({
               onTimeUpdate: handleTimeUpdate,
               onLoadedMetadata: handleLoadedMetadata,
               onClick: togglePlayPause,
-              onKeyDown: (e) => {
-                if (e.key) {
-                  setShowControls(true);
-                }
-                if (e.key === " " || e.key === "Enter") {
-                  e.preventDefault();
-                  togglePlayPause();
-                }
-                if (e.key === "ArrowLeft" && videoRef.current) {
-                  e.preventDefault();
-                  videoRef.current.currentTime -= 10;
-                }
-                if (e.key === "ArrowRight" && videoRef.current) {
-                  e.preventDefault();
-                  videoRef.current.currentTime += 10;
-                }
-                if (e.key === "ArrowUp") {
-                  e.preventDefault();
-                  handleVolumeChange(Math.min(100, volume * 100 + 10));
-                }
-                if (e.key === "ArrowDown") {
-                  e.preventDefault();
-                  handleVolumeChange(Math.max(0, volume * 100 - 10));
-                }
-                if (e.key === "m" || e.key === "M") {
-                  e.preventDefault();
-                  toggleMute();
-                }
-                if (e.key === "f" || e.key === "F") {
-                  e.preventDefault();
-                  toggleFullscreen();
-                }
-              },
+              onKeyDown: handleVideoKeyDown,
               tabIndex: 0,
               "aria-label": title ? `Video: ${title}` : "Video player",
               children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -435,9 +661,9 @@ var VideoPlayer = ({
             {
               className: cn(
                 "absolute top-0 left-0 right-0 p-4 bg-gradient-to-b from-black/70 to-transparent transition-opacity",
-                !isPlaying || showControls ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                getTopControlsOpacity()
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ml-auto block", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 IconButton_default,
                 {
                   icon: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.ArrowsInSimple, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.ArrowsOutSimple, { size: 24 }),
@@ -453,29 +679,18 @@ var VideoPlayer = ({
             {
               className: cn(
                 "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 to-transparent transition-opacity",
-                !isPlaying || showControls ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                getBottomControlsOpacity()
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "input",
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  ProgressBar,
                   {
-                    type: "range",
-                    min: 0,
-                    max: duration || 100,
-                    value: currentTime,
-                    onChange: (e) => {
-                      const newTime = parseFloat(e.target.value);
-                      if (videoRef.current) {
-                        videoRef.current.currentTime = newTime;
-                      }
-                    },
-                    className: "w-full h-1 bg-neutral-600 rounded-full appearance-none cursor-pointer slider:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500",
-                    "aria-label": "Video progress",
-                    style: {
-                      background: `linear-gradient(to right, #2271C4 ${progressPercentage}%, #D5D4D4 ${progressPercentage}%)`
-                    }
+                    currentTime,
+                    duration,
+                    progressPercentage,
+                    onSeek: handleSeek
                   }
-                ) }),
+                ),
                 /* @__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)(
@@ -487,32 +702,15 @@ var VideoPlayer = ({
                         className: "!bg-transparent !text-white hover:!bg-white/20"
                       }
                     ),
-                    /* @__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 }),
-                          onClick: toggleMute,
-                          "aria-label": isMuted ? "Unmute" : "Mute",
-                          className: "!bg-transparent !text-white hover:!bg-white/20"
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                        "input",
-                        {
-                          type: "range",
-                          min: 0,
-                          max: 100,
-                          value: Math.round(volume * 100),
-                          onChange: (e) => handleVolumeChange(parseInt(e.target.value)),
-                          className: "w-20 h-1 bg-neutral-600 rounded-full appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-500",
-                          "aria-label": "Volume control",
-                          style: {
-                            background: `linear-gradient(to right, #2271C4 ${volume * 100}%, #D5D4D4 ${volume * 100}%)`
-                          }
-                        }
-                      )
-                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      VolumeControls,
+                      {
+                        volume,
+                        isMuted,
+                        onVolumeChange: handleVolumeChange,
+                        onToggleMute: toggleMute
+                      }
+                    ),
                     subtitles && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       IconButton_default,
                       {
@@ -531,29 +729,15 @@ var VideoPlayer = ({
                       formatTime(duration)
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      IconButton_default,
-                      {
-                        icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.DotsThreeVertical, { size: 24 }),
-                        onClick: toggleSpeedMenu,
-                        "aria-label": "Playback speed",
-                        className: "!bg-transparent !text-white hover:!bg-white/20"
-                      }
-                    ),
-                    showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute bottom-12 right-0 bg-black/90 rounded-lg p-2 min-w-20", children: [0.5, 0.75, 1, 1.25, 1.5, 2].map((speed) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                      "button",
-                      {
-                        onClick: () => handleSpeedChange(speed),
-                        className: `block w-full text-left px-3 py-1 text-sm rounded hover:bg-white/20 transition-colors ${playbackRate === speed ? "text-primary-400" : "text-white"}`,
-                        children: [
-                          speed,
-                          "x"
-                        ]
-                      },
-                      speed
-                    )) })
-                  ] }) })
+                  /* @__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
+                    }
+                  ) })
                 ] })
               ]
             }