diff --git a/crates/lanspread-tauri-deno-ts/src/components/DownloadProgress.tsx b/crates/lanspread-tauri-deno-ts/src/components/DownloadProgress.tsx index d7f8f6a..5290a38 100644 --- a/crates/lanspread-tauri-deno-ts/src/components/DownloadProgress.tsx +++ b/crates/lanspread-tauri-deno-ts/src/components/DownloadProgress.tsx @@ -32,6 +32,7 @@ const progressStats = (game: Game) => { total, speed, eta: etaSeconds, + activePeerCount: progress?.active_peer_count ?? 0, }; }; @@ -52,6 +53,8 @@ export const DownloadProgress = ({ game, size = 'md', full = false, onCancel }: }; if (size === 'lg') { + const peerUnit = stats.activePeerCount === 1 ? 'peer' : 'peers'; + return (
· {formatDownloadSpeed(stats.speed)} + {stats.activePeerCount > 0 && ( + <> + · + + + + from {stats.activePeerCount} {peerUnit} + + + + )} · {formatDownloadEta(stats.eta)} left
diff --git a/crates/lanspread-tauri-deno-ts/src/styles/launcher.css b/crates/lanspread-tauri-deno-ts/src/styles/launcher.css index 6016b32..cb5f60a 100644 --- a/crates/lanspread-tauri-deno-ts/src/styles/launcher.css +++ b/crates/lanspread-tauri-deno-ts/src/styles/launcher.css @@ -1045,6 +1045,21 @@ font-weight: 600; 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 { min-width: 0; overflow: hidden; @@ -1060,6 +1075,12 @@ display: none; } } +@container (max-width: 300px) { + .dl-lg-secondary .dl-peers, + .dl-lg-secondary .dl-sep-peers { + display: none; + } +} .dl-lg-pct { grid-area: pct; color: var(--t-1);