[mirotalksfu] - add dimmed ui effect

public/css/VideoGrid.css

@@ -10,12 +10,14 @@
     width: 100%;
     height: 100%;
     border-radius: 5px;
+    opacity: 1;
     align-content: center;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     vertical-align: middle;
     overflow: hidden;
+    transition: opacity 500ms;
     /* border: 3px solid blue; */
 }
 

public/js/Room.js

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.7.01
+ * @version 1.7.02
  *
  */
 
@@ -4904,7 +4904,7 @@ function showAbout() {
         imageUrl: image.about,
         customClass: { image: 'img-about' },
         position: 'center',
-        title: 'WebRTC SFU v1.7.01',
+        title: 'WebRTC SFU v1.7.02',
         html: `
         <br />
         <div id="about">

public/js/RoomClient.js

@@ -9,7 +9,7 @@
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.7.01
+ * @version 1.7.02
  *
  */
 
@@ -3395,7 +3395,8 @@ class RoomClient {
             mySettings.style.height = '100%';
         }
         mySettings.classList.toggle('show');
-        this.isMySettingsOpen = this.isMySettingsOpen ? false : true;
+        this.isMySettingsOpen = !this.isMySettingsOpen;
+        this.videoMediaContainer.style.opacity = this.isMySettingsOpen ? 0.3 : 1;
     }
 
     openTab(evt, tabName) {