From 21144b3493a94281052cbb0c698360e8958abd1f Mon Sep 17 00:00:00 2001
From: Fernando Serrano Carpena <ferserc1@gmail.com>
Date: Mon, 27 May 2024 12:58:28 +0200
Subject: [PATCH] n-stream layout restored

---
 src/css/VideoContainer.css    |  4 ++++
 src/js/core/VideoContainer.js | 12 ++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/css/VideoContainer.css b/src/css/VideoContainer.css
index 0868114e..b80256cc 100644
--- a/src/css/VideoContainer.css
+++ b/src/css/VideoContainer.css
@@ -233,4 +233,8 @@
 	color: var(--main-fg-color);
 	height: 40px;
 	line-height: 40px;
+}
+
+.video-container .landscape-container {
+	gap: 7px;
 }
\ No newline at end of file
diff --git a/src/js/core/VideoContainer.js b/src/js/core/VideoContainer.js
index ac5e3f62..e70779c4 100644
--- a/src/js/core/VideoContainer.js
+++ b/src/js/core/VideoContainer.js
@@ -162,6 +162,8 @@ async function updateLayoutDynamic() {
 
     hideAllVideoPlayers.apply(this);
 
+    const alignGrid = layoutStructure.alignType === "grid";
+
     this.baseVideoRect.style.width = "";
     this.baseVideoRect.style.height = "";
     this.baseVideoRect.style.display = "flex";
@@ -255,8 +257,18 @@ async function updateLayoutDynamic() {
         if (isLandscape) {
             const landscapeContainer = createElementWithHtmlText(`<div class="landscape-container"></div>`, this.baseVideoRect);
             canvasElements.forEach(e => landscapeContainer.appendChild(e));
+            if (alignGrid) {
+                const columns = layoutStructure?.videos?.length / 2;
+                landscapeContainer.style.display = "grid";
+                landscapeContainer.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
+            }
         }
         else {
+            if (alignGrid) {
+                const columns = layoutStructure?.videos?.length / 3;
+                this.baseVideoRect.style.display = "grid";
+                this.baseVideoRect.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
+            }
             canvasElements.forEach(e => this.baseVideoRect.appendChild(e));
         }
         setTimeout(() => {