diff --git a/package.json b/package.json
index 55feef4..a07f44b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "real-debrid-downloader",
- "version": "1.5.29",
+ "version": "1.5.30",
"description": "Real-Debrid Downloader Desktop (Electron + React + TypeScript)",
"main": "build/main/main/main.js",
"author": "Sucukdeluxe",
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index f221552..4b077a8 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -2077,11 +2077,10 @@ export function App(): ReactElement {
{(["name", "size", "hoster"] as PkgSortColumn[]).flatMap((col) => {
- const labels: Record
= { name: "Name", size: "Größe", hoster: "Hoster" };
+ const labels: Record = { name: "Name", size: "Geladen / Größe", hoster: "Hoster" };
const isActive = downloadsSortColumn === col;
const before: React.ReactNode[] = [];
if (col === "size") before.push(Fortschritt);
- if (col === "hoster") before.push(Geladen);
return [
...before,
{entry.name}
{entry.status === "completed" ? "100%" : "-"}
- {humanSize(entry.totalBytes)}
- {humanSize(entry.downloadedBytes)}
+ {(() => {
+ const pct = entry.totalBytes > 0 ? Math.min(100, Math.round((entry.downloadedBytes / entry.totalBytes) * 100)) : 0;
+ return entry.totalBytes > 0 ? (
+
+
+ {humanSize(entry.downloadedBytes)} / {humanSize(entry.totalBytes)}
+
+ ) : "-";
+ })()}
{entry.provider ? providerLabels[entry.provider] : "-"}
{entry.status === "completed" ? "Abgeschlossen" : "Gelöscht"}
-
@@ -2806,8 +2812,17 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
{dlProgress}%
- {humanSize(items.reduce((sum, item) => sum + (item.totalBytes || item.downloadedBytes || 0), 0))}
- {humanSize(items.reduce((sum, item) => sum + (item.downloadedBytes || 0), 0))}
+ {(() => {
+ 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;
+ return totalBytes > 0 ? (
+
+
+ {humanSize(dlBytes)} / {humanSize(totalBytes)}
+
+ ) : "-";
+ })()}
{
const hosters = [...new Set(items.map((item) => formatHoster(item)).filter((h) => h !== "-"))];
return hosters.join(", ");
@@ -2837,8 +2852,17 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
) : "-"}
- {(item.totalBytes || item.downloadedBytes) ? humanSize(item.totalBytes || item.downloadedBytes || 0) : "-"}
- {item.downloadedBytes > 0 ? humanSize(item.downloadedBytes) : "-"}
+ {(() => {
+ 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;
+ return total > 0 ? (
+
+
+ {humanSize(dl)} / {humanSize(total)}
+
+ ) : "-";
+ })()}
{formatHoster(item)}
{item.fullStatus}
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 9f2023c..c7f6b5d 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -577,7 +577,7 @@ body,
.pkg-column-header {
display: grid;
- grid-template-columns: 1fr 70px 90px 90px 220px 180px 100px;
+ grid-template-columns: 1fr 70px 160px 220px 180px 100px;
gap: 8px;
padding: 5px 12px;
background: var(--card);
@@ -603,7 +603,7 @@ body,
.pkg-columns {
display: grid;
- grid-template-columns: 1fr 70px 90px 90px 220px 180px 100px;
+ grid-template-columns: 1fr 70px 160px 220px 180px 100px;
gap: 8px;
align-items: center;
min-width: 0;
@@ -624,7 +624,6 @@ body,
}
.pkg-columns .pkg-col-progress,
-.pkg-columns .pkg-col-downloaded,
.pkg-columns .pkg-col-size,
.pkg-columns .pkg-col-hoster,
.pkg-columns .pkg-col-status,
@@ -636,11 +635,55 @@ body,
white-space: nowrap;
}
-.pkg-col-progress,
-.pkg-col-downloaded {
+.pkg-col-progress {
font-variant-numeric: tabular-nums;
}
+.progress-size {
+ display: block;
+ position: relative;
+ width: 100%;
+ height: 18px;
+ background: var(--progress-track);
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.progress-size-bar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ background: linear-gradient(90deg, #3bc9ff, #22d3ee);
+ border-radius: 4px;
+ transition: width 0.15s ease;
+}
+
+.progress-size-text {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 10px;
+ font-weight: 600;
+ font-variant-numeric: tabular-nums;
+ color: var(--text);
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+ white-space: nowrap;
+}
+
+.progress-size-small {
+ height: 14px;
+}
+
+.progress-size-small .progress-size-text {
+ font-size: 9px;
+}
+
.progress-inline {
display: block;
position: relative;
@@ -1189,7 +1232,7 @@ td {
.item-row {
display: grid;
- grid-template-columns: 1fr 70px 90px 90px 220px 180px 100px;
+ grid-template-columns: 1fr 70px 160px 220px 180px 100px;
gap: 8px;
align-items: center;
margin: 0 -12px;
@@ -1649,7 +1692,6 @@ td {
}
.pkg-column-header .pkg-col-progress,
- .pkg-column-header .pkg-col-downloaded,
.pkg-column-header .pkg-col-size,
.pkg-column-header .pkg-col-hoster,
.pkg-column-header .pkg-col-status,
@@ -1658,7 +1700,6 @@ td {
}
.pkg-columns .pkg-col-progress,
- .pkg-columns .pkg-col-downloaded,
.pkg-columns .pkg-col-size,
.pkg-columns .pkg-col-hoster,
.pkg-columns .pkg-col-status,