feat(ui): pause video stream when tab is hidden via Page Visibility API

Mirrors the new server-side pauseVideo/resumeVideo JSON-RPC methods in the
web frontend. When the user switches tabs or minimizes the browser, the
encoder feed stops and outbound RTP drops to keepalive levels until the
tab regains visibility. State is synced on mount so a reconnect into an
already-hidden tab pauses immediately.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: mcuelenaere

ui/src/components/WebRTCVideo.tsx

@@ -5,6 +5,7 @@ import { cx } from "@/cva.config";
 import { isWindows } from "@/utils";
 import useKeyboard from "@hooks/useKeyboard";
 import useMouse from "@hooks/useMouse";
+import { useJsonRpc } from "@hooks/useJsonRpc";
 import { useRTCStore, useSettingsStore, useUiStore, useVideoStore } from "@hooks/stores";
 import VirtualKeyboard from "@components/VirtualKeyboard";
 import Actionbar from "@components/ActionBar";
@@ -41,6 +42,7 @@ export default function WebRTCVideo({
 
   // Store hooks
   const settings = useSettingsStore();
+  const { send } = useJsonRpc();
   const { handleKeyPress, resetKeyboardState } = useKeyboard();
   const {
     getRelMouseMoveHandler,
@@ -486,6 +488,30 @@ export default function WebRTCVideo({
     [keyDownHandler, keyUpHandler, resetKeyboardState],
   );
 
+  // Pause/resume the server-side video feed when the tab is hidden so we
+  // don't burn WAN bandwidth decoding-then-discarding frames the user
+  // can't see. The encoder is restarted on resume so the first frame is
+  // an IDR and decode is artifact-free.
+  useEffect(
+    function pauseVideoOnTabHidden() {
+      const sync = () => {
+        send(document.hidden ? "pauseVideo" : "resumeVideo", {});
+      };
+
+      // Sync once on mount in case the tab is already hidden when we
+      // (re)connect, then track every visibility change.
+      sync();
+
+      const abortController = new AbortController();
+      document.addEventListener("visibilitychange", sync, {
+        signal: abortController.signal,
+      });
+
+      return () => abortController.abort();
+    },
+    [send],
+  );
+
   // Setup Video Event Listeners
   useEffect(
     function setupVideoEventListeners() {
@@ -606,13 +632,8 @@ export default function WebRTCVideo({
     <div className="grid h-full w-full grid-rows-(--grid-layout)">
       <div className="flex min-h-[39.5px] flex-col">
         <div className="flex flex-col">
-          <fieldset
-            disabled={peerConnection?.connectionState !== "connected"}
-            className="contents"
-          >
-            <Actionbar
-              requestFullscreen={requestFullscreen}
-            />
+          <fieldset disabled={peerConnection?.connectionState !== "connected"} className="contents">
+            <Actionbar requestFullscreen={requestFullscreen} />
             <MacroBar />
           </fieldset>
         </div>
@@ -634,9 +655,7 @@ export default function WebRTCVideo({
                 <div className="grid grow grid-rows-(--grid-bodyFooter) overflow-hidden">
                   {/* In relative mouse mode and under https, we enable the pointer lock, and to do so we need a bar to show the user to click on the video to enable mouse control */}
                   <PointerLockBar show={showPointerLockBar} />
-                  <div
-                    className="relative mx-4 my-2 flex items-center justify-center overflow-hidden"
-                  >
+                  <div className="relative mx-4 my-2 flex items-center justify-center overflow-hidden">
                     <div
                       ref={fullscreenContainerRef}
                       className="relative flex h-full w-full items-center justify-center"
@@ -652,20 +671,17 @@ export default function WebRTCVideo({
                         disablePictureInPicture
                         controlsList="nofullscreen"
                         style={videoStyle}
-                        className={cx(
-                          "h-full w-full object-contain transition-all duration-1000",
-                          {
-                            "cursor-none": settings.isCursorHidden,
-                            "pointer-events-none": isOcrMode,
-                            "opacity-0!":
-                              isVideoLoading ||
-                              hdmiError ||
-                              hasConnectionIssues ||
-                              peerConnectionState !== "connected",
-                            "opacity-60!": showPointerLockBar,
-                            "animate-slideUpFade": isPlaying,
-                          },
-                        )}
+                        className={cx("h-full w-full object-contain transition-all duration-1000", {
+                          "cursor-none": settings.isCursorHidden,
+                          "pointer-events-none": isOcrMode,
+                          "opacity-0!":
+                            isVideoLoading ||
+                            hdmiError ||
+                            hasConnectionIssues ||
+                            peerConnectionState !== "connected",
+                          "opacity-60!": showPointerLockBar,
+                          "animate-slideUpFade": isPlaying,
+                        })}
                       />
                       <OcrOverlay />
                       {peerConnection?.connectionState == "connected" && !hasConnectionIssues && (