From 474e142908a4d1613d2b871427ffdc8b41ca65c8 Mon Sep 17 00:00:00 2001
From: Joel Calado <joelcalado@gmail.com>
Date: Mon, 8 Feb 2021 21:13:51 +0000
Subject: [PATCH 1/6] tweak /devices CSS

---
 devices.css | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/devices.css b/devices.css
index db6d72b..79a9458 100644
--- a/devices.css
+++ b/devices.css
@@ -9,6 +9,7 @@ h1 {
     padding:10px;
     background-color:#457b9d;
     color:white;
+    border-bottom: 2px solid #3b6a87;
 }
 
 .device {
@@ -18,6 +19,9 @@ h1 {
     font-size: 1rem;
     padding: 10px;
     position: relative;
+    user-select: none;
+    background: #d0d0d0;
+    border-radius: 4px;
 }
 
 .device.selected {
@@ -55,12 +59,13 @@ h1 {
 }
 
 .notice {
-    background-color: orange;
+    background-color: #fff18c;
     margin: 10px;
     padding: 20px 20px;
     font-weight: bold;
     font-size: 1.2em;
     text-align: center;
+    line-height: 1.4em;
 }
 
 .notice a {
@@ -89,7 +94,7 @@ h1 {
     left: 10%;
     color: white;
     overflow-wrap: anywhere;
-    background: #141926;
+    background: #2c3754;
     padding: 20px;
     box-shadow: 0px 0px 10px 5px #00000047;
     border: 1px solid #333c52;

From 864969ebae993b4919f2ebe86833494baaedb8d0 Mon Sep 17 00:00:00 2001
From: Joel Calado <joelcalado@gmail.com>
Date: Mon, 8 Feb 2021 21:14:21 +0000
Subject: [PATCH 2/6] Update devices.html

add some tips to the top notice
---
 devices.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/devices.html b/devices.html
index 49a254c..e1374b7 100644
--- a/devices.html
+++ b/devices.html
@@ -22,7 +22,8 @@
 			<div class="notice">
 				Device IDs are bound to a combination of domain and browser. <br />If
 				you want to use electron-capture, open this URL on the electron-capture
-				app.
+				app. <br/>
+				Click device names to preset them. Select multiple audio inputs by clicking multiple devices.
 			</div>
 			<div class="notice">
 				Check for browser and camera capabilities <a href="/supports">here</a>.

From 838acf07acd182749ce09266c47b5ae7f20c7518 Mon Sep 17 00:00:00 2001
From: Joel Calado <joelcalado@gmail.com>
Date: Mon, 8 Feb 2021 21:14:41 +0000
Subject: [PATCH 3/6] Update devices.html

change text
---
 devices.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/devices.html b/devices.html
index e1374b7..bdf31a0 100644
--- a/devices.html
+++ b/devices.html
@@ -43,6 +43,7 @@
 		</div>
 		<div id="sharedDevices" style="display: none">
 			<span>Click to copy. Send this to your host:</span>
+			<span>Click to copy. Use this URL to preset audio/video devices.</span>
 			<span id="close" onclick="this.parentNode.style.display='none'">×</span>
 			<input id="devicesUrl" value="" />
 		</div>

From cbc7971fa5022515a35f9e1484a0595a27a1edcf Mon Sep 17 00:00:00 2001
From: Joel Calado <joelcalado@gmail.com>
Date: Mon, 8 Feb 2021 21:14:47 +0000
Subject: [PATCH 4/6] Update devices.html

---
 devices.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/devices.html b/devices.html
index bdf31a0..05aa496 100644
--- a/devices.html
+++ b/devices.html
@@ -42,7 +42,6 @@
 			</div>
 		</div>
 		<div id="sharedDevices" style="display: none">
-			<span>Click to copy. Send this to your host:</span>
 			<span>Click to copy. Use this URL to preset audio/video devices.</span>
 			<span id="close" onclick="this.parentNode.style.display='none'">×</span>
 			<input id="devicesUrl" value="" />

From f62f31329d2518ae99ed415308197b1f936815cc Mon Sep 17 00:00:00 2001
From: Joel Calado <joelcalado@gmail.com>
Date: Mon, 8 Feb 2021 21:15:17 +0000
Subject: [PATCH 5/6] Update devices.html

sanitize device names function
---
 devices.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/devices.html b/devices.html
index 05aa496..b131df7 100644
--- a/devices.html
+++ b/devices.html
@@ -64,6 +64,10 @@
 				return value.kind === "videoinput";
 			}
 
+			function sanitizeDeviceName(deviceName) {
+				return String(deviceName).toLowerCase().replace(/[\W]+/g, "_");
+			}
+
 			function addDevice(element) {
 				const info = element.getElementsByClassName("device-id")[0];
 				const type = info.dataset.deviceType;

From f335813c5e4999b17bcc48a2a9b43c849bc7ffee Mon Sep 17 00:00:00 2001
From: Joel Calado <joelcalado@gmail.com>
Date: Mon, 8 Feb 2021 21:16:14 +0000
Subject: [PATCH 6/6] Update devices.html

fixes a bug where you could select multiple video devices

changes from device-id strings to sanitized device names
---
 devices.html | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/devices.html b/devices.html
index b131df7..49e1126 100644
--- a/devices.html
+++ b/devices.html
@@ -69,14 +69,14 @@
 			}
 
 			function addDevice(element) {
-				const info = element.getElementsByClassName("device-id")[0];
-				const type = info.dataset.deviceType;
+				const type = element.dataset.deviceType;
+				const device = sanitizeDeviceName(element.querySelector('span').innerText);
 
 				if (type === "audioinput") {
-					setAudioSearchParams(info);
+					setAudioSearchParams(element);
 				}
 				if (type === "videoinput") {
-					setVideoSearchParams(info);
+					setVideoSearchParams(element);
 				}
 				if (type === "audiooutput") {
 					return;
@@ -89,9 +89,9 @@
 
 				function setAudioSearchParams(info) {
 					// Device was already selected
-					if (info.parentNode.className === "device selected") {
+					if (info.className === "device selected") {
 						// Remove device from list of selected devices
-						const index = audioInputDevices.indexOf(info.innerText);
+						const index = audioInputDevices.indexOf(device);
 						if (index !== -1) {
 							audioInputDevices.splice(index, 1);
 						}
@@ -106,7 +106,8 @@
 						}
 					} else {
 						// Device is unselected
-						audioInputDevices.push(info.innerText);
+						
+						audioInputDevices.push(device);
 						url.searchParams.set("ad", audioInputDevices.join(","));
 						element.className = "device selected";
 					}
@@ -117,11 +118,12 @@
 				*/
 				function setVideoSearchParams(info) {
 					// Device was already selected
-					if (info.parentNode.className === "device selected") {
-						info.parentNode.className = "device";
+					if (info.className === "device selected") {
+						element.className = "device";
+
 
 						// Set the url param to the devices that are left
-						url.searchParams.set("vd", info.innerText);
+						url.searchParams.set("vd", device);
 						element.className = "device";
 
 						// If no devices remained, just remove the param completely
@@ -130,7 +132,13 @@
 						}
 					} else {
 						// Device is unselected
-						url.searchParams.set("vd", info.innerText);
+						try {
+							element.parentElement.querySelector('.device.selected').className = "device";
+						} catch (error) {
+							console.log("There was no video device already selected.");
+						}
+						
+						url.searchParams.set("vd", device);
 						element.className = "device selected";
 					}
 				}
@@ -152,9 +160,9 @@
 					.sort()
 					.forEach(([key, value]) => {
 						output += `
-						<div class='device' onclick='addDevice(this)'>
+						<div class='device' onclick='addDevice(this)' data-device-type='${value.kind}'>
 							<span class='device-name'>${value.label}</span>
-							<span class='device-id' data-device-type='${value.kind}'>
+							<span class='device-id'>
 								${value.deviceId}
 							</span>
 						</div>`;