@optifye/dashboard-core 6.9.11 → 6.9.12

package/dist/index.js

@@ -2925,8 +2925,8 @@ var AuthService = class {
             "Authorization": `Bearer ${accessToken}`,
             "Content-Type": "application/json"
           },
-          timeout: 3e5,
-          // 5 minutes
+          timeout: 1e4,
+          // 10 seconds
           retries: 1,
           silentErrors: false
           // We want to know about auth errors
@@ -2963,8 +2963,8 @@ var AuthService = class {
             "Authorization": `Bearer ${accessToken}`,
             "Content-Type": "application/json"
           },
-          timeout: 3e5,
-          // 5 minutes
+          timeout: 1e4,
+          // 10 seconds
           retries: 2,
           // More retries for validation
           silentErrors: true,
@@ -2996,8 +2996,8 @@ var AuthService = class {
           "Authorization": `Bearer ${accessToken}`,
           "Content-Type": "application/json"
         },
-        timeout: 3e5,
-        // 5 minutes
+        timeout: 1e4,
+        // 10 seconds
         retries: 1,
         silentErrors: false
       }
@@ -10912,7 +10912,7 @@ function useDateFormatter() {
     },
     [defaultTimezone, defaultLocale, dateFormatOptions]
   );
-  const formatTime3 = React23.useCallback(
+  const formatTime4 = React23.useCallback(
     (date, formatString) => {
       const dateObj = typeof date === "string" ? dateFns.parseISO(date) : date;
       if (!dateFns.isValid(dateObj)) return "Invalid Time";
@@ -10943,7 +10943,7 @@ function useDateFormatter() {
   }, []);
   return {
     formatDate,
-    formatTime: formatTime3,
+    formatTime: formatTime4,
     formatDateTime,
     getNow,
     timezone: defaultTimezone || "UTC",
@@ -23929,7 +23929,7 @@ var HourlyOutputChartComponent = ({
       endHour = Math.floor(endDecimalHour) % 24;
       endMinute = Math.round(endDecimalHour % 1 * 60);
     }
-    const formatTime3 = (h, m) => {
+    const formatTime4 = (h, m) => {
       const period = h >= 12 ? "PM" : "AM";
       const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
       if (m === 0) {
@@ -23937,7 +23937,7 @@ var HourlyOutputChartComponent = ({
       }
       return `${hour12}:${m.toString().padStart(2, "0")}${period}`;
     };
-    return `${formatTime3(startHour, startMinute)}-${formatTime3(endHour, endMinute)}`;
+    return `${formatTime4(startHour, startMinute)}-${formatTime4(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
   const formatTimeRange = React23__namespace.default.useCallback((hourIndex) => {
     const isLastHour = hourIndex === SHIFT_DURATION - 1;
@@ -23953,12 +23953,12 @@ var HourlyOutputChartComponent = ({
       endHour = Math.floor(endDecimalHour) % 24;
       endMinute = Math.round(endDecimalHour % 1 * 60);
     }
-    const formatTime3 = (h, m) => {
+    const formatTime4 = (h, m) => {
       const period = h >= 12 ? "PM" : "AM";
       const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
       return `${hour12}:${m.toString().padStart(2, "0")} ${period}`;
     };
-    return `${formatTime3(startHour, startMinute)} - ${formatTime3(endHour, endMinute)}`;
+    return `${formatTime4(startHour, startMinute)} - ${formatTime4(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
   const chartData = React23__namespace.default.useMemo(() => {
     return Array.from({ length: SHIFT_DURATION }, (_, i) => {
@@ -25129,7 +25129,7 @@ var SOPComplianceChart = ({
       }
     };
   }, [data, animateToNewData, mockData]);
-  const formatTime3 = (minuteIndex) => {
+  const formatTime4 = (minuteIndex) => {
     const totalMinutes = shiftStartHour * 60 + minuteIndex;
     const hours = Math.floor(totalMinutes / 60) % 24;
     const minutes = totalMinutes % 60;
@@ -25141,7 +25141,7 @@ var SOPComplianceChart = ({
     const hasDataForMinute = index < animatedData.length - 10;
     return {
       minute: index,
-      time: formatTime3(index),
+      time: formatTime4(index),
       compliance: hasDataForMinute ? animatedData[index] : null
     };
   });
@@ -25575,7 +25575,7 @@ var DateTimeDisplay = ({
   const {
     defaultTimezone
   } = useDateTimeConfig();
-  const { formatDate, formatTime: formatTime3 } = useDateFormatter();
+  const { formatDate, formatTime: formatTime4 } = useDateFormatter();
   const [now2, setNow] = React23.useState(() => getCurrentTimeInZone(defaultTimezone || "UTC"));
   React23.useEffect(() => {
     const timerId = setInterval(() => {
@@ -25587,7 +25587,7 @@ var DateTimeDisplay = ({
     return null;
   }
   const formattedDate = showDate ? formatDate(now2) : "";
-  const formattedTime = showTime ? formatTime3(now2) : "";
+  const formattedTime = showTime ? formatTime4(now2) : "";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default("flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-300", className), children: [
     showDate && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "date-display", "aria-label": `Current date: ${formattedDate}`, children: formattedDate }),
     showDate && showTime && formattedDate && formattedTime && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "separator", "aria-hidden": "true", children: "|" }),
@@ -25751,7 +25751,7 @@ var BreakNotificationPopup = ({
   const handlePrevious = () => {
     setCurrentIndex((prev) => (prev - 1 + visibleBreaks.length) % visibleBreaks.length);
   };
-  const formatTime3 = (minutes) => {
+  const formatTime4 = (minutes) => {
     const hours = Math.floor(minutes / 60);
     const mins = minutes % 60;
     if (hours > 0) {
@@ -25825,9 +25825,9 @@ var BreakNotificationPopup = ({
                 formatTo12Hour(currentBreak.endTime)
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 mb-2", children: [
-                formatTime3(currentBreak.elapsedMinutes),
+                formatTime4(currentBreak.elapsedMinutes),
                 " elapsed of ",
-                formatTime3(currentBreak.duration),
+                formatTime4(currentBreak.duration),
                 " total"
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -26131,64 +26131,208 @@ var getSeverityColor = (severity) => {
       return "bg-gray-500";
   }
 };
-var PlayPauseIndicator = ({
-  show,
+var formatTime2 = (seconds) => {
+  if (!seconds || isNaN(seconds)) return "0:00";
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor(seconds % 3600 / 60);
+  const s = Math.floor(seconds % 60);
+  if (h > 0) {
+    return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+  }
+  return `${m}:${s.toString().padStart(2, "0")}`;
+};
+var VideoControls = ({
   isPlaying,
-  duration = 600
+  currentTime,
+  duration,
+  buffered,
+  showControls,
+  controlsPinned = false,
+  onTogglePinControls,
+  playbackRate = 1,
+  onPlayPause,
+  onSeek,
+  onSeekStart,
+  onSeekEnd,
+  onToggleFullscreen,
+  onPlaybackRateChange,
+  className = ""
 }) => {
-  const [isVisible, setIsVisible] = React23.useState(false);
-  const [isFading, setIsFading] = React23.useState(false);
+  const [isDragging, setIsDragging] = React23.useState(false);
+  const [dragTime, setDragTime] = React23.useState(0);
+  const [isHoveringProgressBar, setIsHoveringProgressBar] = React23.useState(false);
+  const [showSpeedMenu, setShowSpeedMenu] = React23.useState(false);
+  const speedMenuRef = React23.useRef(null);
+  const progressColor = "#4b5563";
+  const controlsVisible = showControls || controlsPinned;
+  const getPercentage = (current, total) => {
+    if (!total || total === 0) return 0;
+    return Math.min(Math.max(current / total * 100, 0), 100);
+  };
+  const handleSeekChange = (e) => {
+    const newTime = parseFloat(e.target.value);
+    setDragTime(newTime);
+    onSeek(newTime);
+  };
+  const handleSeekStart = () => {
+    setIsDragging(true);
+    setDragTime(currentTime);
+    onSeekStart?.();
+  };
+  const handleSeekEnd = () => {
+    setIsDragging(false);
+    onSeekEnd?.();
+  };
   React23.useEffect(() => {
-    if (show) {
-      setIsVisible(true);
-      setIsFading(false);
-      const fadeTimer = setTimeout(() => {
-        setIsFading(true);
-      }, 100);
-      const hideTimer = setTimeout(() => {
-        setIsVisible(false);
-        setIsFading(false);
-      }, duration);
-      return () => {
-        clearTimeout(fadeTimer);
-        clearTimeout(hideTimer);
-      };
-    }
-  }, [show, duration]);
-  if (!isVisible) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+    const handleClickOutside = (event) => {
+      if (speedMenuRef.current && !speedMenuRef.current.contains(event.target)) {
+        setShowSpeedMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const displayTime = isDragging ? dragTime : currentTime;
+  const progressPercent = getPercentage(displayTime, duration);
+  const bufferedPercent = getPercentage(buffered, duration);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "absolute inset-0 flex items-center justify-center pointer-events-none z-10",
-      style: {
-        opacity: isFading ? 0 : 1,
-        transition: `opacity ${duration - 100}ms ease-out`
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-black/70 rounded-full p-6", children: isPlaying ? (
-        // Play icon (triangle)
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 24 24",
-            fill: "white",
-            className: "w-16 h-16",
-            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" })
-          }
-        )
-      ) : (
-        // Pause icon (two bars)
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
+      className: `absolute bottom-0 left-0 right-0 px-3 pb-3 pt-12 bg-gradient-to-t from-black/80 via-black/40 to-transparent transition-opacity duration-300 ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"} ${className}`,
+      style: { touchAction: "none" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
           {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 24 24",
-            fill: "white",
-            className: "w-16 h-16",
-            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" })
+            className: "relative h-1 mb-4 group cursor-pointer",
+            onMouseEnter: () => setIsHoveringProgressBar(true),
+            onMouseLeave: () => setIsHoveringProgressBar(false),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-2 -bottom-2 left-0 right-0 z-20" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 bottom-0 bg-white/20 rounded-full overflow-hidden z-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute top-0 left-0 bottom-0 bg-white/40 transition-all duration-200",
+                  style: { width: `${bufferedPercent}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute top-0 left-0 bottom-0 bg-[#007bff] transition-all duration-75 z-10",
+                  style: { width: `${progressPercent}%`, backgroundColor: progressColor },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: `absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 w-3 h-3 rounded-full shadow transform transition-transform duration-200 ${isHoveringProgressBar || isDragging ? "scale-100" : "scale-0"}`,
+                      style: { backgroundColor: progressColor }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "range",
+                  min: "0",
+                  max: duration || 100,
+                  step: "0.1",
+                  value: displayTime,
+                  onChange: handleSeekChange,
+                  onMouseDown: handleSeekStart,
+                  onMouseUp: handleSeekEnd,
+                  onTouchStart: handleSeekStart,
+                  onTouchEnd: handleSeekEnd,
+                  className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer z-30 margin-0 padding-0"
+                }
+              )
+            ]
           }
-        )
-      ) })
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-white", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onPlayPause();
+                },
+                className: "hover:text-[#007bff] transition-colors focus:outline-none",
+                "aria-label": isPlaying ? "Pause" : "Play",
+                children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs font-medium font-sans", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime2(displayTime) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-1 text-white/70", children: "/" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white/70", children: formatTime2(duration) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+            onTogglePinControls && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onTogglePinControls();
+                },
+                className: `transition-colors focus:outline-none ${controlsPinned ? "text-[#007bff]" : "hover:text-[#007bff]"}`,
+                "aria-label": controlsPinned ? "Unpin controls" : "Pin controls",
+                title: controlsPinned ? "Unpin controls" : "Pin controls",
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: controlsPinned ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3h6l-1 7h3v2h-4.5l-.5 4.5-2 1L10 12H6v-2h3z" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3h6l-1 7h3v2h-4v5l-2 1-1-6H6v-2h3z" }) })
+              }
+            ),
+            onPlaybackRateChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: speedMenuRef, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setShowSpeedMenu(!showSpeedMenu);
+                  },
+                  className: "text-xs font-medium hover:text-[#007bff] transition-colors focus:outline-none min-w-[32px]",
+                  "aria-label": "Playback Speed",
+                  children: [
+                    playbackRate,
+                    "x"
+                  ]
+                }
+              ),
+              showSpeedMenu && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-full right-0 mb-2 bg-black/90 text-white rounded shadow-lg overflow-hidden z-50 min-w-[80px]", children: [0.5, 1, 1.5, 2, 2.5, 3, 4, 5].map((rate) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onPlaybackRateChange(rate);
+                    setShowSpeedMenu(false);
+                  },
+                  className: `block w-full text-left px-4 py-2 text-xs hover:bg-white/20 transition-colors ${playbackRate === rate ? "text-[#007bff] font-bold" : ""}`,
+                  children: [
+                    rate,
+                    "x"
+                  ]
+                },
+                rate
+              )) })
+            ] }),
+            onToggleFullscreen && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onToggleFullscreen();
+                },
+                className: "hover:text-[#007bff] transition-colors focus:outline-none",
+                "aria-label": "Toggle Fullscreen",
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
+              }
+            )
+          ] })
+        ] })
+      ]
     }
   );
 };
@@ -26316,9 +26460,15 @@ var HlsVideoPlayer = React23.forwardRef(({
   const blobUrlRef = React23.useRef(null);
   const [isReady, setIsReady] = React23.useState(false);
   const [isLoading, setIsLoading] = React23.useState(true);
-  const [showIndicator, setShowIndicator] = React23.useState(false);
-  const [indicatorIsPlaying, setIndicatorIsPlaying] = React23.useState(false);
-  const indicatorKeyRef = React23.useRef(0);
+  const [showControls, setShowControls] = React23.useState(true);
+  const [controlsPinned, setControlsPinned] = React23.useState(false);
+  const [isPlaying, setIsPlaying] = React23.useState(false);
+  const [currentTime, setCurrentTime] = React23.useState(0);
+  const [duration, setDuration] = React23.useState(0);
+  const [buffered, setBuffered] = React23.useState(0);
+  const [playbackRate, setPlaybackRate] = React23.useState(1);
+  const userSeekingRef = React23.useRef(false);
+  const controlsTimeoutRef = React23.useRef(null);
   const eventCallbacksRef = React23.useRef({
     onReady,
     onPlay,
@@ -26497,8 +26647,6 @@ var HlsVideoPlayer = React23.forwardRef(({
             }
           });
           hls.on(Hls3.Events.FRAG_LOADING, () => {
-            setIsLoading(true);
-            eventCallbacksRef.current.onLoadingChange?.(true);
           });
           hls.on(Hls3.Events.FRAG_LOADED, () => {
             setIsLoading(false);
@@ -26552,25 +26700,52 @@ var HlsVideoPlayer = React23.forwardRef(({
     const handleCanPlay = () => {
       if (!hlsRef.current) {
         setIsReady(true);
-        onReady?.(player);
       }
+      setIsLoading(false);
+      eventCallbacksRef.current.onLoadingChange?.(false);
+      onReady?.(player);
+    };
+    const handlePlay = () => {
+      setIsPlaying(true);
+      eventCallbacksRef.current.onPlay?.(player);
+    };
+    const handlePause = () => {
+      if (userSeekingRef.current && videoRef.current) {
+        videoRef.current.play().catch((err) => console.warn("Auto-resume after seek pause failed:", err));
+        return;
+      }
+      setIsPlaying(false);
+      eventCallbacksRef.current.onPause?.(player);
     };
-    const handlePlay = () => eventCallbacksRef.current.onPlay?.(player);
-    const handlePause = () => eventCallbacksRef.current.onPause?.(player);
     const handlePlaying = () => {
       setIsLoading(false);
+      setIsPlaying(true);
       eventCallbacksRef.current.onLoadingChange?.(false);
       eventCallbacksRef.current.onPlaying?.(player);
     };
     const handleTimeUpdate = () => {
       const currentTime2 = video.currentTime || 0;
+      setCurrentTime(currentTime2);
+      if (video.buffered.length > 0) {
+        for (let i = 0; i < video.buffered.length; i++) {
+          if (video.buffered.start(i) <= currentTime2 && video.buffered.end(i) >= currentTime2) {
+            setBuffered(video.buffered.end(i));
+            break;
+          }
+        }
+      }
       eventCallbacksRef.current.onTimeUpdate?.(player, currentTime2);
     };
     const handleDurationChange = () => {
       const duration2 = video.duration || 0;
+      setDuration(duration2);
       eventCallbacksRef.current.onDurationChange?.(player, duration2);
     };
-    const handleEnded = () => eventCallbacksRef.current.onEnded?.(player);
+    const handleEnded = () => {
+      setIsPlaying(false);
+      userSeekingRef.current = false;
+      eventCallbacksRef.current.onEnded?.(player);
+    };
     const handleLoadStart = () => {
       setIsLoading(true);
       eventCallbacksRef.current.onLoadingChange?.(true);
@@ -26586,8 +26761,19 @@ var HlsVideoPlayer = React23.forwardRef(({
       setIsLoading(true);
       eventCallbacksRef.current.onLoadingChange?.(true);
     };
-    const handleSeeking = () => eventCallbacksRef.current.onSeeking?.(player);
-    const handleSeeked = () => eventCallbacksRef.current.onSeeked?.(player);
+    const handleSeeking = () => {
+      userSeekingRef.current = true;
+      eventCallbacksRef.current.onSeeking?.(player);
+    };
+    const handleSeeked = () => {
+      setIsLoading(false);
+      eventCallbacksRef.current.onLoadingChange?.(false);
+      if (videoRef.current) {
+        videoRef.current.play().catch((err) => console.warn("Resume playback after seek failed:", err));
+      }
+      userSeekingRef.current = false;
+      eventCallbacksRef.current.onSeeked?.(player);
+    };
     const handleError = () => {
       const error = video.error;
       if (error) {
@@ -26600,6 +26786,10 @@ var HlsVideoPlayer = React23.forwardRef(({
         eventCallbacksRef.current.onError?.(player, errorInfo);
       }
     };
+    const handlePlaybackRateChange2 = (e) => {
+      const target = e.target;
+      setPlaybackRate(target.playbackRate);
+    };
     video.addEventListener("canplay", handleCanPlay);
     video.addEventListener("play", handlePlay);
     video.addEventListener("pause", handlePause);
@@ -26614,6 +26804,7 @@ var HlsVideoPlayer = React23.forwardRef(({
     video.addEventListener("seeking", handleSeeking);
     video.addEventListener("seeked", handleSeeked);
     video.addEventListener("error", handleError);
+    video.addEventListener("ratechange", handlePlaybackRateChange2);
     return () => {
       video.removeEventListener("canplay", handleCanPlay);
       video.removeEventListener("play", handlePlay);
@@ -26629,6 +26820,7 @@ var HlsVideoPlayer = React23.forwardRef(({
       video.removeEventListener("seeking", handleSeeking);
       video.removeEventListener("seeked", handleSeeked);
       video.removeEventListener("error", handleError);
+      video.removeEventListener("ratechange", handlePlaybackRateChange2);
     };
   }, [
     src,
@@ -26657,20 +26849,46 @@ var HlsVideoPlayer = React23.forwardRef(({
       }
     }
   }, [autoplay]);
+  const resetControlsTimeout = React23.useCallback(() => {
+    if (controlsPinned) {
+      setShowControls(true);
+      return;
+    }
+    setShowControls(true);
+    if (controlsTimeoutRef.current) {
+      clearTimeout(controlsTimeoutRef.current);
+    }
+    if (isPlaying) {
+      controlsTimeoutRef.current = setTimeout(() => {
+        setShowControls(false);
+      }, 3e3);
+    }
+  }, [isPlaying, controlsPinned]);
+  const handleMouseMove = React23.useCallback(() => {
+    resetControlsTimeout();
+  }, [resetControlsTimeout]);
+  React23.useEffect(() => {
+    resetControlsTimeout();
+    return () => {
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+    };
+  }, [isPlaying, resetControlsTimeout]);
   const play = React23.useCallback(() => {
     return videoRef.current?.play();
   }, []);
   const pause = React23.useCallback(() => {
     videoRef.current?.pause();
   }, []);
-  const currentTime = React23.useCallback((time2) => {
+  const currentTimeProp = React23.useCallback((time2) => {
     if (time2 !== void 0 && videoRef.current) {
       videoRef.current.currentTime = time2;
       return time2;
     }
     return videoRef.current?.currentTime || 0;
   }, []);
-  const duration = React23.useCallback(() => {
+  const durationProp = React23.useCallback(() => {
     return videoRef.current?.duration || 0;
   }, []);
   const paused = React23.useCallback(() => {
@@ -26683,95 +26901,144 @@ var HlsVideoPlayer = React23.forwardRef(({
     }
     return videoRef.current?.muted ?? false;
   }, []);
-  const volume = React23.useCallback((level) => {
+  const volumeProp = React23.useCallback((level) => {
     if (level !== void 0 && videoRef.current) {
       videoRef.current.volume = level;
       return level;
     }
     return videoRef.current?.volume ?? 1;
   }, []);
-  const playbackRate = React23.useCallback((rate) => {
+  const playbackRateProp = React23.useCallback((rate) => {
     if (rate !== void 0 && videoRef.current) {
       videoRef.current.playbackRate = rate;
       return rate;
     }
     return videoRef.current?.playbackRate ?? 1;
   }, []);
+  const handleTogglePlay = React23.useCallback(() => {
+    if (videoRef.current) {
+      if (videoRef.current.paused) {
+        videoRef.current.play();
+      } else {
+        videoRef.current.pause();
+      }
+    }
+  }, []);
+  const handleSeek = React23.useCallback((time2) => {
+    if (videoRef.current) {
+      videoRef.current.currentTime = time2;
+      videoRef.current.play().catch((err) => console.warn("Resume playback failed during seek:", err));
+    }
+  }, []);
+  const handleSeekStart = React23.useCallback(() => {
+    userSeekingRef.current = true;
+  }, []);
+  const handleSeekEnd = React23.useCallback(() => {
+    if (videoRef.current) {
+      videoRef.current.play().catch((err) => console.warn("Resume playback failed after seek:", err));
+    }
+  }, []);
+  const handlePlaybackRateChange = React23.useCallback((rate) => {
+    if (videoRef.current) {
+      videoRef.current.playbackRate = rate;
+    }
+  }, []);
+  const handleToggleFullscreen = React23.useCallback(() => {
+    if (videoContainerRef.current) {
+      if (!document.fullscreenElement) {
+        videoContainerRef.current.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    }
+  }, []);
   React23.useImperativeHandle(ref, () => ({
     hls: hlsRef.current,
     video: videoRef.current,
     play,
     pause,
-    currentTime,
-    duration,
+    currentTime: currentTimeProp,
+    duration: durationProp,
     paused,
     mute,
-    volume,
-    playbackRate,
+    volume: volumeProp,
+    playbackRate: playbackRateProp,
     dispose,
     isReady,
     // For backward compatibility with Video.js API
     player: playerLikeObject()
-  }), [play, pause, currentTime, duration, paused, mute, volume, playbackRate, dispose, isReady, playerLikeObject]);
-  const handleClickWithIndicator = React23.useCallback(() => {
-    if (!onClick || !videoRef.current) return;
-    const willBePlaying = videoRef.current.paused;
-    setIndicatorIsPlaying(willBePlaying);
-    setShowIndicator(false);
-    setTimeout(() => {
-      indicatorKeyRef.current += 1;
-      setShowIndicator(true);
-    }, 0);
-    onClick();
-  }, [onClick]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `hls-video-player-wrapper ${className}`, style: { position: "relative", width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "hls-video-player-container",
-        ref: videoContainerRef,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "video",
+  }), [play, pause, currentTimeProp, durationProp, paused, mute, volumeProp, playbackRateProp, dispose, isReady, playerLikeObject]);
+  const handleContainerClick = React23.useCallback(() => {
+    if (!onClick && !controls) {
+      handleTogglePlay();
+    }
+    if (onClick) {
+      onClick();
+    }
+  }, [onClick, controls, handleTogglePlay]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `hls-video-player-wrapper ${className} group`,
+      style: { position: "relative", width: "100%", height: "100%" },
+      onMouseMove: handleMouseMove,
+      onMouseLeave: () => isPlaying && !controlsPinned && setShowControls(false),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
           {
-            ref: videoRef,
-            className: "hls-video-element",
-            poster,
-            controls,
-            loop,
-            muted,
-            playsInline,
-            autoPlay: autoplay,
-            preload: "metadata"
+            className: "hls-video-player-container",
+            ref: videoContainerRef,
+            onClick: handleContainerClick,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "video",
+                {
+                  ref: videoRef,
+                  className: "hls-video-element",
+                  poster,
+                  controls: false,
+                  loop,
+                  muted,
+                  playsInline,
+                  autoPlay: autoplay,
+                  preload: "metadata"
+                }
+              ),
+              controls && /* @__PURE__ */ jsxRuntime.jsx(
+                VideoControls,
+                {
+                  isPlaying,
+                  currentTime,
+                  duration,
+                  buffered,
+                  showControls: controlsPinned || showControls || !isPlaying,
+                  controlsPinned,
+                  playbackRate,
+                  onPlayPause: handleTogglePlay,
+                  onSeek: handleSeek,
+                  onSeekStart: handleSeekStart,
+                  onSeekEnd: handleSeekEnd,
+                  onPlaybackRateChange: handlePlaybackRateChange,
+                  onTogglePinControls: () => setControlsPinned((prev) => {
+                    const next = !prev;
+                    if (next) {
+                      setShowControls(true);
+                    } else {
+                      resetControlsTimeout();
+                    }
+                    return next;
+                  }),
+                  onToggleFullscreen: handleToggleFullscreen
+                }
+              )
+            ]
           }
-        )
-      }
-    ),
-    isLoading && !externalLoadingControl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hls-video-player-loading", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-    onClick && !controls && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        onClick: handleClickWithIndicator,
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          zIndex: 1,
-          cursor: "pointer"
-        },
-        "aria-label": "Click to play/pause"
-      }
-    ),
-    onClick && !controls && /* @__PURE__ */ jsxRuntime.jsx(
-      PlayPauseIndicator,
-      {
-        show: showIndicator,
-        isPlaying: indicatorIsPlaying
-      },
-      indicatorKeyRef.current
-    )
-  ] });
+        ),
+        isLoading && !externalLoadingControl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hls-video-player-loading", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) })
+      ]
+    }
+  );
 });
 HlsVideoPlayer.displayName = "HlsVideoPlayer";
 var VideoPlayer = HlsVideoPlayer;
@@ -26779,6 +27046,7 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
   crop,
   debug = false,
   onClick,
+  controls = true,
   ...videoProps
 }, ref) => {
   const {
@@ -26800,9 +27068,15 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
   const [isVideoReady, setIsVideoReady] = React23.useState(false);
   const [canvasDimensions, setCanvasDimensions] = React23.useState({ width: 0, height: 0 });
   const [isProcessing, setIsProcessing] = React23.useState(false);
-  const [showIndicator, setShowIndicator] = React23.useState(false);
-  const [indicatorIsPlaying, setIndicatorIsPlaying] = React23.useState(false);
-  const indicatorKeyRef = React23.useRef(0);
+  const [showControls, setShowControls] = React23.useState(true);
+  const [isPlaying, setIsPlaying] = React23.useState(false);
+  const [currentTime, setCurrentTime] = React23.useState(0);
+  const [duration, setDuration] = React23.useState(0);
+  const [buffered, setBuffered] = React23.useState(0);
+  const [playbackRate, setPlaybackRate] = React23.useState(1);
+  const controlsTimeoutRef = React23.useRef(null);
+  const userSeekingRef = React23.useRef(false);
+  const [controlsPinned, setControlsPinned] = React23.useState(false);
   const stopCanvasRendering = React23.useCallback(() => {
     if (animationFrameRef.current) {
       cancelAnimationFrame(animationFrameRef.current);
@@ -26887,7 +27161,7 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
     const canvas = canvasRef.current;
     const video = videoElementRef.current;
     const ctx = canvas.getContext("2d");
-    if (!ctx || video.paused || video.ended) {
+    if (!ctx || video.readyState < 2) {
       return;
     }
     const videoWidth = video.videoWidth;
@@ -26914,7 +27188,9 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
       canvas.height
       // Destination (full canvas)
     );
-    animationFrameRef.current = requestAnimationFrame(renderFrameToCanvas);
+    if (!video.paused && !video.ended) {
+      animationFrameRef.current = requestAnimationFrame(renderFrameToCanvas);
+    }
   }, [crop]);
   const handleVideoReady = React23.useCallback((player) => {
     console.log("[CroppedHlsVideoPlayer] Video player ready");
@@ -26922,11 +27198,15 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
     if (videoEl) {
       videoElementRef.current = videoEl;
       setIsVideoReady(true);
+      if (videoEl.readyState >= 2) {
+        renderFrameToCanvas();
+      }
     }
     onReadyProp?.(player);
-  }, [onReadyProp]);
+  }, [onReadyProp, renderFrameToCanvas]);
   const handleVideoPlay = React23.useCallback((player) => {
     console.log("[CroppedHlsVideoPlayer] Video playing, starting canvas rendering");
+    setIsPlaying(true);
     if (crop && canvasRef.current) {
       setIsProcessing(true);
       renderFrameToCanvas();
@@ -26934,43 +27214,40 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
     onPlayProp?.(player);
   }, [crop, renderFrameToCanvas, onPlayProp]);
   const handleVideoPause = React23.useCallback((player) => {
-    console.log("[CroppedHlsVideoPlayer] Video paused, stopping canvas rendering and CLEARING canvas");
+    console.log("[CroppedHlsVideoPlayer] Video paused, stopping canvas rendering (keeping last frame)");
+    if (userSeekingRef.current && hiddenVideoRef.current) {
+      hiddenVideoRef.current.play()?.catch(() => {
+      });
+      return;
+    }
     stopCanvasRendering();
     setIsProcessing(false);
-    if (canvasRef.current) {
-      const ctx = canvasRef.current.getContext("2d");
-      if (ctx) {
-        ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-      }
-    }
+    setIsPlaying(false);
+    renderFrameToCanvas();
     onPauseProp?.(player);
-  }, [stopCanvasRendering, onPauseProp]);
+  }, [stopCanvasRendering, onPauseProp, renderFrameToCanvas]);
   const handleVideoEnded = React23.useCallback((player) => {
-    console.log("[CroppedHlsVideoPlayer] Video ended, CLEARING canvas");
+    console.log("[CroppedHlsVideoPlayer] Video ended, stopping canvas rendering (keeping last frame)");
     stopCanvasRendering();
     setIsProcessing(false);
-    if (canvasRef.current) {
-      const ctx = canvasRef.current.getContext("2d");
-      if (ctx) {
-        ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-      }
-    }
+    setIsPlaying(false);
+    userSeekingRef.current = false;
     onEndedProp?.(player);
   }, [stopCanvasRendering, onEndedProp]);
   const handleSeeking = React23.useCallback((player) => {
     console.log("[CroppedHlsVideoPlayer] Video seeking");
-    if (crop && !videoElementRef.current?.paused) {
+    userSeekingRef.current = true;
+    if (crop) {
       renderFrameToCanvas();
     }
     onSeekingProp?.(player);
   }, [crop, renderFrameToCanvas, onSeekingProp]);
   const handleSeeked = React23.useCallback((player) => {
     console.log("[CroppedHlsVideoPlayer] Video seeked");
-    if (crop && !videoElementRef.current?.paused) {
+    hiddenVideoRef.current?.play()?.catch(() => {
+    });
+    userSeekingRef.current = false;
+    if (crop) {
       renderFrameToCanvas();
     }
     onSeekedProp?.(player);
@@ -26978,8 +27255,29 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
   const handleLoadedMetadata = React23.useCallback((player) => {
     console.log("[CroppedHlsVideoPlayer] Video metadata loaded");
     calculateCanvasDimensions();
+    if (hiddenVideoRef.current?.video) {
+      setDuration(hiddenVideoRef.current.video.duration || 0);
+    }
+    requestAnimationFrame(() => renderFrameToCanvas());
     onLoadedMetadataProp?.(player);
-  }, [calculateCanvasDimensions, onLoadedMetadataProp]);
+  }, [calculateCanvasDimensions, onLoadedMetadataProp, renderFrameToCanvas]);
+  const handleTimeUpdate = React23.useCallback((player, time2) => {
+    setCurrentTime(time2);
+    if (hiddenVideoRef.current?.video && hiddenVideoRef.current.video.buffered.length > 0) {
+      const video = hiddenVideoRef.current.video;
+      for (let i = 0; i < video.buffered.length; i++) {
+        if (video.buffered.start(i) <= time2 && video.buffered.end(i) >= time2) {
+          setBuffered(video.buffered.end(i));
+          break;
+        }
+      }
+    }
+    videoProps.onTimeUpdate?.(player, time2);
+  }, [videoProps.onTimeUpdate]);
+  const handleDurationChange = React23.useCallback((player, dur) => {
+    setDuration(dur);
+    videoProps.onDurationChange?.(player, dur);
+  }, [videoProps.onDurationChange]);
   React23.useEffect(() => {
     calculateCanvasDimensions();
     const handleResize = () => {
@@ -27007,33 +27305,97 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
       stopCanvasRendering();
     };
   }, [stopCanvasRendering]);
+  const resetControlsTimeout = React23.useCallback(() => {
+    if (controlsPinned) {
+      setShowControls(true);
+      return;
+    }
+    setShowControls(true);
+    if (controlsTimeoutRef.current) {
+      clearTimeout(controlsTimeoutRef.current);
+    }
+    if (isPlaying) {
+      controlsTimeoutRef.current = setTimeout(() => {
+        setShowControls(false);
+      }, 3e3);
+    }
+  }, [isPlaying, controlsPinned]);
+  const handleMouseMove = React23.useCallback(() => {
+    resetControlsTimeout();
+  }, [resetControlsTimeout]);
+  React23.useEffect(() => {
+    resetControlsTimeout();
+    return () => {
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+    };
+  }, [isPlaying, resetControlsTimeout]);
+  const handleTogglePlay = React23.useCallback(() => {
+    if (hiddenVideoRef.current?.video) {
+      if (hiddenVideoRef.current.video.paused) {
+        hiddenVideoRef.current.play();
+      } else {
+        hiddenVideoRef.current.pause();
+      }
+    }
+  }, []);
+  const handleSeek = React23.useCallback((time2) => {
+    if (hiddenVideoRef.current) {
+      hiddenVideoRef.current.currentTime(time2);
+      hiddenVideoRef.current.play()?.catch(() => {
+      });
+      setTimeout(() => renderFrameToCanvas(), 50);
+    }
+  }, [renderFrameToCanvas]);
+  const handleSeekStart = React23.useCallback(() => {
+    userSeekingRef.current = true;
+  }, []);
+  const handleSeekEnd = React23.useCallback(() => {
+    if (hiddenVideoRef.current) {
+      hiddenVideoRef.current.play()?.catch(() => {
+      });
+    }
+  }, []);
+  const handlePlaybackRateChange = React23.useCallback((rate) => {
+    if (hiddenVideoRef.current) {
+      hiddenVideoRef.current.playbackRate(rate);
+      setPlaybackRate(rate);
+    }
+  }, []);
+  const handleToggleFullscreen = React23.useCallback(() => {
+    if (videoContainerRef.current) {
+      if (!document.fullscreenElement) {
+        videoContainerRef.current.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    }
+  }, []);
   if (!crop) {
-    return /* @__PURE__ */ jsxRuntime.jsx(HlsVideoPlayer, { ref, ...videoProps, onClick });
-  }
-  const handleClickWithIndicator = () => {
-    if (!onClick || !hiddenVideoRef.current?.video) return;
-    const video = hiddenVideoRef.current.video;
-    const willBePlaying = video.paused;
-    setIndicatorIsPlaying(willBePlaying);
-    setShowIndicator(false);
-    setTimeout(() => {
-      indicatorKeyRef.current += 1;
-      setShowIndicator(true);
-    }, 0);
-    onClick();
+    return /* @__PURE__ */ jsxRuntime.jsx(HlsVideoPlayer, { ref, ...videoProps, onClick, controls });
+  }
+  const handleClick = () => {
+    if (!onClick && !controls) {
+      handleTogglePlay();
+    }
+    if (onClick) onClick();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: videoContainerRef,
-      className: `relative w-full h-full flex items-center justify-center bg-black ${onClick ? "cursor-pointer" : ""} ${inheritedClassName}`,
-      onClick: handleClickWithIndicator,
+      className: `relative w-full h-full flex items-center justify-center bg-black group ${inheritedClassName} ${onClick || controls ? "cursor-pointer" : ""}`,
+      onClick: handleClick,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: () => isPlaying && !controlsPinned && setShowControls(false),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
           HlsVideoPlayer,
           {
             ref: hiddenVideoRef,
             ...videoProps,
+            controls: false,
             onReady: handleVideoReady,
             onPlay: handleVideoPlay,
             onPause: handleVideoPause,
@@ -27043,7 +27405,9 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
             onLoadedMetadata: handleLoadedMetadata,
             onLoadedData: videoProps.onLoadedData,
             onPlaying: videoProps.onPlaying,
-            onLoadingChange: videoProps.onLoadingChange
+            onLoadingChange: videoProps.onLoadingChange,
+            onTimeUpdate: handleTimeUpdate,
+            onDurationChange: handleDurationChange
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -27060,8 +27424,8 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
             }
           }
         ),
-        !isVideoReady && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-        debug && isVideoReady && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 left-2 bg-black/80 text-white text-xs p-2 rounded font-mono", children: [
+        !isVideoReady && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+        debug && isVideoReady && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 left-2 bg-black/80 text-white text-xs p-2 rounded font-mono pointer-events-none z-20", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             "Crop: ",
             crop.x,
@@ -27085,13 +27449,32 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
             isProcessing ? "Yes" : "No"
           ] })
         ] }),
-        onClick && /* @__PURE__ */ jsxRuntime.jsx(
-          PlayPauseIndicator,
+        controls && isVideoReady && /* @__PURE__ */ jsxRuntime.jsx(
+          VideoControls,
           {
-            show: showIndicator,
-            isPlaying: indicatorIsPlaying
-          },
-          indicatorKeyRef.current
+            isPlaying,
+            currentTime,
+            duration,
+            buffered,
+            showControls: controlsPinned || showControls || !isPlaying,
+            controlsPinned,
+            playbackRate,
+            onPlayPause: handleTogglePlay,
+            onSeek: handleSeek,
+            onSeekStart: handleSeekStart,
+            onSeekEnd: handleSeekEnd,
+            onPlaybackRateChange: handlePlaybackRateChange,
+            onTogglePinControls: () => setControlsPinned((prev) => {
+              const next = !prev;
+              if (next) {
+                setShowControls(true);
+              } else {
+                resetControlsTimeout();
+              }
+              return next;
+            }),
+            onToggleFullscreen: handleToggleFullscreen
+          }
         )
       ]
     }
@@ -27630,6 +28013,67 @@ var SilentErrorBoundary = class extends React23__namespace.default.Component {
     ] }) });
   }
 };
+var PlayPauseIndicator = ({
+  show,
+  isPlaying,
+  duration = 600
+}) => {
+  const [isVisible, setIsVisible] = React23.useState(false);
+  const [isFading, setIsFading] = React23.useState(false);
+  React23.useEffect(() => {
+    if (show) {
+      setIsVisible(true);
+      setIsFading(false);
+      const fadeTimer = setTimeout(() => {
+        setIsFading(true);
+      }, 100);
+      const hideTimer = setTimeout(() => {
+        setIsVisible(false);
+        setIsFading(false);
+      }, duration);
+      return () => {
+        clearTimeout(fadeTimer);
+        clearTimeout(hideTimer);
+      };
+    }
+  }, [show, duration]);
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute inset-0 flex items-center justify-center pointer-events-none z-10",
+      style: {
+        opacity: isFading ? 0 : 1,
+        transition: `opacity ${duration - 100}ms ease-out`
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-black/70 rounded-full p-6", children: isPlaying ? (
+        // Play icon (triangle)
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "white",
+            className: "w-16 h-16",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" })
+          }
+        )
+      ) : (
+        // Pause icon (two bars)
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "white",
+            className: "w-16 h-16",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" })
+          }
+        )
+      ) })
+    }
+  );
+};
 var BackButton = ({
   onClick,
   text = "Back",
@@ -31049,7 +31493,7 @@ function DiagnosisVideoModal({
     }
     loadClip();
   }, [clipId, supabase, transformPlaylistUrls]);
-  const formatTime3 = (seconds) => {
+  const formatTime4 = (seconds) => {
     const mins = Math.floor(seconds / 60);
     const secs = Math.floor(seconds % 60);
     return `${mins}:${secs.toString().padStart(2, "0")}`;
@@ -31241,9 +31685,9 @@ function DiagnosisVideoModal({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium", children: [
-                formatTime3(currentTime),
+                formatTime4(currentTime),
                 " / ",
-                formatTime3(duration)
+                formatTime4(duration)
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
@@ -33214,7 +33658,7 @@ var LinePdfGenerator = ({
           }
           hourEndTime.setSeconds(0);
           hourEndTime.setMilliseconds(0);
-          const formatTime3 = (date2) => {
+          const formatTime4 = (date2) => {
             return date2.toLocaleTimeString("en-IN", {
               hour: "2-digit",
               minute: "2-digit",
@@ -33222,7 +33666,7 @@ var LinePdfGenerator = ({
               timeZone: "Asia/Kolkata"
             });
           };
-          return `${formatTime3(hourStartTime)} - ${formatTime3(hourEndTime)}`;
+          return `${formatTime4(hourStartTime)} - ${formatTime4(hourEndTime)}`;
         });
       };
       const hourlyTimeRanges = lineInfo.metrics.shift_start ? getHourlyTimeRanges(lineInfo.metrics.shift_start, lineInfo.metrics.shift_end) : [];
@@ -39808,7 +40252,7 @@ var AIAgentView = () => {
     }
     return formattedLines.join("");
   };
-  const formatTime3 = (timestamp) => {
+  const formatTime4 = (timestamp) => {
     const date = new Date(timestamp);
     return date.toLocaleTimeString([], {
       hour: "2-digit",
@@ -41072,7 +41516,7 @@ var AIAgentView = () => {
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mt-1.5 sm:mt-2 flex items-center gap-2 text-xs text-gray-400 ${message.role === "user" ? "justify-end" : "justify-start"}`, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime3(message.created_at) }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime4(message.created_at) }),
                         message.role === "assistant" && message.id !== -1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
                           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1 h-1 bg-gray-300 rounded-full" }),
                           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Axel" })