[mirotalksfu] - made settable popup Share Room on join, add loading

public/js/LocalStorage.js

@@ -16,12 +16,13 @@ class LocalStorage {
         };
 
         this.SFU_SETTINGS = {
-            show_chat_on_msg: true,
+            share_on_join: true, // popup message on join
+            show_chat_on_msg: true, // show chat on new message
             video_fps: 0, // default 1280x768 30fps
             screen_fps: 0, // max 30fps
-            lobby: false,
-            pitch_bar: true,
-            sounds: true,
+            lobby: false, // default false
+            pitch_bar: true, // volume indicator
+            sounds: true, // room notify sounds
             video_obj_fit: 2, // cover
             video_controls: 0, // off
             theme: 0, // dark

public/js/Room.js

@@ -60,6 +60,7 @@ const lS = new LocalStorage();
 // Get Settings from localStorage
 const localStorageSettings = lS.getObjectLocalStorage('SFU_SETTINGS');
 const lsSettings = localStorageSettings ? localStorageSettings : lS.SFU_SETTINGS;
+console.log('LS_SETTINGS', lsSettings);
 
 // ####################################################
 // DYNAMIC SETTINGS
@@ -175,6 +176,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('roomId', 'Room name', 'right');
         setTippy('sessionTime', 'Session time', 'right');
         setTippy('whiteboardGhostButton', 'Toggle transparent background', 'bottom');
@@ -461,8 +463,9 @@ function getNotify() {
             return queryNotify;
         }
     }
-    console.log('Direct join', { notify: true });
-    return true;
+    notify = lsSettings.share_on_join;
+    console.log('Direct join', { notify: notify });
+    return notify;
 }
 
 function isPeerPresenter() {
@@ -1492,6 +1495,13 @@ function handleSelects() {
         lS.setSettings(lsSettings);
         e.target.blur();
     };
+    switchShare.onchange = (e) => {
+        notify = e.currentTarget.checked;
+        rc.roomMessage('notify', notify);
+        lsSettings.share_on_join = notify;
+        lS.setSettings(lsSettings);
+        e.target.blur();
+    };
     // styling
     BtnAspectRatio.onchange = () => {
         setAspectRatio(BtnAspectRatio.value);
@@ -1608,6 +1618,7 @@ function loadSettingsFromLocalStorage() {
     showChatOnMsg.checked = rc.showChatOnMessage;
     switchPitchBar.checked = isPitchBarEnabled;
     switchSounds.checked = isSoundEnabled;
+    switchShare.checked = notify;
     videoFps.selectedIndex = lsSettings.video_fps;
     screenFps.selectedIndex = lsSettings.screen_fps;
     BtnVideoObjectFit.selectedIndex = lsSettings.video_obj_fit;

public/js/RoomClient.js

@@ -42,6 +42,7 @@ const html = {
 };
 
 const icons = {
+    share: '<i class="fas fa-share-alt"></i>',
     ptt: '<i class="fa-solid fa-hand-pointer"></i>',
     lobby: '<i class="fas fa-shield-halved"></i>',
     lock: '<i class="fa-solid fa-lock"></i>',
@@ -4031,6 +4032,10 @@ class RoomClient {
                 this.sound('switch');
                 this.userLog('info', `${icons.ptt} Push to talk ${status}`, 'top-end');
                 break;
+            case 'notify':
+                this.sound('switch');
+                this.userLog('info', `${icons.share} Share room on join enabled ${status}`, 'top-end');
+                break;
             default:
                 break;
         }

public/views/Room.html

@@ -87,7 +87,7 @@
 
         <div id="loadingDiv" class="center pulsate">
             <h1>Loading</h1>
-            <img src="../images/loader.gif" style="width: 400px" />
+            <img src="../images/loading.gif" style="width: 400px" />
             <pre>
 Please allow the camera or microphone
 access to use this app.
@@ -245,6 +245,19 @@ access to use this app.
                                     </div>
                                 </td>
                             </tr>
+                            <tr id="shareOnJoinButton">
+                                <td class="custom-width">
+                                    <div class="title">
+                                        <i class="fas fa-share-alt"></i>
+                                        <p>Share</p>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-check form-switch form-switch-md">
+                                        <input id="switchShare" class="form-check-input" type="checkbox" checked />
+                                    </div>
+                                </td>
+                            </tr>
                         </table>
                         <hr style="border: 1px solid grey" />
                         <table class="settingsTable">