Add chips for activity on cameras

web/src/api/ws.tsx

@@ -228,7 +228,7 @@ export function useMotionActivity(camera: string): { payload: string } {
   return { payload };
 }
 
-export function useAudioActivity(camera: string): { payload: string } {
+export function useAudioActivity(camera: string): { payload: number } {
   const {
     value: { payload },
   } = useWs(`${camera}/audio/rms`, "");

web/src/components/camera/DynamicCameraImage.tsx

@@ -108,7 +108,7 @@ export default function DynamicCameraImage({
         {camera.audio.enabled_in_config && (
           <LuEar
             className={`${
-              parseInt(audioRms) >= camera.audio.min_volume
+             audioRms >= camera.audio.min_volume
                 ? "text-audio"
                 : "text-gray-600"
             }`}

web/src/components/player/LivePlayer.tsx

@@ -11,8 +11,10 @@ import { Label } from "../ui/label";
 import { usePersistence } from "@/hooks/use-persistence";
 import MSEPlayer from "./MsePlayer";
 import JSMpegPlayer from "./JSMpegPlayer";
-import { MdCircle } from "react-icons/md";
+import { MdCircle, MdLeakAdd, MdSelectAll } from "react-icons/md";
+import { BsSoundwave } from "react-icons/bs";
 import Chip from "../Chip";
+import useCameraActivity from "@/hooks/use-camera-activity";
 
 const emptyObject = Object.freeze({});
 
@@ -20,6 +22,7 @@ type LivePlayerProps = {
   className?: string;
   cameraConfig: CameraConfig;
   liveMode?: "webrtc" | "mse" | "jsmpeg" | "debug";
+  liveChips?: boolean;
 };
 
 type Options = { [key: string]: boolean };
@@ -28,14 +31,19 @@ export default function LivePlayer({
   className,
   cameraConfig,
   liveMode = "mse",
+  liveChips = false,
 }: LivePlayerProps) {
-  const [showSettings, setShowSettings] = useState(false);
+  // camera activity
+  const { activeMotion, activeAudio, activeTracking } =
+    useCameraActivity(cameraConfig);
 
+  // debug view settings
+
+  const [showSettings, setShowSettings] = useState(false);
   const [options, setOptions] = usePersistence(
     `${cameraConfig?.name}-feed`,
     emptyObject
   );
-
   const handleSetOption = useCallback(
     (id: string, value: boolean) => {
       const newOptions = { ...options, [id]: value };
@@ -43,7 +51,6 @@ export default function LivePlayer({
     },
     [options, setOptions]
   );
-
   const searchParams = useMemo(
     () =>
       new URLSearchParams(
@@ -55,7 +62,6 @@ export default function LivePlayer({
       ),
     [options]
   );
-
   const handleToggleSettings = useCallback(() => {
     setShowSettings(!showSettings);
   }, [showSettings, setShowSettings]);
@@ -126,6 +132,30 @@ export default function LivePlayer({
   return (
     <div className={`relative flex justify-center ${className}`}>
       {player}
+      <div className="absolute flex left-2 top-2 gap-2">
+        <Chip className="bg-gray-500 bg-gradient-to-br">
+          <MdLeakAdd
+            className={`w-4 h-4 ${activeMotion ? "text-motion" : "text-white"}`}
+          />
+          <div className="ml-1 capitalize text-white text-xs">Motion</div>
+        </Chip>
+        {cameraConfig.audio.enabled_in_config && (
+          <Chip className="bg-gray-500 bg-gradient-to-br">
+            <BsSoundwave
+              className={`w-4 h-4 ${activeAudio ? "text-audio" : "text-white"}`}
+            />
+            <div className="ml-1 capitalize text-white text-xs">Sound</div>
+          </Chip>
+        )}
+        <Chip className="bg-gray-500 bg-gradient-to-br">
+          <MdSelectAll
+            className={`w-4 h-4 ${
+              activeTracking ? "text-object" : "text-white"
+            }`}
+          />
+          <div className="ml-1 capitalize text-white text-xs">Tracking</div>
+        </Chip>
+      </div>
       <Chip className="absolute right-2 top-2 bg-gray-500 bg-gradient-to-br">
         <MdCircle className="w-2 h-2 text-danger" />
         <div className="ml-1 capitalize text-white text-xs">

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

@@ -0,0 +1,64 @@
+import {
+  useAudioActivity,
+  useFrigateEvents,
+  useMotionActivity,
+} from "@/api/ws";
+import { CameraConfig } from "@/types/frigateConfig";
+import { useEffect, useMemo, useState } from "react";
+
+type useCameraActivityReturn = {
+  activeTracking: boolean;
+  activeMotion: boolean;
+  activeAudio: boolean;
+};
+
+export default function useCameraActivity(
+  camera: CameraConfig
+): useCameraActivityReturn {
+  const [activeObjects, setActiveObjects] = useState<string[]>([]);
+  const hasActiveObjects = useMemo(
+    () => activeObjects.length > 0,
+    [activeObjects]
+  );
+
+  const { payload: detectingMotion } = useMotionActivity(camera.name);
+  const { payload: event } = useFrigateEvents();
+  const { payload: audioRms } = useAudioActivity(camera.name);
+
+  useEffect(() => {
+    if (!event) {
+      return;
+    }
+
+    if (event.after.camera != camera.name) {
+      return;
+    }
+
+    if (event.type == "end") {
+      const eventIndex = activeObjects.indexOf(event.after.id);
+
+      if (eventIndex != -1) {
+        const newActiveObjects = [...activeObjects];
+        newActiveObjects.splice(eventIndex, 1);
+        setActiveObjects(newActiveObjects);
+      }
+    } else {
+      if (!event.after.stationary) {
+        const eventIndex = activeObjects.indexOf(event.after.id);
+
+        if (eventIndex == -1) {
+          const newActiveObjects = [...activeObjects, event.after.id];
+          setActiveObjects(newActiveObjects);
+        }
+      }
+    }
+  }, [event, activeObjects]);
+
+  return {
+    activeTracking: hasActiveObjects,
+    activeMotion: detectingMotion == "ON",
+    activeAudio: camera.audio.enabled_in_config
+      ? audioRms >= camera.audio.min_volume
+      : false,
+  };
+}

web/src/pages/Live.tsx

@@ -87,6 +87,7 @@ function Live() {
               key={camera.name}
               className={`rounded-2xl bg-black ${grow}`}
               cameraConfig={camera}
+              liveChips
             />
           );
         })}