From 64ff5ebfd581b586ea6a78fd53d702effe55be32 Mon Sep 17 00:00:00 2001 From: Cezar Carneiro Date: Mon, 31 Jul 2017 22:47:53 -0300 Subject: [PATCH 1/3] show percentage, size, speed and peers --- src/renderer/pages/player-page.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/renderer/pages/player-page.js b/src/renderer/pages/player-page.js index d561973b..4792c09a 100644 --- a/src/renderer/pages/player-page.js +++ b/src/renderer/pages/player-page.js @@ -314,6 +314,16 @@ function renderCastScreen (state) { 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) @@ -325,6 +335,14 @@ function renderCastScreen (state) { {castIcon}
{castType}
{castStatus}
+
+ {fileProgress}% downloaded + | {downloaded} / {total} +
+ ↓ {prettyBytes(prog.downloadSpeed || 0)}/s ↑ {prettyBytes(prog.uploadSpeed || 0)}/s +
+ {prog.numPeers} peer(s) +
) From 739e7a50f75df86a9376ca8747380c489c871c6c Mon Sep 17 00:00:00 2001 From: Cezar Carneiro Date: Wed, 2 Aug 2017 00:03:52 -0300 Subject: [PATCH 2/3] improve infos --- src/renderer/pages/player-page.js | 75 +++++++++++++++++++++++++------ static/main.css | 7 +++ 2 files changed, 68 insertions(+), 14 deletions(-) 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 */ From ab41d55e4b557005d43b9d86161b922411ad9fcf Mon Sep 17 00:00:00 2001 From: Cezar Carneiro Date: Wed, 2 Aug 2017 22:52:45 -0300 Subject: [PATCH 3/3] fix ETA and reorganize --- src/renderer/pages/player-page.js | 80 ++++++++++++++----------------- 1 file changed, 35 insertions(+), 45 deletions(-) diff --git a/src/renderer/pages/player-page.js b/src/renderer/pages/player-page.js index bdc8f5d8..e269178a 100644 --- a/src/renderer/pages/player-page.js +++ b/src/renderer/pages/player-page.js @@ -322,39 +322,8 @@ function renderCastScreen (state) { 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 + function renderEta (total, downloaded) { + const missing = (total || 0) - (downloaded || 0) const downloadSpeed = prog.downloadSpeed || 0 if (downloadSpeed === 0 || missing === 0) return @@ -363,17 +332,44 @@ function renderCastScreen (state) { 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) + return ({hoursStr} {minutesStr} {secondsStr} remaining) } - function renderNumberOfPeers () { - return ({prog.numPeers || 0} peer(s)) + 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 ( @@ -383,13 +379,7 @@ function renderCastScreen (state) {
{castType}
{castStatus}
{fileName}
-
- {renderDownloadProgress()} -
- {renderSpeed() } { renderEta()} -
- {renderNumberOfPeers()} -
+ {renderDownloadProgress()} )