diff --git a/src/renderer/pages/player-page.js b/src/renderer/pages/player-page.js index 774f5c0d..0014558c 100644 --- a/src/renderer/pages/player-page.js +++ b/src/renderer/pages/player-page.js @@ -427,22 +427,77 @@ function renderCastScreen (state) { const isStarting = state.playing.location.endsWith('-pending') const castName = state.playing.castName + const fileName = state.getPlayingFileSummary().name || '' let castStatus if (isCast && isStarting) castStatus = 'Connecting to ' + castName + '...' else if (isCast && !isStarting) castStatus = 'Connected to ' + castName else castStatus = '' + const prog = state.getPlayingTorrentSummary().progress || {} + // Show a nice title image, if possible const style = { backgroundImage: cssBackgroundImagePoster(state) } + function renderEta (total, downloaded) { + const missing = (total || 0) - (downloaded || 0) + const downloadSpeed = prog.downloadSpeed || 0 + if (downloadSpeed === 0 || missing === 0) return + + const rawEta = missing / downloadSpeed + const hours = Math.floor(rawEta / 3600) % 24 + const minutes = Math.floor(rawEta / 60) % 60 + const seconds = Math.floor(rawEta % 60) + + const hoursStr = hours ? hours + 'h' : '' + const minutesStr = (hours || minutes) ? minutes + 'm' : '' + const secondsStr = seconds + 's' + + return ({hoursStr} {minutesStr} {secondsStr} remaining) + } + + function renderDownloadProgress () { + if (!prog.files) return + + const fileProg = prog.files[state.playing.fileIndex] + const fileProgress = fileProg.numPiecesPresent / fileProg.numPieces + const fileLength = state.getPlayingFileSummary().length + const fileDownloaded = fileProgress * fileLength + + const progress = Math.round(100 * fileProgress) + const total = prettyBytes(fileLength) + const completed = prettyBytes(fileDownloaded) + + const downloadSpeed = prettyBytes(prog.downloadSpeed || 0) + const uploadSpeed = prettyBytes(prog.uploadSpeed || 0) + + let sizes + if (fileProgress < 1) { + sizes = | {completed} / {total} + } else { + sizes = | {completed} + } + + return ( +
+ {progress}% downloaded {sizes} +
+ ↓ {downloadSpeed}/s ↑ {uploadSpeed}/s | {prog.numPeers || 0} peer(s) +
+ {renderEta(fileLength, fileDownloaded)} +
+ ) + } + return (
{castIcon}
{castType}
{castStatus}
+
{fileName}
+ {renderDownloadProgress()}
) diff --git a/static/main.css b/static/main.css index 0565c0f0..93029aa3 100644 --- a/static/main.css +++ b/static/main.css @@ -558,6 +558,13 @@ body.drag .app::after { width: 100%; } +.player .name { + font-size: 20px; + font-weight: bold; + line-height: 1.5em; + margin-bottom: 6px; +} + /* * PLAYER CONTROLS */