@optifye/dashboard-core 6.11.45 → 6.11.47

package/dist/index.js

@@ -37655,6 +37655,7 @@ var buildPrefetchedExplorerMetadata = (activeFilter, metadataCategoryId, categor
     [activeFilter]: categoryMetadata
   };
 };
+var shouldDeferClipPlayerRender = (cropLoading, workspaceCrop) => cropLoading && workspaceCrop === null;
 var getSecondsBetweenTimestamps = (startTime, endTime) => {
   const startDate = parseTimestamp(startTime);
   const endDate = parseTimestamp(endTime);
@@ -42786,7 +42787,7 @@ var BottlenecksContent = ({
   const isEffectiveShiftReady = Boolean(effectiveShift && effectiveDate);
   const effectiveDateString = effectiveDate || "";
   const effectiveShiftId = effectiveShift ?? "";
-  const { crop: workspaceCrop} = useWorkspaceCrop(workspaceId);
+  const { crop: workspaceCrop, isLoading: cropLoading } = useWorkspaceCrop(workspaceId);
   const { metrics: fetchedWorkspaceMetrics } = useWorkspaceDetailedMetrics(
     workspaceId,
     date,
@@ -42835,6 +42836,8 @@ var BottlenecksContent = ({
   const [pendingVideo, setPendingVideo] = React143.useState(null);
   const [isVideoBuffering, setIsVideoBuffering] = React143.useState(false);
   const [isInitialLoading, setIsInitialLoading] = React143.useState(false);
+  const shouldDeferPlayerRenderForCrop = shouldDeferClipPlayerRender(cropLoading, workspaceCrop);
+  const showBlockingVideoLoader = shouldDeferPlayerRenderForCrop || isTransitioning || isVideoBuffering && isInitialLoading;
   const [isShareLoading, setIsShareLoading] = React143.useState(false);
   const [isShareCopied, setIsShareCopied] = React143.useState(false);
   const shareCopiedTimeoutRef = React143.useRef(null);
@@ -44574,7 +44577,7 @@ var BottlenecksContent = ({
               opacity: isTransitioning ? 0 : 1,
               transition: "opacity 0.1s ease-in-out"
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
+            children: !shouldDeferPlayerRenderForCrop && /* @__PURE__ */ jsxRuntime.jsx(
               CroppedVideoPlayer,
               {
                 ref: videoRef,
@@ -44605,8 +44608,8 @@ 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..." }) }),
+        showBlockingVideoLoader && !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..." }) }),
+        !shouldDeferPlayerRenderForCrop && !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..." }) }),
         error && error.type === "retrying" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-40 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-sm mt-4 font-medium", children: error.message })
@@ -44999,7 +45002,7 @@ var BottlenecksContent = ({
                   opacity: isTransitioning ? 0 : 1,
                   transition: "opacity 0.1s ease-in-out"
                 },
-                children: /* @__PURE__ */ jsxRuntime.jsx(
+                children: !shouldDeferPlayerRenderForCrop && /* @__PURE__ */ jsxRuntime.jsx(
                   CroppedVideoPlayer,
                   {
                     ref: videoRef,
@@ -45030,8 +45033,8 @@ 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..." }) }),
+            showBlockingVideoLoader && !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..." }) }),
+            !shouldDeferPlayerRenderForCrop && !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-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Speed:" }),
@@ -60957,6 +60960,7 @@ var useLiveMonitorBootstrap = ({
     [normalizedLineIds]
   );
   const [state, setState] = React143.useState(() => createEmptyState());
+  const [rawState, setRawState] = React143.useState(null);
   const [isLoading, setIsLoading] = React143.useState(false);
   const [error, setError] = React143.useState(null);
   const activeRequestIdRef = React143.useRef(0);
@@ -60987,62 +60991,80 @@ var useLiveMonitorBootstrap = ({
       if (requestId !== activeRequestIdRef.current) {
         return;
       }
+      setRawState({
+        requestKey,
+        normalizedLineIds,
+        response
+      });
+    } catch (fetchError) {
+      if (requestId !== activeRequestIdRef.current) {
+        return;
+      }
+      setError(fetchError instanceof Error ? fetchError : new Error("Failed to load live monitor bootstrap"));
+    } finally {
+      if (requestId === activeRequestIdRef.current) {
+        setIsLoading(false);
+      }
+    }
+  }, [
+    enabled,
+    supabase,
+    resolvedCompanyId,
+    normalizedLineIds,
+    requestKey
+  ]);
+  React143.useEffect(() => {
+    if (!enabled || !rawState || !resolvedCompanyId) {
+      return;
+    }
+    try {
       const workspaceMetrics = transformMonitorWorkspaceMetrics({
-        rows: response.workspace_metrics || [],
+        rows: rawState.response.workspace_metrics || [],
         companyId: resolvedCompanyId,
         workspaceConfig: effectiveWorkspaceConfig,
         appTimezone: effectiveTimezone,
-        lineMetrics: response.line_metrics || [],
+        lineMetrics: rawState.response.line_metrics || [],
         resolveShiftConfig: (lineId) => lineShiftConfigs?.get(lineId) || fallbackShiftConfig,
         shouldOverrideShiftType: (lineId) => Boolean(lineShiftConfigs?.get(lineId)),
         fallbackShiftConfig
       });
-      const activeBreaks = transformActiveBreaks(response.active_breaks_by_line);
-      const metadata = normalizeMetadata(response.metadata);
+      const activeBreaks = transformActiveBreaks(rawState.response.active_breaks_by_line);
+      const metadata = normalizeMetadata(rawState.response.metadata);
       const workspaceIds = workspaceMetrics.map((metric) => metric.workspace_uuid).filter((workspaceId) => Boolean(workspaceId));
-      const videoStreamsByWorkspaceId = response.video_streams_by_workspace_id || {};
+      const videoStreamsByWorkspaceId = rawState.response.video_streams_by_workspace_id || {};
       if (metadata.idleTimeVlmByLine) {
         hydrateFromBackend(metadata.idleTimeVlmByLine);
       }
       workspaceService.primeWorkspaceVideoStreamsCache({
         streams: videoStreamsByWorkspaceId,
         workspaceIds,
-        lineIds: normalizedLineIds
+        lineIds: rawState.normalizedLineIds
       });
       setState({
-        requestKey,
-        resolvedScope: response.resolved_scope || [],
-        scopeKey: response.scope_key || null,
-        lines: response.lines || [],
+        requestKey: rawState.requestKey,
+        resolvedScope: rawState.response.resolved_scope || [],
+        scopeKey: rawState.response.scope_key || null,
+        lines: rawState.response.lines || [],
         workspaceMetrics,
-        lineMetrics: response.line_metrics || [],
-        kpiTrend: response.kpi_trend || null,
+        lineMetrics: rawState.response.line_metrics || [],
+        kpiTrend: rawState.response.kpi_trend || null,
         activeBreaks,
         videoStreamsByWorkspaceId,
-        efficiencyLegend: response.efficiency_legend || null,
+        efficiencyLegend: rawState.response.efficiency_legend || null,
         metadata
       });
-    } catch (fetchError) {
-      if (requestId !== activeRequestIdRef.current) {
-        return;
-      }
-      setError(fetchError instanceof Error ? fetchError : new Error("Failed to load live monitor bootstrap"));
-    } finally {
-      if (requestId === activeRequestIdRef.current) {
-        setIsLoading(false);
-      }
+    } catch (processingError) {
+      setError(processingError instanceof Error ? processingError : new Error("Failed to process live monitor bootstrap"));
     }
   }, [
     enabled,
-    supabase,
+    rawState,
     resolvedCompanyId,
-    normalizedLineIds,
-    requestKey,
-    hydrateFromBackend,
     effectiveWorkspaceConfig,
     effectiveTimezone,
     lineShiftConfigs,
-    fallbackShiftConfig
+    fallbackShiftConfig,
+    hydrateFromBackend
   ]);
   React143.useEffect(() => {
     if (!enabled) {
@@ -61051,6 +61073,7 @@ var useLiveMonitorBootstrap = ({
     }
     if (!resolvedCompanyId || normalizedLineIds.length === 0 || !supabase) {
       setState(createEmptyState());
+      setRawState(null);
       setIsLoading(false);
       setError(null);
       return;

package/dist/index.mjs

@@ -37626,6 +37626,7 @@ var buildPrefetchedExplorerMetadata = (activeFilter, metadataCategoryId, categor
     [activeFilter]: categoryMetadata
   };
 };
+var shouldDeferClipPlayerRender = (cropLoading, workspaceCrop) => cropLoading && workspaceCrop === null;
 var getSecondsBetweenTimestamps = (startTime, endTime) => {
   const startDate = parseTimestamp(startTime);
   const endDate = parseTimestamp(endTime);
@@ -42757,7 +42758,7 @@ var BottlenecksContent = ({
   const isEffectiveShiftReady = Boolean(effectiveShift && effectiveDate);
   const effectiveDateString = effectiveDate || "";
   const effectiveShiftId = effectiveShift ?? "";
-  const { crop: workspaceCrop} = useWorkspaceCrop(workspaceId);
+  const { crop: workspaceCrop, isLoading: cropLoading } = useWorkspaceCrop(workspaceId);
   const { metrics: fetchedWorkspaceMetrics } = useWorkspaceDetailedMetrics(
     workspaceId,
     date,
@@ -42806,6 +42807,8 @@ var BottlenecksContent = ({
   const [pendingVideo, setPendingVideo] = useState(null);
   const [isVideoBuffering, setIsVideoBuffering] = useState(false);
   const [isInitialLoading, setIsInitialLoading] = useState(false);
+  const shouldDeferPlayerRenderForCrop = shouldDeferClipPlayerRender(cropLoading, workspaceCrop);
+  const showBlockingVideoLoader = shouldDeferPlayerRenderForCrop || isTransitioning || isVideoBuffering && isInitialLoading;
   const [isShareLoading, setIsShareLoading] = useState(false);
   const [isShareCopied, setIsShareCopied] = useState(false);
   const shareCopiedTimeoutRef = useRef(null);
@@ -44545,7 +44548,7 @@ var BottlenecksContent = ({
               opacity: isTransitioning ? 0 : 1,
               transition: "opacity 0.1s ease-in-out"
             },
-            children: /* @__PURE__ */ jsx(
+            children: !shouldDeferPlayerRenderForCrop && /* @__PURE__ */ jsx(
               CroppedVideoPlayer,
               {
                 ref: videoRef,
@@ -44576,8 +44579,8 @@ var BottlenecksContent = ({
             )
           }
         ),
-        (isTransitioning || isVideoBuffering && isInitialLoading) && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-        !isTransitioning && isVideoBuffering && !isInitialLoading && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+        showBlockingVideoLoader && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+        !shouldDeferPlayerRenderForCrop && !isTransitioning && isVideoBuffering && !isInitialLoading && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
         error && error.type === "retrying" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-40 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
           /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md" }),
           /* @__PURE__ */ jsx("p", { className: "text-white text-sm mt-4 font-medium", children: error.message })
@@ -44970,7 +44973,7 @@ var BottlenecksContent = ({
                   opacity: isTransitioning ? 0 : 1,
                   transition: "opacity 0.1s ease-in-out"
                 },
-                children: /* @__PURE__ */ jsx(
+                children: !shouldDeferPlayerRenderForCrop && /* @__PURE__ */ jsx(
                   CroppedVideoPlayer,
                   {
                     ref: videoRef,
@@ -45001,8 +45004,8 @@ var BottlenecksContent = ({
                 )
               }
             ),
-            (isTransitioning || isVideoBuffering && isInitialLoading) && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-            !isTransitioning && isVideoBuffering && !isInitialLoading && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+            showBlockingVideoLoader && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+            !shouldDeferPlayerRenderForCrop && !isTransitioning && isVideoBuffering && !isInitialLoading && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
             /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between text-white", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Speed:" }),
@@ -60928,6 +60931,7 @@ var useLiveMonitorBootstrap = ({
     [normalizedLineIds]
   );
   const [state, setState] = useState(() => createEmptyState());
+  const [rawState, setRawState] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const activeRequestIdRef = useRef(0);
@@ -60958,62 +60962,80 @@ var useLiveMonitorBootstrap = ({
       if (requestId !== activeRequestIdRef.current) {
         return;
       }
+      setRawState({
+        requestKey,
+        normalizedLineIds,
+        response
+      });
+    } catch (fetchError) {
+      if (requestId !== activeRequestIdRef.current) {
+        return;
+      }
+      setError(fetchError instanceof Error ? fetchError : new Error("Failed to load live monitor bootstrap"));
+    } finally {
+      if (requestId === activeRequestIdRef.current) {
+        setIsLoading(false);
+      }
+    }
+  }, [
+    enabled,
+    supabase,
+    resolvedCompanyId,
+    normalizedLineIds,
+    requestKey
+  ]);
+  useEffect(() => {
+    if (!enabled || !rawState || !resolvedCompanyId) {
+      return;
+    }
+    try {
       const workspaceMetrics = transformMonitorWorkspaceMetrics({
-        rows: response.workspace_metrics || [],
+        rows: rawState.response.workspace_metrics || [],
         companyId: resolvedCompanyId,
         workspaceConfig: effectiveWorkspaceConfig,
         appTimezone: effectiveTimezone,
-        lineMetrics: response.line_metrics || [],
+        lineMetrics: rawState.response.line_metrics || [],
         resolveShiftConfig: (lineId) => lineShiftConfigs?.get(lineId) || fallbackShiftConfig,
         shouldOverrideShiftType: (lineId) => Boolean(lineShiftConfigs?.get(lineId)),
         fallbackShiftConfig
       });
-      const activeBreaks = transformActiveBreaks(response.active_breaks_by_line);
-      const metadata = normalizeMetadata(response.metadata);
+      const activeBreaks = transformActiveBreaks(rawState.response.active_breaks_by_line);
+      const metadata = normalizeMetadata(rawState.response.metadata);
       const workspaceIds = workspaceMetrics.map((metric) => metric.workspace_uuid).filter((workspaceId) => Boolean(workspaceId));
-      const videoStreamsByWorkspaceId = response.video_streams_by_workspace_id || {};
+      const videoStreamsByWorkspaceId = rawState.response.video_streams_by_workspace_id || {};
       if (metadata.idleTimeVlmByLine) {
         hydrateFromBackend(metadata.idleTimeVlmByLine);
       }
       workspaceService.primeWorkspaceVideoStreamsCache({
         streams: videoStreamsByWorkspaceId,
         workspaceIds,
-        lineIds: normalizedLineIds
+        lineIds: rawState.normalizedLineIds
       });
       setState({
-        requestKey,
-        resolvedScope: response.resolved_scope || [],
-        scopeKey: response.scope_key || null,
-        lines: response.lines || [],
+        requestKey: rawState.requestKey,
+        resolvedScope: rawState.response.resolved_scope || [],
+        scopeKey: rawState.response.scope_key || null,
+        lines: rawState.response.lines || [],
         workspaceMetrics,
-        lineMetrics: response.line_metrics || [],
-        kpiTrend: response.kpi_trend || null,
+        lineMetrics: rawState.response.line_metrics || [],
+        kpiTrend: rawState.response.kpi_trend || null,
         activeBreaks,
         videoStreamsByWorkspaceId,
-        efficiencyLegend: response.efficiency_legend || null,
+        efficiencyLegend: rawState.response.efficiency_legend || null,
         metadata
       });
-    } catch (fetchError) {
-      if (requestId !== activeRequestIdRef.current) {
-        return;
-      }
-      setError(fetchError instanceof Error ? fetchError : new Error("Failed to load live monitor bootstrap"));
-    } finally {
-      if (requestId === activeRequestIdRef.current) {
-        setIsLoading(false);
-      }
+    } catch (processingError) {
+      setError(processingError instanceof Error ? processingError : new Error("Failed to process live monitor bootstrap"));
     }
   }, [
     enabled,
-    supabase,
+    rawState,
     resolvedCompanyId,
-    normalizedLineIds,
-    requestKey,
-    hydrateFromBackend,
     effectiveWorkspaceConfig,
     effectiveTimezone,
     lineShiftConfigs,
-    fallbackShiftConfig
+    fallbackShiftConfig,
+    hydrateFromBackend
   ]);
   useEffect(() => {
     if (!enabled) {
@@ -61022,6 +61044,7 @@ var useLiveMonitorBootstrap = ({
     }
     if (!resolvedCompanyId || normalizedLineIds.length === 0 || !supabase) {
       setState(createEmptyState());
+      setRawState(null);
       setIsLoading(false);
       setError(null);
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optifye/dashboard-core",
-  "version": "6.11.45",
+  "version": "6.11.47",
   "description": "Reusable UI & logic for Optifye dashboard",
   "main": "dist/index.js",
   "module": "dist/index.mjs",