wip: snapshot das alterações não commitadas (2026-10-20)
Origem: D:/Documents/Github/Downloader Arquivos omitidos (segredos, bancos de dados, logs, >50 MB): 0
This commit is contained in:
evandro committed
1 parent
5b1600c210
commit
49795981eb
23 files changed
+673
-630
No files matched your search
@@ -1,138 +1,218 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
FileCheck,
|
||||
FileWarning,
|
||||
HardDrive,
|
||||
Loader2,
|
||||
Server,
|
||||
HardDrive
|
||||
} 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";
|
||||
import { formatBytes, formatSpeed } from "../../lib/utils";
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";
|
||||
|
||||
export type DownloadStatus = "queued" | "downloading" | "completed" | "error";
|
||||
|
||||
export type DownloadItemData = {
|
||||
id: string;
|
||||
sessionId: string;
|
||||
url: string;
|
||||
filename: string;
|
||||
status: DownloadStatus;
|
||||
progress: number;
|
||||
totalBytes: number;
|
||||
receivedBytes: number;
|
||||
speed: number;
|
||||
error?: string;
|
||||
createdAt: number;
|
||||
};
|
||||
const API_URL = import.meta.env.VITE_API_URL || "";
|
||||
const createdAtFormatter = new Intl.DateTimeFormat(undefined, {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
|
||||
interface DownloadItemProps {
|
||||
item: DownloadItemData;
|
||||
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 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 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 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");
|
||||
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.");
|
||||
}
|
||||
};
|
||||
|
||||
download();
|
||||
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="overflow-hidden transition-all hover:bg-muted/50">
|
||||
<CardContent className="p-4">
|
||||
<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" />
|
||||
<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>
|
||||
) : 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>
|
||||
) : 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>
|
||||
) : (
|
||||
<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-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 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>
|
||||
{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 && (
|
||||
<div className="text-sm text-destructive pt-1">
|
||||
{item.error || "Unknown error occurred"}
|
||||
</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>
|
||||
|
||||
Reference in new issue
Block a user