Custom video controls + button to delete torrents

Also: * Clean up the state object a bit * Simplify, factor out torrent-list.js
2016-03-03 08:40:59 -08:00
parent d72999df57
commit 28948e0dbc
4 changed files with 193 additions and 70 deletions
--- a/main/views/torrent-list.js
+++ b/main/views/torrent-list.js
@@ -4,64 +4,66 @@ var h = require('virtual-dom/h')
 var prettyBytes = require('pretty-bytes')

 function TorrentList (state, dispatch) {
-  return h('.torrent-list', getList())
+  var torrents = state.view.client
+    ? state.view.client.torrents
+    : []

-  function getList () {
-    return state.view.client.torrents.map(function (torrent) {
-      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 + '")'
-      }
-      return h('.torrent', {
-        style: style
-      }, [
-        h('.metadata', [
-          h('.name.ellipsis', torrent.name || 'Loading torrent...'),
-          h('.status', [
-            h('span.progress', Math.floor(100 * torrent.progress) + '%'),
-            (function () {
-              if (torrent.ready && torrent.files.length > 1) {
-                return h('span.files', torrent.files.length + ' files')
-              }
-            })(),
-            h('span', torrent.numPeers + ' ' + (torrent.numPeers === 1 ? 'peer' : 'peers')),
-            h('span', prettyBytes(torrent.downloadSpeed) + '/s'),
-            h('span', prettyBytes(torrent.uploadSpeed) + '/s')
-          ])
-        ]),
-        h('i.btn.icon.play', {
-          className: !torrent.ready ? 'disabled' : '',
-          onclick: openPlayer
-        }, 'play_arrow'),
-        (function () {
-          if (state.view.chromecast) {
-            return h('i.btn.icon.chromecast', {
-              className: !torrent.ready ? 'disabled' : '',
-              onclick: openChromecast
-            }, 'cast')
-          }
-        })(),
-        (function () {
-          if (state.view.devices.airplay) {
-            return h('i.btn.icon.airplay', {
-              className: !torrent.ready ? 'disabled' : '',
-              onclick: openAirplay
-            }, 'airplay')
-          }
-        })()
-      ])
-
-      function openPlayer () {
-        dispatch('openPlayer', torrent)
-      }
-
-      function openChromecast () {
-        dispatch('openChromecast', torrent)
-      }
-
-      function openAirplay () {
-        dispatch('openAirplay', torrent)
-      }
-    })
-  }
+  var list = torrents.map((torrent) => renderTorrent(state, dispatch, torrent))
+  return h('.torrent-list', list)
+}
+
+// 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 (state, dispatch, torrent) {
+  // 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 + '")'
+  }
+
+  // Foreground: name of the torrent, basic info like size, play button,
+  // cast buttons if available, and delete
+  var elements = [
+    renderTorrentMetadata(torrent),
+    h('i.icon.delete', {
+      onclick: () => dispatch('deleteTorrent', torrent)
+    }, 'close'),
+    h('i.btn.icon.play', {
+      className: !torrent.ready ? 'disabled' : '',
+      onclick: () => dispatch('openPlayer', torrent)
+    }, 'play_arrow')
+  ]
+  if (state.view.chromecast) {
+    elements.push(h('i.btn.icon.chromecast', {
+      className: !torrent.ready ? 'disabled' : '',
+      onclick: () => dispatch('openChromecast', torrent)
+    }, 'cast'))
+  }
+  if (state.view.devices.airplay) {
+    elements.push(h('i.btn.icon.airplay', {
+      className: !torrent.ready ? 'disabled' : '',
+      onclick: () => dispatch('openAirplay', torrent)
+    }, 'airplay'))
+  }
+
+  return h('.torrent', {style: style}, elements)
+}
+
+// Renders the torrent name and download progress
+function renderTorrentMetadata (torrent) {
+  return h('.metadata', [
+    h('.name.ellipsis', torrent.name || 'Loading torrent...'),
+    h('.status', [
+      h('span.progress', Math.floor(100 * torrent.progress) + '%'),
+      (function () {
+        if (torrent.ready && torrent.files.length > 1) {
+          return h('span.files', torrent.files.length + ' files')
+        }
+      })(),
+      h('span', torrent.numPeers + ' ' + (torrent.numPeers === 1 ? 'peer' : 'peers')),
+      h('span', prettyBytes(torrent.downloadSpeed) + '/s'),
+      h('span', prettyBytes(torrent.uploadSpeed) + '/s')
+    ])
+  ])
 }