Show camera name when offline

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<FrigateStats>("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;

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,

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<FrigateConfig>("config");
@@ -91,3 +92,20 @@ export default function useStats(stats: FrigateStats | undefined) {
 
   return { potentialProblems };
 }
+
+export function useAutoFrigateStats() {
+  const { data: initialStats } = useSWR<FrigateStats>("stats", {
+    revalidateOnFocus: false,
+  });
+  const { payload: latestStats } = useFrigateStats();
+
+  const stats = useMemo(() => {
+    if (latestStats) {
+      return latestStats;
+    }
+
+    return initialStats;
+  }, [initialStats, latestStats]);
+
+  return stats;
+}