Merge pull request #711 from steveseguin/fix_devices

Fix /devices multiple video inputs bug

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;

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>.
@@ -41,7 +42,7 @@
 			</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="" />
 		</div>
@@ -63,15 +64,19 @@
 				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 = element.dataset.deviceType;
-				const type = info.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;
@@ -84,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);
 						}
@@ -101,7 +106,8 @@
 						}
 					} else {
 						// Device is unselected
-						audioInputDevices.push(info.innerText);
+						
+						audioInputDevices.push(device);
 						url.searchParams.set("ad", audioInputDevices.join(","));
 						element.className = "device selected";
 					}
@@ -112,11 +118,12 @@
 				*/
 				function setVideoSearchParams(info) {
 					// Device was already selected
-					if (info.parentNode.className === "device selected") {
+					if (info.className === "device selected") {
-						info.parentNode.className = "device";
+						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
@@ -125,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";
 					}
 				}
@@ -147,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>`;