[mirotalksfu] - UI and improvements

public/css/Room.css

@@ -80,7 +80,7 @@ body {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    background: var(--body-bg);
+    background: url('../images/background.jpg');
 }
 
 /*--------------------------------------------------------------
@@ -103,7 +103,7 @@ body {
     color: #fff;
     padding: 30px;
     border-radius: 10px;
-    background: var(--body-bg);
+    background: transparent;
 }
 #loadingDiv h1 {
     font-size: 60px;

public/js/Room.js

@@ -4,7 +4,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
 
 const RoomURL = window.location.href;
 
-let swalBackground = 'radial-gradient(#393939, #000000)';
+let swalBackground = 'radial-gradient(#393939, #000000)'; //'rgba(0, 0, 0, 0.7)';
 const swalImageUrl = '../images/pricing-illustration.svg';
 
 const url = {
@@ -368,6 +368,7 @@ function whoAreYou() {
     if (!isAudioAllowed) hide(initAudioButton);
     if (!isVideoAllowed) hide(initVideoButton);
     if (!isAudioAllowed || !isVideoAllowed) hide(initAudioVideoButton);
+    isAudioVideoAllowed = isAudioAllowed && isVideoAllowed;
 }
 
 function handleAudio(e) {
@@ -385,16 +386,11 @@ function handleVideo(e) {
 }
 
 function handleAudioVideo(e) {
-    isAudioAllowed = isAudioAllowed ? false : true;
-    isVideoAllowed = isVideoAllowed ? false : true;
-    isAudioVideoAllowed = isAudioAllowed && isVideoAllowed;
-    if (isAudioVideoAllowed) {
-        initAudioButton.className = 'fas fa-microphone';
-        initVideoButton.className = 'fas fa-video';
-    } else {
-        hide(initAudioButton);
-        hide(initVideoButton);
-    }
+    isAudioVideoAllowed = isAudioVideoAllowed ? false : true;
+    isAudioAllowed = isAudioVideoAllowed;
+    isVideoAllowed = isAudioVideoAllowed;
+    initAudioButton.className = 'fas fa-microphone' + (isAudioVideoAllowed ? '' : '-slash');
+    initVideoButton.className = 'fas fa-video' + (isAudioVideoAllowed ? '' : '-slash');
     e.target.className = 'fas fa-eye' + (isAudioVideoAllowed ? '' : '-slash');
     setColor(e.target, isAudioVideoAllowed ? 'white' : 'red');
     setColor(initAudioButton, isAudioAllowed ? 'white' : 'red');
@@ -545,6 +541,7 @@ function joinRoom(peer_name, room_id) {
 }
 
 function roomIsReady() {
+    setTheme('dark');
     show(exitButton);
     show(shareButton);
     show(startRecButton);
@@ -1668,12 +1665,14 @@ function setTheme(theme) {
             document.documentElement.style.setProperty('--body-bg', 'radial-gradient(#393939, #000000)');
             document.documentElement.style.setProperty('--msger-bg', 'radial-gradient(#393939, #000000)');
             document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#393939, #000000)');
+            document.body.style.background = 'radial-gradient(#393939, #000000)';
             break;
         case 'grey':
             swalBackground = 'radial-gradient(#666, #333)';
             document.documentElement.style.setProperty('--body-bg', 'radial-gradient(#666, #333)');
             document.documentElement.style.setProperty('--msger-bg', 'radial-gradient(#666, #333)');
             document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#797979, #000)');
+            document.body.style.background = 'radial-gradient(#666, #333)';
             break;
         //...
     }

public/js/RoomClient.js

@@ -847,10 +847,10 @@ class RoomClient {
         this.popupPeerInfo(p.id, this.peer_info);
         this.checkPeerInfoStatus(this.peer_info);
         if (participantsCount <= 3 && type === mediaType.screen) {
-            this.peerAction('me', this.peer_id + '___sStart', 'screenStart', true, true);
+            this.peerAction('me', this.peer_id + '___sStart', 'screenStart', true, true, false);
             setAspectRatio(2); // 16:9
         } else {
-            this.peerAction('me', this.peer_id + '___sStop', 'screenStop', true, true);
+            this.peerAction('me', this.peer_id + '___sStop', 'screenStop', true, true, false);
             handleAspectRatio();
         }
         console.log('[addProducer] Video-element-count', this.videoMediaContainer.childElementCount);
@@ -2714,7 +2714,7 @@ class RoomClient {
     // PEER ACTION
     // ####################################################
 
-    peerAction(from_peer_name, id, action, emit = true, broadcast = false) {
+    peerAction(from_peer_name, id, action, emit = true, broadcast = false, info = true) {
         const words = id.split('___');
         let peer_id = words[0];
 
@@ -2727,7 +2727,7 @@ class RoomClient {
             };
 
             if (!this.thereIsParticipants()) {
-                this.userLog('info', 'No participants detected', 'top-end');
+                if (info) this.userLog('info', 'No participants detected', 'top-end');
                 return;
             }
             this.confirmPeerAction(action, data);

public/view/Room.html

@@ -344,7 +344,7 @@ access to use this app.
         <section id="chatRoom" class="chat-room center fadein">
             <section id="msger" class="msger">
                 <header id="chatHeader" class="chat-header">
-                    <div class="chat-header-title"><i class="fas fa-comment-alt"></i> Chat</div>
+                    <div class="chat-header-title"><i class="fas fa-comment-alt"></i>&nbsp; Chat</div>
                     <div class="chat-header-options">
                         <button id="chatSaveButton" class="fas fa-save"></button>
                         <button id="chatCleanButton" class="fas fa-trash"></button>