diff --git a/web/src/components/Statusbar.tsx b/web/src/components/Statusbar.tsx index b2574f2ee..67af68af9 100644 --- a/web/src/components/Statusbar.tsx +++ b/web/src/components/Statusbar.tsx @@ -1,33 +1,20 @@ -import { useFrigateStats } from "@/api/ws"; import { StatusBarMessagesContext, StatusMessage, } from "@/context/statusbar-provider"; -import useStats from "@/hooks/use-stats"; -import { FrigateStats } from "@/types/stats"; +import useStats, { useAutoFrigateStats } from "@/hooks/use-stats"; import { useContext, useEffect, useMemo } from "react"; import { FaCheck } from "react-icons/fa"; import { IoIosWarning } from "react-icons/io"; import { MdCircle } from "react-icons/md"; import { Link } from "react-router-dom"; -import useSWR from "swr"; export default function Statusbar() { - const { data: initialStats } = useSWR("stats", { - revalidateOnFocus: false, - }); - const { payload: latestStats } = useFrigateStats(); const { messages, addMessage, clearMessages } = useContext( StatusBarMessagesContext, )!; - const stats = useMemo(() => { - if (latestStats) { - return latestStats; - } - - return initialStats; - }, [initialStats, latestStats]); + const stats = useAutoFrigateStats(); const cpuPercent = useMemo(() => { const systemCpu = stats?.cpu_usages["frigate.full_system"]?.cpu; diff --git a/web/src/hooks/use-camera-activity.ts b/web/src/hooks/use-camera-activity.ts index 582b0f2f1..15b35de7f 100644 --- a/web/src/hooks/use-camera-activity.ts +++ b/web/src/hooks/use-camera-activity.ts @@ -1,6 +1,5 @@ import { useFrigateEvents, - useFrigateStats, useInitialCameraState, useMotionActivity, } from "@/api/ws"; @@ -11,7 +10,7 @@ import { useTimelineUtils } from "./use-timeline-utils"; import { ObjectType } from "@/types/ws"; import useDeepMemo from "./use-deep-memo"; import { isEqual } from "lodash"; -import useStats from "./use-stats"; +import { useAutoFrigateStats } from "./use-stats"; type useCameraActivityReturn = { activeTracking: boolean; @@ -121,21 +120,21 @@ export function useCameraActivity( // determine if camera is offline - const { payload: frigateStats } = useFrigateStats(); + const stats = useAutoFrigateStats(); const offline = useMemo(() => { - if (!frigateStats) { + if (!stats) { return false; } - const cameras = frigateStats["cameras"]; + const cameras = stats["cameras"]; if (!cameras) { return false; } return cameras[camera.name].camera_fps == 0; - }, [camera, frigateStats]); + }, [camera, stats]); return { activeTracking: hasActiveObjects, diff --git a/web/src/hooks/use-stats.ts b/web/src/hooks/use-stats.ts index bafc9e538..099f057c0 100644 --- a/web/src/hooks/use-stats.ts +++ b/web/src/hooks/use-stats.ts @@ -9,6 +9,7 @@ import { useMemo } from "react"; import useSWR from "swr"; import useDeepMemo from "./use-deep-memo"; import { capitalizeFirstLetter } from "@/utils/stringUtil"; +import { useFrigateStats } from "@/api/ws"; export default function useStats(stats: FrigateStats | undefined) { const { data: config } = useSWR("config"); @@ -91,3 +92,20 @@ export default function useStats(stats: FrigateStats | undefined) { return { potentialProblems }; } + +export function useAutoFrigateStats() { + const { data: initialStats } = useSWR("stats", { + revalidateOnFocus: false, + }); + const { payload: latestStats } = useFrigateStats(); + + const stats = useMemo(() => { + if (latestStats) { + return latestStats; + } + + return initialStats; + }, [initialStats, latestStats]); + + return stats; +}