From 768fa77ac6be95cbb414a4ef7b1c93a8099cfb2e Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Thu, 7 Nov 2024 13:20:45 +0100
Subject: [PATCH] [mirotalksfu] - fix settings moderator UI 4 mobile

---
 app/src/Server.js       |  2 +-
 package.json            |  2 +-
 public/css/Room.css     | 23 ++++++++++++++++++-----
 public/js/Room.js       |  4 ++--
 public/js/RoomClient.js |  9 +++++++++
 5 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/app/src/Server.js b/app/src/Server.js
index 544b5ed3..e0765430 100644
--- a/app/src/Server.js
+++ b/app/src/Server.js
@@ -55,7 +55,7 @@ dev dependencies: {
  * @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.6.24
+ * @version 1.6.25
  *
  */
 
diff --git a/package.json b/package.json
index c363e6db..2b9a4e7e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.6.24",
+    "version": "1.6.25",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {
diff --git a/public/css/Room.css b/public/css/Room.css
index e4ab3dd7..35f19fc1 100644
--- a/public/css/Room.css
+++ b/public/css/Room.css
@@ -431,17 +431,19 @@ body {
     color: #fff;
     table-layout: fixed;
     border-collapse: collapse;
+    border-radius: 10px;
     border-style: hidden;
+    background: var(--body-bg);
 }
 .settingsTable td,
 th {
     text-align: left;
-    padding: 5px;
+    padding: 10px;
     /* border: 1px solid grey; */
 }
-.settingsTable tr:nth-child(even) {
-    /* background-color: #121212; */
-}
+/* .settingsTable tr:nth-child(even) {
+    background: var(--select-bg);
+} */
 .settingsTable i {
     border: none;
     border-radius: 5px;
@@ -1453,10 +1455,21 @@ hr {
 }
 
 .wa {
-    /* width: auto; */
     width: 320px;
 }
 
+@media screen and (max-width: 500px) {
+    .wa {
+        width: 310px;
+    }
+}
+
+@media screen and (max-width: 420px) {
+    .wa {
+        width: 200px;
+    }
+}
+
 .ml-5 {
     margin: 5px;
 }
diff --git a/public/js/Room.js b/public/js/Room.js
index 99afa5aa..dd7dcae6 100644
--- a/public/js/Room.js
+++ b/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.6.24
+ * @version 1.6.25
  *
  */
 
@@ -4564,7 +4564,7 @@ function showAbout() {
         imageUrl: image.about,
         customClass: { image: 'img-about' },
         position: 'center',
-        title: 'WebRTC SFU v1.6.24',
+        title: 'WebRTC SFU v1.6.25',
         html: `
         <br />
         <div id="about">
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
index 7653f9fb..cd9c151d 100644
--- a/public/js/RoomClient.js
+++ b/public/js/RoomClient.js
@@ -446,7 +446,10 @@ class RoomClient {
                     console.log('00-WARNING ----> You are Banned from the Room!');
                     return this.isBanned();
                 }
+                // ##########################################
                 this.peers = new Map(JSON.parse(room.peers));
+                // ##########################################
+
                 if (!peer_info.peer_token) {
                     // hack...
                     for (let peer of Array.from(this.peers.keys()).filter((id) => id !== this.peer_id)) {
@@ -1961,7 +1964,9 @@ class RoomClient {
                 //d.appendChild(vb);
                 document.body.appendChild(vb);
                 this.videoMediaContainer.appendChild(d);
+
                 await this.attachMediaStream(elem, stream, type, 'Producer');
+
                 this.myVideoEl = elem;
                 this.isVideoPictureInPictureSupported && this.handlePIP(elem.id, pip.id);
                 this.isVideoFullScreenSupported && this.handleFS(elem.id, fs.id);
@@ -2010,6 +2015,7 @@ class RoomClient {
                 elem.volume = 0;
                 this.myAudioEl = elem;
                 this.localAudioEl.appendChild(elem);
+
                 await this.attachMediaStream(elem, stream, type, 'Producer');
 
                 const audioConsumerId = this.peer_id + '___pVolume';
@@ -2432,7 +2438,9 @@ class RoomClient {
                 //d.appendChild(vb);
                 document.body.appendChild(vb);
                 this.videoMediaContainer.appendChild(d);
+
                 await this.attachMediaStream(elem, stream, type, 'Consumer');
+
                 this.isVideoPictureInPictureSupported && this.handlePIP(elem.id, pip.id);
                 this.isVideoFullScreenSupported && this.handleFS(elem.id, fs.id);
                 this.handleVB(d.id, vb.id);
@@ -2509,6 +2517,7 @@ class RoomClient {
                 elem.autoplay = true;
                 elem.audio = 1.0;
                 this.remoteAudioEl.appendChild(elem);
+
                 await this.attachMediaStream(elem, stream, type, 'Consumer');
 
                 // Store audio consumer and set volume