From 83fe024c452f207b3c8154cb55fec07242066aa7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 11 Aug 2020 22:40:54 +0200
Subject: [PATCH] Adjusting class in chat mode based on number of divs
 displayed.

---
 front/src/WebRtc/LayoutManager.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/front/src/WebRtc/LayoutManager.ts b/front/src/WebRtc/LayoutManager.ts
index cf986d0c..63a02356 100644
--- a/front/src/WebRtc/LayoutManager.ts
+++ b/front/src/WebRtc/LayoutManager.ts
@@ -43,6 +43,7 @@ export class LayoutManager {
         }
 
         this.positionDiv(div, importance);
+        this.adjustVideoChatClass();
     }
 
     private positionDiv(elem: HTMLDivElement, importance: DivImportance): void {
@@ -68,6 +69,7 @@ export class LayoutManager {
         if (div !== undefined) {
             div.remove();
             this.importantDivs.delete(userId);
+            this.adjustVideoChatClass();
             return;
         }
 
@@ -75,12 +77,30 @@ export class LayoutManager {
         if (div !== undefined) {
             div.remove();
             this.normalDivs.delete(userId);
+            this.adjustVideoChatClass();
             return;
         }
 
         throw new Error('Could not find user ID "'+userId+'"');
     }
 
+    private adjustVideoChatClass(): void {
+        const chatModeDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('chat-mode');
+        chatModeDiv.classList.remove('one-col', 'two-col', 'three-col', 'four-col');
+
+        const nbUsers = this.importantDivs.size + this.normalDivs.size;
+
+        if (nbUsers <= 1) {
+            chatModeDiv.classList.add('one-col');
+        } else if (nbUsers <= 4) {
+            chatModeDiv.classList.add('two-col');
+        } else if (nbUsers <= 9) {
+            chatModeDiv.classList.add('three-col');
+        } else {
+            chatModeDiv.classList.add('four-col');
+        }
+    }
+
     private switchLayoutMode(layoutMode: LayoutMode) {
         this.mode = layoutMode;