Add overlay instead of using same button for timeline exports

web/src/components/overlay/ExportDialog.tsx

@@ -1,7 +1,6 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import {
   Dialog,
-  DialogClose,
   DialogContent,
   DialogFooter,
   DialogHeader,
@@ -25,6 +24,7 @@ import ReviewActivityCalendar from "./ReviewActivityCalendar";
 import { SelectSeparator } from "../ui/select";
 import { isDesktop } from "react-device-detect";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import SaveExportOverlay from "./SaveExportOverlay";
 
 const EXPORT_OPTIONS = [
   "1",
@@ -55,74 +55,121 @@ export default function ExportDialog({
   setRange,
   setMode,
 }: ExportDialogProps) {
+  const [name, setName] = useState("");
+  const onStartExport = useCallback(() => {
+    if (!range) {
+      toast.error("No valid time range selected", { position: "top-center" });
+      return;
+    }
+
+    axios
+      .post(`export/${camera}/start/${range.after}/end/${range.before}`, {
+        playback: "realtime",
+        name,
+      })
+      .then((response) => {
+        if (response.status == 200) {
+          toast.success(
+            "Successfully started export. View the file in the /exports folder.",
+            { position: "top-center" },
+          );
+          setName("");
+          setRange(undefined);
+          setMode("none");
+        }
+      })
+      .catch((error) => {
+        if (error.response?.data?.message) {
+          toast.error(
+            `Failed to start export: ${error.response.data.message}`,
+            { position: "top-center" },
+          );
+        } else {
+          toast.error(`Failed to start export: ${error.message}`, {
+            position: "top-center",
+          });
+        }
+      });
+  }, [camera, name, range, setRange, setName, setMode]);
+
   const Overlay = isDesktop ? Dialog : Drawer;
   const Trigger = isDesktop ? DialogTrigger : DrawerTrigger;
   const Content = isDesktop ? DialogContent : DrawerContent;
 
   return (
-    <Overlay
+    <>
-      open={mode == "select"}
+      <SaveExportOverlay
-      onOpenChange={(open) => {
+        className="absolute top-8 left-1/2 -translate-x-1/2 z-50 pointer-events-none"
-        if (!open) {
+        show={mode == "timeline"}
-          setMode("none");
+        onSave={() => onStartExport()}
-        }
+        onCancel={() => setMode("none")}
-      }}
+      />
-    >
+      <Overlay
-      <Trigger asChild>
+        open={mode == "select"}
-        <Button
+        onOpenChange={(open) => {
-          className="flex items-center gap-2"
+          if (!open) {
-          variant="secondary"
+            setMode("none");
-          size="sm"
+          }
-          onClick={() => {
+        }}
-            if (mode == "none") {
-              setMode("select");
-            }
-          }}
-        >
-          <FaArrowDown className="p-1 fill-secondary bg-muted-foreground rounded-md" />
-          {isDesktop ? (mode != "timeline" ? "Export" : "Save") : null}
-        </Button>
-      </Trigger>
-      <Content
-        className={isDesktop ? "sm:rounded-2xl" : "px-4 pb-4 mx-4 rounded-2xl"}
       >
-        <ExportContent
+        <Trigger asChild>
-          camera={camera}
+          <Button
-          latestTime={latestTime}
+            className="flex items-center gap-2"
-          currentTime={currentTime}
+            variant="secondary"
-          range={range}
+            size="sm"
-          mode={mode}
+            onClick={() => {
-          setRange={setRange}
+              setMode("select");
-          setMode={setMode}
+            }}
-          onCancel={() => setMode("none")}
+          >
-        />
+            <FaArrowDown className="p-1 fill-secondary bg-muted-foreground rounded-md" />
-      </Content>
+            {isDesktop && "Export"}
-    </Overlay>
+          </Button>
+        </Trigger>
+        <Content
+          className={
+            isDesktop ? "sm:rounded-2xl" : "px-4 pb-4 mx-4 rounded-2xl"
+          }
+        >
+          <ExportContent
+            latestTime={latestTime}
+            currentTime={currentTime}
+            range={range}
+            name={name}
+            onStartExport={onStartExport}
+            setName={setName}
+            setRange={setRange}
+            setMode={setMode}
+            onCancel={() => setMode("none")}
+          />
+        </Content>
+      </Overlay>
+    </>
   );
 }
 
 type ExportContentProps = {
-  camera: string;
   latestTime: number;
   currentTime: number;
   range?: TimeRange;
-  mode: ExportMode;
+  name: string;
+  onStartExport: () => void;
+  setName: (name: string) => void;
   setRange: (range: TimeRange | undefined) => void;
   setMode: (mode: ExportMode) => void;
   onCancel: () => void;
 };
 export function ExportContent({
-  camera,
   latestTime,
   currentTime,
   range,
-  mode,
+  name,
+  onStartExport,
+  setName,
   setRange,
   setMode,
   onCancel,
 }: ExportContentProps) {
   const [selectedOption, setSelectedOption] = useState<ExportOption>("1");
-  const [name, setName] = useState("");
 
   const onSelectTime = useCallback(
     (option: ExportOption) => {
@@ -161,51 +208,6 @@ export function ExportContent({
     [latestTime, setRange],
   );
 
-  const onStartExport = useCallback(() => {
-    if (!range) {
-      toast.error("No valid time range selected", { position: "top-center" });
-      return;
-    }
-
-    axios
-      .post(`export/${camera}/start/${range.after}/end/${range.before}`, {
-        playback: "realtime",
-        name,
-      })
-      .then((response) => {
-        if (response.status == 200) {
-          toast.success(
-            "Successfully started export. View the file in the /exports folder.",
-            { position: "top-center" },
-          );
-          setName("");
-          setRange(undefined);
-          setSelectedOption("1");
-        }
-      })
-      .catch((error) => {
-        if (error.response?.data?.message) {
-          toast.error(
-            `Failed to start export: ${error.response.data.message}`,
-            { position: "top-center" },
-          );
-        } else {
-          toast.error(`Failed to start export: ${error.message}`, {
-            position: "top-center",
-          });
-        }
-      });
-  }, [camera, name, range, setRange]);
-
-  useEffect(() => {
-    if (mode != "timeline_save") {
-      return;
-    }
-
-    onStartExport();
-    setMode("none");
-  }, [mode, onStartExport, setMode]);
-
   return (
     <>
       {isDesktop && (
@@ -273,6 +275,7 @@ export function ExportContent({
               setMode("timeline");
             } else {
               onStartExport();
+              setSelectedOption("1");
               setMode("none");
             }
           }}

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import { Button } from "../ui/button";
 import { FaArrowDown, FaCalendarAlt, FaCog, FaFilter } from "react-icons/fa";
@@ -12,6 +12,9 @@ import { getEndOfDayTimestamp } from "@/utils/dateUtil";
 import { GeneralFilterContent } from "../filter/ReviewFilterGroup";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
+import { toast } from "sonner";
+import axios from "axios";
+import SaveExportOverlay from "./SaveExportOverlay";
 
 const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
 type DrawerMode = "none" | "select" | "export" | "calendar" | "filter";
@@ -41,6 +44,47 @@ export default function MobileReviewSettingsDrawer({
   const { data: config } = useSWR<FrigateConfig>("config");
   const [drawerMode, setDrawerMode] = useState<DrawerMode>("none");
 
+  // exports
+
+  const [name, setName] = useState("");
+  const onStartExport = useCallback(() => {
+    if (!range) {
+      toast.error("No valid time range selected", { position: "top-center" });
+      return;
+    }
+
+    axios
+      .post(`export/${camera}/start/${range.after}/end/${range.before}`, {
+        playback: "realtime",
+        name,
+      })
+      .then((response) => {
+        if (response.status == 200) {
+          toast.success(
+            "Successfully started export. View the file in the /exports folder.",
+            { position: "top-center" },
+          );
+          setName("");
+          setRange(undefined);
+          setMode("none");
+        }
+      })
+      .catch((error) => {
+        if (error.response?.data?.message) {
+          toast.error(
+            `Failed to start export: ${error.response.data.message}`,
+            { position: "top-center" },
+          );
+        } else {
+          toast.error(`Failed to start export: ${error.message}`, {
+            position: "top-center",
+          });
+        }
+      });
+  }, [camera, name, range, setRange, setName, setMode]);
+
+  // filters
+
   const allLabels = useMemo<string[]>(() => {
     if (!config) {
       return [];
@@ -100,11 +144,12 @@ export default function MobileReviewSettingsDrawer({
   } else if (drawerMode == "export") {
     content = (
       <ExportContent
-        camera={camera}
         latestTime={latestTime}
         currentTime={currentTime}
         range={range}
-        mode={mode}
+        name={name}
+        onStartExport={onStartExport}
+        setName={setName}
         setRange={setRange}
         setMode={(mode) => {
           setMode(mode);
@@ -198,28 +243,36 @@ export default function MobileReviewSettingsDrawer({
   }
 
   return (
-    <Drawer
+    <>
-      open={drawerMode != "none"}
+      <SaveExportOverlay
-      onOpenChange={(open) => {
+        className="absolute top-8 left-1/2 -translate-x-1/2 z-50 pointer-events-none"
-        if (!open) {
+        show={mode == "timeline"}
-          setDrawerMode("none");
+        onSave={() => onStartExport()}
-        }
+        onCancel={() => setMode("none")}
-      }}
+      />
-    >
+      <Drawer
-      <DrawerTrigger asChild>
+        open={drawerMode != "none"}
-        <Button
+        onOpenChange={(open) => {
-          className="rounded-lg capitalize"
+          if (!open) {
-          size="sm"
+            setDrawerMode("none");
-          variant="secondary"
+          }
-          onClick={() => setDrawerMode("select")}
+        }}
-        >
+      >
-          <FaCog className="text-muted-foreground" />
+        <DrawerTrigger asChild>
-        </Button>
+          <Button
-      </DrawerTrigger>
+            className="rounded-lg capitalize"
-      <DrawerContent className="max-h-[75dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-4 rounded-2xl">
+            size="sm"
-        {content}
+            variant="secondary"
-      </DrawerContent>
+            onClick={() => setDrawerMode("select")}
-    </Drawer>
+          >
+            <FaCog className="text-muted-foreground" />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="max-h-[75dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-4 rounded-2xl">
+          {content}
+        </DrawerContent>
+      </Drawer>
+    </>
   );
 }
 

web/src/components/overlay/SaveExportOverlay.tsx

@@ -0,0 +1,37 @@
+import { Button } from "../ui/button";
+import { LuX } from "react-icons/lu";
+
+type SaveExportOverlayProps = {
+  className: string;
+  show: boolean;
+  onSave: () => void;
+  onCancel: () => void;
+};
+export default function SaveExportOverlay({
+  className,
+  show,
+  onSave,
+  onCancel,
+}: SaveExportOverlayProps) {
+  return (
+    <div className={className}>
+      <div
+        className={`flex justify-center px-2 gap-2 items-center pointer-events-auto bg-selected rounded-lg *:text-white *:hover:bg-transparent ${
+          show ? "animate-in slide-in-from-top duration-500" : "invisible"
+        }  text-center mt-5 mx-auto`}
+      >
+        <Button className="p-0" variant="ghost" size="sm" onClick={onSave}>
+          Save Export
+        </Button>
+        <Button
+          className="cursor-pointer"
+          size="xs"
+          variant="ghost"
+          onClick={onCancel}
+        >
+          <LuX />
+        </Button>
+      </div>
+    </div>
+  );
+}

web/src/types/filter.ts

@@ -2,4 +2,4 @@
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type FilterType = { [searchKey: string]: any };
 
-export type ExportMode = "select" | "timeline" | "timeline_save" | "none";
+export type ExportMode = "select" | "timeline" | "none";