@optifye/dashboard-core 6.9.7 → 6.9.9

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);
@@ -9606,9 +9603,6 @@ var getAllWorkspaceDisplayNamesAsync = async (companyId, lineId) => {
   Object.entries(runtimeWorkspaceDisplayNames).forEach(([lineId2, lineNames]) => {
     Object.entries(lineNames).forEach(([workspaceId, displayName]) => {
       allNames[`${lineId2}_${workspaceId}`] = displayName;
-      if (!allNames[workspaceId]) {
-        allNames[workspaceId] = displayName;
-      }
     });
   });
   return allNames;
@@ -14087,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,
@@ -14101,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();
@@ -23105,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)" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.PieChart, { children: /* @__PURE__ */ jsxRuntime.jsx(
       recharts.Pie,
       {
@@ -24737,7 +24731,8 @@ var VideoGridView = React23__namespace.default.memo(({
                 displayName: (
                   // Create line-aware lookup key: lineId_workspaceName
                   // This ensures correct mapping when multiple lines have same workspace names
-                  displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || displayNames[workspace.workspace_name] || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id)
+                  displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || // Always pass line_id to fallback to ensure correct mapping per line
+                  getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id)
                 ),
                 useRAF: canvasConfig?.useRAF,
                 compact: !selectedLine,
@@ -24787,7 +24782,8 @@ var MapGridView = React23__namespace.default.memo(({
       efficiency: workspace.efficiency,
       action_count: workspace.action_count
     });
-    const displayName = displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || displayNames[workspace.workspace_name] || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
+    const displayName = displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || // Always pass line_id to fallback to ensure correct mapping per line
+    getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
     const navParams = getWorkspaceNavigationParams(workspaceId, displayName, workspace.line_id);
     router$1.push(`/workspace/${workspaceId}${navParams}`);
   }, [router$1, displayNames]);
@@ -24816,7 +24812,8 @@ var MapGridView = React23__namespace.default.memo(({
           if (!workspace) return null;
           const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
           getPerformanceColor(workspace.efficiency);
-          const workspaceDisplayName = displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || displayNames[workspace.workspace_name] || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
+          const workspaceDisplayName = displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || // Always pass line_id to fallback to ensure correct mapping per line
+          getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
           return /* @__PURE__ */ jsxRuntime.jsx(
             motion.div,
             {
@@ -26054,12 +26051,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,473 +26063,6 @@ 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
-}) => {
-  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("");
-      }
-    }
-  };
-  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";
-    };
-    this.state = {
-      hasError: false,
-      errorCount: 0,
-      lastError: null,
-      errorInfo: null
-    };
-  }
-  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,
@@ -26601,37 +26125,33 @@ var PlayPauseIndicator = ({
   );
 };
 var ERROR_MAPPING = {
-  1: {
-    // MEDIA_ERR_ABORTED
-    code: 1,
-    type: "recoverable" /* RECOVERABLE */,
-    message: "Video loading was interrupted",
-    canRetry: true
-  },
-  2: {
-    // MEDIA_ERR_NETWORK
+  "networkError": {
     code: 2,
-    type: "recoverable" /* RECOVERABLE */,
+    type: "recoverable",
     message: "Network error - please check your internet connection",
     canRetry: true
   },
-  3: {
-    // MEDIA_ERR_DECODE
+  "mediaError": {
     code: 3,
-    type: "non_recoverable" /* NON_RECOVERABLE */,
+    type: "non_recoverable",
     message: "Stream corrupted due to internet connection",
     canRetry: false
   },
-  4: {
-    // MEDIA_ERR_SRC_NOT_SUPPORTED
+  "muxError": {
+    code: 3,
+    type: "non_recoverable",
+    message: "Error processing media stream",
+    canRetry: false
+  },
+  "otherError": {
     code: 4,
-    type: "non_recoverable" /* NON_RECOVERABLE */,
+    type: "non_recoverable",
     message: "Video format not supported by your browser. Please use Google Chrome.",
     canRetry: false
   }
 };
-var videoPlayerStyles = `
-  .video-player-container {
+var hlsVideoPlayerStyles = `
+  .hls-video-player-container {
     width: 100%;
     height: 100%;
     background-color: #000;
@@ -26639,32 +26159,18 @@ var videoPlayerStyles = `
     align-items: center;
     justify-content: center;
   }
-  
-  /* Center the video player and maintain aspect ratio */
-  .video-js {
+
+  /* Center the video and maintain aspect ratio */
+  .hls-video-element {
     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 {
+  .hls-video-player-loading {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -26673,15 +26179,41 @@ var videoPlayerStyles = `
   }
 `;
 if (typeof document !== "undefined") {
-  const styleId = "video-player-custom-styles";
+  const styleId = "hls-video-player-custom-styles";
   if (!document.getElementById(styleId)) {
     const style = document.createElement("style");
     style.id = styleId;
-    style.textContent = videoPlayerStyles;
+    style.textContent = hlsVideoPlayerStyles;
     document.head.appendChild(style);
   }
 }
-var VideoPlayer = React23__namespace.default.forwardRef(({
+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,
@@ -26690,7 +26222,9 @@ var VideoPlayer = React23__namespace.default.forwardRef(({
   muted = false,
   playsInline = true,
   className = "",
+  hlsConfig = {},
   options = {},
+  // Backward compatibility with Video.js
   externalLoadingControl = false,
   onLoadingChange,
   onReady,
@@ -26708,321 +26242,396 @@ var VideoPlayer = React23__namespace.default.forwardRef(({
   onSeeked,
   onClick
 }, ref) => {
+  const videoContainerRef = React23.useRef(null);
   const videoRef = React23.useRef(null);
-  const playerRef = 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 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", () => {
-      setIsLoading(true);
-      onLoadingChange?.(true);
-      onLoadStart?.(player);
-    });
-    player.on("loadeddata", () => {
-      setIsLoading(false);
-      onLoadingChange?.(false);
-      onLoadedData?.(player);
-    });
-    player.on("waiting", () => {
-      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;
-        }
-      }
-      player.src({
-        src: videoSrc,
-        type: isHLS ? "application/x-mpegURL" : "video/mp4"
-      });
-    }
+  const eventCallbacksRef = React23.useRef({
+    onReady,
+    onPlay,
+    onPause,
+    onPlaying,
+    onTimeUpdate,
+    onDurationChange,
+    onEnded,
+    onError,
+    onLoadStart,
+    onLoadedMetadata,
+    onLoadedData,
+    onSeeking,
+    onSeeked,
+    onLoadingChange
+  });
+  React23.useEffect(() => {
+    eventCallbacksRef.current = {
+      onReady,
+      onPlay,
+      onPause,
+      onPlaying,
+      onTimeUpdate,
+      onDurationChange,
+      onEnded,
+      onError,
+      onLoadStart,
+      onLoadedMetadata,
+      onLoadedData,
+      onSeeking,
+      onSeeked,
+      onLoadingChange
+    };
   }, [
-    src,
-    defaultOptions,
     onReady,
     onPlay,
     onPause,
+    onPlaying,
     onTimeUpdate,
     onDurationChange,
     onEnded,
     onError,
     onLoadStart,
     onLoadedMetadata,
+    onLoadedData,
     onSeeking,
-    onSeeked
+    onSeeked,
+    onLoadingChange
   ]);
+  const stableHlsConfigRef = React23.useRef(hlsConfig);
+  const stableOptionsRef = React23.useRef(options);
+  const configSignatureRef = React23.useRef("");
+  const [configVersion, setConfigVersion] = React23.useState(0);
   React23.useEffect(() => {
-    if (playerRef.current && src) {
-      const isHLS = src.endsWith(".m3u8") || src.startsWith("#EXTM3U");
-      let videoSrc = src;
-      let blobUrl = null;
+    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()
+    };
+  }, [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) {
-            videoSrc = `/api/clips/playlist/${clipIdMatch[1]}`;
-            console.log(`[VideoPlayer] Safari detected (${browserName}) - using playlist proxy URL for source update:`, videoSrc);
+            const proxyUrl = `/api/clips/playlist/${clipIdMatch[1]}`;
+            console.log(`[HlsVideoPlayer] Safari detected (${browserName}) - using playlist proxy URL:`, proxyUrl);
+            video.src = proxyUrl;
           } else {
-            console.warn("[VideoPlayer] Safari detected but no clip ID found in playlist (source update), trying blob URL fallback");
+            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" });
-            blobUrl = URL.createObjectURL(blob);
-            videoSrc = blobUrl;
+            const blobUrl = URL.createObjectURL(blob);
+            blobUrlRef.current = blobUrl;
+            video.src = blobUrl;
           }
-        } else {
+        } else if (Hls3__default.default.isSupported()) {
           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`);
+          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);
         }
-      }
-      playerRef.current.src({
-        src: videoSrc,
-        type: isHLS ? "application/x-mpegURL" : "video/mp4"
-      });
-      return () => {
-        if (blobUrl) {
-          URL.revokeObjectURL(blobUrl);
+      } 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;
         }
-      };
+      }
+    } else {
+      video.src = src;
     }
-  }, [src]);
+    const handleCanPlay = () => {
+      if (!hlsRef.current) {
+        setIsReady(true);
+        onReady?.(player);
+      }
+    };
+    const handlePlay = () => eventCallbacksRef.current.onPlay?.(player);
+    const handlePause = () => eventCallbacksRef.current.onPause?.(player);
+    const handlePlaying = () => {
+      setIsLoading(false);
+      eventCallbacksRef.current.onLoadingChange?.(false);
+      eventCallbacksRef.current.onPlaying?.(player);
+    };
+    const handleTimeUpdate = () => {
+      const currentTime2 = video.currentTime || 0;
+      eventCallbacksRef.current.onTimeUpdate?.(player, currentTime2);
+    };
+    const handleDurationChange = () => {
+      const duration2 = video.duration || 0;
+      eventCallbacksRef.current.onDurationChange?.(player, duration2);
+    };
+    const handleEnded = () => eventCallbacksRef.current.onEnded?.(player);
+    const handleLoadStart = () => {
+      setIsLoading(true);
+      eventCallbacksRef.current.onLoadingChange?.(true);
+      eventCallbacksRef.current.onLoadStart?.(player);
+    };
+    const handleLoadedMetadata = () => eventCallbacksRef.current.onLoadedMetadata?.(player);
+    const handleLoadedData = () => {
+      setIsLoading(false);
+      eventCallbacksRef.current.onLoadingChange?.(false);
+      eventCallbacksRef.current.onLoadedData?.(player);
+    };
+    const handleWaiting = () => {
+      setIsLoading(true);
+      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);
+      }
+    };
+    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,
+    cleanupBlobUrl,
+    playerLikeObject,
+    configVersion
+  ]);
   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 +26639,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 +26656,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 +26695,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 +26705,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 +26742,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 +26760,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 +26849,24 @@ 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) {
@@ -27214,10 +26877,10 @@ var CroppedVideoPlayer = React23.forwardRef(({
         ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
       }
     }
-    videoProps.onPause?.(player);
-  }, [stopCanvasRendering, videoProps]);
+    onPauseProp?.(player);
+  }, [stopCanvasRendering, onPauseProp]);
   const handleVideoEnded = React23.useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video ended, CLEARING canvas");
+    console.log("[CroppedHlsVideoPlayer] Video ended, CLEARING canvas");
     stopCanvasRendering();
     setIsProcessing(false);
     if (canvasRef.current) {
@@ -27228,27 +26891,27 @@ var CroppedVideoPlayer = React23.forwardRef(({
         ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
       }
     }
-    videoProps.onEnded?.(player);
-  }, [stopCanvasRendering, videoProps]);
+    onEndedProp?.(player);
+  }, [stopCanvasRendering, onEndedProp]);
   const handleSeeking = React23.useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video seeking");
-    if (crop && !player.paused()) {
+    console.log("[CroppedHlsVideoPlayer] Video seeking");
+    if (crop && !videoElementRef.current?.paused) {
       renderFrameToCanvas();
     }
-    videoProps.onSeeking?.(player);
-  }, [crop, renderFrameToCanvas, videoProps]);
+    onSeekingProp?.(player);
+  }, [crop, renderFrameToCanvas, onSeekingProp]);
   const handleSeeked = React23.useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video seeked");
-    if (crop && !player.paused()) {
+    console.log("[CroppedHlsVideoPlayer] Video seeked");
+    if (crop && !videoElementRef.current?.paused) {
       renderFrameToCanvas();
     }
-    videoProps.onSeeked?.(player);
-  }, [crop, renderFrameToCanvas, videoProps]);
+    onSeekedProp?.(player);
+  }, [crop, renderFrameToCanvas, onSeekedProp]);
   const handleLoadedMetadata = React23.useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video metadata loaded");
+    console.log("[CroppedHlsVideoPlayer] Video metadata loaded");
     calculateCanvasDimensions();
-    videoProps.onLoadedMetadata?.(player);
-  }, [calculateCanvasDimensions, videoProps]);
+    onLoadedMetadataProp?.(player);
+  }, [calculateCanvasDimensions, onLoadedMetadataProp]);
   React23.useEffect(() => {
     calculateCanvasDimensions();
     const handleResize = () => {
@@ -27264,25 +26927,25 @@ var CroppedVideoPlayer = React23.forwardRef(({
       const canvas = canvasRef.current;
       const ctx = canvas.getContext("2d");
       if (ctx) {
-        console.log("[CroppedVideoPlayer] Source changing - CLEARING CANVAS IMMEDIATELY");
+        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);
       }
     }
-  }, [videoProps.src, crop]);
+  }, [videoSrc, crop]);
   React23.useEffect(() => {
     return () => {
       stopCanvasRendering();
     };
   }, [stopCanvasRendering]);
   if (!crop) {
-    return /* @__PURE__ */ jsxRuntime.jsx(VideoPlayer, { ref, ...videoProps, onClick });
+    return /* @__PURE__ */ jsxRuntime.jsx(HlsVideoPlayer, { ref, ...videoProps, onClick });
   }
   const handleClickWithIndicator = () => {
-    if (!onClick || !hiddenVideoRef.current?.player) return;
-    const player = hiddenVideoRef.current.player;
-    const willBePlaying = player.paused();
+    if (!onClick || !hiddenVideoRef.current?.video) return;
+    const video = hiddenVideoRef.current.video;
+    const willBePlaying = video.paused;
     setIndicatorIsPlaying(willBePlaying);
     setShowIndicator(false);
     setTimeout(() => {
@@ -27295,11 +26958,11 @@ var CroppedVideoPlayer = React23.forwardRef(({
     "div",
     {
       ref: videoContainerRef,
-      className: `relative w-full h-full flex items-center justify-center bg-black ${onClick ? "cursor-pointer" : ""} ${videoProps.className || ""}`,
+      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(
-          VideoPlayer,
+          HlsVideoPlayer,
           {
             ref: hiddenVideoRef,
             ...videoProps,
@@ -27366,7 +27029,539 @@ var CroppedVideoPlayer = React23.forwardRef(({
     }
   );
 });
-CroppedVideoPlayer.displayName = "CroppedVideoPlayer";
+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("");
+      }
+    }
+  };
+  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";
+    };
+    this.state = {
+      hasError: false,
+      errorCount: 0,
+      lastError: null,
+      errorInfo: null
+    };
+  }
+  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 BackButton = ({
   onClick,
   text = "Back",
@@ -27731,70 +27926,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 +29181,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 +29196,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);
@@ -29803,7 +29940,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 +30113,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 +30293,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 +30354,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 +30572,7 @@ var BottlenecksContent = ({
                     onLoadedData: handleLoadedData,
                     onPlaying: handleVideoPlaying,
                     onLoadingChange: handleVideoLoadingChange,
-                    options: {
-                      fluid: false,
-                      responsive: false,
-                      fill: false
-                    }
+                    options: videoPlayerOptions
                   }
                 )
               }
@@ -30494,45 +30580,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 +37706,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 +42486,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 +42496,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 +42506,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 +52065,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 +52106,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;