Administrator/real-debrid-downloader
1
0
Fork 0
Code Issues Pull Requests Actions 132 Packages Projects Releases 243 Wiki Activity

Split progress bar: blue for download, green for extraction
Some checks are pending
Build and Release / build (push) Waiting to run
Details

Browse Source 
Left half (blue) shows download progress, right half (green) shows
extraction progress. When no extraction is active, full bar is blue.
Full bar = 50% blue (all downloaded) + 50% green (all extracted).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sucukdeluxe 2026-03-02 12:57:11 +01:00
parent 45b0d71dd0
commit 10b4f18d33
3 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "real-debrid-downloader", "name": "real-debrid-downloader",
"version": "1.4.85", "version": "1.4.86",
"description": "Real-Debrid Downloader Desktop (Electron + React + TypeScript)", "description": "Real-Debrid Downloader Desktop (Electron + React + TypeScript)",
"main": "build/main/main/main.js", "main": "build/main/main/main.js",
"author": "Sucukdeluxe", "author": "Sucukdeluxe",

10
src/renderer/App.tsx
View File

@ -2004,8 +2004,11 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
const done = items.filter((item) => item.status === "completed").length; const done = items.filter((item) => item.status === "completed").length;
const failed = items.filter((item) => item.status === "failed").length; const failed = items.filter((item) => item.status === "failed").length;
const cancelled = items.filter((item) => item.status === "cancelled").length; const cancelled = items.filter((item) => item.status === "cancelled").length;
const extracted = items.filter((item) => item.fullStatus?.startsWith("Entpackt")).length;
const extracting = items.some((item) => item.fullStatus?.startsWith("Entpack"));
const total = Math.max(1, items.length); const total = Math.max(1, items.length);
const progress = Math.floor((done / total) * 100); const dlProgress = Math.floor((done / total) * (extracting ? 50 : 100));
const exProgress = Math.floor((extracted / total) * 50);
const onKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => { const onKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
if (e.key === "Enter") { onFinishEdit(pkg.id, pkg.name, editingName); } if (e.key === "Enter") { onFinishEdit(pkg.id, pkg.name, editingName); }
@ -2043,7 +2046,10 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
<button className="btn danger" onClick={() => onCancel(pkg.id)}>Paket löschen</button> <button className="btn danger" onClick={() => onCancel(pkg.id)}>Paket löschen</button>
</div> </div>
</header> </header>
<div className="progress"><div style={{ width: `${progress}%` }} /></div> <div className="progress">
<div className="progress-dl" style={{ width: `${dlProgress}%` }} />
{extracting && <div className="progress-ex" style={{ width: `${exProgress}%` }} />}
</div>
{!collapsed && <table> {!collapsed && <table>
<thead><tr> <thead><tr>
<th className="col-file">Datei</th> <th className="col-file">Datei</th>

8
src/renderer/styles.css
View File

@ -560,13 +560,19 @@ body,
border-radius: 999px; border-radius: 999px;
background: var(--progress-track); background: var(--progress-track);
overflow: hidden; overflow: hidden;
display: flex;
} }
.progress > div { .progress-dl {
height: 100%; height: 100%;
background: linear-gradient(90deg, #3bc9ff, #22d3ee); background: linear-gradient(90deg, #3bc9ff, #22d3ee);
} }
.progress-ex {
height: 100%;
background: linear-gradient(90deg, #22c55e, #4ade80);
}
table { table {
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;