1 files changed, 64 insertions, 42 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__();