@optifye/dashboard-core 6.9.8 → 6.9.11

package/dist/index.js

@@ -8,7 +8,7 @@ var dateFns = require('date-fns');
 var mixpanel = require('mixpanel-browser');
 var events = require('events');
 var supabaseJs = require('@supabase/supabase-js');
-var Hls2 = require('hls.js');
+var Hls3 = require('hls.js');
 var useSWR = require('swr');
 var motionUtils = require('motion-utils');
 var motionDom = require('motion-dom');
@@ -17,8 +17,6 @@ var sonner = require('sonner');
 var recharts = require('recharts');
 var reactSlot = require('@radix-ui/react-slot');
 var SelectPrimitive = require('@radix-ui/react-select');
-var videojs = require('video.js');
-require('video.js/dist/video-js.css');
 var reactDayPicker = require('react-day-picker');
 var outline = require('@heroicons/react/24/outline');
 var solid = require('@heroicons/react/24/solid');
@@ -51,10 +49,9 @@ function _interopNamespace(e) {
 
 var React23__namespace = /*#__PURE__*/_interopNamespace(React23);
 var mixpanel__default = /*#__PURE__*/_interopDefault(mixpanel);
-var Hls2__default = /*#__PURE__*/_interopDefault(Hls2);
+var Hls3__default = /*#__PURE__*/_interopDefault(Hls3);
 var useSWR__default = /*#__PURE__*/_interopDefault(useSWR);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
-var videojs__default = /*#__PURE__*/_interopDefault(videojs);
 var html2canvas__default = /*#__PURE__*/_interopDefault(html2canvas);
 var jsPDF__default = /*#__PURE__*/_interopDefault(jsPDF);
 
@@ -9019,12 +9016,12 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
     const video = videoRef.current;
     if (!video) return;
     isNativeHlsRef.current = video.canPlayType("application/vnd.apple.mpegurl") === "probably";
-    if (Hls2__default.default.isSupported() && !isNativeHlsRef.current) {
-      const hls = new Hls2__default.default(HLS_CONFIG);
+    if (Hls3__default.default.isSupported() && !isNativeHlsRef.current) {
+      const hls = new Hls3__default.default(HLS_CONFIG);
       hlsRef.current = hls;
       hls.attachMedia(video);
       hls.loadSource(src);
-      hls.on(Hls2__default.default.Events.ERROR, (_, data) => {
+      hls.on(Hls3__default.default.Events.ERROR, (_, data) => {
         if (!data.fatal) return;
         console.error("[HLS] Fatal error:", data.type, data.details);
         if (data.response?.code === 404) {
@@ -9032,8 +9029,8 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
           return;
         }
         switch (data.type) {
-          case Hls2__default.default.ErrorTypes.NETWORK_ERROR:
-          case Hls2__default.default.ErrorTypes.MEDIA_ERROR:
+          case Hls3__default.default.ErrorTypes.NETWORK_ERROR:
+          case Hls3__default.default.ErrorTypes.MEDIA_ERROR:
             softRestart(`${data.type}: ${data.details}`);
             break;
           default:
@@ -9041,7 +9038,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
             break;
         }
       });
-      hls.on(Hls2__default.default.Events.MANIFEST_PARSED, () => {
+      hls.on(Hls3__default.default.Events.MANIFEST_PARSED, () => {
         if (failedUrls.has(src)) {
           console.log(`[HLS] Stream loaded successfully, resetting failure count for: ${src}`);
           failedUrls.delete(src);
@@ -14084,9 +14081,9 @@ var S3VideoPreloader = class {
         this.processQueue();
       };
       if (url.endsWith(".m3u8")) {
-        import('hls.js').then(({ default: Hls3 }) => {
-          if (Hls3.isSupported()) {
-            const hls = new Hls3({
+        import('hls.js').then(({ default: Hls4 }) => {
+          if (Hls4.isSupported()) {
+            const hls = new Hls4({
               maxBufferLength: 10,
               startFragPrefetch: true,
               lowLatencyMode: false,
@@ -14098,7 +14095,7 @@ var S3VideoPreloader = class {
               hls.destroy();
               cleanup();
             }, 4e3);
-            hls.on(Hls3.Events.BUFFER_APPENDED, () => {
+            hls.on(Hls4.Events.BUFFER_APPENDED, () => {
               window.clearTimeout(timeout);
               hls.destroy();
               cleanup();
@@ -23102,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 max-w-[200px] sm:max-w-[240px] lg:max-w-[280px] aspect-square", style: { minHeight: "120px", minWidth: "120px" }, 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,
       {
@@ -23126,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)
+          ]
+        }
+      )
     ] }) })
   ] }) });
 };
@@ -23153,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,
       {
@@ -23177,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,
+            "%"
+          ]
+        }
+      )
     ] }) })
   ] }) });
 };
@@ -25280,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,
       {
@@ -25313,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,
@@ -26054,12 +26119,6 @@ var AxelNotificationPopup = ({
 };
 
 // src/views/components/workspace/BottlenecksContent.utils.ts
-var formatTime2 = (seconds) => {
-  if (isNaN(seconds)) return "0:00";
-  const minutes = Math.floor(seconds / 60);
-  const remainingSeconds = Math.floor(seconds % 60);
-  return `${minutes}:${remainingSeconds < 10 ? "0" : ""}${remainingSeconds}`;
-};
 var getSeverityColor = (severity) => {
   switch (severity) {
     case "low":
@@ -26072,957 +26131,575 @@ var getSeverityColor = (severity) => {
       return "bg-gray-500";
   }
 };
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-pulse rounded-md bg-muted", className), ...props });
-}
-var Select = SelectPrimitive__namespace.Root;
-var SelectGroup = SelectPrimitive__namespace.Group;
-var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = React23__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Trigger,
-  {
-    ref,
-    className: cn(
-      "flex h-11 sm:h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 touch-manipulation",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-var SelectScrollUpButton = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  SelectPrimitive__namespace.ScrollUpButton,
-  {
-    ref,
-    className: cn("flex cursor-default items-center justify-center py-1", className),
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4" })
-  }
-));
-SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
-var SelectScrollDownButton = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  SelectPrimitive__namespace.ScrollDownButton,
-  {
-    ref,
-    className: cn("flex cursor-default items-center justify-center py-1", className),
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })
-  }
-));
-SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
-var SelectContent = React23__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Content,
-  {
-    ref,
-    className: cn(
-      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-      className
-    ),
-    position,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SelectPrimitive__namespace.Viewport,
-        {
-          className: cn(
-            "p-1",
-            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          ),
-          children
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
-    ]
-  }
-) }));
-SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-var SelectLabel = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  SelectPrimitive__namespace.Label,
-  {
-    ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold", className),
-    ...props
-  }
-));
-SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
-var SelectItem = React23__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
-    ]
-  }
-));
-SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
-var SelectSeparator = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  SelectPrimitive__namespace.Separator,
-  {
-    ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
-SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
-var LoadingOverlay = ({
-  isVisible,
-  message = "Loading...",
-  className
+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(
-    motion.div,
+    "div",
     {
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      transition: { duration: 0.2 },
-      className: `fixed inset-0 z-[100] flex items-center justify-center bg-black/30 backdrop-blur-sm ${className || ""}`,
-      "aria-modal": "true",
-      role: "dialog",
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center space-y-3 rounded-lg bg-white p-8 shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message }) })
+      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 LoadingOverlay_default = LoadingOverlay;
-var TimeDisplay = ({ className, variant = "default" }) => {
-  const { dateTimeConfig } = useDashboardConfig();
-  const [time2, setTime] = React23.useState("");
-  const dbTimezone = useAppTimezone();
-  const timezoneToDisplay = dbTimezone || dateTimeConfig?.defaultTimezone || "UTC";
-  const localeToUse = dateTimeConfig?.defaultLocale || "en-US";
-  const timeSuffix = "";
-  React23.useEffect(() => {
-    const updateTime = () => {
-      const now2 = /* @__PURE__ */ new Date();
-      const effectiveFormatOptions = {
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        hour12: true,
-        timeZone: timezoneToDisplay,
-        ...dateTimeConfig?.timeFormatOptions || {}
-        // Allow override from config
-      };
-      try {
-        setTime(new Intl.DateTimeFormat(localeToUse, effectiveFormatOptions).format(now2));
-      } catch (e) {
-        console.error("Error formatting time:", e);
-        setTime("Error");
-      }
-    };
-    updateTime();
-    const interval = setInterval(updateTime, 1e3);
-    return () => clearInterval(interval);
-  }, [timezoneToDisplay, dateTimeConfig?.timeFormatOptions, localeToUse]);
-  if (!time2) return null;
-  if (variant === "minimal") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: className || "", children: [
-      time2,
-      " ",
-      timeSuffix
-    ] });
+var ERROR_MAPPING = {
+  "networkError": {
+    code: 2,
+    type: "recoverable",
+    message: "Network error - please check your internet connection",
+    canRetry: true
+  },
+  "mediaError": {
+    code: 3,
+    type: "non_recoverable",
+    message: "Stream corrupted due to internet connection",
+    canRetry: false
+  },
+  "muxError": {
+    code: 3,
+    type: "non_recoverable",
+    message: "Error processing media stream",
+    canRetry: false
+  },
+  "otherError": {
+    code: 4,
+    type: "non_recoverable",
+    message: "Video format not supported by your browser. Please use Google Chrome.",
+    canRetry: false
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    motion.div,
-    {
-      initial: { opacity: 0, y: -5 },
-      animate: { opacity: 1, y: 0 },
-      transition: { duration: 0.3 },
-      className: `flex items-center space-x-1.5 bg-white/60 backdrop-blur-sm px-2 py-0.5 rounded-md shadow-xs ${className || ""}`,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 text-[var(--primary-DEFAULT)]", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-[11px] font-medium text-gray-800 tabular-nums tracking-tight", children: [
-          time2,
-          " ",
-          timeSuffix
-        ] })
-      ]
-    }
-  );
 };
-var TimeDisplay_default = TimeDisplay;
-var DateDisplay = ({ className, variant = "default" }) => {
-  const { dateTimeConfig } = useDashboardConfig();
-  const [date, setDate] = React23.useState("");
-  const timezoneToDisplay = dateTimeConfig?.defaultTimezone || "UTC";
-  const localeToUse = dateTimeConfig?.defaultLocale || "en-US";
+var hlsVideoPlayerStyles = `
+  .hls-video-player-container {
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Center the video and maintain aspect ratio */
+  .hls-video-element {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
+  /* Custom loading indicator styles */
+  .hls-video-player-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+  }
+`;
+if (typeof document !== "undefined") {
+  const styleId = "hls-video-player-custom-styles";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = hlsVideoPlayerStyles;
+    document.head.appendChild(style);
+  }
+}
+var BASE_HLS_CONFIG = {
+  maxBufferLength: 3,
+  maxMaxBufferLength: 8,
+  maxBufferSize: 50 * 1e3 * 1e3,
+  maxBufferHole: 0.25,
+  manifestLoadingTimeOut: 15e3,
+  manifestLoadingMaxRetry: 3,
+  manifestLoadingRetryDelay: 500,
+  levelLoadingTimeOut: 6e4,
+  levelLoadingMaxRetry: 5,
+  levelLoadingRetryDelay: 500,
+  fragLoadingTimeOut: 6e4,
+  fragLoadingMaxRetry: 5,
+  fragLoadingRetryDelay: 500,
+  startPosition: -1,
+  debug: false,
+  enableWorker: true,
+  lowLatencyMode: false,
+  progressive: true,
+  abrEwmaSlowLive: 9,
+  abrEwmaFastLive: 3,
+  abrBandWidthFactor: 0.95,
+  abrBandWidthUpFactor: 0.7,
+  abrMaxWithRealBitrate: false,
+  abrEwmaDefaultEstimate: 5e7
+};
+var HlsVideoPlayer = React23.forwardRef(({
+  src,
+  poster,
+  autoplay = false,
+  controls = true,
+  loop = false,
+  muted = false,
+  playsInline = true,
+  className = "",
+  hlsConfig = {},
+  options = {},
+  // Backward compatibility with Video.js
+  externalLoadingControl = false,
+  onLoadingChange,
+  onReady,
+  onPlay,
+  onPause,
+  onPlaying,
+  onTimeUpdate,
+  onDurationChange,
+  onEnded,
+  onError,
+  onLoadStart,
+  onLoadedMetadata,
+  onLoadedData,
+  onSeeking,
+  onSeeked,
+  onClick
+}, ref) => {
+  const videoContainerRef = React23.useRef(null);
+  const videoRef = React23.useRef(null);
+  const hlsRef = React23.useRef(null);
+  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 eventCallbacksRef = React23.useRef({
+    onReady,
+    onPlay,
+    onPause,
+    onPlaying,
+    onTimeUpdate,
+    onDurationChange,
+    onEnded,
+    onError,
+    onLoadStart,
+    onLoadedMetadata,
+    onLoadedData,
+    onSeeking,
+    onSeeked,
+    onLoadingChange
+  });
   React23.useEffect(() => {
-    const getCurrentFormattedDate = () => {
-      const now2 = /* @__PURE__ */ new Date();
-      const effectiveFormatOptions = {
-        weekday: "short",
-        day: "numeric",
-        month: "short",
-        timeZone: timezoneToDisplay,
-        ...dateTimeConfig?.dateFormatOptions || {}
-        // Allow override from config
-      };
-      try {
-        return new Intl.DateTimeFormat(localeToUse, effectiveFormatOptions).format(now2);
-      } catch (e) {
-        console.error("Error formatting date:", e);
-        return "Error";
-      }
+    eventCallbacksRef.current = {
+      onReady,
+      onPlay,
+      onPause,
+      onPlaying,
+      onTimeUpdate,
+      onDurationChange,
+      onEnded,
+      onError,
+      onLoadStart,
+      onLoadedMetadata,
+      onLoadedData,
+      onSeeking,
+      onSeeked,
+      onLoadingChange
     };
-    const updateDate = () => {
-      setDate(getCurrentFormattedDate());
+  }, [
+    onReady,
+    onPlay,
+    onPause,
+    onPlaying,
+    onTimeUpdate,
+    onDurationChange,
+    onEnded,
+    onError,
+    onLoadStart,
+    onLoadedMetadata,
+    onLoadedData,
+    onSeeking,
+    onSeeked,
+    onLoadingChange
+  ]);
+  const stableHlsConfigRef = React23.useRef(hlsConfig);
+  const stableOptionsRef = React23.useRef(options);
+  const configSignatureRef = React23.useRef("");
+  const [configVersion, setConfigVersion] = React23.useState(0);
+  React23.useEffect(() => {
+    const serialized = JSON.stringify({
+      hlsConfig: hlsConfig || null,
+      options: options || null
+    });
+    if (!configSignatureRef.current) {
+      configSignatureRef.current = serialized;
+      stableHlsConfigRef.current = hlsConfig;
+      stableOptionsRef.current = options;
+      return;
+    }
+    if (configSignatureRef.current !== serialized) {
+      configSignatureRef.current = serialized;
+      stableHlsConfigRef.current = hlsConfig;
+      stableOptionsRef.current = options;
+      setConfigVersion((prev) => prev + 1);
+    }
+  }, [hlsConfig, options]);
+  const cleanupBlobUrl = React23.useCallback(() => {
+    if (blobUrlRef.current) {
+      URL.revokeObjectURL(blobUrlRef.current);
+      blobUrlRef.current = null;
+    }
+  }, []);
+  const dispose = React23.useCallback(() => {
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+    cleanupBlobUrl();
+    setIsReady(false);
+  }, [cleanupBlobUrl]);
+  const playerLikeObject = React23.useCallback(() => {
+    return {
+      el: () => videoRef.current,
+      currentTime: () => videoRef.current?.currentTime || 0,
+      duration: () => videoRef.current?.duration || 0,
+      paused: () => videoRef.current?.paused ?? true,
+      play: () => videoRef.current?.play(),
+      pause: () => videoRef.current?.pause(),
+      muted: (val) => {
+        if (videoRef.current) {
+          if (val !== void 0) videoRef.current.muted = val;
+          return videoRef.current.muted;
+        }
+        return false;
+      },
+      volume: (val) => {
+        if (videoRef.current) {
+          if (val !== void 0) videoRef.current.volume = val;
+          return videoRef.current.volume;
+        }
+        return 1;
+      },
+      error: () => null,
+      dispose: () => dispose()
     };
-    updateDate();
-    const interval = setInterval(() => {
-      const currentDateStr = getCurrentFormattedDate();
-      if (currentDateStr !== date) {
-        updateDate();
+  }, [dispose]);
+  const initializePlayer = React23.useCallback(() => {
+    if (!videoRef.current || !src) return;
+    const video = videoRef.current;
+    const player = playerLikeObject();
+    const mergedHlsConfig = {
+      ...BASE_HLS_CONFIG,
+      ...stableHlsConfigRef.current || {},
+      ...stableOptionsRef.current || {}
+    };
+    cleanupBlobUrl();
+    const isHLS = src.endsWith(".m3u8") || src.startsWith("#EXTM3U");
+    if (isHLS) {
+      if (src.startsWith("#EXTM3U")) {
+        const safariMode = isSafari();
+        const browserName = getBrowserName();
+        if (safariMode) {
+          const clipIdMatch = src.match(/# Clip ID: ([a-f0-9-]+)/i);
+          if (clipIdMatch) {
+            const proxyUrl = `/api/clips/playlist/${clipIdMatch[1]}`;
+            console.log(`[HlsVideoPlayer] Safari detected (${browserName}) - using playlist proxy URL:`, proxyUrl);
+            video.src = proxyUrl;
+          } else {
+            console.warn("[HlsVideoPlayer] Safari detected but no clip ID found in playlist, trying blob URL fallback");
+            const blob = new Blob([src], { type: "application/vnd.apple.mpegurl" });
+            const blobUrl = URL.createObjectURL(blob);
+            blobUrlRef.current = blobUrl;
+            video.src = blobUrl;
+          }
+        } else if (Hls3__default.default.isSupported()) {
+          const blob = new Blob([src], { type: "application/vnd.apple.mpegurl" });
+          const blobUrl = URL.createObjectURL(blob);
+          blobUrlRef.current = blobUrl;
+          console.log(`[HlsVideoPlayer] Non-Safari browser (${browserName}) - using HLS.js with blob URL`);
+          const hls = new Hls3__default.default(mergedHlsConfig);
+          hlsRef.current = hls;
+          hls.on(Hls3.Events.MANIFEST_PARSED, () => {
+            console.log("[HlsVideoPlayer] Manifest parsed, ready to play");
+            setIsReady(true);
+            eventCallbacksRef.current.onReady?.(player);
+          });
+          hls.on(Hls3.Events.ERROR, (event, data) => {
+            console.error("[HlsVideoPlayer] HLS.js error:", data);
+            if (data.fatal) {
+              let errorInfo;
+              switch (data.type) {
+                case Hls3.ErrorTypes.NETWORK_ERROR:
+                  errorInfo = ERROR_MAPPING.networkError;
+                  console.log("[HlsVideoPlayer] Attempting to recover from network error");
+                  hls.startLoad();
+                  break;
+                case Hls3.ErrorTypes.MEDIA_ERROR:
+                  errorInfo = ERROR_MAPPING.mediaError;
+                  console.log("[HlsVideoPlayer] Attempting to recover from media error");
+                  hls.recoverMediaError();
+                  break;
+                case Hls3.ErrorTypes.MUX_ERROR:
+                  errorInfo = ERROR_MAPPING.muxError;
+                  break;
+                default:
+                  errorInfo = ERROR_MAPPING.otherError;
+                  break;
+              }
+              errorInfo.details = data.details;
+              eventCallbacksRef.current.onError?.(player, errorInfo);
+            }
+          });
+          hls.on(Hls3.Events.FRAG_LOADING, () => {
+            setIsLoading(true);
+            eventCallbacksRef.current.onLoadingChange?.(true);
+          });
+          hls.on(Hls3.Events.FRAG_LOADED, () => {
+            setIsLoading(false);
+            eventCallbacksRef.current.onLoadingChange?.(false);
+          });
+          hls.loadSource(blobUrl);
+          hls.attachMedia(video);
+        } else {
+          console.error("[HlsVideoPlayer] HLS.js not supported and not Safari - cannot play HLS content");
+          const errorInfo = ERROR_MAPPING.otherError;
+          onError?.(player, errorInfo);
+        }
+      } else {
+        if (Hls3__default.default.isSupported() && !isSafari()) {
+          const hls = new Hls3__default.default(mergedHlsConfig);
+          hlsRef.current = hls;
+          hls.on(Hls3.Events.MANIFEST_PARSED, () => {
+            setIsReady(true);
+            eventCallbacksRef.current.onReady?.(player);
+          });
+          hls.on(Hls3.Events.ERROR, (event, data) => {
+            console.error("[HlsVideoPlayer] HLS.js error:", data);
+            if (data.fatal) {
+              let errorInfo;
+              switch (data.type) {
+                case Hls3.ErrorTypes.NETWORK_ERROR:
+                  errorInfo = ERROR_MAPPING.networkError;
+                  hls.startLoad();
+                  break;
+                case Hls3.ErrorTypes.MEDIA_ERROR:
+                  errorInfo = ERROR_MAPPING.mediaError;
+                  hls.recoverMediaError();
+                  break;
+                default:
+                  errorInfo = ERROR_MAPPING.otherError;
+                  break;
+              }
+              errorInfo.details = data.details;
+              eventCallbacksRef.current.onError?.(player, errorInfo);
+            }
+          });
+          hls.loadSource(src);
+          hls.attachMedia(video);
+        } else {
+          video.src = src;
+        }
       }
-    }, 60 * 1e3);
-    return () => clearInterval(interval);
-  }, [date, timezoneToDisplay, dateTimeConfig?.dateFormatOptions, localeToUse]);
-  if (!date) return null;
-  if (variant === "minimal") {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: className || "", children: date });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    motion.div,
-    {
-      initial: { opacity: 0, y: -5 },
-      animate: { opacity: 1, y: 0 },
-      transition: { duration: 0.3 },
-      className: `flex items-center space-x-1.5 bg-white/60 backdrop-blur-sm px-2 py-0.5 rounded-md shadow-xs ${className || ""}`,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 text-blue-600", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z", clipRule: "evenodd" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-gray-800 tracking-tight", children: date })
-      ]
+    } else {
+      video.src = src;
     }
-  );
-};
-var DateDisplay_default = DateDisplay;
-var Card3 = Card2;
-var CardHeader3 = CardHeader2;
-var CardTitle3 = CardTitle2;
-var CardContent3 = CardContent2;
-var MetricCard2 = ({ title, value, unit = "", trend = null }) => {
-  const getTrendColor = (trendValue) => {
-    if (trendValue === null || trendValue === void 0) return "";
-    return trendValue > 0 ? "text-green-500" : trendValue < 0 ? "text-red-500" : "text-gray-500";
-  };
-  const getTrendSymbol = (trendValue) => {
-    if (trendValue === null || trendValue === void 0) return "";
-    return trendValue > 0 ? "\u2191" : trendValue < 0 ? "\u2193" : "";
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card3, { className: "bg-white", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CardHeader3, { className: "pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle3, { className: "text-sm font-medium text-gray-500", children: title }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent3, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-2xl font-semibold", children: [
-        value,
-        unit && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-sm text-gray-500", children: unit })
-      ] }),
-      trend !== null && trend !== void 0 && // Check trend for null/undefined before accessing
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex items-center ${getTrendColor(trend)}`, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm", children: [
-        getTrendSymbol(trend),
-        " ",
-        Math.abs(trend),
-        "%"
-      ] }) })
-    ] }) })
-  ] });
-};
-var MetricCard_default = MetricCard2;
-var TimePickerDropdown = ({
-  value,
-  onChange,
-  placeholder = "Select time",
-  className = "",
-  disabled = false
-}) => {
-  const [isOpen, setIsOpen] = React23.useState(false);
-  const [searchTerm, setSearchTerm] = React23.useState("");
-  const dropdownRef = React23.useRef(null);
-  const inputRef = React23.useRef(null);
-  const generateTimeSlots = () => {
-    const slots = [];
-    for (let hour = 0; hour < 24; hour++) {
-      for (let minute = 0; minute < 60; minute += 15) {
-        const time24 = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
-        const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
-        const ampm = hour < 12 ? "AM" : "PM";
-        const time12 = `${hour12}:${minute.toString().padStart(2, "0")} ${ampm}`;
-        slots.push({ value: time24, label: time12 });
-      }
-    }
-    return slots;
-  };
-  const timeSlots = generateTimeSlots();
-  const filteredSlots = timeSlots.filter(
-    (slot) => slot.label.toLowerCase().includes(searchTerm.toLowerCase())
-  );
-  const getDisplayValue = (value2) => {
-    if (!value2) return "";
-    const normalizedValue = value2.substring(0, 5);
-    const slot = timeSlots.find((s) => s.value === normalizedValue);
-    return slot ? slot.label : value2;
-  };
-  React23.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-        setSearchTerm("");
+    const handleCanPlay = () => {
+      if (!hlsRef.current) {
+        setIsReady(true);
+        onReady?.(player);
       }
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  const handleKeyDown = (e) => {
-    if (e.key === "Escape") {
-      setIsOpen(false);
-      setSearchTerm("");
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      if (filteredSlots.length > 0) {
-        onChange(filteredSlots[0].value);
-        setIsOpen(false);
-        setSearchTerm("");
-      }
-    }
-  };
-  const handleSelect = (timeValue) => {
-    onChange(timeValue);
-    setIsOpen(false);
-    setSearchTerm("");
-  };
-  const handleToggle = () => {
-    if (disabled) return;
-    setIsOpen(!isOpen);
-    if (!isOpen) {
-      setTimeout(() => inputRef.current?.focus(), 100);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${className}`, ref: dropdownRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: handleToggle,
-        disabled,
-        className: `
-          w-full px-3 py-2 text-left bg-white border border-gray-300 rounded-md shadow-sm
-          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
-          hover:border-gray-400 transition-colors duration-200
-          ${disabled ? "bg-gray-50 cursor-not-allowed" : "cursor-pointer"}
-          ${isOpen ? "ring-2 ring-blue-500 border-blue-500" : ""}
-        `,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-4 w-4 text-gray-400" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm ${value ? "text-gray-900" : "text-gray-500"}`, children: value ? getDisplayValue(value) : placeholder })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.ChevronDown,
-            {
-              className: `h-4 w-4 text-gray-400 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
-            }
-          )
-        ] })
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          ref: inputRef,
-          type: "text",
-          placeholder: "Search time...",
-          value: searchTerm,
-          onChange: (e) => setSearchTerm(e.target.value),
-          onKeyDown: handleKeyDown,
-          className: "w-full px-3 py-2 text-sm border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto max-h-48", children: filteredSlots.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-gray-500 text-center", children: "No times found" }) : filteredSlots.map((slot) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => handleSelect(slot.value),
-          className: `
-                    w-full px-3 py-2 text-left text-sm hover:bg-blue-50 hover:text-blue-600
-                    transition-colors duration-150 border-b border-gray-100 last:border-b-0
-                    ${slot.value === value ? "bg-blue-50 text-blue-600 font-medium" : "text-gray-700"}
-                  `,
-          children: slot.label
-        },
-        slot.value
-      )) })
-    ] })
-  ] });
-};
-var SilentErrorBoundary = class extends React23__namespace.default.Component {
-  constructor(props) {
-    super(props);
-    this.handleClearAndReload = () => {
-      console.log("[ErrorBoundary] User initiated reset");
-      if (typeof window !== "undefined") {
-        try {
-          localStorage.clear();
-          sessionStorage.clear();
-          console.log("[ErrorBoundary] Cleared all storage");
-        } catch (error) {
-          console.error("[ErrorBoundary] Failed to clear storage:", error);
-        }
-      }
-      window.location.href = "/login";
+    const handlePlay = () => eventCallbacksRef.current.onPlay?.(player);
+    const handlePause = () => eventCallbacksRef.current.onPause?.(player);
+    const handlePlaying = () => {
+      setIsLoading(false);
+      eventCallbacksRef.current.onLoadingChange?.(false);
+      eventCallbacksRef.current.onPlaying?.(player);
     };
-    this.state = {
-      hasError: false,
-      errorCount: 0,
-      lastError: null,
-      errorInfo: null
+    const handleTimeUpdate = () => {
+      const currentTime2 = video.currentTime || 0;
+      eventCallbacksRef.current.onTimeUpdate?.(player, currentTime2);
     };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error("[ErrorBoundary] Caught render error:", {
-      error: error.message,
-      stack: error.stack,
-      componentStack: errorInfo.componentStack,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    });
-    this.setState((prev) => ({
-      errorCount: prev.errorCount + 1,
-      lastError: error,
-      errorInfo
-    }));
-    try {
-      if (typeof window !== "undefined" && window.mixpanel) {
-        window.mixpanel.track("React Render Error", {
-          error: error.message,
-          component: errorInfo.componentStack?.split("\n")[1] || "unknown",
-          errorCount: this.state.errorCount + 1
-        });
-      }
-    } catch (analyticsError) {
-      console.warn("[ErrorBoundary] Analytics tracking failed:", analyticsError);
-    }
-  }
-  render() {
-    if (!this.state.hasError) {
-      return this.props.children;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-screen w-screen items-center justify-center bg-slate-50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center space-y-6 text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading Dashboard..." }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Taking longer than usual..." }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "a",
-        {
-          href: "#",
-          onClick: (e) => {
-            e.preventDefault();
-            this.handleClearAndReload();
-          },
-          className: "text-xs text-gray-400 hover:text-gray-600 underline transition-colors",
-          children: "Reset and try again"
-        }
-      ) }),
-      process.env.NODE_ENV === "development" && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400 italic mt-4", children: "Check console for error details" })
-    ] }) });
-  }
-};
-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 ERROR_MAPPING = {
-  1: {
-    // MEDIA_ERR_ABORTED
-    code: 1,
-    type: "recoverable" /* RECOVERABLE */,
-    message: "Video loading was interrupted",
-    canRetry: true
-  },
-  2: {
-    // MEDIA_ERR_NETWORK
-    code: 2,
-    type: "recoverable" /* RECOVERABLE */,
-    message: "Network error - please check your internet connection",
-    canRetry: true
-  },
-  3: {
-    // MEDIA_ERR_DECODE
-    code: 3,
-    type: "non_recoverable" /* NON_RECOVERABLE */,
-    message: "Stream corrupted due to internet connection",
-    canRetry: false
-  },
-  4: {
-    // MEDIA_ERR_SRC_NOT_SUPPORTED
-    code: 4,
-    type: "non_recoverable" /* NON_RECOVERABLE */,
-    message: "Video format not supported by your browser. Please use Google Chrome.",
-    canRetry: false
-  }
-};
-var videoPlayerStyles = `
-  .video-player-container {
-    width: 100%;
-    height: 100%;
-    background-color: #000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  /* Center the video player and maintain aspect ratio */
-  .video-js {
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-  }
-  
-  /* Ensure video maintains aspect ratio and shows fully */
-  .video-js .vjs-tech {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-  
-  /* Hide default Video.js loading spinner */
-  .video-js .vjs-loading-spinner {
-    display: none !important;
-  }
-  
-  /* Custom loading indicator styles */
-  .video-player-loading {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 10;
-  }
-`;
-if (typeof document !== "undefined") {
-  const styleId = "video-player-custom-styles";
-  if (!document.getElementById(styleId)) {
-    const style = document.createElement("style");
-    style.id = styleId;
-    style.textContent = videoPlayerStyles;
-    document.head.appendChild(style);
-  }
-}
-var VideoPlayer = React23__namespace.default.forwardRef(({
-  src,
-  poster,
-  autoplay = false,
-  controls = true,
-  loop = false,
-  muted = false,
-  playsInline = true,
-  className = "",
-  options = {},
-  externalLoadingControl = false,
-  onLoadingChange,
-  onReady,
-  onPlay,
-  onPause,
-  onPlaying,
-  onTimeUpdate,
-  onDurationChange,
-  onEnded,
-  onError,
-  onLoadStart,
-  onLoadedMetadata,
-  onLoadedData,
-  onSeeking,
-  onSeeked,
-  onClick
-}, ref) => {
-  const videoRef = React23.useRef(null);
-  const playerRef = 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 defaultOptions = {
-    controls: false,
-    // Always disable Video.js controls - we use custom controls
-    // Don't use fluid or fill - let the video maintain its natural aspect ratio
-    fluid: false,
-    // Disable fluid mode to prevent stretching
-    responsive: false,
-    // Disable responsive mode
-    fill: false,
-    // Don't fill - maintain aspect ratio
-    playsinline: playsInline,
-    preload: "metadata",
-    autoplay: autoplay ? "any" : false,
-    muted,
-    loop,
-    poster,
-    // Optimized HLS configuration for VOD content with LARGE SEGMENTS (40MB)
-    // Strategy: Aggressive buffer reduction for faster startup with large segments
-    html5: {
-      vhs: {
-        // VHS (Video HTTP Streaming) options for HLS
-        withCredentials: false,
-        handleManifestRedirect: true,
-        overrideNative: !videojs__default.default.browser.IS_SAFARI,
-        // Use native HLS on Safari
-        enableLowInitialPlaylist: true,
-        smoothQualityChange: true,
-        // Optimized bandwidth and buffering for VOD
-        bandwidth: 5e7,
-        // Start with high bandwidth assumption (50 Mbps)
-        initialBandwidth: 5e7,
-        // Assume good connection initially
-        limitRenditionByPlayerDimensions: true,
-        // Buffer configuration optimized for large segments (40MB each)
-        maxBufferLength: 3,
-        // Start playing with just 3 seconds ahead
-        maxMaxBufferLength: 8,
-        // Maximum 8 seconds buffer for faster startup
-        maxBufferSize: 50 * 1e3 * 1e3,
-        // 50MB max buffer size (1.25 segments)
-        maxBufferHole: 0.25,
-        // Smaller holes for better continuity
-        bufferBasedABR: false,
-        // Disable for more predictable behavior
-        // Segment loading optimization for large segments (40MB)
-        maxPlaylistRetries: 3,
-        playlistRetryDelay: 500,
-        // 500ms between retries
-        playlistExclusionDuration: 60,
-        segmentLoadingRetryAttempts: 5,
-        // More retries for large segments
-        segmentLoadingRetryDelay: 500,
-        // Faster retry for responsiveness
-        segmentLoadingTimeOut: 6e4,
-        // 60s timeout for 40MB segments
-        manifestLoadingTimeOut: 15e3,
-        // 15s timeout for manifest
-        // Performance optimizations
-        experimentalBufferBasedCodecSwitching: true,
-        experimentalCacheEncryptionKeys: true,
-        handlePartialData: true,
-        allowSeeksWithinUnsafeLiveWindow: false,
-        // VOD content
-        experimentalLLHLS: false,
-        // Disable Low Latency HLS for VOD
-        // Connection settings
-        // Chrome 130+ started throwing "Cannot perform Construct on a detached ArrayBuffer"
-        // whenever the transmux worker tried to rehydrate transferred buffers that originated
-        // from Blob-based playlists. Disabling the worker keeps playback stable at the cost
-        // of slightly higher main-thread usage, which is acceptable for the dashboard usage.
-        enableWorker: false,
-        progressive: true,
-        // Progressive download
-        // Adaptive bitrate settings (if multi-quality available)
-        abrEwmaFastLive: 3,
-        abrEwmaSlowLive: 9,
-        abrBandWidthFactor: 0.95,
-        abrBandWidthUpFactor: 0.7,
-        abrMaxWithRealBitrate: false,
-        // Request options optimized for large segments
-        requestOptions: {
-          timeout: 9e4,
-          // 90s timeout for 40MB segments
-          maxRetry: 5
-          // More retries for reliability
-        }
-      },
-      nativeVideoTracks: false,
-      nativeAudioTracks: false,
-      nativeTextTracks: false
-    },
-    // Improved seeking and scrubbing
-    inactivityTimeout: 3e3,
-    // Better error handling
-    errorDisplay: false,
-    // We'll handle errors with callbacks
-    // Fullscreen options
-    fullscreen: {
-      options: {
-        navigationUI: "hide"
-      }
-    },
-    ...options
-  };
-  const initializePlayer = React23.useCallback(() => {
-    if (!videoRef.current || playerRef.current) return;
-    const videoElement = document.createElement("video-js");
-    videoElement.className = "vjs-default-skin";
-    videoRef.current.appendChild(videoElement);
-    const player = videojs__default.default(videoElement, defaultOptions);
-    playerRef.current = player;
-    player.ready(() => {
-      setIsReady(true);
-      onReady?.(player);
-    });
-    player.on("play", () => onPlay?.(player));
-    player.on("pause", () => onPause?.(player));
-    player.on("playing", () => onPlaying?.(player));
-    player.on("timeupdate", () => {
-      const currentTime2 = player.currentTime() || 0;
-      onTimeUpdate?.(player, currentTime2);
-    });
-    player.on("durationchange", () => {
-      const duration2 = player.duration() || 0;
-      onDurationChange?.(player, duration2);
-    });
-    player.on("ended", () => onEnded?.(player));
-    player.on("loadstart", () => {
+    const handleDurationChange = () => {
+      const duration2 = video.duration || 0;
+      eventCallbacksRef.current.onDurationChange?.(player, duration2);
+    };
+    const handleEnded = () => eventCallbacksRef.current.onEnded?.(player);
+    const handleLoadStart = () => {
       setIsLoading(true);
-      onLoadingChange?.(true);
-      onLoadStart?.(player);
-    });
-    player.on("loadeddata", () => {
+      eventCallbacksRef.current.onLoadingChange?.(true);
+      eventCallbacksRef.current.onLoadStart?.(player);
+    };
+    const handleLoadedMetadata = () => eventCallbacksRef.current.onLoadedMetadata?.(player);
+    const handleLoadedData = () => {
       setIsLoading(false);
-      onLoadingChange?.(false);
-      onLoadedData?.(player);
-    });
-    player.on("waiting", () => {
+      eventCallbacksRef.current.onLoadingChange?.(false);
+      eventCallbacksRef.current.onLoadedData?.(player);
+    };
+    const handleWaiting = () => {
       setIsLoading(true);
-      onLoadingChange?.(true);
-    });
-    player.on("playing", () => {
-      setIsLoading(false);
-      onLoadingChange?.(false);
-    });
-    player.on("loadedmetadata", () => {
-      onLoadedMetadata?.(player);
-    });
-    player.on("seeking", () => onSeeking?.(player));
-    player.on("seeked", () => onSeeked?.(player));
-    player.on("error", () => {
-      const error = player.error();
-      const errorCode = error?.code ?? 0;
-      const errorInfo = ERROR_MAPPING[errorCode] || {
-        code: errorCode || 0,
-        type: "non_recoverable" /* NON_RECOVERABLE */,
-        message: "Unknown playback error occurred",
-        canRetry: false
-      };
-      console.error("[VideoPlayer] Video.js error:", {
-        code: errorCode,
-        type: errorInfo.type,
-        message: errorInfo.message,
-        canRetry: errorInfo.canRetry,
-        originalError: error
-      });
-      onError?.(player, errorInfo);
-    });
-    if (src) {
-      const isHLS = src.endsWith(".m3u8") || src.startsWith("#EXTM3U");
-      let videoSrc = src;
-      let blobUrl = null;
-      if (src.startsWith("#EXTM3U")) {
-        const safariMode = isSafari();
-        const browserName = getBrowserName();
-        if (safariMode) {
-          const clipIdMatch = src.match(/# Clip ID: ([a-f0-9-]+)/i);
-          if (clipIdMatch) {
-            videoSrc = `/api/clips/playlist/${clipIdMatch[1]}`;
-            console.log(`[VideoPlayer] Safari detected (${browserName}) - using playlist proxy URL:`, videoSrc);
-          } else {
-            console.warn("[VideoPlayer] Safari detected but no clip ID found in playlist, trying blob URL fallback");
-            const blob = new Blob([src], { type: "application/vnd.apple.mpegurl" });
-            blobUrl = URL.createObjectURL(blob);
-            videoSrc = blobUrl;
-            player._blobUrl = videoSrc;
-          }
-        } else {
-          const blob = new Blob([src], { type: "application/vnd.apple.mpegurl" });
-          blobUrl = URL.createObjectURL(blob);
-          videoSrc = blobUrl;
-          console.log(`[VideoPlayer] Non-Safari browser (${browserName}) - using blob URL for optimal performance`);
-          player._blobUrl = videoSrc;
-        }
+      eventCallbacksRef.current.onLoadingChange?.(true);
+    };
+    const handleSeeking = () => eventCallbacksRef.current.onSeeking?.(player);
+    const handleSeeked = () => eventCallbacksRef.current.onSeeked?.(player);
+    const handleError = () => {
+      const error = video.error;
+      if (error) {
+        const errorInfo = {
+          code: error.code,
+          type: error.code <= 2 ? "recoverable" : "non_recoverable",
+          message: error.message || "Unknown error occurred",
+          canRetry: error.code <= 2
+        };
+        eventCallbacksRef.current.onError?.(player, errorInfo);
       }
-      player.src({
-        src: videoSrc,
-        type: isHLS ? "application/x-mpegURL" : "video/mp4"
-      });
-    }
+    };
+    video.addEventListener("canplay", handleCanPlay);
+    video.addEventListener("play", handlePlay);
+    video.addEventListener("pause", handlePause);
+    video.addEventListener("playing", handlePlaying);
+    video.addEventListener("timeupdate", handleTimeUpdate);
+    video.addEventListener("durationchange", handleDurationChange);
+    video.addEventListener("ended", handleEnded);
+    video.addEventListener("loadstart", handleLoadStart);
+    video.addEventListener("loadedmetadata", handleLoadedMetadata);
+    video.addEventListener("loadeddata", handleLoadedData);
+    video.addEventListener("waiting", handleWaiting);
+    video.addEventListener("seeking", handleSeeking);
+    video.addEventListener("seeked", handleSeeked);
+    video.addEventListener("error", handleError);
+    return () => {
+      video.removeEventListener("canplay", handleCanPlay);
+      video.removeEventListener("play", handlePlay);
+      video.removeEventListener("pause", handlePause);
+      video.removeEventListener("playing", handlePlaying);
+      video.removeEventListener("timeupdate", handleTimeUpdate);
+      video.removeEventListener("durationchange", handleDurationChange);
+      video.removeEventListener("ended", handleEnded);
+      video.removeEventListener("loadstart", handleLoadStart);
+      video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      video.removeEventListener("loadeddata", handleLoadedData);
+      video.removeEventListener("waiting", handleWaiting);
+      video.removeEventListener("seeking", handleSeeking);
+      video.removeEventListener("seeked", handleSeeked);
+      video.removeEventListener("error", handleError);
+    };
   }, [
     src,
-    defaultOptions,
-    onReady,
-    onPlay,
-    onPause,
-    onTimeUpdate,
-    onDurationChange,
-    onEnded,
-    onError,
-    onLoadStart,
-    onLoadedMetadata,
-    onSeeking,
-    onSeeked
+    cleanupBlobUrl,
+    playerLikeObject,
+    configVersion
   ]);
   React23.useEffect(() => {
-    if (playerRef.current && src) {
-      const isHLS = src.endsWith(".m3u8") || src.startsWith("#EXTM3U");
-      let videoSrc = src;
-      let blobUrl = null;
-      if (src.startsWith("#EXTM3U")) {
-        const safariMode = isSafari();
-        const browserName = getBrowserName();
-        if (safariMode) {
-          const clipIdMatch = src.match(/# Clip ID: ([a-f0-9-]+)/i);
-          if (clipIdMatch) {
-            videoSrc = `/api/clips/playlist/${clipIdMatch[1]}`;
-            console.log(`[VideoPlayer] Safari detected (${browserName}) - using playlist proxy URL for source update:`, videoSrc);
-          } else {
-            console.warn("[VideoPlayer] Safari detected but no clip ID found in playlist (source update), trying blob URL fallback");
-            const blob = new Blob([src], { type: "application/vnd.apple.mpegurl" });
-            blobUrl = URL.createObjectURL(blob);
-            videoSrc = blobUrl;
-          }
-        } else {
-          const blob = new Blob([src], { type: "application/vnd.apple.mpegurl" });
-          blobUrl = URL.createObjectURL(blob);
-          videoSrc = blobUrl;
-          console.log(`[VideoPlayer] Non-Safari browser (${browserName}) - using blob URL for source update`);
-        }
-      }
-      playerRef.current.src({
-        src: videoSrc,
-        type: isHLS ? "application/x-mpegURL" : "video/mp4"
-      });
-      return () => {
-        if (blobUrl) {
-          URL.revokeObjectURL(blobUrl);
-        }
-      };
-    }
-  }, [src]);
-  React23.useEffect(() => {
-    initializePlayer();
+    const cleanup = initializePlayer();
     return () => {
-      if (playerRef.current) {
-        const blobUrl = playerRef.current._blobUrl;
-        if (blobUrl) {
-          URL.revokeObjectURL(blobUrl);
-        }
-        playerRef.current.dispose();
-        playerRef.current = null;
-        setIsReady(false);
+      cleanup?.();
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
       }
+      cleanupBlobUrl();
+      setIsReady(false);
     };
-  }, []);
+  }, [src, initializePlayer, cleanupBlobUrl]);
+  React23.useEffect(() => {
+    if (videoRef.current) {
+      if (autoplay) {
+        videoRef.current.play().catch((err) => {
+          console.warn("[HlsVideoPlayer] Autoplay failed:", err);
+        });
+      }
+    }
+  }, [autoplay]);
   const play = React23.useCallback(() => {
-    return playerRef.current?.play();
+    return videoRef.current?.play();
   }, []);
   const pause = React23.useCallback(() => {
-    playerRef.current?.pause();
+    videoRef.current?.pause();
   }, []);
   const currentTime = React23.useCallback((time2) => {
-    if (time2 !== void 0) {
-      playerRef.current?.currentTime(time2);
+    if (time2 !== void 0 && videoRef.current) {
+      videoRef.current.currentTime = time2;
       return time2;
     }
-    return playerRef.current?.currentTime() || 0;
+    return videoRef.current?.currentTime || 0;
   }, []);
   const duration = React23.useCallback(() => {
-    return playerRef.current?.duration() || 0;
+    return videoRef.current?.duration || 0;
   }, []);
   const paused = React23.useCallback(() => {
-    return playerRef.current?.paused() ?? true;
+    return videoRef.current?.paused ?? true;
   }, []);
   const mute = React23.useCallback((isMuted) => {
-    if (isMuted !== void 0) {
-      playerRef.current?.muted(isMuted);
+    if (isMuted !== void 0 && videoRef.current) {
+      videoRef.current.muted = isMuted;
       return isMuted;
     }
-    return playerRef.current?.muted() ?? false;
+    return videoRef.current?.muted ?? false;
   }, []);
   const volume = React23.useCallback((level) => {
-    if (level !== void 0) {
-      playerRef.current?.volume(level);
+    if (level !== void 0 && videoRef.current) {
+      videoRef.current.volume = level;
       return level;
     }
-    return playerRef.current?.volume() ?? 1;
+    return videoRef.current?.volume ?? 1;
   }, []);
-  const dispose = React23.useCallback(() => {
-    if (playerRef.current) {
-      playerRef.current.dispose();
-      playerRef.current = null;
-      setIsReady(false);
+  const playbackRate = React23.useCallback((rate) => {
+    if (rate !== void 0 && videoRef.current) {
+      videoRef.current.playbackRate = rate;
+      return rate;
     }
+    return videoRef.current?.playbackRate ?? 1;
   }, []);
-  React23__namespace.default.useImperativeHandle(ref, () => ({
-    player: playerRef.current,
+  React23.useImperativeHandle(ref, () => ({
+    hls: hlsRef.current,
+    video: videoRef.current,
     play,
     pause,
     currentTime,
@@ -27030,13 +26707,15 @@ var VideoPlayer = React23__namespace.default.forwardRef(({
     paused,
     mute,
     volume,
+    playbackRate,
     dispose,
-    isReady
-  }));
+    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 || !playerRef.current) return;
-    const player = playerRef.current;
-    const willBePlaying = player.paused();
+    if (!onClick || !videoRef.current) return;
+    const willBePlaying = videoRef.current.paused;
     setIndicatorIsPlaying(willBePlaying);
     setShowIndicator(false);
     setTimeout(() => {
@@ -27045,17 +26724,30 @@ var VideoPlayer = React23__namespace.default.forwardRef(({
     }, 0);
     onClick();
   }, [onClick]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `video-player-wrapper ${className}`, style: { position: "relative", width: "100%", height: "100%" }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `hls-video-player-wrapper ${className}`, style: { position: "relative", width: "100%", height: "100%" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "video-player-container",
-        ref: videoRef,
-        "data-vjs-player": true
+        className: "hls-video-player-container",
+        ref: videoContainerRef,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "video",
+          {
+            ref: videoRef,
+            className: "hls-video-element",
+            poster,
+            controls,
+            loop,
+            muted,
+            playsInline,
+            autoPlay: autoplay,
+            preload: "metadata"
+          }
+        )
       }
     ),
-    isLoading && !externalLoadingControl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video-player-loading", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-    onClick && /* @__PURE__ */ jsxRuntime.jsx(
+    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,
@@ -27071,7 +26763,7 @@ var VideoPlayer = React23__namespace.default.forwardRef(({
         "aria-label": "Click to play/pause"
       }
     ),
-    onClick && /* @__PURE__ */ jsxRuntime.jsx(
+    onClick && !controls && /* @__PURE__ */ jsxRuntime.jsx(
       PlayPauseIndicator,
       {
         show: showIndicator,
@@ -27081,13 +26773,25 @@ var VideoPlayer = React23__namespace.default.forwardRef(({
     )
   ] });
 });
-VideoPlayer.displayName = "VideoPlayer";
-var CroppedVideoPlayer = React23.forwardRef(({
+HlsVideoPlayer.displayName = "HlsVideoPlayer";
+var VideoPlayer = HlsVideoPlayer;
+var CroppedHlsVideoPlayer = React23.forwardRef(({
   crop,
   debug = false,
   onClick,
   ...videoProps
 }, ref) => {
+  const {
+    onReady: onReadyProp,
+    onPlay: onPlayProp,
+    onPause: onPauseProp,
+    onEnded: onEndedProp,
+    onSeeking: onSeekingProp,
+    onSeeked: onSeekedProp,
+    onLoadedMetadata: onLoadedMetadataProp,
+    className: inheritedClassName = ""
+  } = videoProps;
+  const videoSrc = videoProps.src;
   const videoContainerRef = React23.useRef(null);
   const hiddenVideoRef = React23.useRef(null);
   const canvasRef = React23.useRef(null);
@@ -27106,8 +26810,11 @@ var CroppedVideoPlayer = React23.forwardRef(({
     }
   }, []);
   React23.useImperativeHandle(ref, () => ({
-    get player() {
-      return hiddenVideoRef.current?.player || null;
+    get hls() {
+      return hiddenVideoRef.current?.hls || null;
+    },
+    get video() {
+      return hiddenVideoRef.current?.video || null;
     },
     play: () => hiddenVideoRef.current?.play() || void 0,
     pause: () => hiddenVideoRef.current?.pause(),
@@ -27121,12 +26828,36 @@ var CroppedVideoPlayer = React23.forwardRef(({
     paused: () => hiddenVideoRef.current?.paused() || true,
     mute: (isMuted) => hiddenVideoRef.current?.mute(isMuted) || false,
     volume: (level) => hiddenVideoRef.current?.volume(level) || 0,
+    playbackRate: (rate) => hiddenVideoRef.current?.playbackRate(rate) || 1,
     dispose: () => {
       hiddenVideoRef.current?.dispose();
       stopCanvasRendering();
     },
     get isReady() {
       return hiddenVideoRef.current?.isReady || false;
+    },
+    // For backward compatibility with Video.js API
+    get player() {
+      const video = hiddenVideoRef.current?.video;
+      if (!video) return null;
+      return {
+        el: () => video,
+        currentTime: () => video.currentTime || 0,
+        duration: () => video.duration || 0,
+        paused: () => video.paused ?? true,
+        play: () => video.play(),
+        pause: () => video.pause(),
+        muted: (val) => {
+          if (val !== void 0) video.muted = val;
+          return video.muted;
+        },
+        volume: (val) => {
+          if (val !== void 0) video.volume = val;
+          return video.volume;
+        },
+        error: () => null,
+        dispose: () => hiddenVideoRef.current?.dispose()
+      };
     }
   }), [stopCanvasRendering]);
   const calculateCanvasDimensions = React23.useCallback(() => {
@@ -27186,24 +26917,38 @@ var CroppedVideoPlayer = React23.forwardRef(({
     animationFrameRef.current = requestAnimationFrame(renderFrameToCanvas);
   }, [crop]);
   const handleVideoReady = React23.useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video player ready");
-    const videoEl = player.el().querySelector("video");
+    console.log("[CroppedHlsVideoPlayer] Video player ready");
+    const videoEl = hiddenVideoRef.current?.video;
     if (videoEl) {
       videoElementRef.current = videoEl;
       setIsVideoReady(true);
     }
-    videoProps.onReady?.(player);
-  }, [videoProps]);
+    onReadyProp?.(player);
+  }, [onReadyProp]);
   const handleVideoPlay = React23.useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video playing, starting canvas rendering");
+    console.log("[CroppedHlsVideoPlayer] Video playing, starting canvas rendering");
     if (crop && canvasRef.current) {
       setIsProcessing(true);
       renderFrameToCanvas();
     }
-    videoProps.onPlay?.(player);
-  }, [crop, renderFrameToCanvas, videoProps]);
+    onPlayProp?.(player);
+  }, [crop, renderFrameToCanvas, onPlayProp]);
   const handleVideoPause = React23.useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video paused, stopping canvas rendering and CLEARING canvas");
+    console.log("[CroppedHlsVideoPlayer] Video paused, stopping canvas rendering and CLEARING canvas");
+    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);
+      }
+    }
+    onPauseProp?.(player);
+  }, [stopCanvasRendering, onPauseProp]);
+  const handleVideoEnded = React23.useCallback((player) => {
+    console.log("[CroppedHlsVideoPlayer] Video ended, CLEARING canvas");
     stopCanvasRendering();
     setIsProcessing(false);
     if (canvasRef.current) {
@@ -27214,159 +26959,677 @@ var CroppedVideoPlayer = React23.forwardRef(({
         ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
       }
     }
-    videoProps.onPause?.(player);
-  }, [stopCanvasRendering, videoProps]);
-  const handleVideoEnded = React23.useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video ended, CLEARING canvas");
-    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);
+    onEndedProp?.(player);
+  }, [stopCanvasRendering, onEndedProp]);
+  const handleSeeking = React23.useCallback((player) => {
+    console.log("[CroppedHlsVideoPlayer] Video seeking");
+    if (crop && !videoElementRef.current?.paused) {
+      renderFrameToCanvas();
+    }
+    onSeekingProp?.(player);
+  }, [crop, renderFrameToCanvas, onSeekingProp]);
+  const handleSeeked = React23.useCallback((player) => {
+    console.log("[CroppedHlsVideoPlayer] Video seeked");
+    if (crop && !videoElementRef.current?.paused) {
+      renderFrameToCanvas();
+    }
+    onSeekedProp?.(player);
+  }, [crop, renderFrameToCanvas, onSeekedProp]);
+  const handleLoadedMetadata = React23.useCallback((player) => {
+    console.log("[CroppedHlsVideoPlayer] Video metadata loaded");
+    calculateCanvasDimensions();
+    onLoadedMetadataProp?.(player);
+  }, [calculateCanvasDimensions, onLoadedMetadataProp]);
+  React23.useEffect(() => {
+    calculateCanvasDimensions();
+    const handleResize = () => {
+      calculateCanvasDimensions();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [calculateCanvasDimensions]);
+  React23.useLayoutEffect(() => {
+    if (canvasRef.current && crop) {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        console.log("[CroppedHlsVideoPlayer] Source changing - CLEARING CANVAS IMMEDIATELY");
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      }
+    }
+  }, [videoSrc, crop]);
+  React23.useEffect(() => {
+    return () => {
+      stopCanvasRendering();
+    };
+  }, [stopCanvasRendering]);
+  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.jsxs(
+    "div",
+    {
+      ref: videoContainerRef,
+      className: `relative w-full h-full flex items-center justify-center bg-black ${onClick ? "cursor-pointer" : ""} ${inheritedClassName}`,
+      onClick: handleClickWithIndicator,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+          HlsVideoPlayer,
+          {
+            ref: hiddenVideoRef,
+            ...videoProps,
+            onReady: handleVideoReady,
+            onPlay: handleVideoPlay,
+            onPause: handleVideoPause,
+            onEnded: handleVideoEnded,
+            onSeeking: handleSeeking,
+            onSeeked: handleSeeked,
+            onLoadedMetadata: handleLoadedMetadata,
+            onLoadedData: videoProps.onLoadedData,
+            onPlaying: videoProps.onPlaying,
+            onLoadingChange: videoProps.onLoadingChange
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            width: canvasDimensions.width,
+            height: canvasDimensions.height,
+            className: "max-w-full max-h-full",
+            style: {
+              display: isVideoReady ? "block" : "none",
+              width: `${canvasDimensions.width}px`,
+              height: `${canvasDimensions.height}px`
+            }
+          }
+        ),
+        !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: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            "Crop: ",
+            crop.x,
+            ",",
+            crop.y,
+            " ",
+            crop.width,
+            "x",
+            crop.height,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            "Canvas: ",
+            canvasDimensions.width,
+            "x",
+            canvasDimensions.height,
+            "px"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            "Processing: ",
+            isProcessing ? "Yes" : "No"
+          ] })
+        ] }),
+        onClick && /* @__PURE__ */ jsxRuntime.jsx(
+          PlayPauseIndicator,
+          {
+            show: showIndicator,
+            isPlaying: indicatorIsPlaying
+          },
+          indicatorKeyRef.current
+        )
+      ]
+    }
+  );
+});
+CroppedHlsVideoPlayer.displayName = "CroppedHlsVideoPlayer";
+var CroppedVideoPlayer = CroppedHlsVideoPlayer;
+var getSupabaseClient2 = () => {
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+  if (!url || !key) {
+    throw new Error("Supabase configuration missing");
+  }
+  return supabaseJs.createClient(url, key);
+};
+var getAuthToken3 = async () => {
+  try {
+    const supabase = getSupabaseClient2();
+    const { data: { session } } = await supabase.auth.getSession();
+    return session?.access_token || null;
+  } catch (error) {
+    console.error("[useWorkspaceCrop] Error getting auth token:", error);
+    return null;
+  }
+};
+function useWorkspaceCrop(workspaceId) {
+  const [crop, setCrop] = React23.useState(null);
+  const [isLoading, setIsLoading] = React23.useState(true);
+  const [error, setError] = React23.useState(null);
+  React23.useEffect(() => {
+    if (!workspaceId) {
+      setIsLoading(false);
+      return;
+    }
+    const fetchCrop = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const token = await getAuthToken3();
+        if (!token) {
+          throw new Error("Authentication required");
+        }
+        const response = await fetch("/api/clips/supabase", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${token}`
+          },
+          body: JSON.stringify({
+            action: "crop",
+            workspaceId
+          })
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to fetch crop: ${response.statusText}`);
+        }
+        const data = await response.json();
+        console.log(`[useWorkspaceCrop] Fetched crop for workspace ${workspaceId}:`, data.crop);
+        setCrop(data.crop);
+      } catch (err) {
+        console.error("[useWorkspaceCrop] Error fetching crop:", err);
+        setError(err instanceof Error ? err.message : "Failed to fetch crop configuration");
+        setCrop(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchCrop();
+  }, [workspaceId]);
+  return { crop, isLoading, error };
+}
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-pulse rounded-md bg-muted", className), ...props });
+}
+var Select = SelectPrimitive__namespace.Root;
+var SelectGroup = SelectPrimitive__namespace.Group;
+var SelectValue = SelectPrimitive__namespace.Value;
+var SelectTrigger = React23__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-11 sm:h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 touch-manipulation",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
+var SelectScrollUpButton = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.ScrollUpButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
+var SelectScrollDownButton = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.ScrollDownButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
+var SelectContent = React23__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SelectPrimitive__namespace.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
+var SelectLabel = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
+var SelectItem = React23__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
+var SelectSeparator = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
+var LoadingOverlay = ({
+  isVisible,
+  message = "Loading...",
+  className
+}) => {
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    motion.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.2 },
+      className: `fixed inset-0 z-[100] flex items-center justify-center bg-black/30 backdrop-blur-sm ${className || ""}`,
+      "aria-modal": "true",
+      role: "dialog",
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center space-y-3 rounded-lg bg-white p-8 shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message }) })
+    }
+  );
+};
+var LoadingOverlay_default = LoadingOverlay;
+var TimeDisplay = ({ className, variant = "default" }) => {
+  const { dateTimeConfig } = useDashboardConfig();
+  const [time2, setTime] = React23.useState("");
+  const dbTimezone = useAppTimezone();
+  const timezoneToDisplay = dbTimezone || dateTimeConfig?.defaultTimezone || "UTC";
+  const localeToUse = dateTimeConfig?.defaultLocale || "en-US";
+  const timeSuffix = "";
+  React23.useEffect(() => {
+    const updateTime = () => {
+      const now2 = /* @__PURE__ */ new Date();
+      const effectiveFormatOptions = {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: true,
+        timeZone: timezoneToDisplay,
+        ...dateTimeConfig?.timeFormatOptions || {}
+        // Allow override from config
+      };
+      try {
+        setTime(new Intl.DateTimeFormat(localeToUse, effectiveFormatOptions).format(now2));
+      } catch (e) {
+        console.error("Error formatting time:", e);
+        setTime("Error");
+      }
+    };
+    updateTime();
+    const interval = setInterval(updateTime, 1e3);
+    return () => clearInterval(interval);
+  }, [timezoneToDisplay, dateTimeConfig?.timeFormatOptions, localeToUse]);
+  if (!time2) return null;
+  if (variant === "minimal") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: className || "", children: [
+      time2,
+      " ",
+      timeSuffix
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, y: -5 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.3 },
+      className: `flex items-center space-x-1.5 bg-white/60 backdrop-blur-sm px-2 py-0.5 rounded-md shadow-xs ${className || ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 text-[var(--primary-DEFAULT)]", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-[11px] font-medium text-gray-800 tabular-nums tracking-tight", children: [
+          time2,
+          " ",
+          timeSuffix
+        ] })
+      ]
+    }
+  );
+};
+var TimeDisplay_default = TimeDisplay;
+var DateDisplay = ({ className, variant = "default" }) => {
+  const { dateTimeConfig } = useDashboardConfig();
+  const [date, setDate] = React23.useState("");
+  const timezoneToDisplay = dateTimeConfig?.defaultTimezone || "UTC";
+  const localeToUse = dateTimeConfig?.defaultLocale || "en-US";
+  React23.useEffect(() => {
+    const getCurrentFormattedDate = () => {
+      const now2 = /* @__PURE__ */ new Date();
+      const effectiveFormatOptions = {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+        timeZone: timezoneToDisplay,
+        ...dateTimeConfig?.dateFormatOptions || {}
+        // Allow override from config
+      };
+      try {
+        return new Intl.DateTimeFormat(localeToUse, effectiveFormatOptions).format(now2);
+      } catch (e) {
+        console.error("Error formatting date:", e);
+        return "Error";
+      }
+    };
+    const updateDate = () => {
+      setDate(getCurrentFormattedDate());
+    };
+    updateDate();
+    const interval = setInterval(() => {
+      const currentDateStr = getCurrentFormattedDate();
+      if (currentDateStr !== date) {
+        updateDate();
+      }
+    }, 60 * 1e3);
+    return () => clearInterval(interval);
+  }, [date, timezoneToDisplay, dateTimeConfig?.dateFormatOptions, localeToUse]);
+  if (!date) return null;
+  if (variant === "minimal") {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: className || "", children: date });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, y: -5 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.3 },
+      className: `flex items-center space-x-1.5 bg-white/60 backdrop-blur-sm px-2 py-0.5 rounded-md shadow-xs ${className || ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 text-blue-600", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z", clipRule: "evenodd" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-gray-800 tracking-tight", children: date })
+      ]
+    }
+  );
+};
+var DateDisplay_default = DateDisplay;
+var Card3 = Card2;
+var CardHeader3 = CardHeader2;
+var CardTitle3 = CardTitle2;
+var CardContent3 = CardContent2;
+var MetricCard2 = ({ title, value, unit = "", trend = null }) => {
+  const getTrendColor = (trendValue) => {
+    if (trendValue === null || trendValue === void 0) return "";
+    return trendValue > 0 ? "text-green-500" : trendValue < 0 ? "text-red-500" : "text-gray-500";
+  };
+  const getTrendSymbol = (trendValue) => {
+    if (trendValue === null || trendValue === void 0) return "";
+    return trendValue > 0 ? "\u2191" : trendValue < 0 ? "\u2193" : "";
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card3, { className: "bg-white", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CardHeader3, { className: "pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle3, { className: "text-sm font-medium text-gray-500", children: title }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(CardContent3, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-2xl font-semibold", children: [
+        value,
+        unit && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-sm text-gray-500", children: unit })
+      ] }),
+      trend !== null && trend !== void 0 && // Check trend for null/undefined before accessing
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex items-center ${getTrendColor(trend)}`, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm", children: [
+        getTrendSymbol(trend),
+        " ",
+        Math.abs(trend),
+        "%"
+      ] }) })
+    ] }) })
+  ] });
+};
+var MetricCard_default = MetricCard2;
+var TimePickerDropdown = ({
+  value,
+  onChange,
+  placeholder = "Select time",
+  className = "",
+  disabled = false
+}) => {
+  const [isOpen, setIsOpen] = React23.useState(false);
+  const [searchTerm, setSearchTerm] = React23.useState("");
+  const dropdownRef = React23.useRef(null);
+  const inputRef = React23.useRef(null);
+  const generateTimeSlots = () => {
+    const slots = [];
+    for (let hour = 0; hour < 24; hour++) {
+      for (let minute = 0; minute < 60; minute += 15) {
+        const time24 = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+        const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+        const ampm = hour < 12 ? "AM" : "PM";
+        const time12 = `${hour12}:${minute.toString().padStart(2, "0")} ${ampm}`;
+        slots.push({ value: time24, label: time12 });
+      }
+    }
+    return slots;
+  };
+  const timeSlots = generateTimeSlots();
+  const filteredSlots = timeSlots.filter(
+    (slot) => slot.label.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+  const getDisplayValue = (value2) => {
+    if (!value2) return "";
+    const normalizedValue = value2.substring(0, 5);
+    const slot = timeSlots.find((s) => s.value === normalizedValue);
+    return slot ? slot.label : value2;
+  };
+  React23.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setSearchTerm("");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      setIsOpen(false);
+      setSearchTerm("");
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (filteredSlots.length > 0) {
+        onChange(filteredSlots[0].value);
+        setIsOpen(false);
+        setSearchTerm("");
       }
     }
-    videoProps.onEnded?.(player);
-  }, [stopCanvasRendering, videoProps]);
-  const handleSeeking = React23.useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video seeking");
-    if (crop && !player.paused()) {
-      renderFrameToCanvas();
-    }
-    videoProps.onSeeking?.(player);
-  }, [crop, renderFrameToCanvas, videoProps]);
-  const handleSeeked = React23.useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video seeked");
-    if (crop && !player.paused()) {
-      renderFrameToCanvas();
+  };
+  const handleSelect = (timeValue) => {
+    onChange(timeValue);
+    setIsOpen(false);
+    setSearchTerm("");
+  };
+  const handleToggle = () => {
+    if (disabled) return;
+    setIsOpen(!isOpen);
+    if (!isOpen) {
+      setTimeout(() => inputRef.current?.focus(), 100);
     }
-    videoProps.onSeeked?.(player);
-  }, [crop, renderFrameToCanvas, videoProps]);
-  const handleLoadedMetadata = React23.useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video metadata loaded");
-    calculateCanvasDimensions();
-    videoProps.onLoadedMetadata?.(player);
-  }, [calculateCanvasDimensions, videoProps]);
-  React23.useEffect(() => {
-    calculateCanvasDimensions();
-    const handleResize = () => {
-      calculateCanvasDimensions();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${className}`, ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleToggle,
+        disabled,
+        className: `
+          w-full px-3 py-2 text-left bg-white border border-gray-300 rounded-md shadow-sm
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+          hover:border-gray-400 transition-colors duration-200
+          ${disabled ? "bg-gray-50 cursor-not-allowed" : "cursor-pointer"}
+          ${isOpen ? "ring-2 ring-blue-500 border-blue-500" : ""}
+        `,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-4 w-4 text-gray-400" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm ${value ? "text-gray-900" : "text-gray-500"}`, children: value ? getDisplayValue(value) : placeholder })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              className: `h-4 w-4 text-gray-400 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
+            }
+          )
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          placeholder: "Search time...",
+          value: searchTerm,
+          onChange: (e) => setSearchTerm(e.target.value),
+          onKeyDown: handleKeyDown,
+          className: "w-full px-3 py-2 text-sm border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto max-h-48", children: filteredSlots.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-gray-500 text-center", children: "No times found" }) : filteredSlots.map((slot) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleSelect(slot.value),
+          className: `
+                    w-full px-3 py-2 text-left text-sm hover:bg-blue-50 hover:text-blue-600
+                    transition-colors duration-150 border-b border-gray-100 last:border-b-0
+                    ${slot.value === value ? "bg-blue-50 text-blue-600 font-medium" : "text-gray-700"}
+                  `,
+          children: slot.label
+        },
+        slot.value
+      )) })
+    ] })
+  ] });
+};
+var SilentErrorBoundary = class extends React23__namespace.default.Component {
+  constructor(props) {
+    super(props);
+    this.handleClearAndReload = () => {
+      console.log("[ErrorBoundary] User initiated reset");
+      if (typeof window !== "undefined") {
+        try {
+          localStorage.clear();
+          sessionStorage.clear();
+          console.log("[ErrorBoundary] Cleared all storage");
+        } catch (error) {
+          console.error("[ErrorBoundary] Failed to clear storage:", error);
+        }
+      }
+      window.location.href = "/login";
     };
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
+    this.state = {
+      hasError: false,
+      errorCount: 0,
+      lastError: null,
+      errorInfo: null
     };
-  }, [calculateCanvasDimensions]);
-  React23.useLayoutEffect(() => {
-    if (canvasRef.current && crop) {
-      const canvas = canvasRef.current;
-      const ctx = canvas.getContext("2d");
-      if (ctx) {
-        console.log("[CroppedVideoPlayer] Source changing - CLEARING CANVAS IMMEDIATELY");
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[ErrorBoundary] Caught render error:", {
+      error: error.message,
+      stack: error.stack,
+      componentStack: errorInfo.componentStack,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    this.setState((prev) => ({
+      errorCount: prev.errorCount + 1,
+      lastError: error,
+      errorInfo
+    }));
+    try {
+      if (typeof window !== "undefined" && window.mixpanel) {
+        window.mixpanel.track("React Render Error", {
+          error: error.message,
+          component: errorInfo.componentStack?.split("\n")[1] || "unknown",
+          errorCount: this.state.errorCount + 1
+        });
       }
+    } catch (analyticsError) {
+      console.warn("[ErrorBoundary] Analytics tracking failed:", analyticsError);
     }
-  }, [videoProps.src, crop]);
-  React23.useEffect(() => {
-    return () => {
-      stopCanvasRendering();
-    };
-  }, [stopCanvasRendering]);
-  if (!crop) {
-    return /* @__PURE__ */ jsxRuntime.jsx(VideoPlayer, { ref, ...videoProps, onClick });
   }
-  const handleClickWithIndicator = () => {
-    if (!onClick || !hiddenVideoRef.current?.player) return;
-    const player = hiddenVideoRef.current.player;
-    const willBePlaying = player.paused();
-    setIndicatorIsPlaying(willBePlaying);
-    setShowIndicator(false);
-    setTimeout(() => {
-      indicatorKeyRef.current += 1;
-      setShowIndicator(true);
-    }, 0);
-    onClick();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: videoContainerRef,
-      className: `relative w-full h-full flex items-center justify-center bg-black ${onClick ? "cursor-pointer" : ""} ${videoProps.className || ""}`,
-      onClick: handleClickWithIndicator,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-          VideoPlayer,
-          {
-            ref: hiddenVideoRef,
-            ...videoProps,
-            onReady: handleVideoReady,
-            onPlay: handleVideoPlay,
-            onPause: handleVideoPause,
-            onEnded: handleVideoEnded,
-            onSeeking: handleSeeking,
-            onSeeked: handleSeeked,
-            onLoadedMetadata: handleLoadedMetadata,
-            onLoadedData: videoProps.onLoadedData,
-            onPlaying: videoProps.onPlaying,
-            onLoadingChange: videoProps.onLoadingChange
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "canvas",
-          {
-            ref: canvasRef,
-            width: canvasDimensions.width,
-            height: canvasDimensions.height,
-            className: "max-w-full max-h-full",
-            style: {
-              display: isVideoReady ? "block" : "none",
-              width: `${canvasDimensions.width}px`,
-              height: `${canvasDimensions.height}px`
-            }
-          }
-        ),
-        !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: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            "Crop: ",
-            crop.x,
-            ",",
-            crop.y,
-            " ",
-            crop.width,
-            "x",
-            crop.height,
-            "%"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            "Canvas: ",
-            canvasDimensions.width,
-            "x",
-            canvasDimensions.height,
-            "px"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            "Processing: ",
-            isProcessing ? "Yes" : "No"
-          ] })
-        ] }),
-        onClick && /* @__PURE__ */ jsxRuntime.jsx(
-          PlayPauseIndicator,
-          {
-            show: showIndicator,
-            isPlaying: indicatorIsPlaying
-          },
-          indicatorKeyRef.current
-        )
-      ]
+  render() {
+    if (!this.state.hasError) {
+      return this.props.children;
     }
-  );
-});
-CroppedVideoPlayer.displayName = "CroppedVideoPlayer";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-screen w-screen items-center justify-center bg-slate-50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center space-y-6 text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading Dashboard..." }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Taking longer than usual..." }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            this.handleClearAndReload();
+          },
+          className: "text-xs text-gray-400 hover:text-gray-600 underline transition-colors",
+          children: "Reset and try again"
+        }
+      ) }),
+      process.env.NODE_ENV === "development" && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400 italic mt-4", children: "Check console for error details" })
+    ] }) });
+  }
+};
 var BackButton = ({
   onClick,
   text = "Back",
@@ -27731,70 +27994,6 @@ var NewClipsNotification = ({
     }
   );
 };
-var getSupabaseClient2 = () => {
-  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
-  const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
-  if (!url || !key) {
-    throw new Error("Supabase configuration missing");
-  }
-  return supabaseJs.createClient(url, key);
-};
-var getAuthToken3 = async () => {
-  try {
-    const supabase = getSupabaseClient2();
-    const { data: { session } } = await supabase.auth.getSession();
-    return session?.access_token || null;
-  } catch (error) {
-    console.error("[useWorkspaceCrop] Error getting auth token:", error);
-    return null;
-  }
-};
-function useWorkspaceCrop(workspaceId) {
-  const [crop, setCrop] = React23.useState(null);
-  const [isLoading, setIsLoading] = React23.useState(true);
-  const [error, setError] = React23.useState(null);
-  React23.useEffect(() => {
-    if (!workspaceId) {
-      setIsLoading(false);
-      return;
-    }
-    const fetchCrop = async () => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const token = await getAuthToken3();
-        if (!token) {
-          throw new Error("Authentication required");
-        }
-        const response = await fetch("/api/clips/supabase", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${token}`
-          },
-          body: JSON.stringify({
-            action: "crop",
-            workspaceId
-          })
-        });
-        if (!response.ok) {
-          throw new Error(`Failed to fetch crop: ${response.statusText}`);
-        }
-        const data = await response.json();
-        console.log(`[useWorkspaceCrop] Fetched crop for workspace ${workspaceId}:`, data.crop);
-        setCrop(data.crop);
-      } catch (err) {
-        console.error("[useWorkspaceCrop] Error fetching crop:", err);
-        setError(err instanceof Error ? err.message : "Failed to fetch crop configuration");
-        setCrop(null);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchCrop();
-  }, [workspaceId]);
-  return { crop, isLoading, error };
-}
 var parseCycleTime = (value) => {
   if (typeof value === "number" && Number.isFinite(value)) {
     return value;
@@ -29050,6 +29249,11 @@ var BottlenecksContent = ({
     return Number.isFinite(numericValue) ? numericValue : null;
   })();
   const videoRef = React23.useRef(null);
+  const videoPlayerOptions = React23.useMemo(() => ({
+    fluid: false,
+    responsive: false,
+    fill: false
+  }), []);
   const [initialFilter, setInitialFilter] = React23.useState("");
   const currentIndexRef = React23.useRef(0);
   const activeFilterRef = React23.useRef(initialFilter);
@@ -29060,6 +29264,7 @@ var BottlenecksContent = ({
   const [duration, setDuration] = React23.useState(0);
   const [currentIndex, setCurrentIndex] = React23.useState(0);
   const [currentClipId, setCurrentClipId] = React23.useState(null);
+  const [playbackSpeed, setPlaybackSpeed] = React23.useState(1);
   const [isTransitioning, setIsTransitioning] = React23.useState(false);
   const [pendingVideo, setPendingVideo] = React23.useState(null);
   const [isVideoBuffering, setIsVideoBuffering] = React23.useState(false);
@@ -29077,6 +29282,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);
@@ -29096,6 +29326,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();
       }
     }
@@ -29142,24 +29378,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]);
@@ -29211,7 +29460,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;
@@ -29301,15 +29550,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();
@@ -29479,38 +29729,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 || "",
@@ -29535,8 +29785,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
@@ -29552,7 +29802,7 @@ var BottlenecksContent = ({
           body: JSON.stringify({
             action: "clip-metadata",
             workspaceId,
-            date: date || getOperationalDate(timezone),
+            date: resolvedDate,
             shift: effectiveShift,
             category: categoryId,
             page: 1,
@@ -29597,19 +29847,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}`);
@@ -29633,21 +29886,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);
@@ -29661,7 +29924,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;
@@ -29688,7 +29951,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;
@@ -29705,8 +29968,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];
@@ -29741,7 +30014,7 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, s3ClipsService]);
+  }, [clearLoadingState, s3ClipsService, loadCategoryMetadata]);
   const handlePrevious = React23.useCallback(async () => {
     if (!isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
@@ -29758,8 +30031,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];
@@ -29790,7 +30073,7 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, s3ClipsService]);
+  }, [clearLoadingState, s3ClipsService, loadCategoryMetadata]);
   const currentVideo = React23.useMemo(() => {
     if (!filteredVideos || filteredVideos.length === 0 || currentIndex >= filteredVideos.length) {
       return null;
@@ -29803,7 +30086,10 @@ var BottlenecksContent = ({
     if (error?.isRetrying) {
       setError(null);
     }
-  }, [error]);
+    if (videoRef.current?.playbackRate && playbackSpeed !== 1) {
+      videoRef.current.playbackRate(playbackSpeed);
+    }
+  }, [error, playbackSpeed]);
   const handleVideoPlay = React23.useCallback(async (player) => {
     setIsPlaying(true);
     setIsInitialLoading(false);
@@ -29973,7 +30259,13 @@ var BottlenecksContent = ({
       player.pause();
     }
   };
-  const toggleFullscreen = React23.useCallback((e) => {
+  const handlePlaybackSpeedChange = React23.useCallback((speed) => {
+    setPlaybackSpeed(speed);
+    if (videoRef.current?.playbackRate) {
+      videoRef.current.playbackRate(speed);
+    }
+  }, []);
+  React23.useCallback((e) => {
     e.stopPropagation();
     setIsFullscreen((prev) => !prev);
   }, []);
@@ -30147,12 +30439,7 @@ var BottlenecksContent = ({
                   onLoadedData: handleLoadedData,
                   onPlaying: handleVideoPlaying,
                   onLoadingChange: handleVideoLoadingChange,
-                  options: {
-                    // Ensure full height is always visible - no cropping
-                    fluid: false,
-                    responsive: false,
-                    fill: false
-                  }
+                  options: videoPlayerOptions
                 }
               )
             }
@@ -30213,58 +30500,7 @@ var BottlenecksContent = ({
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-80 hidden sm:inline", children: currentVideo.description })
             ] }) })
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-white", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    togglePlayback();
-                  },
-                  className: "p-1.5 hover:bg-white/20 rounded-full focus:outline-none focus:ring-2 focus:ring-white/50",
-                  "aria-label": isPlaying ? "Pause" : "Play",
-                  children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1zm5 0a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1z", clipRule: "evenodd" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8.118l-.001 3.764a1 1 0 001.555.832l3.196-1.882a1 1 0 000-1.664l-3.196-1.882z", clipRule: "evenodd" }) })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-mono px-2", children: [
-                formatTime2(currentTime),
-                " / ",
-                formatTime2(duration)
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "range",
-                min: "0",
-                max: duration || 0,
-                value: currentTime,
-                onChange: (e) => {
-                  if (videoRef.current) {
-                    videoRef.current.currentTime(Number(e.target.value));
-                  }
-                },
-                className: "flex-grow mx-3 h-2.5 bg-white/30 rounded-full appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-white/50 touch-manipulation",
-                style: {
-                  WebkitAppearance: "none",
-                  appearance: "none"
-                },
-                "aria-label": "Seek slider"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: toggleFullscreen,
-                className: "p-1.5 hover:bg-white/20 rounded-full focus:outline-none focus:ring-2 focus:ring-white/50",
-                "aria-label": "Fullscreen",
-                title: "Expand to fullscreen",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-5 w-5" })
-              }
-            )
-          ] }) })
+          )
         ] }) }) }) : (
           /* Priority 5: Show "no clips found" only if we have counts and there are truly no clips for workspace */
           hasInitialLoad && Object.keys(mergedCounts).length > 0 && Object.values(mergedCounts).every((count) => count === 0) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex items-center justify-center ${triageMode ? "h-full" : "h-[calc(100%-4rem)]"}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-8", children: [
@@ -30482,11 +30718,7 @@ var BottlenecksContent = ({
                     onLoadedData: handleLoadedData,
                     onPlaying: handleVideoPlaying,
                     onLoadingChange: handleVideoLoadingChange,
-                    options: {
-                      fluid: false,
-                      responsive: false,
-                      fill: false
-                    }
+                    options: videoPlayerOptions
                   }
                 )
               }
@@ -30494,45 +30726,32 @@ var BottlenecksContent = ({
             (isTransitioning || isVideoBuffering && isInitialLoading) && !error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
             !isTransitioning && isVideoBuffering && !isInitialLoading && !error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-white", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Speed:" }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "select",
                   {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      togglePlayback();
-                    },
-                    className: "p-2 hover:bg-white/20 rounded-full focus:outline-none focus:ring-2 focus:ring-white/50",
-                    "aria-label": isPlaying ? "Pause" : "Play",
-                    children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1zm5 0a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1z", clipRule: "evenodd" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8.118l-.001 3.764a1 1 0 001.555.832l3.196-1.882a1 1 0 000-1.664l-3.196-1.882z", clipRule: "evenodd" }) })
+                    value: playbackSpeed,
+                    onChange: (e) => handlePlaybackSpeedChange(Number(e.target.value)),
+                    className: "px-2 py-1 bg-white/20 hover:bg-white/30 rounded text-sm font-medium cursor-pointer focus:outline-none focus:ring-2 focus:ring-white/50 transition-colors",
+                    "aria-label": "Playback speed",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "0.25", children: "0.25x" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "0.5", children: "0.5x" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "0.75", children: "0.75x" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "1", children: "1x" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "1.25", children: "1.25x" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "1.5", children: "1.5x" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "1.75", children: "1.75x" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "2", children: "2x" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "3", children: "3x" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "4", children: "4x" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "5", children: "5x" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "10", children: "10x" })
+                    ]
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-mono px-2", children: [
-                  formatTime2(currentTime),
-                  " / ",
-                  formatTime2(duration)
-                ] })
+                )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "range",
-                  min: "0",
-                  max: duration || 0,
-                  value: currentTime,
-                  onChange: (e) => {
-                    if (videoRef.current) {
-                      videoRef.current.currentTime(Number(e.target.value));
-                    }
-                  },
-                  className: "flex-grow mx-4 h-2.5 bg-white/30 rounded-full appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-white/50 touch-manipulation",
-                  style: {
-                    WebkitAppearance: "none",
-                    appearance: "none"
-                  },
-                  "aria-label": "Seek slider"
-                }
-              ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
@@ -37633,26 +37852,26 @@ var SingleVideoStream = ({
     const hlsStreamUrl = streamUrl || getCameraStreamUrl(workspaceName, baseUrl);
     console.log(`Using camera URL for ${workspaceName}: ${hlsStreamUrl}`);
     const mergedHlsConfig = { ...DEFAULT_HLS_CONFIG, ...hlsConfig };
-    if (Hls2__default.default.isSupported()) {
-      const hls = new Hls2__default.default(mergedHlsConfig);
+    if (Hls3__default.default.isSupported()) {
+      const hls = new Hls3__default.default(mergedHlsConfig);
       hlsRef.current = hls;
-      hls.on(Hls2__default.default.Events.MEDIA_ATTACHED, () => {
+      hls.on(Hls3__default.default.Events.MEDIA_ATTACHED, () => {
         console.log("HLS media attached");
         hls.loadSource(hlsStreamUrl);
       });
-      hls.on(Hls2__default.default.Events.MANIFEST_PARSED, () => {
+      hls.on(Hls3__default.default.Events.MANIFEST_PARSED, () => {
         console.log("HLS manifest parsed");
         attemptPlay(video);
       });
-      hls.on(Hls2__default.default.Events.ERROR, (_, data) => {
+      hls.on(Hls3__default.default.Events.ERROR, (_, data) => {
         if (data.fatal) {
           console.error("Fatal HLS error:", data.type, data.details);
           switch (data.type) {
-            case Hls2__default.default.ErrorTypes.NETWORK_ERROR:
+            case Hls3__default.default.ErrorTypes.NETWORK_ERROR:
               console.error("Fatal network error encountered");
               setError("Network error: Please check your connection");
               break;
-            case Hls2__default.default.ErrorTypes.MEDIA_ERROR:
+            case Hls3__default.default.ErrorTypes.MEDIA_ERROR:
               console.error("Fatal media error encountered, trying to recover");
               hls.recoverMediaError();
               break;
@@ -42413,9 +42632,9 @@ var MetricCards = React23.memo(({ lineInfo }) => {
       animate: "animate",
       className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 mb-2 md:h-[35vh] h-auto",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[200px] sm:h-[280px] md:h-auto lg:col-span-1 sm:col-span-2 lg:col-span-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 mb-1 sm:mb-2 text-center", children: "Line Output" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100%-1.75rem)] sm:h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 mb-2 text-center", children: "Line Output" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
             OutputProgressChart,
             {
               currentOutput: lineInfo?.metrics.current_output || 0,
@@ -42423,9 +42642,9 @@ var MetricCards = React23.memo(({ lineInfo }) => {
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[140px] sm:h-[160px] md:h-auto", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 text-center mb-2", children: "Underperforming Workspaces" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-red-600", children: lineInfo?.metrics.underperforming_workspaces }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xl sm:text-2xl md:text-2xl lg:text-3xl text-gray-500 ml-1 sm:ml-2", children: [
               "/ ",
@@ -42433,9 +42652,9 @@ var MetricCards = React23.memo(({ lineInfo }) => {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[140px] sm:h-[160px] md:h-auto", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 text-center mb-2", children: "Average Efficiency" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold ${(lineInfo?.metrics.avg_efficiency || 0) >= 90 ? "text-green-600" : (lineInfo?.metrics.avg_efficiency || 0) >= 70 ? "text-yellow-600" : "text-red-600"}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold ${(lineInfo?.metrics.avg_efficiency || 0) >= 90 ? "text-green-600" : (lineInfo?.metrics.avg_efficiency || 0) >= 70 ? "text-yellow-600" : "text-red-600"}`, children: [
             lineInfo?.metrics.avg_efficiency.toFixed(1),
             "%"
           ] }) })
@@ -51992,6 +52211,7 @@ exports.CardTitle = CardTitle2;
 exports.ClipFilterProvider = ClipFilterProvider;
 exports.CompactWorkspaceHealthCard = CompactWorkspaceHealthCard;
 exports.CongratulationsOverlay = CongratulationsOverlay;
+exports.CroppedHlsVideoPlayer = CroppedHlsVideoPlayer;
 exports.CroppedVideoPlayer = CroppedVideoPlayer;
 exports.CycleTimeChart = CycleTimeChart;
 exports.CycleTimeOverTimeChart = CycleTimeOverTimeChart;
@@ -52032,6 +52252,7 @@ exports.Header = Header;
 exports.HealthStatusGrid = HealthStatusGrid;
 exports.HealthStatusIndicator = HealthStatusIndicator;
 exports.HelpView = HelpView_default;
+exports.HlsVideoPlayer = HlsVideoPlayer;
 exports.HomeView = HomeView_default;
 exports.HourlyOutputChart = HourlyOutputChart2;
 exports.ISTTimer = ISTTimer_default;