Rework of #39 (#40)

* Rework of #39 patch from @arykov (thanks)

* styled resize corner

* fixed squashing of resizaable window on moving

* keep window size and opsition after full screen

* not necessary

* attempt to fix desktop overflow

* improved

* ios fixes

* refactoring

1 files changed, 18 insertions, 46 deletions

diff --git a/web/share/js/kvm/stream.js b/web/share/js/kvm/stream.js
index 83e3c4d4..2db37608 100644
--- a/web/share/js/kvm/stream.js
+++ b/web/share/js/kvm/stream.js
@@ -34,8 +34,6 @@ export function Streamer() {
 
 	var __resolution = {width: 640, height: 480};
 
-	var __size_factor = 1;
-
 	var __mjpeg_key = tools.makeId();
 	var __mjpeg_id = "";
 	var __mjpeg_fps = -1;
@@ -53,10 +51,6 @@ export function Streamer() {
 
 		$("stream-resolution-selector").onchange = (() => __sendParam("resolution", $("stream-resolution-selector").value));
 
-		tools.sliderSetParams($("stream-size-slider"), 20, 200, 5, 100);
-		$("stream-size-slider").oninput = () => __resize();
-		$("stream-size-slider").onchange = () => __resize();
-
 		tools.setOnClick($("stream-screenshot-button"), __clickScreenshotButton);
 		tools.setOnClick($("stream-reset-button"), __clickResetButton);
 
@@ -65,6 +59,7 @@ export function Streamer() {
 				self.setState(__state_for_invisible);
 			}
 		};
+		$("stream-window").resize_hook = __resizeHook;
 	};
 
 	/************************************************************************/
@@ -88,6 +83,11 @@ export function Streamer() {
 		}
 
 		if (state && state.streamer) {
+			if (!window.ResizeObserver) {
+				// Browsers that don't support this API(on lower versions of iOS for example)
+				__resizeHook();
+			}
+
 			if (!$("stream-quality-slider").activated) {
 				wm.setElementEnabled($("stream-quality-slider"), true);
 				if ($("stream-quality-slider").value !== state.streamer.encoder.quality) {
@@ -107,13 +107,8 @@ export function Streamer() {
 			}
 
 			let resolution_str = __makeStringResolution(state.streamer.source.resolution);
-			if (__makeStringResolution(__resolution) != resolution_str) {
+			if (__makeStringResolution(__resolution) !== resolution_str) {
 				__resolution = state.streamer.source.resolution;
-				if ($("stream-auto-resize-switch").checked) {
-					__adjustSizeFactor();
-				} else {
-					__applySizeFactor();
-				}
 			}
 
 			if (state.features.resolution) {
@@ -260,40 +255,17 @@ export function Streamer() {
 		});
 	};
 
-	var __resize = function() {
-		let size = $("stream-size-slider").value;
-		$("stream-size-value").innerHTML = `${size}%`;
-		__size_factor = size / 100;
-		__applySizeFactor();
-	};
-
-	var __adjustSizeFactor = function() {
-		let el_window = $("stream-window");
-		let el_slider = $("stream-size-slider");
-		let view = wm.getViewGeometry();
-
-		for (let size = 100; size >= el_slider.min; size -= el_slider.step) {
-			tools.info("Stream: adjusting size:", size);
-			$("stream-size-slider").value = size;
-			__resize();
-
-			let rect = el_window.getBoundingClientRect();
-			if (
-				rect.bottom <= view.bottom
-				&& rect.top >= view.top
-				&& rect.left >= view.left
-				&& rect.right <= view.right
-			) {
-				break;
-			}
-		}
-	};
-
-	var __applySizeFactor = function() {
-		let el = $("stream-image");
-		el.style.width = __resolution.width * __size_factor + "px";
-		el.style.height = __resolution.height * __size_factor + "px";
-		wm.showWindow($("stream-window"), false);
+	var __resizeHook = function() {
+		let rect = $("stream-image").getBoundingClientRect();
+		let width = $("stream-image").naturalWidth;
+		let height = $("stream-image").naturalHeight;
+		let ratio = Math.min(rect.width / width, rect.height / height);
+		$("stream-box").stream_geometry = {
+			"x": Math.round((rect.width - ratio * width) / 2),
+			"y": Math.round((rect.height - ratio * height) / 2),
+			"width": Math.round(ratio * width),
+			"height": Math.round(ratio * height),
+		};
 	};
 
 	var __makeStringResolution = function(resolution) {