From 46b00b1ce1821d0d68edf8cf82a343e3c586c36e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= <filip.tronicek@seznam.cz>
Date: Mon, 8 Feb 2021 17:14:27 +0100
Subject: [PATCH 1/3] First ES6 refactor

- Eqeqeq
- const and let
- arrow functions
---
 devices.html | 53 ++++++++++++++++++++++++++--------------------------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/devices.html b/devices.html
index bcb0331..99ae4f5 100644
--- a/devices.html
+++ b/devices.html
@@ -47,45 +47,46 @@
 		</div>
 
 		<script>
-			var list = [];
-			var url = new URL(document.location.origin);
-			var audioInputDevices = [];
+			const list = [];
+			const url = new URL(document.location.origin);
+			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];
-				var type = info.dataset.deviceType;
+				const info = element.getElementsByClassName("device-id")[0];
+				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
-				Will be output as a comma separated string to &ad
+					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") {
+					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,8 +140,8 @@
 			}
 
 			function prettyPrint(json, element) {
-				var output = "<div class='prettyJson two-col'>";
-				var nestedObjs;
+				let output = "<div class='prettyJson two-col'>";
+				let nestedObjs;
 
 				Object.entries(json)
 					.sort()
@@ -162,17 +163,17 @@
 				document.getElementById(element).innerHTML = output;
 			}
 
-			document.getElementById("devicesUrl").onclick = function () {
+			document.getElementById("devicesUrl").onclick = () => {
 				this.select();
 				document.execCommand("copy");
 			};
 
 			navigator.mediaDevices
 				.enumerateDevices()
-				.then(function (devices) {
-					devices.forEach(function (device) {
+				.then((devices) => {
+					devices.forEach((device) => {
 						console.log(
-							device.kind + ": " + device.label + " id = " + device.deviceId
+							`${device.kind}: ${device.label} id = ${device.deviceId}`
 						);
 						list.push(device);
 					});
@@ -180,8 +181,8 @@
 					prettyPrint(devices.filter(isAudioOutput), "audioOutputs");
 					prettyPrint(devices.filter(isVideoInput), "videoInputs");
 				})
-				.catch(function (err) {
-					console.log(err.name + ": " + err.message);
+				.catch((err) => {
+					console.log(`${err.name}: ${err.message}`);
 				});
 		</script>
 	</body>

From 8338573c108c083f5be7f721c7dedf9e2a79f51d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= <filip.tronicek@seznam.cz>
Date: Mon, 8 Feb 2021 17:19:28 +0100
Subject: [PATCH 2/3] Template string output

---
 devices.html | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/devices.html b/devices.html
index 99ae4f5..3aea201 100644
--- a/devices.html
+++ b/devices.html
@@ -146,18 +146,13 @@
 				Object.entries(json)
 					.sort()
 					.forEach(([key, value]) => {
-						output += "<div class='device' onclick='addDevice(this)'>";
-
-						output +=
-							"<span class='device-name'>" +
-							value.label +
-							"</span><span class='device-id' data-device-type='" +
-							value.kind +
-							"'>" +
-							value.deviceId +
-							"</span>";
-
-						output += "</div>";
+						output += `
+						<div class='device' onclick='addDevice(this)'>
+							<span class='device-name'>${value.label}</span>
+							<span class='device-id' data-device-type='${value.kind}'>
+								${value.deviceId}
+							</span>
+						</div>`;
 					});
 				output += "</div>";
 				document.getElementById(element).innerHTML = output;

From 9cc109c254da6c06cdcd6b44583938753aa2296b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= <filip.tronicek@seznam.cz>
Date: Mon, 8 Feb 2021 17:21:40 +0100
Subject: [PATCH 3/3] Update target because of the arrow function

---
 devices.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/devices.html b/devices.html
index 3aea201..49a254c 100644
--- a/devices.html
+++ b/devices.html
@@ -158,8 +158,8 @@
 				document.getElementById(element).innerHTML = output;
 			}
 
-			document.getElementById("devicesUrl").onclick = () => {
-				this.select();
+			document.getElementById("devicesUrl").onclick = (e) => {
+				e.target.select();
 				document.execCommand("copy");
 			};