export preview dialog when using timeline export

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -3,7 +3,7 @@ import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import { Button } from "../ui/button";
 import { FaArrowDown, FaCalendarAlt, FaCog, FaFilter } from "react-icons/fa";
 import { TimeRange } from "@/types/timeline";
-import { ExportContent } from "./ExportDialog";
+import { ExportContent, ExportPreviewDialog } from "./ExportDialog";
 import { ExportMode } from "@/types/filter";
 import ReviewActivityCalendar from "./ReviewActivityCalendar";
 import { SelectSeparator } from "../ui/select";
@@ -34,12 +34,14 @@ type MobileReviewSettingsDrawerProps = {
   currentTime: number;
   range?: TimeRange;
   mode: ExportMode;
+  showExportPreview: boolean;
   reviewSummary?: ReviewSummary;
   allLabels: string[];
   allZones: string[];
   onUpdateFilter: (filter: ReviewFilter) => void;
   setRange: (range: TimeRange | undefined) => void;
   setMode: (mode: ExportMode) => void;
+  setShowExportPreview: (showPreview: boolean) => void;
 };
 export default function MobileReviewSettingsDrawer({
   features = DEFAULT_DRAWER_FEATURES,
@@ -50,12 +52,14 @@ export default function MobileReviewSettingsDrawer({
   currentTime,
   range,
   mode,
+  showExportPreview,
   reviewSummary,
   allLabels,
   allZones,
   onUpdateFilter,
   setRange,
   setMode,
+  setShowExportPreview,
 }: MobileReviewSettingsDrawerProps) {
   const [drawerMode, setDrawerMode] = useState<DrawerMode>("none");
 
@@ -282,6 +286,13 @@ export default function MobileReviewSettingsDrawer({
         show={mode == "timeline"}
         onSave={() => onStartExport()}
         onCancel={() => setMode("none")}
+        onPreview={() => setShowExportPreview(true)}
+      />
+      <ExportPreviewDialog
+        camera={camera}
+        range={range}
+        showPreview={showExportPreview}
+        setShowPreview={setShowExportPreview}
       />
       <Drawer
         modal={!(isIOS && drawerMode == "export")}

web/src/components/overlay/SaveExportOverlay.tsx

@@ -1,4 +1,4 @@
-import { LuX } from "react-icons/lu";
+import { LuVideo, LuX } from "react-icons/lu";
 import { Button } from "../ui/button";
 import { FaCompactDisc } from "react-icons/fa";
 import { cn } from "@/lib/utils";
@@ -6,12 +6,14 @@ import { cn } from "@/lib/utils";
 type SaveExportOverlayProps = {
   className: string;
   show: boolean;
+  onPreview: () => void;
   onSave: () => void;
   onCancel: () => void;
 };
 export default function SaveExportOverlay({
   className,
   show,
+  onPreview,
   onSave,
   onCancel,
 }: SaveExportOverlayProps) {
@@ -24,6 +26,22 @@ export default function SaveExportOverlay({
           "mx-auto mt-5 text-center",
         )}
       >
+        <Button
+          className="flex items-center gap-1 text-primary"
+          size="sm"
+          onClick={onCancel}
+        >
+          <LuX />
+          Cancel
+        </Button>
+        <Button
+          className="flex items-center gap-1"
+          size="sm"
+          onClick={onPreview}
+        >
+          <LuVideo />
+          Preview Export
+        </Button>
         <Button
           className="flex items-center gap-1"
           variant="select"
@@ -33,14 +51,6 @@ export default function SaveExportOverlay({
           <FaCompactDisc />
           Save Export
         </Button>
-        <Button
-          className="flex items-center gap-1 text-primary"
-          size="sm"
-          onClick={onCancel}
-        >
-          <LuX />
-          Cancel
-        </Button>
       </div>
     </div>
   );

web/src/views/recording/RecordingView.tsx

@@ -140,6 +140,7 @@ export function RecordingView({
 
   const [exportMode, setExportMode] = useState<ExportMode>("none");
   const [exportRange, setExportRange] = useState<TimeRange>();
+  const [showExportPreview, setShowExportPreview] = useState(false);
 
   // move to next clip
 
@@ -412,6 +413,7 @@ export function RecordingView({
               latestTime={timeRange.before}
               mode={exportMode}
               range={exportRange}
+              showPreview={showExportPreview}
               setRange={(range) => {
                 setExportRange(range);
 
@@ -420,6 +422,7 @@ export function RecordingView({
                 }
               }}
               setMode={setExportMode}
+              setShowPreview={setShowExportPreview}
             />
           )}
           {isDesktop && (
@@ -473,11 +476,13 @@ export function RecordingView({
             latestTime={timeRange.before}
             mode={exportMode}
             range={exportRange}
+            showExportPreview={showExportPreview}
             allLabels={reviewFilterList.labels}
             allZones={reviewFilterList.zones}
             onUpdateFilter={updateFilter}
             setRange={setExportRange}
             setMode={setExportMode}
+            setShowExportPreview={setShowExportPreview}
           />
         </div>
       </div>