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

frigate/api/export.py

@@ -4,6 +4,7 @@ import logging
 from pathlib import Path
 from typing import Optional
 
+import psutil
 from flask import (
     Blueprint,
     current_app,
@@ -14,6 +15,7 @@ from flask import (
 from peewee import DoesNotExist
 from werkzeug.utils import secure_filename
 
+from frigate.const import EXPORT_DIR
 from frigate.models import Export, Recordings
 from frigate.record.export import PlaybackFactorEnum, RecordingExporter
 
@@ -140,6 +142,27 @@ def export_delete(id: str):
             404,
         )
 
+    files_in_use = []
+    for process in psutil.process_iter():
+        try:
+            if process.name() != "ffmpeg":
+                continue
+            flist = process.open_files()
+            if flist:
+                for nt in flist:
+                    if nt.path.startswith(EXPORT_DIR):
+                        files_in_use.append(nt.path.split("/")[-1])
+        except psutil.Error:
+            continue
+
+    if export.video_path.split("/")[-1] in files_in_use:
+        return make_response(
+            jsonify(
+                {"success": False, "message": "Can not delete in progress export."}
+            ),
+            400,
+        )
+
     Path(export.video_path).unlink(missing_ok=True)
 
     if export.thumb_path:

frigate/record/export.py

@@ -11,6 +11,8 @@ import threading
 from enum import Enum
 from pathlib import Path
 
+from peewee import DoesNotExist
+
 from frigate.config import FrigateConfig
 from frigate.const import (
     CACHE_DIR,
@@ -72,30 +74,32 @@ class RecordingExporter(threading.Thread):
 
         if datetime.datetime.fromtimestamp(
             self.start_time
-        ) < datetime.datetime.now().replace(minute=0, second=0):
+        ) < datetime.datetime.now().astimezone(datetime.timezone.dst).replace(
+            minute=0, second=0, microsecond=0
+        ):
             # has preview mp4
-            preview: Previews = (
-                Previews.select(
-                    Previews.camera,
-                    Previews.path,
-                    Previews.duration,
-                    Previews.start_time,
-                    Previews.end_time,
-                )
-                .where(
-                    Previews.start_time.between(self.start_time, self.end_time)
-                    | Previews.end_time.between(self.start_time, self.end_time)
-                    | (
-                        (self.start_time > Previews.start_time)
-                        & (self.end_time < Previews.end_time)
+            try:
+                preview: Previews = (
+                    Previews.select(
+                        Previews.camera,
+                        Previews.path,
+                        Previews.duration,
+                        Previews.start_time,
+                        Previews.end_time,
                     )
+                    .where(
+                        Previews.start_time.between(self.start_time, self.end_time)
+                        | Previews.end_time.between(self.start_time, self.end_time)
+                        | (
+                            (self.start_time > Previews.start_time)
+                            & (self.end_time < Previews.end_time)
+                        )
+                    )
+                    .where(Previews.camera == self.camera)
+                    .limit(1)
+                    .get()
                 )
-                .where(Previews.camera == self.camera)
-                .limit(1)
-                .get()
-            )
-
-            if not preview:
+            except DoesNotExist:
                 return ""
 
             diff = self.start_time - preview.start_time

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>