[mirotalksfu] - adapt aspect ratio

public/js/Room.js

@@ -817,8 +817,8 @@ function handleSelects() {
     BtnsAspectRatio.onchange = () => {
         setAspectRatio(BtnsAspectRatio.value);
     };
-    BtnsAspectRatio.selectedIndex = DetectRTC.isMobileDevice ? 1 : 0;
-    setAspectRatio(BtnsAspectRatio.selectedIndex);
+
+    adaptAspectRatio(1);
 
     BtnsBarPosition.onchange = () => {
         rc.changeBtnsBarPosition(BtnsBarPosition.value);
@@ -1520,12 +1520,71 @@ async function getParticipantsTable(peers) {
 
 function refreshParticipantsCount(count) {
     participantsTitle.innerHTML = `<i class="fas fa-users"></i> Participants ( ${count} )`;
+    adaptAspectRatio(count);
 }
 
 function getParticipantAvatar(peerName) {
     return cfg.msgAvatar + '?name=' + peerName + '&size=32' + '&background=random&rounded=true';
 }
 
+// ####################################################
+// HANDLE ASPECT RATIO
+// ####################################################
+
+function adaptAspectRatio(participantsCount) {
+    /* 
+        ['0:0', '4:3', '16:9', '1:1', '1:2'];
+    */
+    let desktop,
+        mobile = 1;
+    // desktop aspect ratio
+    switch (participantsCount) {
+        case 1:
+        case 3:
+        case 4:
+        case 7:
+        case 9:
+            desktop = 2; // (16:9)
+            break;
+        case 5:
+        case 6:
+        case 10:
+        case 11:
+            desktop = 1; // (4:3)
+            break;
+        case 2:
+        case 8:
+            desktop = 3; // (1:1)
+            break;
+    }
+    // mobile aspect ratio
+    switch (participantsCount) {
+        case 3:
+        case 9:
+        case 10:
+            mobile = 2; // (16:9)
+            break;
+        case 2:
+        case 7:
+        case 8:
+        case 11:
+            mobile = 1; // (4:3)
+            break;
+        case 4:
+        case 5:
+        case 6:
+        case 11:
+            mobile = 3; // (1:1)
+            break;
+    }
+    if (participantsCount > 11) {
+        desktop = 1; // (4:3)
+        mobile = 3; // (1:1)
+    }
+    BtnsAspectRatio.selectedIndex = DetectRTC.isMobileDevice ? mobile : desktop;
+    setAspectRatio(BtnsAspectRatio.selectedIndex);
+}
+
 // ####################################################
 // ABOUT
 // ####################################################

public/js/RoomClient.js

@@ -227,6 +227,7 @@ class RoomClient {
     async handleRoomInfo(room) {
         let peers = new Map(JSON.parse(room.peers));
         participantsCount = peers.size;
+        adaptAspectRatio(participantsCount);
         for (let peer of Array.from(peers.keys()).filter((id) => id !== this.peer_id)) {
             let peer_info = peers.get(peer).peer_info;
             // console.log('07 ----> Remote Peer info', peer_info);
@@ -409,6 +410,7 @@ class RoomClient {
                 console.log('Remove me:', data);
                 this.removeVideoOff(data.peer_id);
                 participantsCount = data.peer_counts;
+                adaptAspectRatio(participantsCount);
             }.bind(this),
         );
 
@@ -417,6 +419,7 @@ class RoomClient {
             function (data) {
                 console.log('Participants Count:', data);
                 participantsCount = data.peer_counts;
+                adaptAspectRatio(participantsCount);
             }.bind(this),
         );
 

public/js/VideoGrid.js

@@ -4,7 +4,7 @@ let customRatio = true;
 
 // aspect       0      1      2      3       4
 let ratios = ['0:0', '4:3', '16:9', '1:1', '1:2'];
-let aspect = 0;
+let aspect = 2;
 
 let ratio = getAspectRatio();