Show camera name when camera is offline

web/src/components/player/LivePlayer.tsx

@@ -46,7 +46,7 @@ export default function LivePlayer({
 }: LivePlayerProps) {
   // camera activity
 
-  const { activeMotion, activeTracking, objects } =
+  const { activeMotion, activeTracking, objects, offline } =
     useCameraActivity(cameraConfig);
 
   const cameraActive = useMemo(
@@ -224,9 +224,16 @@ export default function LivePlayer({
         />
       </div>
 
-      <div className="absolute right-2 top-2 size-4">
+      <div className="absolute right-2 top-2">
-        {activeMotion && (
+        {!offline && activeMotion && (
-          <MdCircle className="size-2 animate-pulse text-danger shadow-danger drop-shadow-md" />
+          <MdCircle className="mr-2 size-2 animate-pulse text-danger shadow-danger drop-shadow-md" />
+        )}
+        {offline && (
+          <Chip
+            className={`z-0 flex items-start justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 text-xs capitalize`}
+          >
+            {cameraConfig.name.replaceAll("_", " ")}
+          </Chip>
         )}
       </div>
     </div>

web/src/hooks/use-camera-activity.ts

@@ -1,5 +1,6 @@
 import {
   useFrigateEvents,
+  useFrigateStats,
   useInitialCameraState,
   useMotionActivity,
 } from "@/api/ws";
@@ -10,11 +11,13 @@ 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";
 
 type useCameraActivityReturn = {
   activeTracking: boolean;
   activeMotion: boolean;
   objects: ObjectType[];
+  offline: boolean;
 };
 
 export function useCameraActivity(
@@ -116,12 +119,31 @@ export function useCameraActivity(
     handleSetObjects(newObjects);
   }, [camera, updatedEvent, objects, handleSetObjects]);
 
+  // determine if camera is offline
+
+  const { payload: frigateStats } = useFrigateStats();
+
+  const offline = useMemo(() => {
+    if (!frigateStats) {
+      return false;
+    }
+
+    const cameras = frigateStats["cameras"];
+
+    if (!cameras) {
+      return false;
+    }
+
+    return cameras[camera.name].camera_fps == 0;
+  }, [camera, frigateStats]);
+
   return {
     activeTracking: hasActiveObjects,
     activeMotion: detectingMotion
       ? detectingMotion === "ON"
       : initialCameraState?.motion === true,
     objects,
+    offline,
   };
 }