@optifye/dashboard-core 6.12.10 → 6.12.12

package/dist/index.css

@@ -1262,6 +1262,9 @@ body {
 .min-h-\[80px\] {
   min-height: 80px;
 }
+.min-h-\[92px\] {
+  min-height: 92px;
+}
 .min-h-\[calc\(100dvh-12rem\)\] {
   min-height: calc(100dvh - 12rem);
 }
@@ -1892,6 +1895,9 @@ body {
 .flex-nowrap {
   flex-wrap: nowrap;
 }
+.content-start {
+  align-content: flex-start;
+}
 .items-start {
   align-items: flex-start;
 }

package/dist/index.js

@@ -37759,6 +37759,8 @@ var VideoCard = React144__namespace.default.memo(({
 VideoCard.displayName = "VideoCard";
 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 logDebug2 = (...args) => {
   if (!DEBUG_DASHBOARD_LOGS2) return;
   console.log(...args);
@@ -37780,6 +37782,7 @@ var VideoGridView = React144__namespace.default.memo(({
   const observerRef = React144.useRef(null);
   const [gridCols, setGridCols] = React144.useState(4);
   const [gridRows, setGridRows] = React144.useState(1);
+  const [isMobileScrollableGrid, setIsMobileScrollableGrid] = React144.useState(false);
   const [visibleWorkspaces, setVisibleWorkspaces] = React144.useState(/* @__PURE__ */ new Set());
   const [failedStreams, setFailedStreams] = React144.useState(/* @__PURE__ */ new Set());
   const [r2FallbackWorkspaces, setR2FallbackWorkspaces] = React144.useState(/* @__PURE__ */ new Set());
@@ -37893,13 +37896,17 @@ var VideoGridView = React144__namespace.default.memo(({
   const calculateOptimalGrid = React144.useCallback(() => {
     if (!containerRef.current) return;
     const containerPadding = 16;
-    const containerWidth = containerRef.current.clientWidth - containerPadding;
+    const rawContainerWidth = containerRef.current.clientWidth;
+    const containerWidth = rawContainerWidth - containerPadding;
     const containerHeight = containerRef.current.clientHeight - containerPadding;
     const count = filteredWorkspaces.length;
     if (count === 0) {
       setGridCols(1);
+      setGridRows(1);
+      setIsMobileScrollableGrid(false);
       return;
     }
+    const shouldUseMobileScroll = rawContainerWidth < MOBILE_BREAKPOINT_PX && count >= MOBILE_SCROLL_THRESHOLD;
     const optimalLayouts = {
       1: 1,
       2: 2,
@@ -37937,11 +37944,12 @@ var VideoGridView = React144__namespace.default.memo(({
     const availableWidth = containerWidth - gap * (bestCols - 1);
     const cellWidth = availableWidth / bestCols;
     if (cellWidth < minCellWidth && bestCols > 1) {
-      bestCols = Math.floor((containerWidth + gap) / (minCellWidth + gap));
+      bestCols = Math.max(1, Math.floor((containerWidth + gap) / (minCellWidth + gap)));
     }
     const rows = Math.ceil(count / bestCols);
     setGridCols(bestCols);
     setGridRows(rows);
+    setIsMobileScrollableGrid(shouldUseMobileScroll);
   }, [filteredWorkspaces.length, selectedLine]);
   React144.useEffect(() => {
     calculateOptimalGrid();
@@ -38155,21 +38163,27 @@ var VideoGridView = React144__namespace.default.memo(({
     resolveWorkspaceDisplayName,
     selectedLine
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative overflow-hidden h-full w-full bg-slate-50/30 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative h-full min-h-0 w-full overflow-hidden bg-slate-50/30 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: containerRef,
-      className: "h-full w-full px-1 sm:px-2 py-1 sm:py-2 overflow-y-auto",
+      "data-testid": "video-grid-scroll-container",
+      "data-mobile-scrollable": isMobileScrollableGrid ? "true" : "false",
+      className: `absolute inset-0 w-full px-1 py-1 sm:px-2 sm:py-2 ${isMobileScrollableGrid ? "overflow-y-auto" : "overflow-hidden"}`,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "grid h-full w-full gap-1.5 sm:gap-2",
+          "data-testid": "video-grid-layout",
+          className: `grid w-full gap-1.5 sm:gap-2 ${isMobileScrollableGrid ? "content-start" : "h-full"}`,
           style: {
             gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
-            gridTemplateRows: `repeat(${gridRows}, 1fr)`,
+            gridTemplateRows: isMobileScrollableGrid ? void 0 : `repeat(${gridRows}, 1fr)`,
             gridAutoFlow: "row"
           },
-          children: workspaceCards.map((card) => renderWorkspaceCard(card, "workspace-card relative w-full h-full"))
+          children: workspaceCards.map((card) => renderWorkspaceCard(
+            card,
+            isMobileScrollableGrid ? "workspace-card relative w-full aspect-video min-h-[92px]" : "workspace-card relative w-full h-full"
+          ))
         }
       )
     }
@@ -50348,7 +50362,7 @@ var LineMonthlyHistory = ({
       { name: "Idle", value: idlePercent }
     ];
   }, [analysisMonthlyData, selectedShiftId, isUptimeMode]);
-  if (isLoading) {
+  if (isLoading && analysisMonthlyData.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100vh-10rem)]", children: /* @__PURE__ */ jsxRuntime.jsx(
       OptifyeLogoLoader_default,
       {

package/dist/index.mjs

@@ -37730,6 +37730,8 @@ var VideoCard = React144__default.memo(({
 VideoCard.displayName = "VideoCard";
 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 logDebug2 = (...args) => {
   if (!DEBUG_DASHBOARD_LOGS2) return;
   console.log(...args);
@@ -37751,6 +37753,7 @@ var VideoGridView = React144__default.memo(({
   const observerRef = useRef(null);
   const [gridCols, setGridCols] = useState(4);
   const [gridRows, setGridRows] = useState(1);
+  const [isMobileScrollableGrid, setIsMobileScrollableGrid] = useState(false);
   const [visibleWorkspaces, setVisibleWorkspaces] = useState(/* @__PURE__ */ new Set());
   const [failedStreams, setFailedStreams] = useState(/* @__PURE__ */ new Set());
   const [r2FallbackWorkspaces, setR2FallbackWorkspaces] = useState(/* @__PURE__ */ new Set());
@@ -37864,13 +37867,17 @@ var VideoGridView = React144__default.memo(({
   const calculateOptimalGrid = useCallback(() => {
     if (!containerRef.current) return;
     const containerPadding = 16;
-    const containerWidth = containerRef.current.clientWidth - containerPadding;
+    const rawContainerWidth = containerRef.current.clientWidth;
+    const containerWidth = rawContainerWidth - containerPadding;
     const containerHeight = containerRef.current.clientHeight - containerPadding;
     const count = filteredWorkspaces.length;
     if (count === 0) {
       setGridCols(1);
+      setGridRows(1);
+      setIsMobileScrollableGrid(false);
       return;
     }
+    const shouldUseMobileScroll = rawContainerWidth < MOBILE_BREAKPOINT_PX && count >= MOBILE_SCROLL_THRESHOLD;
     const optimalLayouts = {
       1: 1,
       2: 2,
@@ -37908,11 +37915,12 @@ var VideoGridView = React144__default.memo(({
     const availableWidth = containerWidth - gap * (bestCols - 1);
     const cellWidth = availableWidth / bestCols;
     if (cellWidth < minCellWidth && bestCols > 1) {
-      bestCols = Math.floor((containerWidth + gap) / (minCellWidth + gap));
+      bestCols = Math.max(1, Math.floor((containerWidth + gap) / (minCellWidth + gap)));
     }
     const rows = Math.ceil(count / bestCols);
     setGridCols(bestCols);
     setGridRows(rows);
+    setIsMobileScrollableGrid(shouldUseMobileScroll);
   }, [filteredWorkspaces.length, selectedLine]);
   useEffect(() => {
     calculateOptimalGrid();
@@ -38126,21 +38134,27 @@ var VideoGridView = React144__default.memo(({
     resolveWorkspaceDisplayName,
     selectedLine
   ]);
-  return /* @__PURE__ */ jsx("div", { className: `relative overflow-hidden h-full w-full bg-slate-50/30 ${className}`, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: `relative h-full min-h-0 w-full overflow-hidden bg-slate-50/30 ${className}`, children: /* @__PURE__ */ jsx(
     "div",
     {
       ref: containerRef,
-      className: "h-full w-full px-1 sm:px-2 py-1 sm:py-2 overflow-y-auto",
+      "data-testid": "video-grid-scroll-container",
+      "data-mobile-scrollable": isMobileScrollableGrid ? "true" : "false",
+      className: `absolute inset-0 w-full px-1 py-1 sm:px-2 sm:py-2 ${isMobileScrollableGrid ? "overflow-y-auto" : "overflow-hidden"}`,
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: "grid h-full w-full gap-1.5 sm:gap-2",
+          "data-testid": "video-grid-layout",
+          className: `grid w-full gap-1.5 sm:gap-2 ${isMobileScrollableGrid ? "content-start" : "h-full"}`,
           style: {
             gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
-            gridTemplateRows: `repeat(${gridRows}, 1fr)`,
+            gridTemplateRows: isMobileScrollableGrid ? void 0 : `repeat(${gridRows}, 1fr)`,
             gridAutoFlow: "row"
           },
-          children: workspaceCards.map((card) => renderWorkspaceCard(card, "workspace-card relative w-full h-full"))
+          children: workspaceCards.map((card) => renderWorkspaceCard(
+            card,
+            isMobileScrollableGrid ? "workspace-card relative w-full aspect-video min-h-[92px]" : "workspace-card relative w-full h-full"
+          ))
         }
       )
     }
@@ -50319,7 +50333,7 @@ var LineMonthlyHistory = ({
       { name: "Idle", value: idlePercent }
     ];
   }, [analysisMonthlyData, selectedShiftId, isUptimeMode]);
-  if (isLoading) {
+  if (isLoading && analysisMonthlyData.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100vh-10rem)]", children: /* @__PURE__ */ jsx(
       OptifyeLogoLoader_default,
       {

package/package.json

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