Adjustments and fixes (#10346)

* Increase duration of alerts and detections

* Add key

* Fix cancel button

* Fix motion review when switching days

* Add reset buttons and make calendar apply immediately

* Adjust apis for motion and audio activity

* Write review thumbs as webp and reduce size

frigate/api/review.py

@@ -353,8 +353,8 @@ def delete_reviews(ids: str):
     return make_response(jsonify({"success": True, "message": "Delete reviews"}), 200)
 
 
-@ReviewBp.route("/review/activity")
+@ReviewBp.route("/review/activity/motion")
-def review_activity():
+def motion_activity():
     """Get motion and audio activity."""
     cameras = request.args.get("cameras", "all")
     before = request.args.get("before", type=float, default=datetime.now().timestamp())
@@ -374,6 +374,68 @@ def review_activity():
             Recordings.duration,
             Recordings.objects,
             Recordings.motion,
+        )
+        .where(reduce(operator.and_, clauses))
+        .order_by(Recordings.start_time.asc())
+        .iterator()
+    )
+
+    # format is: { timestamp: segment_start_ts, motion: [0-100], audio: [0 - -100] }
+    # periods where active objects / audio was detected will cause motion to be scaled down
+    data: list[dict[str, float]] = []
+
+    for rec in all_recordings:
+        data.append(
+            {
+                "start_time": rec.start_time,
+                "motion": rec.motion if rec.objects == 0 else 0,
+            }
+        )
+
+    # get scale in seconds
+    scale = request.args.get("scale", type=int, default=30)
+
+    # resample data using pandas to get activity on scaled basis
+    df = pd.DataFrame(data, columns=["start_time", "motion"])
+
+    # set date as datetime index
+    df["start_time"] = pd.to_datetime(df["start_time"], unit="s")
+    df.set_index(["start_time"], inplace=True)
+
+    # normalize data
+    df = df.resample(f"{scale}S").sum().fillna(0.0)
+    df["motion"] = (
+        (df["motion"] - df["motion"].min())
+        / (df["motion"].max() - df["motion"].min())
+        * 100
+    )
+
+    # change types for output
+    df.index = df.index.astype(int) // (10**9)
+    normalized = df.reset_index().to_dict("records")
+    return jsonify(normalized)
+
+
+@ReviewBp.route("/review/activity/audio")
+def audio_activity():
+    """Get motion and audio activity."""
+    cameras = request.args.get("cameras", "all")
+    before = request.args.get("before", type=float, default=datetime.now().timestamp())
+    after = request.args.get(
+        "after", type=float, default=(datetime.now() - timedelta(hours=1)).timestamp()
+    )
+
+    clauses = [(Recordings.start_time > after) & (Recordings.end_time < before)]
+
+    if cameras != "all":
+        camera_list = cameras.split(",")
+        clauses.append((Recordings.camera << camera_list))
+
+    all_recordings: list[Recordings] = (
+        Recordings.select(
+            Recordings.start_time,
+            Recordings.duration,
+            Recordings.objects,
             Recordings.dBFS,
         )
         .where(reduce(operator.and_, clauses))
@@ -382,14 +444,13 @@ def review_activity():
     )
 
     # format is: { timestamp: segment_start_ts, motion: [0-100], audio: [0 - -100] }
-    # periods where active objects / audio was detected will cause motion / audio to be scaled down
+    # periods where active objects / audio was detected will cause audio to be scaled down
     data: list[dict[str, float]] = []
 
     for rec in all_recordings:
         data.append(
             {
                 "start_time": rec.start_time,
-                "motion": rec.motion if rec.objects == 0 else 0,
                 "audio": rec.dBFS if rec.objects == 0 else 0,
             }
         )
@@ -398,7 +459,7 @@ def review_activity():
     scale = request.args.get("scale", type=int, default=30)
 
     # resample data using pandas to get activity on scaled basis
-    df = pd.DataFrame(data, columns=["start_time", "motion", "audio"])
+    df = pd.DataFrame(data, columns=["start_time", "audio"])
 
     # set date as datetime index
     df["start_time"] = pd.to_datetime(df["start_time"], unit="s")
@@ -406,11 +467,6 @@ def review_activity():
 
     # normalize data
     df = df.resample(f"{scale}S").mean().fillna(0.0)
-    df["motion"] = (
-        (df["motion"] - df["motion"].min())
-        / (df["motion"].max() - df["motion"].min())
-        * 100
-    )
     df["audio"] = (
         (df["audio"] - df["audio"].max())
         / (df["audio"].min() - df["audio"].max())

frigate/review/maintainer.py

@@ -28,6 +28,10 @@ logger = logging.getLogger(__name__)
 THUMB_HEIGHT = 180
 THUMB_WIDTH = 320
 
+THRESHOLD_ALERT_ACTIVITY = 120
+THRESHOLD_DETECTION_ACTIVITY = 30
+THRESHOLD_MOTION_ACTIVITY = 30
+
 
 class SeverityEnum(str, Enum):
     alert = "alert"
@@ -100,7 +104,7 @@ class PendingReviewSegment:
         path = os.path.join(CLIPS_DIR, f"thumb-{self.camera}-{self.id}.jpg")
 
         if self.frame is not None:
-            cv2.imwrite(path, self.frame)
+            cv2.imwrite(path, self.frame, [int(cv2.IMWRITE_WEBP_QUALITY), 60])
 
         return {
             ReviewSegment.id: self.id,
@@ -195,15 +199,16 @@ class ReviewSegmentMaintainer(threading.Thread):
                 if len(object["current_zones"]) > 0:
                     segment.zones.update(object["current_zones"])
         elif (
-            segment.severity == SeverityEnum.signification_motion and len(motion) >= 20
+            segment.severity == SeverityEnum.signification_motion
+            and len(motion) >= THRESHOLD_MOTION_ACTIVITY
         ):
             segment.last_update = frame_time
         else:
             if segment.severity == SeverityEnum.alert and frame_time > (
-                segment.last_update + 60
+                segment.last_update + THRESHOLD_ALERT_ACTIVITY
             ):
                 self.end_segment(segment)
-            elif frame_time > (segment.last_update + 10):
+            elif frame_time > (segment.last_update + THRESHOLD_DETECTION_ACTIVITY):
                 self.end_segment(segment)
 
     def check_if_new_segment(

web/src/components/filter/CameraGroupSelector.tsx

@@ -222,7 +222,7 @@ function NewGroupDialog({ open, setOpen, currentGroups }: NewGroupDialogProps) {
       <DialogContent className="min-w-0 w-96">
         <DialogTitle>Camera Groups</DialogTitle>
         {currentGroups.map((group) => (
-          <div className="flex justify-between items-center">
+          <div key={group[0]} className="flex justify-between items-center">
             {group[0]}
             <div className="flex justify-center gap-1">
               <Button

web/src/components/filter/ReviewFilterGroup.tsx

@@ -212,7 +212,7 @@ function CamerasFilterButton({
         ))}
       </div>
       <DropdownMenuSeparator />
-      <div className="flex justify-center items-center">
+      <div className="flex justify-evenly items-center">
         <Button
           variant="select"
           onClick={() => {
@@ -222,6 +222,15 @@ function CamerasFilterButton({
         >
           Apply
         </Button>
+        <Button
+          variant="secondary"
+          onClick={() => {
+            setCurrentCameras(undefined);
+            updateCameraFilter(undefined);
+          }}
+        >
+          Reset
+        </Button>
       </div>
     </>
   );
@@ -271,8 +280,6 @@ function CalendarFilterButton({
   day,
   updateSelectedDay,
 }: CalendarFilterButtonProps) {
-  const [open, setOpen] = useState(false);
-  const [selectedDay, setSelectedDay] = useState(day);
   const disabledDates = useMemo(() => {
     const tomorrow = new Date();
     tomorrow.setHours(tomorrow.getHours() + 24, -1, 0, 0);
@@ -298,22 +305,21 @@ function CalendarFilterButton({
       <Calendar
         mode="single"
         disabled={disabledDates}
-        selected={selectedDay}
+        selected={day}
         showOutsideDays={false}
         onSelect={(day) => {
-          setSelectedDay(day);
+          updateSelectedDay(day);
         }}
       />
       <DropdownMenuSeparator />
       <div className="flex justify-center items-center">
         <Button
-          variant="select"
+          variant="secondary"
           onClick={() => {
-            updateSelectedDay(selectedDay);
+            updateSelectedDay(undefined);
-            setOpen(false);
           }}
         >
-          Apply
+          Reset
         </Button>
       </div>
     </>
@@ -321,16 +327,7 @@ function CalendarFilterButton({
 
   if (isMobile) {
     return (
-      <Drawer
+      <Drawer>
-        open={open}
-        onOpenChange={(open) => {
-          if (!open) {
-            setSelectedDay(day);
-          }
-
-          setOpen(open);
-        }}
-      >
         <DrawerTrigger asChild>{trigger}</DrawerTrigger>
         <DrawerContent>{content}</DrawerContent>
       </Drawer>
@@ -338,16 +335,7 @@ function CalendarFilterButton({
   }
 
   return (
-    <Popover
+    <Popover>
-      open={open}
-      onOpenChange={(open) => {
-        if (!open) {
-          setSelectedDay(day);
-        }
-
-        setOpen(open);
-      }}
-    >
       <PopoverTrigger asChild>{trigger}</PopoverTrigger>
       <PopoverContent>{content}</PopoverContent>
     </Popover>
@@ -433,7 +421,7 @@ function GeneralFilterButton({
         ))}
       </div>
       <DropdownMenuSeparator />
-      <div className="flex justify-center items-center">
+      <div className="flex justify-evenly items-center">
         <Button
           variant="select"
           onClick={() => {
@@ -450,6 +438,17 @@ function GeneralFilterButton({
         >
           Apply
         </Button>
+        <Button
+          variant="secondary"
+          onClick={() => {
+            setReviewed(0);
+            setShowReviewed(undefined);
+            setCurrentLabels(undefined);
+            updateLabelFilter(undefined);
+          }}
+        >
+          Reset
+        </Button>
       </div>
     </>
   );

web/src/pages/SubmitPlus.tsx

@@ -107,7 +107,7 @@ export default function SubmitPlus() {
                 alt={`${upload?.label}`}
               />
               <DialogFooter>
-                <Button>Cancel</Button>
+                <Button onClick={() => setUpload(undefined)}>Cancel</Button>
                 <Button
                   className="bg-success"
                   onClick={() => onSubmitToPlus(false)}

web/src/types/review.ts

@@ -44,6 +44,6 @@ export type ReviewSummary = {
 
 export type MotionData = {
   start_time: number;
-  motion: number;
+  motion?: number;
-  audio: number;
+  audio?: number;
 };

web/src/views/events/EventView.tsx

@@ -260,6 +260,7 @@ export default function EventView({
         )}
         {severity == "significant_motion" && (
           <MotionReview
+            key={timeRange.before}
             contentRef={contentRef}
             reviewItems={reviewItems}
             relevantPreviews={relevantPreviews}
@@ -563,7 +564,7 @@ function MotionReview({
   // motion data
 
   const { data: motionData } = useSWR<MotionData[]>([
-    "review/activity",
+    "review/activity/motion",
     {
       before: timeRange.before,
       after: timeRange.after,
@@ -598,7 +599,7 @@ function MotionReview({
 
   const [selectedRangeIdx, setSelectedRangeIdx] = useState(initialIndex);
   const [currentTime, setCurrentTime] = useState<number>(
-    startTime ?? timeRangeSegments.ranges[selectedRangeIdx].start,
+    startTime ?? timeRangeSegments.ranges[selectedRangeIdx]?.start,
   );
   const currentTimeRange = useMemo(
     () => timeRangeSegments.ranges[selectedRangeIdx],