[mirotalksfu] - improve settings UI

public/css/Room.css

@@ -440,7 +440,7 @@ th {
 }
 
 /* on open display devices tab */
-#tabDevices {
+#tabVideoDevices {
     display: block;
 }
 

public/js/Room.js

@@ -146,7 +146,8 @@ function initClient() {
         setTippy('aboutButton', 'About this project', 'right');
         setTippy('exitButton', 'Leave room', 'right');
         setTippy('mySettingsCloseBtn', 'Close', 'right');
-        setTippy('tabDevicesBtn', 'Devices', 'top');
+        setTippy('tabVideoDevicesBtn', 'Video devices', 'top');
+        setTippy('tabAudioDevicesBtn', 'Audio devices', 'top');
         setTippy('tabRecordingBtn', 'Recording', 'top');
         setTippy('tabRoomBtn', 'Room', 'top');
         setTippy('tabVideoShareBtn', 'Video share', 'top');
@@ -953,8 +954,11 @@ function handleButtons() {
     mySettingsCloseBtn.onclick = () => {
         rc.toggleMySettings();
     };
-    tabDevicesBtn.onclick = (e) => {
-        rc.openTab(e, 'tabDevices');
+    tabVideoDevicesBtn.onclick = (e) => {
+        rc.openTab(e, 'tabVideoDevices');
+    };
+    tabAudioDevicesBtn.onclick = (e) => {
+        rc.openTab(e, 'tabAudioDevices');
     };
     tabRecordingBtn.onclick = (e) => {
         rc.openTab(e, 'tabRecording');

public/views/Room.html

@@ -146,8 +146,11 @@ access to use this app.
             </header>
             <main class="mySettingsMain">
                 <div class="tab">
-                    <button id="tabDevicesBtn" class="fas fa-cog tablinks">
-                        <p class="tabButtonText">Device</p>
+                    <button id="tabVideoDevicesBtn" class="fas fa-video tablinks">
+                        <p class="tabButtonText">Video</p>
+                    </button>
+                    <button id="tabAudioDevicesBtn" class="fas fa-microphone tablinks">
+                        <p class="tabButtonText">Audio</p>
                     </button>
                     <button id="tabRoomBtn" class="fas fa-home tablinks">
                         <p class="tabButtonText">Room</p>
@@ -170,7 +173,7 @@ access to use this app.
                 </div>
 
                 <div class="tabActions">
-                    <div id="tabDevices" class="tabcontent">
+                    <div id="tabVideoDevices" class="tabcontent">
                         <br />
                         <i class="fas fa-video"></i>
                         <p>Video Source:</p>
@@ -188,6 +191,10 @@ access to use this app.
                             <option value="4k">🎥&nbsp;4K</option>
                         </select>
                         <br />
+                    </div>
+
+                    <div id="tabAudioDevices" class="tabcontent">
+                        <br />
                         <i class="fas fa-microphone"></i>
                         <p>Microphone:</p>
                         <select id="microphoneSelect" class="form-select text-light bg-dark"></select>
@@ -198,6 +205,7 @@ access to use this app.
                             <select id="speakerSelect" class="form-select text-light bg-dark"></select>
                             <br />
                         </div>
+                        <br />
                     </div>
 
                     <div id="tabRoom" class="tabcontent">