pikvm/pikvm#1498: Option to suspend stream on inactive tab

web/kvm/index.html

@@ -426,6 +426,16 @@
                             </div>
                           </td>
                     </tr>
+                    <tr>
+                          <td>Suspend stream when tab is not active:
+                          </td>
+                          <td align="right">
+                            <div class="switch-box">
+                              <input type="checkbox" id="stream-suspend-switch">
+                              <label for="stream-suspend-switch"><span class="switch-inner"></span><span class="switch"></span></label>
+                            </div>
+                          </td>
+                    </tr>
                   </table>
                 </div>
               </details>

web/kvm/navbar-system.pug

@@ -112,6 +112,8 @@ li.right#system-dropdown
 					+menu_switch_td2("page-close-ask-switch", true, true) Ask page close confirmation:
 				tr
 					+menu_switch_td2("page-full-tab-stream-switch", true, false) Expand for the entire tab by default:
+				tr
+					+menu_switch_td2("stream-suspend-switch", true, false) Suspend stream when tab is not active:
 
 		table.kv
 			tr

web/share/js/kvm/stream.js

@@ -108,21 +108,31 @@ export function Streamer() {
 		tools.el.setOnClick($("stream-screenshot-button"), __clickScreenshotButton);
 		tools.el.setOnClick($("stream-reset-button"), __clickResetButton);
 
+		tools.storage.bindSimpleSwitch($("stream-suspend-switch"), "stream.suspend", false, __visibilityHook);
+
 		$("stream-window").show_hook = __visibilityHook;
 		$("stream-window").close_hook = __visibilityHook;
 		$("stream-window").organize_hook = __organizeHook;
+
+		document.addEventListener("visibilitychange", __visibilityHook);
 	};
 
 	/************************************************************************/
 
 	var __isStreamRequired = function() {
-		return wm.isWindowVisible($("stream-window"));
+		return (
+			wm.isWindowVisible($("stream-window"))
+			&& (
+				!$("stream-suspend-switch").checked
+				|| (document.visibilityState === "visible")
+			)
+		);
 	};
 
 	var __visibilityHook = function() {
 		let req = __isStreamRequired();
 		__applyState(req ? __state : null);
-	}
+	};
 
 	var __organizeHook = function() {
 		let geo = self.getGeometry();
@@ -180,7 +190,8 @@ export function Streamer() {
 
 	var __applyState = function(state) {
 		if (__janus_imported === null) {
-			alert("__janus_imported is null, please report");
+			// XXX: This warning is triggered by visibilitychange event via the __visibilityHook()
+			// alert("__janus_imported is null, please report");
 			return;
 		}