separation of concerns

renderer/index.css

@@ -0,0 +1,318 @@
+/*
+ * BASIC STYLES
+ */
+
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  background: rgb(40, 40, 40);
+  color: #FFF;
+  cursor: default;
+  height: 100%;
+  font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
+  font-size: 14px;
+  line-height: 1.5em;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.app {
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
+  height: 100%;
+}
+
+/*
+ * MATERIAL ICONS
+ */
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(../vendor/MaterialIcons-Regular.woff2) format('woff2');
+}
+
+.icon {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/*
+ * UTILITY CLASSES
+ */
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.disabled {
+  opacity: 0.3;
+}
+
+/*
+ * BUTTONS
+ */
+
+a, i {
+  cursor: default;
+  -webkit-app-region: no-drag;
+}
+
+a:not(.disabled):hover, i:not(.disabled):hover {
+  -webkit-filter: brightness(1.3);
+}
+
+.btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  font-size: 22px;
+  transition: all 0.05s ease-out;
+  text-align: center;
+}
+
+/*
+ * HEADER
+ */
+
+.header {
+  border-bottom: 1px solid rgb(20, 20, 20);
+  height: 37px;
+  padding-top: 6px;
+  overflow: hidden;
+}
+
+.header .title {
+  opacity: 0.6;
+  position: absolute;
+  margin-top: 1px;
+  width: 100%;
+  text-align: center;
+  pointer-events: none;
+}
+
+.header .nav {
+  font-weight: bold;
+  margin-left: 78px;
+  margin-right: 7px;
+}
+
+.header .nav.left {
+  float: left;
+}
+
+.header .nav.right {
+  float: right;
+}
+
+.header .nav * {
+  opacity: 0.6;
+}
+
+.header .nav .disabled {
+  opacity: 0.1;
+}
+
+.header .nav *:not(.disabled):hover {
+  opacity: 1;
+}
+
+.header .nav .back, .header .nav .forward {
+  font-size: 30px;
+  margin-top: -3px;
+}
+
+/*
+ * CONTENT
+ */
+
+.content {
+  width: 100%;
+  height: calc(100% - 38px);
+  overflow: auto;
+}
+
+body.drag::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(255, 0, 0, 0.3);
+  border: 5px #f00 dashed;
+}
+
+/*
+ * PLAYER
+ */
+
+.player {
+  height: 100%;
+  background-color: #000;
+}
+
+.player video {
+  display: block;
+  width: 100%;
+}
+
+/*
+ * TORRENT LIST
+ */
+
+.torrent {
+  height: 120px;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.5);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 0 50%;
+  transition: all 0.05s ease-out;
+  position: relative;
+}
+
+.torrent:not(:last-child) {
+  border-bottom: 1px solid rgb(20, 20, 20);
+}
+
+.torrent:hover {
+  -webkit-filter: brightness(1.1);
+}
+
+.torrent .metadata {
+  float: left;
+  width: 100%;
+  text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
+}
+
+.torrent:hover .metadata {
+  width: calc(100% - 170px);
+}
+
+.torrent .btn, .torrent .delete {
+  float: right;
+  margin-top: 20px;
+  margin-left: 15px;
+  padding-top: 10px;
+  display: none;
+}
+
+.torrent .delete {
+  opacity: 0.5;
+}
+
+.torrent:hover .btn, .torrent:hover .delete {
+  display: block;
+}
+
+.torrent .play {
+  background-color: #F44336;
+}
+
+.torrent .chromecast {
+  background-color: #2196F3;
+}
+
+.torrent .airplay {
+  background-color: #212121;
+}
+
+.torrent .name {
+  font-size: 1.5em;
+  font-weight: bold;
+  line-height: 1.5em;
+}
+
+.torrent .status {
+  font-size: 1em;
+  line-height: 1.5em;
+  position: absolute;
+  bottom: 20px;
+}
+
+.torrent .status :not(:last-child)::after {
+  content: ' — ';
+}
+
+
+/*
+ * VIDEO CONTROLS
+ */
+.player-controls .bottom-bar {
+  position: fixed;
+  width: 100%;
+  height: 38px;
+  bottom: 0;
+  opacity: 0;
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+.player:hover .bottom-bar {
+ opacity: 1;
+}
+
+/* invisible click target for scrubbing */
+.player-controls .scrub-bar {
+  position: absolute;
+  width: 100%;
+  height: 23px; /* 3px .loading-bar plus 10px above and below */
+  top: -10px;
+  left: 0;
+  cursor: pointer;
+}
+
+.player-controls .loading-bar {
+  position: relative;
+  width: 100%;
+  height: 3px;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.player-controls .loading-bar-part {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background-color: #dd0000;
+}
+
+.player-controls .playback-cursor {
+  position: absolute;
+  top: -2px;
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+  border: 3px solid #bbbbbb;
+}
+
+.player-controls .play-pause {
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 5px auto;
+  cursor: pointer;
+}

renderer/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="index.css" charset="utf-8">
+  </head>
+  <body>
+    <script src='index.js'></script>
+  </body>
+</html>

renderer/index.js

@@ -0,0 +1,327 @@
+/* global URL, Blob */
+
+var airplay = require('airplay-js')
+var chromecasts = require('chromecasts')()
+var createTorrent = require('create-torrent')
+var dragDrop = require('drag-drop')
+var electron = require('electron')
+var networkAddress = require('network-address')
+var path = require('path')
+var throttle = require('throttleit')
+var torrentPoster = require('./lib/torrent-poster')
+var WebTorrent = require('webtorrent')
+
+var createElement = require('virtual-dom/create-element')
+var diff = require('virtual-dom/diff')
+var patch = require('virtual-dom/patch')
+
+var App = require('./views/app')
+
+var HEADER_HEIGHT = 38
+
+// Force use of webtorrent trackers on all torrents
+global.WEBTORRENT_ANNOUNCE = createTorrent.announceList
+  .map(function (arr) {
+    return arr[0]
+  })
+  .filter(function (url) {
+    return url.indexOf('wss://') === 0 || url.indexOf('ws://') === 0
+  })
+
+var state = global.state = {
+  server: null, /* local WebTorrent-to-HTTP server */
+  view: {
+    url: '/',
+    dock: {
+      badge: 0,
+      progress: 0
+    },
+    devices: {
+      airplay: null, /* airplay client. finds and manages AppleTVs */
+      chromecast: null /* chromecast client. finds and manages Chromecasts */
+    },
+    client: null, /* the WebTorrent client */
+    torrentPlaying: null, /* the torrent we're streaming. see client.torrents */
+    // history: [], /* track how we got to the current view. enables Back button */
+    // historyIndex: 0,
+    isFocused: true,
+    mainWindowBounds: null, /* x y width height */
+    title: 'WebTorrent' /* current window title */
+  },
+  video: {
+    isPaused: false,
+    currentTime: 0, /* seconds */
+    duration: 1 /* seconds */
+  }
+}
+
+var client, currentVDom, rootElement, updateThrottled
+
+function init () {
+  client = global.client = new WebTorrent()
+  client.on('warning', onWarning)
+  client.on('error', onError)
+  state.view.client = client
+
+  currentVDom = App(state, dispatch)
+  rootElement = createElement(currentVDom)
+  document.body.appendChild(rootElement)
+
+  updateThrottled = throttle(update, 1000)
+
+  dragDrop('body', onFiles)
+
+  chromecasts.on('update', function (player) {
+    state.view.chromecast = player
+    update()
+  })
+
+  airplay.createBrowser().on('deviceOn', function (player) {
+    state.view.devices.airplay = player
+  }).start()
+
+  document.addEventListener('paste', function () {
+    electron.ipcRenderer.send('addTorrentFromPaste')
+  })
+
+  window.addEventListener('focus', function () {
+    state.view.isFocused = true
+    if (state.view.dock.badge > 0) electron.ipcRenderer.send('setBadge', '')
+    state.view.dock.badge = 0
+  })
+
+  window.addEventListener('blur', function () {
+    state.view.isFocused = false
+  })
+}
+init()
+
+function update () {
+  var newVDom = App(state, dispatch)
+  var patches = diff(currentVDom, newVDom)
+  rootElement = patch(rootElement, patches)
+  currentVDom = newVDom
+
+  updateDockIcon()
+}
+
+setInterval(function () {
+  updateThrottled()
+}, 1000)
+
+function updateDockIcon () {
+  var progress = state.view.client.progress
+  var activeTorrentsExist = state.view.client.torrents.some(function (torrent) {
+    return torrent.progress !== 1
+  })
+  // Hide progress bar when client has no torrents, or progress is 100%
+  if (!activeTorrentsExist || progress === 1) {
+    progress = -1
+  }
+  if (progress !== state.view.dock.progress) {
+    state.view.dock.progress = progress
+    electron.ipcRenderer.send('setProgress', progress)
+  }
+}
+
+function dispatch (action, ...args) {
+  console.log('dispatch: %s %o', action, args)
+  if (action === 'addTorrent') {
+    addTorrent(args[0] /* torrentId */)
+  }
+  if (action === 'seed') {
+    seed(args[0] /* files */)
+  }
+  if (action === 'openPlayer') {
+    openPlayer(args[0] /* torrent */)
+  }
+  if (action === 'deleteTorrent') {
+    deleteTorrent(args[0] /* torrent */)
+  }
+  if (action === 'openChromecast') {
+    openChromecast(args[0] /* torrent */)
+  }
+  if (action === 'openAirplay') {
+    openAirplay(args[0] /* torrent */)
+  }
+  if (action === 'setDimensions') {
+    setDimensions(args[0] /* dimensions */)
+  }
+  if (action === 'back') {
+    if (state.view.url === '/player') {
+      restoreBounds()
+      closeServer()
+    }
+    state.view.url = '/'
+    update()
+  }
+  if (action === 'playPause') {
+    state.video.isPaused = !state.video.isPaused
+    update()
+  }
+  if (action === 'playbackJump') {
+    state.video.jumpToTime = args[0] /* seconds */
+    update()
+  }
+}
+
+electron.ipcRenderer.on('addTorrent', function (e, torrentId) {
+  addTorrent(torrentId)
+})
+
+electron.ipcRenderer.on('seed', function (e, files) {
+  seed(files)
+})
+
+function onFiles (files) {
+  // .torrent file = start downloading the torrent
+  files.filter(isTorrentFile).forEach(function (torrentFile) {
+    dispatch('addTorrent', torrentFile)
+  })
+
+  // everything else = seed these files
+  dispatch('seed', files.filter(isNotTorrentFile))
+}
+
+function isTorrentFile (file) {
+  var extname = path.extname(file.name).toLowerCase()
+  return extname === '.torrent'
+}
+
+function isNotTorrentFile (file) {
+  return !isTorrentFile(file)
+}
+
+function addTorrent (torrentId) {
+  var torrent = client.add(torrentId)
+  addTorrentEvents(torrent)
+}
+
+function seed (files) {
+  if (files.length === 0) return
+  var torrent = client.seed(files)
+  addTorrentEvents(torrent)
+}
+
+function addTorrentEvents (torrent) {
+  torrent.on('infoHash', update)
+  torrent.on('done', function () {
+    if (!state.view.isFocused) {
+      state.view.dock.badge += 1
+      electron.ipcRenderer.send('setBadge', state.view.dock.badge)
+    }
+    update()
+  })
+  torrent.on('download', updateThrottled)
+  torrent.on('upload', updateThrottled)
+  torrent.on('ready', function () {
+    torrentReady(torrent)
+  })
+  update()
+}
+
+function torrentReady (torrent) {
+  torrentPoster(torrent, function (err, buf) {
+    if (err) return onWarning(err)
+    torrent.posterURL = URL.createObjectURL(new Blob([ buf ], { type: 'image/png' }))
+    update()
+  })
+  update()
+}
+
+function startServer (torrent, cb) {
+  // use largest file
+  state.view.torrentPlaying = torrent.files.reduce(function (a, b) {
+    return a.length > b.length ? a : b
+  })
+  var index = torrent.files.indexOf(state.view.torrentPlaying)
+
+  var server = torrent.createServer()
+  server.listen(0, function () {
+    var port = server.address().port
+    var urlSuffix = ':' + port + '/' + index
+    state.server = {
+      server: server,
+      localURL: 'http://localhost' + urlSuffix,
+      networkURL: 'http://' + networkAddress() + urlSuffix
+    }
+    cb()
+  })
+}
+
+function closeServer () {
+  state.server.server.destroy()
+  state.server = null
+}
+
+function openPlayer (torrent) {
+  startServer(torrent, function () {
+    state.view.url = '/player'
+    update()
+  })
+}
+
+function deleteTorrent (torrent) {
+  torrent.destroy(update)
+}
+
+function openChromecast (torrent) {
+  startServer(torrent, function () {
+    state.view.chromecast.play(state.server.networkURL, { title: 'WebTorrent — ' + torrent.name })
+    state.view.chromecast.on('error', function (err) {
+      err.message = 'Chromecast: ' + err.message
+      onError(err)
+    })
+    update()
+  })
+}
+
+function openAirplay (torrent) {
+  startServer(torrent, function () {
+    state.view.devices.airplay.play(state.server.networkURL, 0, function () {})
+    // TODO: handle airplay errors
+    update()
+  })
+}
+
+function setDimensions (dimensions) {
+  state.view.mainWindowBounds = electron.remote.getCurrentWindow().getBounds()
+
+  // Limit window size to screen size
+  var workAreaSize = electron.remote.screen.getPrimaryDisplay().workAreaSize
+  var aspectRatio = dimensions.width / dimensions.height
+
+  var scaleFactor = Math.min(
+    Math.min(workAreaSize.width / dimensions.width, 1),
+    Math.min(workAreaSize.height / dimensions.height, 1)
+  )
+
+  var width = Math.floor(dimensions.width * scaleFactor)
+  var height = Math.floor(dimensions.height * scaleFactor)
+
+  height += HEADER_HEIGHT
+
+  // Center window on screen
+  var x = Math.floor((workAreaSize.width - width) / 2)
+  var y = Math.floor((workAreaSize.height - height) / 2)
+
+  electron.ipcRenderer.send('setAspectRatio', aspectRatio, {width: 0, height: HEADER_HEIGHT})
+  electron.ipcRenderer.send('setBounds', {x, y, width, height})
+}
+
+function restoreBounds () {
+  electron.ipcRenderer.send('setAspectRatio', 0)
+  if (state.view.mainWindowBounds) {
+    electron.ipcRenderer.send('setBounds', state.view.mainWindowBounds, true)
+  }
+}
+
+function onError (err) {
+  console.error(err.stack)
+  window.alert(err.message || err)
+  update()
+}
+
+function onWarning (err) {
+  console.log('warning: %s', err.message)
+}

renderer/lib/capture-video-frame.js

@@ -0,0 +1,23 @@
+module.exports = captureVideoFrame
+
+function captureVideoFrame (video, format) {
+  if (typeof video === 'string') video = document.querySelector(video)
+  if (!video || video.nodeName !== 'VIDEO') {
+    throw new Error('First argument must be a <video> element or selector')
+  }
+  if (format == null) format = 'png'
+  if (format !== 'png' && format !== 'jpg' && format !== 'webp') {
+    throw new Error('Second argument must be one of "png", "jpg", or "webp"')
+  }
+
+  var canvas = document.createElement('canvas')
+  canvas.width = video.videoWidth
+  canvas.height = video.videoHeight
+
+  canvas.getContext('2d').drawImage(video, 0, 0)
+
+  var dataUri = canvas.toDataURL('image/' + format)
+  var data = dataUri.split(',')[1]
+
+  return new Buffer(data, 'base64')
+}

renderer/lib/torrent-poster.js

@@ -0,0 +1,53 @@
+module.exports = torrentPoster
+
+var captureVideoFrame = require('./capture-video-frame')
+var path = require('path')
+
+function torrentPoster (torrent, cb) {
+  // use largest file
+  var file = torrent.files
+    .filter(function (file) {
+      var extname = path.extname(file.name)
+      return ['.mp4', '.webm', '.mov', '.mkv'].indexOf(extname) !== -1
+    })
+    .reduce(function (a, b) {
+      return a.length > b.length ? a : b
+    })
+  var index = torrent.files.indexOf(file)
+
+  var server = torrent.createServer(0)
+  server.listen(0, onListening)
+
+  function onListening () {
+    var port = server.address().port
+    var url = 'http://localhost:' + port + '/' + index
+    var video = document.createElement('video')
+    video.addEventListener('canplay', onCanPlay)
+
+    video.volume = 0
+    video.src = url
+    video.play()
+
+    function onCanPlay () {
+      video.removeEventListener('canplay', onCanPlay)
+      video.addEventListener('seeked', onSeeked)
+
+      video.currentTime = Math.min((video.duration || 600) * 0.03, 60)
+    }
+
+    function onSeeked () {
+      video.removeEventListener('seeked', onSeeked)
+
+      var buf = captureVideoFrame(video)
+
+      // unload video element
+      video.pause()
+      video.src = ''
+      video.load()
+
+      server.destroy()
+
+      cb(null, buf)
+    }
+  }
+}

renderer/views/app.js

@@ -0,0 +1,22 @@
+module.exports = App
+
+var h = require('virtual-dom/h')
+
+var Header = require('./header')
+var Player = require('./player')
+var TorrentList = require('./torrent-list')
+
+function App (state, dispatch) {
+  return h('.app', [
+    Header(state, dispatch),
+    h('.content', [
+      (function () {
+        if (state.view.url === '/') {
+          return TorrentList(state, dispatch)
+        } else if (state.view.url === '/player') {
+          return Player(state, dispatch)
+        }
+      })()
+    ])
+  ])
+}

renderer/views/header.js

@@ -0,0 +1,43 @@
+module.exports = Header
+
+var h = require('virtual-dom/h')
+
+function Header (state, dispatch) {
+  return h('.header', [
+    (function () {
+      if (process.platform === 'darwin') {
+        return h('.title', state.view.title)
+      }
+    })(),
+    h('.nav.left', [
+      h('i.icon.back', {
+        onclick: onBack
+      }, 'chevron_left'),
+      h('i.icon.forward', {
+        onclick: onForward
+      }, 'chevron_right')
+    ]),
+    (function () {
+      if (state.url !== '/player') {
+        return h('.nav.right', [
+          h('i.icon.add', {
+            onclick: onAddTorrent
+          }, 'add')
+        ])
+      }
+    })()
+  ])
+
+  function onBack (e) {
+    dispatch('back')
+  }
+
+  function onForward (e) {
+    dispatch('forward')
+  }
+
+  function onAddTorrent (e) {
+    var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4'
+    dispatch('addTorrent', torrentId)
+  }
+}

renderer/views/player.js

@@ -0,0 +1,110 @@
+module.exports = Player
+
+var h = require('virtual-dom/h')
+var electron = require('electron')
+
+function Player (state, dispatch) {
+  // Unfortunately, play/pause can't be done just by modifying HTML.
+  // Instead, grab the DOM node and play/pause it if necessary
+  var videoElement = document.querySelector('video')
+  if (videoElement !== null) {
+    if (state.video.isPaused && !videoElement.paused) {
+      videoElement.pause()
+    } else if (!state.video.isPaused && videoElement.paused) {
+      videoElement.play()
+    }
+    // When the user clicks or drags on the progress bar, jump to that position
+    if (state.video.jumpToTime) {
+      videoElement.currentTime = state.video.jumpToTime
+      state.video.jumpToTime = null
+    }
+    state.video.currentTime = videoElement.currentTime
+    state.video.duration = videoElement.duration
+  }
+
+  // Show the video as large as will fit in the window, play immediately
+  return h('.player', [
+    h('video', {
+      src: state.server.localURL,
+      autoplay: true,
+      onloadedmetadata: onLoadedMetadata
+    }),
+    renderPlayerControls(state, dispatch)
+  ])
+
+  // As soon as the video loads far enough to know the dimensions, resize the
+  // window to match the video resolution
+  function onLoadedMetadata (e) {
+    var video = e.target
+    var dimensions = {
+      width: video.videoWidth,
+      height: video.videoHeight
+    }
+    dispatch('setDimensions', dimensions)
+  }
+}
+
+// Renders all video controls: play/pause, scrub, loading bar
+// TODO: cast buttons
+function renderPlayerControls (state, dispatch) {
+  var positionPercent = 100 * state.video.currentTime / state.video.duration
+  return h('.player-controls', [
+    h('.bottom-bar', [
+      h('.loading-bar', renderLoadingBar(state)),
+      h('.scrub-bar', {
+        draggable: true,
+        onclick: handleScrub,
+        ondrag: handleScrub
+      }),
+      h('.playback-cursor', {
+        style: {
+          left: 'calc(' + positionPercent + '% - 4px)'
+        }
+      }),
+      h('i.icon.play-pause', {
+        onclick: () => dispatch('playPause')
+      }, state.video.isPaused ? 'play_arrow' : 'pause')
+    ])
+  ])
+
+  // Handles a click or drag to scrub (jump to another position in the video)
+  function handleScrub (e) {
+    var windowWidth = electron.remote.getCurrentWindow().getBounds().width
+    var fraction = e.clientX / windowWidth
+    var position = fraction * state.video.duration /* seconds */
+    dispatch('playbackJump', position)
+  }
+}
+
+// Renders the loading bar. Shows which parts of the torrent are loaded, which
+// can be "spongey" / non-contiguous
+function renderLoadingBar (state) {
+  var torrent = state.view.torrentPlaying._torrent
+  if (torrent === null) {
+    return []
+  }
+
+  // Find all contiguous parts of the torrent which are loaded
+  var parts = []
+  var lastPartPresent = false
+  var numParts = torrent.pieces.length
+  for (var i = 0; i < numParts; i++) {
+    var partPresent = torrent.bitfield.get(i)
+    if (partPresent && !lastPartPresent) {
+      parts.push({start: i, count: 1})
+    } else if (partPresent) {
+      parts[parts.length - 1].count++
+    }
+    lastPartPresent = partPresent
+  }
+
+  // Output an list of rectangles to show loading progress
+  return parts.map(function (part) {
+    return h('.loading-bar-part', {
+      style: {
+        left: (100 * part.start / numParts) + '%',
+        width: (100 * part.count / numParts) + '%'
+      }
+    })
+  })
+}

renderer/views/torrent-list.js

@@ -0,0 +1,69 @@
+module.exports = TorrentList
+
+var h = require('virtual-dom/h')
+var prettyBytes = require('pretty-bytes')
+
+function TorrentList (state, dispatch) {
+  var torrents = state.view.client
+    ? state.view.client.torrents
+    : []
+
+  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')
+    ])
+  ])
+}