From 2be7576421563f9a0fdf5f957b89299f877d6ffd Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 12 Feb 2024 11:54:15 -0700
Subject: [PATCH] Don't show live view when window is not visible

---
 web/src/components/player/LivePlayer.tsx |  6 ++++--
 web/src/pages/Live.tsx                   | 16 +++++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 09ed3c027..5c5f648dd 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -26,6 +26,7 @@ type LivePlayerProps = {
   cameraConfig: CameraConfig;
   preferredLiveMode?: LivePlayerMode;
   showStillWithoutActivity?: boolean;
+  windowVisible?: boolean;
 };
 
 type Options = { [key: string]: boolean };
@@ -35,14 +36,15 @@ export default function LivePlayer({
   cameraConfig,
   preferredLiveMode,
   showStillWithoutActivity = true,
+  windowVisible = true,
 }: LivePlayerProps) {
   // camera activity
   const { activeMotion, activeAudio, activeTracking } =
     useCameraActivity(cameraConfig);
 
   const cameraActive = useMemo(
-    () => activeMotion || activeTracking,
-    [activeMotion, activeTracking]
+    () => windowVisible && (activeMotion || activeTracking),
+    [activeMotion, activeTracking, windowVisible]
   );
   const liveMode = useCameraLiveMode(cameraConfig, preferredLiveMode);
 
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index 5d5bc58b4..c554b58ee 100644
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@@ -5,7 +5,7 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Event as FrigateEvent } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import useSWR from "swr";
 
 function Live() {
@@ -64,6 +64,19 @@ function Live() {
       .sort((aConf, bConf) => aConf.ui.order - bConf.ui.order);
   }, [config]);
 
+  const [windowVisible, setWindowVisible] = useState(false);
+  const visibilityListener = useCallback(() => {
+    setWindowVisible(document.visibilityState == "visible");
+  }, []);
+
+  useEffect(() => {
+    addEventListener("visibilitychange", visibilityListener);
+
+    return () => {
+      removeEventListener("visibilitychange", visibilityListener);
+    };
+  }, []);
+
   return (
     <>
       {events && events.length > 0 && (
@@ -94,6 +107,7 @@ function Live() {
             <LivePlayer
               key={camera.name}
               className={`mb-2 md:mb-0 rounded-2xl bg-black ${grow}`}
+              windowVisible={windowVisible}
               cameraConfig={camera}
               preferredLiveMode="mse"
             />