Add ability to export from recordings page (#10692)

* Add dialog to export recordings

* Add export dialog functionality

* Add ability to name exports

* Add ability to choose custom time range on timeline

* Add ability to choose custom time range on timeline

* Add custom time selection

* Make hot keys optional for typing name of export

* Tweaks to dialog

* Tweaks to dialog

* round corners more

* Final tweaks

frigate/api/media.py

@@ -8,6 +8,7 @@ import re
 import subprocess as sp
 import time
 from datetime import datetime, timedelta, timezone
+from typing import Optional
 from urllib.parse import unquote
 
 import cv2
@@ -618,6 +619,7 @@ def export_recording(camera_name: str, start_time, end_time):
 
     json: dict[str, any] = request.get_json(silent=True) or {}
     playback_factor = json.get("playback", "realtime")
+    name: Optional[str] = json.get("name")
 
     recordings_count = (
         Recordings.select()
@@ -641,6 +643,7 @@ def export_recording(camera_name: str, start_time, end_time):
     exporter = RecordingExporter(
         current_app.frigate_config,
         camera_name,
+        secure_filename(name.replace(" ", "_")) if name else None,
         int(start_time),
         int(end_time),
         (

frigate/record/export.py

@@ -38,6 +38,7 @@ class RecordingExporter(threading.Thread):
         self,
         config: FrigateConfig,
         camera: str,
+        name: str,
         start_time: int,
         end_time: int,
         playback_factor: PlaybackFactorEnum,
@@ -45,6 +46,7 @@ class RecordingExporter(threading.Thread):
         threading.Thread.__init__(self)
         self.config = config
         self.camera = camera
+        self.user_provided_name = name
         self.start_time = start_time
         self.end_time = end_time
         self.playback_factor = playback_factor
@@ -57,8 +59,12 @@ class RecordingExporter(threading.Thread):
         logger.debug(
             f"Beginning export for {self.camera} from {self.start_time} to {self.end_time}"
         )
-        file_name = f"{EXPORT_DIR}/in_progress.{self.camera}@{self.get_datetime_from_timestamp(self.start_time)}__{self.get_datetime_from_timestamp(self.end_time)}.mp4"
+        file_name = (
-        final_file_name = f"{EXPORT_DIR}/{self.camera}_{self.get_datetime_from_timestamp(self.start_time)}__{self.get_datetime_from_timestamp(self.end_time)}.mp4"
+            self.user_provided_name
+            or f"{self.camera}@{self.get_datetime_from_timestamp(self.start_time)}__{self.get_datetime_from_timestamp(self.end_time)}"
+        )
+        file_path = f"{EXPORT_DIR}/in_progress.{file_name}.mp4"
+        final_file_path = f"{EXPORT_DIR}/{file_name}.mp4"
 
         if (self.end_time - self.start_time) <= MAX_PLAYLIST_SECONDS:
             playlist_lines = f"http://127.0.0.1:5000/vod/{self.camera}/start/{self.start_time}/end/{self.end_time}/index.m3u8"
@@ -97,14 +103,14 @@ class RecordingExporter(threading.Thread):
 
         if self.playback_factor == PlaybackFactorEnum.realtime:
             ffmpeg_cmd = (
-                f"ffmpeg -hide_banner {ffmpeg_input} -c copy {file_name}"
+                f"ffmpeg -hide_banner {ffmpeg_input} -c copy {file_path}"
             ).split(" ")
         elif self.playback_factor == PlaybackFactorEnum.timelapse_25x:
             ffmpeg_cmd = (
                 parse_preset_hardware_acceleration_encode(
                     self.config.ffmpeg.hwaccel_args,
                     f"{TIMELAPSE_DATA_INPUT_ARGS} {ffmpeg_input}",
-                    f"{self.config.cameras[self.camera].record.export.timelapse_args} {file_name}",
+                    f"{self.config.cameras[self.camera].record.export.timelapse_args} {file_path}",
                     EncodeTypeEnum.timelapse,
                 )
             ).split(" ")
@@ -122,9 +128,9 @@ class RecordingExporter(threading.Thread):
                 f"Failed to export recording for command {' '.join(ffmpeg_cmd)}"
             )
             logger.error(p.stderr)
-            Path(file_name).unlink(missing_ok=True)
+            Path(file_path).unlink(missing_ok=True)
             return
 
-        logger.debug(f"Updating finalized export {file_name}")
+        logger.debug(f"Updating finalized export {file_path}")
-        os.rename(file_name, final_file_name)
+        os.rename(file_path, final_file_path)
-        logger.debug(f"Finished exporting {file_name}")
+        logger.debug(f"Finished exporting {file_path}")

web/src/components/overlay/ExportDialog.tsx

@@ -0,0 +1,401 @@
+import { useCallback, useMemo, useState } from "react";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { Label } from "../ui/label";
+import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
+import { Button } from "../ui/button";
+import { ExportMode } from "@/types/filter";
+import { FaArrowDown, FaArrowRight, FaCalendarAlt } from "react-icons/fa";
+import axios from "axios";
+import { toast } from "sonner";
+import { Input } from "../ui/input";
+import { TimeRange } from "@/types/timeline";
+import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import ReviewActivityCalendar from "./ReviewActivityCalendar";
+import { SelectSeparator } from "../ui/select";
+
+const EXPORT_OPTIONS = [
+  "1",
+  "4",
+  "8",
+  "12",
+  "24",
+  "timeline",
+  "custom",
+] as const;
+type ExportOption = (typeof EXPORT_OPTIONS)[number];
+
+type ExportDialogProps = {
+  camera: string;
+  latestTime: number;
+  currentTime: number;
+  range?: TimeRange;
+  mode: ExportMode;
+  setRange: (range: TimeRange | undefined) => void;
+  setMode: (mode: ExportMode) => void;
+};
+export default function ExportDialog({
+  camera,
+  latestTime,
+  currentTime,
+  range,
+  mode,
+  setRange,
+  setMode,
+}: ExportDialogProps) {
+  const [selectedOption, setSelectedOption] = useState<ExportOption>("1");
+  const [name, setName] = useState("");
+
+  const onSelectTime = useCallback(
+    (option: ExportOption) => {
+      setSelectedOption(option);
+
+      const now = new Date(latestTime * 1000);
+      let start = 0;
+      switch (option) {
+        case "1":
+          now.setHours(now.getHours() - 1);
+          start = now.getTime() / 1000;
+          break;
+        case "4":
+          now.setHours(now.getHours() - 4);
+          start = now.getTime() / 1000;
+          break;
+        case "8":
+          now.setHours(now.getHours() - 8);
+          start = now.getTime() / 1000;
+          break;
+        case "12":
+          now.setHours(now.getHours() - 12);
+          start = now.getTime() / 1000;
+          break;
+        case "24":
+          now.setHours(now.getHours() - 24);
+          start = now.getTime() / 1000;
+          break;
+      }
+
+      setRange({
+        before: latestTime,
+        after: start,
+      });
+    },
+    [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]);
+
+  return (
+    <Dialog
+      open={mode == "select"}
+      onOpenChange={(open) => {
+        if (!open) {
+          setMode("none");
+        }
+      }}
+    >
+      <DialogTrigger asChild>
+        <Button
+          className="flex items-center gap-2"
+          variant="secondary"
+          size="sm"
+          onClick={() => {
+            if (mode == "none") {
+              setMode("select");
+            } else if (mode == "timeline") {
+              onStartExport();
+              setMode("none");
+            }
+          }}
+        >
+          <FaArrowDown className="p-1 fill-secondary bg-muted-foreground rounded-md" />
+          {mode != "timeline" ? "Export" : "Save"}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:rounded-2xl">
+        <DialogHeader>
+          <DialogTitle>Export</DialogTitle>
+        </DialogHeader>
+        <SelectSeparator className="bg-secondary" />
+        <RadioGroup
+          className="flex flex-col gap-3"
+          onValueChange={(value) => onSelectTime(value as ExportOption)}
+        >
+          {EXPORT_OPTIONS.map((opt) => {
+            return (
+              <div className="flex items-center gap-2">
+                <RadioGroupItem
+                  className={
+                    opt == selectedOption
+                      ? "from-selected/50 to-selected/90 text-selected bg-selected"
+                      : "from-secondary/50 to-secondary/90 text-secondary bg-secondary"
+                  }
+                  key={opt}
+                  id={opt}
+                  value={opt}
+                />
+                <Label className="cursor-pointer capitalize" htmlFor={opt}>
+                  {isNaN(parseInt(opt))
+                    ? opt == "timeline"
+                      ? "Select from Timeline"
+                      : `${opt}`
+                    : `Last ${opt > "1" ? `${opt} Hours` : "Hour"}`}
+                </Label>
+              </div>
+            );
+          })}
+        </RadioGroup>
+        {selectedOption == "custom" && (
+          <CustomTimeSelector
+            latestTime={latestTime}
+            range={range}
+            setRange={setRange}
+          />
+        )}
+        <Input
+          className="mt-2"
+          type="search"
+          placeholder="Name the Export"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <SelectSeparator className="bg-secondary" />
+        <DialogFooter>
+          <DialogClose onClick={() => setMode("none")}>Cancel</DialogClose>
+          <Button
+            variant="select"
+            size="sm"
+            onClick={() => {
+              if (selectedOption == "timeline") {
+                setRange({ before: currentTime + 30, after: currentTime - 30 });
+                setMode("timeline");
+              } else {
+                onStartExport();
+                setMode("none");
+              }
+            }}
+          >
+            {selectedOption == "timeline" ? "Select" : "Export"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+type CustomTimeSelectorProps = {
+  latestTime: number;
+  range?: TimeRange;
+  setRange: (range: TimeRange | undefined) => void;
+};
+function CustomTimeSelector({
+  latestTime,
+  range,
+  setRange,
+}: CustomTimeSelectorProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  // times
+
+  const startTime = useMemo(
+    () => range?.after || latestTime - 3600,
+    [range, latestTime],
+  );
+  const endTime = useMemo(
+    () => range?.before || latestTime,
+    [range, latestTime],
+  );
+  const formattedStart = useFormattedTimestamp(
+    startTime,
+    config?.ui.time_format == "24hour"
+      ? "%b %-d, %H:%M:%S"
+      : "%b %-d, %I:%M:%S %p",
+  );
+  const formattedEnd = useFormattedTimestamp(
+    endTime,
+    config?.ui.time_format == "24hour"
+      ? "%b %-d, %H:%M:%S"
+      : "%b %-d, %I:%M:%S %p",
+  );
+
+  const startClock = useMemo(() => {
+    const date = new Date(startTime * 1000);
+    return `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
+  }, [startTime]);
+  const endClock = useMemo(() => {
+    const date = new Date(endTime * 1000);
+    return `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
+  }, [endTime]);
+
+  // calendars
+
+  const [startOpen, setStartOpen] = useState(false);
+  const [endOpen, setEndOpen] = useState(false);
+
+  return (
+    <div className="mx-8 px-2 flex items-center gap-2 bg-secondary rounded-lg">
+      <FaCalendarAlt />
+      <Popover
+        open={startOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setStartOpen(false);
+          }
+        }}
+      >
+        <PopoverTrigger asChild>
+          <Button
+            variant={startOpen ? "select" : "secondary"}
+            onClick={() => {
+              setStartOpen(true);
+              setEndOpen(false);
+            }}
+          >
+            {formattedStart}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="flex flex-col items-center">
+          <ReviewActivityCalendar
+            selectedDay={new Date(startTime * 1000)}
+            onSelect={(day) => {
+              if (!day) {
+                return;
+              }
+
+              setRange({
+                before: endTime,
+                after: day.getTime() / 1000 + 1,
+              });
+            }}
+          />
+          <SelectSeparator className="bg-secondary" />
+          <input
+            className="w-full mx-4 p-1 border border-input bg-background text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+            id="startTime"
+            type="time"
+            value={startClock}
+            step="1"
+            onChange={(e) => {
+              const clock = e.target.value;
+              const [hour, minute, second] = clock.split(":");
+              const start = new Date(startTime * 1000);
+              start.setHours(
+                parseInt(hour),
+                parseInt(minute),
+                parseInt(second),
+                0,
+              );
+              setRange({
+                before: endTime,
+                after: start.getTime() / 1000,
+              });
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+      <FaArrowRight className="size-4" />
+      <Popover
+        open={endOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setEndOpen(false);
+          }
+        }}
+      >
+        <PopoverTrigger asChild>
+          <Button
+            variant={endOpen ? "select" : "secondary"}
+            onClick={() => {
+              setEndOpen(true);
+              setStartOpen(false);
+            }}
+          >
+            {formattedEnd}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="flex flex-col items-center">
+          <ReviewActivityCalendar
+            selectedDay={new Date(endTime * 1000)}
+            onSelect={(day) => {
+              if (!day) {
+                return;
+              }
+
+              setRange({
+                after: startTime,
+                before: day.getTime() / 1000,
+              });
+            }}
+          />
+          <SelectSeparator className="bg-secondary" />
+          <input
+            className="w-full mx-4 p-1 border border-input bg-background text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+            id="startTime"
+            type="time"
+            value={endClock}
+            step="1"
+            onChange={(e) => {
+              const clock = e.target.value;
+              const [hour, minute, second] = clock.split(":");
+              const end = new Date(endTime * 1000);
+              end.setHours(
+                parseInt(hour),
+                parseInt(minute),
+                parseInt(second),
+                0,
+              );
+              setRange({
+                before: end.getTime() / 1000,
+                after: startTime,
+              });
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

web/src/components/player/HlsVideoPlayer.tsx

@@ -22,6 +22,7 @@ type HlsVideoPlayerProps = {
   videoRef: MutableRefObject<HTMLVideoElement | null>;
   visible: boolean;
   currentSource: string;
+  hotKeys: boolean;
   onClipEnded?: () => void;
   onPlayerLoaded?: () => void;
   onTimeUpdate?: (time: number) => void;
@@ -33,6 +34,7 @@ export default function HlsVideoPlayer({
   videoRef,
   visible,
   currentSource,
+  hotKeys,
   onClipEnded,
   onPlayerLoaded,
   onTimeUpdate,
@@ -161,6 +163,7 @@ export default function HlsVideoPlayer({
         controlsOpen={controlsOpen}
         setControlsOpen={setControlsOpen}
         playbackRate={videoRef.current?.playbackRate ?? 1}
+        hotKeys={hotKeys}
         onPlayPause={(play) => {
           if (!videoRef.current) {
             return;

web/src/components/player/VideoControls.tsx

@@ -41,6 +41,7 @@ type VideoControlsProps = {
   controlsOpen?: boolean;
   playbackRates?: number[];
   playbackRate: number;
+  hotKeys?: boolean;
   setControlsOpen?: (open: boolean) => void;
   onPlayPause: (play: boolean) => void;
   onSeek: (diff: number) => void;
@@ -55,6 +56,7 @@ export default function VideoControls({
   controlsOpen,
   playbackRates = PLAYBACK_RATE_DEFAULT,
   playbackRate,
+  hotKeys = true,
   setControlsOpen,
   onPlayPause,
   onSeek,
@@ -130,7 +132,7 @@ export default function VideoControls({
     [video, isPlaying, onSeek],
   );
   useKeyboardListener(
-    ["ArrowLeft", "ArrowRight", "m", " "],
+    hotKeys ? ["ArrowLeft", "ArrowRight", "m", " "] : [],
     onKeyboardShortcut,
   );
 

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -20,6 +20,7 @@ type DynamicVideoPlayerProps = {
   cameraPreviews: Preview[];
   startTimestamp?: number;
   isScrubbing: boolean;
+  hotKeys: boolean;
   onControllerReady: (controller: DynamicVideoController) => void;
   onTimestampUpdate?: (timestamp: number) => void;
   onClipEnded?: () => void;
@@ -31,6 +32,7 @@ export default function DynamicVideoPlayer({
   cameraPreviews,
   startTimestamp,
   isScrubbing,
+  hotKeys,
   onControllerReady,
   onTimestampUpdate,
   onClipEnded,
@@ -172,6 +174,7 @@ export default function DynamicVideoPlayer({
         videoRef={playerRef}
         visible={!(isScrubbing || isLoading)}
         currentSource={source}
+        hotKeys={hotKeys}
         onTimeUpdate={onTimeUpdate}
         onPlayerLoaded={onPlayerLoaded}
         onClipEnded={onClipEnded}

web/src/pages/Export.tsx

@@ -10,7 +10,6 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
-import { Toaster } from "@/components/ui/sonner";
 import axios from "axios";
 import { useCallback, useState } from "react";
 import useSWR from "swr";
@@ -42,8 +41,6 @@ function Export() {
 
   return (
     <div className="size-full p-2 overflow-hidden flex flex-col">
-      <Toaster />
-
       <AlertDialog
         open={deleteClip != undefined}
         onOpenChange={() => setDeleteClip(undefined)}

web/src/types/filter.ts

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

web/src/views/events/EventView.tsx

@@ -496,7 +496,7 @@ function DetectionReview({
       >
         {filter?.before == undefined && (
           <NewReviewData
-            className="absolute w-full z-30 pointer-events-none"
+            className="absolute w-full z-50 pointer-events-none"
             contentRef={contentRef}
             reviewItems={currentItems}
             itemsToReview={itemsToReview}

web/src/views/events/RecordingView.tsx

@@ -1,6 +1,7 @@
 import ReviewCard from "@/components/card/ReviewCard";
 import FilterCheckBox from "@/components/filter/FilterCheckBox";
 import ReviewFilterGroup from "@/components/filter/ReviewFilterGroup";
+import ExportDialog from "@/components/overlay/ExportDialog";
 import PreviewPlayer, {
   PreviewController,
 } from "@/components/player/PreviewPlayer";
@@ -11,6 +12,7 @@ import { Button } from "@/components/ui/button";
 import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { useOverlayState } from "@/hooks/use-overlay-state";
+import { ExportMode } from "@/types/filter";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
 import {
@@ -32,7 +34,9 @@ import { isDesktop, isMobile } from "react-device-detect";
 import { FaCircle, FaVideo } from "react-icons/fa";
 import { IoMdArrowRoundBack } from "react-icons/io";
 import { useNavigate } from "react-router-dom";
+import { Toaster } from "@/components/ui/sonner";
 import useSWR from "swr";
+import { TimeRange } from "@/types/timeline";
 
 const SEGMENT_DURATION = 30;
 type TimelineType = "timeline" | "events";
@@ -92,6 +96,11 @@ export function RecordingView({
     [selectedRangeIdx, timeRange],
   );
 
+  // export
+
+  const [exportMode, setExportMode] = useState<ExportMode>("none");
+  const [exportRange, setExportRange] = useState<TimeRange>();
+
   // move to next clip
 
   const onClipEnded = useCallback(() => {
@@ -210,6 +219,7 @@ export function RecordingView({
 
   return (
     <div ref={contentRef} className="size-full flex flex-col">
+      <Toaster />
       <div className={`w-full h-10 flex items-center justify-between pr-1`}>
         <Button className="rounded-lg" onClick={() => navigate(-1)}>
           <IoMdArrowRoundBack className="size-5 mr-[10px]" />
@@ -245,6 +255,15 @@ export function RecordingView({
               </DrawerContent>
             </Drawer>
           )}
+          <ExportDialog
+            camera={mainCamera}
+            currentTime={currentTime}
+            latestTime={timeRange.end}
+            mode={exportMode}
+            range={exportRange}
+            setRange={setExportRange}
+            setMode={setExportMode}
+          />
           <ReviewFilterGroup
             filters={["date", "general"]}
             reviewSummary={reviewSummary}
@@ -283,7 +302,7 @@ export function RecordingView({
       </div>
 
       <div
-        className={`flex h-full mb-2 justify-center overflow-hidden ${isDesktop ? "" : "flex-col"}`}
+        className={`flex h-full my-2 justify-center overflow-hidden ${isDesktop ? "" : "flex-col"}`}
       >
         <div className="flex flex-1 flex-wrap">
           <div
@@ -303,6 +322,7 @@ export function RecordingView({
                 timeRange={currentTimeRange}
                 cameraPreviews={allPreviews ?? []}
                 startTimestamp={playbackStart}
+                hotKeys={exportMode != "select"}
                 onTimestampUpdate={(timestamp) => {
                   setPlayerTime(timestamp);
                   setCurrentTime(timestamp);
@@ -314,7 +334,7 @@ export function RecordingView({
                 onControllerReady={(controller) => {
                   mainControllerRef.current = controller;
                 }}
-                isScrubbing={scrubbing}
+                isScrubbing={scrubbing || exportMode == "timeline"}
               />
             </div>
             {isDesktop && (
@@ -382,8 +402,10 @@ export function RecordingView({
           timeRange={timeRange}
           mainCameraReviewItems={mainCameraReviewItems}
           currentTime={currentTime}
+          exportRange={exportMode == "timeline" ? exportRange : undefined}
           setCurrentTime={setCurrentTime}
           setScrubbing={setScrubbing}
+          setExportRange={setExportRange}
         />
       </div>
     </div>
@@ -397,8 +419,10 @@ type TimelineProps = {
   timeRange: { start: number; end: number };
   mainCameraReviewItems: ReviewSegment[];
   currentTime: number;
+  exportRange?: TimeRange;
   setCurrentTime: React.Dispatch<React.SetStateAction<number>>;
   setScrubbing: React.Dispatch<React.SetStateAction<boolean>>;
+  setExportRange: (range: TimeRange) => void;
 };
 function Timeline({
   contentRef,
@@ -407,8 +431,10 @@ function Timeline({
   timeRange,
   mainCameraReviewItems,
   currentTime,
+  exportRange,
   setCurrentTime,
   setScrubbing,
+  setExportRange,
 }: TimelineProps) {
   const { data: motionData } = useSWR<MotionData[]>([
     "review/activity/motion",
@@ -420,7 +446,22 @@ function Timeline({
     },
   ]);
 
-  if (timelineType == "timeline") {
+  const [exportStart, setExportStartTime] = useState<number>(0);
+  const [exportEnd, setExportEndTime] = useState<number>(0);
+
+  useEffect(() => {
+    if (exportRange && exportStart != 0 && exportEnd != 0) {
+      if (exportRange.after != exportStart) {
+        setCurrentTime(exportStart);
+      } else if (exportRange?.before != exportEnd) {
+        setCurrentTime(exportEnd);
+      }
+
+      setExportRange({ after: exportStart, before: exportEnd });
+    }
+  }, [exportRange, exportStart, exportEnd, setExportRange, setCurrentTime]);
+
+  if (exportRange != undefined || timelineType == "timeline") {
     return (
       <div
         className={
@@ -434,7 +475,12 @@ function Timeline({
           timestampSpread={15}
           timelineStart={timeRange.end}
           timelineEnd={timeRange.start}
-          showHandlebar
+          showHandlebar={exportRange == undefined}
+          showExportHandles={exportRange != undefined}
+          exportStartTime={exportRange?.after}
+          exportEndTime={exportRange?.before}
+          setExportStartTime={setExportStartTime}
+          setExportEndTime={setExportEndTime}
           handlebarTime={currentTime}
           setHandlebarTime={setCurrentTime}
           onlyInitialHandlebarScroll={true}
@@ -450,8 +496,10 @@ function Timeline({
 
   return (
     <div
-      className={`${isDesktop ? "w-60" : "w-full"} h-full p-4 flex flex-col gap-4 bg-secondary overflow-auto`}
+      className={`${isDesktop ? "w-60" : "w-full"} h-full relative p-4 flex flex-col gap-4 bg-secondary overflow-auto`}
     >
+      <div className="absolute top-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-b from-secondary to-transparent pointer-events-none"></div>
+      <div className="absolute bottom-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-t from-secondary to-transparent pointer-events-none"></div>
       {mainCameraReviewItems.map((review) => {
         if (review.severity == "significant_motion") {
           return;