From 87c8aaf5f7c4cb7f69b73971471fac2b44344685 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 15 Oct 2024 06:31:08 -0600
Subject: [PATCH] Implement download buttons

---
 .../components/card/SearchThumbnailFooter.tsx | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/web/src/components/card/SearchThumbnailFooter.tsx b/web/src/components/card/SearchThumbnailFooter.tsx
index e88aecf0a..b01b8b705 100644
--- a/web/src/components/card/SearchThumbnailFooter.tsx
+++ b/web/src/components/card/SearchThumbnailFooter.tsx
@@ -23,6 +23,7 @@ import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
 import { FrigatePlusDialog } from "../overlay/dialog/FrigatePlusDialog";
 import { Event } from "@/types/event";
 import { FaArrowsRotate } from "react-icons/fa6";
+import { baseUrl } from "@/api/baseUrl";
 
 type SearchThumbnailProps = {
   searchResult: SearchResult;
@@ -100,12 +101,24 @@ export default function SearchThumbnailFooter({
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem>
-              <LuDownload className="mr-2 size-4" />
-              <span>Download video</span>
+              <a
+                className="justify_start flex items-center"
+                href={`${baseUrl}api/events/${searchResult.id}/clip.mp4`}
+                download={`${searchResult.camera}_${searchResult.label}.mp4`}
+              >
+                <LuDownload className="mr-2 size-4" />
+                <span>Download video</span>
+              </a>
             </DropdownMenuItem>
             <DropdownMenuItem>
-              <LuCamera className="mr-2 size-4" />
-              <span>Download snapshot</span>
+              <a
+                className="justify_start flex items-center"
+                href={`${baseUrl}api/events/${searchResult.id}/snapshot.jpg`}
+                download={`${searchResult.camera}_${searchResult.label}.jpg`}
+              >
+                <LuCamera className="mr-2 size-4" />
+                <span>Download snapshot</span>
+              </a>
             </DropdownMenuItem>
             <DropdownMenuItem>
               <FaArrowsRotate className="mr-2 size-4" />