585 lines
25 KiB
TypeScript
585 lines
25 KiB
TypeScript
import { DragEvent, ReactElement, useEffect, useMemo, useRef, useState } from "react";
|
|
import type { AppSettings, DebridFallbackProvider, DebridProvider, DownloadItem, PackageEntry, UiSnapshot, UpdateCheckResult } from "../shared/types";
|
|
|
|
type Tab = "collector" | "downloads" | "settings";
|
|
|
|
const emptySnapshot = (): UiSnapshot => ({
|
|
settings: {
|
|
token: "",
|
|
megaLogin: "",
|
|
megaPassword: "",
|
|
bestToken: "",
|
|
allDebridToken: "",
|
|
rememberToken: true,
|
|
providerPrimary: "realdebrid",
|
|
providerSecondary: "megadebrid",
|
|
providerTertiary: "bestdebrid",
|
|
autoProviderFallback: true,
|
|
outputDir: "",
|
|
packageName: "",
|
|
autoExtract: true,
|
|
extractDir: "",
|
|
createExtractSubfolder: true,
|
|
hybridExtract: true,
|
|
cleanupMode: "none",
|
|
extractConflictMode: "overwrite",
|
|
removeLinkFilesAfterExtract: false,
|
|
removeSamplesAfterExtract: false,
|
|
enableIntegrityCheck: true,
|
|
autoResumeOnStart: true,
|
|
autoReconnect: false,
|
|
reconnectWaitSeconds: 45,
|
|
completedCleanupPolicy: "never",
|
|
maxParallel: 4,
|
|
speedLimitEnabled: false,
|
|
speedLimitKbps: 0,
|
|
speedLimitMode: "global",
|
|
updateRepo: "",
|
|
autoUpdateCheck: true
|
|
},
|
|
session: {
|
|
version: 2,
|
|
packageOrder: [],
|
|
packages: {},
|
|
items: {},
|
|
runStartedAt: 0,
|
|
totalDownloadedBytes: 0,
|
|
summaryText: "",
|
|
reconnectUntil: 0,
|
|
reconnectReason: "",
|
|
paused: false,
|
|
running: false,
|
|
updatedAt: Date.now()
|
|
},
|
|
summary: null,
|
|
speedText: "Geschwindigkeit: 0 B/s",
|
|
etaText: "ETA: --",
|
|
canStart: true,
|
|
canStop: false,
|
|
canPause: false
|
|
});
|
|
|
|
const cleanupLabels: Record<string, string> = {
|
|
never: "Nie",
|
|
immediate: "Sofort",
|
|
on_start: "Beim App-Start",
|
|
package_done: "Sobald Paket fertig ist"
|
|
};
|
|
|
|
const providerLabels: Record<DebridProvider, string> = {
|
|
realdebrid: "Real-Debrid",
|
|
megadebrid: "Mega-Debrid",
|
|
bestdebrid: "BestDebrid",
|
|
alldebrid: "AllDebrid"
|
|
};
|
|
|
|
const fallbackProviderOptions: Array<{ value: DebridFallbackProvider; label: string }> = [
|
|
{ value: "none", label: "Kein Fallback" },
|
|
{ value: "realdebrid", label: providerLabels.realdebrid },
|
|
{ value: "megadebrid", label: providerLabels.megadebrid },
|
|
{ value: "bestdebrid", label: providerLabels.bestdebrid },
|
|
{ value: "alldebrid", label: providerLabels.alldebrid }
|
|
];
|
|
|
|
function formatSpeedMbps(speedBps: number): string {
|
|
const mbps = Math.max(0, speedBps) / (1024 * 1024);
|
|
return `${mbps.toFixed(2)} MB/s`;
|
|
}
|
|
|
|
export function App(): ReactElement {
|
|
const [snapshot, setSnapshot] = useState<UiSnapshot>(emptySnapshot);
|
|
const [tab, setTab] = useState<Tab>("collector");
|
|
const [linksRaw, setLinksRaw] = useState("");
|
|
const [statusToast, setStatusToast] = useState("");
|
|
const [settingsDraft, setSettingsDraft] = useState<AppSettings>(emptySnapshot().settings);
|
|
const latestStateRef = useRef<UiSnapshot | null>(null);
|
|
const stateFlushTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
const toastTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
|
const showToast = (message: string, timeoutMs = 2200): void => {
|
|
setStatusToast(message);
|
|
if (toastTimerRef.current) {
|
|
clearTimeout(toastTimerRef.current);
|
|
}
|
|
toastTimerRef.current = setTimeout(() => {
|
|
setStatusToast("");
|
|
toastTimerRef.current = null;
|
|
}, timeoutMs);
|
|
};
|
|
|
|
useEffect(() => {
|
|
let unsubscribe: (() => void) | null = null;
|
|
void window.rd.getSnapshot().then((state) => {
|
|
setSnapshot(state);
|
|
setSettingsDraft(state.settings);
|
|
if (state.settings.autoUpdateCheck) {
|
|
void window.rd.checkUpdates().then((result) => {
|
|
void handleUpdateResult(result, "startup");
|
|
}).catch(() => undefined);
|
|
}
|
|
}).catch((error) => {
|
|
showToast(`Snapshot konnte nicht geladen werden: ${String(error)}`, 2800);
|
|
});
|
|
unsubscribe = window.rd.onStateUpdate((state) => {
|
|
latestStateRef.current = state;
|
|
if (stateFlushTimerRef.current) {
|
|
return;
|
|
}
|
|
stateFlushTimerRef.current = setTimeout(() => {
|
|
stateFlushTimerRef.current = null;
|
|
if (latestStateRef.current) {
|
|
setSnapshot(latestStateRef.current);
|
|
latestStateRef.current = null;
|
|
}
|
|
}, 220);
|
|
});
|
|
return () => {
|
|
if (stateFlushTimerRef.current) {
|
|
clearTimeout(stateFlushTimerRef.current);
|
|
stateFlushTimerRef.current = null;
|
|
}
|
|
if (toastTimerRef.current) {
|
|
clearTimeout(toastTimerRef.current);
|
|
toastTimerRef.current = null;
|
|
}
|
|
if (unsubscribe) {
|
|
unsubscribe();
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
const packages = useMemo(() => snapshot.session.packageOrder
|
|
.map((id: string) => snapshot.session.packages[id])
|
|
.filter(Boolean), [snapshot]);
|
|
|
|
const handleUpdateResult = async (result: UpdateCheckResult, source: "manual" | "startup"): Promise<void> => {
|
|
if (result.error) {
|
|
if (source === "manual") {
|
|
showToast(`Update-Check fehlgeschlagen: ${result.error}`, 2800);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (!result.updateAvailable) {
|
|
if (source === "manual") {
|
|
showToast(`Kein Update verfügbar (v${result.currentVersion})`, 2000);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const approved = window.confirm(
|
|
`Update verfügbar: ${result.latestTag} (aktuell v${result.currentVersion})\n\nJetzt automatisch herunterladen und installieren?`
|
|
);
|
|
if (!approved) {
|
|
showToast(`Update verfügbar: ${result.latestTag}`, 2600);
|
|
return;
|
|
}
|
|
|
|
const install = await window.rd.installUpdate();
|
|
if (install.started) {
|
|
showToast("Updater gestartet - App wird geschlossen", 2600);
|
|
return;
|
|
}
|
|
|
|
showToast(`Auto-Update fehlgeschlagen: ${install.message}`, 3200);
|
|
};
|
|
|
|
const onSaveSettings = async (): Promise<void> => {
|
|
try {
|
|
await window.rd.updateSettings(settingsDraft);
|
|
showToast("Settings gespeichert", 1800);
|
|
} catch (error) {
|
|
showToast(`Settings konnten nicht gespeichert werden: ${String(error)}`, 2800);
|
|
}
|
|
};
|
|
|
|
const onCheckUpdates = async (): Promise<void> => {
|
|
try {
|
|
const result = await window.rd.checkUpdates();
|
|
await handleUpdateResult(result, "manual");
|
|
} catch (error) {
|
|
showToast(`Update-Check fehlgeschlagen: ${String(error)}`, 2800);
|
|
}
|
|
};
|
|
|
|
const onAddLinks = async (): Promise<void> => {
|
|
try {
|
|
await window.rd.updateSettings(settingsDraft);
|
|
const result = await window.rd.addLinks({ rawText: linksRaw, packageName: settingsDraft.packageName });
|
|
if (result.addedLinks > 0) {
|
|
showToast(`${result.addedPackages} Paket(e), ${result.addedLinks} Link(s) hinzugefügt`);
|
|
setLinksRaw("");
|
|
} else {
|
|
showToast("Keine gültigen Links gefunden");
|
|
}
|
|
} catch (error) {
|
|
showToast(`Fehler beim Hinzufügen: ${String(error)}`, 2600);
|
|
}
|
|
};
|
|
|
|
const onImportDlc = async (): Promise<void> => {
|
|
try {
|
|
const files = await window.rd.pickContainers();
|
|
if (files.length === 0) {
|
|
return;
|
|
}
|
|
await window.rd.updateSettings(settingsDraft);
|
|
const result = await window.rd.addContainers(files);
|
|
showToast(`DLC importiert: ${result.addedPackages} Paket(e), ${result.addedLinks} Link(s)`);
|
|
} catch (error) {
|
|
showToast(`Fehler beim DLC-Import: ${String(error)}`, 2600);
|
|
}
|
|
};
|
|
|
|
const onDrop = async (event: DragEvent<HTMLTextAreaElement>): Promise<void> => {
|
|
event.preventDefault();
|
|
const files = Array.from(event.dataTransfer.files ?? []) as File[];
|
|
const dlc = files
|
|
.filter((file) => file.name.toLowerCase().endsWith(".dlc"))
|
|
.map((file) => (file as unknown as { path?: string }).path)
|
|
.filter((value): value is string => !!value);
|
|
if (dlc.length === 0) {
|
|
return;
|
|
}
|
|
try {
|
|
await window.rd.updateSettings(settingsDraft);
|
|
const result = await window.rd.addContainers(dlc);
|
|
showToast(`Drag-and-Drop: ${result.addedPackages} Paket(e), ${result.addedLinks} Link(s)`);
|
|
} catch (error) {
|
|
showToast(`Fehler bei Drag-and-Drop: ${String(error)}`, 2600);
|
|
}
|
|
};
|
|
|
|
const setBool = (key: keyof AppSettings, value: boolean): void => {
|
|
setSettingsDraft((prev: AppSettings) => ({ ...prev, [key]: value }));
|
|
};
|
|
|
|
const setText = (key: keyof AppSettings, value: string): void => {
|
|
setSettingsDraft((prev: AppSettings) => ({ ...prev, [key]: value }));
|
|
};
|
|
|
|
const setNum = (key: keyof AppSettings, value: number): void => {
|
|
setSettingsDraft((prev: AppSettings) => ({ ...prev, [key]: value }));
|
|
};
|
|
|
|
const performQuickAction = async (action: () => Promise<unknown>): Promise<void> => {
|
|
try {
|
|
await action();
|
|
} catch (error) {
|
|
showToast(`Fehler: ${String(error)}`, 2600);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="app-shell">
|
|
<header className="top-header">
|
|
<div className="title-block">
|
|
<h1>Debrid Download Manager</h1>
|
|
<span>Multi-Provider Workflow</span>
|
|
</div>
|
|
<div className="metrics">
|
|
<div>{snapshot.speedText}</div>
|
|
<div>{snapshot.etaText}</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section className="control-strip">
|
|
<div className="buttons">
|
|
<button
|
|
className="btn accent"
|
|
disabled={!snapshot.canStart}
|
|
onClick={async () => {
|
|
await performQuickAction(async () => {
|
|
await window.rd.updateSettings(settingsDraft);
|
|
await window.rd.start();
|
|
});
|
|
}}
|
|
>Start</button>
|
|
<button className="btn" disabled={!snapshot.canPause} onClick={() => { void performQuickAction(() => window.rd.togglePause()); }}>
|
|
{snapshot.session.paused ? "Resume" : "Pause"}
|
|
</button>
|
|
<button className="btn" disabled={!snapshot.canStop} onClick={() => { void performQuickAction(() => window.rd.stop()); }}>Stop</button>
|
|
<button className="btn" onClick={() => { void performQuickAction(() => window.rd.clearAll()); }}>Alles leeren</button>
|
|
</div>
|
|
<div className="speed-config">
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={settingsDraft.speedLimitEnabled}
|
|
onChange={(event) => setBool("speedLimitEnabled", event.target.checked)}
|
|
/>
|
|
Speed-Limit
|
|
</label>
|
|
<input
|
|
type="number"
|
|
min={0}
|
|
max={500000}
|
|
value={settingsDraft.speedLimitKbps}
|
|
onChange={(event) => setNum("speedLimitKbps", Number(event.target.value) || 0)}
|
|
/>
|
|
<span>KB/s</span>
|
|
<select value={settingsDraft.speedLimitMode} onChange={(event) => setText("speedLimitMode", event.target.value)}>
|
|
<option value="global">global</option>
|
|
<option value="per_download">per_download</option>
|
|
</select>
|
|
</div>
|
|
</section>
|
|
|
|
<nav className="tabs">
|
|
<button className={tab === "collector" ? "tab active" : "tab"} onClick={() => setTab("collector")}>Linksammler</button>
|
|
<button className={tab === "downloads" ? "tab active" : "tab"} onClick={() => setTab("downloads")}>Downloads</button>
|
|
<button className={tab === "settings" ? "tab active" : "tab"} onClick={() => setTab("settings")}>Settings</button>
|
|
</nav>
|
|
|
|
<main className="tab-content">
|
|
{tab === "collector" && (
|
|
<section className="grid-two">
|
|
<article className="card wide">
|
|
<h3>Linksammler</h3>
|
|
<div className="link-actions">
|
|
<button className="btn" onClick={onImportDlc}>DLC import</button>
|
|
<button className="btn accent" onClick={onAddLinks}>Zur Queue hinzufügen</button>
|
|
</div>
|
|
<textarea
|
|
value={linksRaw}
|
|
onChange={(event) => setLinksRaw(event.target.value)}
|
|
onDragOver={(event) => event.preventDefault()}
|
|
onDrop={onDrop}
|
|
placeholder="# package: Release-Name\nhttps://...\nhttps://..."
|
|
/>
|
|
<p className="hint">.dlc einfach auf das Feld ziehen oder per Button importieren.</p>
|
|
</article>
|
|
</section>
|
|
)}
|
|
|
|
{tab === "downloads" && (
|
|
<section className="downloads-view">
|
|
{packages.length === 0 && <div className="empty">Noch keine Pakete in der Queue.</div>}
|
|
{packages.map((pkg) => (
|
|
<PackageCard
|
|
key={pkg.id}
|
|
pkg={pkg}
|
|
items={pkg.itemIds.map((id) => snapshot.session.items[id]).filter(Boolean)}
|
|
onCancel={() => { void performQuickAction(() => window.rd.cancelPackage(pkg.id)); }}
|
|
/>
|
|
))}
|
|
</section>
|
|
)}
|
|
|
|
{tab === "settings" && (
|
|
<section className="settings-shell">
|
|
<article className="card settings-toolbar">
|
|
<div className="settings-toolbar-copy">
|
|
<h3>Einstellungen</h3>
|
|
<span>Kompakt, schnell auffindbar und direkt speicherbar.</span>
|
|
</div>
|
|
<div className="settings-toolbar-actions">
|
|
<button className="btn" onClick={onCheckUpdates}>Updates prüfen</button>
|
|
<button className="btn accent" onClick={onSaveSettings}>Settings speichern</button>
|
|
</div>
|
|
</article>
|
|
|
|
<section className="settings-grid">
|
|
<article className="card settings-card">
|
|
<h3>Provider & Zugang</h3>
|
|
<label>Real-Debrid API Token</label>
|
|
<input type="password" value={settingsDraft.token} onChange={(event) => setText("token", event.target.value)} />
|
|
<label>Mega-Debrid Login</label>
|
|
<input value={settingsDraft.megaLogin} onChange={(event) => setText("megaLogin", event.target.value)} />
|
|
<label>Mega-Debrid Passwort</label>
|
|
<input type="password" value={settingsDraft.megaPassword} onChange={(event) => setText("megaPassword", event.target.value)} />
|
|
<label>BestDebrid API Token</label>
|
|
<input type="password" value={settingsDraft.bestToken} onChange={(event) => setText("bestToken", event.target.value)} />
|
|
<label>AllDebrid API Key</label>
|
|
<input type="password" value={settingsDraft.allDebridToken} onChange={(event) => setText("allDebridToken", event.target.value)} />
|
|
|
|
<div className="field-grid three">
|
|
<div>
|
|
<label>Primär</label>
|
|
<select value={settingsDraft.providerPrimary} onChange={(event) => setText("providerPrimary", event.target.value)}>
|
|
{Object.entries(providerLabels).map(([key, label]) => (
|
|
<option key={key} value={key}>{label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label>Sekundär</label>
|
|
<select value={settingsDraft.providerSecondary} onChange={(event) => setText("providerSecondary", event.target.value)}>
|
|
{fallbackProviderOptions.map((option) => (
|
|
<option key={option.value} value={option.value}>{option.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label>Tertiär</label>
|
|
<select value={settingsDraft.providerTertiary} onChange={(event) => setText("providerTertiary", event.target.value)}>
|
|
{fallbackProviderOptions.map((option) => (
|
|
<option key={option.value} value={option.value}>{option.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<label className="toggle-line"><input type="checkbox" checked={settingsDraft.autoProviderFallback} onChange={(event) => setBool("autoProviderFallback", event.target.checked)} /> Bei Fehler/Fair-Use automatisch zum nächsten Provider wechseln</label>
|
|
<label className="toggle-line"><input type="checkbox" checked={settingsDraft.rememberToken} onChange={(event) => setBool("rememberToken", event.target.checked)} /> Zugangsdaten lokal speichern</label>
|
|
</article>
|
|
|
|
<article className="card settings-card">
|
|
<h3>Pfade & Paketierung</h3>
|
|
<label>Download-Ordner</label>
|
|
<div className="input-row">
|
|
<input value={settingsDraft.outputDir} onChange={(event) => setText("outputDir", event.target.value)} />
|
|
<button
|
|
className="btn"
|
|
onClick={() => {
|
|
void performQuickAction(async () => {
|
|
const selected = await window.rd.pickFolder();
|
|
if (selected) {
|
|
setText("outputDir", selected);
|
|
}
|
|
});
|
|
}}
|
|
>Wählen</button>
|
|
</div>
|
|
<label>Paketname (optional)</label>
|
|
<input value={settingsDraft.packageName} onChange={(event) => setText("packageName", event.target.value)} />
|
|
<label>Entpacken nach</label>
|
|
<div className="input-row">
|
|
<input value={settingsDraft.extractDir} onChange={(event) => setText("extractDir", event.target.value)} />
|
|
<button
|
|
className="btn"
|
|
onClick={() => {
|
|
void performQuickAction(async () => {
|
|
const selected = await window.rd.pickFolder();
|
|
if (selected) {
|
|
setText("extractDir", selected);
|
|
}
|
|
});
|
|
}}
|
|
>Wählen</button>
|
|
</div>
|
|
<label className="toggle-line"><input type="checkbox" checked={settingsDraft.autoExtract} onChange={(event) => setBool("autoExtract", event.target.checked)} /> Auto-Extract</label>
|
|
<label className="toggle-line"><input type="checkbox" checked={settingsDraft.hybridExtract} onChange={(event) => setBool("hybridExtract", event.target.checked)} /> Hybrid-Extract</label>
|
|
</article>
|
|
|
|
<article className="card settings-card">
|
|
<h3>Queue, Limits & Reconnect</h3>
|
|
<div className="field-grid two">
|
|
<div>
|
|
<label>Max. Downloads</label>
|
|
<input type="number" min={1} max={50} value={settingsDraft.maxParallel} onChange={(event) => setNum("maxParallel", Number(event.target.value) || 1)} />
|
|
</div>
|
|
<div>
|
|
<label>Reconnect-Wartezeit (Sek.)</label>
|
|
<input type="number" min={10} max={600} value={settingsDraft.reconnectWaitSeconds} onChange={(event) => setNum("reconnectWaitSeconds", Number(event.target.value) || 45)} />
|
|
</div>
|
|
</div>
|
|
<div className="field-grid two">
|
|
<div>
|
|
<label>Speed-Limit (KB/s)</label>
|
|
<input type="number" min={0} max={500000} value={settingsDraft.speedLimitKbps} onChange={(event) => setNum("speedLimitKbps", Number(event.target.value) || 0)} />
|
|
</div>
|
|
<div>
|
|
<label>Speed-Modus</label>
|
|
<select value={settingsDraft.speedLimitMode} onChange={(event) => setText("speedLimitMode", event.target.value)}>
|
|
<option value="global">global</option>
|
|
<option value="per_download">per_download</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<label className="toggle-line"><input type="checkbox" checked={settingsDraft.speedLimitEnabled} onChange={(event) => setBool("speedLimitEnabled", event.target.checked)} /> Speed-Limit aktivieren</label>
|
|
<label className="toggle-line"><input type="checkbox" checked={settingsDraft.autoReconnect} onChange={(event) => setBool("autoReconnect", event.target.checked)} /> Automatischer Reconnect</label>
|
|
<label className="toggle-line"><input type="checkbox" checked={settingsDraft.autoResumeOnStart} onChange={(event) => setBool("autoResumeOnStart", event.target.checked)} /> Auto-Resume beim Start</label>
|
|
</article>
|
|
|
|
<article className="card settings-card">
|
|
<h3>Integrität, Cleanup & Updates</h3>
|
|
<label className="toggle-line"><input type="checkbox" checked={settingsDraft.enableIntegrityCheck} onChange={(event) => setBool("enableIntegrityCheck", event.target.checked)} /> SFV/CRC/MD5/SHA1 prüfen</label>
|
|
<label className="toggle-line"><input type="checkbox" checked={settingsDraft.removeLinkFilesAfterExtract} onChange={(event) => setBool("removeLinkFilesAfterExtract", event.target.checked)} /> Link-Dateien nach Entpacken entfernen</label>
|
|
<label className="toggle-line"><input type="checkbox" checked={settingsDraft.removeSamplesAfterExtract} onChange={(event) => setBool("removeSamplesAfterExtract", event.target.checked)} /> Samples nach Entpacken entfernen</label>
|
|
<label>Fertiggestellte Downloads entfernen</label>
|
|
<select value={settingsDraft.completedCleanupPolicy} onChange={(event) => setText("completedCleanupPolicy", event.target.value)}>
|
|
{Object.entries(cleanupLabels).map(([key, label]) => (
|
|
<option key={key} value={key}>{label}</option>
|
|
))}
|
|
</select>
|
|
<div className="field-grid two">
|
|
<div>
|
|
<label>Cleanup nach Entpacken</label>
|
|
<select value={settingsDraft.cleanupMode} onChange={(event) => setText("cleanupMode", event.target.value)}>
|
|
<option value="none">keine Archive löschen</option>
|
|
<option value="trash">Archive in Papierkorb</option>
|
|
<option value="delete">Archive löschen</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label>Konfliktmodus</label>
|
|
<select value={settingsDraft.extractConflictMode} onChange={(event) => setText("extractConflictMode", event.target.value)}>
|
|
<option value="overwrite">überschreiben</option>
|
|
<option value="skip">überspringen</option>
|
|
<option value="rename">umbenennen</option>
|
|
<option value="ask">nachfragen</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<label>GitHub Repo</label>
|
|
<input value={settingsDraft.updateRepo} onChange={(event) => setText("updateRepo", event.target.value)} />
|
|
<label className="toggle-line"><input type="checkbox" checked={settingsDraft.autoUpdateCheck} onChange={(event) => setBool("autoUpdateCheck", event.target.checked)} /> Beim Start auf Updates prüfen</label>
|
|
</article>
|
|
</section>
|
|
</section>
|
|
)}
|
|
</main>
|
|
|
|
{statusToast && <div className="toast">{statusToast}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PackageCard({ pkg, items, onCancel }: { pkg: PackageEntry; items: DownloadItem[]; onCancel: () => void }): ReactElement {
|
|
const done = items.filter((item) => item.status === "completed").length;
|
|
const failed = items.filter((item) => item.status === "failed").length;
|
|
const cancelled = items.filter((item) => item.status === "cancelled").length;
|
|
const total = Math.max(1, items.length);
|
|
const progress = Math.floor((done / total) * 100);
|
|
|
|
return (
|
|
<article className="package-card">
|
|
<header>
|
|
<div>
|
|
<h4>{pkg.name}</h4>
|
|
<span>{done}/{total} fertig · {failed} Fehler · {cancelled} abgebrochen</span>
|
|
</div>
|
|
<button className="btn danger" onClick={onCancel}>Paket abbrechen</button>
|
|
</header>
|
|
<div className="progress">
|
|
<div style={{ width: `${progress}%` }} />
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th className="col-file">Datei</th>
|
|
<th className="col-provider">Provider</th>
|
|
<th className="col-status">Status</th>
|
|
<th className="col-progress">Fortschritt</th>
|
|
<th className="col-speed">Speed</th>
|
|
<th className="col-retries">Retries</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{items.map((item) => (
|
|
<tr key={item.id}>
|
|
<td className="col-file" title={item.fileName}>{item.fileName}</td>
|
|
<td className="col-provider">{item.provider ? providerLabels[item.provider] : "-"}</td>
|
|
<td className="col-status" title={item.fullStatus}>{item.fullStatus}</td>
|
|
<td className="col-progress num">{item.progressPercent}%</td>
|
|
<td className="col-speed num">{formatSpeedMbps(item.speedBps)}</td>
|
|
<td className="col-retries num">{item.retries}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</article>
|
|
);
|
|
}
|