From 8b1b21c1eec42948ec4c47043944560ecf26a82d Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Sun, 6 Mar 2016 01:03:20 -0800
Subject: [PATCH 1/8] Unsquash the UI when window is small

Fix #44
---
 renderer/index.css             | 20 ++++---
 renderer/views/torrent-list.js | 97 ++++++++++++++++++----------------
 2 files changed, 63 insertions(+), 54 deletions(-)

diff --git a/renderer/index.css b/renderer/index.css
index 80bab32e..4f8e3640 100644
--- a/renderer/index.css
+++ b/renderer/index.css
@@ -247,22 +247,28 @@ body.drag::before {
 }
 
 .torrent:hover .metadata {
-  width: calc(100% - 170px);
+  width: calc(100% - 90px);
 }
 
-.torrent .btn, .torrent .delete {
+.torrent .buttons {
   float: right;
   margin-top: 20px;
-  margin-left: 15px;
-  padding-top: 10px;
   display: none;
 }
 
+.torrent .buttons * {
+  padding-top: 10px;
+}
+
+.torrent .buttons :not(:first-child) {
+  margin-left: 10px;
+}
+
 .torrent .delete {
   opacity: 0.5;
 }
 
-.torrent:hover .btn, .torrent:hover .delete {
+.torrent:hover .buttons {
   display: block;
 }
 
@@ -284,11 +290,9 @@ body.drag::before {
   line-height: 1.5em;
 }
 
-.torrent .status {
+.torrent .status, .torrent .status2 {
   font-size: 1em;
   line-height: 1.5em;
-  position: absolute;
-  bottom: 20px;
 }
 
 .torrent span:not(:last-child)::after {
diff --git a/renderer/views/torrent-list.js b/renderer/views/torrent-list.js
index a4a8101e..37858cc9 100644
--- a/renderer/views/torrent-list.js
+++ b/renderer/views/torrent-list.js
@@ -23,57 +23,62 @@ function renderTorrent (torrent, dispatch) {
 
   // Foreground: name of the torrent, basic info like size, play button,
   // cast buttons if available, and delete
-  var elements = [
-    renderTorrentMetadata(torrent),
-    hx`
-      <i
-        class='icon delete'
-        onclick=${() => dispatch('deleteTorrent', torrent)}>
-        close
-      </i>
-    `,
-    hx`
-      <i.btn.icon.play
-        class='${!torrent.ready ? 'disabled' : ''}'
-        onclick=${() => dispatch('openPlayer', torrent)}>
-        play_arrow
-      </i>
-    `
-  ]
-
-  return hx`<div class='torrent' style=${style}>${elements}</div>`
-}
-
-// Renders the torrent name and download progress
-function renderTorrentMetadata (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'>
-        <span class='progress'>${progress}%</span>
-        <span>${downloaded}</span>
-      </div>
-      ${getFilesLength()}
-      <span>${getPeers()}</span>
-      <span>↓ ${prettyBytes(torrent.downloadSpeed || 0)}/s</span>
-      <span>↑ ${prettyBytes(torrent.uploadSpeed || 0)}/s</span>
+    <div class='torrent' style=${style}>
+      ${renderTorrentMetadata(torrent)}
+      ${renderTorrentButtons(torrent)}
     </div>
   `
 
-  function getPeers () {
-    var count = torrent.numPeers === 1 ? 'peer' : 'peers'
-    return `${torrent.numPeers} ${count}`
-  }
+  function renderTorrentMetadata () {
+    var progress = Math.floor(100 * torrent.progress)
+    var downloaded = prettyBytes(torrent.downloaded)
+    var total = prettyBytes(torrent.length || 0)
 
-  function getFilesLength () {
-    if (torrent.ready && torrent.files.length > 1) {
-      return hx`<span class='files'>${torrent.files.length} files</span>`
+    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>
+      </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>`
+      }
     }
   }
+
+  function renderTorrentButtons () {
+    return hx`
+      <div class="buttons">
+        <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>
+    `
+  }
 }

From f1c1c72e639b8b9db813a7af842c3a5426066a2f Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Sat, 5 Mar 2016 23:27:16 -0800
Subject: [PATCH 2/8] fix: no exception when screenshot cannot be made for any
 files in torrent

---
 renderer/lib/torrent-poster.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/renderer/lib/torrent-poster.js b/renderer/lib/torrent-poster.js
index 0537e73e..18e700f6 100644
--- a/renderer/lib/torrent-poster.js
+++ b/renderer/lib/torrent-poster.js
@@ -4,15 +4,18 @@ var captureVideoFrame = require('./capture-video-frame')
 var path = require('path')
 
 function torrentPoster (torrent, cb) {
+  // filter out file formats that the <video> tag definitely can't play
+  var files = torrent.files.filter(function (file) {
+    var extname = path.extname(file.name)
+    return ['.mp4', '.webm', '.mov', '.mkv'].indexOf(extname) !== -1
+  })
+
+  if (files.length === 0) return cb(new Error('cannot make screenshot for any files in torrent'))
+
   // 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 file = files.reduce(function (a, b) {
+    return a.length > b.length ? a : b
+  })
 
   var index = torrent.files.indexOf(file)
 

From 61a99508ae802cc49f9ac0ee3e9fc4578d645084 Mon Sep 17 00:00:00 2001
From: DC <dcposch@dcpos.ch>
Date: Sun, 6 Mar 2016 21:19:11 -0800
Subject: [PATCH 3/8] Clean up and document index.js

---
 renderer/index.js | 169 +++++++++++++++++++++++++++-------------------
 renderer/state.js |   4 +-
 2 files changed, 101 insertions(+), 72 deletions(-)

diff --git a/renderer/index.js b/renderer/index.js
index 76b1e185..b9fa1adb 100644
--- a/renderer/index.js
+++ b/renderer/index.js
@@ -32,15 +32,23 @@ global.WEBTORRENT_ANNOUNCE = createTorrent.announceList
 
 var vdomLoop, updateThrottled
 
+/**
+ * Called once when the application loads. (Not once per window.)
+ * Connects to the torrent networks, sets up the UI and OS integrations like
+ * the dock icon and drag+drop.
+ */
 function init () {
+  // Connect to the WebTorrent and BitTorrent networks
+  // WebTorrent.app is a hybrid client, as explained here: https://webtorrent.io/faq
   state.client = new WebTorrent()
   state.client.on('warning', onWarning)
   state.client.on('error', onError)
-  state.client.on('torrent', saveTorrents)
-
-  // For easy debugging in Developer Tools
-  global.state = state
+  state.client.on('torrent', saveState)
 
+  // The UI is built with virtual-dom, a minimalist library extracted from React
+  // The concepts--one way data flow, a pure function that renders state to a
+  // virtual DOM tree, and a diff that applies changes in the vdom to the real
+  // DOM, are all the same. Learn more: https://facebook.github.io/react/
   vdomLoop = mainLoop(state, render, {
     create: createElement,
     diff: diff,
@@ -48,12 +56,22 @@ function init () {
   })
   document.body.appendChild(vdomLoop.target)
 
+  // Calling update() updates the UI given the current state
+  // For performance, we don't want to do this too often. Hence, events that
+  // affect the UI can be v frequent--like torrent progress updates--call
+  // updateThrottled() instead, which calls update() at most once a second.
   updateThrottled = throttle(update, 1000)
+  setInterval(updateThrottled, 1000)
 
-  dragDrop('body', onFiles)
+  // All state lives in state.js. `state.saved` is read from and written to a
+  // file. All other state is ephemeral. Here we'll load state.saved:
+  loadState()
 
-  restoreSession()
+  // For easy debugging in Developer Tools
+  global.state = state
 
+  // OS integrations:
+  // ...Chromecast and Airplay
   chromecasts.on('update', function (player) {
     state.devices.chromecast = player
     update()
@@ -63,10 +81,15 @@ function init () {
     state.devices.airplay = player
   }).start()
 
+  // ...drag and drop a torrent or video file to play or seed
+  dragDrop('body', onFiles)
+
+  // ...same thing if you paste a torrent
   document.addEventListener('paste', function () {
     electron.ipcRenderer.send('addTorrentFromPaste')
   })
 
+  // ...keyboard shortcuts
   document.addEventListener('keydown', function (e) {
     if (e.which === 27) { /* ESC means either exit fullscreen or go back */
       if (state.isFullScreen) {
@@ -77,6 +100,7 @@ function init () {
     }
   })
 
+  // ...focus and blur. Needed to show correct dock icon text ("badge") in OSX
   window.addEventListener('focus', function () {
     state.isFocused = true
     if (state.dock.badge > 0) electron.ipcRenderer.send('setBadge', '')
@@ -89,34 +113,19 @@ function init () {
 }
 init()
 
+// This is the (mostly) pure funtion from state -> UI. Returns a virtual DOM
+// tree. Any events, such as button clicks, will turn into calls to dispatch()
 function render (state) {
   return App(state, dispatch)
 }
 
+// Calls render() to go from state -> UI, then applies to vdom to the real DOM.
 function update () {
   vdomLoop.update(state)
   updateDockIcon()
 }
 
-setInterval(function () {
-  updateThrottled()
-}, 1000)
-
-function updateDockIcon () {
-  var progress = state.client.progress
-  var activeTorrentsExist = state.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.dock.progress) {
-    state.dock.progress = progress
-    electron.ipcRenderer.send('setProgress', progress)
-  }
-}
-
+// Events from the UI never modify state directly. Instead they call dispatch()
 function dispatch (action, ...args) {
   console.log('dispatch: %s %o', action, args)
   if (action === 'addTorrent') {
@@ -192,6 +201,40 @@ electron.ipcRenderer.on('addFakeDevice', function (e, device) {
   update()
 })
 
+// Load state.saved from the JSON state file
+function loadState () {
+  cfg.read(function (err, data) {
+    if (err) console.error(err)
+    console.log('loaded state: ' + JSON.stringify(data, null, 4)) /* pretty print */
+    state.saved = data
+    if (!state.saved.torrents) state.saved.torrents = []
+    state.saved.torrents.forEach(startTorrenting)
+  })
+}
+
+// Write state.saved to the JSON state file
+function saveState () {
+  cfg.write(state.saved, function (err) {
+    if (err) console.error(err)
+    update()
+  })
+}
+
+function updateDockIcon () {
+  var progress = state.client.progress
+  var activeTorrentsExist = state.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.dock.progress) {
+    state.dock.progress = progress
+    electron.ipcRenderer.send('setProgress', progress)
+  }
+}
+
 function onFiles (files) {
   // .torrent file = start downloading the torrent
   files.filter(isTorrentFile).forEach(function (torrentFile) {
@@ -211,12 +254,25 @@ function isNotTorrentFile (file) {
   return !isTorrentFile(file)
 }
 
-function addTorrent (torrentId) {
-  if (!torrentId) torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4'
-  var torrent = state.client.add(torrentId)
-  addTorrentEvents(torrent)
+// Adds a torrent to the list, starts downloading/seeding
+function addTorrent (torrentOrMagnetURI) {
+  if (!torrentOrMagnetURI) torrentOrMagnetURI = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4'
+  var torrent = startTorrenting(torrentOrMagnetURI)
+  state.saved.torrents.add({
+    name: torrent.name,
+    magnetURI: torrent.magnetURI,
+    path: torrent.path
+  })
 }
 
+// Starts downloading and/or seeding a given torrent file or magnet URI
+function startTorrenting (torrentOrMagnetURI) {
+  var torrent = state.client.add(torrentOrMagnetURI)
+  addTorrentEvents(torrent)
+  return torrent
+}
+
+// Creates a torrent for a local file and starts seeding it
 function seed (files) {
   if (files.length === 0) return
   var torrent = state.client.seed(files)
@@ -251,35 +307,6 @@ function addTorrentEvents (torrent) {
   }
 }
 
-function restoreSession () {
-  cfg.read(function (err, data) {
-    if (err) console.error(err)
-    state.saved = data
-    if (!state.saved.torrents) state.saved.torrents = []
-    state.saved.torrents.forEach(function (torrent) {
-      dispatch('addTorrent', torrent.magnetURI)
-    })
-    update()
-  })
-}
-
-function saveTorrents () {
-  state.saved.torrents = state.client.torrents.map(function (torrent) {
-    return {
-      name: torrent.name,
-      magnetURI: torrent.magnetURI,
-      path: torrent.path
-    }
-  })
-
-  cfg.write({
-    torrents: state.saved.torrents
-  }, function (err) {
-    if (err) console.error(err)
-    update()
-  })
-}
-
 function startServer (torrent, cb) {
   if (state.server) return cb()
 
@@ -315,9 +342,7 @@ function openPlayer (torrent) {
 }
 
 function deleteTorrent (torrent) {
-  torrent.destroy(function () {
-    saveTorrents() // updates after writing to config
-  })
+  torrent.destroy(saveState)
 }
 
 function openChromecast (torrent) {
@@ -342,25 +367,29 @@ function openAirplay (torrent) {
   })
 }
 
+// Set window dimensions to match video dimensions or fill the screen
 function setDimensions (dimensions) {
-  // TODO: eliminate blocking remote call
-  state.mainWindowBounds = electron.remote.getCurrentWindow().getBounds()
+  state.mainWindowBounds = {
+    x: window.screenX,
+    y: window.screenY,
+    width: window.outerWidth,
+    height: window.outerHeight
+  }
 
   // Limit window size to screen size
-  var workAreaSize = electron.remote.screen.getPrimaryDisplay().workAreaSize
+  var screenWidth = window.screen.width
+  var screenHeight = window.screen.height
   var aspectRatio = dimensions.width / dimensions.height
-
   var scaleFactor = Math.min(
-    Math.min(workAreaSize.width / dimensions.width, 1),
-    Math.min(workAreaSize.height / dimensions.height, 1)
+    Math.min(screenWidth / dimensions.width, 1),
+    Math.min(screenHeight / dimensions.height, 1)
   )
-
   var width = Math.floor(dimensions.width * scaleFactor)
   var height = Math.floor(dimensions.height * scaleFactor)
 
   // Center window on screen
-  var x = Math.floor((workAreaSize.width - width) / 2)
-  var y = Math.floor((workAreaSize.height - height) / 2)
+  var x = Math.floor((screenWidth - width) / 2)
+  var y = Math.floor((screenHeight - height) / 2)
 
   electron.ipcRenderer.send('setAspectRatio', aspectRatio)
   electron.ipcRenderer.send('setBounds', {x, y, width, height})
diff --git a/renderer/state.js b/renderer/state.js
index 6542b794..0c8e6b3e 100644
--- a/renderer/state.js
+++ b/renderer/state.js
@@ -27,8 +27,8 @@ module.exports = {
     mouseStationarySince: 0 /* Unix time in ms */
   },
 
-  /* Saved state is read from and written to application config.
-   * It should be simple and minimal and must be JSON stringifiable.
+  /* Saved state is read from and written to a file every time the app runs.
+   * It should be simple and minimal and must be JSON.
    *
    * Config path:
    *

From 4f093497a77fc93772656d7e0d350dfcbbd218e4 Mon Sep 17 00:00:00 2001
From: Nate Goldman <nate@ngoldman.me>
Date: Sun, 6 Mar 2016 22:16:12 -0800
Subject: [PATCH 4/8] fix bugs from #56

---
 renderer/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/renderer/index.js b/renderer/index.js
index b9fa1adb..b7487d07 100644
--- a/renderer/index.js
+++ b/renderer/index.js
@@ -208,7 +208,9 @@ function loadState () {
     console.log('loaded state: ' + JSON.stringify(data, null, 4)) /* pretty print */
     state.saved = data
     if (!state.saved.torrents) state.saved.torrents = []
-    state.saved.torrents.forEach(startTorrenting)
+    state.saved.torrents.forEach(function (torrent) {
+      startTorrenting(torrent.magnetURI)
+    })
   })
 }
 
@@ -258,7 +260,7 @@ function isNotTorrentFile (file) {
 function addTorrent (torrentOrMagnetURI) {
   if (!torrentOrMagnetURI) torrentOrMagnetURI = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4'
   var torrent = startTorrenting(torrentOrMagnetURI)
-  state.saved.torrents.add({
+  state.saved.torrents.push({
     name: torrent.name,
     magnetURI: torrent.magnetURI,
     path: torrent.path

From 5aa1cce09e72101aa5fde821ffd4b50ebd04e310 Mon Sep 17 00:00:00 2001
From: DC <dcposch@dcpos.ch>
Date: Sun, 6 Mar 2016 21:19:11 -0800
Subject: [PATCH 5/8] Fix state loading and saving

This is the rest of PR #56
---
 renderer/index.js | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/renderer/index.js b/renderer/index.js
index b7487d07..6da2695b 100644
--- a/renderer/index.js
+++ b/renderer/index.js
@@ -43,7 +43,6 @@ function init () {
   state.client = new WebTorrent()
   state.client.on('warning', onWarning)
   state.client.on('error', onError)
-  state.client.on('torrent', saveState)
 
   // The UI is built with virtual-dom, a minimalist library extracted from React
   // The concepts--one way data flow, a pure function that renders state to a
@@ -66,6 +65,7 @@ function init () {
   // All state lives in state.js. `state.saved` is read from and written to a
   // file. All other state is ephemeral. Here we'll load state.saved:
   loadState()
+  document.addEventListener('unload', saveState)
 
   // For easy debugging in Developer Tools
   global.state = state
@@ -256,20 +256,26 @@ function isNotTorrentFile (file) {
   return !isTorrentFile(file)
 }
 
-// Adds a torrent to the list, starts downloading/seeding
-function addTorrent (torrentOrMagnetURI) {
-  if (!torrentOrMagnetURI) torrentOrMagnetURI = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4'
-  var torrent = startTorrenting(torrentOrMagnetURI)
+// Adds a torrent to the list, starts downloading/seeding. TorrentID can be a
+// magnet URI, infohash, or torrent file: https://github.com/feross/webtorrent#clientaddtorrentid-opts-function-ontorrent-torrent-
+function addTorrent (torrentId) {
+  if (!torrentId) torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4'
+  var torrent = startTorrenting(torrentId)
   state.saved.torrents.push({
     name: torrent.name,
     magnetURI: torrent.magnetURI,
-    path: torrent.path
+    infoHash: torrent.infoHash,
+    path: torrent.path,
+    xt: torrent.xt,
+    dn: torrent.dn,
+    announce: torrent.announce
   })
+  saveState()
 }
 
 // Starts downloading and/or seeding a given torrent file or magnet URI
-function startTorrenting (torrentOrMagnetURI) {
-  var torrent = state.client.add(torrentOrMagnetURI)
+function startTorrenting (torrentId) {
+  var torrent = state.client.add(torrentId)
   addTorrentEvents(torrent)
   return torrent
 }
@@ -344,6 +350,8 @@ function openPlayer (torrent) {
 }
 
 function deleteTorrent (torrent) {
+  var ix = state.saved.torrents.findIndex((x) => x.infoHash === torrent.infoHash)
+  if (ix > -1) state.saved.torrents.splice(ix, 1)
   torrent.destroy(saveState)
 }
 

From 713c391c05a0daba7297022ddfa256d1c11cc94c Mon Sep 17 00:00:00 2001
From: DC <dcposch@dcpos.ch>
Date: Mon, 7 Mar 2016 00:01:32 -0800
Subject: [PATCH 6/8] Add download button

Doesn't do anything yet
---
 main/ipc.js                    |  4 +++
 renderer/index.css             | 55 ++++++++++++++++------------------
 renderer/index.js              |  6 +++-
 renderer/views/torrent-list.js |  5 ++++
 4 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/main/ipc.js b/main/ipc.js
index 7c03cad2..f0352f22 100644
--- a/main/ipc.js
+++ b/main/ipc.js
@@ -31,6 +31,10 @@ function init () {
   ipcMain.on('toggleFullScreen', function (e) {
     windows.main.setFullScreen(!windows.main.isFullScreen())
   })
+
+  ipcMain.on('log', function (e, message) {
+    console.log(message)
+  })
 }
 
 function addTorrentFromPaste () {
diff --git a/renderer/index.css b/renderer/index.css
index 4f8e3640..97e5769a 100644
--- a/renderer/index.css
+++ b/renderer/index.css
@@ -223,7 +223,6 @@ body.drag::before {
 
 .torrent {
   height: 120px;
-  padding: 20px;
   background: rgba(0, 0, 0, 0.5);
   background-repeat: no-repeat;
   background-size: cover;
@@ -241,47 +240,45 @@ body.drag::before {
 }
 
 .torrent .metadata {
-  float: left;
-  width: 100%;
+  position: absolute;
+  top: 20px;
+  left: 20px;
   text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
 }
 
-.torrent:hover .metadata {
-  width: calc(100% - 90px);
-}
-
 .torrent .buttons {
-  float: right;
-  margin-top: 20px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  align-items: center; /* flexbox: center buttons vertically */
   display: none;
 }
 
-.torrent .buttons * {
-  padding-top: 10px;
-}
-
-.torrent .buttons :not(:first-child) {
-  margin-left: 10px;
-}
-
-.torrent .delete {
-  opacity: 0.5;
-}
-
 .torrent:hover .buttons {
-  display: block;
+  display: flex;
 }
 
-.torrent .play {
+.torrent .buttons > :not(:first-child) {
+  margin-left: 10px; /* space buttons by 10px */
+}
+
+.torrent .buttons .download {
+  background-color: #2233BB;
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  font-size: 18px;
+  padding-top: 6px;
+}
+
+.torrent .buttons .play {
+  padding-top: 10px;
   background-color: #F44336;
 }
 
-.torrent .chromecast {
-  background-color: #2196F3;
-}
-
-.torrent .airplay {
-  background-color: #212121;
+.torrent .buttons .delete {
+  opacity: 0.5;
 }
 
 .torrent .name {
diff --git a/renderer/index.js b/renderer/index.js
index 6da2695b..cd6d2a34 100644
--- a/renderer/index.js
+++ b/renderer/index.js
@@ -205,7 +205,7 @@ electron.ipcRenderer.on('addFakeDevice', function (e, device) {
 function loadState () {
   cfg.read(function (err, data) {
     if (err) console.error(err)
-    console.log('loaded state: ' + JSON.stringify(data, null, 4)) /* pretty print */
+    electron.ipcRenderer.send('log', 'loaded state from ' + cfg.filePath)
     state.saved = data
     if (!state.saved.torrents) state.saved.torrents = []
     state.saved.torrents.forEach(function (torrent) {
@@ -216,6 +216,7 @@ function loadState () {
 
 // Write state.saved to the JSON state file
 function saveState () {
+  electron.ipcRenderer.send('log', 'saving state to ' + cfg.filePath)
   cfg.write(state.saved, function (err) {
     if (err) console.error(err)
     update()
@@ -261,6 +262,9 @@ function isNotTorrentFile (file) {
 function addTorrent (torrentId) {
   if (!torrentId) torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4'
   var torrent = startTorrenting(torrentId)
+  if (state.saved.torrents.find((x) => x.infoHash === torrent.infoHash)) {
+    return // torrent is already in state.saved
+  }
   state.saved.torrents.push({
     name: torrent.name,
     magnetURI: torrent.magnetURI,
diff --git a/renderer/views/torrent-list.js b/renderer/views/torrent-list.js
index 37858cc9..79bc55aa 100644
--- a/renderer/views/torrent-list.js
+++ b/renderer/views/torrent-list.js
@@ -68,6 +68,11 @@ function renderTorrent (torrent, dispatch) {
   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)}>

From 093d810b90dfc4b61a5b8f5b5a05eb9c58f3d6c6 Mon Sep 17 00:00:00 2001
From: DC <dcposch@dcpos.ch>
Date: Mon, 7 Mar 2016 00:11:43 -0800
Subject: [PATCH 7/8] Remove updateThrottled

---
 package.json      |  1 -
 renderer/index.js | 17 +++++------------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index b1933174..339eaeac 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
     "main-loop": "^3.2.0",
     "network-address": "^1.1.0",
     "pretty-bytes": "^3.0.0",
-    "throttleit": "^1.0.0",
     "upload-element": "^1.0.1",
     "virtual-dom": "^2.1.1",
     "webtorrent": "^0.82.1"
diff --git a/renderer/index.js b/renderer/index.js
index cd6d2a34..873280ba 100644
--- a/renderer/index.js
+++ b/renderer/index.js
@@ -10,7 +10,6 @@ var mainLoop = require('main-loop')
 var networkAddress = require('network-address')
 var path = require('path')
 var state = require('./state')
-var throttle = require('throttleit')
 var torrentPoster = require('./lib/torrent-poster')
 var WebTorrent = require('webtorrent')
 var cfg = require('application-config')('WebTorrent')
@@ -30,7 +29,7 @@ global.WEBTORRENT_ANNOUNCE = createTorrent.announceList
     return url.indexOf('wss://') === 0 || url.indexOf('ws://') === 0
   })
 
-var vdomLoop, updateThrottled
+var vdomLoop
 
 /**
  * Called once when the application loads. (Not once per window.)
@@ -56,11 +55,9 @@ function init () {
   document.body.appendChild(vdomLoop.target)
 
   // Calling update() updates the UI given the current state
-  // For performance, we don't want to do this too often. Hence, events that
-  // affect the UI can be v frequent--like torrent progress updates--call
-  // updateThrottled() instead, which calls update() at most once a second.
-  updateThrottled = throttle(update, 1000)
-  setInterval(updateThrottled, 1000)
+  // Do this at least once a second to show latest state for each torrent
+  // (eg % downloaded) and to keep the cursor in sync when playing a video
+  setInterval(update, 1000)
 
   // All state lives in state.js. `state.saved` is read from and written to a
   // file. All other state is ephemeral. Here we'll load state.saved:
@@ -208,9 +205,7 @@ function loadState () {
     electron.ipcRenderer.send('log', 'loaded state from ' + cfg.filePath)
     state.saved = data
     if (!state.saved.torrents) state.saved.torrents = []
-    state.saved.torrents.forEach(function (torrent) {
-      startTorrenting(torrent.magnetURI)
-    })
+    state.saved.torrents.forEach((x) => startTorrenting(x.infoHash))
   })
 }
 
@@ -293,8 +288,6 @@ function seed (files) {
 
 function addTorrentEvents (torrent) {
   torrent.on('infoHash', update)
-  torrent.on('download', updateThrottled)
-  torrent.on('upload', updateThrottled)
 
   torrent.on('ready', torrentReady)
   torrent.on('done', torrentDone)

From da50dc893e862d2fd107710aa3706c1c71dbb98a Mon Sep 17 00:00:00 2001
From: Nate Goldman <nate@ngoldman.me>
Date: Sun, 6 Mar 2016 21:30:04 -0800
Subject: [PATCH 8/8] better default torrent bg

---
 renderer/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/renderer/index.css b/renderer/index.css
index 97e5769a..587ece81 100644
--- a/renderer/index.css
+++ b/renderer/index.css
@@ -223,7 +223,7 @@ body.drag::before {
 
 .torrent {
   height: 120px;
-  background: rgba(0, 0, 0, 0.5);
+  background: linear-gradient(to bottom right, #4B79A1, #283E51);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 0 50%;