From eb2363b93d9a27bf9f109fc91efee80c4c660729 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 18 Jul 2024 08:22:31 -0500
Subject: [PATCH] Reset preferred live modes to defaults on window visibility
 change (#12499)

---
 web/src/views/live/DraggableGridLayout.tsx |  2 +-
 web/src/views/live/LiveDashboardView.tsx   | 54 +++++++++++-----------
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index b2a5998c9..165829719 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -104,7 +104,7 @@ export default function DraggableGridLayout({
     );
 
     setPreferredLiveModes(newPreferredLiveModes);
-  }, [cameras, config]);
+  }, [cameras, config, windowVisible]);
 
   const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []);
 
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index cafd6647a..bcee49811 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -133,33 +133,6 @@ export default function LiveDashboardView({
     [key: string]: LivePlayerMode;
   }>({});
 
-  useEffect(() => {
-    if (!cameras) return;
-
-    const mseSupported =
-      "MediaSource" in window || "ManagedMediaSource" in window;
-
-    const newPreferredLiveModes = cameras.reduce(
-      (acc, camera) => {
-        const isRestreamed =
-          config &&
-          Object.keys(config.go2rtc.streams || {}).includes(
-            camera.live.stream_name,
-          );
-
-        if (!mseSupported) {
-          acc[camera.name] = isRestreamed ? "webrtc" : "jsmpeg";
-        } else {
-          acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
-        }
-        return acc;
-      },
-      {} as { [key: string]: LivePlayerMode },
-    );
-
-    setPreferredLiveModes(newPreferredLiveModes);
-  }, [cameras, config]);
-
   const [{ height: containerHeight }] = useResizeObserver(containerRef);
 
   const hasScrollbar = useMemo(() => {
@@ -213,6 +186,33 @@ export default function LiveDashboardView({
     };
   }, []);
 
+  useEffect(() => {
+    if (!cameras) return;
+
+    const mseSupported =
+      "MediaSource" in window || "ManagedMediaSource" in window;
+
+    const newPreferredLiveModes = cameras.reduce(
+      (acc, camera) => {
+        const isRestreamed =
+          config &&
+          Object.keys(config.go2rtc.streams || {}).includes(
+            camera.live.stream_name,
+          );
+
+        if (!mseSupported) {
+          acc[camera.name] = isRestreamed ? "webrtc" : "jsmpeg";
+        } else {
+          acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
+        }
+        return acc;
+      },
+      {} as { [key: string]: LivePlayerMode },
+    );
+
+    setPreferredLiveModes(newPreferredLiveModes);
+  }, [cameras, config, windowVisible]);
+
   const cameraRef = useCallback(
     (node: HTMLElement | null) => {
       if (!visibleCameraObserver.current) {