diff --git a/src/renderer/pages/torrent-list-page.js b/src/renderer/pages/torrent-list-page.js
index a3468b1c..81d871a3 100644
--- a/src/renderer/pages/torrent-list-page.js
+++ b/src/renderer/pages/torrent-list-page.js
@@ -88,25 +88,50 @@ module.exports = class TorrentList extends React.Component {
if (torrentSummary.error) {
elements.push(
+ {renderDownloadCheckbox()}
+ {renderTorrentStatus()}
{getErrorMessage(torrentSummary)}
)
} else if (torrentSummary.status !== 'paused' && prog) {
elements.push(
+ {renderDownloadCheckbox()}
+ {renderTorrentStatus()}
{renderProgressBar()}
{renderPercentProgress()}
{renderTotalProgress()}
{renderPeers()}
- {renderDownloadSpeed()}
- {renderUploadSpeed()}
+ {renderSpeeds()}
{renderEta()}
)
+ } else {
+ elements.push(
+
+ {renderDownloadCheckbox()}
+ {renderTorrentStatus()}
+
+ )
}
return ({elements}
)
+ function renderDownloadCheckbox () {
+ const infoHash = torrentSummary.infoHash
+ const isActive = ['downloading', 'seeding'].includes(torrentSummary.status)
+ return (
+
+ )
+ }
+
function renderProgressBar () {
const progress = Math.floor(100 * prog.progress)
return ()
@@ -133,14 +158,12 @@ module.exports = class TorrentList extends React.Component {
return ({prog.numPeers} {count})
}
- function renderDownloadSpeed () {
- if (prog.downloadSpeed === 0) return
- return (↓ {prettyBytes(prog.downloadSpeed)}/s)
- }
-
- function renderUploadSpeed () {
- if (prog.uploadSpeed === 0) return
- return (↑ {prettyBytes(prog.uploadSpeed)}/s)
+ function renderSpeeds () {
+ let str = ''
+ if (prog.downloadSpeed > 0) str += prettySpeed(prog.downloadSpeed) + ' ↓ '
+ if (prog.uploadSpeed > 0) str += prettySpeed(prog.uploadSpeed) + ' ↑ '
+ if (str === '') return
+ return ({str})
}
function renderEta () {
@@ -161,7 +184,11 @@ module.exports = class TorrentList extends React.Component {
const minutesStr = (hours || minutes) ? minutes + 'm' : ''
const secondsStr = seconds + 's'
- return (ETA: {hoursStr} {minutesStr} {secondsStr})
+ return ({hoursStr} {minutesStr} {secondsStr} remaining)
+ }
+
+ function renderTorrentStatus () {
+ return ({capitalize(torrentSummary.status)})
}
}
@@ -169,53 +196,28 @@ module.exports = class TorrentList extends React.Component {
// Play button starts streaming the torrent immediately, unpausing if needed
renderTorrentButtons (torrentSummary) {
const infoHash = torrentSummary.infoHash
- const isActive = ['downloading', 'seeding'].includes(torrentSummary.status)
- let playIcon, playTooltip, playClass
+ let playIcon, playTooltip
if (torrentSummary.playStatus === 'timeout') {
playIcon = 'warning'
playTooltip = 'Playback timed out. No seeds? No internet? Click to try again.'
} else {
- playIcon = 'play_arrow'
+ playIcon = 'play_circle_outline'
playTooltip = 'Start streaming'
}
- let downloadTooltip = uppercase(torrentSummary.status)
-
// Only show the play/dowload buttons for torrents that contain playable media
- let playButton, downloadCheckbox, positionElem
- if (!torrentSummary.error) {
- downloadCheckbox = (
-
+ let playButton
+ if (!torrentSummary.error && TorrentPlayer.isPlayableTorrentSummary(torrentSummary)) {
+ playButton = (
+
+ {playIcon}
+
)
-
- // Do we have a saved position? Show it using a radial progress bar on top
- // of the play button, unless already showing a spinner there:
- const willShowSpinner = torrentSummary.playStatus === 'requested'
- const mostRecentFile = torrentSummary.files &&
- torrentSummary.files[torrentSummary.mostRecentFileIndex]
- if (mostRecentFile && mostRecentFile.currentTime && !willShowSpinner) {
- const fraction = mostRecentFile.currentTime / mostRecentFile.duration
- positionElem = this.renderRadialProgressBar(fraction, 'radial-progress-large')
- playClass = 'resume-position'
- }
-
- if (TorrentPlayer.isPlayableTorrentSummary(torrentSummary)) {
- playButton = (
-
- {playIcon}
-
- )
- }
}
return (
@@ -228,7 +230,6 @@ module.exports = class TorrentList extends React.Component {
onClick={dispatcher('confirmDeleteTorrent', infoHash, false)}>
close
- {downloadCheckbox}
)
}
@@ -365,8 +366,12 @@ module.exports = class TorrentList extends React.Component {
}
}
+function stopPropagation (e) {
+ e.stopPropagation()
+}
+
// Takes "foo bar", returns "Foo bar"
-function uppercase (str) {
+function capitalize (str) {
return str.slice(0, 1).toUpperCase() + str.slice(1)
}
@@ -382,3 +387,8 @@ function getErrorMessage (torrentSummary) {
}
return 'Error'
}
+
+// Returns '1.9m', '205k', etc
+function prettySpeed (n) {
+ return prettyBytes(n).replace('B', '').toLowerCase()
+}
diff --git a/static/main.css b/static/main.css
index cb5bd108..1e5137e2 100644
--- a/static/main.css
+++ b/static/main.css
@@ -338,22 +338,18 @@ textarea,
}
.torrent:not(:last-child) {
- border-bottom: 1px solid rgb(20, 20, 20);
+ border-bottom: 1px solid #282828;
}
.torrent .metadata {
position: absolute;
- top: 25px;
+ top: 20px;
left: 15px;
right: 15px;
- width: calc(100% - 40px);
+ width: calc(100% - 30px);
text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
}
-.torrent:hover .metadata {
- width: calc(100% - 150px);
-}
-
.torrent .metadata span:not(:last-child)::after {
content: ' • ';
opacity: 0.7;
@@ -361,28 +357,34 @@ textarea,
padding-right: 4px;
}
+.torrent:hover .metadata {
+ width: calc(100% - 120px);
+}
+
.torrent .torrent-controls {
- position: absolute;
- top: 29px;
- right: 10px;
- align-items: center;
- display: block /* TODO: none */;
+ display: none;
}
.torrent:hover .torrent-controls {
display: block;
}
-.torrent .buttons {
- display: flex;
+.torrent .play {
+ position: absolute;
+ top: 23px;
+ right: 45px;
+ font-size: 55px;
}
-.torrent .buttons > * {
- margin-left: 6px; /* space buttons apart */
+.torrent .delete {
+ position: absolute;
+ top: 38px;
+ right: 12px;
}
-.torrent .buttons .play {
- font-size: 40px;
+.torrent .download {
+ vertical-align: -0.4em;
+ margin-left: -2px;
}
.torrent .buttons .radial-progress {
@@ -393,16 +395,19 @@ textarea,
font-size: 20px;
font-weight: bold;
line-height: 1.5em;
+ margin-bottom: 6px;
}
progress {
width: 60px;
margin-right: 8px;
-webkit-appearance: none;
+ opacity: 0.8;
}
progress::-webkit-progress-bar {
background-color: #888;
+ border-radius: 2px;
}
progress::-webkit-progress-value {