From 02d9095246bf13fc4540b1a79f263de739a71ca7 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Thu, 24 Aug 2023 17:35:59 +0200
Subject: [PATCH] [mirotalksfu] - improve settings UI

---
 public/css/Room.css    |  2 +-
 public/js/Room.js      | 10 +++++++---
 public/views/Room.html | 14 +++++++++++---
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/public/css/Room.css b/public/css/Room.css
index 38d0506f..dd558aeb 100644
--- a/public/css/Room.css
+++ b/public/css/Room.css
@@ -440,7 +440,7 @@ th {
 }
 
 /* on open display devices tab */
-#tabDevices {
+#tabVideoDevices {
     display: block;
 }
 
diff --git a/public/js/Room.js b/public/js/Room.js
index 69972f98..f1ef2104 100644
--- a/public/js/Room.js
+++ b/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');
diff --git a/public/views/Room.html b/public/views/Room.html
index 6a624b06..7d92c798 100644
--- a/public/views/Room.html
+++ b/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">