Use direct download link instead of blob method (#14347)

This commit is contained in:
Josh Hawkins 2024-10-14 18:53:25 -05:00 committed by GitHub
parent 3879fde06d
commit 0abd514064
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -18,8 +18,6 @@ export function DownloadVideoButton({
}: DownloadVideoButtonProps) { }: DownloadVideoButtonProps) {
const [isDownloading, setIsDownloading] = useState(false); const [isDownloading, setIsDownloading] = useState(false);
const handleDownload = async () => {
setIsDownloading(true);
const formattedDate = formatUnixTimestampToDateTime(startTime, { const formattedDate = formatUnixTimestampToDateTime(startTime, {
strftime_fmt: "%D-%T", strftime_fmt: "%D-%T",
time_style: "medium", time_style: "medium",
@ -27,48 +25,40 @@ export function DownloadVideoButton({
}); });
const filename = `${camera}_${formattedDate}.mp4`; const filename = `${camera}_${formattedDate}.mp4`;
try { const handleDownloadStart = () => {
const response = await fetch(source); setIsDownloading(true);
const blob = await response.blob(); toast.success("Your review item video has started downloading.", {
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", position: "top-center",
}, });
); };
} catch (error) {
toast.error( const handleDownloadEnd = () => {
"There was an error downloading the review item video. Please try again.",
{
position: "top-center",
},
);
} finally {
setIsDownloading(false); setIsDownloading(false);
} toast.success("Download completed successfully.", {
position: "top-center",
});
}; };
return ( return (
<div className="flex justify-center"> <div className="flex justify-center">
<Button <Button
onClick={handleDownload} asChild
disabled={isDownloading} disabled={isDownloading}
className="flex items-center gap-2" className="flex items-center gap-2"
size="sm" size="sm"
>
<a
href={source}
download={filename}
onClick={handleDownloadStart}
onBlur={handleDownloadEnd}
> >
{isDownloading ? ( {isDownloading ? (
<ActivityIndicator className="h-4 w-4" /> <ActivityIndicator className="size-4" />
) : ( ) : (
<FaDownload className="h-4 w-4" /> <FaDownload className="size-4 text-secondary-foreground" />
)} )}
</a>
</Button> </Button>
</div> </div>
); );