[mirotalksfu] - pitch bar on-off, update dep

package.json

@@ -42,7 +42,7 @@
         "crypto-js": "4.1.1",
         "express": "4.18.2",
         "httpolyglot": "0.1.2",
-        "mediasoup": "3.11.18",
+        "mediasoup": "3.11.19",
         "mediasoup-client": "3.6.82",
         "ngrok": "^4.3.3",
         "qs": "6.11.1",

public/css/Room.css

@@ -284,6 +284,7 @@ body {
     cursor: pointer;
 }
 
+#pitchBarButton,
 #soundsButton,
 #lobbyButton {
     padding: 10px;

public/js/Room.js

@@ -78,6 +78,7 @@ let notify = getNotify();
 let peer_geo = null;
 let peer_info = null;
 
+let isPitchBarEnabled = true;
 let isSoundEnabled = true;
 let isLobbyEnabled = false;
 let isLobbyOpen = false;
@@ -150,7 +151,9 @@ function initClient() {
             'Lobby mode lets you protect your meeting by only allowing people to enter after a formal approval by a moderator',
             'right',
         );
+        setTippy('switchPitchBar', 'Toggle audio pitch bar', 'right');
         setTippy('switchSounds', 'Toggle the sounds notifications', 'right');
+        setTippy('switchPitchBar', 'Toggle audio pitch bar', 'right');
         setTippy('whiteboardGhostButton', 'Toggle transparent background', 'bottom');
         setTippy('wbBackgroundColorEl', 'Background color', 'bottom');
         setTippy('wbDrawingColorEl', 'Drawing color', 'bottom');
@@ -1253,6 +1256,9 @@ function handleSelects() {
         lS.setLocalStorageDevices(lS.MEDIA_TYPE.speaker, initSpeakerSelect.selectedIndex, initSpeakerSelect.value);
     };
     // room
+    switchPitchBar.onchange = (e) => {
+        isPitchBarEnabled = e.currentTarget.checked;
+    };
     switchSounds.onchange = (e) => {
         isSoundEnabled = e.currentTarget.checked;
     };

public/js/RoomClient.js

@@ -3932,6 +3932,7 @@ class RoomClient {
     // ####################################################
 
     handleAudioVolume(data) {
+        if (!isPitchBarEnabled) return;
         let peerId = data.peer_id;
         let peerName = data.peer_name;
         let producerAudioBtn = this.getId(peerId + '_audio');

public/views/Room.html

@@ -224,6 +224,12 @@ access to use this app.
                             <label class="form-check-label" style="color: #fff" for="switchLobby">&nbsp;Lobby</label>
                         </div>
                     </div>
+                    <div id="pitchBarButton">
+                        <div class="form-check form-switch form-switch-md">
+                            <input class="form-check-input" type="checkbox" id="switchPitchBar" checked />
+                            <label class="form-check-label" style="color: #fff" for="switchPitchBar">&nbsp;Audio pitch bar</label>
+                        </div>
+                    </div>
                     <div id="soundsButton">
                         <div class="form-check form-switch form-switch-md">
                             <input class="form-check-input" type="checkbox" id="switchSounds" checked />