From 574f9c6652f6c6895b60151a0e23bc3f9dded2f5 Mon Sep 17 00:00:00 2001
From: Joel Calado <joelcalado@gmail.com>
Date: Sat, 28 Nov 2020 22:05:44 +0000
Subject: [PATCH] Update devices.html

---
 devices.html | 106 ++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 100 insertions(+), 6 deletions(-)

diff --git a/devices.html b/devices.html
index e5fcff8..bcb0331 100644
--- a/devices.html
+++ b/devices.html
@@ -19,9 +19,15 @@
 			</a>
 		</div>
 		<div id="devices">
-			<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.</div>
-			<div class="notice">Check for browser and camera capabilities <a href="/supports">here</a>.</div>
-				<div class="card">
+			<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.
+			</div>
+			<div class="notice">
+				Check for browser and camera capabilities <a href="/supports">here</a>.
+			</div>
+			<div class="card">
 				<h1>🎤 Audio Inputs</h1>
 				<div id="audioInputs"></div>
 			</div>
@@ -34,9 +40,16 @@
 				<div id="audioOutputs"></div>
 			</div>
 		</div>
+		<div id="sharedDevices" style="display: none">
+			<span>Click to copy. Send this to your host:</span>
+			<span id="close" onclick="this.parentNode.style.display='none'">×</span>
+			<input id="devicesUrl" value="" />
+		</div>
 
 		<script>
 			var list = [];
+			var url = new URL(document.location.origin);
+			var audioInputDevices = [];
 
 			function isAudioInput(value) {
 				return value.kind == "audioinput";
@@ -50,20 +63,96 @@
 				return value.kind == "videoinput";
 			}
 
+			function addDevice(element) {
+				var info = element.getElementsByClassName("device-id")[0];
+				var type = info.dataset.deviceType;
+
+				if (type == "audioinput") {
+					setAudioSearchParams(info);
+				}
+				if (type == "videoinput") {
+					setVideoSearchParams(info);
+				}
+				if (type == "audiooutput") {
+					return;
+				}
+
+				/*
+				Allows for multiple audio devices to be selected
+				Will be output as a comma separated string to &ad
+				*/
+				function setAudioSearchParams(info) {
+					// Device was already selected
+					if (info.parentNode.className == "device selected") {
+						// Remove device from list of selected devices
+						var index = audioInputDevices.indexOf(info.innerText);
+						if (index !== -1) {
+							audioInputDevices.splice(index, 1);
+						}
+
+						// Set the url param to the devices that are left
+						url.searchParams.set("ad", audioInputDevices.join(","));
+						element.className = "device";
+
+						// If no audio devices remained, just remove the param completely
+						if (audioInputDevices.length == 0) {
+							url.searchParams.delete("ad");
+						}
+					} else {
+						// Device is unselected
+						audioInputDevices.push(info.innerText);
+						url.searchParams.set("ad", audioInputDevices.join(","));
+						element.className = "device selected";
+					}
+				}
+
+				/*
+				Only allows for a single video device to be selected
+				*/
+				function setVideoSearchParams(info) {
+					// Device was already selected
+					if (info.parentNode.className == "device selected") {
+						info.parentNode.className = "device";
+
+						// Set the url param to the devices that are left
+						url.searchParams.set("vd", info.innerText);
+						element.className = "device";
+
+						// If no devices remained, just remove the param completely
+						if (audioInputDevices.length == 0) {
+							url.searchParams.delete("vd");
+						}
+					} else {
+						// Device is unselected
+						url.searchParams.set("vd", info.innerText);
+						element.className = "device selected";
+					}
+				}
+
+				// Update UI
+				showDeviceIdsPopup();
+			}
+
+			function showDeviceIdsPopup() {
+				document.getElementById("devicesUrl").value = decodeURIComponent(url);
+				document.getElementById("sharedDevices").style.display = "block";
+			}
+
 			function prettyPrint(json, element) {
 				var output = "<div class='prettyJson two-col'>";
-
 				var nestedObjs;
 
 				Object.entries(json)
 					.sort()
 					.forEach(([key, value]) => {
-						output += "<div class='device'>";
+						output += "<div class='device' onclick='addDevice(this)'>";
 
 						output +=
 							"<span class='device-name'>" +
 							value.label +
-							"</span><span class='device-id'>Device ID: " +
+							"</span><span class='device-id' data-device-type='" +
+							value.kind +
+							"'>" +
 							value.deviceId +
 							"</span>";
 
@@ -73,6 +162,11 @@
 				document.getElementById(element).innerHTML = output;
 			}
 
+			document.getElementById("devicesUrl").onclick = function () {
+				this.select();
+				document.execCommand("copy");
+			};
+
 			navigator.mediaDevices
 				.enumerateDevices()
 				.then(function (devices) {