web: auto-resize stream

2 files changed, 78 insertions, 56 deletions

diff --git a/web/js/stream.js b/web/js/stream.js
index 9de67dcc..91f2dc92 100644
--- a/web/js/stream.js
+++ b/web/js/stream.js
@@ -4,7 +4,7 @@ function Stream() {
 	/********************************************************************************/
 
 	var __prev_state = false;
-	var __normal_size = {width: 640, height: 480};
+	var __resolution = {width: 640, height: 480};
 	var __client_id = "";
 	var __fps = 0;
 
@@ -23,8 +23,13 @@ function Stream() {
 		tools.setOnClick($("stream-screenshot-button"), __clickScreenshotButton);
 
 		$("stream-quality-select").onchange = __changeQuality;
-		$("stream-size-slider").oninput = __resize;
-		$("stream-size-slider").onchange = __resize;
+
+		$("stream-size-slider").min = 50;
+		$("stream-size-slider").max = 150;
+		$("stream-size-slider").step = 10;
+		$("stream-size-slider").value = 100;
+		$("stream-size-slider").oninput = () => __resize;
+		$("stream-size-slider").onchange = () => __resize;
 
 		tools.setOnClick($("stream-reset-button"), __clickResetButton);
 
@@ -42,8 +47,6 @@ function Stream() {
 
 				if (http.status !== 200) {
 					tools.info("Refreshing stream ...");
-					__prev_state = false;
-					__fps = 0;
 					$("stream-image").className = "stream-image-inactive";
 					$("stream-box").classList.add("stream-box-inactive");
 					$("stream-led").className = "led-off";
@@ -52,24 +55,22 @@ function Stream() {
 					$("stream-quality-select").disabled = true;
 					$("stream-reset-button").disabled = true;
 					__updateStreamHeader(false);
+					__fps = 0;
+					__prev_state = false;
 
 				} else if (http.status === 200) {
-					if (__prev_state) {
-						if (__normal_size != response.stream.resolution) {
-							__normal_size = response.stream.resolution;
+					if (__quality != response.source.quality) {
+						document.querySelector("#stream-quality-select [value=\"" + response.source.quality + "\"]").selected = true;
+						__quality = response.source.quality;
+					}
+
+					if (__resolution.width !== response.source.resolution.width || __resolution.height !== response.source.resolution.height) {
+						__resolution = response.source.resolution;
+						if ($("stream-auto-resize-checkbox").checked) {
+							__adjustSizeFactor();
+						} else {
 							__applySizeFactor();
 						}
-					} else {
-						__normal_size = response.stream.resolution;
-						__refreshImage();
-						__prev_state = true;
-						$("stream-image").className = "stream-image-active";
-						$("stream-box").classList.remove("stream-box-inactive");
-						$("stream-led").className = "led-on";
-						$("stream-led").title = "Stream is active";
-						$("stream-screenshot-button").disabled = false;
-						$("stream-quality-select").disabled = false;
-						$("stream-reset-button").disabled = false;
 					}
 
 					var client_id = tools.getCookie("stream_client_id");
@@ -84,6 +85,19 @@ function Stream() {
 					}
 
 					__updateStreamHeader(true);
+
+					if (!__prev_state) {
+						tools.info("Stream acquired");
+						$("stream-image").src = "/streamer/stream?t=" + new Date().getTime();
+						$("stream-image").className = "stream-image-active";
+						$("stream-box").classList.remove("stream-box-inactive");
+						$("stream-led").className = "led-on";
+						$("stream-led").title = "Stream is active";
+						$("stream-screenshot-button").disabled = false;
+						$("stream-quality-select").disabled = false;
+						$("stream-reset-button").disabled = false;
+						__prev_state = true;
+					}
 				}
 			}
 		});
@@ -93,7 +107,7 @@ function Stream() {
 	var __updateStreamHeader = function(online) {
 		var el_grab = document.querySelector("#stream-window-header .window-grab");
 		if (online) {
-			el_grab.innerHTML = "Stream – " + __normal_size.width + "x" + __normal_size.height + " / " + __fps + " fps";
+			el_grab.innerHTML = "Stream – " + __resolution.width + "x" + __resolution.height + " / " + __fps + " fps";
 		} else {
 			el_grab.innerHTML = "Stream – offline";
 		}
@@ -133,35 +147,43 @@ function Stream() {
 		}
 	};
 
-	var __resize = function() {
+	var __resize = function(center=false) {
 		var percent = $("stream-size-slider").value;
 		$("stream-size-value").innerHTML = percent + "%";
 		__size_factor = percent / 100;
-		__applySizeFactor();
-	};
-
-	var __applySizeFactor = function() {
-		var el_stream_image = $("stream-image");
-		el_stream_image.style.width = __normal_size.width * __size_factor + "px";
-		el_stream_image.style.height = __normal_size.height * __size_factor + "px";
-		ui.showWindow($("stream-window"), false);
+		__applySizeFactor(center);
 	};
 
-	var __refreshImage = function() {
-		var http = tools.makeRequest("GET", "/kvmd/streamer", function() {
-			if (http.readyState === 4 && http.status === 200) {
-				var result = JSON.parse(http.responseText).result;
+	var __adjustSizeFactor = function() {
+		var el_window = $("stream-window");
+		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;
+			__resize(true);
+
+			var rect = el_window.getBoundingClientRect();
+			if (
+				rect.bottom <= view.bottom
+				&& rect.top >= view.top
+				&& rect.left >= view.left
+				&& rect.right <= view.right
+			) {
+				return;
+			}
+		}
 
-				if (__quality != result.quality) {
-					tools.info("Quality changed:", result.quality);
-					document.querySelector("#stream-quality-select [value=\"" + result.quality + "\"]").selected = true;
-					__quality = result.quality;
-				}
+		$("stream-size-slider").value = 100;
+		__resize();
+	};
 
-				__applySizeFactor();
-				$("stream-image").src = "/streamer/stream?t=" + new Date().getTime();
-			}
-		});
+	var __applySizeFactor = function(center=false) {
+		var el_stream_image = $("stream-image");
+		el_stream_image.style.width = __resolution.width * __size_factor + "px";
+		el_stream_image.style.height = __resolution.height * __size_factor + "px";
+		ui.showWindow($("stream-window"), false, center);
 	};
 
 	__init__();
diff --git a/web/js/ui.js b/web/js/ui.js
index d04184c1..20bba472 100644
--- a/web/js/ui.js
+++ b/web/js/ui.js
@@ -122,9 +122,9 @@ function Ui() {
 		return promise;
 	};
 
-	self.showWindow = function(el_window, raise=true) {
-		if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered")) {
-			var view = __getViewGeometry();
+	self.showWindow = function(el_window, raise=true, center=false) {
+		if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered") || center) {
+			var view = self.getViewGeometry();
 			var rect = el_window.getBoundingClientRect();
 			el_window.style.top = Math.max($("ctl").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
 			el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
@@ -136,8 +136,17 @@ function Ui() {
 		}
 	};
 
+	self.getViewGeometry = function() {
+		return {
+			top: $("ctl").clientHeight,
+			bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
+			left: 0,
+			right: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
+		};
+	};
+
 	var __isWindowOnPage = function(el_window) {
-		var view = __getViewGeometry();
+		var view = self.getViewGeometry();
 		var rect = el_window.getBoundingClientRect();
 
 		return (
@@ -148,15 +157,6 @@ function Ui() {
 		);
 	};
 
-	var __getViewGeometry = function() {
-		return {
-			top: $("ctl").clientHeight,
-			bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
-			left: 0,
-			right: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
-		};
-	};
-
 	var __toggleMenu = function(el_a) {
 		var all_hidden = true;
 
@@ -211,7 +211,7 @@ function Ui() {
 	};
 
 	var __organizeWindowsOnResize = function(orientation) {
-		var view = __getViewGeometry();
+		var view = self.getViewGeometry();
 		Array.prototype.forEach.call($$("window"), function(el_window) {
 			if (el_window.style.visibility === "visible" && (orientation || el_window.hasAttribute("data-centered"))) {
 				var rect = el_window.getBoundingClientRect();