Fixed pikvm/pikvm#38: Closeable stream window

2 files changed, 49 insertions, 6 deletions

diff --git a/web/share/js/kvm/stream.js b/web/share/js/kvm/stream.js
index 4e04aa9d..5a85b41b 100644
--- a/web/share/js/kvm/stream.js
+++ b/web/share/js/kvm/stream.js
@@ -35,11 +35,15 @@ export function Streamer() {
 	var __resolution = {width: 640, height: 480};
 	var __resolution_str = "640x480";
 	var __available_resolutions = [];
+
 	var __size_factor = 1;
+
 	var __client_key = tools.makeId();
 	var __client_id = "";
 	var __client_fps = -1;
 
+	var __state_for_invisible = null;
+
 	var __init__ = function() {
 		$("stream-led").title = "Stream inactive";
 
@@ -60,11 +64,29 @@ export function Streamer() {
 
 		tools.setOnClick($("stream-screenshot-button"), __clickScreenshotButton);
 		tools.setOnClick($("stream-reset-button"), __clickResetButton);
+
+		$("stream-window").show_hook = function() {
+			if (__state_for_invisible !== null) {
+				self.setState(__state_for_invisible);
+			}
+		};
 	};
 
 	/************************************************************************/
 
 	self.setState = function(state) {
+		if (!wm.isWindowVisible($("stream-window"))) {
+			if (__state_for_invisible === null) {
+				$("stream-image").src = "/share/png/blank-stream.png";
+				$("stream-image").className = "stream-image-inactive";
+				$("stream-box").classList.add("stream-box-inactive");
+			}
+			__state_for_invisible = state;
+			state = null;
+		} else {
+			__state_for_invisible = null;
+		}
+
 		if (state) {
 			tools.featureSetEnabled($("stream-quality"), state.features.quality && (state.streamer === null || state.streamer.encoder.quality > 0));
 			tools.featureSetEnabled($("stream-resolution"), state.features.resolution);
@@ -124,12 +146,17 @@ export function Streamer() {
 				wm.switchEnabled($("stream-reset-button"), true);
 				$("stream-quality-slider").activated = false;
 				$("stream-desired-fps-slider").activated = false;
+
 				tools.info("Stream: active");
 			}
 
 			__updateStreamWindow(true, state.streamer.source.online);
 
 		} else {
+			if ($("stream-led").className !== "led-gray") { // Чтобы не дублировать логи, когда окно стрима закрыто
+				tools.info("Stream: inactive");
+			}
+
 			$("stream-led").className = "led-gray";
 			$("stream-led").title = "Stream inactive";
 			wm.switchEnabled($("stream-screenshot-button"), false);
@@ -137,7 +164,6 @@ export function Streamer() {
 			wm.switchEnabled($("stream-quality-slider"), false);
 			wm.switchEnabled($("stream-desired-fps-slider"), false);
 			wm.switchEnabled($("stream-resolution-selector"), false);
-			tools.info("Stream: inactive");
 
 			__updateStreamWindow(false, false);
 		}
diff --git a/web/share/js/wm.js b/web/share/js/wm.js
index ee4da180..23d64af3 100644
--- a/web/share/js/wm.js
+++ b/web/share/js/wm.js
@@ -177,14 +177,25 @@ function __WindowManager() {
 	};
 
 	self.showWindow = function(el_window, activate=true, center=false) {
+		let showed = false;
 		if (el_window.style.visibility === "hidden") {
 			center = true;
+			showed = true;
 		}
 		__organizeWindow(el_window, center);
 		el_window.style.visibility = "visible";
 		if (activate) {
 			__activateWindow(el_window);
 		}
+		if (Object.prototype.hasOwnProperty.call(el_window, "show_hook")) {
+			if (showed) {
+				el_window.show_hook();
+			}
+		}
+	};
+
+	self.isWindowVisible = function(el_window) {
+		return (window.getComputedStyle(el_window, null).visibility !== "hidden");
 	};
 
 	self.getViewGeometry = function() {
@@ -255,7 +266,7 @@ function __WindowManager() {
 		} else if ((el_parent = event.target.closest(".menu")) !== null) {
 			el_parent.classList.add("menu-active");
 		}
-		tools.debug("Focus in:", el_parent);
+		tools.debug("UI: Focus in:", el_parent);
 	};
 
 	var __focusOut = function(event) {
@@ -267,7 +278,7 @@ function __WindowManager() {
 		} else if ((el_parent = event.target.closest(".menu")) !== null) {
 			el_parent.classList.remove("menu-active");
 		}
-		tools.debug("Focus out:", el_parent);
+		tools.debug("UI: Focus out:", el_parent);
 	};
 
 	var __globalMouseButtonHandler = function(event) {
@@ -320,6 +331,9 @@ function __WindowManager() {
 
 		if (document.activeElement) {
 			el_last_window = (document.activeElement.closest(".modal-window") || document.activeElement.closest(".window"));
+			if (el_last_window && window.getComputedStyle(el_last_window, null).visibility === "hidden") {
+				el_last_window = null;
+			}
 		}
 
 		if (!el_last_window || el_last_window === el_except_window) {
@@ -337,8 +351,11 @@ function __WindowManager() {
 		}
 
 		if (el_last_window) {
-			tools.debug("Activating last window:", el_last_window);
+			tools.debug("UI: Activating last window:", el_last_window);
 			__activateWindow(el_last_window);
+		} else {
+			tools.debug("UI: Unsetting focuse because no windows left");
+			document.activeElement.blur();
 		}
 	};
 
@@ -358,12 +375,12 @@ function __WindowManager() {
 			if (el_window.className !== "modal" && parseInt(el_window.style.zIndex) !== __top_z_index) {
 				__top_z_index += 1;
 				el_window.style.zIndex = __top_z_index;
-				tools.debug("UI: activated window:", el_window);
+				tools.debug("UI: Activated window:", el_window);
 			}
 
 			if (el_window !== el_window_contains_focus) {
 				el_to_focus.focus();
-				tools.debug("UI: focused window:", el_window);
+				tools.debug("UI: Focused window:", el_window);
 			}
 		}
 	};