Merge pull request #20 from feross/metadata

improve torrent metadata display

renderer/index.css

@@ -266,7 +266,7 @@ body.drag::before {
   bottom: 20px;
 }
 
-.torrent .status :not(:last-child)::after {
+.torrent span:not(:last-child)::after {
   content: ' — ';
 }
 

renderer/index.js

@@ -72,7 +72,7 @@ function init () {
   dragDrop('body', onFiles)
 
   chromecasts.on('update', function (player) {
-    state.view.chromecast = player
+    state.view.devices.chromecast = player
     update()
   })
 
@@ -285,8 +285,8 @@ function deleteTorrent (torrent) {
 
 function openChromecast (torrent) {
   startServer(torrent, function () {
-    state.view.chromecast.play(state.server.networkURL, { title: 'WebTorrent — ' + torrent.name })
+    state.view.devices.chromecast.play(state.server.networkURL, { title: 'WebTorrent — ' + torrent.name })
-    state.view.chromecast.on('error', function (err) {
+    state.view.devices.chromecast.on('error', function (err) {
       err.message = 'Chromecast: ' + err.message
       onError(err)
     })

renderer/views/torrent-list.js

@@ -49,16 +49,28 @@ function renderTorrent (state, dispatch, torrent) {
 
 // Renders the torrent name and download progress
 function renderTorrentMetadata (torrent) {
+  var progressPercent = 0
+  var progressBytes = 0
+
+  if (torrent.progress) {
+    progressPercent = Math.floor(100 * torrent.progress)
+  }
+
+  if (torrent.length && torrent.progress) {
+    progressBytes = torrent.length * torrent.progress
+  }
+
   return hx`
     <div class="metadata">
       <div class="name ellipsis">${torrent.name || 'Loading torrent...'}</div>
       <div class="status">
-        <span class="progress">${Math.floor(100 * torrent.progress)}%</span>
+        <span class="progress">${progressPercent}%</span>
+        <span>${prettyBytes(progressBytes)} / ${prettyBytes(torrent.length || 0)}</span>
       </div>
       ${getFilesLength()}
       <span>${getPeers()}</span>
-      <span>${prettyBytes(torrent.downloadSpeed)}/s</span>
+      <span>↓ ${prettyBytes(torrent.downloadSpeed || 0)}/s</span>
-      <span>${prettyBytes(torrent.uploadSpeed)}/s</span>
+      <span>↑ ${prettyBytes(torrent.uploadSpeed || 0)}/s</span>
     </div>
   `