From c8153ec39aa25dddf62573166266c6076339726c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 14 Oct 2024 16:19:00 -0500
Subject: [PATCH] better filename

---
 .../components/button/DownloadVideoButton.tsx  | 18 ++++++++++++++++--
 .../overlay/detail/ReviewDetailDialog.tsx      |  2 ++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/web/src/components/button/DownloadVideoButton.tsx b/web/src/components/button/DownloadVideoButton.tsx
index a55f16f5d..ffb50098e 100644
--- a/web/src/components/button/DownloadVideoButton.tsx
+++ b/web/src/components/button/DownloadVideoButton.tsx
@@ -3,16 +3,30 @@ import { Button } from "@/components/ui/button";
 import { toast } from "sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { FaDownload } from "react-icons/fa";
+import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 
 type DownloadVideoButtonProps = {
   source: string;
+  camera: string;
+  startTime: number;
 };
 
-export function DownloadVideoButton({ source }: DownloadVideoButtonProps) {
+export function DownloadVideoButton({
+  source,
+  camera,
+  startTime,
+}: DownloadVideoButtonProps) {
   const [isDownloading, setIsDownloading] = useState(false);
 
   const handleDownload = async () => {
     setIsDownloading(true);
+    const formattedDate = formatUnixTimestampToDateTime(startTime, {
+      strftime_fmt: "%D-%T",
+      time_style: "medium",
+      date_style: "medium",
+    });
+    const filename = `${camera}_${formattedDate}.mp4`;
+
     try {
       const response = await fetch(source);
       const blob = await response.blob();
@@ -20,7 +34,7 @@ export function DownloadVideoButton({ source }: DownloadVideoButtonProps) {
       const a = document.createElement("a");
       a.style.display = "none";
       a.href = url;
-      a.download = "video.mp4";
+      a.download = filename;
       document.body.appendChild(a);
       a.click();
       window.URL.revokeObjectURL(url);
diff --git a/web/src/components/overlay/detail/ReviewDetailDialog.tsx b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
index 330f35d9a..fb3a95b57 100644
--- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx
+++ b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
@@ -169,6 +169,8 @@ export default function ReviewDetailDialog({
                   <TooltipTrigger>
                     <DownloadVideoButton
                       source={`${baseUrl}api/${review.camera}/start/${review.start_time}/end/${review.end_time || Date.now() / 1000}/clip.mp4`}
+                      camera={review.camera}
+                      startTime={review.start_time}
                     />
                   </TooltipTrigger>
                   <TooltipPortal>