[mirotalksfu] - improve UI

public/css/Room.css

@@ -124,6 +124,7 @@ body {
     -ms-transform: translate(0%, -50%);
     transform: translate(0%, -50%);
 
+    /* border: var(--border); */
     border-radius: 10px;
 }
 

public/js/Room.js

@@ -69,10 +69,10 @@ function initClient() {
         setTippy('stopAudioButton', 'Stop the audio', 'right');
         setTippy('startVideoButton', 'Start the video', 'right');
         setTippy('stopVideoButton', 'Stop the video', 'right');
-        setTippy('swapCameraButton', 'Swap the camera', 'right');
-        setTippy('chatButton', 'Toggle the chat', 'right');
         setTippy('startScreenButton', 'Start screen share', 'right');
         setTippy('stopScreenButton', 'Stop screen share', 'right');
+        setTippy('swapCameraButton', 'Swap the camera', 'right');
+        setTippy('chatButton', 'Toggle the chat', 'right');
         setTippy('whiteboardButton', 'Toggle the whiteboard', 'right');
         setTippy('settingsButton', 'Toggle the settings', 'right');
         setTippy('exitButton', 'Leave room', 'right');
@@ -1586,8 +1586,6 @@ function adaptAspectRatio(participantsCount) {
     // desktop aspect ratio
     switch (participantsCount) {
         case 1:
-            desktop = 0; // (0:0)
-            break;
         case 3:
         case 4:
         case 7:

public/js/VideoGrid.js

@@ -39,12 +39,18 @@ function Area(Increment, Count, Width, Height, Margin = 10) {
 
 function resizeVideoMedia() {
     let Margin = 3;
-    let Scenary = document.getElementById('videoMediaContainer');
-    let Width = Scenary.offsetWidth - Margin * 2;
-    let Height = Scenary.offsetHeight - Margin * 2;
+    let videoMediaContainer = document.getElementById('videoMediaContainer');
     let Cameras = document.getElementsByClassName('Camera');
+    let Width = videoMediaContainer.offsetWidth - Margin * 2;
+    let Height = videoMediaContainer.offsetHeight - Margin * 2;
     let max = 0;
 
+    // full screen mode
+    let bigWidth = Width * 4;
+    if (videoMediaContainer.childElementCount == 1) {
+        Width = Width - bigWidth;
+    }
+
     // loop (i recommend you optimize this)
     let i = 1;
     while (i < 5000) {
@@ -57,16 +63,22 @@ function resizeVideoMedia() {
     }
 
     max = max - Margin * 2;
-    setWidth(max, Margin);
+    setWidth(max, bigWidth, Margin, Height);
 }
 
-function setWidth(width, margin) {
+function setWidth(width, bigWidth, margin, maxHeight) {
     ratio = customRatio ? 0.68 : ratio;
     let Cameras = document.getElementsByClassName('Camera');
     for (let s = 0; s < Cameras.length; s++) {
         Cameras[s].style.width = width + 'px';
         Cameras[s].style.margin = margin + 'px';
         Cameras[s].style.height = width * ratio + 'px';
+        if (videoMediaContainer.childElementCount == 1) {
+            Cameras[s].style.width = bigWidth + 'px';
+            Cameras[s].style.height = bigWidth * ratio + 'px';
+            let camHeigh = Cameras[s].style.height.substring(0, Cameras[s].style.height.length - 2);
+            if (camHeigh >= maxHeight) Cameras[s].style.height = maxHeight - 2 + 'px';
+        }
     }
 }
 

public/view/Room.html

@@ -103,10 +103,10 @@ access to use this app.
             <button id="stopAudioButton" class="hidden"><i class="fas fa-microphone"></i></button>
             <button id="startVideoButton" class="hidden"><i class="fas fa-video-slash"></i></button>
             <button id="stopVideoButton" class="hidden"><i class="fas fa-video"></i></button>
-            <button id="swapCameraButton" class="hidden"><i class="fas fa-sync-alt"></i></button>
-            <button id="chatButton" class="hidden"><i class="fas fa-comments"></i></button>
             <button id="startScreenButton" class="hidden"><i class="fas fa-desktop"></i></button>
             <button id="stopScreenButton" class="hidden"><i class="fas fa-stop-circle"></i></button>
+            <button id="swapCameraButton" class="hidden"><i class="fas fa-sync-alt"></i></button>
+            <button id="chatButton" class="hidden"><i class="fas fa-comments"></i></button>
             <button id="whiteboardButton" class="hidden"><i class="fas fa-chalkboard-teacher"></i></button>
             <button id="settingsButton" class="hidden"><i class="fas fa-cogs"></i></button>
             <button id="exitButton" class="hidden"><i class="fas fa-phone-slash"></i></button>