From df2e3c9d7f856879141e53afb6eac059ce8f794e Mon Sep 17 00:00:00 2001
From: Joel Calado <joelcalado@gmail.com>
Date: Fri, 27 Nov 2020 13:16:32 +0000
Subject: [PATCH] tweaks to /supports

---
 supports.css  | 139 ++++++++++++++++++++++++++++++++++++++
 supports.html | 181 +++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 295 insertions(+), 25 deletions(-)
 create mode 100644 supports.css
diff --git a/supports.css b/supports.css
new file mode 100644
index 0000000..355446b
--- /dev/null
+++ b/supports.css
@@ -0,0 +1,139 @@
+#supports .card:nth-child(2){
+	margin-top: 40px;
+}
+
+#supports .card {
+	width: 80%;
+	margin: 0 auto;
+	display: block;
+	padding: 20px;
+}
+
+#supports .card h1 {
+	font-size: 1.5em;
+	margin-bottom: 1em;
+}
+
+.prettyJson {
+    display: grid;
+    row-gap: 0;
+    column-gap: 10%;
+}
+
+
+.prettyJson.two-col {
+	grid-template-columns: 1fr 1fr;
+}
+
+.prettyJson.three-col {
+	grid-template-columns: 1fr 1fr 1fr;
+}
+
+.prettyJson.four-col {
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+@media only screen
+  and (min-device-width: 375px)
+  and (max-device-width: 812px)
+  and (orientation: portrait) {
+
+	#supports .card {
+		width: 100%;
+	}
+
+	.prettyJson.two-col,
+	.prettyJson.three-col {
+		grid-template-columns: 1fr;
+	}
+
+	.subproperty {
+		font-size: 2rem;
+	}
+
+}
+
+
+.prettyJson .property {
+    display: grid;
+	grid-template-columns: 2fr 1fr;
+	border-bottom: 1px solid rgb(202, 202, 202);
+	padding: 1px;
+}
+
+.prettyJson > .property > span:nth-child(1) {
+    background: #f3f3f3;
+    padding: 5px;
+}
+
+.prettyJson > .property > span:nth-child(2) {
+    background: #d0d0d0;
+    padding: 5px;
+    white-space: pre-wrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.prettyJson .property.ok > span{
+	background: #40916c;
+	font-weight: bold;
+	color:white;
+}
+
+.supportedOption {
+    background: #f3f3f3;
+    margin: 5px;
+    border: 1px solid #457b9d;
+}
+
+.supportedOption > span:nth-child(1) {
+    font-weight: bold;
+    font-size: 1.3em;
+    background: #457b9d;
+    display: block;
+    padding: 5px;
+    color: white;
+}
+
+.supportedOption > span:nth-child(2) {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: 5px;
+}
+
+.subproperty {
+	display: flex;
+	padding: 10px;
+}
+
+.subproperty:nth-child(even) {
+    background: gainsboro;
+}
+
+.subproperty span:nth-child(1) {
+    flex: 1;
+}
+
+.subproperty span:nth-child(2) {
+	flex: 2;
+}
+
+div#longCameraSupportedStrings {
+    background: #f3f3f3;
+    border: 1px solid #457b9d;
+    margin: 5px;
+}
+
+#longCameraSupportedStrings > span{
+	display: block;
+	padding: 10px;
+}
+
+#longCameraSupportedStrings > span:nth-child(1) {
+    /* padding: 0px; */
+    background: #457b9d;
+    /* margin: 0; */
+    font-weight: bold;
+    color: white;
+}
\ No newline at end of file
diff --git a/supports.html b/supports.html
index 2e9c8da..5adf516 100644
--- a/supports.html
+++ b/supports.html
@@ -1,28 +1,159 @@
 <html>
-<body>
-<pre  id="json"><pre>
+	<head>
+		<link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css" />
+		<link rel="stylesheet" href="./main.css?ver=11" />
+		<link rel="stylesheet" href="./supports.css?ver=1" />
+		<meta charset="utf8" />
+	</head>
+	<body id="supports">
+		<div id="header">
+			<a
+				id="logoname"
+				href="./"
+				style="text-decoration: none; color: white; margin: 2px"
+			>
+				<span data-translate="logo-header"> <font id="qos">O</font>BS.Ninja </span>
+			</a>
+		</div>
+		<div class="card">
+			<h1 id="browserSupportedOptionsTitle">💻 Browser supported options</h1>
+			<p style="margin-bottom: 20px">
+				List of options your browser reports as supported. If an option lights up
+				green, your currently selected camera reports that it supports that option.
+			</p>
+			<div id="browserSupportedOptions"></div>
+		</div>
+		<div class="card">
+			<h1>Device to check</h1>
+			<select id="cameraSelector" onchange="changeCamera()"></select>
+		</div>
+		<div class="card">
+			<h1 id="cameraSupportedOptionsTitle">📹 Camera supported options</h1>
+			<div id="cameraSupportedOptions"></div>
+		</div>
+		<div class="card">
+			<h1>📹 Camera settings</h1>
+			<div id="cameraSettings"></div>
+		</div>
 
-<script>
-  var supports = navigator.mediaDevices.getSupportedConstraints();
-  document.getElementById("json").innerHTML = "BROWSER SUPPORTED OPTIONS<HR>";
-  document.getElementById("json").innerHTML += JSON.stringify(supports, undefined, 2);
-  
-  
-  navigator.mediaDevices.getUserMedia({video:  { facingMode: { ideal: "environment" }}, audio:false}).then(function(mediaStream){
-		console.log("worked");
-		 
-			setTimeout(function(){
-				mediaStream.getVideoTracks().forEach((track)=>{
-					const capabilities = track.getCapabilities();
-					const settings = track.getSettings();
-					document.getElementById("json").innerHTML += "<HR>CAMERA SUPPORTED<HR>";
-					document.getElementById("json").innerHTML += JSON.stringify(capabilities, undefined, 2);
-					document.getElementById("json").innerHTML += "<HR>CAMERA SETTINGS <HR>";
-					document.getElementById("json").innerHTML += JSON.stringify(settings, undefined, 2);
+		<script>
+			function prettyPrintJsonToId(json, element) {
+				var output = "<div class='prettyJson three-col'>";
+
+				Object.entries(json)
+					.sort()
+					.forEach(([key, value]) => {
+						if (value == true) {
+							value = "<i class='las la-check'></i>";
+						}
+						if (value == false) {
+							value = "<i class='las la-times'></i>";
+						}
+						output += "<div class='property' id=" + key + ">";
+						output += "<span>" + key + "</span><span>" + value + "</span>";
+						output += "</div>";
+					});
+				output += "</div>";
+				document.getElementById(element).innerHTML = output;
+			}
+
+			function prettyPrintSupportedOptions(json, element) {
+				long_ass_strings = [json.deviceId, json.groupId];
+				var output = "<div class='prettyJson two-col'>";
+
+				var nestedObjs;
+				delete json.deviceId;
+				delete json.groupId;
+
+				Object.entries(json)
+					.sort()
+					.forEach(([key, value]) => {
+						output += "<div class='supportedOption'>";
+						nestedObjs = "";
+						if (typeof value === "object" && value !== null) {
+							Object.entries(value)
+								.sort()
+								.forEach(([key, value]) => {
+									nestedObjs +=
+										"<div class='subproperty'><span>" +
+										key +
+										"</span><span>" +
+										value +
+										"</span></div>";
+								});
+							output += "<span>" + key + "</span><span>" + nestedObjs + "</span>";
+						} else {
+							output += "<span>" + key + "</span><span>" + value + "</span>";
+						}
+						output += "</div>";
+					});
+				output += "</div>";
+				output += "<div id='longCameraSupportedStrings'><span>IDs</span>";
+				output += "<span>deviceId: " + long_ass_strings[0] + "</span>";
+				output += "<span>groupId: " + long_ass_strings[1] + "</span></div>";
+				document.getElementById(element).innerHTML = output;
+			}
+
+			function changeCamera() {
+				var deviceId = document.getElementById("cameraSelector").value;
+				getCameraDetails(deviceId);
+			}
+
+			function getCameraDetails(deviceId) {
+				navigator.mediaDevices
+					.getUserMedia({
+						video: {
+							deviceId: deviceId,
+						},
+						audio: false,
+					})
+					.then(function (mediaStream) {
+						console.log("worked");
+						setTimeout(function () {
+							mediaStream.getVideoTracks().forEach((track) => {
+								const capabilities = track.getCapabilities();
+								const settings = track.getSettings();
+								prettyPrintSupportedOptions(capabilities, "cameraSupportedOptions");
+								document
+									.querySelectorAll(".property")
+									.forEach((el) => el.classList.remove("ok"));
+
+								Object.entries(capabilities)
+									.sort()
+									.forEach(([key, value]) => {
+										document.getElementById(key).classList.add("ok");
+									});
+								prettyPrintJsonToId(settings, "cameraSettings");
+							});
+						}, 1000);
+					});
+			}
+
+			var supports = navigator.mediaDevices.getSupportedConstraints();
+			prettyPrintJsonToId(supports, "browserSupportedOptions");
+			document.getElementById("browserSupportedOptionsTitle").innerText +=
+				" (" + Object.keys(supports).length + ")";
+
+			navigator.mediaDevices
+				.enumerateDevices()
+				.then(function (devices) {
+					setTimeout(function () {
+						console.log("Listing devices");
+						devices.forEach(function (device) {
+							if (device.kind == "videoinput") {
+								var element = document.createElement("option");
+								element.setAttribute("value", device.deviceId);
+								element.innerText = device.label;
+								document.getElementById("cameraSelector").appendChild(element);
+								console.log(device);
+							}
+						});
+						getCameraDetails(devices[0]);
+					}, 1000);
+				})
+				.catch(function (err) {
+					console.log(err.name + ": " + err.message);
 				});
-			},1000);
-		 
-	});
-</script>
-</body>
-</html>
\ No newline at end of file
+		</script>
+	</body>
+</html>
