evandro
49795981eb
Origem: D:/Documents/Github/Downloader Arquivos omitidos (segredos, bancos de dados, logs, >50 MB): 0
221 lines
11 KiB
TypeScript
221 lines
11 KiB
TypeScript
import { useState } from "react";
|
|
import {
|
|
FileCheck,
|
|
FileWarning,
|
|
HardDrive,
|
|
Loader2,
|
|
Server,
|
|
} from "lucide-react";
|
|
import { DownloadStatus, DownloadTask, useSession } from "../../context/session-context";
|
|
import { formatBytes, formatSpeed } from "../../lib/utils";
|
|
import { Button } from "../ui/Button";
|
|
import { Card, CardContent } from "../ui/Card";
|
|
import { Progress } from "../ui/ProgressBar";
|
|
|
|
const API_URL = import.meta.env.VITE_API_URL || "";
|
|
const createdAtFormatter = new Intl.DateTimeFormat(undefined, {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
});
|
|
|
|
interface DownloadItemProps {
|
|
item: DownloadTask;
|
|
}
|
|
|
|
const statusLabel: Record<DownloadStatus, string> = {
|
|
queued: "Queued",
|
|
downloading: "Transferring",
|
|
completed: "Ready",
|
|
error: "Issue",
|
|
};
|
|
|
|
function getDownloadErrorMessage(error: unknown): string {
|
|
if (error instanceof Error && error.message) {
|
|
return error.message;
|
|
}
|
|
|
|
return "Failed to download file.";
|
|
}
|
|
|
|
export function DownloadItem({ item }: DownloadItemProps) {
|
|
const { sessionId } = useSession();
|
|
const [downloadError, setDownloadError] = useState<string | null>(null);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const isCompleted = item.status === "completed";
|
|
const isError = item.status === "error";
|
|
const isQueued = item.status === "queued";
|
|
|
|
const statusBadgeClass = isCompleted
|
|
? "border-emerald-400/20 bg-emerald-400/10 text-emerald-300"
|
|
: isError
|
|
? "border-destructive/30 bg-destructive/10 text-destructive"
|
|
: isQueued
|
|
? "border-amber-400/20 bg-amber-400/10 text-amber-300"
|
|
: "border-primary/20 bg-primary/10 text-primary";
|
|
|
|
const statusDetail = isCompleted
|
|
? "File cached and ready to be saved locally."
|
|
: isError
|
|
? "The transfer stopped before completion."
|
|
: isQueued
|
|
? "Waiting for the server to start processing."
|
|
: "Receiving data from the source URL.";
|
|
|
|
const handleDownloadFile = async (): Promise<void> => {
|
|
try {
|
|
setDownloadError(null);
|
|
setIsSaving(true);
|
|
const response = await fetch(`${API_URL}/api/download/${item.id}`, {
|
|
headers: { "x-session-id": sessionId },
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Failed to fetch the stored file.");
|
|
}
|
|
|
|
const blob = await response.blob();
|
|
const url = window.URL.createObjectURL(blob);
|
|
const anchor = document.createElement("a");
|
|
anchor.href = url;
|
|
anchor.download = item.filename;
|
|
document.body.appendChild(anchor);
|
|
anchor.click();
|
|
window.URL.revokeObjectURL(url);
|
|
document.body.removeChild(anchor);
|
|
} catch (error: unknown) {
|
|
setDownloadError(getDownloadErrorMessage(error));
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card className="group overflow-hidden border-border/80 bg-card/75 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/25 hover:bg-card/90">
|
|
<CardContent className="p-5">
|
|
<div className="flex flex-col gap-5">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
|
<div className="flex min-w-0 gap-4">
|
|
<div className="mt-1">
|
|
{isCompleted ? (
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-[1.25rem] border border-emerald-400/20 bg-emerald-400/10 text-emerald-300">
|
|
<FileCheck className="h-5 w-5" />
|
|
</div>
|
|
) : isError ? (
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-[1.25rem] border border-destructive/30 bg-destructive/10 text-destructive">
|
|
<FileWarning className="h-5 w-5" />
|
|
</div>
|
|
) : isQueued ? (
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-[1.25rem] border border-amber-400/20 bg-amber-400/10 text-amber-300">
|
|
<Server className="h-5 w-5" />
|
|
</div>
|
|
) : (
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-[1.25rem] border border-primary/20 bg-primary/10 text-primary">
|
|
<Loader2 className="h-5 w-5 animate-spin" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="min-w-0 space-y-3">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className={`inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] ${statusBadgeClass}`}>
|
|
{statusLabel[item.status]}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
Created at {createdAtFormatter.format(item.createdAt)}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<h3 className="truncate text-base font-semibold tracking-tight text-foreground" title={item.filename || item.url}>
|
|
{item.filename || item.url}
|
|
</h3>
|
|
<p className="truncate text-sm text-muted-foreground" title={item.url}>
|
|
{item.url}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{isCompleted ? (
|
|
<Button size="sm" onClick={handleDownloadFile} disabled={isSaving} className="w-full gap-2 lg:w-auto lg:shrink-0">
|
|
{isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <HardDrive className="h-4 w-4" />}
|
|
{isSaving ? "Saving..." : "Save file"}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
<div className="rounded-[1.25rem] border border-white/6 bg-background/35 p-4">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground/75">
|
|
Status
|
|
</p>
|
|
<p className="mt-2 text-sm font-medium text-foreground">{statusDetail}</p>
|
|
</div>
|
|
<div className="rounded-[1.25rem] border border-white/6 bg-background/35 p-4">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground/75">
|
|
Size
|
|
</p>
|
|
<p className="mt-2 text-sm font-medium text-foreground">
|
|
{item.totalBytes ? formatBytes(item.totalBytes) : "Unknown until available"}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-[1.25rem] border border-white/6 bg-background/35 p-4">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground/75">
|
|
Throughput
|
|
</p>
|
|
<p className="mt-2 text-sm font-medium text-foreground">
|
|
{item.speed ? formatSpeed(item.speed) : "Waiting for activity"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{!isCompleted && !isError ? (
|
|
<div className="rounded-[1.5rem] border border-white/6 bg-background/45 p-4">
|
|
<div className="flex items-center justify-between text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground/75">
|
|
<span>{isQueued ? "Waiting on server" : "Transfer progress"}</span>
|
|
<span>{item.progress ? `${Math.round(item.progress)}%` : "0%"}</span>
|
|
</div>
|
|
<Progress
|
|
value={item.progress || 0}
|
|
className="mt-3"
|
|
indicatorClassName={isQueued ? "opacity-60" : undefined}
|
|
/>
|
|
<div className="mt-3 flex flex-col gap-2 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
|
|
<span>
|
|
{formatBytes(item.receivedBytes || 0)} / {item.totalBytes ? formatBytes(item.totalBytes) : "Unknown"}
|
|
</span>
|
|
<span>{item.speed ? formatSpeed(item.speed) : "No transfer speed yet"}</span>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{isCompleted ? (
|
|
<div className="rounded-[1.5rem] border border-emerald-400/20 bg-emerald-400/10 p-4 text-sm text-foreground">
|
|
<p className="font-semibold text-emerald-300">Transfer completed successfully</p>
|
|
<p className="mt-2 text-muted-foreground">
|
|
The file is ready in the current session and can be saved to disk at any time before expiration.
|
|
</p>
|
|
</div>
|
|
) : null}
|
|
|
|
{downloadError ? (
|
|
<div className="rounded-[1.5rem] border border-destructive/30 bg-destructive/10 p-4 text-sm text-foreground">
|
|
<p className="font-semibold text-destructive">Unable to save file</p>
|
|
<p className="mt-2 text-muted-foreground">{downloadError}</p>
|
|
</div>
|
|
) : null}
|
|
|
|
{isError ? (
|
|
<div className="rounded-[1.5rem] border border-destructive/30 bg-destructive/10 p-4 text-sm text-foreground">
|
|
<p className="font-semibold text-destructive">Transfer failed</p>
|
|
<p className="mt-2 text-muted-foreground">
|
|
{item.error || "Unknown error occurred during the transfer."}
|
|
</p>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|