Streaming download (#14346)

* Send downloaded mp4 as a streaming response instead of a file

* Add download button to UI

* Formatting

* Fix CSS and text

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* download video button component

* use download button component in review detail dialog

* better filename

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

web/src/components/button/DownloadVideoButton.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+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,
+  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();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.style.display = "none";
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      toast.success(
+        "Your review item video has been downloaded successfully.",
+        {
+          position: "top-center",
+        },
+      );
+    } catch (error) {
+      toast.error(
+        "There was an error downloading the review item video. Please try again.",
+        {
+          position: "top-center",
+        },
+      );
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return (
+    <div className="flex justify-center">
+      <Button
+        onClick={handleDownload}
+        disabled={isDownloading}
+        className="flex items-center gap-2"
+        size="sm"
+      >
+        {isDownloading ? (
+          <ActivityIndicator className="h-4 w-4" />
+        ) : (
+          <FaDownload className="h-4 w-4" />
+        )}
+      </Button>
+    </div>
+  );
+}