UI Fixes (#11742)

* Allow deleting failed in progress exports

* Fix comparison and preview retrieval

* Fix stretching of event cards

* Reset edit state when group changes

* Allow specifying group

web/src/components/card/AnimatedEventCard.tsx

@@ -14,8 +14,12 @@ import { baseUrl } from "@/api/baseUrl";
 
 type AnimatedEventCardProps = {
   event: ReviewSegment;
+  selectedGroup?: string;
 };
-export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
+export function AnimatedEventCard({
+  event,
+  selectedGroup,
+}: AnimatedEventCardProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
   const currentHour = useMemo(() => isCurrentHour(event.start_time), [event]);
@@ -53,7 +57,8 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
 
   const navigate = useNavigate();
   const onOpenReview = useCallback(() => {
-    navigate("review", {
+    const url = selectedGroup ? `review?group=${selectedGroup}` : "review";
+    navigate(url, {
       state: {
         severity: event.severity,
         recording: {
@@ -64,7 +69,7 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
       },
     });
     axios.post(`reviews/viewed`, { ids: [event.id] });
-  }, [navigate, event]);
+  }, [navigate, selectedGroup, event]);
 
   // image behavior
 

web/src/components/card/ExportCard.tsx

@@ -109,43 +109,38 @@ export default function ExportCard({
           "relative flex aspect-video items-center justify-center rounded-lg bg-black md:rounded-2xl",
           className,
         )}
-        onMouseEnter={
-          isDesktop && !exportedRecording.in_progress
-            ? () => setHovered(true)
-            : undefined
-        }
-        onMouseLeave={
-          isDesktop && !exportedRecording.in_progress
-            ? () => setHovered(false)
-            : undefined
-        }
-        onClick={
-          isDesktop || exportedRecording.in_progress
-            ? undefined
-            : () => setHovered(!hovered)
-        }
+        onMouseEnter={isDesktop ? () => setHovered(true) : undefined}
+        onMouseLeave={isDesktop ? () => setHovered(false) : undefined}
+        onClick={isDesktop ? undefined : () => setHovered(!hovered)}
       >
         {hovered && (
           <>
             <div className="absolute inset-0 z-10 rounded-lg bg-black bg-opacity-60 md:rounded-2xl" />
             <div className="absolute right-1 top-1 flex items-center gap-2">
-              <a
-                className="z-20"
-                download
-                href={`${baseUrl}${exportedRecording.video_path.replace("/media/frigate/", "")}`}
-              >
-                <Chip className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500">
-                  <FaDownload className="size-4 text-white" />
+              {!exportedRecording.in_progress && (
+                <a
+                  className="z-20"
+                  download
+                  href={`${baseUrl}${exportedRecording.video_path.replace("/media/frigate/", "")}`}
+                >
+                  <Chip className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500">
+                    <FaDownload className="size-4 text-white" />
+                  </Chip>
+                </a>
+              )}
+              {!exportedRecording.in_progress && (
+                <Chip
+                  className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
+                  onClick={() =>
+                    setEditName({
+                      original: exportedRecording.name,
+                      update: "",
+                    })
+                  }
+                >
+                  <MdEditSquare className="size-4 text-white" />
                 </Chip>
-              </a>
-              <Chip
-                className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
-                onClick={() =>
-                  setEditName({ original: exportedRecording.name, update: "" })
-                }
-              >
-                <MdEditSquare className="size-4 text-white" />
-              </Chip>
+              )}
               <Chip
                 className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
                 onClick={() =>
@@ -159,15 +154,17 @@ export default function ExportCard({
               </Chip>
             </div>
 
-            <Button
-              className="absolute left-1/2 top-1/2 z-20 h-20 w-20 -translate-x-1/2 -translate-y-1/2 cursor-pointer text-white hover:bg-transparent hover:text-white"
-              variant="ghost"
-              onClick={() => {
-                onSelect(exportedRecording);
-              }}
-            >
-              <FaPlay />
-            </Button>
+            {!exportedRecording.in_progress && (
+              <Button
+                className="absolute left-1/2 top-1/2 z-20 h-20 w-20 -translate-x-1/2 -translate-y-1/2 cursor-pointer text-white hover:bg-transparent hover:text-white"
+                variant="ghost"
+                onClick={() => {
+                  onSelect(exportedRecording);
+                }}
+              >
+                <FaPlay />
+              </Button>
+            )}
           </>
         )}
         {exportedRecording.in_progress ? (

web/src/pages/Events.tsx

@@ -68,6 +68,19 @@ export default function Events() {
   const [reviewFilter, setReviewFilter, reviewSearchParams] =
     useApiFilter<ReviewFilter>();
 
+  useSearchEffect("group", (reviewGroup) => {
+    if (config && reviewGroup) {
+      const group = config.camera_groups[reviewGroup];
+
+      if (group) {
+        setReviewFilter({
+          ...reviewFilter,
+          cameras: group.cameras,
+        });
+      }
+    }
+  });
+
   const onUpdateFilter = useCallback(
     (newFilter: ReviewFilter) => {
       setReviewFilter(newFilter);

web/src/views/events/RecordingView.tsx

@@ -668,27 +668,32 @@ function Timeline({
           <Skeleton className="size-full" />
         )
       ) : (
-        <div
-          className={`grid h-full grid-cols-1 gap-4 overflow-auto bg-secondary p-4 ${isDesktop ? "" : "sm:grid-cols-2"}`}
-        >
-          {mainCameraReviewItems.map((review) => {
-            if (review.severity == "significant_motion") {
-              return;
-            }
+        <div className="h-full overflow-auto bg-secondary">
+          <div
+            className={cn(
+              "grid h-auto grid-cols-1 gap-4 overflow-auto p-4",
+              isMobile && "sm:grid-cols-2",
+            )}
+          >
+            {mainCameraReviewItems.map((review) => {
+              if (review.severity == "significant_motion") {
+                return;
+              }
 
-            return (
-              <ReviewCard
-                key={review.id}
-                event={review}
-                currentTime={currentTime}
-                onClick={() => {
-                  setScrubbing(true);
-                  setCurrentTime(review.start_time - REVIEW_PADDING);
-                  setScrubbing(false);
-                }}
-              />
-            );
-          })}
+              return (
+                <ReviewCard
+                  key={review.id}
+                  event={review}
+                  currentTime={currentTime}
+                  onClick={() => {
+                    setScrubbing(true);
+                    setCurrentTime(review.start_time - REVIEW_PADDING);
+                    setScrubbing(false);
+                  }}
+                />
+              );
+            })}
+          </div>
         </div>
       )}
     </div>

web/src/views/live/DraggableGridLayout.tsx

@@ -91,8 +91,16 @@ export default function DraggableGridLayout({
     );
   }, [config]);
 
+  // editing
+
   const [editGroup, setEditGroup] = useState(false);
 
+  useEffect(() => {
+    setEditGroup(false);
+  }, [cameraGroup]);
+
+  // camera state
+
   const [currentCameras, setCurrentCameras] = useState<CameraConfig[]>();
   const [currentIncludeBirdseye, setCurrentIncludeBirdseye] =
     useState<boolean>();

web/src/views/live/LiveDashboardView.tsx

@@ -224,7 +224,13 @@ export default function LiveDashboardView({
           <TooltipProvider>
             <div className="flex items-center gap-2 px-1">
               {events.map((event) => {
-                return <AnimatedEventCard key={event.id} event={event} />;
+                return (
+                  <AnimatedEventCard
+                    key={event.id}
+                    event={event}
+                    selectedGroup={cameraGroup}
+                  />
+                );
               })}
             </div>
           </TooltipProvider>