[mirotalksfu] - UI + update dep. + fix

app/src/Server.js

@@ -665,6 +665,9 @@ io.on('connection', (socket) => {
         if (!roomList.has(socket.room_id)) return;
 
         log.debug('Producer close', data);
+
+        // peer_info audio Or video ON
+        roomList.get(socket.room_id).getPeers().get(socket.id).updatePeerInfo(data);
         roomList.get(socket.room_id).closeProducer(socket.id, data.producer_id);
     });
 

package.json

@@ -30,11 +30,11 @@
         "express": "4.18.1",
         "httpolyglot": "0.1.2",
         "mediasoup": "3.10.5",
-        "mediasoup-client": "3.6.54",
+        "mediasoup-client": "3.6.55",
         "ngrok": "4.3.1",
         "qs": "^6.11.0",
-        "@sentry/node": "7.8.0",
-        "@sentry/integrations": "7.8.0",
+        "@sentry/node": "7.8.1",
+        "@sentry/integrations": "7.8.1",
         "socket.io": "4.5.1",
         "swagger-ui-express": "4.5.0",
         "uuid": "8.3.2",

public/css/Room.css

@@ -43,9 +43,9 @@
     --wb-width: 800px;
     --wb-height: 600px;
     --wb-bg: radial-gradient(#393939, #000000);
-    --left-msg-bg: #2a2a2a;
-    --right-msg-bg: #0a0b0c;
-    --private-msg-bg: #510717;
+    --left-msg-bg: #252d31;
+    --right-msg-bg: #056162;
+    --private-msg-bg: #6b1226;
     --box-shadow: 0px 8px 16px 0px rgb(0 0 0);
     --btns-hover-scale: scale(1.1);
     /* buttons bar horizontal */
@@ -653,10 +653,11 @@ button:hover {
     width: 100%;
     padding: 10px;
     margin: 10px auto 0px auto;
-    background-color: #191919;
+    background-color: #056162;
     border-radius: 10px;
 }
 #inviteParticipants:hover {
+    background-color: #191919;
     color: #fff;
     transform: scale(1);
 }
@@ -820,7 +821,7 @@ progress {
     border-radius: 6px;
     background: rgba(#19bb5c, 0.65);
     transition-property: height background-color;
-    transition-duration: 0.25s;
+    transition-duration: 1s;
 }
 
 /*--------------------------------------------------------------

public/js/RoomClient.js

@@ -1176,7 +1176,7 @@ class RoomClient {
         d.className = 'Camera';
         d.id = peer_id + '__videoOff';
         vb = document.createElement('div');
-        vb.setAttribute('id', this.peer_id + 'vb');
+        vb.setAttribute('id', peer_id + 'vb');
         vb.className = 'videoMenuBar fadein';
         au = document.createElement('button');
         au.id = peer_id + '__audio';