Add outline for alerts/detections in motion review (#10642)

web/src/components/player/LivePlayer.tsx

@@ -142,7 +142,7 @@ export default function LivePlayer({
     <div
       className={`relative flex justify-center ${liveMode == "jsmpeg" ? "size-full" : "w-full"} outline cursor-pointer ${
         activeTracking
-          ? "outline-severity_alert outline-1 rounded-2xl shadow-[0_0_6px_2px] shadow-severity_alert"
+          ? "outline-severity_alert outline-3 rounded-2xl shadow-severity_alert"
           : "outline-0 outline-background"
       } transition-all duration-500 ${className}`}
       onClick={onClick}

web/src/components/timeline/EventSegment.tsx

@@ -179,13 +179,13 @@ export function EventSegment({
           `outline-severity_${severityType}`,
           `shadow-severity_${severityType}`,
         );
-        element.classList.add("outline-4", "shadow-[0_0_6px_1px]");
+        element.classList.add("outline-3");
-        element.classList.remove("outline-0", "shadow-none");
+        element.classList.remove("outline-0");
 
         // Remove the classes after a short timeout
         setTimeout(() => {
-          element.classList.remove("outline-4", "shadow-[0_0_6px_1px]");
+          element.classList.remove("outline-3");
-          element.classList.add("outline-0", "shadow-none");
+          element.classList.add("outline-0");
         }, 3000);
       }
 
@@ -226,36 +226,36 @@ export function EventSegment({
       {severity.map((severityValue: number, index: number) => (
         <React.Fragment key={index}>
           {severityValue === displaySeverityType && (
-            <div className="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-2 z-10 cursor-pointer">
+            <HoverCard openDelay={200} closeDelay={100}>
-              <div className="flex flex-row justify-center w-[20px] md:w-[40px]">
+              <HoverCardTrigger asChild>
-                <div className="flex justify-center">
+                <div className="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-2 z-10 cursor-pointer">
-                  <HoverCard openDelay={200} closeDelay={100}>
+                  <div className="flex flex-row justify-center w-[20px] md:w-[40px]">
-                    <div
+                    <div className="flex justify-center">
-                      className="absolute left-1/2 transform -translate-x-1/2 w-[8px] h-2 ml-[2px] z-10 cursor-pointer"
+                      <div
-                      data-severity={severityValue}
+                        className="absolute left-1/2 transform -translate-x-1/2 w-[8px] h-2 ml-[2px] z-10 cursor-pointer"
-                    >
+                        data-severity={severityValue}
-                      <HoverCardTrigger asChild>
+                      >
                         <div
                           key={`${segmentKey}_${index}_primary_data`}
                           className={`w-full h-2 bg-gradient-to-r ${roundBottomPrimary ? "rounded-bl-full rounded-br-full" : ""} ${roundTopPrimary ? "rounded-tl-full rounded-tr-full" : ""} ${severityColors[severityValue]}`}
                         ></div>
-                      </HoverCardTrigger>
+                      </div>
-                      <HoverCardPortal>
-                        <HoverCardContent
-                          className="rounded-2xl w-[250px] p-2"
-                          side="left"
-                        >
-                          <img
-                            className="rounded-lg"
-                            src={`${apiHost}${eventThumbnail.replace("/media/frigate/", "")}`}
-                          />
-                        </HoverCardContent>
-                      </HoverCardPortal>
                     </div>
-                  </HoverCard>
+                  </div>
                 </div>
-              </div>
+              </HoverCardTrigger>
-            </div>
+              <HoverCardPortal>
+                <HoverCardContent
+                  className="rounded-2xl w-[250px] p-2"
+                  side="left"
+                >
+                  <img
+                    className="rounded-lg"
+                    src={`${apiHost}${eventThumbnail.replace("/media/frigate/", "")}`}
+                  />
+                </HoverCardContent>
+              </HoverCardPortal>
+            </HoverCard>
           )}
         </React.Fragment>
       ))}

web/src/views/events/EventView.tsx

@@ -519,7 +519,7 @@ function DetectionReview({
         )}
 
         <div
-          className="w-full m-2 grid sm:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4"
+          className="w-full m-2 p-1 grid sm:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4"
           ref={contentRef}
         >
           {currentItems &&
@@ -534,7 +534,7 @@ function DetectionReview({
                   data-segment-start={
                     alignStartDateToTimeline(value.start_time) - segmentDuration
                   }
-                  className={`review-item outline outline-offset-1 rounded-lg shadow-none transition-all my-1 md:my-0 ${selected ? `outline-4 shadow-[0_0_6px_1px] outline-severity_${value.severity} shadow-severity_${value.severity}` : "outline-0 duration-500"}`}
+                  className={`review-item outline outline-offset-1 rounded-lg shadow-none transition-all my-1 md:my-0 ${selected ? `outline-3 outline-severity_${value.severity} shadow-severity_${value.severity}` : "outline-0 duration-500"}`}
                 >
                   <div className="aspect-video rounded-lg overflow-hidden">
                     <PreviewThumbnailPlayer
@@ -758,6 +758,23 @@ function MotionReview({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [playing, playbackRate]);
 
+  const getDetectionType = useCallback(
+    (cameraName: string) => {
+      if (motionOnly) {
+        return null;
+      }
+      const matchingItem = reviewItems?.all.find(
+        (item) =>
+          currentTime >= item.start_time &&
+          currentTime <= item.end_time &&
+          item.camera === cameraName,
+      );
+
+      return matchingItem ? matchingItem.severity : null;
+    },
+    [reviewItems, currentTime, motionOnly],
+  );
+
   if (!relevantPreviews) {
     return <ActivityIndicator />;
   }
@@ -767,7 +784,7 @@ function MotionReview({
       <div className="flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar">
         <div
           ref={contentRef}
-          className="w-full m-2 grid sm:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4 overflow-auto no-scrollbar"
+          className="w-full m-2 p-1 grid sm:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4 overflow-auto no-scrollbar"
         >
           {reviewCameras.map((camera) => {
             let grow;
@@ -779,10 +796,11 @@ function MotionReview({
             } else {
               grow = "aspect-video";
             }
+            const detectionType = getDetectionType(camera.name);
             return (
               <PreviewPlayer
                 key={camera.name}
-                className={`${grow}`}
+                className={`${detectionType ? `outline outline-3 outline-offset-1 outline-severity_${detectionType}` : "outline-0 shadow-none"} rounded-2xl ${grow}`}
                 camera={camera.name}
                 timeRange={currentTimeRange}
                 startTime={startTime}