Show Blender Foundation videos by default

* Finishes the saved torrents feature!
* Torrents load and save correctly. Poster is autogenerated only once.
* Torrents can be paused and restarted
* Download button indicates state:
 - White means paused
 - Pulsating green means downloading
 - Solid green means finished downloading, only seeding

renderer/views/torrent-list.js

@@ -7,7 +7,8 @@ var hx = hyperx(h)
 var prettyBytes = require('pretty-bytes')
 
 function TorrentList (state, dispatch) {
-  var list = state.client.torrents.map((torrent) => renderTorrent(torrent, dispatch))
+  var list = state.saved.torrents.map(
+    (torrentSummary) => renderTorrent(torrentSummary, state, dispatch))
   if (list.length === 0) list = emptyList()
   return hx`<div class='torrent-list'>${list}</div>`
 }
@@ -24,76 +25,93 @@ function emptyList () {
 // Renders a torrent in the torrent list
 // Includes name, download status, play button, background image
 // May be expanded for additional info, including the list of files inside
-function renderTorrent (torrent, dispatch) {
+function renderTorrent (torrentSummary, state, dispatch) {
+  // Get ephemeral data (like progress %) directly from the WebTorrent handle
+  var torrent = state.client.torrents.find((x) => x.infoHash === torrentSummary.infoHash)
+
   // Background image: show some nice visuals, like a frame from the movie, if possible
   var style = {}
-  if (torrent.posterURL) {
-    style['background-image'] = `linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%), url("${torrent.posterURL}")`
+  if (torrentSummary.posterURL) {
+    style['background-image'] = 'linear-gradient(to bottom, ' +
+      'rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%), ' +
+      `url("${torrentSummary.posterURL}")`
   }
 
   // Foreground: name of the torrent, basic info like size, play button,
   // cast buttons if available, and delete
   return hx`
     <div class='torrent' style=${style}>
-      ${renderTorrentMetadata(torrent)}
-      ${renderTorrentButtons(torrent)}
+      ${renderTorrentMetadata(torrent, torrentSummary)}
+      ${renderTorrentButtons(torrentSummary, dispatch)}
     </div>
   `
+}
 
-  function renderTorrentMetadata () {
+// Show name, download status, % complete
+function renderTorrentMetadata (torrent, torrentSummary) {
+  var name = torrentSummary.displayName || torrentSummary.name || 'Loading torrent...'
+  var elements = [hx`
+    <div class='name ellipsis'>${name}</div>
+  `]
+
+  // If a torrent is paused and we only get the torrentSummary
+  // If it's downloading/seeding then we have more information
+  if (torrent) {
     var progress = Math.floor(100 * torrent.progress)
     var downloaded = prettyBytes(torrent.downloaded)
     var total = prettyBytes(torrent.length || 0)
-
     if (downloaded !== total) downloaded += ` / ${total}`
 
-    return hx`
-      <div class='metadata'>
-        <div class='name ellipsis'>${torrent.name || 'Loading torrent...'}</div>
-        <div class='status ellipsis'>
-          ${getFilesLength()}
-          <span>${getPeers()}</span>
-          <span>↓ ${prettyBytes(torrent.downloadSpeed || 0)}/s</span>
-          <span>↑ ${prettyBytes(torrent.uploadSpeed || 0)}/s</span>
-        </div>
-        <div class='status2 ellipsis'>
-          <span class='progress'>${progress}%</span>
-          <span>${downloaded}</span>
-        </div>
+    elements.push(hx`
+      <div class='status ellipsis'>
+        ${getFilesLength()}
+        <span>${getPeers()}</span>
+        <span>↓ ${prettyBytes(torrent.downloadSpeed || 0)}/s</span>
+        <span>↑ ${prettyBytes(torrent.uploadSpeed || 0)}/s</span>
       </div>
-    `
-
-    function getPeers () {
-      var count = torrent.numPeers === 1 ? 'peer' : 'peers'
-      return `${torrent.numPeers} ${count}`
-    }
-
-    function getFilesLength () {
-      if (torrent.ready && torrent.files.length > 1) {
-        return hx`<span class='files'>${torrent.files.length} files</span>`
-      }
-    }
+    `)
+    elements.push(hx`
+      <div class='status2 ellipsis'>
+        <span class='progress'>${progress}%</span>
+        <span>${downloaded}</span>
+      </div>
+    `)
   }
 
-  function renderTorrentButtons () {
-    return hx`
-      <div class="buttons">
-        <i.btn.icon.download
-          class='${torrent.state}'
-          onclick=${() => dispatch('toggleTorrent', torrent)}>
-          file_download
-        </i>
-        <i.btn.icon.play
-          class='${!torrent.ready ? 'disabled' : ''}'
-          onclick=${() => dispatch('openPlayer', torrent)}>
-          play_arrow
-        </i>
-        <i
-          class='icon delete'
-          onclick=${() => dispatch('deleteTorrent', torrent)}>
-          close
-        </i>
-      </div>
-    `
+  return hx`<div class='metadata'>${elements}</div>`
+
+  function getPeers () {
+    var count = torrent.numPeers === 1 ? 'peer' : 'peers'
+    return `${torrent.numPeers} ${count}`
+  }
+
+  function getFilesLength () {
+    if (torrent.ready && torrent.files.length > 1) {
+      return hx`<span class='files'>${torrent.files.length} files</span>`
+    }
   }
 }
+
+// Download button toggles between torrenting (DL/seed) and paused
+// Play button starts streaming the torrent immediately, unpausing if needed
+function renderTorrentButtons (torrentSummary, dispatch) {
+  var infoHash = torrentSummary.infoHash
+  return hx`
+    <div class="buttons">
+      <i.btn.icon.download
+        class='${torrentSummary.status}'
+        onclick=${() => dispatch('toggleTorrent', infoHash)}>
+        file_download
+      </i>
+      <i.btn.icon.play
+        onclick=${() => dispatch('openPlayer', infoHash)}>
+        play_arrow
+      </i>
+      <i
+        class='icon delete'
+        onclick=${() => dispatch('deleteTorrent', infoHash)}>
+        close
+      </i>
+    </div>
+  `
+}