refresh dashboard activity on visibility change

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 };
 }

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);