Merge branch 'master' into vertical-center

2016-03-07 10:46:55 -08:00
parent 91656c01ff e2f978024d
commit ca509e05e9
7 changed files with 210 additions and 157 deletions
--- 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 () {
--- 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"
--- a/renderer/index.css
+++ b/renderer/index.css
@@ -223,8 +223,7 @@ body.drag::before {

 .torrent {
  height: 120px;
-  padding: 20px;
-  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%;
@@ -241,41 +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% - 170px);
-}
-
-.torrent .btn, .torrent .delete {
-  float: right;
-  margin-top: 20px;
-  margin-left: 15px;
-  padding-top: 10px;
+.torrent .buttons {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  align-items: center; /* flexbox: center buttons vertically */
  display: none;
 }

-.torrent .delete {
-  opacity: 0.5;
+.torrent:hover .buttons {
+  display: flex;
 }

-.torrent:hover .btn, .torrent:hover .delete {
-  display: block;
+.torrent .buttons > :not(:first-child) {
+  margin-left: 10px; /* space buttons by 10px */
 }

-.torrent .play {
+.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 {
@@ -284,11 +287,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 {
--- 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,17 +29,24 @@ 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.)
+ * 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

+  // 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 +54,21 @@ function init () {
  })
  document.body.appendChild(vdomLoop.target)

-  updateThrottled = throttle(update, 1000)
+  // Calling update() updates the UI given the current state
+  // 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)

-  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()
+  document.addEventListener('unload', saveState)

-  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 +78,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 +97,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 +110,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 +198,41 @@ 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)
+    electron.ipcRenderer.send('log', 'loaded state from ' + cfg.filePath)
+    state.saved = data
+    if (!state.saved.torrents) state.saved.torrents = []
+    state.saved.torrents.forEach((x) => startTorrenting(x.infoHash))
+  })
+}
+
+// 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()
+  })
+}
+
+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 +252,34 @@ function isNotTorrentFile (file) {
  return !isTorrentFile(file)
 }

+// 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 = state.client.add(torrentId)
-  addTorrentEvents(torrent)
+  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,
+    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 (torrentId) {
+  var torrent = state.client.add(torrentId)
+  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)
@@ -225,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)
@@ -251,35 +312,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 +347,9 @@ function openPlayer (torrent) {
 }

 function deleteTorrent (torrent) {
-  torrent.destroy(function () {
-    saveTorrents() // updates after writing to config
-  })
+  var ix = state.saved.torrents.findIndex((x) => x.infoHash === torrent.infoHash)
+  if (ix > -1) state.saved.torrents.splice(ix, 1)
+  torrent.destroy(saveState)
 }

 function openChromecast (torrent) {
@@ -342,25 +374,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})
--- 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)

--- 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:
   *
--- a/renderer/views/torrent-list.js
+++ b/renderer/views/torrent-list.js
@@ -23,57 +23,67 @@ 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.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>
+    `
+  }
 }