From 327c95d7547aabbdb0220ebcc9f69a3d6eb7e5fc Mon Sep 17 00:00:00 2001 From: DC Date: Sat, 21 May 2016 08:16:48 -0700 Subject: [PATCH] Show video position on circular progress bars --- renderer/index.css | 78 ++++++++++++++++++++++++++++++++++ renderer/index.js | 5 ++- renderer/views/torrent-list.js | 52 +++++++++++++++++++---- 3 files changed, 125 insertions(+), 10 deletions(-) diff --git a/renderer/index.css b/renderer/index.css index e7be5a6c..2a19fa6e 100644 --- a/renderer/index.css +++ b/renderer/index.css @@ -535,6 +535,11 @@ input { } } +.torrent .buttons .play.resume-position { + position: relative; + -webkit-clip-path: circle(18px at center); +} + .torrent .buttons .delete { opacity: 0.5; } @@ -543,6 +548,10 @@ input { opacity: 0.7; } +.torrent .buttons .radial-progress { + position: absolute; +} + .torrent .name { font-size: 18px; font-weight: bold; @@ -631,6 +640,12 @@ body.drag .app::after { padding-left: 16px; } +.torrent-details td.col-icon .radial-progress { + position: absolute; + margin-top: 4px; + margin-left: 0.5px; +} + .torrent-details td.col-name { width: auto; text-overflow: ellipsis; @@ -1015,3 +1030,66 @@ video::-webkit-media-text-track-container { .error-text { color: #c44; } + +/* + * RADIAL PROGRESS BAR + */ + +.radial-progress { + width: 16px; + height: 16px; + border-radius: 50%; + background-color: #888; +} + +.radial-progress .circle .mask, +.radial-progress .circle .fill { + width: 16px; + height: 16px; + position: absolute; + border-radius: 50%; + -webkit-backface-visibility: hidden; +} + +.radial-progress .circle .mask { + clip: rect(0px, 16px, 16px, 8px); +} + +.radial-progress .circle .fill { + clip: rect(0px, 8px, 16px, 0px); + background-color: white; +} + +.radial-progress .inset { + position: absolute; + width: 12px; + height: 12px; + margin: 2px 0 0 2px; + border-radius: 50%; + background-color: black; +} + +.radial-progress-large { + width: 40px; + height: 40px; +} + +.radial-progress-large .circle .mask, +.radial-progress-large .circle .fill { + width: 40px; + height: 40px; +} +.radial-progress-large .circle .mask { + clip: rect(0px, 40px, 40px, 20px); +} + +.radial-progress-large .circle .fill { + clip: rect(0px, 20px, 40px, 0px); + background-color: white; +} + +.radial-progress-large .inset { + width: 32px; + height: 32px; + margin: 4px 0 0 4px; +} diff --git a/renderer/index.js b/renderer/index.js index 9ff80530..5ae89b05 100644 --- a/renderer/index.js +++ b/renderer/index.js @@ -562,7 +562,7 @@ function saveState () { if (key === 'progress' || key === 'torrentKey') { continue // Don't save progress info or key for the webtorrent process } - if (key === 'playStatus' && x.playStatus !== 'unplayable') { + if (key === 'playStatus') { continue // Don't save whether a torrent is playing / pending } torrent[key] = x[key] @@ -878,6 +878,7 @@ function torrentMetadata (torrentKey, torrentInfo) { if (!torrentSummary.selections) { torrentSummary.selections = torrentSummary.files.map((x) => true) } + torrentSummary.defaultPlayFileIndex = pickFileToPlay(torrentInfo.files) update() // Save the .torrent file, if it hasn't been saved already @@ -991,7 +992,7 @@ function openPlayer (infoHash, index, cb) { var torrentSummary = getTorrentSummary(infoHash) // automatically choose which file in the torrent to play, if necessary - if (index === undefined) index = pickFileToPlay(torrentSummary.files) + if (index === undefined) index = torrentSummary.defaultPlayFileIndex if (index === undefined) return cb(new errors.UnplayableError()) // update UI to show pending playback diff --git a/renderer/views/torrent-list.js b/renderer/views/torrent-list.js index db9a8f7e..707da016 100644 --- a/renderer/views/torrent-list.js +++ b/renderer/views/torrent-list.js @@ -118,12 +118,7 @@ function TorrentList (state) { var infoHash = torrentSummary.infoHash var playIcon, playTooltip, playClass - if (torrentSummary.playStatus === 'unplayable') { - playIcon = 'play_arrow' - playClass = 'disabled' - playTooltip = 'Sorry, WebTorrent can\'t play any of the files in this torrent. ' + - 'View details and click on individual files to open them in another program.' - } else if (torrentSummary.playStatus === 'timeout') { + if (torrentSummary.playStatus === 'timeout') { playIcon = 'warning' playTooltip = 'Playback timed out. No seeds? No internet? Click to try again.' } else { @@ -143,6 +138,17 @@ function TorrentList (state) { downloadTooltip = 'Click to start torrenting.' } + // 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: + var positionElem + var willShowSpinner = torrentSummary.playStatus === 'requested' + var defaultFile = torrentSummary.files[torrentSummary.defaultPlayFileIndex] + if (defaultFile && defaultFile.currentTime && !willShowSpinner) { + var fraction = defaultFile.currentTime / defaultFile.duration + positionElem = renderRadialProgressBar(fraction, 'radial-progress-large') + playClass = 'resume-position' + } + // Only show the play button for torrents that contain playable media var playButton if (TorrentPlayer.isPlayableTorrent(torrentSummary)) { @@ -158,6 +164,7 @@ function TorrentList (state) { return hx`
+ ${positionElem} ${playButton} + ${positionElem} ${icon} @@ -253,3 +268,24 @@ function TorrentList (state) { ` } } + +function renderRadialProgressBar (fraction, cssClass) { + var rotation = 360 * fraction + var transformFill = {transform: 'rotate(' + (rotation / 2) + 'deg)'} + var transformFix = {transform: 'rotate(' + rotation + 'deg)'} + + return hx` +
+
+
+
+
+
+
+
+
+
+
+
+ ` +}