@optifye/dashboard-core 6.0.8 → 6.0.9

package/dist/index.js

@@ -18666,7 +18666,9 @@ var VideoGridView = React19__namespace.default.memo(({
   const containerRef = React19.useRef(null);
   const observerRef = React19.useRef(null);
   const [gridCols, setGridCols] = React19.useState(4);
+  const [gridRows, setGridRows] = React19.useState(1);
   const [visibleWorkspaces, setVisibleWorkspaces] = React19.useState(/* @__PURE__ */ new Set());
+  const [cardDimensions, setCardDimensions] = React19.useState({ width: 0, height: 0 });
   const videoConfig = useVideoConfig();
   const { cropping, canvasConfig, hlsUrls } = videoConfig;
   const mergedVideoSources = {
@@ -18727,35 +18729,51 @@ var VideoGridView = React19__namespace.default.memo(({
       setGridCols(1);
       return;
     }
-    let bestCols = 1;
-    let bestScore = 0;
+    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;
-    const maxCols = Math.min(count, selectedLine ? 6 : 12);
-    for (let cols = 1; cols <= maxCols; cols++) {
-      const rows = Math.ceil(count / cols);
-      const availableWidth = containerWidth - gap * (cols - 1);
-      const availableHeight = containerHeight - gap * (rows - 1);
-      const cellWidth = availableWidth / cols;
-      const cellHeight = availableHeight / rows;
-      const minCellWidth = selectedLine ? containerWidth < 800 ? 120 : 150 : containerWidth < 800 ? 80 : 100;
-      const minCellHeight = selectedLine ? containerHeight < 600 ? 80 : 100 : containerHeight < 600 ? 60 : 80;
-      if (cellWidth < minCellWidth || cellHeight < minCellHeight) continue;
-      const totalUsedArea = cellWidth * cellHeight * count;
-      const totalAvailableArea = containerWidth * containerHeight;
-      const spaceUtilization = totalUsedArea / totalAvailableArea;
-      const actualAspectRatio = cellWidth / cellHeight;
-      const aspectRatioScore = 1 / (1 + Math.abs(actualAspectRatio - targetAspectRatio) * 0.3);
-      const score = spaceUtilization * 0.9 + aspectRatioScore * 0.1;
-      if (score > bestScore) {
-        bestScore = score;
-        bestCols = cols;
-      }
-    }
-    if (bestScore === 0) {
-      bestCols = Math.ceil(Math.sqrt(count));
+    if (containerAspectRatio > targetAspectRatio * 1.5 && count > 6) {
+      bestCols = Math.min(bestCols + 1, Math.ceil(count / 2));
+    }
+    const minCellWidth = selectedLine ? 150 : 100;
+    const availableWidth = containerWidth - gap * (bestCols - 1);
+    const cellWidth = availableWidth / bestCols;
+    if (cellWidth < minCellWidth && bestCols > 1) {
+      bestCols = Math.floor((containerWidth + gap) / (minCellWidth + gap));
     }
+    const rows = Math.ceil(count / bestCols);
     setGridCols(bestCols);
+    setGridRows(rows);
+    const cardWidth = (containerWidth - gap * (bestCols - 1)) / bestCols;
+    const cardHeight = (containerHeight - gap * (rows - 1)) / rows;
+    setCardDimensions({ width: Math.floor(cardWidth), height: Math.floor(cardHeight) });
   }, [filteredWorkspaces.length, selectedLine]);
   React19.useEffect(() => {
     calculateOptimalGrid();
@@ -18811,8 +18829,8 @@ var VideoGridView = React19__namespace.default.memo(({
       className: "grid h-full w-full gap-2",
       style: {
         gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
-        gridTemplateRows: `repeat(${Math.ceil(filteredWorkspaces.length / gridCols)}, 1fr)`,
-        minHeight: "100%"
+        gridTemplateRows: `repeat(${gridRows}, 1fr)`,
+        gridAutoFlow: "row"
       },
       children: filteredWorkspaces.sort((a, b) => {
         if (a.line_id !== b.line_id) {
@@ -18835,9 +18853,8 @@ var VideoGridView = React19__namespace.default.memo(({
           "div",
           {
             "data-workspace-id": workspaceId,
-            className: "workspace-card relative min-h-0 min-w-0",
-            style: { width: "100%", height: "100%" },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
+            className: "workspace-card relative w-full h-full",
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsxRuntime.jsx(
               VideoCard,
               {
                 workspace,
@@ -18851,7 +18868,7 @@ var VideoGridView = React19__namespace.default.memo(({
                 useRAF: canvasConfig?.useRAF,
                 compact: !selectedLine
               }
-            )
+            ) })
           },
           workspaceId
         );

package/dist/index.mjs

@@ -18637,7 +18637,9 @@ var VideoGridView = React19__default.memo(({
   const containerRef = useRef(null);
   const observerRef = useRef(null);
   const [gridCols, setGridCols] = useState(4);
+  const [gridRows, setGridRows] = useState(1);
   const [visibleWorkspaces, setVisibleWorkspaces] = useState(/* @__PURE__ */ new Set());
+  const [cardDimensions, setCardDimensions] = useState({ width: 0, height: 0 });
   const videoConfig = useVideoConfig();
   const { cropping, canvasConfig, hlsUrls } = videoConfig;
   const mergedVideoSources = {
@@ -18698,35 +18700,51 @@ var VideoGridView = React19__default.memo(({
       setGridCols(1);
       return;
     }
-    let bestCols = 1;
-    let bestScore = 0;
+    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;
-    const maxCols = Math.min(count, selectedLine ? 6 : 12);
-    for (let cols = 1; cols <= maxCols; cols++) {
-      const rows = Math.ceil(count / cols);
-      const availableWidth = containerWidth - gap * (cols - 1);
-      const availableHeight = containerHeight - gap * (rows - 1);
-      const cellWidth = availableWidth / cols;
-      const cellHeight = availableHeight / rows;
-      const minCellWidth = selectedLine ? containerWidth < 800 ? 120 : 150 : containerWidth < 800 ? 80 : 100;
-      const minCellHeight = selectedLine ? containerHeight < 600 ? 80 : 100 : containerHeight < 600 ? 60 : 80;
-      if (cellWidth < minCellWidth || cellHeight < minCellHeight) continue;
-      const totalUsedArea = cellWidth * cellHeight * count;
-      const totalAvailableArea = containerWidth * containerHeight;
-      const spaceUtilization = totalUsedArea / totalAvailableArea;
-      const actualAspectRatio = cellWidth / cellHeight;
-      const aspectRatioScore = 1 / (1 + Math.abs(actualAspectRatio - targetAspectRatio) * 0.3);
-      const score = spaceUtilization * 0.9 + aspectRatioScore * 0.1;
-      if (score > bestScore) {
-        bestScore = score;
-        bestCols = cols;
-      }
-    }
-    if (bestScore === 0) {
-      bestCols = Math.ceil(Math.sqrt(count));
+    if (containerAspectRatio > targetAspectRatio * 1.5 && count > 6) {
+      bestCols = Math.min(bestCols + 1, Math.ceil(count / 2));
+    }
+    const minCellWidth = selectedLine ? 150 : 100;
+    const availableWidth = containerWidth - gap * (bestCols - 1);
+    const cellWidth = availableWidth / bestCols;
+    if (cellWidth < minCellWidth && bestCols > 1) {
+      bestCols = Math.floor((containerWidth + gap) / (minCellWidth + gap));
     }
+    const rows = Math.ceil(count / bestCols);
     setGridCols(bestCols);
+    setGridRows(rows);
+    const cardWidth = (containerWidth - gap * (bestCols - 1)) / bestCols;
+    const cardHeight = (containerHeight - gap * (rows - 1)) / rows;
+    setCardDimensions({ width: Math.floor(cardWidth), height: Math.floor(cardHeight) });
   }, [filteredWorkspaces.length, selectedLine]);
   useEffect(() => {
     calculateOptimalGrid();
@@ -18782,8 +18800,8 @@ var VideoGridView = React19__default.memo(({
       className: "grid h-full w-full gap-2",
       style: {
         gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
-        gridTemplateRows: `repeat(${Math.ceil(filteredWorkspaces.length / gridCols)}, 1fr)`,
-        minHeight: "100%"
+        gridTemplateRows: `repeat(${gridRows}, 1fr)`,
+        gridAutoFlow: "row"
       },
       children: filteredWorkspaces.sort((a, b) => {
         if (a.line_id !== b.line_id) {
@@ -18806,9 +18824,8 @@ var VideoGridView = React19__default.memo(({
           "div",
           {
             "data-workspace-id": workspaceId,
-            className: "workspace-card relative min-h-0 min-w-0",
-            style: { width: "100%", height: "100%" },
-            children: /* @__PURE__ */ jsx(
+            className: "workspace-card relative w-full h-full",
+            children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx(
               VideoCard,
               {
                 workspace,
@@ -18822,7 +18839,7 @@ var VideoGridView = React19__default.memo(({
                 useRAF: canvasConfig?.useRAF,
                 compact: !selectedLine
               }
-            )
+            ) })
           },
           workspaceId
         );

package/package.json

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