add chips for active objects on live dashboard (#11162)

web/src/components/player/LivePlayer.tsx

@@ -6,9 +6,14 @@ import { useEffect, useMemo, useState } from "react";
 import MSEPlayer from "./MsePlayer";
 import JSMpegPlayer from "./JSMpegPlayer";
 import { MdCircle } from "react-icons/md";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { useCameraActivity } from "@/hooks/use-camera-activity";
 import { LivePlayerMode } from "@/types/live";
 import useCameraLiveMode from "@/hooks/use-camera-live-mode";
+import { getIconForLabel } from "@/utils/iconUtil";
+import Chip from "../indicators/Chip";
+import { isMobile } from "react-device-detect";
+import { capitalizeFirstLetter } from "@/utils/stringUtil";
 
 type LivePlayerProps = {
   cameraRef?: (ref: HTMLDivElement | null) => void;
@@ -37,9 +42,12 @@ export default function LivePlayer({
   pip,
   onClick,
 }: LivePlayerProps) {
+  const [cameraHovered, setCameraHovered] = useState(false);
+
   // camera activity
 
-  const { activeMotion, activeTracking } = useCameraActivity(cameraConfig);
+  const { activeMotion, activeTracking, activeObjects } =
+    useCameraActivity(cameraConfig);
 
   const cameraActive = useMemo(
     () =>
@@ -148,11 +156,54 @@ export default function LivePlayer({
           : "outline-0 outline-background"
       } transition-all duration-500 ${className}`}
       onClick={onClick}
+      onMouseEnter={() => setCameraHovered(true)}
+      onMouseLeave={() => setCameraHovered(false)}
     >
       <div className="absolute top-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
       <div className="absolute bottom-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
       {player}
 
+      {activeObjects.length > 0 && (
+        <div className="absolute left-0 top-2 z-40">
+          <Tooltip>
+            <div className="flex">
+              <TooltipTrigger asChild>
+                <div className="mx-3 pb-1 text-white text-sm">
+                  <Chip
+                    className={`flex items-start justify-between space-x-1 ${cameraHovered || isMobile ? "" : "hidden"} bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0`}
+                  >
+                    {[
+                      ...new Set([
+                        ...(activeObjects || []).map(({ label }) => label),
+                      ]),
+                    ]
+                      .map((label) => {
+                        return getIconForLabel(label, "size-3 text-white");
+                      })
+                      .sort()}
+                  </Chip>
+                </div>
+              </TooltipTrigger>
+            </div>
+            <TooltipContent className="capitalize">
+              {[
+                ...new Set([
+                  ...(activeObjects || []).map(({ label }) => label),
+                ]),
+              ]
+                .filter(
+                  (label) =>
+                    label !== undefined && !label.includes("-verified"),
+                )
+                .map((label) => capitalizeFirstLetter(label))
+                .sort()
+                .join(", ")
+                .replaceAll("-verified", "")}
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      )}
+
       <div
         className={`absolute inset-0 w-full ${
           showStillWithoutActivity && !liveReady ? "visible" : "invisible"

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

@@ -4,17 +4,24 @@ import { MotionData, ReviewSegment } from "@/types/review";
 import { useEffect, useMemo, useState } from "react";
 import { useTimelineUtils } from "./use-timeline-utils";
 
+type ActiveObjectType = {
+  id: string;
+  label: string;
+  stationary: boolean;
+};
+
 type useCameraActivityReturn = {
   activeTracking: boolean;
   activeMotion: boolean;
+  activeObjects: ActiveObjectType[];
 };
 
 export function useCameraActivity(
   camera: CameraConfig,
 ): useCameraActivityReturn {
-  const [activeObjects, setActiveObjects] = useState<string[]>([]);
+  const [activeObjects, setActiveObjects] = useState<ActiveObjectType[]>([]);
   const hasActiveObjects = useMemo(
-    () => activeObjects.length > 0,
+    () => activeObjects.filter((obj) => !obj.stationary).length > 0,
     [activeObjects],
   );
 
@@ -30,7 +37,9 @@ export function useCameraActivity(
       return;
     }
 
-    const eventIndex = activeObjects.indexOf(event.after.id);
+    const eventIndex = activeObjects.findIndex(
+      (obj) => obj.id === event.after.id,
+    );
 
     if (event.type == "end") {
       if (eventIndex != -1) {
@@ -42,14 +51,14 @@ export function useCameraActivity(
       if (eventIndex == -1) {
         // add unknown event to list if not stationary
         if (!event.after.stationary) {
-          const newActiveObjects = [...activeObjects, event.after.id];
+          const newActiveObject: ActiveObjectType = {
+            id: event.after.id,
+            label: event.after.label,
+            stationary: event.after.stationary,
+          };
+          const newActiveObjects = [...activeObjects, newActiveObject];
           setActiveObjects(newActiveObjects);
         }
-      } else {
-        // remove known event from list if it has become stationary
-        if (event.after.stationary) {
-          activeObjects.splice(eventIndex, 1);
-        }
       }
     }
   }, [camera, event, activeObjects]);
@@ -57,6 +66,7 @@ export function useCameraActivity(
   return {
     activeTracking: hasActiveObjects,
     activeMotion: detectingMotion == "ON",
+    activeObjects,
   };
 }