From 1ceae44e692185d173ea8ad1657c12f8e176b29d Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Thu, 6 Apr 2023 03:21:13 +0200
Subject: [PATCH] Select/Button for Audio/Video Settings

---
 lib.js   | 16 ++++++++--------
 main.css | 51 ++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/lib.js b/lib.js
index 0bb08e1..63d61d0 100644
--- a/lib.js
+++ b/lib.js
@@ -16236,8 +16236,8 @@ function createControlBox(UUID, soloLink, streamID) {
 	iframeDetails.id = "iframeDetails_" + UUID; // needed to delete on user disconnect
 	iframeDetails.className = "iframeDetails hidden";
 
-	controls.innerHTML += "<div id='advanced_audio_director_" + UUID + "' class='hidden advDirectGuestSettings'></div>";
-	controls.innerHTML += "<div id='advanced_video_director_" + UUID + "' class='hidden advDirectGuestSettings'></div>";
+	controls.innerHTML += "<div id='advanced_audio_director_" + UUID + "' class='hidden advancedAudioSettings'></div>";
+	controls.innerHTML += "<div id='advanced_video_director_" + UUID + "' class='hidden advancedVideoSettings'></div>";
 
 	var handsID = "hands_" + UUID;
 
@@ -17971,7 +17971,7 @@ function gotDevicesRemote(deviceInfos, UUID) {
 		} else {
 			var videoSelect = document.createElement("select");
 			videoSelect.id = "remoteVideoSelect_"+UUID;
-			videoSelect.style = "max-width:170px;font-size: 70% !important; margin: 5px 5px 5px 0; padding:2px;";
+			videoSelect.style = "font-size: 70% !important;";
 			
 			
 			
@@ -18013,7 +18013,7 @@ function gotDevicesRemote(deviceInfos, UUID) {
 		} else {
 			var audioSelect = document.createElement("select");
 			audioSelect.id = "remoteAudioSelect_"+UUID;
-			audioSelect.style = "max-width:170px;font-size: 70% !important; margin: 5px 5px 5px 0; padding:2px;";
+			audioSelect.style = "font-size: 70% !important;";
 			
 			
 			audioSelect.onchange = function(){
@@ -18029,7 +18029,7 @@ function gotDevicesRemote(deviceInfos, UUID) {
 			
 			var buttonGO = document.createElement("button");
 			buttonGO.innerHTML = '<i class="las la-microphone-alt"></i> refresh';
-			buttonGO.style = "padding: 5px;";
+			// buttonGO.style = "padding: 5px;";
 			buttonGO.title = "This will refresh the current device";
 			buttonGO.id = "requestAudioDevice_"+UUID;
 			
@@ -18055,7 +18055,7 @@ function gotDevicesRemote(deviceInfos, UUID) {
 		} else {
 			var audioOutputSelect = document.createElement("select");
 			audioOutputSelect.id = "remoteAudioOutputSelect_"+UUID;
-			audioOutputSelect.style = "max-width:170px;font-size: 70% !important; margin: 5px 5px 5px 0; padding:2px;";
+			audioOutputSelect.style = "font-size: 70% !important;";
 			
 			audioOutputSelect.onchange = function(){
 				if (session.rpcs[UUID].stats.info && session.rpcs[UUID].stats.info.consent){
@@ -34930,8 +34930,8 @@ function createControlBoxScreenshare(UUID, soloLink, streamID) {
 	iframeDetails.id = "iframeDetails_" + UUID; // needed to delete on user disconnect
 	iframeDetails.className = "iframeDetails hidden";
 
-	controls.innerHTML += "<div id='advanced_audio_director_" + UUID + "' class='hidden advDirectGuestSettings'></div>";
-	controls.innerHTML += "<div id='advanced_video_director_" + UUID + "' class='hidden advDirectGuestSettings'></div>";
+	controls.innerHTML += "<div id='advanced_audio_director_" + UUID + "' class='hidden advancedAudioSettings'></div>";
+	controls.innerHTML += "<div id='advanced_video_director_" + UUID + "' class='hidden advancedVideoSettings'></div>";
 
 	var handsID = "hands_" + UUID;
 
diff --git a/main.css b/main.css
index 17dbf0a..262a53b 100644
--- a/main.css
+++ b/main.css
@@ -587,15 +587,60 @@ body.darktheme .credits>a:visited {
 	background-color: black;
 }
 
-.advDirectGuestSettings {
-    padding: 10px 5px;
+.advancedAudioSettings, .advancedVideoSettings {
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
     max-height: 400px;
     overflow-y: auto;
     border-radius: 0px 0px 4px 4px;
     background-color: #222;
+    width: 100%;
+}
+.advancedAudioSettings div {
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    gap: 4px;
+    padding: 4px;
+}
+.advancedAudioSettings div button {
+    padding: 4px;
+    height: 24px;
+    margin: unset;
+    flex: 1;
 }
 
-.darktheme .advDirectGuestSettings label {
+.advancedAudioSettings div select {
+    width: 100%;
+    border-radius: 4px;
+    flex: 2;
+    height: 24px;
+
+}
+.advancedVideoSettings div:nth-child(2) {
+    display: flex;
+    width: 100%;
+    padding: 4px;
+    align-items: center;
+    gap: 4px;
+}
+
+.advancedVideoSettings div:nth-child(2) select {
+    width: 100%;
+    flex: 2;
+    height: 24px;
+    border-radius: 4px;
+}
+
+.advancedVideoSettings div:nth-child(2) button { 
+    width: 100%;
+    flex: 1;
+    height: 24px;
+    margin: unset;
+}
+
+.darktheme .advancedAudioSettings label, .darktheme .advancedVideoSettings label {
 	color: #FFF;
 }