updated image loading

src/hooks/useOverviewVideo.ts

@@ -2,6 +2,8 @@ import { useQuery } from "@tanstack/react-query";
 import { useRef } from "react";
 
 const apiUrl = import.meta.env.VITE_BASEURL;
+const FAST_MS = 200; // tab visible
+const SLOW_MS = 2000; // tab hidden
 
 async function fetchOverviewImage(cameraSide: string) {
   const response = await fetch(`${apiUrl}${cameraSide}-preview`);
@@ -14,7 +16,11 @@ export function useOverviewVideo() {
   const { isPending, isError, data } = useQuery({
     queryKey: ["overviewVideo"],
     queryFn: () => fetchOverviewImage("CameraFront"),
-    refetchInterval: 500,
+    // refetchInterval: () =>
+    //   typeof document !== "undefined" && document.visibilityState === "hidden"
+    //     ? SLOW_MS
+    //     : FAST_MS,
+    // refetchIntervalInBackground: false,
   });
 
   if (isPending) return;