Fixed pikvm/pikvm#38: Closeable stream window

web/kvm/index.html

@@ -402,8 +402,9 @@
       </li>
     </ul>
         <div class="window" id="stream-window">
-          <div class="window-header" id="stream-window-header" style="z-index:1">
+          <div class="window-header" id="stream-window-header">
             <div class="window-grab">Stream</div>
+            <button class="window-button-close">&times;</button>
           </div>
           <div id="stream-info"></div>
           <div class="stream-box-inactive" id="stream-box"><img class="stream-image-inactive" id="stream-image" src="/share/png/blank-stream.png"></div>

web/kvm/window-about.pug

@@ -9,7 +9,7 @@ mixin about_tab(name, title, checked=false)
 			else
 				span(class="code-comment") No data
 
-+window("about-window", "About", true, false)
++window("about-window", "About", false)
 	div(id="about")
 		table
 			tr

web/kvm/window-keyboard.pug

@@ -15,7 +15,7 @@ mixin empty_key(width=0)
 mixin lamp(cls)
 	img(class=`inline-lamp ${cls} led-gray` src=`${svg_dir}/led-square.svg`)
 
-+window("keyboard-window", "Virtual Keyboard", true, true)
++window("keyboard-window", "Virtual Keyboard", true)
 	div(id="keyboard-desktop" class="keypad" align="center")
 		div(class="keypad-block")
 			div(class="keypad-row")

web/kvm/window-stream.pug

@@ -1,4 +1,4 @@
-+window("stream-window", "Stream", false, true)
++window("stream-window", "Stream", true)
 	div(id="stream-info")
 	div(id="stream-box" class="stream-box-inactive")
 		img(id="stream-image" class="stream-image-inactive" src=`${png_dir}/blank-stream.png`)

web/kvm/windows.pug

@@ -1,9 +1,8 @@
-mixin window(id, title, closeable=true, with_header_id=false)
+mixin window(id, title, with_header_id=false)
 	div(id=id class="window")
-		div(id=(with_header_id ? `${id}-header` : "") class="window-header" style=(closeable ? "" : "z-index:1"))
+		div(id=(with_header_id ? `${id}-header` : "") class="window-header")
 			div(class="window-grab") #{title}
-			if closeable
+			button(class="window-button-close") ×
-				button(class="window-button-close") ×
 		block
 
 include window-stream.pug

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);
 		}

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);
 			}
 		}
 	};