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,57 +18,47 @@ export function DownloadVideoButton({
}: DownloadVideoButtonProps) { }: DownloadVideoButtonProps) {
const [isDownloading, setIsDownloading] = useState(false); const [isDownloading, setIsDownloading] = useState(false);
const handleDownload = async () => { const formattedDate = formatUnixTimestampToDateTime(startTime, {
setIsDownloading(true); strftime_fmt: "%D-%T",
const formattedDate = formatUnixTimestampToDateTime(startTime, { time_style: "medium",
strftime_fmt: "%D-%T", date_style: "medium",
time_style: "medium", });
date_style: "medium", 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); position: "top-center",
const a = document.createElement("a"); });
a.style.display = "none"; };
a.href = url;
a.download = filename; const handleDownloadEnd = () => {
document.body.appendChild(a); setIsDownloading(false);
a.click(); toast.success("Download completed successfully.", {
window.URL.revokeObjectURL(url); position: "top-center",
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 ( 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"
> >
{isDownloading ? ( <a
<ActivityIndicator className="h-4 w-4" /> href={source}
) : ( download={filename}
<FaDownload className="h-4 w-4" /> onClick={handleDownloadStart}
)} onBlur={handleDownloadEnd}
>
{isDownloading ? (
<ActivityIndicator className="size-4" />
) : (
<FaDownload className="size-4 text-secondary-foreground" />
)}
</a>
</Button> </Button>
</div> </div>
); );