add download button back for now

web/src/components/overlay/detail/TrackingDetails.tsx

@@ -37,7 +37,9 @@ import { HiDotsHorizontal } from "react-icons/hi";
 import axios from "axios";
 import { toast } from "sonner";
 import { useDetailStream } from "@/context/detail-stream-context";
-import { isDesktop } from "react-device-detect";
+import { isDesktop, isIOS } from "react-device-detect";
+import Chip from "@/components/indicators/Chip";
+import { FaDownload, FaHistory } from "react-icons/fa";
 
 type TrackingDetailsProps = {
   className?: string;
@@ -53,6 +55,7 @@ export function TrackingDetails({
 }: TrackingDetailsProps) {
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const { t } = useTranslation(["views/explore"]);
+  const navigate = useNavigate();
   const { setSelectedObjectIds, annotationOffset, setAnnotationOffset } =
     useDetailStream();
 
@@ -330,6 +333,54 @@ export function TrackingDetails({
             camera={event.camera}
             currentTimeOverride={currentTime}
           />
+          <div
+            className={cn(
+              "absolute top-2 z-[5] flex items-center gap-2",
+              isIOS ? "right-8" : "right-2",
+            )}
+          >
+            {event && (
+              <Tooltip>
+                <TooltipTrigger>
+                  <Chip
+                    className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
+                    onClick={() => {
+                      if (event?.id) {
+                        const params = new URLSearchParams({
+                          id: event.id,
+                        }).toString();
+                        navigate(`/review?${params}`);
+                      }
+                    }}
+                  >
+                    <FaHistory className="size-4 text-white" />
+                  </Chip>
+                </TooltipTrigger>
+                <TooltipPortal>
+                  <TooltipContent>
+                    {t("itemMenu.viewInHistory.label")}
+                  </TooltipContent>
+                </TooltipPortal>
+              </Tooltip>
+            )}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <a
+                  download
+                  href={`${baseUrl}api/${event.camera}/start/${event.start_time - REVIEW_PADDING}/end/${(event.end_time ?? Date.now() / 1000) + REVIEW_PADDING}/clip.mp4`}
+                >
+                  <Chip className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500">
+                    <FaDownload className="size-4 text-white" />
+                  </Chip>
+                </a>
+              </TooltipTrigger>
+              <TooltipPortal>
+                <TooltipContent>
+                  {t("button.download", { ns: "common" })}
+                </TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
+          </div>
         </div>
       </div>