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

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);
-            setOpen(false);
+            updateSelectedDay(undefined);
           }}
         >
-          Apply
+          Reset
         </Button>
       </div>
     </>
@@ -321,16 +327,7 @@ function CalendarFilterButton({
 
   if (isMobile) {
     return (
-      <Drawer
-        open={open}
-        onOpenChange={(open) => {
-          if (!open) {
-            setSelectedDay(day);
-          }
-
-          setOpen(open);
-        }}
-      >
+      <Drawer>
         <DrawerTrigger asChild>{trigger}</DrawerTrigger>
         <DrawerContent>{content}</DrawerContent>
       </Drawer>
@@ -338,16 +335,7 @@ function CalendarFilterButton({
   }
 
   return (
-    <Popover
-      open={open}
-      onOpenChange={(open) => {
-        if (!open) {
-          setSelectedDay(day);
-        }
-
-        setOpen(open);
-      }}
-    >
+    <Popover>
       <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;
-  audio: number;
+  motion?: 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],