volume control

public/script.js

@@ -47,6 +47,39 @@
 				ping.innerHTML += data.status.ping.duration +"ms";
 				statusDiv.appendChild(ping);
 			}
+			if (data.volumeControl) {
+				var volumeControl = document.createElement("div"),
+					label = document.createElement("label"),
+					labelIcon = document.createElement("img"),
+					labelText = document.createElement("span"),
+					input = document.createElement("input"),
+					submit = document.createElement("button");
+
+				labelIcon.className = "icon";
+				labelIcon.src = "volume.svg";
+				labelText.textContent = "Volume: ";
+				input.className = "input-percent"
+				input.type = "number";
+				input.min = 0;
+				input.max = 100;
+				input.value = data.status.status.volume;
+				submit.textContent = "Set volume";
+				submit.outputId = data.id;
+				submit.volumeInput = input;
+				submit.onclick = function() {
+					var value = Math.min(100, Math.max(0, this.volumeInput.value));
+					httpApi("/api/setVol?output=" +this.outputId +"&volume=" +value, "POST", () => {
+						setTimeout(refreshOutput, 1000);
+					});
+				};
+
+				label.appendChild(labelIcon);
+				label.appendChild(labelText);
+				label.appendChild(input);
+				volumeControl.appendChild(label);
+				volumeControl.appendChild(submit);
+				statusDiv.appendChild(volumeControl);
+			}
 		} else {
 			statusDiv.classList.add("no-status");
 		}

public/style.css

@@ -27,6 +27,10 @@
 	vertical-align: -15%;
 }
 
+.input-percent {
+	max-width: 3em;
+}
+
 .credits {
 	text-align: center;
 	margin-top: 5em;