From 7fdd0979c5145e106cf7aef714f27135725f3b7d Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 21 May 2024 03:04:24 +0530
Subject: [PATCH] refresh dashboard activity on visibility change

---
 web/src/api/ws.tsx                   | 19 ++++++++++++++++---
 web/src/hooks/use-camera-activity.ts |  4 ++--
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/web/src/api/ws.tsx b/web/src/api/ws.tsx
index 831b3dff3..5d7d400f0 100644
--- a/web/src/api/ws.tsx
+++ b/web/src/api/ws.tsx
@@ -221,7 +221,7 @@ export function useFrigateStats(): { payload: FrigateStats } {
 
 export function useInitialCameraState(
   camera: string,
-  refreshOnStart: boolean,
+  revalidateOnFocus: boolean,
 ): {
   payload: FrigateCameraState;
 } {
@@ -232,12 +232,25 @@ export function useInitialCameraState(
   const data = JSON.parse(payload as string);
 
   useEffect(() => {
-    if (refreshOnStart) {
+    let listener = undefined;
+    if (revalidateOnFocus) {
       sendCommand("onConnect");
+      listener = () => {
+        if (document.visibilityState == "visible") {
+          sendCommand("onConnect");
+        }
+      };
+      addEventListener("visibilitychange", listener);
     }
+
+    return () => {
+      if (listener) {
+        removeEventListener("visibilitychange", listener);
+      }
+    };
     // only refresh when onRefresh value changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [refreshOnStart]);
+  }, [revalidateOnFocus]);
 
   return { payload: data ? data[camera] : undefined };
 }
diff --git a/web/src/hooks/use-camera-activity.ts b/web/src/hooks/use-camera-activity.ts
index 7019dafda..82cda969a 100644
--- a/web/src/hooks/use-camera-activity.ts
+++ b/web/src/hooks/use-camera-activity.ts
@@ -19,7 +19,7 @@ type useCameraActivityReturn = {
 
 export function useCameraActivity(
   camera: CameraConfig,
-  refreshOnStart: boolean = true,
+  revalidateOnFocus: boolean = true,
 ): useCameraActivityReturn {
   const [objects, setObjects] = useState<ObjectType[]>([]);
 
@@ -27,7 +27,7 @@ export function useCameraActivity(
 
   const { payload: initialCameraState } = useInitialCameraState(
     camera.name,
-    refreshOnStart,
+    revalidateOnFocus,
   );
 
   const updatedCameraState = useDeepMemo(initialCameraState);