feat: show active download peer count
Render the active peer count already carried by download progress events in the large download progress control. The peer chip appears between speed and ETA, uses singular/plural copy, and hides after the ETA when the detail modal gets very narrow. This keeps the UI aligned with the design reference without changing backend state ownership or download progress plumbing. Test Plan: - git diff --check - git diff --cached --check - just frontend-test - just build
This commit is contained in:
@@ -32,6 +32,7 @@ const progressStats = (game: Game) => {
|
|||||||
total,
|
total,
|
||||||
speed,
|
speed,
|
||||||
eta: etaSeconds,
|
eta: etaSeconds,
|
||||||
|
activePeerCount: progress?.active_peer_count ?? 0,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -52,6 +53,8 @@ export const DownloadProgress = ({ game, size = 'md', full = false, onCancel }:
|
|||||||
};
|
};
|
||||||
|
|
||||||
if (size === 'lg') {
|
if (size === 'lg') {
|
||||||
|
const peerUnit = stats.activePeerCount === 1 ? 'peer' : 'peers';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={className}
|
className={className}
|
||||||
@@ -75,6 +78,20 @@ export const DownloadProgress = ({ game, size = 'md', full = false, onCancel }:
|
|||||||
</span>
|
</span>
|
||||||
<span className="dl-sep">·</span>
|
<span className="dl-sep">·</span>
|
||||||
<span className="dl-speed">{formatDownloadSpeed(stats.speed)}</span>
|
<span className="dl-speed">{formatDownloadSpeed(stats.speed)}</span>
|
||||||
|
{stats.activePeerCount > 0 && (
|
||||||
|
<>
|
||||||
|
<span className="dl-sep dl-sep-peers">·</span>
|
||||||
|
<span
|
||||||
|
className="dl-peers"
|
||||||
|
title={`Downloading from ${stats.activePeerCount} ${peerUnit} on the LAN`}
|
||||||
|
>
|
||||||
|
<Icon.users />
|
||||||
|
<span>
|
||||||
|
from <strong>{stats.activePeerCount}</strong> {peerUnit}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
<span className="dl-sep dl-sep-eta">·</span>
|
<span className="dl-sep dl-sep-eta">·</span>
|
||||||
<span className="dl-eta">{formatDownloadEta(stats.eta)} left</span>
|
<span className="dl-eta">{formatDownloadEta(stats.eta)} left</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1045,6 +1045,21 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
.dl-lg-secondary .dl-peers {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
color: var(--t-2);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.dl-lg-secondary .dl-peers strong {
|
||||||
|
color: var(--t-1);
|
||||||
|
font-weight: 600;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.dl-lg-secondary .dl-peers svg {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
.dl-lg-secondary .dl-eta {
|
.dl-lg-secondary .dl-eta {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -1060,6 +1075,12 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@container (max-width: 300px) {
|
||||||
|
.dl-lg-secondary .dl-peers,
|
||||||
|
.dl-lg-secondary .dl-sep-peers {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
.dl-lg-pct {
|
.dl-lg-pct {
|
||||||
grid-area: pct;
|
grid-area: pct;
|
||||||
color: var(--t-1);
|
color: var(--t-1);
|
||||||
|
|||||||
Reference in New Issue
Block a user