From 80e330594b8a64f704d15aa985994db1d824c077 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 4 Apr 2024 09:43:54 -0600
Subject: [PATCH] Fix exports (#10824)

* Avoid crash from opening motion time right now

* Cleanup export margins

* Fix mobile filter

* Fix export

* Improve spacing
---
 web/src/components/overlay/ExportDialog.tsx            | 10 +++++-----
 .../components/overlay/MobileReviewSettingsDrawer.tsx  |  5 +----
 web/src/views/events/EventView.tsx                     |  2 +-
 web/src/views/events/RecordingView.tsx                 |  8 ++++++--
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/web/src/components/overlay/ExportDialog.tsx b/web/src/components/overlay/ExportDialog.tsx
index a9d597f83..5475dd00c 100644
--- a/web/src/components/overlay/ExportDialog.tsx
+++ b/web/src/components/overlay/ExportDialog.tsx
@@ -216,11 +216,11 @@ export function ExportContent({
           <DialogHeader>
             <DialogTitle>Export</DialogTitle>
           </DialogHeader>
-          <SelectSeparator className="bg-secondary" />
+          <SelectSeparator className="my-4 bg-secondary" />
         </>
       )}
       <RadioGroup
-        className={`flex flex-col gap-3 ${isDesktop ? "" : "mt-4"}`}
+        className={`flex flex-col gap-4 ${isDesktop ? "" : "mt-4"}`}
         onValueChange={(value) => onSelectTime(value as ExportOption)}
       >
         {EXPORT_OPTIONS.map((opt) => {
@@ -254,13 +254,13 @@ export function ExportContent({
         />
       )}
       <Input
-        className="mt-3"
+        className="my-6"
         type="search"
         placeholder="Name the Export"
         value={name}
         onChange={(e) => setName(e.target.value)}
       />
-      {isDesktop && <SelectSeparator className="bg-secondary" />}
+      {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
       <DialogFooter
         className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}
       >
@@ -371,7 +371,7 @@ function CustomTimeSelector({
 
   return (
     <div
-      className={`flex items-center bg-secondary rounded-lg ${isDesktop ? "mx-8 px-2 gap-2" : "pl-2 mt-3"}`}
+      className={`mt-3 flex items-center bg-secondary rounded-lg ${isDesktop ? "mx-8 px-2 gap-2" : "pl-2"}`}
     >
       <FaCalendarAlt />
       <Popover
diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
index bf39632e9..0a3319918 100644
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -17,7 +17,6 @@ import axios from "axios";
 import SaveExportOverlay from "./SaveExportOverlay";
 import { isMobile } from "react-device-detect";
 
-const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
 type DrawerMode = "none" | "select" | "export" | "calendar" | "filter";
 
 const DRAWER_FEATURES = ["export", "calendar", "filter"] as const;
@@ -109,9 +108,7 @@ export default function MobileReviewSettingsDrawer({
     cameras.forEach((camera) => {
       const cameraConfig = config.cameras[camera];
       cameraConfig.objects.track.forEach((label) => {
-        if (!ATTRIBUTES.includes(label)) {
-          labels.add(label);
-        }
+        labels.add(label);
       });
 
       if (cameraConfig.audio.enabled_in_config) {
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index c57223c68..8a12ec347 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -851,7 +851,7 @@ function MotionReview({
                   onClick={() =>
                     onOpenRecording({
                       camera: camera.name,
-                      startTime: currentTime,
+                      startTime: Math.min(currentTime, Date.now() / 1000 - 10),
                       severity: "significant_motion",
                     })
                   }
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index c6cc866e9..dbcc37752 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -142,7 +142,7 @@ export function RecordingView({
   );
 
   useEffect(() => {
-    if (scrubbing) {
+    if (scrubbing || exportRange) {
       if (
         currentTime > currentTimeRange.before + 60 ||
         currentTime < currentTimeRange.after - 60
@@ -157,6 +157,8 @@ export function RecordingView({
         controller.scrubToTimestamp(currentTime);
       });
     }
+    // we only want to seek when current time updates
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     currentTime,
     scrubbing,
@@ -486,7 +488,9 @@ function Timeline({
 
       setExportRange({ after: exportStart, before: exportEnd });
     }
-  }, [exportRange, exportStart, exportEnd, setExportRange, setCurrentTime]);
+    // we only want to update when the export parts change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [exportStart, exportEnd, setExportRange, setCurrentTime]);
 
   return (
     <div