n-stream layout restored

polimediaupv · May 27, 2024 · 21144b3 · 21144b3
1 parent faeb8de
commit 21144b3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git 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;
 }
diff --git 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(() => {