@optifye/dashboard-core 6.9.9 → 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",
@@ -23099,7 +23099,7 @@ var OutputProgressChartComponent = ({
   ];
   const COLORS = ["#00AB45", "#f3f4f6"];
   const percentage = (currentOutput / targetOutput * 100).toFixed(1);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full aspect-square max-h-full", style: { maxWidth: "min(100%, 280px)" }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full aspect-square max-h-full", style: { maxWidth: "min(100%, 280px)", containerType: "inline-size" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.PieChart, { children: /* @__PURE__ */ jsxRuntime.jsx(
       recharts.Pie,
       {
@@ -23123,16 +23123,33 @@ var OutputProgressChartComponent = ({
         ))
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-800", children: [
-        percentage,
-        "%"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs sm:text-sm lg:text-base text-gray-500 mt-1 sm:mt-2", children: [
-        currentOutput,
-        " / ",
-        Math.round(targetOutput)
-      ] })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", style: { width: "100%", padding: "0 10%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "font-bold text-gray-800",
+          style: { fontSize: "clamp(1.25rem, 8cqw, 2.5rem)" },
+          children: [
+            percentage,
+            "%"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "text-gray-500",
+          style: {
+            fontSize: "clamp(0.7rem, 3.5cqw, 1rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.5rem)"
+          },
+          children: [
+            currentOutput,
+            " / ",
+            Math.round(targetOutput)
+          ]
+        }
+      )
     ] }) })
   ] }) });
 };
@@ -23150,7 +23167,7 @@ var LargeOutputProgressChart = ({
   ];
   const COLORS = ["#00AB45", "#f3f4f6"];
   const percentage = (currentOutput / targetOutput * 100).toFixed(1);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full", style: { minHeight: "100px", minWidth: "100px" }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full", style: { minHeight: "100px", minWidth: "100px", containerType: "inline-size" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.PieChart, { children: /* @__PURE__ */ jsxRuntime.jsx(
       recharts.Pie,
       {
@@ -23174,16 +23191,40 @@ var LargeOutputProgressChart = ({
         ))
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl sm:text-5xl font-bold text-gray-900", children: currentOutput }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-500", children: [
-        "of ",
-        targetOutput
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-base font-medium text-gray-600 mt-1", children: [
-        percentage,
-        "%"
-      ] })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", style: { width: "100%", padding: "0 10%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "font-bold text-gray-900",
+          style: { fontSize: "clamp(1.5rem, 10cqw, 3rem)" },
+          children: currentOutput
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "text-gray-500",
+          style: { fontSize: "clamp(0.75rem, 3.5cqw, 1rem)" },
+          children: [
+            "of ",
+            targetOutput
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "font-medium text-gray-600",
+          style: {
+            fontSize: "clamp(0.875rem, 4.5cqw, 1.25rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.5rem)"
+          },
+          children: [
+            percentage,
+            "%"
+          ]
+        }
+      )
     ] }) })
   ] }) });
 };
@@ -23888,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) {
@@ -23896,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;
@@ -23912,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) => {
@@ -25088,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;
@@ -25100,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
     };
   });
@@ -25277,7 +25318,7 @@ var GaugeChart = ({
   };
   const gaugeColor = getColor();
   const targetAngle = target !== void 0 ? 180 - (target - min) / (max - min) * 180 : null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative w-full h-full flex flex-col items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full max-w-[280px] aspect-square", style: { minHeight: "100px", minWidth: "100px" }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative w-full h-full flex flex-col items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full max-w-[280px] aspect-square", style: { minHeight: "100px", minWidth: "100px", containerType: "inline-size" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.PieChart, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       recharts.Pie,
       {
@@ -25310,17 +25351,44 @@ var GaugeChart = ({
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-1 -left-1.5 w-3 h-3 bg-gray-800 rounded-full" })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-3xl font-bold text-gray-800", children: [
-        value.toFixed(unit === "%" ? 1 : 0),
-        unit
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-600 mt-1 font-medium", children: label }),
-      target !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 mt-1", children: [
-        "Target: ",
-        target,
-        unit
-      ] })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", style: { width: "100%", padding: "0 10%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "font-bold text-gray-800",
+          style: { fontSize: "clamp(1.25rem, 8cqw, 2rem)" },
+          children: [
+            value.toFixed(unit === "%" ? 1 : 0),
+            unit
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "text-gray-600 font-medium",
+          style: {
+            fontSize: "clamp(0.75rem, 3.5cqw, 1rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.25rem)"
+          },
+          children: label
+        }
+      ),
+      target !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "text-gray-500",
+          style: {
+            fontSize: "clamp(0.7rem, 3cqw, 0.875rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.25rem)"
+          },
+          children: [
+            "Target: ",
+            target,
+            unit
+          ]
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-[15%] left-[15%] text-xs text-gray-500", children: [
       min,
@@ -25507,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(() => {
@@ -25519,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: "|" }),
@@ -25683,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) {
@@ -25757,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(
@@ -26063,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" }) })
+              }
+            )
+          ] })
+        ] })
+      ]
     }
   );
 };
@@ -26248,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,
@@ -26429,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);
@@ -26484,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);
@@ -26518,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) {
@@ -26532,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);
@@ -26546,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);
@@ -26561,6 +26820,7 @@ var HlsVideoPlayer = React23.forwardRef(({
       video.removeEventListener("seeking", handleSeeking);
       video.removeEventListener("seeked", handleSeeked);
       video.removeEventListener("error", handleError);
+      video.removeEventListener("ratechange", handlePlaybackRateChange2);
     };
   }, [
     src,
@@ -26589,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(() => {
@@ -26615,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;
@@ -26711,6 +27046,7 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
   crop,
   debug = false,
   onClick,
+  controls = true,
   ...videoProps
 }, ref) => {
   const {
@@ -26732,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);
@@ -26819,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;
@@ -26846,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");
@@ -26854,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();
@@ -26866,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);
@@ -26910,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 = () => {
@@ -26939,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,
@@ -26975,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(
@@ -26992,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,
@@ -27017,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
+          }
         )
       ]
     }
@@ -27562,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",
@@ -29214,6 +29726,31 @@ var BottlenecksContent = ({
   const [categoryMetadata, setCategoryMetadata] = React23.useState([]);
   const [currentMetadataIndex, setCurrentMetadataIndex] = React23.useState(0);
   const [metadataCache, setMetadataCache] = React23.useState({});
+  const invalidateMetadataCache = React23.useCallback((categories) => {
+    setMetadataCache((prevCache) => {
+      if (!prevCache || Object.keys(prevCache).length === 0) {
+        return prevCache;
+      }
+      const targetCategories = categories ? (Array.isArray(categories) ? categories : [categories]).filter(Boolean) : null;
+      let updatedCache = null;
+      const shouldInvalidate = (key) => {
+        if (!targetCategories || targetCategories.length === 0) {
+          return true;
+        }
+        const [categoryId] = key.split("-");
+        return targetCategories.includes(categoryId);
+      };
+      Object.keys(prevCache).forEach((cacheKey) => {
+        if (shouldInvalidate(cacheKey)) {
+          if (!updatedCache) {
+            updatedCache = { ...prevCache };
+          }
+          delete updatedCache[cacheKey];
+        }
+      });
+      return updatedCache || prevCache;
+    });
+  }, []);
   const [triageClips, setTriageClips] = React23.useState([]);
   const [isLoadingTriageClips, setIsLoadingTriageClips] = React23.useState(false);
   const [isFullscreen, setIsFullscreen] = React23.useState(false);
@@ -29233,6 +29770,12 @@ var BottlenecksContent = ({
     onNewClips: (notification) => {
       console.log(`[BottlenecksContent] New clips detected:`, notification);
       if (notification.clips.length > 0) {
+        const categoryIds = notification.clips.map((clip) => clip.clip_type).filter(Boolean).map((value) => String(value));
+        if (categoryIds.length > 0) {
+          invalidateMetadataCache(categoryIds);
+        } else {
+          invalidateMetadataCache();
+        }
         fetchClipCounts();
       }
     }
@@ -29279,24 +29822,37 @@ var BottlenecksContent = ({
     shift: shift || "0"
   });
   React23.useEffect(() => {
-    if (clipTypes.length > 0 && !initialFilter) {
-      const priorityOrder = ["cycle_completion", "fast-cycles", "slow-cycles", "idle_time"];
-      let selectedType = null;
-      for (const priorityType of priorityOrder) {
-        const type = clipTypes.find((t) => t.type === priorityType && (dynamicCounts[t.type] || 0) > 0);
-        if (type) {
-          selectedType = type;
-          break;
+    if (clipTypes.length > 0) {
+      const currentFilterCount = initialFilter ? dynamicCounts[initialFilter] || 0 : 0;
+      const hasAnyCounts = Object.values(dynamicCounts).some((c) => c > 0);
+      const userHasNotNavigated = !initialFilter || activeFilterRef.current === initialFilter;
+      const shouldRunSelection = !initialFilter || userHasNotNavigated && currentFilterCount === 0 && hasAnyCounts;
+      if (shouldRunSelection) {
+        let selectedType = null;
+        if (clipTypes.length === 1) {
+          selectedType = clipTypes[0];
+        } else {
+          const priorityOrder = ["cycle_completion", "fast-cycles", "slow-cycles", "idle_time"];
+          for (const priorityType of priorityOrder) {
+            const type = clipTypes.find((t) => t.type === priorityType && (dynamicCounts[t.type] || 0) > 0);
+            if (type) {
+              selectedType = type;
+              break;
+            }
+          }
+          if (!selectedType) {
+            selectedType = clipTypes.find((type) => (dynamicCounts[type.type] || 0) > 0);
+          }
+          if (!selectedType) {
+            selectedType = clipTypes[0];
+          }
+        }
+        if (selectedType && selectedType.type !== initialFilter) {
+          console.log(`[BottlenecksContent] Auto-selecting filter: ${selectedType.type} (count: ${dynamicCounts[selectedType.type] || 0})`);
+          setInitialFilter(selectedType.type);
+          setActiveFilter(selectedType.type);
+          activeFilterRef.current = selectedType.type;
         }
-      }
-      if (!selectedType) {
-        selectedType = clipTypes.find((type) => (dynamicCounts[type.type] || 0) > 0);
-      }
-      const firstType = selectedType || clipTypes[0];
-      if (firstType) {
-        setInitialFilter(firstType.type);
-        setActiveFilter(firstType.type);
-        activeFilterRef.current = firstType.type;
       }
     }
   }, [clipTypes, dynamicCounts, initialFilter]);
@@ -29348,7 +29904,7 @@ var BottlenecksContent = ({
     } finally {
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, effectiveShift, dashboardConfig, updateClipCounts]);
+  }, [workspaceId, date, s3ClipsService, effectiveShift, dashboardConfig, updateClipCounts, timezone, totalOutput]);
   const loadingCategoryRef = React23.useRef(null);
   const loadFirstVideoForCategory = React23.useCallback(async (category) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
@@ -29438,15 +29994,16 @@ var BottlenecksContent = ({
       loadingCategoryRef.current = null;
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, mergedCounts, effectiveShift]);
+  }, [workspaceId, date, s3ClipsService, mergedCounts, effectiveShift, timezone]);
   const handleRefreshClips = React23.useCallback(async () => {
     console.log("[BottlenecksContent] Refreshing clips after new additions");
     acknowledgeNewClips();
+    invalidateMetadataCache();
     await fetchClipCounts();
     if (activeFilter && mergedCounts[activeFilter] > 0) {
       await loadFirstVideoForCategory(activeFilter);
     }
-  }, [acknowledgeNewClips, fetchClipCounts, activeFilter, mergedCounts, loadFirstVideoForCategory]);
+  }, [acknowledgeNewClips, fetchClipCounts, activeFilter, mergedCounts, loadFirstVideoForCategory, invalidateMetadataCache]);
   React23.useEffect(() => {
     if (s3ClipsService) {
       fetchClipCounts();
@@ -29616,38 +30173,38 @@ var BottlenecksContent = ({
       loadingTimeoutRef.current = null;
     }
   }, []);
-  const loadCategoryMetadata = React23.useCallback(async (categoryId, autoLoadFirstVideo = false) => {
+  const loadCategoryMetadata = React23.useCallback(async (categoryId, autoLoadFirstVideo = false, forceRefresh = false) => {
     if (!workspaceId) {
       return;
     }
-    const cacheKey = `${categoryId}-${date || getOperationalDate(timezone)}-${effectiveShift}`;
-    if (metadataCache[cacheKey]) {
-      console.log(`[BottlenecksContent] Using cached metadata for ${categoryId}`);
-      setCategoryMetadata(metadataCache[cacheKey]);
-      categoryMetadataRef.current = metadataCache[cacheKey];
-      if (autoLoadFirstVideo && metadataCache[cacheKey].length > 0 && s3ClipsService) {
-        const firstClipMeta = metadataCache[cacheKey][0];
-        try {
-          const video = await s3ClipsService.getClipById(firstClipMeta.clipId);
-          if (video && isMountedRef.current) {
-            setCurrentClipId(firstClipMeta.clipId);
-            setAllVideos([video]);
-            setCurrentIndex(0);
-            setCurrentMetadataIndex(0);
-            currentMetadataIndexRef.current = 0;
-            setIsCategoryLoading(false);
-            console.log(`[BottlenecksContent] Auto-loaded first video from cache: ${video.id} (1/${metadataCache[cacheKey].length})`);
+    const resolvedDate = date || getOperationalDate(timezone);
+    const cacheKey = `${categoryId}-${resolvedDate}-${effectiveShift}`;
+    const cachedMetadata = !forceRefresh ? metadataCache[cacheKey] : void 0;
+    try {
+      if (cachedMetadata) {
+        console.log(`[BottlenecksContent] Using cached metadata for ${categoryId}`);
+        setCategoryMetadata(cachedMetadata);
+        categoryMetadataRef.current = cachedMetadata;
+        if (autoLoadFirstVideo && cachedMetadata.length > 0 && s3ClipsService) {
+          const firstClipMeta = cachedMetadata[0];
+          try {
+            const video = await s3ClipsService.getClipById(firstClipMeta.clipId);
+            if (video && isMountedRef.current) {
+              setCurrentClipId(firstClipMeta.clipId);
+              setAllVideos([video]);
+              setCurrentIndex(0);
+              setCurrentMetadataIndex(0);
+              currentMetadataIndexRef.current = 0;
+              console.log(`[BottlenecksContent] Auto-loaded first video from cache: ${video.id} (1/${cachedMetadata.length})`);
+            }
+          } catch (error2) {
+            console.error(`[BottlenecksContent] Error loading first video from cache:`, error2);
+            clearLoadingState();
           }
-        } catch (error2) {
-          console.error(`[BottlenecksContent] Error loading first video from cache:`, error2);
-          setIsCategoryLoading(false);
-          clearLoadingState();
         }
+        return;
       }
-      return;
-    }
-    try {
-      console.log(`[BottlenecksContent] Loading metadata for category: ${categoryId}`);
+      console.log(`[BottlenecksContent] Loading metadata for category: ${categoryId}${forceRefresh ? " (force refresh)" : ""}`);
       const { createClient: createClient5 } = await import('@supabase/supabase-js');
       const supabase = createClient5(
         process.env.NEXT_PUBLIC_SUPABASE_URL || "",
@@ -29672,8 +30229,8 @@ var BottlenecksContent = ({
             action: "percentile-clips",
             percentileAction: percentileType,
             workspaceId,
-            startDate: `${date || getOperationalDate(timezone)}T00:00:00Z`,
-            endDate: `${date || getOperationalDate(timezone)}T23:59:59Z`,
+            startDate: `${resolvedDate}T00:00:00Z`,
+            endDate: `${resolvedDate}T23:59:59Z`,
             percentile: 10,
             shiftId: effectiveShift,
             limit: 100
@@ -29689,7 +30246,7 @@ var BottlenecksContent = ({
           body: JSON.stringify({
             action: "clip-metadata",
             workspaceId,
-            date: date || getOperationalDate(timezone),
+            date: resolvedDate,
             shift: effectiveShift,
             category: categoryId,
             page: 1,
@@ -29734,19 +30291,22 @@ var BottlenecksContent = ({
               setCurrentIndex(0);
               setCurrentMetadataIndex(0);
               currentMetadataIndexRef.current = 0;
-              setIsCategoryLoading(false);
               console.log(`[BottlenecksContent] Auto-loaded first video: ${video.id} (1/${metadataClips.length})`);
             }
           } catch (error2) {
             console.error(`[BottlenecksContent] Error loading first video:`, error2);
-            setIsCategoryLoading(false);
           }
         }
+      } else {
+        setCategoryMetadata([]);
+        categoryMetadataRef.current = [];
       }
     } catch (error2) {
       console.error(`[BottlenecksContent] Error loading category metadata:`, error2);
+    } finally {
+      setIsCategoryLoading(false);
     }
-  }, [workspaceId, date, effectiveShift, isPercentileCategory, metadataCache, s3ClipsService]);
+  }, [workspaceId, date, effectiveShift, isPercentileCategory, metadataCache, s3ClipsService, timezone, clearLoadingState]);
   const loadAndPlayClipById = React23.useCallback(async (clipId, categoryId, position) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
     console.log(`[BottlenecksContent] Loading clip by ID: ${clipId}, category=${categoryId}, position=${position}`);
@@ -29770,21 +30330,31 @@ var BottlenecksContent = ({
     }
     try {
       await loadCategoryMetadata(categoryId, false);
-      const metadataArray = categoryMetadataRef.current;
-      if (metadataArray.length > 0) {
-        const clickedClipIndex = metadataArray.findIndex((clip) => clip.clipId === clipId);
-        if (clickedClipIndex !== -1) {
-          setCurrentMetadataIndex(clickedClipIndex);
-          currentMetadataIndexRef.current = clickedClipIndex;
-          const video = await s3ClipsService.getClipById(clipId);
-          if (video) {
-            setPendingVideo(video);
-            setCurrentClipId(clipId);
-            setAllVideos([video]);
-            setCurrentIndex(0);
-            console.log(`[BottlenecksContent] Loaded clip ${clipId} (${clickedClipIndex + 1}/${metadataArray.length})`);
-          }
-        }
+      let metadataArray = categoryMetadataRef.current;
+      const clipExistsInMetadata = metadataArray.some((clip) => clip.clipId === clipId);
+      if (metadataArray.length === 0 || !clipExistsInMetadata) {
+        console.warn(`[BottlenecksContent] Clip ${clipId} not found in metadata for ${categoryId} (cache hit: ${metadataArray.length > 0}) - forcing refresh`);
+        await loadCategoryMetadata(categoryId, false, true);
+        metadataArray = categoryMetadataRef.current;
+      }
+      if (metadataArray.length === 0) {
+        throw new Error(`No metadata available for category ${categoryId}`);
+      }
+      const clickedClipIndex = metadataArray.findIndex((clip) => clip.clipId === clipId);
+      if (clickedClipIndex === -1) {
+        throw new Error(`Clip ${clipId} not found after metadata refresh`);
+      }
+      setCurrentMetadataIndex(clickedClipIndex);
+      currentMetadataIndexRef.current = clickedClipIndex;
+      const video = await s3ClipsService.getClipById(clipId);
+      if (video) {
+        setPendingVideo(video);
+        setCurrentClipId(clipId);
+        setAllVideos([video]);
+        setCurrentIndex(0);
+        console.log(`[BottlenecksContent] Loaded clip ${clipId} (${clickedClipIndex + 1}/${metadataArray.length})`);
+      } else {
+        throw new Error(`Failed to load video data for clip ${clipId}`);
       }
     } catch (error2) {
       console.error(`[BottlenecksContent] Error loading clip by ID (${clipId}):`, error2);
@@ -29798,7 +30368,7 @@ var BottlenecksContent = ({
         clearLoadingState();
       }
     }
-  }, [workspaceId, s3ClipsService, date, effectiveShift, updateActiveFilter, clearLoadingState]);
+  }, [workspaceId, s3ClipsService, updateActiveFilter, clearLoadingState, loadCategoryMetadata]);
   React23.useCallback(async (categoryId, clipIndex) => {
     console.warn("[BottlenecksContent] loadAndPlayClip is deprecated, use loadAndPlayClipById instead");
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
@@ -29825,7 +30395,7 @@ var BottlenecksContent = ({
       });
       setIsNavigating(false);
     }
-  }, [workspaceId, s3ClipsService, date, effectiveShift, loadAndPlayClipById]);
+  }, [workspaceId, s3ClipsService, date, effectiveShift, loadAndPlayClipById, timezone]);
   const handleNext = React23.useCallback(async () => {
     if (!isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
@@ -29842,8 +30412,18 @@ var BottlenecksContent = ({
     }
     try {
       const currentMetaIndex = currentMetadataIndexRef.current;
-      const metadataArray = categoryMetadataRef.current;
+      let metadataArray = categoryMetadataRef.current;
+      if (metadataArray.length === 0) {
+        console.log(`[handleNext] Metadata empty for ${currentFilter}, loading before navigation`);
+        await loadCategoryMetadata(currentFilter, false);
+        metadataArray = categoryMetadataRef.current;
+      }
       console.log(`[handleNext] Unified navigation: ${currentFilter}, metadata index: ${currentMetaIndex}/${metadataArray.length}`);
+      if (metadataArray.length === 0) {
+        console.warn("[handleNext] No metadata available after refresh - stopping navigation");
+        clearLoadingState();
+        return;
+      }
       if (currentMetaIndex < metadataArray.length - 1) {
         const nextMetadataIndex = currentMetaIndex + 1;
         const nextClipMeta = metadataArray[nextMetadataIndex];
@@ -29878,7 +30458,7 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, s3ClipsService]);
+  }, [clearLoadingState, s3ClipsService, loadCategoryMetadata]);
   const handlePrevious = React23.useCallback(async () => {
     if (!isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
@@ -29895,8 +30475,18 @@ var BottlenecksContent = ({
     }
     try {
       const currentMetaIndex = currentMetadataIndexRef.current;
-      const metadataArray = categoryMetadataRef.current;
+      let metadataArray = categoryMetadataRef.current;
+      if (metadataArray.length === 0) {
+        console.log(`[handlePrevious] Metadata empty for ${currentFilter}, loading before navigation`);
+        await loadCategoryMetadata(currentFilter, false);
+        metadataArray = categoryMetadataRef.current;
+      }
       console.log(`[handlePrevious] Unified navigation: ${currentFilter}, metadata index: ${currentMetaIndex}/${metadataArray.length}`);
+      if (metadataArray.length === 0) {
+        console.warn("[handlePrevious] No metadata available after refresh - stopping navigation");
+        clearLoadingState();
+        return;
+      }
       if (currentMetaIndex > 0) {
         const prevMetadataIndex = currentMetaIndex - 1;
         const prevClipMeta = metadataArray[prevMetadataIndex];
@@ -29927,7 +30517,7 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, s3ClipsService]);
+  }, [clearLoadingState, s3ClipsService, loadCategoryMetadata]);
   const currentVideo = React23.useMemo(() => {
     if (!filteredVideos || filteredVideos.length === 0 || currentIndex >= filteredVideos.length) {
       return null;
@@ -30903,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")}`;
@@ -31095,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",
@@ -33068,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",
@@ -33076,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) : [];
@@ -39662,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",
@@ -40926,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" })