[mirotalksfu] - add keep buttons

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.85
+ * @version 1.6.86
  *
  */
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.6.85",
+    "version": "1.6.86",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {
@@ -58,7 +58,7 @@
     },
     "dependencies": {
         "@mattermost/client": "^10.2.0",
-        "@sentry/node": "^8.47.0",
+        "@sentry/node": "^8.48.0",
         "axios": "^1.7.9",
         "colors": "1.4.0",
         "compression": "1.7.5",

public/js/LocalStorage.js

@@ -44,6 +44,7 @@ class LocalStorage {
             lobby: false, // default false
             pitch_bar: true, // volume indicator
             sounds: true, // room notify sounds
+            keep_buttons_visible: false, // Keep buttons always visible
             host_only_recording: false, // presenter
             rec_prioritize_h264: false, // Prioritize h.264 with AAC or h.264 with Opus codecs over VP8 with Opus or VP9 with Opus codecs
             rec_server: false, // The recording will be stored on the server rather than locally

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.85
+ * @version 1.6.86
  *
  */
 
@@ -206,6 +206,7 @@ let isPushToTalkActive = false;
 let isSpaceDown = false;
 let isPitchBarEnabled = true;
 let isSoundEnabled = true;
+let isKeepButtonsVisible = false;
 let isBroadcastingEnabled = false;
 let isLobbyEnabled = false;
 let isLobbyOpen = false;
@@ -300,6 +301,7 @@ function initClient() {
         setTippy('switchPitchBar', 'Toggle audio pitch bar', 'right');
         setTippy('switchSounds', 'Toggle the sounds notifications', 'right');
         setTippy('switchShare', "Show 'Share Room' popup on join", 'right');
+        setTippy('switchKeepButtonsVisible', 'Keep buttons always visible', 'right');
         setTippy('roomId', 'Room name (click to copy)', 'right');
         setTippy('sessionTime', 'Session time', 'right');
         setTippy('recordingImage', 'Toggle recording', 'right');
@@ -2513,6 +2515,15 @@ function handleSelects() {
         lS.setSettings(localStorageSettings);
         e.target.blur();
     };
+    switchKeepButtonsVisible.onchange = (e) => {
+        isButtonsBarOver = isKeepButtonsVisible = e.currentTarget.checked;
+        localStorageSettings.keep_buttons_visible = isButtonsBarOver;
+        lS.setSettings(localStorageSettings);
+        checkButtonsBar();
+        const status = isButtonsBarOver ? 'enabled' : 'disabled';
+        userLog('info', `Buttons always visible ${status}`, 'top-end');
+        e.target.blur();
+    };
     // audio options
     switchAutoGainControl.onchange = (e) => {
         localStorageSettings.mic_auto_gain_control = e.currentTarget.checked;
@@ -2954,12 +2965,14 @@ function loadSettingsFromLocalStorage() {
     rc.speechInMessages = localStorageSettings.speech_in_msg;
     isPitchBarEnabled = localStorageSettings.pitch_bar;
     isSoundEnabled = localStorageSettings.sounds;
+    isKeepButtonsVisible = localStorageSettings.keep_buttons_visible;
     showChatOnMsg.checked = rc.showChatOnMessage;
     transcriptShowOnMsg.checked = transcription.showOnMessage;
     speechIncomingMsg.checked = rc.speechInMessages;
     switchPitchBar.checked = isPitchBarEnabled;
     switchSounds.checked = isSoundEnabled;
     switchShare.checked = notify;
+    switchKeepButtonsVisible.checked = isKeepButtonsVisible;
 
     recPrioritizeH264 = localStorageSettings.rec_prioritize_h264;
     switchH264Recording.checked = recPrioritizeH264;
@@ -3337,12 +3350,25 @@ function showButtons() {
 }
 
 function checkButtonsBar() {
-    if (!isButtonsBarOver) {
+    if (localStorageSettings.keep_buttons_visible) {
-        control.style.display = 'none';
+        control.style.display = 'flex';
         toggleExtraButton.innerHTML = icons.up;
-        bottomButtons.style.display = 'none';
+        bottomButtons.style.display = 'flex';
-        isButtonsVisible = false;
+        isButtonsVisible = true;
+    } else {
+        if (!isButtonsBarOver) {
+            control.style.display = 'none';
+            toggleExtraButton.innerHTML = icons.up;
+            bottomButtons.style.display = 'none';
+            isButtonsVisible = false;
+        }
     }
+    // if (!isButtonsBarOver) {
+    //     control.style.display = 'none';
+    //     toggleExtraButton.innerHTML = icons.up;
+    //     bottomButtons.style.display = 'none';
+    //     isButtonsVisible = false;
+    // }
     setTimeout(() => {
         checkButtonsBar();
     }, 10000);
@@ -4676,7 +4702,7 @@ function showAbout() {
         imageUrl: image.about,
         customClass: { image: 'img-about' },
         position: 'center',
-        title: 'WebRTC SFU v1.6.85',
+        title: 'WebRTC SFU v1.6.86',
         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.6.85
+ * @version 1.6.86
  *
  */
 

public/views/Room.html

@@ -351,6 +351,19 @@ access to use this app.
                                     </div>
                                 </td>
                             </tr>
+                            <tr id="keepButtonsVisibleButton">
+                                <td class="custom-width">
+                                    <div class="title">
+                                        <i class="fas fa-eye"></i>
+                                        <p>Buttons</p>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-check form-switch form-switch-md">
+                                        <input id="switchKeepButtonsVisible" class="form-check-input" type="checkbox" />
+                                    </div>
+                                </td>
+                            </tr>
                         </table>
                         <hr />
                         <table class="settingsTable">