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() {