Constrain tiles using aspect ratios and bounding boxes

src/VideoGrid.jsx

@@ -38,31 +38,56 @@ function getTilePositions(tileCount, gridBounds) {
   const newTilePositions = [];
   const { width: gridWidth, height: gridHeight } = gridBounds;
   const gap = 8;
-  let paddingLeft = 8;
-  let paddingTop = 8;
 
   if (tileCount > 12) {
     console.warn("Over 12 tiles is not currently supported");
   }
 
   if (tileCount > 0) {
-    const aspectRatio = gridWidth / gridHeight;
+    const gridAspectRatio = gridWidth / gridHeight;
 
     let columnCount, rowCount;
+    let tileAspectRatio = 16 / 9;
 
-    if (aspectRatio < 1) {
+    if (gridAspectRatio < 3 / 4) {
-      if (tileCount <= 4) {
+      // Phone
+      if (tileCount === 1) {
+        columnCount = 1;
+        rowCount = 1;
+        tileAspectRatio = 0;
+      } else if (tileCount <= 4) {
         columnCount = 1;
         rowCount = tileCount;
       } else if (tileCount <= 12) {
         columnCount = 2;
-        rowCount = Math.ceil(tileCount / 2);
+        rowCount = Math.ceil(tileCount / columnCount);
+        tileAspectRatio = 0;
       } else {
         // Unsupported
         columnCount = 3;
-        rowCount = Math.ceil(tileCount / 2);
+        rowCount = Math.ceil(tileCount / columnCount);
+        tileAspectRatio = 1;
       }
-    } else {
+    } else if (gridAspectRatio < 1) {
+      // Tablet
+      if (tileCount === 1) {
+        columnCount = 1;
+        rowCount = 1;
+        tileAspectRatio = 0;
+      } else if (tileCount <= 4) {
+        columnCount = 1;
+        rowCount = tileCount;
+      } else if (tileCount <= 12) {
+        columnCount = 2;
+        rowCount = Math.ceil(tileCount / columnCount);
+      } else {
+        // Unsupported
+        columnCount = 3;
+        rowCount = Math.ceil(tileCount / columnCount);
+        tileAspectRatio = 1;
+      }
+    } else if (gridAspectRatio < 17 / 9) {
+      // Computer
       if (tileCount === 1) {
         columnCount = 1;
         rowCount = 1;
@@ -78,8 +103,32 @@ function getTilePositions(tileCount, gridBounds) {
       } else if (tileCount <= 8) {
         columnCount = 4;
         rowCount = 2;
-      } else if (tileCount <= 10) {
+        tileAspectRatio = 1;
-        columnCount = 5;
+      } else if (tileCount <= 12) {
+        columnCount = 4;
+        rowCount = 3;
+        tileAspectRatio = 1;
+      } else {
+        // Unsupported
+        columnCount = 4;
+        rowCount = 4;
+      }
+    } else if (gridAspectRatio <= 32 / 9) {
+      // Ultrawide
+      if (tileCount === 1) {
+        columnCount = 1;
+        rowCount = 1;
+      } else if (tileCount === 2) {
+        columnCount = 2;
+        rowCount = 1;
+      } else if (tileCount <= 4) {
+        columnCount = 2;
+        rowCount = 2;
+      } else if (tileCount <= 6) {
+        columnCount = 3;
+        rowCount = 2;
+      } else if (tileCount <= 8) {
+        columnCount = 4;
         rowCount = 2;
       } else if (tileCount <= 12) {
         columnCount = 4;
@@ -89,76 +138,78 @@ function getTilePositions(tileCount, gridBounds) {
         columnCount = 4;
         rowCount = 4;
       }
+    } else {
+      // Super Ultrawide
+      if (tileCount <= 6) {
+        columnCount = tileCount;
+        rowCount = 1;
+      } else {
+        columnCount = Math.ceil(tileCount / 2);
+        rowCount = 2;
+      }
     }
 
-    const maxTileHeight = Math.round(
+    const boxWidth = Math.round(
-      (gridHeight - gap * (rowCount + 1)) / rowCount
-    );
-    const maxTileWidth = Math.round(
       (gridWidth - gap * (columnCount + 1)) / columnCount
     );
+    const boxHeight = Math.round(
+      (gridHeight - gap * (rowCount + 1)) / rowCount
+    );
 
-    // TODO Constrain Aspect
+    let tileWidth, tileHeight;
 
-    let tileHeight = maxTileHeight;
+    if (tileAspectRatio) {
-    let tileWidth = maxTileWidth;
+      const boxAspectRatio = boxWidth / boxHeight;
 
-    const tileAspectRatio = tileWidth / tileHeight;
+      if (boxAspectRatio > tileAspectRatio) {
-
+        tileWidth = boxHeight * tileAspectRatio;
-    if (aspectRatio < 1) {
+        tileHeight = boxHeight;
-      if (tileCount === 1) {
-        tileHeight = maxTileHeight;
-        tileWidth = maxTileWidth;
-      } else if (tileCount <= 4) {
-        tileHeight = Math.round((maxTileWidth * 9) / 16);
       } else {
-        tileHeight = tileWidth;
+        tileWidth = boxWidth;
+        tileHeight = boxWidth / tileAspectRatio;
       }
     } else {
+      tileWidth = boxWidth;
+      tileHeight = boxHeight;
     }
 
-    const totalHeight = tileHeight * rowCount + gap * (rowCount - 1);
+    const paddingTop =
-
-    if (totalHeight > gridHeight) {
-      const overflow = totalHeight - gridHeight;
-      tileHeight = Math.round(tileHeight - overflow / rowCount);
-    }
-
-    // if (tileAspectRatio > 16 / 9) {
-    //   tileWidth = (16 * tileHeight) / 9;
-    // }
-
-    paddingTop =
       (gridHeight - tileHeight * rowCount - gap * (rowCount - 1)) / 2;
 
-    paddingLeft =
+    const paddingLeft =
       (gridWidth - tileWidth * columnCount - gap * (columnCount - 1)) / 2;
 
     for (let i = 0; i < tileCount; i++) {
       const verticalIndex = Math.floor(i / columnCount);
       const top = verticalIndex * tileHeight + verticalIndex * gap + paddingTop;
 
-      console.log(top);
-
       let rowItemCount;
 
-      if (verticalIndex + 1 === rowCount && tileCount % rowCount !== 0) {
+      if (verticalIndex + 1 === rowCount && tileCount % columnCount !== 0) {
-        rowItemCount = Math.floor(tileCount / rowCount);
+        rowItemCount = tileCount % columnCount;
       } else {
-        rowItemCount = Math.ceil(tileCount / rowCount);
+        rowItemCount = columnCount;
       }
 
       const horizontalIndex = i % columnCount;
-      const totalRowGapWidth = (rowItemCount + 1) * gap;
+
-      const totalRowTileWidth = rowItemCount * tileWidth;
+      let centeringPadding = 0;
-      const rowLeftMargin = Math.round(
+
-        (gridWidth - (totalRowTileWidth + totalRowGapWidth)) / 2
+      if (rowItemCount < columnCount) {
-      );
+        centeringPadding = Math.round(
+          (gridWidth -
+            (tileWidth * rowItemCount +
+              (gap * rowItemCount - 1) +
+              paddingLeft * 2)) /
+            2
+        );
+      }
+
       const left =
-        tileWidth * horizontalIndex +
+        paddingLeft +
-        rowLeftMargin +
+        centeringPadding +
-        horizontalIndex * gap +
+        gap * horizontalIndex +
-        paddingLeft;
+        tileWidth * horizontalIndex;
 
       newTilePositions.push({
         width: tileWidth,