quality slider

6 files changed, 125 insertions, 98 deletions

diff --git a/web/css/mobile.css b/web/css/mobile.css
index 04e548e7..1e5df8fd 100644
--- a/web/css/mobile.css
+++ b/web/css/mobile.css
@@ -54,7 +54,7 @@
 	}
 
 	div#stream-window {
-		padding-top: 9px !important;
+		padding-top: 3px !important;
 		border-top: 0 !important;
 		border-radius: 0 0 8px 8px !important;
 		top: 50px !important;
@@ -65,6 +65,14 @@
 	div#stream-window-header {
 		display: none !important;
 	}
+	div#stream-info {
+		display: block !important;
+		margin: 0;
+		padding: 0;
+		padding-bottom: 3px;
+		font-size: 0.8em;
+		color: var(--fg-color-dark);
+	}
 	div#stream-mouse-buttons {
 		display: block !important;
 	}
@@ -80,9 +88,10 @@
 	}
 
 	@supports (-webkit-appearance:none) {
-		div#stream-size-slider-box input[type=range] {
+		input[type=range].slider {
 			margin: 20px 0 20px 0 !important;
 		}
+
 		table#stream-auto-resize-box {
 			margin: 20px 0 20px 0 !important;
 		}
diff --git a/web/css/sliders.css b/web/css/sliders.css
new file mode 100644
index 00000000..8e60e078
--- /dev/null
+++ b/web/css/sliders.css
@@ -0,0 +1,60 @@
+@supports (-webkit-appearance:none) {
+	input[type=range].slider {
+		cursor: pointer;
+		outline: none;
+		width: 100%;
+		box-shadow: none;
+		background: transparent;
+		margin: 8px 0 8px 0;
+		-webkit-appearance: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+}
+@supports not (-webkit-appearance:none) {
+	input[type=range].slider {
+		cursor: pointer;
+		outline: none;
+		width: 100%;
+		box-shadow: none;
+		margin-left: 0;
+		margin-right: 0;
+	}
+}
+
+input[type=range].slider::-webkit-slider-runnable-track {
+	height: 5px;
+	background: var(--bg-color-light);
+	border-radius: 3px;
+}
+
+input[type=range].slider::-webkit-slider-thumb {
+	border: var(--intensive-border);
+	height: 18px;
+	width: 18px;
+	border-radius: 25px;
+	background: var(--bg-color-intensive);
+	-webkit-appearance: none;
+	margin-top: -7px;
+}
+input[type=range].slider:disabled::-webkit-slider-thumb {
+	border: var(--inactive-border);
+	background: var(--bg-color-normal);
+}
+
+input[type=range].slider::-moz-range-track {
+	height: 5px;
+	background: var(--bg-color-light);
+	border-radius: 3px;
+}
+
+input[type=range].slider::-moz-range-thumb {
+	border: var(--intensive-border);
+	height: 18px;
+	width: 18px;
+	border-radius: 25px;
+	background: var(--bg-color-intensive);
+}
+input[type=range].slider:disabled::-moz-range-thumb {
+	border: var(--inactive-border);
+	background: var(--bg-color-normal);
+}
diff --git a/web/css/stream.css b/web/css/stream.css
index 2e7aa32c..d0166fa9 100644
--- a/web/css/stream.css
+++ b/web/css/stream.css
@@ -1,3 +1,7 @@
+div#stream-info {
+	display: none;
+}
+
 img#stream-image {
 	width: 640px;
 	height: 480px;
@@ -35,61 +39,10 @@ div.stream-box-mouse-enabled {
 	cursor: url("../svg/stream-mouse-cursor.svg"), pointer;
 }
 
-select#stream-quality-select {
-	margin: 8px 0 8px 0;
-}
-
-div#stream-size-slider-box {
+div.stream-slider-box {
 	margin-top: 5px;
 	display: flex;
 }
-@supports (-webkit-appearance:none) {
-	div#stream-size-slider-box input[type=range] {
-		cursor: pointer;
-		outline: none;
-		width: 100%;
-		box-shadow: none;
-		background: transparent;
-		margin: 8px 0 8px 0;
-		-webkit-appearance: none;
-	}
-}
-@supports not (-webkit-appearance:none) {
-	div#stream-size-slider-box input[type=range] {
-		cursor: pointer;
-		outline: none;
-		width: 100%;
-		box-shadow: none;
-		margin-left: 0;
-		margin-right: 0;
-	}
-}
-div#stream-size-slider-box input[type=range]::-webkit-slider-runnable-track {
-	height: 5px;
-	background: var(--bg-color-light);
-	border-radius: 3px;
-}
-div#stream-size-slider-box input[type=range]::-webkit-slider-thumb {
-	border: var(--intensive-border);
-	height: 18px;
-	width: 18px;
-	border-radius: 25px;
-	background: var(--bg-color-intensive);
-	-webkit-appearance: none;
-	margin-top: -7px;
-}
-div#stream-size-slider-box input[type=range]::-moz-range-track {
-	height: 5px;
-	background: var(--bg-color-light);
-	border-radius: 3px;
-}
-div#stream-size-slider-box input[type=range]::-moz-range-thumb {
-	border: var(--intensive-border);
-	height: 18px;
-	width: 18px;
-	border-radius: 25px;
-	background: var(--bg-color-intensive);
-}
 
 table#stream-auto-resize-box {
 	width: 100%;
diff --git a/web/css/vars.css b/web/css/vars.css
index d6d5a604..73143366 100644
--- a/web/css/vars.css
+++ b/web/css/vars.css
@@ -26,6 +26,7 @@
 	--grey-border: thin solid var(--border-color-grey);
 	--normal-border: thin solid var(--border-color-normal);
 	--black-border: thin solid black;
+	--inactive-border: 2px solid var(--border-color-normal);
 	--intensive-border: 2px solid var(--border-color-intensive);
 	--thin-intensive-border: thin solid var(--border-color-intensive);
 
diff --git a/web/index.html b/web/index.html
index 0f3c1d0a..7baf44e6 100644
--- a/web/index.html
+++ b/web/index.html
@@ -14,6 +14,7 @@
 	<link rel="stylesheet" href="css/windows.css">
 	<link rel="stylesheet" href="css/modals.css">
 	<link rel="stylesheet" href="css/leds.css">
+	<link rel="stylesheet" href="css/sliders.css">
 	<link rel="stylesheet" href="css/switches.css">
 	<link rel="stylesheet" href="css/stream.css">
 	<link rel="stylesheet" href="css/hid.css">
@@ -77,14 +78,16 @@
 					</div>
 					<hr>
 					<div data-dont-hide-menu class="ctl-dropdown-content-text">
-						Stream quality:
-						<select disabled id="stream-quality-select"></select>
+						Stream quality: <span id="stream-quality-value">80%</span>
+						<div class="stream-slider-box">
+							<input disabled type="range" id="stream-quality-slider" class="slider" />
+						</div>
 					</div>
 					<hr>
 					<div data-dont-hide-menu class="ctl-dropdown-content-text">
 						Stream size: <span id="stream-size-value">100%</span>
-						<div id="stream-size-slider-box">
-							<input id="stream-size-slider" type="range" />
+						<div class="stream-slider-box">
+							<input type="range" id="stream-size-slider" class="slider" />
 						</div>
 					</div>
 					<hr>
@@ -93,7 +96,7 @@
 							<td>Auto-resize stream:</td>
 							<td align="right">
 								<div class="switch-box">
-									<input type="checkbox" class="switch-checkbox" id="stream-auto-resize-checkbox" checked />
+									<input type="checkbox" id="stream-auto-resize-checkbox" class="switch-checkbox" checked />
 									<label class="switch-label" for="stream-auto-resize-checkbox">
 										<span class="switch-inner"></span>
 										<span class="switch"></span>
@@ -280,6 +283,7 @@
 
 	<div id="stream-window" class="window" style="z-index: 1" tabindex="0">
 		<div id="stream-window-header" class="window-header"><div class="window-grab">Stream</div></div>
+		<div id="stream-info"></div>
 		<div id="stream-box" class="stream-box-inactive">
 			<img id="stream-image" class="stream-image-inactive" src="png/blank-stream.png" />
 		</div>
diff --git a/web/js/stream.js b/web/js/stream.js
index 91f2dc92..c632766d 100644
--- a/web/js/stream.js
+++ b/web/js/stream.js
@@ -5,32 +5,29 @@ function Stream() {
 
 	var __prev_state = false;
 	var __resolution = {width: 640, height: 480};
+	var __size_factor = 1;
 	var __client_id = "";
 	var __fps = 0;
-
-	var __quality = 10;
-	var __size_factor = 1;
+	var __quality_timer = null;
 
 	var __init__ = function() {
 		$("stream-led").title = "Stream inactive";
 
-		var quality = 10;
-		$("stream-quality-select").innerHTML = "";
-		for (; quality <= 100; quality += 10) {
-			$("stream-quality-select").innerHTML += "<option value=\"" + quality + "\">" + quality + "%</option>";
-		}
-
-		tools.setOnClick($("stream-screenshot-button"), __clickScreenshotButton);
-
-		$("stream-quality-select").onchange = __changeQuality;
+		$("stream-quality-slider").min = 10;
+		$("stream-quality-slider").max = 100;
+		$("stream-quality-slider").step = 5;
+		$("stream-quality-slider").value = 80;
+		$("stream-quality-slider").oninput = __setQuality;
+		$("stream-quality-slider").onchange = __setQuality;
 
-		$("stream-size-slider").min = 50;
-		$("stream-size-slider").max = 150;
-		$("stream-size-slider").step = 10;
+		$("stream-size-slider").min = 20;
+		$("stream-size-slider").max = 200;
+		$("stream-size-slider").step = 5;
 		$("stream-size-slider").value = 100;
-		$("stream-size-slider").oninput = () => __resize;
-		$("stream-size-slider").onchange = () => __resize;
+		$("stream-size-slider").oninput = () => __resize();
+		$("stream-size-slider").onchange = () => __resize();
 
+		tools.setOnClick($("stream-screenshot-button"), __clickScreenshotButton);
 		tools.setOnClick($("stream-reset-button"), __clickResetButton);
 
 		__startPoller();
@@ -52,16 +49,16 @@ function Stream() {
 					$("stream-led").className = "led-off";
 					$("stream-led").title = "Stream inactive";
 					$("stream-screenshot-button").disabled = true;
-					$("stream-quality-select").disabled = true;
+					$("stream-quality-slider").disabled = true;
 					$("stream-reset-button").disabled = true;
 					__updateStreamHeader(false);
 					__fps = 0;
 					__prev_state = false;
 
 				} else if (http.status === 200) {
-					if (__quality != response.source.quality) {
-						document.querySelector("#stream-quality-select [value=\"" + response.source.quality + "\"]").selected = true;
-						__quality = response.source.quality;
+					if ($("stream-quality-slider").value != response.source.quality && !__quality_timer) {
+						$("stream-quality-slider").value = response.source.quality;
+						$("stream-quality-value").innerHTML = response.source.quality + "%";
 					}
 
 					if (__resolution.width !== response.source.resolution.width || __resolution.height !== response.source.resolution.height) {
@@ -94,7 +91,7 @@ function Stream() {
 						$("stream-led").className = "led-on";
 						$("stream-led").title = "Stream is active";
 						$("stream-screenshot-button").disabled = false;
-						$("stream-quality-select").disabled = false;
+						$("stream-quality-slider").disabled = false;
 						$("stream-reset-button").disabled = false;
 						__prev_state = true;
 					}
@@ -106,10 +103,11 @@ function Stream() {
 
 	var __updateStreamHeader = function(online) {
 		var el_grab = document.querySelector("#stream-window-header .window-grab");
+		var el_info = $("stream-info");
 		if (online) {
-			el_grab.innerHTML = "Stream &ndash; " + __resolution.width + "x" + __resolution.height + " / " + __fps + " fps";
+			el_grab.innerHTML = el_info.innerHTML = "Stream &ndash; " + __resolution.width + "x" + __resolution.height + " / " + __fps + " fps";
 		} else {
-			el_grab.innerHTML = "Stream &ndash; offline";
+			el_grab.innerHTML = el_info.innerHTML = "Stream &ndash; offline";
 		}
 	};
 
@@ -133,24 +131,29 @@ function Stream() {
 		});
 	};
 
-	var __changeQuality = function() {
-		var quality = parseInt($("stream-quality-select").value);
-		if (__quality != quality) {
-			$("stream-quality-select").disabled = true;
+	var __setQuality = function() {
+		var quality = $("stream-quality-slider").value;
+		$("stream-quality-value").innerHTML = quality + "%";
+		if (__quality_timer) {
+			clearTimeout(__quality_timer);
+		}
+		__quality_timer = setTimeout(function() {
+			$("stream-quality-slider").disabled = true;
 			var http = tools.makeRequest("POST", "/kvmd/streamer/set_params?quality=" + quality, function() {
 				if (http.readyState === 4) {
 					if (http.status !== 200) {
 						ui.error("Can't configure stream:<br>", http.responseText);
 					}
+					__quality_timer = null;
 				}
 			});
-		}
+		}, 1000);
 	};
 
 	var __resize = function(center=false) {
-		var percent = $("stream-size-slider").value;
-		$("stream-size-value").innerHTML = percent + "%";
-		__size_factor = percent / 100;
+		var size = $("stream-size-slider").value;
+		$("stream-size-value").innerHTML = size + "%";
+		__size_factor = size / 100;
 		__applySizeFactor(center);
 	};
 
@@ -159,9 +162,9 @@ function Stream() {
 		var el_slider = $("stream-size-slider");
 		var view = ui.getViewGeometry();
 
-		for (var percent = 100; percent >= el_slider.min; percent -= el_slider.step) {
-			tools.info("Adjusting size:", percent);
-			$("stream-size-slider").value = percent;
+		for (var size = 100; size >= el_slider.min; size -= el_slider.step) {
+			tools.info("Adjusting size:", size);
+			$("stream-size-slider").value = size;
 			__resize(true);
 
 			var rect = el_window.getBoundingClientRect();
@@ -171,12 +174,9 @@ function Stream() {
 				&& rect.left >= view.left
 				&& rect.right <= view.right
 			) {
-				return;
+				break;
 			}
 		}
-
-		$("stream-size-slider").value = 100;
-		__resize();
 	};
 
 	var __applySizeFactor = function(center=false) {