feat: Inicializa a aplicação Downloader com backend para gerenciamento de sessões e downloads, e frontend para interação.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
c2cadc25f3
commit
5b1600c210
13 files changed
+1308
-738
No files matched your search
@@ -1,153 +1,137 @@
|
||||
import {
|
||||
Download,
|
||||
FileCheck,
|
||||
FileWarning,
|
||||
Loader2,
|
||||
Play,
|
||||
Server,
|
||||
HardDrive
|
||||
} from "lucide-react";
|
||||
import { Button } from "../ui/Button";
|
||||
import { Card, CardContent } from "../ui/Card";
|
||||
import { Progress } from "../ui/ProgressBar";
|
||||
import { formatBytes, formatSpeed } from "../../lib/utils";
|
||||
|
||||
export type DownloadStatus = "pending" | "downloading" | "completed" | "error";
|
||||
const API_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";
|
||||
|
||||
export type DownloadStatus = "queued" | "downloading" | "completed" | "error";
|
||||
|
||||
export type DownloadItemData = {
|
||||
id: number;
|
||||
id: string;
|
||||
sessionId: string;
|
||||
url: string;
|
||||
filename: string;
|
||||
status: DownloadStatus;
|
||||
progress: number | null;
|
||||
receivedBytes?: number;
|
||||
totalBytes?: number;
|
||||
speedBytesPerSecond?: number;
|
||||
speedHistory: number[];
|
||||
progress: number;
|
||||
totalBytes: number;
|
||||
receivedBytes: number;
|
||||
speed: number;
|
||||
error?: string;
|
||||
createdAt: number;
|
||||
};
|
||||
|
||||
interface DownloadItemProps {
|
||||
item: DownloadItemData;
|
||||
onRetry: (id: number, url: string) => void;
|
||||
}
|
||||
|
||||
export function DownloadItem({ item, onRetry }: DownloadItemProps) {
|
||||
export function DownloadItem({ item }: DownloadItemProps) {
|
||||
const isCompleted = item.status === "completed";
|
||||
const isError = item.status === "error";
|
||||
const isDownloading = item.status === "downloading";
|
||||
const isQueued = item.status === "queued";
|
||||
|
||||
const handleDownloadFile = () => {
|
||||
const download = async () => {
|
||||
try {
|
||||
const sessionId = localStorage.getItem("downloader_session_id") || "";
|
||||
const res = await fetch(`${API_URL}/api/download/${item.id}`, {
|
||||
headers: { "x-session-id": sessionId }
|
||||
});
|
||||
if (!res.ok) throw new Error("Download failed");
|
||||
|
||||
const blob = await res.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = item.filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
} catch (e) {
|
||||
alert("Failed to download file");
|
||||
}
|
||||
};
|
||||
|
||||
download();
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="overflow-hidden transition-all hover:bg-muted/50">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="min-w-0 flex-1 space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={`flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary text-muted-foreground ${isCompleted ? "bg-green-500/10 text-green-500" : ""
|
||||
} ${isError ? "bg-red-500/10 text-red-500" : ""} ${isDownloading ? "bg-primary/10 text-primary" : ""
|
||||
}`}
|
||||
>
|
||||
{isCompleted ? (
|
||||
<FileCheck className="size-4" />
|
||||
) : isError ? (
|
||||
<FileWarning className="size-4" />
|
||||
) : isDownloading ? (
|
||||
<Download className="size-4 animate-bounce" />
|
||||
) : (
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
)}
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="mt-1">
|
||||
{isCompleted ? (
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-green-500/10 text-green-500">
|
||||
<FileCheck className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium leading-none">
|
||||
{item.url.split("/").pop() || item.url}
|
||||
</p>
|
||||
<p className="mt-1 truncate text-xs text-muted-foreground">
|
||||
{item.url}
|
||||
</p>
|
||||
) : isError ? (
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 text-destructive">
|
||||
<FileWarning className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>{item.progress ?? 0}%</span>
|
||||
<span>
|
||||
<span>
|
||||
{item.status === "downloading" &&
|
||||
formatSpeed(item.speedBytesPerSecond)}
|
||||
</span>
|
||||
</span>
|
||||
) : isQueued ? (
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-secondary text-secondary-foreground">
|
||||
<Server className="h-5 w-5 animate-pulse" />
|
||||
</div>
|
||||
<Progress
|
||||
value={item.progress}
|
||||
className={`h-2 ${isError ? "bg-red-900/20" : ""} ${isCompleted ? "bg-green-900/20" : ""
|
||||
}`}
|
||||
indicatorClassName={`${isError ? "bg-red-500" : ""} ${isCompleted ? "bg-green-500" : ""
|
||||
}`}
|
||||
/>
|
||||
|
||||
{/* Sparkline for speed history */}
|
||||
{item.status === "downloading" && item.speedHistory.length > 1 && (
|
||||
<div className="h-8 w-full overflow-hidden opacity-50">
|
||||
<svg
|
||||
className="h-full w-full"
|
||||
viewBox={`0 0 ${item.speedHistory.length - 1} 100`}
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d={`M 0,100 ${item.speedHistory
|
||||
.map((s, i) => {
|
||||
const max = Math.max(...item.speedHistory);
|
||||
const y = max > 0 ? 100 - (s / max) * 100 : 100;
|
||||
return `L ${i},${y}`;
|
||||
})
|
||||
.join(" ")} L ${item.speedHistory.length - 1},100 Z`}
|
||||
fill="currentColor"
|
||||
className="text-primary/20"
|
||||
/>
|
||||
<path
|
||||
d={`M 0,${100 - (item.speedHistory[0] / Math.max(...item.speedHistory)) * 100} ${item.speedHistory
|
||||
.map((s, i) => {
|
||||
const max = Math.max(...item.speedHistory);
|
||||
const y = max > 0 ? 100 - (s / max) * 100 : 100;
|
||||
return `L ${i},${y}`;
|
||||
})
|
||||
.join(" ")}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
className="text-primary"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>
|
||||
{formatBytes(item.receivedBytes)} /{" "}
|
||||
{formatBytes(item.totalBytes)}
|
||||
</span>
|
||||
<span className="capitalize">{item.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isError && (
|
||||
<div className="rounded-md bg-destructive/10 p-2 text-xs text-destructive">
|
||||
{item.error}
|
||||
) : (
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex-1 space-y-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="space-y-1 truncate">
|
||||
<h3 className="font-medium leading-none truncate" title={item.filename || item.url}>
|
||||
{item.filename || item.url}
|
||||
</h3>
|
||||
<p className="text-xs text-muted-foreground truncate" title={item.url}>
|
||||
{item.url}
|
||||
</p>
|
||||
</div>
|
||||
{isCompleted && (
|
||||
<Button size="sm" onClick={handleDownloadFile} className="shrink-0 gap-2">
|
||||
<HardDrive className="w-4 h-4" />
|
||||
Save to Disk
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Progress Section */}
|
||||
{!isCompleted && !isError && (
|
||||
<div className="space-y-2 pt-2">
|
||||
<div className="flex justify-between text-xs text-muted-foreground">
|
||||
<span>{isQueued ? "Queued on server..." : item.status}</span>
|
||||
<span>{formatBytes(item.receivedBytes || 0)} / {item.totalBytes ? formatBytes(item.totalBytes) : "??"}</span>
|
||||
</div>
|
||||
<Progress value={item.progress || 0} className="h-1.5" />
|
||||
<div className="flex justify-between text-xs text-muted-foreground">
|
||||
<span>{item.speed ? formatSpeed(item.speed) : "0 B/s"}</span>
|
||||
<span>{item.progress ? `${Math.round(item.progress)}%` : "0%"}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isCompleted && (
|
||||
<div className="pt-2 flex items-center gap-2 text-xs text-green-500">
|
||||
<FileCheck className="w-3 h-3" />
|
||||
<span>Ready for download ({formatBytes(item.totalBytes)})</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isError && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => onRetry(item.id, item.url)}
|
||||
className="h-8 w-8"
|
||||
>
|
||||
<Play className="size-4" />
|
||||
</Button>
|
||||
<div className="text-sm text-destructive pt-1">
|
||||
{item.error || "Unknown error occurred"}
|
||||
</div>
|
||||
)}
|
||||
{/* Placeholder for pause/cancel in future */}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
Reference in new issue
Block a user