@optifye/dashboard-core 4.2.7 → 4.2.8

package/dist/index.js

@@ -7,8 +7,8 @@ var dateFnsTz = require('date-fns-tz');
 var dateFns = require('date-fns');
 var mixpanel = require('mixpanel-browser');
 var supabaseJs = require('@supabase/supabase-js');
-var useSWR = require('swr');
 var Hls2 = require('hls.js');
+var useSWR = require('swr');
 var motionUtils = require('motion-utils');
 var motionDom = require('motion-dom');
 var recharts = require('recharts');
@@ -46,8 +46,8 @@ function _interopNamespace(e) {
 
 var React14__namespace = /*#__PURE__*/_interopNamespace(React14);
 var mixpanel__default = /*#__PURE__*/_interopDefault(mixpanel);
-var useSWR__default = /*#__PURE__*/_interopDefault(useSWR);
 var Hls2__default = /*#__PURE__*/_interopDefault(Hls2);
+var useSWR__default = /*#__PURE__*/_interopDefault(useSWR);
 var html2canvas__default = /*#__PURE__*/_interopDefault(html2canvas);
 var jsPDF__default = /*#__PURE__*/_interopDefault(jsPDF);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
@@ -154,6 +154,12 @@ var DEFAULT_ANALYTICS_CONFIG = {
 var DEFAULT_AUTH_CONFIG = {
   // Defaults related to auth providers, redirects etc.
 };
+var DEFAULT_VIDEO_CONFIG = {
+  canvasConfig: {
+    fps: 30,
+    useRAF: true
+  }
+};
 var LINE_1_UUID = "910a224b-0abc-459a-babb-4c899824cfe7";
 var DEFAULT_CONFIG = {
   apiBaseUrl: void 0,
@@ -167,7 +173,8 @@ var DEFAULT_CONFIG = {
   // Add entity config here
   shiftConfig: DEFAULT_SHIFT_CONFIG,
   workspaceConfig: DEFAULT_WORKSPACE_CONFIG,
-  endpoints: DEFAULT_ENDPOINTS_CONFIG
+  endpoints: DEFAULT_ENDPOINTS_CONFIG,
+  videoConfig: DEFAULT_VIDEO_CONFIG
 };
 
 // src/lib/utils/config.ts
@@ -299,6 +306,10 @@ function useCustomConfig() {
   const { customConfig } = useDashboardConfig();
   return customConfig ?? {};
 }
+function useVideoConfig() {
+  const { videoConfig } = useDashboardConfig();
+  return videoConfig ?? DEFAULT_VIDEO_CONFIG;
+}
 
 // src/lib/internal/supabaseClientInstance.ts
 var supabaseInstance = null;
@@ -4247,6 +4258,351 @@ var useWorkspaceOperators = (workspaceId, options) => {
     refetch: fetchData
   };
 };
+
+// src/lib/utils/dashboardReload.ts
+var createThrottledReload = (interval = 5e3) => {
+  let last = 0;
+  let queued = false;
+  const doReload = () => {
+    if (typeof window !== "undefined") {
+      window.location.reload();
+    }
+  };
+  return () => {
+    const now2 = Date.now();
+    if (now2 - last >= interval) {
+      last = now2;
+      doReload();
+    } else if (!queued) {
+      queued = true;
+      setTimeout(() => {
+        queued = false;
+        last = Date.now();
+        doReload();
+      }, interval - (now2 - last));
+    }
+  };
+};
+var throttledReloadDashboard = createThrottledReload(5e3);
+
+// src/lib/hooks/useHlsStream.ts
+var HLS_CONFIG = {
+  maxBufferLength: 8,
+  maxMaxBufferLength: 15,
+  lowLatencyMode: false,
+  enableWorker: true,
+  // Retry + timeout tuned for quick recovery
+  manifestLoadingMaxRetry: 4,
+  levelLoadingMaxRetry: 3,
+  fragLoadingMaxRetry: 4,
+  manifestLoadingRetryDelay: 500,
+  levelLoadingRetryDelay: 500,
+  fragLoadingRetryDelay: 500,
+  manifestLoadingTimeOut: 1e4,
+  levelLoadingTimeOut: 8e3,
+  fragLoadingTimeOut: 1e4,
+  liveSyncDurationCount: 2
+  // Follow live edge aggressively
+};
+function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
+  const [restartKey, setRestartKey] = React14.useState(0);
+  const hlsRef = React14.useRef(null);
+  const stallCheckIntervalRef = React14.useRef(null);
+  const noProgressTimerRef = React14.useRef(null);
+  const lastTimeUpdateRef = React14.useRef(0);
+  const softRestartCountRef = React14.useRef(0);
+  const isNativeHlsRef = React14.useRef(false);
+  const waitingTimerRef = React14.useRef(null);
+  const cleanup = () => {
+    if (stallCheckIntervalRef.current) {
+      clearInterval(stallCheckIntervalRef.current);
+      stallCheckIntervalRef.current = null;
+    }
+    if (noProgressTimerRef.current) {
+      clearTimeout(noProgressTimerRef.current);
+      noProgressTimerRef.current = null;
+    }
+    if (waitingTimerRef.current) {
+      clearTimeout(waitingTimerRef.current);
+      waitingTimerRef.current = null;
+    }
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+    const video = videoRef.current;
+    if (video) {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+      video.removeEventListener("waiting", handleWaiting);
+      video.removeEventListener("timeupdate", handleTimeUpdate);
+      video.removeEventListener("error", handleNativeError);
+    }
+    lastTimeUpdateRef.current = 0;
+    softRestartCountRef.current = 0;
+  };
+  const seekToLiveEdge = () => {
+    const hls = hlsRef.current;
+    const video = videoRef.current;
+    if (!hls || !video) return;
+    if (hls.liveSyncPosition !== null && hls.liveSyncPosition !== void 0) {
+      video.currentTime = hls.liveSyncPosition;
+    } else if (hls.levels?.[hls.currentLevel]?.details) {
+      const levelDetails = hls.levels[hls.currentLevel].details;
+      if (levelDetails && levelDetails.edge !== void 0) {
+        video.currentTime = Math.max(0, levelDetails.edge - 5);
+      }
+    }
+  };
+  const softRestart = (reason) => {
+    console.warn(`[HLS] Soft restart: ${reason}`);
+    const hls = hlsRef.current;
+    if (!hls) return;
+    try {
+      hls.stopLoad();
+      hls.startLoad(-1);
+      seekToLiveEdge();
+      softRestartCountRef.current++;
+      if (softRestartCountRef.current >= 5) {
+        hardRestart(`${reason} (escalated after ${softRestartCountRef.current} soft restarts)`);
+      }
+    } catch (error) {
+      console.error("[HLS] Soft restart failed:", error);
+      hardRestart(`${reason} (soft restart error)`);
+    }
+  };
+  const hardRestart = (reason) => {
+    console.warn(`[HLS] Hard restart: ${reason}`);
+    cleanup();
+    setRestartKey((k) => k + 1);
+    softRestartCountRef.current = 0;
+    if (reason.includes("hard restart") || reason.includes("native video error")) {
+      if (onFatalError) {
+        onFatalError();
+      } else {
+        throttledReloadDashboard();
+      }
+    }
+  };
+  const handleWaiting = () => {
+    if (isNativeHlsRef.current) return;
+    console.log("[HLS] Video waiting (buffer underrun)");
+    if (waitingTimerRef.current) {
+      clearTimeout(waitingTimerRef.current);
+    }
+    waitingTimerRef.current = setTimeout(() => {
+      const video = videoRef.current;
+      if (video && video.readyState < 3) {
+        softRestart("waiting timeout");
+      }
+    }, 1e4);
+  };
+  const handleTimeUpdate = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    lastTimeUpdateRef.current = video.currentTime;
+    if (waitingTimerRef.current) {
+      clearTimeout(waitingTimerRef.current);
+      waitingTimerRef.current = null;
+    }
+  };
+  const handleNativeError = () => {
+    console.error("[HLS] Native video error");
+    hardRestart("native video error");
+  };
+  const startStallDetection = () => {
+    if (isNativeHlsRef.current) return;
+    stallCheckIntervalRef.current = setInterval(() => {
+      const video = videoRef.current;
+      if (!video || video.paused || video.ended) return;
+      const currentTime = video.currentTime;
+      const lastTime = lastTimeUpdateRef.current;
+      if (Math.abs(currentTime - lastTime) < 0.1 && video.readyState >= 2) {
+        console.warn("[HLS] Playback stall detected");
+        if (!noProgressTimerRef.current) {
+          noProgressTimerRef.current = setTimeout(() => {
+            softRestart("playback stall");
+            noProgressTimerRef.current = null;
+          }, 8e3);
+        }
+      } else {
+        if (noProgressTimerRef.current) {
+          clearTimeout(noProgressTimerRef.current);
+          noProgressTimerRef.current = null;
+        }
+      }
+    }, 7e3);
+  };
+  React14.useEffect(() => {
+    if (!src || !shouldPlay) {
+      cleanup();
+      return;
+    }
+    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);
+      hlsRef.current = hls;
+      hls.attachMedia(video);
+      hls.loadSource(src);
+      hls.on(Hls2__default.default.Events.ERROR, (_, data) => {
+        if (!data.fatal) return;
+        console.error("[HLS] Fatal error:", data.type, data.details);
+        if (data.response?.code === 404) {
+          hardRestart("404 hard restart");
+          return;
+        }
+        switch (data.type) {
+          case Hls2__default.default.ErrorTypes.NETWORK_ERROR:
+          case Hls2__default.default.ErrorTypes.MEDIA_ERROR:
+            softRestart(`${data.type}: ${data.details}`);
+            break;
+          default:
+            hardRestart(`Fatal ${data.type}: ${data.details}`);
+            break;
+        }
+      });
+      hls.on(Hls2__default.default.Events.MANIFEST_PARSED, () => {
+        video.play().catch((err) => {
+          console.error("[HLS] Play failed:", err);
+        });
+      });
+      video.addEventListener("waiting", handleWaiting);
+      video.addEventListener("timeupdate", handleTimeUpdate);
+      startStallDetection();
+    } else if (isNativeHlsRef.current) {
+      console.log("[HLS] Using native HLS");
+      video.src = src;
+      video.addEventListener("error", handleNativeError);
+      video.play().catch((err) => {
+        console.error("[HLS] Native play failed:", err);
+      });
+    } else {
+      console.error("[HLS] HLS not supported");
+    }
+    return cleanup;
+  }, [src, shouldPlay, restartKey, onFatalError]);
+  return {
+    restartKey,
+    isNativeHls: isNativeHlsRef.current
+  };
+}
+function useHlsStreamWithCropping(videoRef, canvasRef, options) {
+  const { src, shouldPlay, cropping, canvasFps = 30, useRAF = true, onFatalError } = options;
+  const animationFrameRef = React14.useRef(null);
+  const intervalRef = React14.useRef(null);
+  const isDrawingRef = React14.useRef(false);
+  const hlsState = useHlsStream(videoRef, { src, shouldPlay, onFatalError });
+  const calculateCropRect = React14.useCallback((video, cropping2) => {
+    const videoWidth = video.videoWidth;
+    const videoHeight = video.videoHeight;
+    const sx = cropping2.x / 100 * videoWidth;
+    const sy = cropping2.y / 100 * videoHeight;
+    const sw = cropping2.width / 100 * videoWidth;
+    const sh = cropping2.height / 100 * videoHeight;
+    return { sx, sy, sw, sh };
+  }, []);
+  const drawFrame = React14.useCallback(() => {
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    if (!video || !canvas || !cropping) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    if (video.readyState < 2) return;
+    try {
+      const videoWidth = video.videoWidth;
+      const videoHeight = video.videoHeight;
+      if (!videoWidth || !videoHeight) return;
+      const { sx, sy, sw, sh } = calculateCropRect(video, cropping);
+      const canvasContainer = canvas.parentElement;
+      if (canvasContainer) {
+        const containerWidth = canvasContainer.clientWidth;
+        const containerHeight = canvasContainer.clientHeight;
+        if (canvas.width !== containerWidth || canvas.height !== containerHeight) {
+          canvas.width = containerWidth;
+          canvas.height = containerHeight;
+        }
+      }
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(
+        video,
+        sx,
+        sy,
+        sw,
+        sh,
+        // Source rectangle (cropped portion)
+        0,
+        0,
+        canvas.width,
+        canvas.height
+        // Destination rectangle (full canvas)
+      );
+    } catch (err) {
+      console.warn("Canvas drawing error:", err);
+    }
+  }, [videoRef, canvasRef, cropping, calculateCropRect]);
+  const startCanvasRendering = React14.useCallback(() => {
+    if (isDrawingRef.current) return;
+    isDrawingRef.current = true;
+    if (useRAF) {
+      const animate = () => {
+        drawFrame();
+        animationFrameRef.current = requestAnimationFrame(animate);
+      };
+      animate();
+    } else {
+      const frameInterval = 1e3 / canvasFps;
+      intervalRef.current = setInterval(drawFrame, frameInterval);
+    }
+  }, [drawFrame, canvasFps, useRAF]);
+  const stopCanvasRendering = React14.useCallback(() => {
+    isDrawingRef.current = false;
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  React14.useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !cropping || !shouldPlay) {
+      stopCanvasRendering();
+      return;
+    }
+    const handlePlay = () => {
+      if (cropping) {
+        startCanvasRendering();
+      }
+    };
+    const handlePause = () => {
+      stopCanvasRendering();
+    };
+    const handleEnded = () => {
+      stopCanvasRendering();
+    };
+    video.addEventListener("play", handlePlay);
+    video.addEventListener("pause", handlePause);
+    video.addEventListener("ended", handleEnded);
+    if (!video.paused && video.readyState >= 2) {
+      startCanvasRendering();
+    }
+    return () => {
+      stopCanvasRendering();
+      video.removeEventListener("play", handlePlay);
+      video.removeEventListener("pause", handlePause);
+      video.removeEventListener("ended", handleEnded);
+    };
+  }, [videoRef, cropping, shouldPlay, startCanvasRendering, stopCanvasRendering]);
+  return {
+    ...hlsState,
+    isCanvasRendering: isDrawingRef.current
+  };
+}
 function useThreads() {
   const supabase = _getSupabaseInstance();
   const fetcher = async (key) => {
@@ -4904,349 +5260,118 @@ function useNavigation(customNavigate) {
       };
       attemptNavigation();
     },
-    [router$1, customNavigate]
-  );
-  return {
-    pathname,
-    query,
-    isReady,
-    activeLineId,
-    activeWorkspaceId,
-    isActive,
-    isInSection,
-    isLineView,
-    isWorkspaceView,
-    goToDashboard,
-    goToWorkspace,
-    goToLine,
-    goToTargets,
-    goToShifts,
-    goToLeaderboard,
-    goToFactoryView,
-    goToProfile,
-    navigate
-  };
-}
-function useWorkspaceNavigation() {
-  const { defaultTimezone } = useDateTimeConfig();
-  const getWorkspaceNavigationParams3 = React14.useCallback(
-    (workspaceId, options) => {
-      let dateToUse = options?.date;
-      if (!dateToUse && options?.useCurrentDate) {
-        dateToUse = getOperationalDate(defaultTimezone || "UTC");
-      }
-      return {
-        workspaceId,
-        date: dateToUse,
-        shift: options?.shift,
-        sourceType: options?.sourceType
-      };
-    },
-    [defaultTimezone]
-  );
-  return {
-    getWorkspaceNavigationParams: getWorkspaceNavigationParams3
-  };
-}
-function useDateFormatter() {
-  const { defaultTimezone, defaultLocale, dateFormatOptions, timeFormatOptions, dateTimeFormatOptions } = useDateTimeConfig();
-  const formatDate = React14.useCallback(
-    (date, formatString) => {
-      const dateObj = typeof date === "string" ? dateFns.parseISO(date) : date;
-      if (!dateFns.isValid(dateObj)) return "Invalid Date";
-      const tz = defaultTimezone || "UTC";
-      if (formatString) {
-        return dateFnsTz.formatInTimeZone(dateObj, tz, formatString);
-      }
-      const effectiveOptions = dateFormatOptions || { year: "numeric", month: "short", day: "numeric" };
-      return new Intl.DateTimeFormat(defaultLocale || "en-US", effectiveOptions).format(dateObj);
-    },
-    [defaultTimezone, defaultLocale, dateFormatOptions]
-  );
-  const formatTime2 = React14.useCallback(
-    (date, formatString) => {
-      const dateObj = typeof date === "string" ? dateFns.parseISO(date) : date;
-      if (!dateFns.isValid(dateObj)) return "Invalid Time";
-      const tz = defaultTimezone || "UTC";
-      if (formatString) {
-        return dateFnsTz.formatInTimeZone(dateObj, tz, formatString);
-      }
-      const effectiveOptions = timeFormatOptions || { hour: "numeric", minute: "numeric" };
-      return new Intl.DateTimeFormat(defaultLocale || "en-US", effectiveOptions).format(dateObj);
-    },
-    [defaultTimezone, defaultLocale, timeFormatOptions]
-  );
-  const formatDateTime = React14.useCallback(
-    (date, formatString) => {
-      const dateObj = typeof date === "string" ? dateFns.parseISO(date) : date;
-      if (!dateFns.isValid(dateObj)) return "Invalid Date/Time";
-      const tz = defaultTimezone || "UTC";
-      if (formatString) {
-        return dateFnsTz.formatInTimeZone(dateObj, tz, formatString);
-      }
-      const effectiveOptions = dateTimeFormatOptions || { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric" };
-      return new Intl.DateTimeFormat(defaultLocale || "en-US", effectiveOptions).format(dateObj);
-    },
-    [defaultTimezone, defaultLocale, dateTimeFormatOptions]
-  );
-  const getNow = React14.useCallback(() => {
-    return /* @__PURE__ */ new Date();
-  }, []);
-  return {
-    formatDate,
-    formatTime: formatTime2,
-    formatDateTime,
-    getNow,
-    timezone: defaultTimezone || "UTC",
-    locale: defaultLocale || "en-US"
-  };
-}
-var useFormatNumber = () => {
-  const { defaultLocale } = useDateTimeConfig();
-  const formatNumber = React14.useCallback(
-    (value, options) => {
-      try {
-        return new Intl.NumberFormat(defaultLocale || "en-US", options).format(value);
-      } catch (error) {
-        console.error("Error formatting number:", error);
-        return String(value);
-      }
-    },
-    [defaultLocale]
-  );
-  return { formatNumber };
-};
-
-// src/lib/utils/dashboardReload.ts
-var createThrottledReload = (interval = 5e3) => {
-  let last = 0;
-  let queued = false;
-  const doReload = () => {
-    if (typeof window !== "undefined") {
-      window.location.reload();
-    }
-  };
-  return () => {
-    const now2 = Date.now();
-    if (now2 - last >= interval) {
-      last = now2;
-      doReload();
-    } else if (!queued) {
-      queued = true;
-      setTimeout(() => {
-        queued = false;
-        last = Date.now();
-        doReload();
-      }, interval - (now2 - last));
-    }
-  };
-};
-var throttledReloadDashboard = createThrottledReload(5e3);
-
-// src/lib/hooks/useHlsStream.ts
-var HLS_CONFIG = {
-  maxBufferLength: 8,
-  maxMaxBufferLength: 15,
-  lowLatencyMode: false,
-  enableWorker: true,
-  // Retry + timeout tuned for quick recovery
-  manifestLoadingMaxRetry: 4,
-  levelLoadingMaxRetry: 3,
-  fragLoadingMaxRetry: 4,
-  manifestLoadingRetryDelay: 500,
-  levelLoadingRetryDelay: 500,
-  fragLoadingRetryDelay: 500,
-  manifestLoadingTimeOut: 1e4,
-  levelLoadingTimeOut: 8e3,
-  fragLoadingTimeOut: 1e4,
-  liveSyncDurationCount: 2
-  // Follow live edge aggressively
-};
-function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
-  const [restartKey, setRestartKey] = React14.useState(0);
-  const hlsRef = React14.useRef(null);
-  const stallCheckIntervalRef = React14.useRef(null);
-  const noProgressTimerRef = React14.useRef(null);
-  const lastTimeUpdateRef = React14.useRef(0);
-  const softRestartCountRef = React14.useRef(0);
-  const isNativeHlsRef = React14.useRef(false);
-  const waitingTimerRef = React14.useRef(null);
-  const cleanup = () => {
-    if (stallCheckIntervalRef.current) {
-      clearInterval(stallCheckIntervalRef.current);
-      stallCheckIntervalRef.current = null;
-    }
-    if (noProgressTimerRef.current) {
-      clearTimeout(noProgressTimerRef.current);
-      noProgressTimerRef.current = null;
-    }
-    if (waitingTimerRef.current) {
-      clearTimeout(waitingTimerRef.current);
-      waitingTimerRef.current = null;
-    }
-    if (hlsRef.current) {
-      hlsRef.current.destroy();
-      hlsRef.current = null;
-    }
-    const video = videoRef.current;
-    if (video) {
-      video.pause();
-      video.removeAttribute("src");
-      video.load();
-      video.removeEventListener("waiting", handleWaiting);
-      video.removeEventListener("timeupdate", handleTimeUpdate);
-      video.removeEventListener("error", handleNativeError);
-    }
-    lastTimeUpdateRef.current = 0;
-    softRestartCountRef.current = 0;
-  };
-  const seekToLiveEdge = () => {
-    const hls = hlsRef.current;
-    const video = videoRef.current;
-    if (!hls || !video) return;
-    if (hls.liveSyncPosition !== null && hls.liveSyncPosition !== void 0) {
-      video.currentTime = hls.liveSyncPosition;
-    } else if (hls.levels?.[hls.currentLevel]?.details) {
-      const levelDetails = hls.levels[hls.currentLevel].details;
-      if (levelDetails && levelDetails.edge !== void 0) {
-        video.currentTime = Math.max(0, levelDetails.edge - 5);
-      }
-    }
+    [router$1, customNavigate]
+  );
+  return {
+    pathname,
+    query,
+    isReady,
+    activeLineId,
+    activeWorkspaceId,
+    isActive,
+    isInSection,
+    isLineView,
+    isWorkspaceView,
+    goToDashboard,
+    goToWorkspace,
+    goToLine,
+    goToTargets,
+    goToShifts,
+    goToLeaderboard,
+    goToFactoryView,
+    goToProfile,
+    navigate
   };
-  const softRestart = (reason) => {
-    console.warn(`[HLS] Soft restart: ${reason}`);
-    const hls = hlsRef.current;
-    if (!hls) return;
-    try {
-      hls.stopLoad();
-      hls.startLoad(-1);
-      seekToLiveEdge();
-      softRestartCountRef.current++;
-      if (softRestartCountRef.current >= 5) {
-        hardRestart(`${reason} (escalated after ${softRestartCountRef.current} soft restarts)`);
+}
+function useWorkspaceNavigation() {
+  const { defaultTimezone } = useDateTimeConfig();
+  const getWorkspaceNavigationParams3 = React14.useCallback(
+    (workspaceId, options) => {
+      let dateToUse = options?.date;
+      if (!dateToUse && options?.useCurrentDate) {
+        dateToUse = getOperationalDate(defaultTimezone || "UTC");
       }
-    } catch (error) {
-      console.error("[HLS] Soft restart failed:", error);
-      hardRestart(`${reason} (soft restart error)`);
-    }
+      return {
+        workspaceId,
+        date: dateToUse,
+        shift: options?.shift,
+        sourceType: options?.sourceType
+      };
+    },
+    [defaultTimezone]
+  );
+  return {
+    getWorkspaceNavigationParams: getWorkspaceNavigationParams3
   };
-  const hardRestart = (reason) => {
-    console.warn(`[HLS] Hard restart: ${reason}`);
-    cleanup();
-    setRestartKey((k) => k + 1);
-    softRestartCountRef.current = 0;
-    if (reason.includes("hard restart") || reason.includes("native video error")) {
-      if (onFatalError) {
-        onFatalError();
-      } else {
-        throttledReloadDashboard();
+}
+function useDateFormatter() {
+  const { defaultTimezone, defaultLocale, dateFormatOptions, timeFormatOptions, dateTimeFormatOptions } = useDateTimeConfig();
+  const formatDate = React14.useCallback(
+    (date, formatString) => {
+      const dateObj = typeof date === "string" ? dateFns.parseISO(date) : date;
+      if (!dateFns.isValid(dateObj)) return "Invalid Date";
+      const tz = defaultTimezone || "UTC";
+      if (formatString) {
+        return dateFnsTz.formatInTimeZone(dateObj, tz, formatString);
       }
-    }
-  };
-  const handleWaiting = () => {
-    if (isNativeHlsRef.current) return;
-    console.log("[HLS] Video waiting (buffer underrun)");
-    if (waitingTimerRef.current) {
-      clearTimeout(waitingTimerRef.current);
-    }
-    waitingTimerRef.current = setTimeout(() => {
-      const video = videoRef.current;
-      if (video && video.readyState < 3) {
-        softRestart("waiting timeout");
+      const effectiveOptions = dateFormatOptions || { year: "numeric", month: "short", day: "numeric" };
+      return new Intl.DateTimeFormat(defaultLocale || "en-US", effectiveOptions).format(dateObj);
+    },
+    [defaultTimezone, defaultLocale, dateFormatOptions]
+  );
+  const formatTime2 = React14.useCallback(
+    (date, formatString) => {
+      const dateObj = typeof date === "string" ? dateFns.parseISO(date) : date;
+      if (!dateFns.isValid(dateObj)) return "Invalid Time";
+      const tz = defaultTimezone || "UTC";
+      if (formatString) {
+        return dateFnsTz.formatInTimeZone(dateObj, tz, formatString);
       }
-    }, 1e4);
-  };
-  const handleTimeUpdate = () => {
-    const video = videoRef.current;
-    if (!video) return;
-    lastTimeUpdateRef.current = video.currentTime;
-    if (waitingTimerRef.current) {
-      clearTimeout(waitingTimerRef.current);
-      waitingTimerRef.current = null;
-    }
-  };
-  const handleNativeError = () => {
-    console.error("[HLS] Native video error");
-    hardRestart("native video error");
-  };
-  const startStallDetection = () => {
-    if (isNativeHlsRef.current) return;
-    stallCheckIntervalRef.current = setInterval(() => {
-      const video = videoRef.current;
-      if (!video || video.paused || video.ended) return;
-      const currentTime = video.currentTime;
-      const lastTime = lastTimeUpdateRef.current;
-      if (Math.abs(currentTime - lastTime) < 0.1 && video.readyState >= 2) {
-        console.warn("[HLS] Playback stall detected");
-        if (!noProgressTimerRef.current) {
-          noProgressTimerRef.current = setTimeout(() => {
-            softRestart("playback stall");
-            noProgressTimerRef.current = null;
-          }, 8e3);
-        }
-      } else {
-        if (noProgressTimerRef.current) {
-          clearTimeout(noProgressTimerRef.current);
-          noProgressTimerRef.current = null;
-        }
+      const effectiveOptions = timeFormatOptions || { hour: "numeric", minute: "numeric" };
+      return new Intl.DateTimeFormat(defaultLocale || "en-US", effectiveOptions).format(dateObj);
+    },
+    [defaultTimezone, defaultLocale, timeFormatOptions]
+  );
+  const formatDateTime = React14.useCallback(
+    (date, formatString) => {
+      const dateObj = typeof date === "string" ? dateFns.parseISO(date) : date;
+      if (!dateFns.isValid(dateObj)) return "Invalid Date/Time";
+      const tz = defaultTimezone || "UTC";
+      if (formatString) {
+        return dateFnsTz.formatInTimeZone(dateObj, tz, formatString);
       }
-    }, 7e3);
-  };
-  React14.useEffect(() => {
-    if (!src || !shouldPlay) {
-      cleanup();
-      return;
-    }
-    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);
-      hlsRef.current = hls;
-      hls.attachMedia(video);
-      hls.loadSource(src);
-      hls.on(Hls2__default.default.Events.ERROR, (_, data) => {
-        if (!data.fatal) return;
-        console.error("[HLS] Fatal error:", data.type, data.details);
-        if (data.response?.code === 404) {
-          hardRestart("404 hard restart");
-          return;
-        }
-        switch (data.type) {
-          case Hls2__default.default.ErrorTypes.NETWORK_ERROR:
-          case Hls2__default.default.ErrorTypes.MEDIA_ERROR:
-            softRestart(`${data.type}: ${data.details}`);
-            break;
-          default:
-            hardRestart(`Fatal ${data.type}: ${data.details}`);
-            break;
-        }
-      });
-      hls.on(Hls2__default.default.Events.MANIFEST_PARSED, () => {
-        video.play().catch((err) => {
-          console.error("[HLS] Play failed:", err);
-        });
-      });
-      video.addEventListener("waiting", handleWaiting);
-      video.addEventListener("timeupdate", handleTimeUpdate);
-      startStallDetection();
-    } else if (isNativeHlsRef.current) {
-      console.log("[HLS] Using native HLS");
-      video.src = src;
-      video.addEventListener("error", handleNativeError);
-      video.play().catch((err) => {
-        console.error("[HLS] Native play failed:", err);
-      });
-    } else {
-      console.error("[HLS] HLS not supported");
-    }
-    return cleanup;
-  }, [src, shouldPlay, restartKey, onFatalError]);
+      const effectiveOptions = dateTimeFormatOptions || { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric" };
+      return new Intl.DateTimeFormat(defaultLocale || "en-US", effectiveOptions).format(dateObj);
+    },
+    [defaultTimezone, defaultLocale, dateTimeFormatOptions]
+  );
+  const getNow = React14.useCallback(() => {
+    return /* @__PURE__ */ new Date();
+  }, []);
   return {
-    restartKey,
-    isNativeHls: isNativeHlsRef.current
+    formatDate,
+    formatTime: formatTime2,
+    formatDateTime,
+    getNow,
+    timezone: defaultTimezone || "UTC",
+    locale: defaultLocale || "en-US"
   };
 }
+var useFormatNumber = () => {
+  const { defaultLocale } = useDateTimeConfig();
+  const formatNumber = React14.useCallback(
+    (value, options) => {
+      try {
+        return new Intl.NumberFormat(defaultLocale || "en-US", options).format(value);
+      } catch (error) {
+        console.error("Error formatting number:", error);
+        return String(value);
+      }
+    },
+    [defaultLocale]
+  );
+  return { formatNumber };
+};
 
 // src/lib/utils/api.ts
 var apiUtils = {
@@ -17188,15 +17313,15 @@ var HourlyOutputChart = ({
     renderLegend()
   ] });
 };
-var TREND_STYLES = {
-  0: { arrow: "\u2193", color: "text-red-500 font-bold text-shadow" },
-  // Down
-  1: { arrow: "\u2013", color: "text-gray-500 font-bold text-shadow" },
-  // Unchanged
-  2: { arrow: "\u2191", color: "text-green-500 font-bold text-shadow" }
-  // Up
-};
-var getTrendArrowAndColor = (trend) => TREND_STYLES[trend] || { arrow: "", color: "" };
+function getTrendArrowAndColor(trend) {
+  if (trend > 0) {
+    return { arrow: "\u2191", color: "text-green-400" };
+  } else if (trend < 0) {
+    return { arrow: "\u2193", color: "text-red-400" };
+  } else {
+    return { arrow: "\u2192", color: "text-gray-400" };
+  }
+}
 var VideoCard = React14__namespace.default.memo(({
   workspace,
   hlsUrl,
@@ -17204,14 +17329,29 @@ var VideoCard = React14__namespace.default.memo(({
   onClick,
   onFatalError,
   isVeryLowEfficiency = false,
+  cropping,
+  canvasFps = 30,
+  useRAF = true,
   className = ""
 }) => {
   const videoRef = React14.useRef(null);
-  useHlsStream(videoRef, {
-    src: hlsUrl,
-    shouldPlay,
-    onFatalError: onFatalError ?? (() => throttledReloadDashboard())
-  });
+  const canvasRef = React14.useRef(null);
+  if (cropping) {
+    useHlsStreamWithCropping(videoRef, canvasRef, {
+      src: hlsUrl,
+      shouldPlay,
+      cropping,
+      canvasFps,
+      useRAF,
+      onFatalError: onFatalError ?? (() => throttledReloadDashboard())
+    });
+  } else {
+    useHlsStream(videoRef, {
+      src: hlsUrl,
+      shouldPlay,
+      onFatalError: onFatalError ?? (() => throttledReloadDashboard())
+    });
+  }
   const displayName = getWorkspaceDisplayName(workspace.workspace_name);
   workspace.workspace_uuid || workspace.workspace_name;
   const getEfficiencyOverlayColor = (efficiency) => {
@@ -17266,17 +17406,26 @@ var VideoCard = React14__namespace.default.memo(({
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { className: "w-6 h-6 text-gray-500" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500 mt-1", children: "Loading..." })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "video",
-            {
-              ref: videoRef,
-              className: "h-full w-full object-cover",
-              playsInline: true,
-              muted: true,
-              disablePictureInPicture: true,
-              controlsList: "nodownload noplaybackrate"
-            }
-          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 z-10", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "video",
+              {
+                ref: videoRef,
+                className: `h-full w-full object-cover ${cropping ? "hidden" : ""}`,
+                playsInline: true,
+                muted: true,
+                disablePictureInPicture: true,
+                controlsList: "nodownload noplaybackrate"
+              }
+            ),
+            cropping && /* @__PURE__ */ jsxRuntime.jsx(
+              "canvas",
+              {
+                ref: canvasRef,
+                className: "h-full w-full object-cover"
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-0 z-20 pointer-events-none ${efficiencyOverlayClass}` }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 right-2 z-30 bg-black/70 backdrop-blur-sm rounded px-2 py-0.5 text-white text-xs font-semibold border border-white/10", children: [
             Math.round(workspace.efficiency),
@@ -17312,7 +17461,7 @@ var VideoCard = React14__namespace.default.memo(({
     }
   );
 }, (prevProps, nextProps) => {
-  return prevProps.workspace.workspace_uuid === nextProps.workspace.workspace_uuid && prevProps.workspace.workspace_name === nextProps.workspace.workspace_name && Math.abs(prevProps.workspace.efficiency - nextProps.workspace.efficiency) < 1 && prevProps.hlsUrl === nextProps.hlsUrl && prevProps.shouldPlay === nextProps.shouldPlay;
+  return prevProps.workspace.workspace_uuid === nextProps.workspace.workspace_uuid && prevProps.workspace.workspace_name === nextProps.workspace.workspace_name && Math.abs(prevProps.workspace.efficiency - nextProps.workspace.efficiency) < 1 && prevProps.hlsUrl === nextProps.hlsUrl && prevProps.shouldPlay === nextProps.shouldPlay && prevProps.cropping?.x === nextProps.cropping?.x && prevProps.cropping?.y === nextProps.cropping?.y && prevProps.cropping?.width === nextProps.cropping?.width && prevProps.cropping?.height === nextProps.cropping?.height;
 });
 VideoCard.displayName = "VideoCard";
 var DEFAULT_WORKSPACE_HLS_URLS = {
@@ -17340,6 +17489,8 @@ var VideoGridView = React14__namespace.default.memo(({
   const observerRef = React14.useRef(null);
   const [gridCols, setGridCols] = React14.useState(4);
   const [visibleWorkspaces, setVisibleWorkspaces] = React14.useState(/* @__PURE__ */ new Set());
+  const videoConfig = useVideoConfig();
+  const { cropping, canvasConfig } = videoConfig;
   const mergedVideoSources = {
     defaultHlsUrl: videoSources.defaultHlsUrl || DEFAULT_HLS_URL,
     workspaceHlsUrls: { ...DEFAULT_WORKSPACE_HLS_URLS, ...videoSources.workspaceHlsUrls }
@@ -17348,6 +17499,13 @@ var VideoGridView = React14__namespace.default.memo(({
     const wsName = workspaceName.toUpperCase();
     return mergedVideoSources.workspaceHlsUrls[wsName] || mergedVideoSources.defaultHlsUrl;
   }, [mergedVideoSources]);
+  const getWorkspaceCropping = React14.useCallback((workspaceName) => {
+    if (!cropping) return void 0;
+    if (cropping.workspaceOverrides?.[workspaceName]) {
+      return cropping.workspaceOverrides[workspaceName];
+    }
+    return cropping.default;
+  }, [cropping]);
   const veryLowEfficiencyWorkspaces = React14.useMemo(() => {
     return new Set(
       workspaces.filter((w) => w.efficiency < 50 && w.efficiency >= 10).map((w) => w.workspace_name)
@@ -17486,6 +17644,7 @@ var VideoGridView = React14__namespace.default.memo(({
         const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
         const isVisible = visibleWorkspaces.has(workspaceId);
         const isVeryLowEfficiency = veryLowEfficiencyWorkspaces.has(workspace.workspace_name);
+        const workspaceCropping = getWorkspaceCropping(workspace.workspace_name);
         return /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -17500,7 +17659,10 @@ var VideoGridView = React14__namespace.default.memo(({
                 shouldPlay: isVisible,
                 onClick: () => handleWorkspaceClick(workspace),
                 onFatalError: throttledReloadDashboard,
-                isVeryLowEfficiency
+                isVeryLowEfficiency,
+                cropping: workspaceCropping,
+                canvasFps: canvasConfig?.fps,
+                useRAF: canvasConfig?.useRAF
               }
             )
           },
@@ -22327,12 +22489,12 @@ var getEfficiencyColor = (efficiency) => {
     return "bg-[#E34329]/90 hover:bg-[#E34329]/95";
   }
 };
-var TREND_STYLES2 = {
+var TREND_STYLES = {
   0: { arrow: "\u2193", color: "text-red-500 font-bold text-shadow" },
   1: { arrow: "=", color: "text-gray-500 font-bold text-shadow" },
   2: { arrow: "\u2191", color: "text-green-500 font-bold text-shadow" }
 };
-var getTrendArrowAndColor2 = (trend) => TREND_STYLES2[trend] || { arrow: "", color: "" };
+var getTrendArrowAndColor2 = (trend) => TREND_STYLES[trend] || { arrow: "", color: "" };
 var ARROW_POSITIONS = {
   top: "-bottom-6",
   "middle-top": "-bottom-6",
@@ -30803,6 +30965,7 @@ exports.DEFAULT_ENDPOINTS_CONFIG = DEFAULT_ENDPOINTS_CONFIG;
 exports.DEFAULT_ENTITY_CONFIG = DEFAULT_ENTITY_CONFIG;
 exports.DEFAULT_SHIFT_CONFIG = DEFAULT_SHIFT_CONFIG;
 exports.DEFAULT_THEME_CONFIG = DEFAULT_THEME_CONFIG;
+exports.DEFAULT_VIDEO_CONFIG = DEFAULT_VIDEO_CONFIG;
 exports.DEFAULT_WORKSPACE_CONFIG = DEFAULT_WORKSPACE_CONFIG;
 exports.DEFAULT_WORKSPACE_POSITIONS = DEFAULT_WORKSPACE_POSITIONS;
 exports.DashboardHeader = DashboardHeader;
@@ -30992,6 +31155,7 @@ exports.useFeatureFlags = useFeatureFlags;
 exports.useFormatNumber = useFormatNumber;
 exports.useHistoricWorkspaceMetrics = useHistoricWorkspaceMetrics;
 exports.useHlsStream = useHlsStream;
+exports.useHlsStreamWithCropping = useHlsStreamWithCropping;
 exports.useHookOverride = useHookOverride;
 exports.useLeaderboardMetrics = useLeaderboardMetrics;
 exports.useLineDetailedMetrics = useLineDetailedMetrics;
@@ -31013,6 +31177,7 @@ exports.useTargets = useTargets;
 exports.useTheme = useTheme;
 exports.useThemeConfig = useThemeConfig;
 exports.useThreads = useThreads;
+exports.useVideoConfig = useVideoConfig;
 exports.useWorkspaceConfig = useWorkspaceConfig;
 exports.useWorkspaceDetailedMetrics = useWorkspaceDetailedMetrics;
 exports.useWorkspaceDisplayName = useWorkspaceDisplayName;