[mirotalksfu] - add chat/wb transparent bg

public/css/Room.css

@@ -48,6 +48,7 @@
     --private-msg-bg: #6b1226;
     --box-shadow: 0px 8px 16px 0px rgb(0 0 0);
     --btns-hover-scale: scale(1.1);
+    --settings-bg: radial-gradient(#393939, #000000);
     /* buttons bar horizontal */
     --btns-top: 50%;
     --btns-right: 0%;
@@ -186,7 +187,7 @@ body {
     padding: 10px;
     min-width: 320px;
     min-height: 480px;
-    background: var(--msger-bg);
+    background: var(--settings-bg);
     box-shadow: var(--box-shadow);
     border: var(--border);
     border-radius: 10px;

public/js/Room.js

@@ -58,6 +58,7 @@ const swalImageUrl = '../images/pricing-illustration.svg';
 // DYNAMIC SETTINGS
 // ####################################################
 
+let currentTheme = 'dark';
 let swalBackground = 'radial-gradient(#393939, #000000)'; //'rgba(0, 0, 0, 0.7)';
 
 let rc = null;
@@ -93,6 +94,7 @@ let wbIsDrawing = false;
 let wbIsOpen = false;
 let wbIsRedoing = false;
 let wbIsEraser = false;
+let wbIsBgTransparent = false;
 let wbPop = [];
 
 let isButtonsVisible = false;
@@ -124,6 +126,7 @@ function initClient() {
         setTippy('tabVideoShareBtn', 'Video share', 'top');
         setTippy('tabAspectBtn', 'Aspect', 'top');
         setTippy('tabStylingBtn', 'Styling', 'top');
+        setTippy('whiteboardGhostButton', 'Toggle transparent background', 'top');
         setTippy('wbBackgroundColorEl', 'Background color', 'top');
         setTippy('wbDrawingColorEl', 'Drawing color', 'top');
         setTippy('whiteboardPencilBtn', 'Drawing mode', 'top');
@@ -147,6 +150,7 @@ function initClient() {
         setTippy('chatShareFileButton', 'Share file', 'top');
         setTippy('chatCleanButton', 'Clean', 'bottom');
         setTippy('chatSaveButton', 'Save', 'bottom');
+        setTippy('chatGhostButton', 'Toggle transparent background', 'top');
         setTippy('sessionTime', 'Session time', 'right');
     }
     setupWhiteboard();
@@ -772,6 +776,9 @@ function handleButtons() {
     chatButton.onclick = () => {
         rc.toggleChat();
     };
+    chatGhostButton.onclick = (e) => {
+        rc.chatToggleBg();
+    };
     chatCleanButton.onclick = () => {
         rc.chatClean();
     };
@@ -868,6 +875,9 @@ function handleButtons() {
     whiteboardButton.onclick = () => {
         toggleWhiteboard();
     };
+    whiteboardGhostButton.onclick = (e) => {
+        wbToggleBg();
+    };
     whiteboardPencilBtn.onclick = () => {
         whiteboardIsDrawingMode(true);
     };
@@ -1585,6 +1595,15 @@ function whiteboardAction(data, emit = true) {
     }
 }
 
+function wbToggleBg(e) {
+    wbIsBgTransparent = !wbIsBgTransparent;
+    if (wbIsBgTransparent) {
+        document.documentElement.style.setProperty('--wb-bg', 'rgba(0, 0, 0, 0.100)');
+    } else {
+        setTheme(currentTheme);
+    }
+}
+
 // ####################################################
 // HANDLE PARTICIPANTS
 // ####################################################
@@ -1767,6 +1786,7 @@ function setTheme(theme) {
             swalBackground = 'radial-gradient(#393939, #000000)';
             document.documentElement.style.setProperty('--body-bg', 'radial-gradient(#393939, #000000)');
             document.documentElement.style.setProperty('--msger-bg', 'radial-gradient(#393939, #000000)');
+            document.documentElement.style.setProperty('--settings-bg', 'radial-gradient(#393939, #000000)');
             document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#393939, #000000)');
             document.body.style.background = 'radial-gradient(#393939, #000000)';
             break;
@@ -1774,11 +1794,15 @@ function setTheme(theme) {
             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('--settings-bg', 'radial-gradient(#666, #333)');
             document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#797979, #000)');
             document.body.style.background = 'radial-gradient(#666, #333)';
             break;
         //...
     }
+    currentTheme = theme;
+    wbIsBgTransparent = false;
+    rc.isChatBgTransparent = false;
 }
 
 // ####################################################

public/js/RoomClient.js

@@ -30,6 +30,9 @@ const html = {
     sendMsg: 'fas fa-paper-plane',
     sendVideo: 'fab fa-youtube',
     kickOut: 'fas fa-times',
+    ghost: 'fas fa-ghost',
+    undo: 'fas fa-undo',
+    bg: 'fas fa-circle-half-stroke',
 };
 
 const image = {
@@ -149,6 +152,7 @@ class RoomClient {
         this.isVideoOnFullScreen = false;
         this.isChatOpen = false;
         this.isChatEmojiOpen = false;
+        this.isChatBgTransparent = false;
         this.camVideo = false;
         this.camera = 'user';
 
@@ -2072,6 +2076,15 @@ class RoomClient {
         });
     }
 
+    chatToggleBg() {
+        this.isChatBgTransparent = !this.isChatBgTransparent;
+        if (this.isChatBgTransparent) {
+            document.documentElement.style.setProperty('--msger-bg', 'rgba(0, 0, 0, 0.100)');
+        } else {
+            setTheme(currentTheme);
+        }
+    }
+
     chatClean() {
         Swal.fire({
             background: swalBackground,

public/views/Room.html

@@ -320,6 +320,7 @@
                     <button id="whiteboardCloseBtn" class="fas fa-times"></button>
                 </div>
                 <div class="whiteboard-header-options">
+                    <button id="whiteboardGhostButton" class="fas fa-circle-half-stroke"></button>
                     <input id="wbBackgroundColorEl" class="whiteboardColorPicker" type="color" value="#000000" />
                     <input id="wbDrawingColorEl" class="whiteboardColorPicker" type="color" value="#FFFFFF" />
                     <button id="whiteboardPencilBtn" class="fas fa-pencil-alt"></button>
@@ -347,6 +348,7 @@
                 <header id="chatHeader" class="chat-header">
                     <div class="chat-header-title"><i class="fas fa-comment-alt"></i>&nbsp; Chat</div>
                     <div class="chat-header-options">
+                        <button id="chatGhostButton" class="fas fa-circle-half-stroke"></button>
                         <button id="chatSaveButton" class="fas fa-save"></button>
                         <button id="chatCleanButton" class="fas fa-trash"></button>
                         <button id="chatCloseButton" class="fas fa-times"></button>