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

Dual-layer text on progress bars: dark text on bar, light text on track (JDownloader style)
Some checks are pending
Build and Release / build (push) Waiting to run
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sucukdeluxe 2026-03-02 23:21:21 +01:00
parent 578d050926
commit c07c0fbdf7
3 changed files with 54 additions and 12 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",
"version": "1.5.30",
"version": "1.5.31",
"description": "Real-Debrid Downloader Desktop (Electron + React + TypeScript)",
"main": "build/main/main/main.js",
"author": "Sucukdeluxe",

14
src/renderer/App.tsx
View File

@ -2180,10 +2180,12 @@ export function App(): ReactElement {
<span className="pkg-col pkg-col-progress">{entry.status === "completed" ? "100%" : "-"}</span>
<span className="pkg-col pkg-col-size">{(() => {
const pct = entry.totalBytes > 0 ? Math.min(100, Math.round((entry.downloadedBytes / entry.totalBytes) * 100)) : 0;
const label = `${humanSize(entry.downloadedBytes)} / ${humanSize(entry.totalBytes)}`;
return entry.totalBytes > 0 ? (
<span className="progress-size">
<span className="progress-size-bar" style={{ width: `${pct}%` }} />
<span className="progress-size-text">{humanSize(entry.downloadedBytes)} / {humanSize(entry.totalBytes)}</span>
<span className="progress-size-text">{label}</span>
<span className="progress-size-text-filled" style={{ width: `${pct}%` }}><span style={{ width: "160px", textAlign: "center", flexShrink: 0 }}>{label}</span></span>
</span>
) : "-";
})()}</span>
@ -2810,16 +2812,19 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
<span className="progress-inline">
<span className="progress-inline-bar" style={{ width: `${dlProgress}%` }} />
<span className="progress-inline-text">{dlProgress}%</span>
<span className="progress-inline-text-filled" style={{ width: `${dlProgress}%` }}><span style={{ width: "70px", textAlign: "center", flexShrink: 0 }}>{dlProgress}%</span></span>
</span>
</span>
<span className="pkg-col pkg-col-size">{(() => {
const totalBytes = items.reduce((sum, item) => sum + (item.totalBytes || item.downloadedBytes || 0), 0);
const dlBytes = items.reduce((sum, item) => sum + (item.downloadedBytes || 0), 0);
const pct = totalBytes > 0 ? Math.min(100, Math.round((dlBytes / totalBytes) * 100)) : 0;
const label = `${humanSize(dlBytes)} / ${humanSize(totalBytes)}`;
return totalBytes > 0 ? (
<span className="progress-size">
<span className="progress-size-bar" style={{ width: `${pct}%` }} />
<span className="progress-size-text">{humanSize(dlBytes)} / {humanSize(totalBytes)}</span>
<span className="progress-size-text">{label}</span>
<span className="progress-size-text-filled" style={{ width: `${pct}%` }}><span style={{ width: "160px", textAlign: "center", flexShrink: 0 }}>{label}</span></span>
</span>
) : "-";
})()}</span>
@ -2849,6 +2854,7 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
<span className="progress-inline progress-inline-small">
<span className="progress-inline-bar" style={{ width: `${item.progressPercent}%` }} />
<span className="progress-inline-text">{item.progressPercent}%</span>
<span className="progress-inline-text-filled" style={{ width: `${item.progressPercent}%` }}><span style={{ width: "70px", textAlign: "center", flexShrink: 0 }}>{item.progressPercent}%</span></span>
</span>
) : "-"}
</span>
@ -2856,10 +2862,12 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
const total = item.totalBytes || item.downloadedBytes || 0;
const dl = item.downloadedBytes || 0;
const pct = total > 0 ? Math.min(100, Math.round((dl / total) * 100)) : 0;
const label = `${humanSize(dl)} / ${humanSize(total)}`;
return total > 0 ? (
<span className="progress-size progress-size-small">
<span className="progress-size-bar" style={{ width: `${pct}%` }} />
<span className="progress-size-text">{humanSize(dl)} / {humanSize(total)}</span>
<span className="progress-size-text">{label}</span>
<span className="progress-size-text-filled" style={{ width: `${pct}%` }}><span style={{ width: "160px", textAlign: "center", flexShrink: 0 }}>{label}</span></span>
</span>
) : "-";
})()}</span>

50
src/renderer/styles.css
View File

@ -669,18 +669,36 @@ body,
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
color: var(--muted);
white-space: nowrap;
z-index: 1;
}
.progress-size-text-filled {
position: absolute;
top: 0;
left: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #0a0f1a;
white-space: nowrap;
z-index: 2;
overflow: hidden;
}
.progress-size-small {
height: 14px;
}
.progress-size-small .progress-size-text {
.progress-size-small .progress-size-text,
.progress-size-small .progress-size-text-filled {
font-size: 9px;
}
@ -714,16 +732,32 @@ body,
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
color: var(--text);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
font-weight: 700;
color: var(--muted);
z-index: 1;
}
.progress-inline-text-filled {
position: absolute;
top: 0;
left: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: #0a0f1a;
z-index: 2;
overflow: hidden;
}
.progress-inline-small {
height: 14px;
}
.progress-inline-small .progress-inline-text {
.progress-inline-small .progress-inline-text,
.progress-inline-small .progress-inline-text-filled {
font-size: 10px;
}