[mirotalk] - improve UI, keep settings

public/css/client.css

@@ -952,18 +952,22 @@ em-emoji-picker {
 }
 #mySettingsTable td,
 th {
-    border: var(--border);
-    text-align: center;
-    padding: 10px;
+    padding: 5px;
 }
 #mySettingsTable tr td {
-    width: 100%;
     text-align: left;
 }
 #mySettingsTable tr:nth-child(even) {
     /* background-color: #2b2b2b; */
 }
 
+.width-100 {
+    width: 100px;
+}
+.width-120 {
+    width: 120px;
+}
+
 /*--------------------------------------------------------------
 # Style the tab
 --------------------------------------------------------------*/

public/js/client.js

@@ -3680,6 +3680,8 @@ function setChatRoomBtn() {
         } else {
             msgPopup('info', "Chat not will be shown, when I'm receive a new message", 'top-end', 3000);
         }
+        lsSettings.show_chat_on_msg = showChatOnMessage;
+        lS.setSettings(lsSettings);
     });
 
     // chat send msg
@@ -4041,17 +4043,17 @@ function setupMySettings() {
         videoFpsSelect.addEventListener('change', (e) => {
             videoMaxFrameRate = parseInt(videoFpsSelect.value);
             setLocalMaxFps(videoMaxFrameRate);
+            lsSettings.video_fps = e.currentTarget.selectedIndex;
+            lS.setSettings(lsSettings);
         });
-        // default 30 fps
-        videoFpsSelect.selectedIndex = '1';
     }
     // select screen fps
     screenFpsSelect.addEventListener('change', (e) => {
         screenMaxFrameRate = parseInt(screenFpsSelect.value);
         if (isScreenStreaming) setLocalMaxFps(screenMaxFrameRate);
+        lsSettings.screen_fps = e.currentTarget.selectedIndex;
+        lS.setSettings(lsSettings);
     });
-    // default 30 fps
-    screenFpsSelect.selectedIndex = '1';
 
     // Mobile not support screen sharing
     if (isMobileDevice) {
@@ -4114,6 +4116,10 @@ function setupMySettings() {
  * Load settings from local storage
  */
 function loadSettingsFromLocalStorage() {
+    showChatOnMessage = lsSettings.show_chat_on_msg;
+    msgerShowChatOnMsg.checked = showChatOnMessage;
+    screenFpsSelect.selectedIndex = lsSettings.screen_fps;
+    videoFpsSelect.selectedIndex = lsSettings.video_fps;
     notifyBySound = lsSettings.sounds;
     isAudioPitchBar = lsSettings.pitch_bar;
     switchSounds.checked = notifyBySound;

public/js/localStorage.js

@@ -14,6 +14,9 @@ class LocalStorage {
         };
 
         this.P2P_SETTINGS = {
+            show_chat_on_msg: true,
+            video_fps: 1, // default 30fps
+            screen_fps: 1, // default 30fps
             pitch_bar: true,
             sounds: true,
             video_obj_fit: 2, // cover

public/views/client.html

@@ -286,7 +286,7 @@ access to use this app.
                         <br />
                         <table id="mySettingsTable">
                             <tr>
-                                <td>
+                                <td class="width-100">
                                     <div class="title">
                                         <i class="fas fa-microphone-lines"></i>
                                         <p>Pitch bar</p>
@@ -295,7 +295,7 @@ access to use this app.
                                 <td><input id="switchAudioPitchBar" class="toggle" type="checkbox" checked /></td>
                             </tr>
                             <tr>
-                                <td>
+                                <td class="width-100">
                                     <div class="title">
                                         <i class="fas fa-music"></i>
                                         <p>Sounds</p>
@@ -419,7 +419,7 @@ access to use this app.
                         </div>
                         <table id="mySettingsTable">
                             <tr id="pushToTalkDiv">
-                                <td>
+                                <td class="width-120">
                                     <div class="title">
                                         <i class="fa-solid fa-hand-pointer"></i>
                                         <p>Push to talk</p>