Merge pull request #707 from filiptronicek/devices-refactor

Devices refactor

devices.html

@@ -47,45 +47,46 @@
 		</div>
 
 		<script>
-			var list = [];
+			const list = [];
-			var url = new URL(document.location.origin);
+			const url = new URL(document.location.origin);
-			var audioInputDevices = [];
+			const audioInputDevices = [];
 
 			function isAudioInput(value) {
-				return value.kind == "audioinput";
+				return value.kind === "audioinput";
 			}
 
 			function isAudioOutput(value) {
-				return value.kind == "audiooutput";
+				return value.kind === "audiooutput";
 			}
 
 			function isVideoInput(value) {
-				return value.kind == "videoinput";
+				return value.kind === "videoinput";
 			}
 
 			function addDevice(element) {
-				var info = element.getElementsByClassName("device-id")[0];
+				const info = element.getElementsByClassName("device-id")[0];
-				var type = info.dataset.deviceType;
+				const type = info.dataset.deviceType;
 
-				if (type == "audioinput") {
+				if (type === "audioinput") {
 					setAudioSearchParams(info);
 				}
-				if (type == "videoinput") {
+				if (type === "videoinput") {
 					setVideoSearchParams(info);
 				}
-				if (type == "audiooutput") {
+				if (type === "audiooutput") {
 					return;
 				}
 
 				/*
-				Allows for multiple audio devices to be selected
+					Allows for multiple audio devices to be selected
-				Will be output as a comma separated string to &ad
+					Will be output as a comma separated string to &ad
 				*/
+
 				function setAudioSearchParams(info) {
 					// Device was already selected
-					if (info.parentNode.className == "device selected") {
+					if (info.parentNode.className === "device selected") {
 						// Remove device from list of selected devices
-						var index = audioInputDevices.indexOf(info.innerText);
+						const index = audioInputDevices.indexOf(info.innerText);
 						if (index !== -1) {
 							audioInputDevices.splice(index, 1);
 						}
@@ -95,7 +96,7 @@
 						element.className = "device";
 
 						// If no audio devices remained, just remove the param completely
-						if (audioInputDevices.length == 0) {
+						if (audioInputDevices.length === 0) {
 							url.searchParams.delete("ad");
 						}
 					} else {
@@ -111,7 +112,7 @@
 				*/
 				function setVideoSearchParams(info) {
 					// Device was already selected
-					if (info.parentNode.className == "device selected") {
+					if (info.parentNode.className === "device selected") {
 						info.parentNode.className = "device";
 
 						// Set the url param to the devices that are left
@@ -119,7 +120,7 @@
 						element.className = "device";
 
 						// If no devices remained, just remove the param completely
-						if (audioInputDevices.length == 0) {
+						if (audioInputDevices.length === 0) {
 							url.searchParams.delete("vd");
 						}
 					} else {
@@ -139,40 +140,35 @@
 			}
 
 			function prettyPrint(json, element) {
-				var output = "<div class='prettyJson two-col'>";
+				let output = "<div class='prettyJson two-col'>";
-				var nestedObjs;
+				let nestedObjs;
 
 				Object.entries(json)
 					.sort()
 					.forEach(([key, value]) => {
-						output += "<div class='device' onclick='addDevice(this)'>";
+						output += `
-
+						<div class='device' onclick='addDevice(this)'>
-						output +=
+							<span class='device-name'>${value.label}</span>
-							"<span class='device-name'>" +
+							<span class='device-id' data-device-type='${value.kind}'>
-							value.label +
+								${value.deviceId}
-							"</span><span class='device-id' data-device-type='" +
+							</span>
-							value.kind +
+						</div>`;
-							"'>" +
-							value.deviceId +
-							"</span>";
-
-						output += "</div>";
 					});
 				output += "</div>";
 				document.getElementById(element).innerHTML = output;
 			}
 
-			document.getElementById("devicesUrl").onclick = function () {
+			document.getElementById("devicesUrl").onclick = (e) => {
-				this.select();
+				e.target.select();
 				document.execCommand("copy");
 			};
 
 			navigator.mediaDevices
 				.enumerateDevices()
-				.then(function (devices) {
+				.then((devices) => {
-					devices.forEach(function (device) {
+					devices.forEach((device) => {
 						console.log(
-							device.kind + ": " + device.label + " id = " + device.deviceId
+							`${device.kind}: ${device.label} id = ${device.deviceId}`
 						);
 						list.push(device);
 					});
@@ -180,8 +176,8 @@
 					prettyPrint(devices.filter(isAudioOutput), "audioOutputs");
 					prettyPrint(devices.filter(isVideoInput), "videoInputs");
 				})
-				.catch(function (err) {
+				.catch((err) => {
-					console.log(err.name + ": " + err.message);
+					console.log(`${err.name}: ${err.message}`);
 				});
 		</script>
 	</body>