@optifye/dashboard-core 6.12.15 → 6.12.17

package/dist/index.js

@@ -16848,6 +16848,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
       return url.includes(proxyBaseUrl);
     }
   };
+  const isSnapshotStreamUrl = (url) => url.includes("/api/automation/snapshot/stream/");
   const getR2CameraUuid = (url) => {
     try {
       const parsed = new URL(url);
@@ -17436,11 +17437,16 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
         return;
       }
       if (Hls__default.default.isSupported() && !isNativeHlsRef.current) {
+        const usesSnapshotStream = isSnapshotStreamUrl(resolvedHlsSrc);
         const mergedConfig = {
           ...HLS_CONFIG,
           ...hlsConfig,
+          enableWorker: usesSnapshotStream ? false : hlsConfig?.enableWorker ?? HLS_CONFIG.enableWorker,
           xhrSetup: (xhr, url) => {
             const usesProxy = isProxyUrl(url);
+            if (isSnapshotStreamUrl(url)) {
+              xhr.withCredentials = true;
+            }
             if (isR2WorkerUrl(url, r2WorkerDomain) || usesProxy) {
               if (isManifestUrl(url)) {
                 xhr.open("GET", buildCacheBustedUrl(url), true);
@@ -17454,7 +17460,11 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
             const isR2Url = isR2WorkerUrl(context.url, r2WorkerDomain);
             const isManifestRequest = isManifestUrl(context.url);
             const usesProxy = isProxyUrl(context.url);
+            const isSnapshotStream = isSnapshotStreamUrl(context.url);
             let requestUrl = context.url;
+            if (isSnapshotStream) {
+              initParams.credentials = "include";
+            }
             if (isR2Url || usesProxy) {
               if (authToken) {
                 initParams.headers = {
@@ -37594,6 +37604,7 @@ var VideoCard = React144__namespace.default.memo(({
   displayMinuteBucket,
   displayName,
   lastSeenLabel,
+  hasRecentHealthSignal: hasRecentHealthSignal2 = false,
   onMouseEnter,
   onMouseLeave
 }) => {
@@ -37608,7 +37619,7 @@ var VideoCard = React144__namespace.default.memo(({
     useRAF,
     onFatalError: onFatalError ?? (() => throttledReloadDashboard())
   });
-  const showOffline = Boolean(isStreamStale);
+  const showOffline = Boolean(isStreamStale && !hasRecentHealthSignal2);
   const lastSeenText = lastSeenLabel || "Unknown";
   const workspaceDisplayName = displayName || workspace.displayName || workspace.workspace_name;
   const videoGridMetricValue = getVideoGridMetricValue(workspace, effectiveLegend);
@@ -37748,6 +37759,9 @@ var VideoCard = React144__namespace.default.memo(({
   if (prevProps.lastSeenLabel !== nextProps.lastSeenLabel) {
     return false;
   }
+  if (prevProps.hasRecentHealthSignal !== nextProps.hasRecentHealthSignal) {
+    return false;
+  }
   if (prevProps.legend !== nextProps.legend) {
     return false;
   }
@@ -37770,10 +37784,17 @@ var DEFAULT_HLS_URL = "https://192.168.5.9:8443/cam1.m3u8";
 var DEBUG_DASHBOARD_LOGS2 = process.env.NEXT_PUBLIC_DEBUG_DASHBOARD === "true";
 var MOBILE_SCROLL_THRESHOLD = 15;
 var MOBILE_BREAKPOINT_PX = 640;
+var RECENT_HEALTH_SIGNAL_MS = 3 * 60 * 1e3;
 var logDebug2 = (...args) => {
   if (!DEBUG_DASHBOARD_LOGS2) return;
   console.log(...args);
 };
+var hasRecentHealthSignal = (lastHeartbeat) => {
+  if (!lastHeartbeat) return false;
+  const heartbeatMs = new Date(lastHeartbeat).getTime();
+  if (!Number.isFinite(heartbeatMs)) return false;
+  return Date.now() - heartbeatMs <= RECENT_HEALTH_SIGNAL_MS;
+};
 var VideoGridView = React144__namespace.default.memo(({
   workspaces,
   selectedLine,
@@ -38085,7 +38106,8 @@ var VideoGridView = React144__namespace.default.memo(({
       const isVisible = visibleWorkspaces.has(workspaceId);
       const workspaceCropping = getWorkspaceCropping(workspaceId, workspace.workspace_name);
       const workspaceStream = videoStreamsByWorkspaceId?.[workspaceId];
-      const lastSeenLabel = workspace.workspace_uuid ? lastSeenByWorkspaceId[workspace.workspace_uuid]?.timeSinceLastUpdate : void 0;
+      const workspaceHealth = workspace.workspace_uuid ? lastSeenByWorkspaceId[workspace.workspace_uuid] : void 0;
+      const lastSeenLabel = workspaceHealth?.timeSinceLastUpdate;
       const r2Url = workspaceStream?.hls_url;
       const fallbackUrl = getWorkspaceHlsUrl(workspace.workspace_name, workspace.line_id);
       const hasR2Stream = Boolean(r2Url);
@@ -38104,7 +38126,8 @@ var VideoGridView = React144__namespace.default.memo(({
         hlsUrl,
         isR2Stream,
         shouldPlay,
-        lastSeenLabel
+        lastSeenLabel,
+        hasRecentHealthSignal: hasRecentHealthSignal(workspaceHealth?.lastHeartbeat)
       };
     });
   }, [
@@ -38151,6 +38174,7 @@ var VideoGridView = React144__namespace.default.memo(({
           canvasFps: effectiveCanvasFps,
           displayName: resolveWorkspaceDisplayName(card.workspace),
           lastSeenLabel: card.lastSeenLabel,
+          hasRecentHealthSignal: card.hasRecentHealthSignal,
           useRAF: effectiveUseRAF,
           displayMinuteBucket,
           compact: !selectedLine,
@@ -85847,6 +85871,246 @@ var streamProxyConfig = {
     responseLimit: false
   }
 };
+var MOBILE_SCROLL_THRESHOLD2 = 15;
+var MOBILE_BREAKPOINT_PX2 = 640;
+var sortWorkspaces = (left, right) => {
+  if (left.line_id !== right.line_id) {
+    return left.line_id.localeCompare(right.line_id);
+  }
+  const leftMatch = left.workspace_name.match(/WS(\d+)/);
+  const rightMatch = right.workspace_name.match(/WS(\d+)/);
+  if (leftMatch && rightMatch) {
+    return parseInt(leftMatch[1], 10) - parseInt(rightMatch[1], 10);
+  }
+  return left.workspace_name.localeCompare(right.workspace_name, void 0, { numeric: true });
+};
+var RecentFlowSnapshotGrid = ({
+  workspaces,
+  videoStreamsByWorkspaceId,
+  legend,
+  className = ""
+}) => {
+  const containerRef = React144.useRef(null);
+  const readinessRef = React144.useRef(null);
+  const [gridCols, setGridCols] = React144.useState(4);
+  const [gridRows, setGridRows] = React144.useState(1);
+  const [isMobileScrollableGrid, setIsMobileScrollableGrid] = React144.useState(false);
+  const sortedWorkspaces = React144.useMemo(
+    () => [...workspaces || []].sort(sortWorkspaces),
+    [workspaces]
+  );
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
+  const displayMinuteBucket = Math.floor(Date.now() / 6e4);
+  const expectedVideoCount = React144.useMemo(
+    () => sortedWorkspaces.filter((workspace) => {
+      const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
+      return Boolean(workspaceId && videoStreamsByWorkspaceId[workspaceId]?.hls_url);
+    }).length,
+    [sortedWorkspaces, videoStreamsByWorkspaceId]
+  );
+  const publishSnapshotReadiness = React144.useCallback((readyVideoCount) => {
+    const status = {
+      expectedVideoCount,
+      readyVideoCount,
+      status: expectedVideoCount === 0 ? "no_videos" : readyVideoCount >= expectedVideoCount ? "ready" : "loading",
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    const isReady = expectedVideoCount > 0 && status.status === "ready";
+    if (typeof window !== "undefined") {
+      window.__OPTIFYE_SNAPSHOT_READY__ = isReady;
+      window.__OPTIFYE_SNAPSHOT_VIDEO_STATUS__ = status;
+    }
+    const marker = readinessRef.current;
+    if (marker) {
+      marker.dataset.ready = isReady ? "true" : "false";
+      marker.dataset.status = status.status;
+      marker.dataset.expectedVideoCount = String(status.expectedVideoCount);
+      marker.dataset.readyVideoCount = String(status.readyVideoCount);
+      marker.dataset.updatedAt = status.updatedAt;
+    }
+  }, [expectedVideoCount]);
+  const calculateOptimalGrid = React144.useCallback(() => {
+    if (!containerRef.current) return;
+    const containerPadding = 16;
+    const rawContainerWidth = containerRef.current.clientWidth;
+    const containerWidth = rawContainerWidth - containerPadding;
+    const containerHeight = containerRef.current.clientHeight - containerPadding;
+    const count = sortedWorkspaces.length;
+    if (count === 0) {
+      setGridCols(1);
+      setGridRows(1);
+      setIsMobileScrollableGrid(false);
+      return;
+    }
+    const shouldUseMobileScroll = rawContainerWidth < MOBILE_BREAKPOINT_PX2 && count >= MOBILE_SCROLL_THRESHOLD2;
+    const optimalLayouts = {
+      1: 1,
+      2: 2,
+      3: 3,
+      4: 2,
+      5: 3,
+      6: 3,
+      7: 4,
+      8: 4,
+      9: 3,
+      10: 5,
+      11: 4,
+      12: 4,
+      13: 5,
+      14: 5,
+      15: 5,
+      16: 4,
+      17: 6,
+      18: 6,
+      19: 5,
+      20: 5,
+      21: 7,
+      22: 6,
+      23: 6,
+      24: 6
+    };
+    let bestCols = optimalLayouts[count] || Math.ceil(Math.sqrt(count));
+    const containerAspectRatio = containerWidth / containerHeight;
+    const targetAspectRatio = 16 / 9;
+    const gap = 8;
+    if (containerAspectRatio > targetAspectRatio * 1.5 && count > 6) {
+      bestCols = Math.min(bestCols + 1, Math.ceil(count / 2));
+    }
+    const minCellWidth = 100;
+    const availableWidth = containerWidth - gap * (bestCols - 1);
+    const cellWidth = availableWidth / bestCols;
+    if (cellWidth < minCellWidth && bestCols > 1) {
+      bestCols = Math.max(1, Math.floor((containerWidth + gap) / (minCellWidth + gap)));
+    }
+    setGridCols(bestCols);
+    setGridRows(Math.ceil(count / bestCols));
+    setIsMobileScrollableGrid(shouldUseMobileScroll);
+  }, [sortedWorkspaces.length]);
+  React144.useEffect(() => {
+    calculateOptimalGrid();
+    window.addEventListener("resize", calculateOptimalGrid);
+    return () => window.removeEventListener("resize", calculateOptimalGrid);
+  }, [calculateOptimalGrid]);
+  React144.useEffect(() => {
+    const attachedVideos = /* @__PURE__ */ new Set();
+    const videoEvents = ["loadeddata", "canplay", "playing", "timeupdate", "error", "stalled"];
+    const hasDecodedFrame = (video) => video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && video.videoWidth > 0 && video.videoHeight > 0;
+    const updateReadiness = () => {
+      const videos = Array.from(containerRef.current?.querySelectorAll("video") ?? []);
+      const readyVideoCount = videos.filter(hasDecodedFrame).length;
+      publishSnapshotReadiness(Math.min(readyVideoCount, expectedVideoCount));
+      for (const video of videos) {
+        if (attachedVideos.has(video)) continue;
+        attachedVideos.add(video);
+        for (const eventName of videoEvents) {
+          video.addEventListener(eventName, updateReadiness);
+        }
+      }
+    };
+    publishSnapshotReadiness(0);
+    updateReadiness();
+    const intervalId = window.setInterval(updateReadiness, 250);
+    return () => {
+      window.clearInterval(intervalId);
+      for (const video of attachedVideos) {
+        for (const eventName of videoEvents) {
+          video.removeEventListener(eventName, updateReadiness);
+        }
+      }
+      if (typeof window !== "undefined") {
+        window.__OPTIFYE_SNAPSHOT_READY__ = false;
+        window.__OPTIFYE_SNAPSHOT_VIDEO_STATUS__ = void 0;
+      }
+    };
+  }, [expectedVideoCount, publishSnapshotReadiness]);
+  if (!sortedWorkspaces.length) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: readinessRef,
+          "data-testid": "snapshot-video-readiness",
+          "data-ready": "false",
+          "data-status": "no_videos",
+          "data-expected-video-count": "0",
+          "data-ready-video-count": "0",
+          hidden: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[320px] items-center justify-center rounded-md border border-dashed border-slate-300 bg-slate-50 text-sm font-medium text-slate-500", children: "No workstation snapshot available" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-label": "Recent-flow workstation snapshot",
+      className: `relative h-full min-h-0 w-full overflow-hidden bg-slate-50/30 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: readinessRef,
+            "data-testid": "snapshot-video-readiness",
+            "data-ready": "false",
+            "data-status": expectedVideoCount === 0 ? "no_videos" : "loading",
+            "data-expected-video-count": expectedVideoCount,
+            "data-ready-video-count": "0",
+            hidden: true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: containerRef,
+            "data-testid": "video-grid-scroll-container",
+            "data-mobile-scrollable": isMobileScrollableGrid ? "true" : "false",
+            className: `absolute inset-0 w-full overflow-x-hidden px-1 py-1 sm:px-2 sm:py-2 ${isMobileScrollableGrid ? "overflow-y-auto" : "overflow-hidden"}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-testid": "video-grid-layout",
+                className: `grid min-w-0 w-full gap-1.5 sm:gap-2 ${isMobileScrollableGrid ? "content-start" : "h-full"}`,
+                style: {
+                  gridTemplateColumns: `repeat(${gridCols}, minmax(0, 1fr))`,
+                  gridTemplateRows: isMobileScrollableGrid ? void 0 : `repeat(${gridRows}, 1fr)`,
+                  gridAutoFlow: "row"
+                },
+                children: sortedWorkspaces.map((workspace) => {
+                  const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
+                  const stream = workspaceId ? videoStreamsByWorkspaceId[workspaceId] : null;
+                  const hlsUrl = stream?.hls_url || "";
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      "data-workspace-id": workspaceId,
+                      className: isMobileScrollableGrid ? "workspace-card relative min-w-0 w-full aspect-video min-h-[92px]" : "workspace-card relative min-w-0 w-full h-full",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        VideoCard,
+                        {
+                          workspace,
+                          hlsUrl,
+                          shouldPlay: Boolean(hlsUrl),
+                          legend: effectiveLegend,
+                          cropping: stream?.crop || void 0,
+                          canvasFps: 10,
+                          useRAF: false,
+                          displayMinuteBucket,
+                          displayName: workspace.displayName || workspace.workspace_name,
+                          compact: true
+                        }
+                      ) })
+                    },
+                    `${workspace.line_id}-${workspaceId}`
+                  );
+                })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
 
 exports.ACTION_FAMILIES = ACTION_FAMILIES;
 exports.ACTION_NAMES = ACTION_NAMES;
@@ -86003,6 +86267,7 @@ exports.PrefetchStatus = PrefetchStatus;
 exports.PrefetchTimeoutError = PrefetchTimeoutError;
 exports.ProfileView = ProfileView_default;
 exports.ROOT_DASHBOARD_EVENT_NAMES = ROOT_DASHBOARD_EVENT_NAMES;
+exports.RecentFlowSnapshotGrid = RecentFlowSnapshotGrid;
 exports.RegistryProvider = RegistryProvider;
 exports.RoleBadge = RoleBadge;
 exports.S3ClipsService = S3ClipsSupabaseService;