diff --git a/src/renderer/pages/player-page.js b/src/renderer/pages/player-page.js index 4792c09a..bdc8f5d8 100644 --- a/src/renderer/pages/player-page.js +++ b/src/renderer/pages/player-page.js @@ -309,39 +309,86 @@ 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 || {} - let fileProgress = 0 - if (prog.files) { - const file = prog.files[state.playing.fileIndex] - fileProgress = Math.floor(100 * file.numPiecesPresent / file.numPieces) - } - - const downloaded = prettyBytes(prog.downloaded) - const total = prettyBytes(prog.length || 0) // Show a nice title image, if possible const style = { backgroundImage: cssBackgroundImagePoster(state) } + 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 total = prettyBytes(fileLength) + const downloaded = prettyBytes(fileProgress * fileLength) + + let sizes + if (fileProgress < 1) { + sizes = | {downloaded} / {total} + } else { + sizes = | {downloaded} + } + + return ( + {Math.round(100 * fileProgress)}% downloaded {sizes} + ) + } + + function renderSpeed () { + const downloadSpeed = prettyBytes(prog.downloadSpeed || 0) + const uploadSpeed = prettyBytes(prog.uploadSpeed || 0) + + return (↓ {downloadSpeed}/s ↑ {uploadSpeed}/s) + } + + function renderEta () { + const downloaded = prog.downloaded || 0 + const total = prog.length || 0 + const missing = total - downloaded + 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) + + // Only display hours and minutes if they are greater than 0 but always + // display minutes if hours is being displayed + const hoursStr = hours ? hours + 'h' : '' + const minutesStr = (hours || minutes) ? minutes + 'm' : '' + const secondsStr = seconds + 's' + + return ( | {hoursStr} {minutesStr} {secondsStr} remaining) + } + + function renderNumberOfPeers () { + return ({prog.numPeers || 0} peer(s)) + } + return (
{castIcon}
{castType}
{castStatus}
+
{fileName}
- {fileProgress}% downloaded - | {downloaded} / {total} -
- ↓ {prettyBytes(prog.downloadSpeed || 0)}/s ↑ {prettyBytes(prog.uploadSpeed || 0)}/s -
- {prog.numPeers} peer(s) + {renderDownloadProgress()} +
+ {renderSpeed() } { renderEta()} +
+ {renderNumberOfPeers()}
diff --git a/static/main.css b/static/main.css index 1f1bd9be..a8cec9da 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 */