Merge pull request #542 from jcalado/master

Add easy url parameters sharing to /devices

devices.css

@@ -14,8 +14,27 @@ h1 {
 .device {
     display: flex;
     flex-direction: column;
-    margin: 20px 0px;
+    margin: 10px 0px;
     font-size: 1rem;
+    padding: 10px;
+    position: relative;
+}
+
+.device.selected {
+    background-color: #3ea03c;
+}
+
+.device.selected::before {
+    content: "\f00c";
+    font-family: "Line Awesome Free";
+    font-weight: 900;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+.device:hover {
+    cursor: pointer;
 }
 
 .device-name{
@@ -54,9 +73,50 @@ h1 {
   and (orientation: portrait) {
     #devices {
         width: 100%;
+        max-width: 100%;
     }
     .device-id {
         text-overflow: ellipsis;
         overflow: hidden;
     }
+}
+
+
+#sharedDevices {
+    position: fixed;
+    bottom: 20px;
+    width: 80%;
+    left: 10%;
+    color: white;
+    overflow-wrap: anywhere;
+    background: #141926;
+    padding: 20px;
+    box-shadow: 0px 0px 10px 5px #00000047;
+    border: 1px solid #333c52;
+}
+
+#sharedDevices span {
+    display: block;
+    margin-bottom: 10px;
+}
+
+#sharedDevices input {
+    width: 100%;
+    padding: 5px;
+
+}
+
+span#close {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    display: block;
+    width: 20px;
+    height: 20px;
+    background: #457b9d;
+    text-align: center;
+    border-radius: 20px;
+    line-height: 20px;
+    font-size: 20px;
+    cursor: pointer;
 }

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) {