Fix Heading.js

Torrent list design

.gitignore

@@ -1,3 +1,4 @@
-node_modules
-build
-dist
+node_modules/
+build/
+dist/
+npm-debug.log.*

.nodemonignore

@@ -0,0 +1,2 @@
+build/
+dist/

.travis.yml

@@ -1,4 +1,4 @@
 language: node_js
 node_js:
   - 'node'
-install: npm install standard
+install: npm install standard depcheck walk-sync

AUTHORS.md

@@ -10,7 +10,6 @@
 - Romain Beaumont (romain.rom1@gmail.com)
 - Dan Flettre (fletd01@yahoo.com)
 - Liam Gray (liam.r.gray@gmail.com)
-- grunjol (grunjol@users.noreply.github.com)
 - Rémi Jouannet (remijouannet@users.noreply.github.com)
 - Evan Miller (miller.evan815@gmail.com)
 - Alex (alxmorais8@msn.com)
@@ -24,8 +23,14 @@
 - Thomas Watson Steen (w@tson.dk)
 - anonymlol (anonymlol7@gmail.com)
 - Gediminas Petrikas (gedas18@gmail.com)
+- Alberto Miranda (codealchemist@gmail.com)
 - Adam Gotlib (gotlib.adam+dev@gmail.com)
 - Rémi Jouannet (remijouannet@gmail.com)
 - Andrea Tupini (tupini07@gmail.com)
+- grunjol (grunjol@gmail.com)
+- Jason Kurian (jasonk92@gmail.com)
+- Vamsi Krishna Avula (vamsi_ism@outlook.com)
+- Noam Okman (noamokman@gmail.com)
+- PurgingPanda (t3ch0wn3r@gmail.com)
 
 #### Generated by bin/update-authors.sh.

CHANGELOG.md

@@ -1,9 +1,60 @@
 # WebTorrent Desktop Version History
 
+## v0.14.0 - 2016-09-03
+
+### Added
+- Autoplay through all files in a torrent (#871)
+- Torrents now have a progress bar (#844)
+
+### Changed
+- Modals now use Material UI
+- Torrent list style improvements
+
+### Fixed
+- Fix App.js crash in Linux (#882)
+- Fix error on Windows caused by `setBadge` (#867)
+- Don't crash when restarting after adding a magnet link (#869)
+- Restore playback state when reopening player (#877)
+
+## v0.13.1 - 2016-08-31
+
+### Fixed
+- Fixed the Create Torrent page
+
+## v0.13.0 - 2016-08-31
+
+### Added
+- Support .m4a audio
+- Better telemetry: log error versions, report more types of errors
+
+### Changed
+- New look - Material UI. Rewrote Create Torrent and Preferences pages.
+
+### Fixed
+- Fixed telemetry [object Object] and [object HTMLMediaElement] bugs
+- Don't render player controls when playing externally, eg in VLC
+- Don't play notification sounds during media playback
+
+## v0.12.0 - 2016-08-23
+
+### Added
+
+- Custom external media player
+- Linux: add system-wide launcher and icons for Debian, including Ubuntu
+
+### Changed
+
+- Telemetry improvements: redact stacktraces, log app version
+
+### Fixed
+
+- Fix playback and download of default torrents ("missing path" error) (#804)
+- Fix Delete Torrent + Data for newly added magnet links
+- Fix jumpToTime error (#804)
+
 ## v0.11.0 - 2016-08-19
 
 ### Added
-
 - New Preference to "Set WebTorrent as default handler for torrents and magnet links" (#771)
 - New Preference to "Always play in VLC" (#674)
 - Check for missing default download path and torrent folders on start up (#776)

README.md

@@ -7,7 +7,7 @@
   <br>
 </h1>
 
-<h4 align="center">The streaming torrent client. For Mac, Windows, and Linux.</h4>
+<h4 align="center">The streaming torrent app. For Mac, Windows, and Linux.</h4>
 
 <p align="center">
   <a href="https://gitter.im/feross/webtorrent"><img src="https://img.shields.io/badge/gitter-join%20chat%20%E2%86%92-brightgreen.svg" alt="Gitter"></a>
@@ -17,29 +17,46 @@
 
 ## Install
 
-**WebTorrent Desktop** is still under very active development. You can download the latest version from the [releases](https://github.com/feross/webtorrent-desktop/releases) page.
+Download the latest version of WebTorrent Desktop from
+[the official website](https://webtorrent.io/desktop/) or the
+[GitHub releases](https://github.com/feross/webtorrent-desktop/releases) page.
 
-## Screenshot
+**WebTorrent Desktop** is under very active development. You can try out the
+current (unstable) development version by cloning the Git repo. See the
+instructions below in the ["How to Contribute"](#how-to-contribute) section.
+
+## Screenshots
 
 <p align="center">
+  <img src="https://webtorrent.io/img/screenshot-player3.png" alt="screenshot" align="center">
   <img src="https://webtorrent.io/img/screenshot-main.png" width="612" height="749" alt="screenshot" align="center">
 </p>
 
 ## How to Contribute
 
-### Install dependencies
+### Get the code
 
 ```
+$ git clone https://github.com/feross/webtorrent-desktop.git
+$ cd webtorrent-desktop
 $ npm install
 ```
 
-### Run app
+### Run the app
 
 ```
 $ npm start
 ```
 
-### Package app
+### Watch the code
+
+Restart the app automatically every time code changes. Useful during development.
+
+```
+$ npm run watch
+```
+
+### Package the app
 
 Builds app binaries for Mac, Linux, and Windows.
 
@@ -50,7 +67,7 @@ $ npm run package
 To build for one platform:
 
 ```
-$ npm run package -- [platform]
+$ npm run package -- [platform] [options]
 ```
 
 Where `[platform]` is `darwin`, `linux`, `win32`, or `all` (default).
@@ -66,14 +83,18 @@ The following optional arguments are available:
    - `portable` - Windows portable app
    - `all` - All platforms (default)
 
-Note: Even with the `--package` option, the auto-update files (.nupkg for Windows, *-darwin.zip for Mac) will always be produced.
+Note: Even with the `--package` option, the auto-update files (.nupkg for Windows,
+*-darwin.zip for Mac) will always be produced.
 
 #### Windows build notes
 
-To package the Windows app from non-Windows platforms, [Wine](https://www.winehq.org/) needs
-to be installed.
+The Windows app can be packaged from **any** platform.
 
-On Mac, first install [XQuartz](http://www.xquartz.org/), then run:
+Note: Windows code signing only works from **Windows**, for now.
+
+Note: To package the Windows app from non-Windows platforms,
+[Wine](https://www.winehq.org/) needs to be installed. For example on Mac, first
+install [XQuartz](http://www.xquartz.org/), then run:
 
 ```
 brew install wine
@@ -81,11 +102,22 @@ brew install wine
 
 (Requires the [Homebrew](http://brew.sh/) package manager.)
 
+#### Mac build notes
+
+The Mac app can only be packaged from **macOS**.
+
+#### Linux build notes
+
+The Linux app can be packaged from **any** platform.
+
 ### Privacy
 
-WebTorrent Desktop collects some basic usage stats to help us make the app better. For example, we track how well the play button works. How often does it succeed? Time out? Show a missing codec error?
+WebTorrent Desktop collects some basic usage stats to help us make the app better.
+For example, we track how well the play button works. How often does it succeed?
+Time out? Show a missing codec error?
 
-The app never sends personally identifying information, nor does it track which swarms you join.
+The app never sends any personally identifying information, nor does it track which
+torrents you add.
 
 ### Code Style
 

bin/check-deps.js

@@ -1,105 +0,0 @@
-#!/usr/bin/env node
-
-var fs = require('fs')
-var cp = require('child_process')
-
-// We can't use `builtin-modules` here since our TravisCI
-// setup expects this file to run with no dependencies
-var BUILT_IN_NODE_MODULES = [
-  'assert',
-  'buffer',
-  'child_process',
-  'cluster',
-  'console',
-  'constants',
-  'crypto',
-  'dgram',
-  'dns',
-  'domain',
-  'events',
-  'fs',
-  'http',
-  'https',
-  'module',
-  'net',
-  'os',
-  'path',
-  'process',
-  'punycode',
-  'querystring',
-  'readline',
-  'repl',
-  'stream',
-  'string_decoder',
-  'timers',
-  'tls',
-  'tty',
-  'url',
-  'util',
-  'v8',
-  'vm',
-  'zlib'
-]
-
-var BUILT_IN_ELECTRON_MODULES = [ 'electron' ]
-
-var BUILT_IN_DEPS = [].concat(BUILT_IN_NODE_MODULES, BUILT_IN_ELECTRON_MODULES)
-
-var EXECUTABLE_DEPS = [
-  'gh-release',
-  'standard',
-  'babel-cli',
-  'babel-plugin-syntax-jsx',
-  'babel-plugin-transform-react-jsx'
-]
-
-main()
-
-// Scans codebase for missing or unused dependencies. Exits with code 0 on success.
-function main () {
-  if (process.platform === 'win32') {
-    console.error('Sorry, check-deps only works on Mac and Linux')
-    return
-  }
-
-  var usedDeps = findUsedDeps()
-  var packageDeps = findPackageDeps()
-
-  var missingDeps = usedDeps.filter(
-    (dep) => !includes(packageDeps, dep) && !includes(BUILT_IN_DEPS, dep)
-  )
-  var unusedDeps = packageDeps.filter(
-    (dep) => !includes(usedDeps, dep) && !includes(EXECUTABLE_DEPS, dep)
-  )
-
-  if (missingDeps.length > 0) {
-    console.error('Missing package dependencies: ' + missingDeps)
-  }
-  if (unusedDeps.length > 0) {
-    console.error('Unused package dependencies: ' + unusedDeps)
-  }
-  if (missingDeps.length + unusedDeps.length > 0) {
-    process.exitCode = 1
-  }
-}
-
-// Finds all dependencies specified in `package.json`
-function findPackageDeps () {
-  var pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'))
-
-  var deps = Object.keys(pkg.dependencies)
-  var devDeps = Object.keys(pkg.devDependencies)
-  var optionalDeps = Object.keys(pkg.optionalDependencies)
-
-  return [].concat(deps, devDeps, optionalDeps)
-}
-
-// Finds all dependencies that used with `require()`
-function findUsedDeps () {
-  var stdout = cp.execSync('./bin/list-deps.sh')
-  return stdout.toString().trim().split('\n')
-}
-
-function includes (arr, elem) {
-  return arr.indexOf(elem) >= 0
-}

bin/cmd.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-var electron = require('electron-prebuilt')
+var electron = require('electron')
 var cp = require('child_process')
 var path = require('path')
 

bin/extra-lint.js

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+
+const walkSync = require('walk-sync')
+const fs = require('fs')
+const path = require('path')
+
+let hasErrors = false
+
+// Find all Javascript source files
+var files = walkSync('src', {globs: ['**/*.js']})
+console.log('Running extra-lint on ' + files.length + ' files...')
+
+// Read each file, line by line
+files.forEach(function (file) {
+  var filepath = path.join('src', file)
+  var lines = fs.readFileSync(filepath, 'utf8').split('\n')
+
+  lines.forEach(function (line, i) {
+    var error
+
+    // Consistent JSX tag closing
+    if (line.match(/' {2}\/> *$/) ||
+      line.match('[^ ]/> *$') ||
+      line.match(' > *$')) {
+      error = 'JSX tag spacing'
+    }
+
+    // No lines over 100 characters
+    if (line.length > 100) {
+      error = 'Line >100 chars'
+    }
+
+    if (line.match(/^var /) || line.match(/ var /)) {
+      error = 'Use const or let'
+    }
+
+    if (error) {
+      let name = path.basename(file)
+      console.log('%s:%d - %s:\n%s', name, i + 1, error, line)
+      hasErrors = true
+    }
+  })
+})
+
+if (hasErrors) process.exit(1)
+else console.log('Looks good!')

bin/list-deps.sh

@@ -1,10 +0,0 @@
-#!/bin/sh
-# This is a truly heinous hack, but it works pretty nicely.
-# Find all modules we're requiring---even conditional requires.
-
-grep "require('" src/ bin/ -R |
-    grep '.js:' |
-    sed "s/.*require('\([^'\/]*\).*/\1/" |
-    grep -v '^\.' |
-    sort |
-    uniq

bin/package.js

@@ -105,7 +105,7 @@ var all = {
   prune: true,
 
   // The Electron version with which the app is built (without the leading 'v')
-  version: require('electron-prebuilt/package.json').version
+  version: require('electron/package.json').version
 }
 
 var darwin = {
@@ -484,6 +484,11 @@ function buildLinux (cb) {
       dest: destPath,
       expand: true,
       cwd: filesPath
+    }, {
+      src: ['./**'],
+      dest: path.join('/usr', 'share'),
+      expand: true,
+      cwd: path.join(config.STATIC_PATH, 'linux', 'share')
     }], function (err) {
       if (err) return cb(err)
       console.log(`Linux: Created ${destArch} deb.`)

bin/release-_post.sh

@@ -7,4 +7,4 @@ npm run package -- --sign
 git push
 git push --tags
 npm publish
-./node_modules/.bin/gh-release
+npm run gh-release

bin/update-authors.sh

@@ -12,6 +12,7 @@ while (<>) {
   next if /(ungoldman\@gmail.com)/;
   next if /(dc\@DCs-MacBook.local)/;
   next if /(rolandoguedes\@gmail.com)/;
+  next if /(grunjol\@users.noreply.github.com)/;
   $seen{$_} = push @authors, "- ", $_;
 }
 END {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "webtorrent-desktop",
   "description": "WebTorrent, the streaming torrent client. For Mac, Windows, and Linux.",
-  "version": "0.11.0",
+  "version": "0.14.0",
   "author": {
     "name": "WebTorrent, LLC",
     "email": "feross@webtorrent.io",
@@ -22,18 +22,19 @@
     "deep-equal": "^1.0.1",
     "dlnacasts": "^0.1.0",
     "drag-drop": "^2.12.1",
-    "electron-prebuilt": "1.3.3",
+    "electron": "1.3.3",
     "fs-extra": "^0.30.0",
-    "hat": "0.0.3",
     "iso-639-1": "^1.2.1",
     "languagedetect": "^1.1.1",
     "location-history": "^1.0.0",
+    "material-ui": "^0.15.4",
     "musicmetadata": "^2.0.2",
     "network-address": "^1.1.0",
     "parse-torrent": "^5.7.3",
     "prettier-bytes": "^1.0.1",
     "react": "^15.2.1",
     "react-dom": "^15.2.1",
+    "react-tap-event-plugin": "^1.0.0",
     "run-parallel": "^1.1.6",
     "semver": "^5.1.0",
     "simple-concat": "^1.0.0",
@@ -47,8 +48,11 @@
   "devDependencies": {
     "babel-cli": "^6.11.4",
     "babel-plugin-syntax-jsx": "^6.13.0",
+    "babel-plugin-transform-es2015-destructuring": "^6.9.0",
+    "babel-plugin-transform-object-rest-spread": "^6.8.0",
     "babel-plugin-transform-react-jsx": "^6.8.0",
     "cross-zip": "^2.0.1",
+    "depcheck": "^0.6.4",
     "electron-osx-sign": "^0.3.0",
     "electron-packager": "^7.0.0",
     "electron-winstaller": "^2.3.0",
@@ -56,11 +60,13 @@
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
     "nobin-debian-installer": "^0.0.10",
+    "nodemon": "^1.10.2",
     "open": "0.0.5",
     "plist": "^2.0.1",
     "rimraf": "^2.5.2",
     "run-series": "^1.1.4",
-    "standard": "^8.0.0-beta.5"
+    "standard": "*",
+    "walk-sync": "^0.3.1"
   },
   "engines": {
     "node": ">=4.0.0"
@@ -93,7 +99,9 @@
     "package": "node ./bin/package.js",
     "prepublish": "npm run build",
     "start": "npm run build && electron .",
-    "test": "standard && node ./bin/check-deps.js",
-    "update-authors": "./bin/update-authors.sh"
+    "test": "standard && depcheck --ignores=babel-cli,nodemon,gh-release --ignore-dirs=build,dist && node ./bin/extra-lint.js",
+    "gh-release": "gh-release",
+    "update-authors": "./bin/update-authors.sh",
+    "watch": "nodemon --exec \"npm run start\" --ext js,pug,css"
   }
 }

src/.babelrc

@@ -1,6 +1,8 @@
 {
   "plugins": [
     "syntax-jsx",
+    "transform-es2015-destructuring",
+    "transform-object-rest-spread",
     "transform-react-jsx"
   ]
 }

src/config.js

@@ -1,12 +1,12 @@
-var appConfig = require('application-config')('WebTorrent')
-var fs = require('fs')
-var path = require('path')
+const appConfig = require('application-config')('WebTorrent')
+const fs = require('fs')
+const path = require('path')
 
-var APP_NAME = 'WebTorrent'
-var APP_TEAM = 'WebTorrent, LLC'
-var APP_VERSION = require('../package.json').version
+const APP_NAME = 'WebTorrent'
+const APP_TEAM = 'WebTorrent, LLC'
+const APP_VERSION = require('../package.json').version
 
-var PORTABLE_PATH = path.join(path.dirname(process.execPath), 'Portable Settings')
+const PORTABLE_PATH = path.join(path.dirname(process.execPath), 'Portable Settings')
 
 module.exports = {
   ANNOUNCEMENT_URL: 'https://webtorrent.io/desktop/announcement',
@@ -95,7 +95,7 @@ function getDefaultDownloadPath () {
     return path.join(getConfigPath(), 'Downloads')
   }
 
-  var electron = require('electron')
+  const electron = require('electron')
 
   return process.type === 'renderer'
     ? electron.remote.app.getPath('downloads')

src/crash-reporter.js

@@ -2,8 +2,8 @@ module.exports = {
   init
 }
 
-var config = require('./config')
-var electron = require('electron')
+const config = require('./config')
+const electron = require('electron')
 
 function init () {
   electron.crashReporter.start({

src/main/announcement.js

@@ -2,12 +2,12 @@ module.exports = {
   init
 }
 
-var electron = require('electron')
+const electron = require('electron')
 
-var config = require('../config')
-var log = require('./log')
+const config = require('../config')
+const log = require('./log')
 
-var ANNOUNCEMENT_URL = config.ANNOUNCEMENT_URL +
+const ANNOUNCEMENT_URL = config.ANNOUNCEMENT_URL +
   '?version=' + config.APP_VERSION +
   '&platform=' + process.platform
 
@@ -26,7 +26,7 @@ var ANNOUNCEMENT_URL = config.ANNOUNCEMENT_URL +
  *   }
  */
 function init () {
-  var get = require('simple-get')
+  const get = require('simple-get')
   get.concat(ANNOUNCEMENT_URL, onResponse)
 }
 

src/main/dialog.js

@@ -6,10 +6,10 @@ module.exports = {
   openFiles
 }
 
-var electron = require('electron')
+const electron = require('electron')
 
-var log = require('./log')
-var windows = require('./windows')
+const log = require('./log')
+const windows = require('./windows')
 
 /**
  * Show open dialog to create a single-file torrent.
@@ -17,7 +17,7 @@ var windows = require('./windows')
 function openSeedFile () {
   if (!windows.main.win) return
   log('openSeedFile')
-  var opts = {
+  const opts = {
     title: 'Select a file for the torrent.',
     properties: [ 'openFile' ]
   }
@@ -37,7 +37,7 @@ function openSeedFile () {
 function openSeedDirectory () {
   if (!windows.main.win) return
   log('openSeedDirectory')
-  var opts = process.platform === 'darwin'
+  const opts = process.platform === 'darwin'
     ? {
       title: 'Select a file or folder for the torrent.',
       properties: [ 'openFile', 'openDirectory' ]
@@ -61,7 +61,7 @@ function openSeedDirectory () {
 function openFiles () {
   if (!windows.main.win) return
   log('openFiles')
-  var opts = process.platform === 'darwin'
+  const opts = process.platform === 'darwin'
     ? {
       title: 'Select a file or folder to add.',
       properties: [ 'openFile', 'openDirectory' ]
@@ -84,7 +84,7 @@ function openFiles () {
 function openTorrentFile () {
   if (!windows.main.win) return
   log('openTorrentFile')
-  var opts = {
+  const opts = {
     title: 'Select a .torrent file.',
     filters: [{ name: 'Torrent Files', extensions: ['torrent'] }],
     properties: [ 'openFile', 'multiSelections' ]

src/main/dock.js

@@ -4,19 +4,17 @@ module.exports = {
   setBadge
 }
 
-var electron = require('electron')
+const {app, Menu} = require('electron')
 
-var app = electron.app
-
-var dialog = require('./dialog')
-var log = require('./log')
+const dialog = require('./dialog')
+const log = require('./log')
 
 /**
  * Add a right-click menu to the dock icon. (Mac)
  */
 function init () {
   if (!app.dock) return
-  var menu = electron.Menu.buildFromTemplate(getMenuTemplate())
+  const menu = Menu.buildFromTemplate(getMenuTemplate())
   app.dock.setMenu(menu)
 }
 
@@ -33,8 +31,11 @@ function downloadFinished (path) {
  * Display a counter badge for the app. (Mac, Linux)
  */
 function setBadge (count) {
-  log(`setBadge: ${count}`)
-  app.setBadgeCount(Number(count))
+  if (process.platform === 'darwin' ||
+      process.platform === 'linux' && app.isUnityRunning()) {
+    log(`setBadge: ${count}`)
+    app.setBadgeCount(Number(count))
+  }
 }
 
 function getMenuTemplate () {

src/main/external-player.js

@@ -0,0 +1,71 @@
+module.exports = {
+  spawn,
+  kill,
+  checkInstall
+}
+
+const cp = require('child_process')
+const vlcCommand = require('vlc-command')
+
+const log = require('./log')
+const windows = require('./windows')
+
+// holds a ChildProcess while we're playing a video in an external player, null otherwise
+let proc = null
+
+function checkInstall (path, cb) {
+  // check for VLC if external player has not been specified by the user
+  // otherwise assume the player is installed
+  if (path == null) return vlcCommand((err) => cb(!err))
+  process.nextTick(() => cb(true))
+}
+
+function spawn (path, url, title) {
+  if (path != null) return spawnExternal(path, [url])
+
+  // Try to find and use VLC if external player is not specified
+  vlcCommand(function (err, vlcPath) {
+    if (err) return windows.main.dispatch('externalPlayerNotFound')
+    const args = [
+      '--play-and-exit',
+      '--video-on-top',
+      '--quiet',
+      `--meta-title=${JSON.stringify(title)}`,
+      url
+    ]
+    spawnExternal(vlcPath, args)
+  })
+}
+
+function kill () {
+  if (!proc) return
+  log('Killing external player, pid ' + proc.pid)
+  proc.kill('SIGKILL') // kill -9
+  proc = null
+}
+
+function spawnExternal (path, args) {
+  log('Running external media player:', path + ' ' + args.join(' '))
+
+  proc = cp.spawn(path, args, {stdio: 'ignore'})
+
+  // If it works, close the modal after a second
+  const closeModalTimeout = setTimeout(() =>
+    windows.main.dispatch('exitModal'), 1000)
+
+  proc.on('close', function (code) {
+    clearTimeout(closeModalTimeout)
+    if (!proc) return // Killed
+    log('External player exited with code ', code)
+    if (code === 0) {
+      windows.main.dispatch('backToList')
+    } else {
+      windows.main.dispatch('externalPlayerNotFound')
+    }
+    proc = null
+  })
+
+  proc.on('error', function (e) {
+    log('External player error', e)
+  })
+}

src/main/handlers.js

@@ -3,8 +3,8 @@ module.exports = {
   uninstall
 }
 
-var config = require('../config')
-var path = require('path')
+const config = require('../config')
+const path = require('path')
 
 function install () {
   if (process.platform === 'darwin') {
@@ -31,8 +31,8 @@ function uninstall () {
 }
 
 function installDarwin () {
-  var electron = require('electron')
-  var app = electron.app
+  const electron = require('electron')
+  const app = electron.app
 
   // On Mac, only protocols that are listed in `Info.plist` can be set as the
   // default handler at runtime.
@@ -44,18 +44,18 @@ function installDarwin () {
 
 function uninstallDarwin () {}
 
-var EXEC_COMMAND = [ process.execPath ]
+const EXEC_COMMAND = [ process.execPath ]
 
 if (!config.IS_PRODUCTION) {
   EXEC_COMMAND.push(config.ROOT_PATH)
 }
 
 function installWin32 () {
-  var Registry = require('winreg')
+  const Registry = require('winreg')
 
-  var log = require('./log')
+  const log = require('./log')
 
-  var iconPath = path.join(
+  const iconPath = path.join(
     process.resourcesPath, 'app.asar.unpacked', 'static', 'WebTorrentFile.ico'
   )
   registerProtocolHandlerWin32(
@@ -100,7 +100,7 @@ function installWin32 () {
    */
 
   function registerProtocolHandlerWin32 (protocol, name, icon, command) {
-    var protocolKey = new Registry({
+    const protocolKey = new Registry({
       hive: Registry.HKCU, // HKEY_CURRENT_USER
       key: '\\Software\\Classes\\' + protocol
     })
@@ -120,7 +120,7 @@ function installWin32 () {
     function setIcon (err) {
       if (err) log.error(err.message)
 
-      var iconKey = new Registry({
+      const iconKey = new Registry({
         hive: Registry.HKCU,
         key: '\\Software\\Classes\\' + protocol + '\\DefaultIcon'
       })
@@ -130,7 +130,7 @@ function installWin32 () {
     function setCommand (err) {
       if (err) log.error(err.message)
 
-      var commandKey = new Registry({
+      const commandKey = new Registry({
         hive: Registry.HKCU,
         key: '\\Software\\Classes\\' + protocol + '\\shell\\open\\command'
       })
@@ -161,7 +161,7 @@ function installWin32 () {
     setExt()
 
     function setExt () {
-      var extKey = new Registry({
+      const extKey = new Registry({
         hive: Registry.HKCU, // HKEY_CURRENT_USER
         key: '\\Software\\Classes\\' + ext
       })
@@ -171,7 +171,7 @@ function installWin32 () {
     function setId (err) {
       if (err) log.error(err.message)
 
-      var idKey = new Registry({
+      const idKey = new Registry({
         hive: Registry.HKCU,
         key: '\\Software\\Classes\\' + id
       })
@@ -181,7 +181,7 @@ function installWin32 () {
     function setIcon (err) {
       if (err) log.error(err.message)
 
-      var iconKey = new Registry({
+      const iconKey = new Registry({
         hive: Registry.HKCU,
         key: '\\Software\\Classes\\' + id + '\\DefaultIcon'
       })
@@ -191,7 +191,7 @@ function installWin32 () {
     function setCommand (err) {
       if (err) log.error(err.message)
 
-      var commandKey = new Registry({
+      const commandKey = new Registry({
         hive: Registry.HKCU,
         key: '\\Software\\Classes\\' + id + '\\shell\\open\\command'
       })
@@ -205,7 +205,7 @@ function installWin32 () {
 }
 
 function uninstallWin32 () {
-  var Registry = require('winreg')
+  const Registry = require('winreg')
 
   unregisterProtocolHandlerWin32('magnet', EXEC_COMMAND)
   unregisterProtocolHandlerWin32('stream-magnet', EXEC_COMMAND)
@@ -215,7 +215,7 @@ function uninstallWin32 () {
     getCommand()
 
     function getCommand () {
-      var commandKey = new Registry({
+      const commandKey = new Registry({
         hive: Registry.HKCU, // HKEY_CURRENT_USER
         key: '\\Software\\Classes\\' + protocol + '\\shell\\open\\command'
       })
@@ -227,7 +227,7 @@ function uninstallWin32 () {
     }
 
     function destroyProtocol () {
-      var protocolKey = new Registry({
+      const protocolKey = new Registry({
         hive: Registry.HKCU,
         key: '\\Software\\Classes\\' + protocol
       })
@@ -239,7 +239,7 @@ function uninstallWin32 () {
     eraseId()
 
     function eraseId () {
-      var idKey = new Registry({
+      const idKey = new Registry({
         hive: Registry.HKCU, // HKEY_CURRENT_USER
         key: '\\Software\\Classes\\' + id
       })
@@ -247,7 +247,7 @@ function uninstallWin32 () {
     }
 
     function getExt () {
-      var extKey = new Registry({
+      const extKey = new Registry({
         hive: Registry.HKCU,
         key: '\\Software\\Classes\\' + ext
       })
@@ -259,7 +259,7 @@ function uninstallWin32 () {
     }
 
     function destroyExt () {
-      var extKey = new Registry({
+      const extKey = new Registry({
         hive: Registry.HKCU, // HKEY_CURRENT_USER
         key: '\\Software\\Classes\\' + ext
       })
@@ -273,18 +273,21 @@ function commandToArgs (command) {
 }
 
 function installLinux () {
-  var fs = require('fs-extra')
-  var os = require('os')
-  var path = require('path')
+  const fs = require('fs-extra')
+  const os = require('os')
+  const path = require('path')
 
-  var config = require('../config')
-  var log = require('./log')
+  const config = require('../config')
+  const log = require('./log')
+
+  // Do not install in user dir if running on system
+  if (/^\/opt/.test(process.execPath)) return
 
   installDesktopFile()
   installIconFile()
 
   function installDesktopFile () {
-    var templatePath = path.join(
+    const templatePath = path.join(
       config.STATIC_PATH, 'linux', 'webtorrent-desktop.desktop'
     )
     fs.readFile(templatePath, 'utf8', writeDesktopFile)
@@ -293,7 +296,7 @@ function installLinux () {
   function writeDesktopFile (err, desktopFile) {
     if (err) return log.error(err.message)
 
-    var appPath = config.IS_PRODUCTION
+    const appPath = config.IS_PRODUCTION
       ? path.dirname(process.execPath)
       : config.ROOT_PATH
 
@@ -302,7 +305,7 @@ function installLinux () {
     desktopFile = desktopFile.replace(/\$EXEC_PATH/g, EXEC_COMMAND.join(' '))
     desktopFile = desktopFile.replace(/\$TRY_EXEC_PATH/g, process.execPath)
 
-    var desktopFilePath = path.join(
+    const desktopFilePath = path.join(
       os.homedir(),
       '.local',
       'share',
@@ -316,14 +319,14 @@ function installLinux () {
   }
 
   function installIconFile () {
-    var iconStaticPath = path.join(config.STATIC_PATH, 'WebTorrent.png')
+    const iconStaticPath = path.join(config.STATIC_PATH, 'WebTorrent.png')
     fs.readFile(iconStaticPath, writeIconFile)
   }
 
   function writeIconFile (err, iconFile) {
     if (err) return log.error(err.message)
 
-    var iconFilePath = path.join(
+    const iconFilePath = path.join(
       os.homedir(),
       '.local',
       'share',
@@ -338,11 +341,11 @@ function installLinux () {
 }
 
 function uninstallLinux () {
-  var os = require('os')
-  var path = require('path')
-  var fs = require('fs-extra')
+  const os = require('os')
+  const path = require('path')
+  const fs = require('fs-extra')
 
-  var desktopFilePath = path.join(
+  const desktopFilePath = path.join(
     os.homedir(),
     '.local',
     'share',
@@ -351,7 +354,7 @@ function uninstallLinux () {
   )
   fs.removeSync(desktopFilePath)
 
-  var iconFilePath = path.join(
+  const iconFilePath = path.join(
     os.homedir(),
     '.local',
     'share',

src/main/index.js

@@ -1,26 +1,26 @@
 console.time('init')
 
-var electron = require('electron')
+const electron = require('electron')
 
-var app = electron.app
-var ipcMain = electron.ipcMain
+const app = electron.app
+const ipcMain = electron.ipcMain
 
-var announcement = require('./announcement')
-var config = require('../config')
-var crashReporter = require('../crash-reporter')
-var dialog = require('./dialog')
-var dock = require('./dock')
-var ipc = require('./ipc')
-var log = require('./log')
-var menu = require('./menu')
-var squirrelWin32 = require('./squirrel-win32')
-var tray = require('./tray')
-var updater = require('./updater')
-var userTasks = require('./user-tasks')
-var windows = require('./windows')
+const announcement = require('./announcement')
+const config = require('../config')
+const crashReporter = require('../crash-reporter')
+const dialog = require('./dialog')
+const dock = require('./dock')
+const ipc = require('./ipc')
+const log = require('./log')
+const menu = require('./menu')
+const squirrelWin32 = require('./squirrel-win32')
+const tray = require('./tray')
+const updater = require('./updater')
+const userTasks = require('./user-tasks')
+const windows = require('./windows')
 
-var shouldQuit = false
-var argv = sliceArgv(process.argv)
+let shouldQuit = false
+let argv = sliceArgv(process.argv)
 
 if (config.IS_PRODUCTION) {
   // When Electron is running in production mode (packaged app), then run React
@@ -34,8 +34,8 @@ if (process.platform === 'win32') {
 }
 
 if (!shouldQuit) {
-  // Prevent multiple instances of app from running at same time. New instances signal
-  // this instance and quit.
+  // Prevent multiple instances of app from running at same time. New instances
+  // signal this instance and quit.
   shouldQuit = app.makeSingleInstance(onAppOpen)
   if (shouldQuit) {
     app.quit()
@@ -51,7 +51,7 @@ function init () {
     app.setPath('userData', config.CONFIG_PATH)
   }
 
-  var isReady = false // app ready, windows can be created
+  let isReady = false // app ready, windows can be created
   app.ipcReady = false // main window has finished loading and IPC is ready
   app.isQuitting = false
 
@@ -78,8 +78,8 @@ function init () {
     // Report uncaught exceptions
     process.on('uncaughtException', (err) => {
       console.error(err)
-      var errJSON = {message: err.message, stack: err.stack}
-      windows.main.dispatch('uncaughtError', 'main', errJSON)
+      const error = {message: err.message, stack: err.stack}
+      windows.main.dispatch('uncaughtError', 'main', error)
     })
   })
 
@@ -148,7 +148,7 @@ function sliceArgv (argv) {
 }
 
 function processArgv (argv) {
-  var torrentIds = []
+  let torrentIds = []
   argv.forEach(function (arg) {
     if (arg === '-n') {
       dialog.openSeedDirectory()
@@ -159,7 +159,10 @@ function processArgv (argv) {
     } else if (arg.startsWith('-psn')) {
       // Ignore Mac launchd "process serial number" argument
       // Issue: https://github.com/feross/webtorrent-desktop/issues/214
-    } else {
+    } else if (arg !== '.') {
+      // Ignore '.' argument, which gets misinterpreted as a torrent id, when a
+      // development copy of WebTorrent is started while a production version is
+      // running.
       torrentIds.push(arg)
     }
   })

src/main/ipc.js

@@ -2,30 +2,27 @@ module.exports = {
   init
 }
 
-var electron = require('electron')
+const electron = require('electron')
 
-var app = electron.app
+const app = electron.app
 
-var dialog = require('./dialog')
-var dock = require('./dock')
-var handlers = require('./handlers')
-var log = require('./log')
-var menu = require('./menu')
-var powerSaveBlocker = require('./power-save-blocker')
-var shell = require('./shell')
-var shortcuts = require('./shortcuts')
-var vlc = require('./vlc')
-var windows = require('./windows')
-var thumbar = require('./thumbar')
+const dialog = require('./dialog')
+const dock = require('./dock')
+const handlers = require('./handlers')
+const log = require('./log')
+const menu = require('./menu')
+const powerSaveBlocker = require('./power-save-blocker')
+const shell = require('./shell')
+const shortcuts = require('./shortcuts')
+const externalPlayer = require('./external-player')
+const windows = require('./windows')
+const thumbar = require('./thumbar')
 
 // Messages from the main process, to be sent once the WebTorrent process starts
-var messageQueueMainToWebTorrent = []
-
-// holds a ChildProcess while we're playing a video in VLC, null otherwise
-var vlcProcess
+const messageQueueMainToWebTorrent = []
 
 function init () {
-  var ipc = electron.ipcMain
+  const ipc = electron.ipcMain
 
   ipc.once('ipcReady', function (e) {
     app.ipcReady = true
@@ -67,6 +64,11 @@ function init () {
     thumbar.enable()
   })
 
+  ipc.on('onPlayerUpdate', function (e, ...args) {
+    menu.onPlayerUpdate(...args)
+    thumbar.onPlayerUpdate(...args)
+  })
+
   ipc.on('onPlayerClose', function () {
     menu.setPlayerOpen(false)
     powerSaveBlocker.disable()
@@ -104,7 +106,7 @@ function init () {
    * Windows: Main
    */
 
-  var main = windows.main
+  const main = windows.main
 
   ipc.on('setAspectRatio', (e, ...args) => main.setAspectRatio(...args))
   ipc.on('setBounds', (e, ...args) => main.setBounds(...args))
@@ -115,55 +117,20 @@ function init () {
   ipc.on('setAllowNav', (e, ...args) => menu.setAllowNav(...args))
 
   /**
-   * VLC
-   * TODO: Move most of this code to vlc.js
+   * External Media Player
    */
 
-  ipc.on('checkForVLC', function (e) {
-    vlc.checkForVLC(function (isInstalled) {
-      windows.main.send('checkForVLC', isInstalled)
+  ipc.on('checkForExternalPlayer', function (e, path) {
+    externalPlayer.checkInstall(path, function (isInstalled) {
+      windows.main.send('checkForExternalPlayer', isInstalled)
     })
   })
 
-  ipc.on('vlcPlay', function (e, url, title) {
-    var args = ['--play-and-exit', '--video-on-top', '--no-video-title-show', '--quiet', `--meta-title=${title}`, url]
-    log('Running vlc ' + args.join(' '))
-
-    vlc.spawn(args, function (err, proc) {
-      if (err) return windows.main.dispatch('vlcNotFound')
-      vlcProcess = proc
-
-      // If it works, close the modal after a second
-      var closeModalTimeout = setTimeout(() =>
-        windows.main.dispatch('exitModal'), 1000)
-
-      vlcProcess.on('close', function (code) {
-        clearTimeout(closeModalTimeout)
-        if (!vlcProcess) return // Killed
-        log('VLC exited with code ', code)
-        if (code === 0) {
-          windows.main.dispatch('backToList')
-        } else {
-          windows.main.dispatch('vlcNotFound')
-        }
-        vlcProcess = null
-      })
-
-      vlcProcess.on('error', function (e) {
-        log('VLC error', e)
-      })
-    })
-  })
-
-  ipc.on('vlcQuit', function () {
-    if (!vlcProcess) return
-    log('Killing VLC, pid ' + vlcProcess.pid)
-    vlcProcess.kill('SIGKILL') // kill -9
-    vlcProcess = null
-  })
+  ipc.on('openExternalPlayer', (e, ...args) => externalPlayer.spawn(...args))
+  ipc.on('quitExternalPlayer', () => externalPlayer.kill())
 
   // Capture all events
-  var oldEmit = ipc.emit
+  const oldEmit = ipc.emit
   ipc.emit = function (name, e, ...args) {
     // Relay messages between the main window and the WebTorrent hidden window
     if (name.startsWith('wt-') && !app.isQuitting) {

src/main/log.js

@@ -8,10 +8,10 @@ module.exports.error = error
  * where they can be viewed in Developer Tools.
  */
 
-var electron = require('electron')
-var windows = require('./windows')
+const electron = require('electron')
+const windows = require('./windows')
 
-var app = electron.app
+const app = electron.app
 
 function log (...args) {
   if (app.ipcReady) {

src/main/menu.js

@@ -3,20 +3,21 @@ module.exports = {
   setPlayerOpen,
   setWindowFocus,
   setAllowNav,
+  onPlayerUpdate,
   onToggleAlwaysOnTop,
   onToggleFullScreen
 }
 
-var electron = require('electron')
+const electron = require('electron')
 
-var app = electron.app
+const app = electron.app
 
-var config = require('../config')
-var dialog = require('./dialog')
-var shell = require('./shell')
-var windows = require('./windows')
+const config = require('../config')
+const dialog = require('./dialog')
+const shell = require('./shell')
+const windows = require('./windows')
 
-var menu
+let menu = null
 
 function init () {
   menu = electron.Menu.buildFromTemplate(getMenuTemplate())
@@ -25,6 +26,8 @@ function init () {
 
 function setPlayerOpen (flag) {
   getMenuItem('Play/Pause').enabled = flag
+  getMenuItem('Skip Next').enabled = flag
+  getMenuItem('Skip Previous').enabled = flag
   getMenuItem('Increase Volume').enabled = flag
   getMenuItem('Decrease Volume').enabled = flag
   getMenuItem('Step Forward').enabled = flag
@@ -32,6 +35,16 @@ function setPlayerOpen (flag) {
   getMenuItem('Increase Speed').enabled = flag
   getMenuItem('Decrease Speed').enabled = flag
   getMenuItem('Add Subtitles File...').enabled = flag
+
+  if (flag === false) {
+    getMenuItem('Skip Next').enabled = false
+    getMenuItem('Skip Previous').enabled = false
+  }
+}
+
+function onPlayerUpdate (hasNext, hasPrevious) {
+  getMenuItem('Skip Next').enabled = hasNext
+  getMenuItem('Skip Previous').enabled = hasPrevious
 }
 
 function setWindowFocus (flag) {
@@ -42,9 +55,12 @@ function setWindowFocus (flag) {
 // Disallow opening more screens on top of the current one.
 function setAllowNav (flag) {
   getMenuItem('Preferences').enabled = flag
-  getMenuItem('Create New Torrent...').enabled = flag
-  var item = getMenuItem('Create New Torrent from File...')
-  if (item) item.enabled = flag
+  if (process.platform === 'darwin') {
+    getMenuItem('Create New Torrent...').enabled = flag
+  } else {
+    getMenuItem('Create New Torrent from Folder...').enabled = flag
+    getMenuItem('Create New Torrent from File...').enabled = flag
+  }
 }
 
 function onToggleAlwaysOnTop (flag) {
@@ -56,8 +72,8 @@ function onToggleFullScreen (flag) {
 }
 
 function getMenuItem (label) {
-  for (var i = 0; i < menu.items.length; i++) {
-    var menuItem = menu.items[i].submenu.items.find(function (item) {
+  for (let i = 0; i < menu.items.length; i++) {
+    const menuItem = menu.items[i].submenu.items.find(function (item) {
       return item.label === label
     })
     if (menuItem) return menuItem
@@ -65,7 +81,7 @@ function getMenuItem (label) {
 }
 
 function getMenuTemplate () {
-  var template = [
+  const template = [
     {
       label: 'File',
       submenu: [
@@ -184,6 +200,21 @@ function getMenuTemplate () {
         {
           type: 'separator'
         },
+        {
+          label: 'Skip Next',
+          accelerator: 'N',
+          click: () => windows.main.dispatch('nextTrack'),
+          enabled: false
+        },
+        {
+          label: 'Skip Previous',
+          accelerator: 'P',
+          click: () => windows.main.dispatch('previousTrack'),
+          enabled: false
+        },
+        {
+          type: 'separator'
+        },
         {
           label: 'Increase Volume',
           accelerator: 'CmdOrCtrl+Up',

src/main/power-save-blocker.js

@@ -3,17 +3,20 @@ module.exports = {
   disable
 }
 
-var electron = require('electron')
-var log = require('./log')
+const electron = require('electron')
+const log = require('./log')
 
-var blockId = 0
+let blockId = 0
 
 /**
  * Block the system from entering low-power (sleep) mode or turning off the
  * display.
  */
 function enable () {
-  disable() // Stop the previous power saver block, if one exists.
+  if (electron.powerSaveBlocker.isStarted(blockId)) {
+    // If a power saver block already exists, do nothing.
+    return
+  }
   blockId = electron.powerSaveBlocker.start('prevent-display-sleep')
   log(`powerSaveBlocker.enable: ${blockId}`)
 }
@@ -23,6 +26,7 @@ function enable () {
  */
 function disable () {
   if (!electron.powerSaveBlocker.isStarted(blockId)) {
+    // If a power saver block does not exist, do nothing.
     return
   }
   electron.powerSaveBlocker.stop(blockId)

src/main/shell.js

@@ -5,8 +5,8 @@ module.exports = {
   moveItemToTrash
 }
 
-var electron = require('electron')
-var log = require('./log')
+const electron = require('electron')
+const log = require('./log')
 
 /**
  * Open the given external protocol URL in the desktop’s default manner.

src/main/shortcuts.js

@@ -3,8 +3,8 @@ module.exports = {
   enable
 }
 
-var electron = require('electron')
-var windows = require('./windows')
+const electron = require('electron')
+const windows = require('./windows')
 
 function enable () {
   // Register play/pause media key, available on some keyboards.
@@ -12,9 +12,19 @@ function enable () {
     'MediaPlayPause',
     () => windows.main.dispatch('playPause')
   )
+  electron.globalShortcut.register(
+    'MediaNextTrack',
+    () => windows.main.dispatch('nextTrack')
+  )
+  electron.globalShortcut.register(
+    'MediaPreviousTrack',
+    () => windows.main.dispatch('previousTrack')
+  )
 }
 
 function disable () {
   // Return the media key to the OS, so other apps can use it.
   electron.globalShortcut.unregister('MediaPlayPause')
+  electron.globalShortcut.unregister('MediaNextTrack')
+  electron.globalShortcut.unregister('MediaPreviousTrack')
 }

src/main/squirrel-win32.js

@@ -2,18 +2,18 @@ module.exports = {
   handleEvent
 }
 
-var cp = require('child_process')
-var electron = require('electron')
-var fs = require('fs')
-var os = require('os')
-var path = require('path')
+const cp = require('child_process')
+const electron = require('electron')
+const fs = require('fs')
+const os = require('os')
+const path = require('path')
 
-var app = electron.app
+const app = electron.app
 
-var handlers = require('./handlers')
+const handlers = require('./handlers')
 
-var EXE_NAME = path.basename(process.execPath)
-var UPDATE_EXE = path.join(process.execPath, '..', '..', 'Update.exe')
+const EXE_NAME = path.basename(process.execPath)
+const UPDATE_EXE = path.join(process.execPath, '..', '..', 'Update.exe')
 
 function handleEvent (cmd) {
   if (cmd === '--squirrel-install') {
@@ -73,9 +73,9 @@ function handleEvent (cmd) {
  * the output from standard out.
  */
 function spawn (command, args, cb) {
-  var stdout = ''
-
-  var child
+  let stdout = ''
+  let error = null
+  let child = null
   try {
     child = cp.spawn(command, args)
   } catch (err) {
@@ -90,10 +90,10 @@ function spawn (command, args, cb) {
     stdout += data
   })
 
-  var error = null
   child.on('error', function (processError) {
     error = processError
   })
+
   child.on('close', function (code, signal) {
     if (code !== 0 && !error) error = new Error('Command failed: #{signal || code}')
     if (error) error.stdout = stdout
@@ -122,12 +122,12 @@ function createShortcuts (cb) {
  * command.
  */
 function updateShortcuts (cb) {
-  var homeDir = os.homedir()
+  const homeDir = os.homedir()
   if (homeDir) {
-    var desktopShortcutPath = path.join(homeDir, 'Desktop', 'WebTorrent.lnk')
+    const desktopShortcutPath = path.join(homeDir, 'Desktop', 'WebTorrent.lnk')
     // If the desktop shortcut was deleted by the user, then keep it deleted.
     fs.access(desktopShortcutPath, function (err) {
-      var desktopShortcutExists = !err
+      const desktopShortcutExists = !err
       createShortcuts(function () {
         if (desktopShortcutExists) {
           cb()

src/main/thumbar.js

@@ -2,7 +2,8 @@ module.exports = {
   disable,
   enable,
   onPlayerPause,
-  onPlayerPlay
+  onPlayerPlay,
+  onPlayerUpdate
 }
 
 /**
@@ -11,44 +12,80 @@ module.exports = {
  * or activating the window.
  */
 
-var path = require('path')
-var config = require('../config')
+const path = require('path')
+const config = require('../config')
 
-var windows = require('./windows')
+const windows = require('./windows')
+
+const PREV_ICON = path.join(config.STATIC_PATH, 'PreviousTrackThumbnailBarButton.png')
+const PLAY_ICON = path.join(config.STATIC_PATH, 'PlayThumbnailBarButton.png')
+const PAUSE_ICON = path.join(config.STATIC_PATH, 'PauseThumbnailBarButton.png')
+const NEXT_ICON = path.join(config.STATIC_PATH, 'NextTrackThumbnailBarButton.png')
+
+// Array indices for each button
+const PREV = 0
+const PLAY_PAUSE = 1
+const NEXT = 2
+
+let buttons = []
 
 /**
  * Show the Windows thumbnail toolbar buttons.
  */
 function enable () {
-  update(false)
+  buttons = [
+    {
+      tooltip: 'Previous Track',
+      icon: PREV_ICON,
+      click: () => windows.main.dispatch('previousTrack')
+    },
+    {
+      tooltip: 'Pause',
+      icon: PAUSE_ICON,
+      click: () => windows.main.dispatch('playPause')
+    },
+    {
+      tooltip: 'Next Track',
+      icon: NEXT_ICON,
+      click: () => windows.main.dispatch('nextTrack')
+    }
+  ]
+  update()
 }
 
 /**
  * Hide the Windows thumbnail toolbar buttons.
  */
 function disable () {
-  windows.main.win.setThumbarButtons([])
+  buttons = []
+  update()
 }
 
 function onPlayerPause () {
-  update(true)
+  if (!isEnabled()) return
+  buttons[PLAY_PAUSE].tooltip = 'Play'
+  buttons[PLAY_PAUSE].icon = PLAY_ICON
+  update()
 }
 
 function onPlayerPlay () {
-  update(false)
+  if (!isEnabled()) return
+  buttons[PLAY_PAUSE].tooltip = 'Pause'
+  buttons[PLAY_PAUSE].icon = PAUSE_ICON
+  update()
 }
 
-function update (isPaused) {
-  var icon = isPaused
-    ? 'PlayThumbnailBarButton.png'
-    : 'PauseThumbnailBarButton.png'
+function onPlayerUpdate (state) {
+  if (!isEnabled()) return
+  buttons[PREV].flags = [ state.hasPrevious ? 'enabled' : 'disabled' ]
+  buttons[NEXT].flags = [ state.hasNext ? 'enabled' : 'disabled' ]
+  update()
+}
 
-  var buttons = [
-    {
-      tooltip: isPaused ? 'Play' : 'Pause',
-      icon: path.join(config.STATIC_PATH, icon),
-      click: () => windows.main.dispatch('playPause')
-    }
-  ]
+function isEnabled () {
+  return buttons.length > 0
+}
+
+function update () {
   windows.main.win.setThumbarButtons(buttons)
 }

src/main/tray.js

@@ -4,14 +4,14 @@ module.exports = {
   setWindowFocus
 }
 
-var electron = require('electron')
+const electron = require('electron')
 
-var app = electron.app
+const app = electron.app
 
-var config = require('../config')
-var windows = require('./windows')
+const config = require('../config')
+const windows = require('./windows')
 
-var tray
+let tray
 
 function init () {
   if (process.platform === 'linux') {
@@ -49,7 +49,7 @@ function initWin32 () {
  * Check for libappindicator1 support before creating tray icon
  */
 function checkLinuxTraySupport (cb) {
-  var cp = require('child_process')
+  const cp = require('child_process')
 
   // Check that we're on Ubuntu (or another debian system) and that we have
   // libappindicator1. If WebTorrent was installed from the deb file, we should
@@ -74,7 +74,7 @@ function createTray () {
 }
 
 function updateTrayMenu () {
-  var contextMenu = electron.Menu.buildFromTemplate(getMenuTemplate())
+  const contextMenu = electron.Menu.buildFromTemplate(getMenuTemplate())
   tray.setContextMenu(contextMenu)
 }
 

src/main/updater.js

@@ -2,14 +2,14 @@ module.exports = {
   init
 }
 
-var electron = require('electron')
-var get = require('simple-get')
+const electron = require('electron')
+const get = require('simple-get')
 
-var config = require('../config')
-var log = require('./log')
-var windows = require('./windows')
+const config = require('../config')
+const log = require('./log')
+const windows = require('./windows')
 
-var AUTO_UPDATE_URL = config.AUTO_UPDATE_URL +
+const AUTO_UPDATE_URL = config.AUTO_UPDATE_URL +
   '?version=' + config.APP_VERSION +
   '&platform=' + process.platform
 

src/main/user-tasks.js

@@ -2,9 +2,9 @@ module.exports = {
   init
 }
 
-var electron = require('electron')
+const electron = require('electron')
 
-var app = electron.app
+const app = electron.app
 
 /**
  * Add a user task menu to the app icon on right-click. (Windows)

src/main/vlc.js

@@ -1,22 +0,0 @@
-module.exports = {
-  checkForVLC,
-  spawn
-}
-
-var cp = require('child_process')
-var vlcCommand = require('vlc-command')
-
-// Finds if VLC is installed on Mac, Windows, or Linux.
-// Calls back with true or false: whether VLC was detected
-function checkForVLC (cb) {
-  vlcCommand((err) => cb(!err))
-}
-
-// Spawns VLC with child_process.spawn() to return a ChildProcess object
-// Calls back with (err, childProcess)
-function spawn (args, cb) {
-  vlcCommand(function (err, vlcPath) {
-    if (err) return cb(err)
-    cb(null, cp.spawn(vlcPath, args))
-  })
-}

src/main/windows/about.js

@@ -1,17 +1,17 @@
-var about = module.exports = {
+const about = module.exports = {
   init,
   win: null
 }
 
-var config = require('../../config')
-var electron = require('electron')
+const config = require('../../config')
+const electron = require('electron')
 
 function init () {
   if (about.win) {
     return about.win.show()
   }
 
-  var win = about.win = new electron.BrowserWindow({
+  const win = about.win = new electron.BrowserWindow({
     backgroundColor: '#ECECEC',
     center: true,
     fullscreen: false,

src/main/windows/main.js

@@ -1,4 +1,4 @@
-var main = module.exports = {
+const main = module.exports = {
   dispatch,
   hide,
   init,
@@ -14,24 +14,24 @@ var main = module.exports = {
   win: null
 }
 
-var electron = require('electron')
+const electron = require('electron')
 
-var app = electron.app
+const app = electron.app
 
-var config = require('../../config')
-var log = require('../log')
-var menu = require('../menu')
-var tray = require('../tray')
+const config = require('../../config')
+const log = require('../log')
+const menu = require('../menu')
+const tray = require('../tray')
 
-var HEADER_HEIGHT = 37
-var TORRENT_HEIGHT = 100
+const HEADER_HEIGHT = 38
+const TORRENT_HEIGHT = 100
 
 function init () {
   if (main.win) {
     return main.win.show()
   }
-  var win = main.win = new electron.BrowserWindow({
-    backgroundColor: '#1E1E1E',
+  const win = main.win = new electron.BrowserWindow({
+    backgroundColor: '#282828',
     darkTheme: true, // Forces dark theme (GTK+3)
     icon: getIconPath(), // Window icon (Windows, Linux)
     minWidth: config.WINDOW_MIN_WIDTH,
@@ -114,7 +114,7 @@ function setBounds (bounds, maximize) {
   }
 
   // Maximize or minimize, if the second argument is present
-  var willBeMaximized
+  let willBeMaximized
   if (maximize === true) {
     if (!main.win.isMaximized()) {
       log('setBounds: maximizing')
@@ -136,14 +136,18 @@ function setBounds (bounds, maximize) {
     log('setBounds: setting bounds to ' + JSON.stringify(bounds))
     if (bounds.x === null && bounds.y === null) {
       // X and Y not specified? By default, center on current screen
-      var scr = electron.screen.getDisplayMatching(main.win.getBounds())
+      const scr = electron.screen.getDisplayMatching(main.win.getBounds())
       bounds.x = Math.round(scr.bounds.x + scr.bounds.width / 2 - bounds.width / 2)
       bounds.y = Math.round(scr.bounds.y + scr.bounds.height / 2 - bounds.height / 2)
       log('setBounds: centered to ' + JSON.stringify(bounds))
     }
     // Resize the window's content area (so window border doesn't need to be taken
     // into account)
-    main.win.setContentBounds(bounds, true)
+    if (bounds.contentBounds) {
+      main.win.setContentBounds(bounds, true)
+    } else {
+      main.win.setBounds(bounds, true)
+    }
   } else {
     log('setBounds: not setting bounds because of window maximization')
   }

src/main/windows/webtorrent.js

@@ -1,4 +1,4 @@
-var webtorrent = module.exports = {
+const webtorrent = module.exports = {
   init,
   send,
   show,
@@ -6,13 +6,13 @@ var webtorrent = module.exports = {
   win: null
 }
 
-var electron = require('electron')
+const electron = require('electron')
 
-var config = require('../../config')
-var log = require('../log')
+const config = require('../../config')
+const log = require('../log')
 
 function init () {
-  var win = webtorrent.win = new electron.BrowserWindow({
+  const win = webtorrent.win = new electron.BrowserWindow({
     backgroundColor: '#1E1E1E',
     center: true,
     fullscreen: false,

src/renderer/components/header.js

@@ -2,11 +2,11 @@ const React = require('react')
 
 const {dispatcher} = require('../lib/dispatcher')
 
-module.exports = class Header extends React.Component {
+class Header extends React.Component {
   render () {
-    var loc = this.props.state.location
+    const loc = this.props.state.location
     return (
-      <div key='header' className='header'>
+      <div className='header'>
         {this.getTitle()}
         <div className='nav left float-left'>
           <i
@@ -31,12 +31,12 @@ module.exports = class Header extends React.Component {
 
   getTitle () {
     if (process.platform !== 'darwin') return null
-    var state = this.props.state
+    const state = this.props.state
     return (<div className='title ellipsis'>{state.window.title}</div>)
   }
 
   getAddButton () {
-    var state = this.props.state
+    const state = this.props.state
     if (state.location.url() !== 'home') return null
     return (
       <i
@@ -48,3 +48,5 @@ module.exports = class Header extends React.Component {
     )
   }
 }
+
+module.exports = Header

src/renderer/components/heading.js

@@ -0,0 +1,34 @@
+const React = require('react')
+
+const colors = require('material-ui/styles/colors')
+
+class Heading extends React.Component {
+  static get propTypes () {
+    return {
+      level: React.PropTypes.number
+    }
+  }
+
+  static get defaultProps () {
+    return {
+      level: 1
+    }
+  }
+
+  render () {
+    const HeadingTag = 'h' + this.props.level
+    const style = {
+      color: colors.grey100,
+      fontSize: 20,
+      marginBottom: 15,
+      marginTop: 30
+    }
+    return (
+      <HeadingTag style={style}>
+        {this.props.children}
+      </HeadingTag>
+    )
+  }
+}
+
+module.exports = Heading

src/renderer/components/modal-ok-cancel.js

@@ -0,0 +1,24 @@
+const React = require('react')
+const FlatButton = require('material-ui/FlatButton').default
+const RaisedButton = require('material-ui/RaisedButton').default
+
+module.exports = class ModalOKCancel extends React.Component {
+  render () {
+    const cancelStyle = { marginRight: 10, color: 'black' }
+    const {cancelText, onCancel, okText, onOK} = this.props
+    return (
+      <div className='float-right'>
+        <FlatButton
+          className='control'
+          style={cancelStyle}
+          label={cancelText}
+          onClick={onCancel} />
+        <RaisedButton
+          className='control'
+          primary
+          label={okText}
+          onClick={onOK} />
+      </div>
+    )
+  }
+}

src/renderer/components/open-torrent-address-modal.js

@@ -0,0 +1,40 @@
+const React = require('react')
+const TextField = require('material-ui/TextField').default
+
+const ModalOKCancel = require('./modal-ok-cancel')
+const {dispatch, dispatcher} = require('../lib/dispatcher')
+
+module.exports = class OpenTorrentAddressModal extends React.Component {
+  render () {
+    return (
+      <div className='open-torrent-address-modal'>
+        <p><label>Enter torrent address or magnet link</label></p>
+        <div>
+          <TextField
+            className='control'
+            ref={(c) => { this.torrentURL = c }}
+            fullWidth
+            onKeyDown={handleKeyDown.bind(this)} />
+        </div>
+        <ModalOKCancel
+          cancelText='CANCEL'
+          onCancel={dispatcher('exitModal')}
+          okText='OK'
+          onOK={handleOK.bind(this)} />
+      </div>
+    )
+  }
+
+  componentDidMount () {
+    this.torrentURL.input.focus()
+  }
+}
+
+function handleKeyDown (e) {
+  if (e.which === 13) this.handleOK() /* hit Enter to submit */
+}
+
+function handleOK () {
+  dispatch('exitModal')
+  dispatch('addTorrent', this.torrentURL.input.value)
+}

src/renderer/components/path-selector.js

@@ -0,0 +1,86 @@
+const colors = require('material-ui/styles/colors')
+const electron = require('electron')
+const React = require('react')
+
+const remote = electron.remote
+
+const RaisedButton = require('material-ui/RaisedButton').default
+const TextField = require('material-ui/TextField').default
+
+// Lets you pick a file or directory.
+// Uses the system Open File dialog.
+// You can't edit the text field directly.
+class PathSelector extends React.Component {
+  static get propTypes () {
+    return {
+      className: React.PropTypes.string,
+      dialog: React.PropTypes.object,
+      displayValue: React.PropTypes.string,
+      id: React.PropTypes.string,
+      onChange: React.PropTypes.func,
+      title: React.PropTypes.string.isRequired,
+      value: React.PropTypes.string
+    }
+  }
+
+  constructor (props) {
+    super(props)
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  handleClick () {
+    const opts = Object.assign({
+      defaultPath: this.props.value,
+      properties: [ 'openFile', 'openDirectory' ]
+    }, this.props.dialog)
+
+    remote.dialog.showOpenDialog(
+      remote.getCurrentWindow(),
+      opts,
+      (filenames) => {
+        if (!Array.isArray(filenames)) return
+        this.props.onChange && this.props.onChange(filenames[0])
+      }
+    )
+  }
+
+  render () {
+    const id = this.props.title.replace(' ', '-').toLowerCase()
+    const wrapperStyle = {
+      alignItems: 'center',
+      display: 'flex',
+      width: '100%'
+    }
+    const labelStyle = {
+      flex: '0 auto',
+      marginRight: 10,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+    const textareaStyle = {
+      color: colors.grey50
+    }
+    const textFieldStyle = {
+      flex: '1'
+    }
+    const text = this.props.displayValue || this.props.value
+    const buttonStyle = {
+      marginLeft: 10
+    }
+
+    return (
+      <div className={this.props.className} style={wrapperStyle}>
+        <div className='label' style={labelStyle}>
+          {this.props.title}:
+        </div>
+        <TextField className='control' disabled id={id} value={text}
+          inputStyle={textareaStyle} style={textFieldStyle} />
+        <RaisedButton className='control' label='Change' onClick={this.handleClick}
+          style={buttonStyle} />
+      </div>
+    )
+  }
+}
+
+module.exports = PathSelector

src/renderer/components/remove-torrent-modal.js

@@ -1,22 +1,24 @@
 const React = require('react')
 
+const ModalOKCancel = require('./modal-ok-cancel')
 const {dispatch, dispatcher} = require('../lib/dispatcher')
 
 module.exports = class RemoveTorrentModal extends React.Component {
   render () {
-    var state = this.props.state
-    var message = state.modal.deleteData
+    const state = this.props.state
+    const message = state.modal.deleteData
       ? 'Are you sure you want to remove this torrent from the list and delete the data file?'
       : 'Are you sure you want to remove this torrent from the list?'
-    var buttonText = state.modal.deleteData ? 'Remove Data' : 'Remove'
+    const buttonText = state.modal.deleteData ? 'REMOVE DATA' : 'REMOVE'
 
     return (
       <div>
         <p><strong>{message}</strong></p>
-        <p className='float-right'>
-          <button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
-          <button className='button button-raised' onClick={handleRemove}>{buttonText}</button>
-        </p>
+        <ModalOKCancel
+          cancelText='CANCEL'
+          onCancel={dispatcher('exitModal')}
+          okText={buttonText}
+          onOK={handleRemove} />
       </div>
     )
 

src/renderer/components/show-more.js

@@ -0,0 +1,52 @@
+const React = require('react')
+
+const FlatButton = require('material-ui/FlatButton').default
+
+class ShowMore extends React.Component {
+  static get propTypes () {
+    return {
+      defaultExpanded: React.PropTypes.bool,
+      hideLabel: React.PropTypes.string,
+      showLabel: React.PropTypes.string
+    }
+  }
+
+  static get defaultProps () {
+    return {
+      hideLabel: 'Hide more...',
+      showLabel: 'Show more...'
+    }
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      expanded: !!this.props.defaultExpanded
+    }
+
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  handleClick () {
+    this.setState({
+      expanded: !this.state.expanded
+    })
+  }
+
+  render () {
+    const label = this.state.expanded
+      ? this.props.hideLabel
+      : this.props.showLabel
+    return (
+      <div style={this.props.style}>
+        {this.state.expanded ? this.props.children : null}
+        <FlatButton
+          onClick={this.handleClick}
+          label={label} />
+      </div>
+    )
+  }
+}
+
+module.exports = ShowMore

src/renderer/components/unsupported-media-modal.js

@@ -0,0 +1,49 @@
+const React = require('react')
+const electron = require('electron')
+const path = require('path')
+
+const ModalOKCancel = require('./modal-ok-cancel')
+const {dispatcher} = require('../lib/dispatcher')
+
+module.exports = class UnsupportedMediaModal extends React.Component {
+  render () {
+    const state = this.props.state
+    const err = state.modal.error
+    const message = (err && err.getMessage)
+      ? err.getMessage()
+      : err
+    const playerPath = state.saved.prefs.externalPlayerPath
+    const playerName = playerPath
+      ? path.basename(playerPath).split('.')[0]
+      : 'VLC'
+    const onAction = state.modal.externalPlayerInstalled
+      ? dispatcher('openExternalPlayer')
+      : () => this.onInstall()
+    const actionText = state.modal.externalPlayerInstalled
+      ? 'PLAY IN ' + playerName.toUpperCase()
+      : 'INSTALL VLC'
+    const errorMessage = state.modal.externalPlayerNotFound
+      ? 'Couldn\'t run external player. Please make sure it\'s installed.'
+      : ''
+    return (
+      <div>
+        <p><strong>Sorry, we can't play that file.</strong></p>
+        <p>{message}</p>
+        <ModalOKCancel
+          cancelText='CANCEL'
+          onCancel={dispatcher('backToList')}
+          okText={actionText}
+          onOK={onAction} />
+        <p className='error-text'>{errorMessage}</p>
+      </div>
+    )
+  }
+
+  onInstall () {
+    electron.shell.openExternal('http://www.videolan.org/vlc/')
+
+    // TODO: dcposch send a dispatch rather than modifying state directly
+    const state = this.props.state
+    state.modal.externalPlayerInstalled = true // Assume they'll install it successfully
+  }
+}

src/renderer/components/update-available-modal.js

@@ -1,19 +1,24 @@
 const React = require('react')
 const electron = require('electron')
 
+const ModalOKCancel = require('./modal-ok-cancel')
 const {dispatch} = require('../lib/dispatcher')
 
 module.exports = class UpdateAvailableModal extends React.Component {
   render () {
-    var state = this.props.state
+    const state = this.props.state
     return (
       <div className='update-available-modal'>
         <p><strong>A new version of WebTorrent is available: v{state.modal.version}</strong></p>
-        <p>We have an auto-updater for Windows and Mac. We don't have one for Linux yet, so you'll have to download the new version manually.</p>
-        <p className='float-right'>
-          <button className='button button-flat' onClick={handleSkip}>Skip This Release</button>
-          <button className='button button-raised' onClick={handleShow}>Show Download Page</button>
+        <p>
+          We have an auto-updater for Windows and Mac.
+          We don't have one for Linux yet, so you'll have to download the new version manually.
         </p>
+        <ModalOKCancel
+          cancelText='SKIP THIS RELEASE'
+          onCancel={handleSkip}
+          okText='SHOW DOWNLOAD PAGE'
+          onOK={handleShow} />
       </div>
     )
 

src/renderer/controllers/media-controller.js

@@ -2,6 +2,8 @@ const electron = require('electron')
 
 const ipcRenderer = electron.ipcRenderer
 
+const Playlist = require('../lib/playlist')
+
 // Controls local play back: the <video>/<audio> tag and VLC
 // Does not control remote casting (Chromecast etc)
 module.exports = class MediaController {
@@ -18,16 +20,16 @@ module.exports = class MediaController {
   }
 
   mediaError (error) {
-    var state = this.state
+    const state = this.state
     if (state.location.url() === 'player') {
       state.playing.result = 'error'
       state.playing.location = 'error'
-      ipcRenderer.send('checkForVLC')
-      ipcRenderer.once('checkForVLC', function (e, isInstalled) {
+      ipcRenderer.send('checkForExternalPlayer', state.saved.prefs.externalPlayerPath)
+      ipcRenderer.once('checkForExternalPlayer', function (e, isInstalled) {
         state.modal = {
           id: 'unsupported-media-modal',
           error: error,
-          vlcInstalled: isInstalled
+          externalPlayerInstalled: isInstalled
         }
       })
     }
@@ -42,15 +44,20 @@ module.exports = class MediaController {
     this.state.playing.mouseStationarySince = new Date().getTime()
   }
 
-  vlcPlay () {
-    ipcRenderer.send('vlcPlay', this.state.server.localURL, this.state.window.title)
-    this.state.playing.location = 'vlc'
+  openExternalPlayer () {
+    const state = this.state
+    const mediaURL = Playlist.getCurrentLocalURL(this.state)
+    ipcRenderer.send('openExternalPlayer',
+      state.saved.prefs.externalPlayerPath,
+      mediaURL,
+      state.window.title)
+    state.playing.location = 'external'
   }
 
-  vlcNotFound () {
-    var modal = this.state.modal
+  externalPlayerNotFound () {
+    const modal = this.state.modal
     if (modal && modal.id === 'unsupported-media-modal') {
-      modal.vlcNotFound = true
+      modal.externalPlayerNotFound = true
     }
   }
 }

src/renderer/controllers/playback-controller.js

@@ -8,12 +8,13 @@ const errors = require('../lib/errors')
 const sound = require('../lib/sound')
 const TorrentPlayer = require('../lib/torrent-player')
 const TorrentSummary = require('../lib/torrent-summary')
+const Playlist = require('../lib/playlist')
 const State = require('../lib/state')
 
 const ipcRenderer = electron.ipcRenderer
 
 // Controls playback of torrents and files within torrents
-// both local (<video>,<audio>,VLC) and remote (cast)
+// both local (<video>,<audio>,external player) and remote (cast)
 module.exports = class PlaybackController {
   constructor (state, config, update) {
     this.state = state
@@ -24,24 +25,43 @@ module.exports = class PlaybackController {
   // Play a file in a torrent.
   // * Start torrenting, if necessary
   // * Stream, if not already fully downloaded
-  // * If no file index is provided, pick the default file to play
+  // * If no file index is provided, restore the most recently viewed file or autoplay the first
   playFile (infoHash, index /* optional */) {
-    this.state.location.go({
-      url: 'player',
-      setup: (cb) => {
-        this.play()
-        this.openPlayer(infoHash, index, cb)
-      },
-      destroy: () => this.closePlayer()
-    }, (err) => {
-      if (err) dispatch('error', err)
-    })
+    const state = this.state
+    if (state.location.url() === 'player') {
+      this.updatePlayer(infoHash, index, false, (err) => {
+        if (err) dispatch('error', err)
+        else this.play()
+      })
+    } else {
+      let initialized = false
+      state.location.go({
+        url: 'player',
+        setup: (cb) => {
+          const torrentSummary = TorrentSummary.getByKey(state, infoHash)
+
+          if (index === undefined || initialized) index = torrentSummary.mostRecentFileIndex
+          if (index === undefined) index = torrentSummary.files.findIndex(TorrentPlayer.isPlayable)
+          if (index === undefined) return cb(new errors.UnplayableError())
+
+          initialized = true
+
+          this.openPlayer(infoHash, index, (err) => {
+            if (!err) this.play()
+            cb(err)
+          })
+        },
+        destroy: () => this.closePlayer()
+      }, (err) => {
+        if (err) dispatch('error', err)
+      })
+    }
   }
 
-  // Show a file in the OS, eg in Finder on a Mac
+  // Open a file in OS default app.
   openItem (infoHash, index) {
-    var torrentSummary = TorrentSummary.getByKey(this.state, infoHash)
-    var filePath = path.join(
+    const torrentSummary = TorrentSummary.getByKey(this.state, infoHash)
+    const filePath = path.join(
       torrentSummary.path,
       torrentSummary.files[index].path)
     ipcRenderer.send('openItem', filePath)
@@ -49,12 +69,12 @@ module.exports = class PlaybackController {
 
   // Toggle (play or pause) the currently playing media
   playPause () {
-    var state = this.state
+    const state = this.state
     if (state.location.url() !== 'player') return
 
     // force rerendering if window is hidden,
     // in order to bypass `raf` and play/pause media immediately
-    var mediaTag = document.querySelector('video,audio')
+    const mediaTag = document.querySelector('video,audio')
     if (!state.window.isVisible && mediaTag) {
       if (state.playing.isPaused) mediaTag.play()
       else mediaTag.pause()
@@ -64,9 +84,33 @@ module.exports = class PlaybackController {
     else this.pause()
   }
 
+  // Play next file in list (if any)
+  nextTrack () {
+    const state = this.state
+    if (Playlist.hasNext(state)) {
+      this.updatePlayer(
+          state.playing.infoHash, Playlist.getNextIndex(state), false, (err) => {
+            if (err) dispatch('error', err)
+            else this.play()
+          })
+    }
+  }
+
+  // Play previous track in list (if any)
+  previousTrack () {
+    const state = this.state
+    if (Playlist.hasPrevious(state)) {
+      this.updatePlayer(
+        state.playing.infoHash, Playlist.getPreviousIndex(state), false, (err) => {
+          if (err) dispatch('error', err)
+          else this.play()
+        })
+    }
+  }
+
   // Play (unpause) the current media
   play () {
-    var state = this.state
+    const state = this.state
     if (!state.playing.isPaused) return
     state.playing.isPaused = false
     if (isCasting(state)) {
@@ -77,7 +121,7 @@ module.exports = class PlaybackController {
 
   // Pause the currently playing media
   pause () {
-    var state = this.state
+    const state = this.state
     if (state.playing.isPaused) return
     state.playing.isPaused = true
     if (isCasting(state)) {
@@ -93,6 +137,10 @@ module.exports = class PlaybackController {
 
   // Skip (aka seek) to a specific point, in seconds
   skipTo (time) {
+    if (!Number.isFinite(time)) {
+      console.error('Tried to skip to a non-finite time ' + time)
+      return console.trace()
+    }
     if (isCasting(this.state)) Cast.seek(time)
     else this.state.playing.jumpToTime = time
   }
@@ -102,19 +150,22 @@ module.exports = class PlaybackController {
   // to 0.25 (quarter-speed playback), then goes to -0.25, -0.5, -1, -2, etc
   // until -16 (fast rewind)
   changePlaybackRate (direction) {
-    var state = this.state
-    var rate = state.playing.playbackRate
+    const state = this.state
+    let rate = state.playing.playbackRate
     if (direction > 0 && rate >= 0.25 && rate < 2) {
       rate += 0.25
     } else if (direction < 0 && rate > 0.25 && rate <= 2) {
       rate -= 0.25
-    } else if (direction < 0 && rate === 0.25) { /* when we set playback rate at 0 in html 5, playback hangs ;( */
+    } else if (direction < 0 && rate === 0.25) {
+      // When we set playback rate at 0 in html 5, playback hangs ;(
       rate = -1
     } else if (direction > 0 && rate === -1) {
       rate = 0.25
-    } else if ((direction > 0 && rate >= 1 && rate < 16) || (direction < 0 && rate > -16 && rate <= -1)) {
+    } else if ((direction > 0 && rate >= 1 && rate < 16) ||
+      (direction < 0 && rate > -16 && rate <= -1)) {
       rate *= 2
-    } else if ((direction < 0 && rate > 1 && rate <= 16) || (direction > 0 && rate >= -16 && rate < -1)) {
+    } else if ((direction < 0 && rate > 1 && rate <= 16) ||
+      (direction > 0 && rate >= -16 && rate < -1)) {
       rate /= 2
     }
     state.playing.playbackRate = rate
@@ -135,7 +186,7 @@ module.exports = class PlaybackController {
     // check if its in [0.0 - 1.0] range
     volume = Math.max(0, Math.min(1, volume))
 
-    var state = this.state
+    const state = this.state
     if (isCasting(state)) {
       Cast.setVolume(volume)
     } else {
@@ -149,8 +200,8 @@ module.exports = class PlaybackController {
   // * The video is paused
   // * The video is playing remotely on Chromecast or Airplay
   showOrHidePlayerControls () {
-    var state = this.state
-    var hideControls = state.location.url() === 'player' &&
+    const state = this.state
+    const hideControls = state.location.url() === 'player' &&
       state.playing.mouseStationarySince !== 0 &&
       new Date().getTime() - state.playing.mouseStationarySince > 2000 &&
       !state.playing.isPaused &&
@@ -165,12 +216,10 @@ module.exports = class PlaybackController {
 
   // Opens the video player to a specific torrent
   openPlayer (infoHash, index, cb) {
-    var torrentSummary = TorrentSummary.getByKey(this.state, infoHash)
+    const state = this.state
+    const torrentSummary = TorrentSummary.getByKey(state, infoHash)
 
-    // automatically choose which file in the torrent to play, if necessary
-    if (index === undefined) index = torrentSummary.defaultPlayFileIndex
-    if (index === undefined) index = TorrentPlayer.pickFileToPlay(torrentSummary.files)
-    if (index === undefined) return cb(new errors.UnplayableError())
+    state.playing.infoHash = torrentSummary.infoHash
 
     // update UI to show pending playback
     if (torrentSummary.progress !== 1) sound.play('PLAY')
@@ -178,7 +227,7 @@ module.exports = class PlaybackController {
     torrentSummary.playStatus = 'requested'
     this.update()
 
-    var timeout = setTimeout(() => {
+    const timeout = setTimeout(() => {
       telemetry.logPlayAttempt('timeout')
       // TODO: remove torrentSummary.playStatus
       torrentSummary.playStatus = 'timeout' /* no seeders available? */
@@ -187,34 +236,69 @@ module.exports = class PlaybackController {
       this.update()
     }, 10000) /* give it a few seconds */
 
+    this.startServer(torrentSummary, () => {
+      clearTimeout(timeout)
+
+      // if we timed out (user clicked play a long time ago), don't autoplay
+      const timedOut = torrentSummary.playStatus === 'timeout'
+      delete torrentSummary.playStatus
+      if (timedOut) {
+        ipcRenderer.send('wt-stop-server')
+        return this.update()
+      }
+
+      ipcRenderer.send('onPlayerOpen')
+      this.updatePlayer(infoHash, index, true, cb)
+    })
+  }
+
+  // Starts WebTorrent server for media streaming
+  startServer (torrentSummary, cb) {
     if (torrentSummary.status === 'paused') {
       dispatch('startTorrentingSummary', torrentSummary.torrentKey)
       ipcRenderer.once('wt-ready-' + torrentSummary.infoHash,
-        () => this.openPlayerFromActiveTorrent(torrentSummary, index, timeout, cb))
+        () => onTorrentReady())
     } else {
-      this.openPlayerFromActiveTorrent(torrentSummary, index, timeout, cb)
+      onTorrentReady()
+    }
+
+    function onTorrentReady () {
+      ipcRenderer.send('wt-start-server', torrentSummary.infoHash)
+      ipcRenderer.once('wt-server-' + torrentSummary.infoHash, () => cb())
     }
   }
 
-  openPlayerFromActiveTorrent (torrentSummary, index, timeout, cb) {
-    var fileSummary = torrentSummary.files[index]
+  // Called each time the current file changes
+  updatePlayer (infoHash, index, resume, cb) {
+    const state = this.state
+
+    const torrentSummary = TorrentSummary.getByKey(state, infoHash)
+    const fileSummary = torrentSummary.files[index]
+
+    if (!TorrentPlayer.isPlayable(fileSummary)) {
+      torrentSummary.mostRecentFileIndex = undefined
+      return cb(new Error('Can\'t play that file'))
+    }
+
+    torrentSummary.mostRecentFileIndex = index
 
     // update state
-    var state = this.state
-    state.playing.infoHash = torrentSummary.infoHash
+    state.playing.infoHash = infoHash
     state.playing.fileIndex = index
     state.playing.type = TorrentPlayer.isVideo(fileSummary) ? 'video'
       : TorrentPlayer.isAudio(fileSummary) ? 'audio'
       : 'other'
 
     // pick up where we left off
-    if (fileSummary.currentTime) {
-      var fraction = fileSummary.currentTime / fileSummary.duration
-      var secondsLeft = fileSummary.duration - fileSummary.currentTime
+    let jumpToTime = 0
+    if (resume && fileSummary.currentTime) {
+      const fraction = fileSummary.currentTime / fileSummary.duration
+      const secondsLeft = fileSummary.duration - fileSummary.currentTime
       if (fraction < 0.9 && secondsLeft > 10) {
-        state.playing.jumpToTime = fileSummary.currentTime
+        jumpToTime = fileSummary.currentTime
       }
     }
+    state.playing.jumpToTime = jumpToTime
 
     // if it's audio, parse out the metadata (artist, title, etc)
     if (state.playing.type === 'audio' && !fileSummary.audioInfo) {
@@ -229,55 +313,43 @@ module.exports = class PlaybackController {
       dispatch('addSubtitles', [fileSummary.selectedSubtitle], true)
     }
 
-    ipcRenderer.send('wt-start-server', torrentSummary.infoHash, index)
-    ipcRenderer.once('wt-server-' + torrentSummary.infoHash, (e, info) => {
-      clearTimeout(timeout)
+    state.window.title = fileSummary.name
 
-      // if we timed out (user clicked play a long time ago), don't autoplay
-      var timedOut = torrentSummary.playStatus === 'timeout'
-      delete torrentSummary.playStatus
-      if (timedOut) {
-        ipcRenderer.send('wt-stop-server')
-        return this.update()
-      }
-
-      // play in VLC if set as default player (Preferences / Playback / Play in VLC)
-      if (this.state.saved.prefs.playInVlc) {
-        dispatch('vlcPlay')
-        this.update()
-        cb()
-        return
-      }
-
-      // otherwise, play the video
-      state.window.title = torrentSummary.files[state.playing.fileIndex].name
+    // play in VLC if set as default player (Preferences / Playback / Play in VLC)
+    if (this.state.saved.prefs.openExternalPlayer) {
+      dispatch('openExternalPlayer')
       this.update()
-
-      ipcRenderer.send('onPlayerOpen')
       cb()
-    })
+      return
+    }
+
+    // otherwise, play the video
+    this.update()
+
+    ipcRenderer.send('onPlayerUpdate', Playlist.hasNext(state), Playlist.hasPrevious(state))
+    cb()
   }
 
   closePlayer () {
     console.log('closePlayer')
 
     // Quit any external players, like Chromecast/Airplay/etc or VLC
-    var state = this.state
+    const state = this.state
     if (isCasting(state)) {
       Cast.stop()
     }
-    if (state.playing.location === 'vlc') {
-      ipcRenderer.send('vlcQuit')
+    if (state.playing.location === 'external') {
+      ipcRenderer.send('quitExternalPlayer')
     }
 
     // Save volume (this session only, not in state.saved)
     state.previousVolume = state.playing.volume
 
     // Telemetry: track what happens after the user clicks play
-    var result = state.playing.result // 'success' or 'error'
+    const result = state.playing.result // 'success' or 'error'
     if (result === 'success') telemetry.logPlayAttempt('success') // first frame displayed
     else if (result === 'error') telemetry.logPlayAttempt('error') // codec missing, etc
-    else if (result === undefined) telemetry.logPlayAttempt('abandoned') // user exited before first frame
+    else if (result === undefined) telemetry.logPlayAttempt('abandoned') // user gave up waiting
     else console.error('Unknown state.playing.result', state.playing.result)
 
     // Reset the window contents back to the home screen

src/renderer/controllers/prefs-controller.js

@@ -11,7 +11,7 @@ module.exports = class PrefsController {
 
   // Goes to the Preferences screen
   show () {
-    var state = this.state
+    const state = this.state
     state.location.go({
       url: 'preferences',
       setup: function (cb) {
@@ -32,20 +32,21 @@ module.exports = class PrefsController {
   // For example: updatePreferences('foo.bar', 'baz')
   // Call save() to save to config.json
   update (property, value) {
-    var path = property.split('.')
-    var key = this.state.unsaved.prefs
-    for (var i = 0; i < path.length - 1; i++) {
-      if (typeof key[path[i]] === 'undefined') {
-        key[path[i]] = {}
+    const path = property.split('.')
+    let obj = this.state.unsaved.prefs
+    let i
+    for (i = 0; i < path.length - 1; i++) {
+      if (typeof obj[path[i]] === 'undefined') {
+        obj[path[i]] = {}
       }
-      key = key[path[i]]
+      obj = obj[path[i]]
     }
-    key[path[i]] = value
+    obj[path[i]] = value
   }
 
   // All unsaved prefs take effect atomically, and are saved to config.json
   save () {
-    var state = this.state
+    const state = this.state
     if (state.unsaved.prefs.isFileHandler !== state.saved.prefs.isFileHandler) {
       ipcRenderer.send('setDefaultFileHandler', state.unsaved.prefs.isFileHandler)
     }

src/renderer/controllers/subtitles-controller.js

@@ -3,6 +3,8 @@ const fs = require('fs-extra')
 const path = require('path')
 const parallel = require('run-parallel')
 
+const remote = electron.remote
+
 const {dispatch} = require('../lib/dispatcher')
 
 module.exports = class SubtitlesController {
@@ -11,7 +13,7 @@ module.exports = class SubtitlesController {
   }
 
   openSubtitles () {
-    electron.remote.dialog.showOpenDialog({
+    remote.dialog.showOpenDialog({
       title: 'Select a subtitles file.',
       filters: [ { name: 'Subtitles', extensions: ['vtt', 'srt'] } ],
       properties: [ 'openFile' ]
@@ -26,26 +28,26 @@ module.exports = class SubtitlesController {
   }
 
   toggleSubtitlesMenu () {
-    var subtitles = this.state.playing.subtitles
+    const subtitles = this.state.playing.subtitles
     subtitles.showMenu = !subtitles.showMenu
   }
 
   addSubtitles (files, autoSelect) {
-    var state = this.state
+    const state = this.state
     // Subtitles are only supported when playing video files
     if (state.playing.type !== 'video') return
     if (files.length === 0) return
-    var subtitles = state.playing.subtitles
+    const subtitles = state.playing.subtitles
 
     // Read the files concurrently, then add all resulting subtitle tracks
-    var tasks = files.map((file) => (cb) => loadSubtitle(file, cb))
+    const tasks = files.map((file) => (cb) => loadSubtitle(file, cb))
     parallel(tasks, function (err, tracks) {
       if (err) return dispatch('error', err)
 
-      for (var i = 0; i < tracks.length; i++) {
+      for (let i = 0; i < tracks.length; i++) {
         // No dupes allowed
-        var track = tracks[i]
-        var trackIndex = state.playing.subtitles.tracks
+        const track = tracks[i]
+        let trackIndex = state.playing.subtitles.tracks
           .findIndex((t) => track.filePath === t.filePath)
 
         // Add the track
@@ -66,46 +68,46 @@ module.exports = class SubtitlesController {
 
   checkForSubtitles () {
     if (this.state.playing.type !== 'video') return
-    var torrentSummary = this.state.getPlayingTorrentSummary()
+    const torrentSummary = this.state.getPlayingTorrentSummary()
     if (!torrentSummary || !torrentSummary.progress) return
 
     torrentSummary.progress.files.forEach((fp, ix) => {
       if (fp.numPieces !== fp.numPiecesPresent) return // ignore incomplete files
-      var file = torrentSummary.files[ix]
+      const file = torrentSummary.files[ix]
       if (!this.isSubtitle(file.name)) return
-      var filePath = path.join(torrentSummary.path, file.path)
+      const filePath = path.join(torrentSummary.path, file.path)
       this.addSubtitles([filePath], false)
     })
   }
 
   isSubtitle (file) {
-    var name = typeof file === 'string' ? file : file.name
-    var ext = path.extname(name).toLowerCase()
+    const name = typeof file === 'string' ? file : file.name
+    const ext = path.extname(name).toLowerCase()
     return ext === '.srt' || ext === '.vtt'
   }
 }
 
 function loadSubtitle (file, cb) {
   // Lazy load to keep startup fast
-  var concat = require('simple-concat')
-  var LanguageDetect = require('languagedetect')
-  var srtToVtt = require('srt-to-vtt')
+  const concat = require('simple-concat')
+  const LanguageDetect = require('languagedetect')
+  const srtToVtt = require('srt-to-vtt')
 
   // Read the .SRT or .VTT file, parse it, add subtitle track
-  var filePath = file.path || file
+  const filePath = file.path || file
 
-  var vttStream = fs.createReadStream(filePath).pipe(srtToVtt())
+  const vttStream = fs.createReadStream(filePath).pipe(srtToVtt())
 
   concat(vttStream, function (err, buf) {
     if (err) return dispatch('error', 'Can\'t parse subtitles file.')
 
     // Detect what language the subtitles are in
-    var vttContents = buf.toString().replace(/(.*-->.*)/g, '')
-    var langDetected = (new LanguageDetect()).detect(vttContents, 2)
+    const vttContents = buf.toString().replace(/(.*-->.*)/g, '')
+    let langDetected = (new LanguageDetect()).detect(vttContents, 2)
     langDetected = langDetected.length ? langDetected[0][0] : 'subtitle'
     langDetected = langDetected.slice(0, 1).toUpperCase() + langDetected.slice(1)
 
-    var track = {
+    const track = {
       buffer: 'data:text/vtt;base64,' + buf.toString('base64'),
       language: langDetected,
       label: langDetected,
@@ -119,18 +121,18 @@ function loadSubtitle (file, cb) {
 // Checks whether a language name like 'English' or 'German' matches the system
 // language, aka the current locale
 function isSystemLanguage (language) {
-  var iso639 = require('iso-639-1')
-  var osLangISO = window.navigator.language.split('-')[0] // eg 'en'
-  var langIso = iso639.getCode(language) // eg 'de' if language is 'German'
+  const iso639 = require('iso-639-1')
+  const osLangISO = window.navigator.language.split('-')[0] // eg 'en'
+  const langIso = iso639.getCode(language) // eg 'de' if language is 'German'
   return langIso === osLangISO
 }
 
 // Make sure we don't have two subtitle tracks with the same label
 // Labels each track by language, eg 'German', 'English', 'English 2', ...
 function relabelSubtitles (subtitles) {
-  var counts = {}
+  const counts = {}
   subtitles.tracks.forEach(function (track) {
-    var lang = track.language
+    const lang = track.language
     counts[lang] = (counts[lang] || 0) + 1
     track.label = counts[lang] > 1 ? (lang + ' ' + counts[lang]) : lang
   })

src/renderer/controllers/torrent-controller.js

@@ -2,7 +2,6 @@ const path = require('path')
 const ipcRenderer = require('electron').ipcRenderer
 
 const TorrentSummary = require('../lib/torrent-summary')
-const TorrentPlayer = require('../lib/torrent-player')
 const sound = require('../lib/sound')
 const {dispatch} = require('../lib/dispatcher')
 
@@ -12,12 +11,12 @@ module.exports = class TorrentController {
   }
 
   torrentInfoHash (torrentKey, infoHash) {
-    var torrentSummary = this.getTorrentSummary(torrentKey)
+    let torrentSummary = this.getTorrentSummary(torrentKey)
     console.log('got infohash for %s torrent %s',
       torrentSummary ? 'existing' : 'new', torrentKey)
 
     if (!torrentSummary) {
-      var torrents = this.state.saved.torrents
+      const torrents = this.state.saved.torrents
 
       // Check if an existing (non-active) torrent has the same info hash
       if (torrents.find((t) => t.infoHash === infoHash)) {
@@ -49,7 +48,7 @@ module.exports = class TorrentController {
     }
     dispatch('error', message)
 
-    var torrentSummary = this.getTorrentSummary(torrentKey)
+    const torrentSummary = this.getTorrentSummary(torrentKey)
     if (torrentSummary) {
       console.log('Pausing torrent %s due to error: %s', torrentSummary.infoHash, message)
       torrentSummary.status = 'paused'
@@ -59,21 +58,20 @@ module.exports = class TorrentController {
 
   torrentMetadata (torrentKey, torrentInfo) {
     // Summarize torrent
-    var torrentSummary = this.getTorrentSummary(torrentKey)
+    const torrentSummary = this.getTorrentSummary(torrentKey)
     torrentSummary.status = 'downloading'
     torrentSummary.name = torrentSummary.displayName || torrentInfo.name
     torrentSummary.path = torrentInfo.path
     torrentSummary.magnetURI = torrentInfo.magnetURI
     // TODO: make torrentInfo immutable, save separately as torrentSummary.info
     // For now, check whether torrentSummary.files has already been set:
-    var hasDetailedFileInfo = torrentSummary.files && torrentSummary.files[0].path
+    const hasDetailedFileInfo = torrentSummary.files && torrentSummary.files[0].path
     if (!hasDetailedFileInfo) {
       torrentSummary.files = torrentInfo.files
     }
     if (!torrentSummary.selections) {
       torrentSummary.selections = torrentSummary.files.map((x) => true)
     }
-    torrentSummary.defaultPlayFileIndex = TorrentPlayer.pickFileToPlay(torrentInfo.files)
     dispatch('update')
 
     // Save the .torrent file, if it hasn't been saved already
@@ -85,7 +83,7 @@ module.exports = class TorrentController {
 
   torrentDone (torrentKey, torrentInfo) {
     // Update the torrent summary
-    var torrentSummary = this.getTorrentSummary(torrentKey)
+    const torrentSummary = this.getTorrentSummary(torrentKey)
     torrentSummary.status = 'seeding'
 
     // Notify the user that a torrent finished, but only if we actually DL'd at least part of it.
@@ -102,22 +100,18 @@ module.exports = class TorrentController {
   }
 
   torrentProgress (progressInfo) {
-    // Overall progress across all active torrents, 0 to 1
-    var progress = progressInfo.progress
-    var hasActiveTorrents = progressInfo.hasActiveTorrents
-
+    // Overall progress across all active torrents, 0 to 1, or -1 to hide the progress bar
     // Hide progress bar when client has no torrents, or progress is 100%
-    // TODO: isn't this equivalent to: if (progress === 1) ?
-    if (!hasActiveTorrents || progress === 1) {
-      progress = -1
-    }
+    const progress = (!progressInfo.hasActiveTorrents || progressInfo.progress === 1)
+      ? -1
+      : progressInfo.progress
 
     // Show progress bar under the WebTorrent taskbar icon, on OSX
     this.state.dock.progress = progress
 
     // Update progress for each individual torrent
     progressInfo.torrents.forEach((p) => {
-      var torrentSummary = this.getTorrentSummary(p.torrentKey)
+      const torrentSummary = this.getTorrentSummary(p.torrentKey)
       if (!torrentSummary) {
         console.log('warning: got progress for missing torrent %s', p.torrentKey)
         return
@@ -132,27 +126,27 @@ module.exports = class TorrentController {
   }
 
   torrentFileModtimes (torrentKey, fileModtimes) {
-    var torrentSummary = this.getTorrentSummary(torrentKey)
+    const torrentSummary = this.getTorrentSummary(torrentKey)
     torrentSummary.fileModtimes = fileModtimes
     dispatch('saveStateThrottled')
   }
 
   torrentFileSaved (torrentKey, torrentFileName) {
     console.log('torrent file saved %s: %s', torrentKey, torrentFileName)
-    var torrentSummary = this.getTorrentSummary(torrentKey)
+    const torrentSummary = this.getTorrentSummary(torrentKey)
     torrentSummary.torrentFileName = torrentFileName
     dispatch('saveStateThrottled')
   }
 
   torrentPosterSaved (torrentKey, posterFileName) {
-    var torrentSummary = this.getTorrentSummary(torrentKey)
+    const torrentSummary = this.getTorrentSummary(torrentKey)
     torrentSummary.posterFileName = posterFileName
     dispatch('saveStateThrottled')
   }
 
   torrentAudioMetadata (infoHash, index, info) {
-    var torrentSummary = this.getTorrentSummary(infoHash)
-    var fileSummary = torrentSummary.files[index]
+    const torrentSummary = this.getTorrentSummary(infoHash)
+    const fileSummary = torrentSummary.files[index]
     fileSummary.audioInfo = info
     dispatch('update')
   }
@@ -169,7 +163,7 @@ module.exports = class TorrentController {
 }
 
 function getTorrentPath (torrentSummary) {
-  var itemPath = TorrentSummary.getFileOrFolder(torrentSummary)
+  let itemPath = TorrentSummary.getFileOrFolder(torrentSummary)
   if (torrentSummary.files.length > 1) {
     itemPath = path.dirname(itemPath)
   }
@@ -177,7 +171,7 @@ function getTorrentPath (torrentSummary) {
 }
 
 function showDoneNotification (torrent) {
-  var notif = new window.Notification('Download Complete', {
+  const notif = new window.Notification('Download Complete', {
     body: torrent.name,
     silent: true
   })
@@ -186,5 +180,6 @@ function showDoneNotification (torrent) {
     ipcRenderer.send('show')
   }
 
-  sound.play('DONE')
+  // Only play notification sound if player is inactive
+  if (this.state.playing.isPaused) sound.play('DONE')
 }

src/renderer/controllers/torrent-list-controller.js

@@ -17,8 +17,8 @@ module.exports = class TorrentListController {
     this.state = state
   }
 
-  // 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-
+  // Adds a torrent to the list, starts downloading/seeding.
+  // TorrentID can be a magnet URI, infohash, or torrent file: https://git.io/vik9M
   addTorrent (torrentId) {
     if (torrentId.path) {
       // Use path string instead of W3C File object
@@ -30,8 +30,8 @@ module.exports = class TorrentListController {
       torrentId = torrentId.slice(torrentId.indexOf('#') + 1)
     }
 
-    var torrentKey = this.state.nextTorrentKey++
-    var path = this.state.saved.prefs.downloadPath
+    const torrentKey = this.state.nextTorrentKey++
+    const path = this.state.saved.prefs.downloadPath
 
     ipcRenderer.send('wt-start-torrenting', torrentKey, torrentId, path)
 
@@ -64,46 +64,53 @@ module.exports = class TorrentListController {
     findFilesRecursive(files, (allFiles) => this.showCreateTorrent(allFiles))
   }
 
-  // Switches between the advanced and simple Create Torrent UI
-  toggleCreateTorrentAdvanced () {
-    var info = this.state.location.current()
-    if (info.url !== 'create-torrent') return
-    info.showAdvanced = !info.showAdvanced
-  }
-
   // Creates a new torrent and start seeeding
   createTorrent (options) {
-    var state = this.state
-    var torrentKey = state.nextTorrentKey++
+    const state = this.state
+    const torrentKey = state.nextTorrentKey++
     ipcRenderer.send('wt-create-torrent', torrentKey, options)
     state.location.cancel()
   }
 
   // Starts downloading and/or seeding a given torrentSummary.
   startTorrentingSummary (torrentKey) {
-    var s = TorrentSummary.getByKey(this.state, torrentKey)
+    const s = TorrentSummary.getByKey(this.state, torrentKey)
     if (!s) throw new Error('Missing key: ' + torrentKey)
 
-    // Use Downloads folder by default
-    if (!s.path) s.path = this.state.saved.prefs.downloadPath
+    // New torrent: give it a path
+    if (!s.path) {
+      // Use Downloads folder by default
+      s.path = this.state.saved.prefs.downloadPath
+      return start()
+    }
 
-    fs.stat(TorrentSummary.getFileOrFolder(s), function (err) {
+    const fileOrFolder = TorrentSummary.getFileOrFolder(s)
+
+    // New torrent: metadata not yet received
+    if (!fileOrFolder) return start()
+
+    // Existing torrent: check that the path is still there
+    fs.stat(fileOrFolder, function (err) {
       if (err) {
         s.error = 'path-missing'
         return
       }
+      start()
+    })
+
+    function start () {
       ipcRenderer.send('wt-start-torrenting',
         s.torrentKey,
         TorrentSummary.getTorrentID(s),
         s.path,
         s.fileModtimes,
         s.selections)
-    })
+    }
   }
 
   // TODO: use torrentKey, not infoHash
   toggleTorrent (infoHash) {
-    var torrentSummary = TorrentSummary.getByKey(this.state, infoHash)
+    const torrentSummary = TorrentSummary.getByKey(this.state, infoHash)
     if (torrentSummary.status === 'paused') {
       torrentSummary.status = 'new'
       this.startTorrentingSummary(torrentSummary.torrentKey)
@@ -116,7 +123,7 @@ module.exports = class TorrentListController {
   }
 
   toggleTorrentFile (infoHash, index) {
-    var torrentSummary = TorrentSummary.getByKey(this.state, infoHash)
+    const torrentSummary = TorrentSummary.getByKey(this.state, infoHash)
     torrentSummary.selections[index] = !torrentSummary.selections[index]
 
     // Let the WebTorrent process know to start or stop fetching that file
@@ -135,14 +142,14 @@ module.exports = class TorrentListController {
   deleteTorrent (infoHash, deleteData) {
     ipcRenderer.send('wt-stop-torrenting', infoHash)
 
-    var index = this.state.saved.torrents.findIndex((x) => x.infoHash === infoHash)
+    const index = this.state.saved.torrents.findIndex((x) => x.infoHash === infoHash)
 
     if (index > -1) {
-      var summary = this.state.saved.torrents[index]
+      const summary = this.state.saved.torrents[index]
 
       // remove torrent and poster file
       deleteFile(TorrentSummary.getTorrentPath(summary))
-      deleteFile(TorrentSummary.getPosterPath(summary)) // TODO: will the css path hack affect windows?
+      deleteFile(TorrentSummary.getPosterPath(summary))
 
       // optionally delete the torrent data
       if (deleteData) moveItemToTrash(summary)
@@ -152,7 +159,8 @@ module.exports = class TorrentListController {
       State.saveThrottled(this.state)
     }
 
-    this.state.location.clearForward('player') // prevent user from going forward to a deleted torrent
+    // prevent user from going forward to a deleted torrent
+    this.state.location.clearForward('player')
     sound.play('DELETE')
   }
 
@@ -165,8 +173,8 @@ module.exports = class TorrentListController {
   }
 
   openTorrentContextMenu (infoHash) {
-    var torrentSummary = TorrentSummary.getByKey(this.state, infoHash)
-    var menu = new electron.remote.Menu()
+    const torrentSummary = TorrentSummary.getByKey(this.state, infoHash)
+    const menu = new electron.remote.Menu()
 
     menu.append(new electron.remote.MenuItem({
       label: 'Remove From List',
@@ -215,11 +223,11 @@ module.exports = class TorrentListController {
 // Calls `cb` on success, calls `onError` on failure
 function findFilesRecursive (paths, cb) {
   if (paths.length > 1) {
-    var numComplete = 0
-    var ret = []
+    let numComplete = 0
+    let ret = []
     paths.forEach(function (path) {
       findFilesRecursive([path], function (fileObjs) {
-        ret = ret.concat(fileObjs)
+        ret.push(...fileObjs)
         if (++numComplete === paths.length) {
           ret.sort((a, b) => a.path < b.path ? -1 : a.path > b.path)
           cb(ret)
@@ -229,13 +237,13 @@ function findFilesRecursive (paths, cb) {
     return
   }
 
-  var fileOrFolder = paths[0]
+  const fileOrFolder = paths[0]
   fs.stat(fileOrFolder, function (err, stat) {
     if (err) return dispatch('error', err)
 
     // Files: return name, path, and size
     if (!stat.isDirectory()) {
-      var filePath = fileOrFolder
+      const filePath = fileOrFolder
       return cb([{
         name: path.basename(filePath),
         path: filePath,
@@ -244,10 +252,10 @@ function findFilesRecursive (paths, cb) {
     }
 
     // Folders: recurse, make a list of all the files
-    var folderPath = fileOrFolder
+    const folderPath = fileOrFolder
     fs.readdir(folderPath, function (err, fileNames) {
       if (err) return dispatch('error', err)
-      var paths = fileNames.map((fileName) => path.join(folderPath, fileName))
+      const paths = fileNames.map((fileName) => path.join(folderPath, fileName))
       findFilesRecursive(paths, cb)
     })
   })
@@ -262,8 +270,8 @@ function deleteFile (path) {
 
 // Delete all files in a torrent
 function moveItemToTrash (torrentSummary) {
-  var filePath = TorrentSummary.getFileOrFolder(torrentSummary)
-  ipcRenderer.send('moveItemToTrash', filePath)
+  const filePath = TorrentSummary.getFileOrFolder(torrentSummary)
+  if (filePath) ipcRenderer.send('moveItemToTrash', filePath)
 }
 
 function showItemInFolder (torrentSummary) {
@@ -271,9 +279,9 @@ function showItemInFolder (torrentSummary) {
 }
 
 function saveTorrentFileAs (torrentSummary) {
-  var downloadPath = this.state.saved.prefs.downloadPath
-  var newFileName = path.parse(torrentSummary.name).name + '.torrent'
-  var opts = {
+  const downloadPath = this.state.saved.prefs.downloadPath
+  const newFileName = path.parse(torrentSummary.name).name + '.torrent'
+  const opts = {
     title: 'Save Torrent File',
     defaultPath: path.join(downloadPath, newFileName),
     filters: [
@@ -281,9 +289,10 @@ function saveTorrentFileAs (torrentSummary) {
       { name: 'All Files', extensions: ['*'] }
     ]
   }
-  electron.remote.dialog.showSaveDialog(electron.remote.getCurrentWindow(), opts, function (savePath) {
+  const win = electron.remote.getCurrentWindow()
+  electron.remote.dialog.showSaveDialog(win, opts, function (savePath) {
     if (!savePath) return // They clicked Cancel
-    var torrentPath = TorrentSummary.getTorrentPath(torrentSummary)
+    const torrentPath = TorrentSummary.getTorrentPath(torrentSummary)
     fs.readFile(torrentPath, function (err, torrentFile) {
       if (err) return dispatch('error', err)
       fs.writeFile(savePath, torrentFile, function (err) {

src/renderer/controllers/update-controller.js

@@ -8,7 +8,7 @@ module.exports = class UpdateController {
 
   // Shows a modal saying that we have an update
   updateAvailable (version) {
-    var skipped = this.state.saved.skippedVersions
+    const skipped = this.state.saved.skippedVersions
     if (skipped && skipped.includes(version)) {
       console.log('new version skipped by user: v' + version)
       return
@@ -18,7 +18,7 @@ module.exports = class UpdateController {
 
   // Don't show the modal again until the next version
   skipVersion (version) {
-    var skipped = this.state.saved.skippedVersions
+    let skipped = this.state.saved.skippedVersions
     if (!skipped) skipped = this.state.saved.skippedVersions = []
     skipped.push(version)
     State.saveThrottled(this.state)

src/renderer/lib/capture-video-frame.js

@@ -17,14 +17,14 @@ function captureVideoFrame (video, format) {
     throw new Error('Second argument must be one of "png", "jpg", or "webp"')
   }
 
-  var canvas = document.createElement('canvas')
+  const 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]
+  const dataUri = canvas.toDataURL('image/' + format)
+  const data = dataUri.split(',')[1]
 
   return new Buffer(data, 'base64')
 }

src/renderer/lib/cast.js

@@ -13,19 +13,19 @@ module.exports = {
   setRate
 }
 
-// Lazy load these for a ~300ms improvement in startup time
-var airplayer, chromecasts, dlnacasts
+const config = require('../../config')
 
-var config = require('../../config')
+// Lazy load these for a ~300ms improvement in startup time
+let airplayer, chromecasts, dlnacasts
 
 // App state. Cast modifies state.playing and state.errors in response to events
-var state
+let state
 
 // Callback to notify module users when state has changed
-var update
+let update
 
 // setInterval() for updating cast status
-var statusInterval = null
+let statusInterval = null
 
 // Start looking for cast devices on the local network
 function init (appState, callback) {
@@ -59,7 +59,7 @@ function init (appState, callback) {
 
 // chromecast player implementation
 function chromecastPlayer () {
-  var ret = {
+  const ret = {
     device: null,
     addDevice,
     getDevices,
@@ -95,8 +95,8 @@ function chromecastPlayer () {
   }
 
   function open () {
-    var torrentSummary = state.saved.torrents.find((x) => x.infoHash === state.playing.infoHash)
-    ret.device.play(state.server.networkURL, {
+    const torrentSummary = state.saved.torrents.find((x) => x.infoHash === state.playing.infoHash)
+    ret.device.play(state.server.networkURL + '/' + state.playing.fileIndex, {
       type: 'video/mp4',
       title: config.APP_NAME + ' - ' + torrentSummary.name
     }, function (err) {
@@ -146,7 +146,7 @@ function chromecastPlayer () {
 
 // airplay player implementation
 function airplayPlayer () {
-  var ret = {
+  const ret = {
     device: null,
     addDevice,
     getDevices,
@@ -183,7 +183,7 @@ function airplayPlayer () {
   }
 
   function open () {
-    ret.device.play(state.server.networkURL, function (err, res) {
+    ret.device.play(state.server.networkURL + '/' + state.playing.fileIndex, function (err, res) {
       if (err) {
         state.playing.location = 'local'
         state.errors.push({
@@ -238,7 +238,7 @@ function airplayPlayer () {
 
 // DLNA player implementation
 function dlnaPlayer (player) {
-  var ret = {
+  const ret = {
     device: null,
     addDevice,
     getDevices,
@@ -274,8 +274,8 @@ function dlnaPlayer (player) {
   }
 
   function open () {
-    var torrentSummary = state.saved.torrents.find((x) => x.infoHash === state.playing.infoHash)
-    ret.device.play(state.server.networkURL, {
+    const torrentSummary = state.saved.torrents.find((x) => x.infoHash === state.playing.infoHash)
+    ret.device.play(state.server.networkURL + '/' + state.playing.fileIndex, {
       type: 'video/mp4',
       title: config.APP_NAME + ' - ' + torrentSummary.name,
       seek: state.playing.currentTime > 10 ? state.playing.currentTime : 0
@@ -331,7 +331,7 @@ function dlnaPlayer (player) {
 // Start polling cast device state, whenever we're connected
 function startStatusInterval () {
   statusInterval = setInterval(function () {
-    var player = getPlayer()
+    const player = getPlayer()
     if (player) player.status()
   }, 1000)
 }
@@ -350,12 +350,13 @@ function toggleMenu (location) {
 
   // Never cast to two devices at the same time
   if (state.playing.location !== 'local') {
-    throw new Error('You can\'t connect to ' + location + ' when already connected to another device')
+    throw new Error('You can\'t connect to ' + location +
+      ' when already connected to another device')
   }
 
   // Find all cast devices of the given type
-  var player = getPlayer(location)
-  var devices = player ? player.getDevices() : []
+  const player = getPlayer(location)
+  const devices = player ? player.getDevices() : []
   if (devices.length === 0) throw new Error('No ' + location + ' devices available')
 
   // Show a menu
@@ -363,10 +364,10 @@ function toggleMenu (location) {
 }
 
 function selectDevice (index) {
-  var {location, devices} = state.devices.castMenu
+  const {location, devices} = state.devices.castMenu
 
   // Start casting
-  var player = getPlayer(location)
+  const player = getPlayer(location)
   player.device = devices[index]
   player.open()
 
@@ -382,7 +383,7 @@ function selectDevice (index) {
 
 // Stops casting, move video back to local screen
 function stop () {
-  var player = getPlayer()
+  const player = getPlayer()
   if (player) {
     player.stop(function () {
       player.device = null
@@ -396,7 +397,9 @@ function stop () {
 
 function stoppedCasting () {
   state.playing.location = 'local'
-  state.playing.jumpToTime = state.playing.currentTime
+  state.playing.jumpToTime = Number.isFinite(state.playing.currentTime)
+    ? state.playing.currentTime
+    : 0
   update()
 }
 
@@ -415,18 +418,18 @@ function getPlayer (location) {
 }
 
 function play () {
-  var player = getPlayer()
+  const player = getPlayer()
   if (player) player.play(castCallback)
 }
 
 function pause () {
-  var player = getPlayer()
+  const player = getPlayer()
   if (player) player.pause(castCallback)
 }
 
 function setRate (rate) {
-  var player
-  var result = true
+  let player
+  let result = true
   if (state.playing.location === 'chromecast') {
     // TODO find how to control playback rate on chromecast
     castCallback()
@@ -441,12 +444,12 @@ function setRate (rate) {
 }
 
 function seek (time) {
-  var player = getPlayer()
+  const player = getPlayer()
   if (player) player.seek(time, castCallback)
 }
 
 function setVolume (volume) {
-  var player = getPlayer()
+  const player = getPlayer()
   if (player) player.volume(volume, castCallback)
 }
 

src/renderer/lib/dispatcher.js

@@ -4,8 +4,8 @@ module.exports = {
   setDispatch
 }
 
-var dispatchers = {}
-var _dispatch = function () {}
+const dispatchers = {}
+let _dispatch = function () {}
 
 function setDispatch (dispatch) {
   _dispatch = dispatch
@@ -20,8 +20,8 @@ function dispatch (...args) {
 // function. This prevents React from updating the listener functions on
 // each update().
 function dispatcher (...args) {
-  var str = JSON.stringify(args)
-  var handler = dispatchers[str]
+  const str = JSON.stringify(args)
+  let handler = dispatchers[str]
   if (!handler) {
     handler = dispatchers[str] = function (e) {
       // Do not propagate click to elements below the button

src/renderer/lib/errors.js

@@ -1,8 +1,15 @@
 module.exports = {
-  UnplayableError
+  UnplayableTorrentError,
+  UnplayableFileError
 }
 
-function UnplayableError () {
+function UnplayableTorrentError () {
   this.message = 'Can\'t play any files in torrent'
 }
-UnplayableError.prototype = Error
+
+function UnplayableFileError () {
+  this.message = 'Can\'t play that file'
+}
+
+UnplayableTorrentError.prototype = Error
+UnplayableFileError.prototype = Error

src/renderer/lib/migrations.js

@@ -4,8 +4,10 @@ module.exports = {
   run
 }
 
-var semver = require('semver')
-var config = require('../../config')
+const semver = require('semver')
+const config = require('../../config')
+const TorrentSummary = require('./torrent-summary')
+const fs = require('fs')
 
 // Change `state.saved` (which will be saved back to config.json on exit) as
 // needed, for example to deal with config.json format changes across versions
@@ -15,7 +17,7 @@ function run (state) {
     state.saved.version = '0.0.0' // Pre-0.7.0 version, so run all migrations
   }
 
-  var version = state.saved.version
+  const version = state.saved.version
 
   if (semver.lt(version, '0.7.0')) {
     migrate_0_7_0(state.saved)
@@ -29,18 +31,24 @@ function run (state) {
     migrate_0_11_0(state.saved)
   }
 
+  if (semver.lt(version, '0.12.0')) {
+    migrate_0_12_0(state.saved)
+  }
+
+  if (semver.lt(version, '0.14.0')) {
+    migrate_0_14_0(state.saved)
+  }
+
   // Config is now on the new version
   state.saved.version = config.APP_VERSION
 }
 
 function migrate_0_7_0 (saved) {
-  console.log('migrate to 0.7.0')
-
-  var fs = require('fs-extra')
-  var path = require('path')
+  const fs = require('fs-extra')
+  const path = require('path')
 
   saved.torrents.forEach(function (ts) {
-    var infoHash = ts.infoHash
+    const infoHash = ts.infoHash
 
     // Replace torrentPath with torrentFileName
     // There are a number of cases to handle here:
@@ -48,9 +56,8 @@ function migrate_0_7_0 (saved) {
     // * Then, relative paths for the default torrents, eg '../static/sintel.torrent'
     // * Then, paths computed at runtime for default torrents, eg 'sintel.torrent'
     // * Finally, now we're getting rid of torrentPath altogether
-    var src, dst
+    let src, dst
     if (ts.torrentPath) {
-      console.log('replacing torrentPath %s', ts.torrentPath)
       if (path.isAbsolute(ts.torrentPath) || ts.torrentPath.startsWith('..')) {
         src = ts.torrentPath
       } else {
@@ -67,8 +74,7 @@ function migrate_0_7_0 (saved) {
 
     // Replace posterURL with posterFileName
     if (ts.posterURL) {
-      console.log('replacing posterURL %s', ts.posterURL)
-      var extension = path.extname(ts.posterURL)
+      const extension = path.extname(ts.posterURL)
       src = path.isAbsolute(ts.posterURL)
         ? ts.posterURL
         : path.join(config.STATIC_PATH, ts.posterURL)
@@ -91,7 +97,7 @@ function migrate_0_7_0 (saved) {
 }
 
 function migrate_0_7_2 (saved) {
-  if (!saved.prefs) {
+  if (saved.prefs == null) {
     saved.prefs = {
       downloadPath: config.DEFAULT_DOWNLOAD_PATH
     }
@@ -99,8 +105,43 @@ function migrate_0_7_2 (saved) {
 }
 
 function migrate_0_11_0 (saved) {
-  if (saved.prefs.isFileHandler === undefined) {
+  if (saved.prefs.isFileHandler == null) {
     // The app used to make itself the default torrent file handler automatically
     saved.prefs.isFileHandler = true
   }
 }
+
+function migrate_0_12_0 (saved) {
+  if (saved.prefs.openExternalPlayer == null && saved.prefs.playInVlc != null) {
+    saved.prefs.openExternalPlayer = saved.prefs.playInVlc
+  }
+  delete saved.prefs.playInVlc
+
+  // Undo a terrible bug where clicking Play on a default torrent on a fresh
+  // install results in a "path missing" error
+  // See https://github.com/feross/webtorrent-desktop/pull/806
+  const defaultTorrentFiles = [
+    '6a9759bffd5c0af65319979fb7832189f4f3c35d.torrent',
+    '88594aaacbde40ef3e2510c47374ec0aa396c08e.torrent',
+    '6a02592d2bbc069628cd5ed8a54f88ee06ac0ba5.torrent',
+    '02767050e0be2fd4db9a2ad6c12416ac806ed6ed.torrent',
+    '3ba219a8634bf7bae3d848192b2da75ae995589d.torrent'
+  ]
+  saved.torrents.forEach(function (torrentSummary) {
+    if (!defaultTorrentFiles.includes(torrentSummary.torrentFileName)) return
+    const fileOrFolder = TorrentSummary.getFileOrFolder(torrentSummary)
+    if (!fileOrFolder) return
+    try {
+      fs.statSync(fileOrFolder)
+    } catch (e) {
+      // Default torrent with "missing path" error. Clear path.
+      delete torrentSummary.path
+    }
+  })
+}
+
+function migrate_0_14_0 (saved) {
+  saved.torrents.forEach(function (ts) {
+    delete ts.defaultPlayFileIndex
+  })
+}

src/renderer/lib/playlist.js

@@ -0,0 +1,85 @@
+module.exports = {
+  hasNext,
+  getNextIndex,
+  hasPrevious,
+  getPreviousIndex,
+  getCurrentLocalURL
+}
+
+const TorrentSummary = require('./torrent-summary')
+const TorrentPlayer = require('./torrent-player')
+
+const cache = {
+  infoHash: null,
+  previousIndex: null,
+  currentIndex: null,
+  nextIndex: null
+}
+
+function hasNext (state) {
+  updateCache(state)
+  return cache.nextIndex !== null
+}
+
+function getNextIndex (state) {
+  updateCache(state)
+  return cache.nextIndex
+}
+
+function hasPrevious (state) {
+  updateCache(state)
+  return cache.previousIndex !== null
+}
+
+function getPreviousIndex (state) {
+  updateCache(state)
+  return cache.previousIndex
+}
+
+function getCurrentLocalURL (state) {
+  return state.server.localURL + '/' + state.playing.fileIndex
+}
+
+function updateCache (state) {
+  const infoHash = state.playing.infoHash
+  const fileIndex = state.playing.fileIndex
+
+  if (infoHash === cache.infoHash) {
+    switch (fileIndex) {
+      case cache.currentIndex:
+        return
+      case cache.nextIndex:
+        cache.previousIndex = cache.currentIndex
+        cache.currentIndex = fileIndex
+        cache.nextIndex = findNextIndex(state)
+        return
+      case cache.previousIndex:
+        cache.previousIndex = findPreviousIndex(state)
+        cache.nextIndex = cache.currentIndex
+        cache.currentIndex = fileIndex
+        return
+    }
+  } else {
+    cache.infoHash = infoHash
+  }
+
+  cache.previousIndex = findPreviousIndex(state)
+  cache.currentIndex = fileIndex
+  cache.nextIndex = findNextIndex(state)
+}
+
+function findPreviousIndex (state) {
+  const files = TorrentSummary.getByKey(state, state.playing.infoHash).files
+  for (var i = state.playing.fileIndex - 1; i >= 0; i--) {
+    if (TorrentPlayer.isPlayable(files[i])) return i
+  }
+  return null
+}
+
+function findNextIndex (state) {
+  const files = TorrentSummary.getByKey(state, state.playing.infoHash).files
+  for (var i = state.playing.fileIndex + 1; i < files.length; i++) {
+    if (TorrentPlayer.isPlayable(files[i])) return i
+  }
+  return null
+}

src/renderer/lib/sound.js

@@ -3,15 +3,15 @@ module.exports = {
   play
 }
 
-var config = require('../../config')
-var path = require('path')
+const config = require('../../config')
+const path = require('path')
 
-var VOLUME = 0.15
+const VOLUME = 0.15
 
 /* Cache of Audio elements, for instant playback */
-var cache = {}
+const cache = {}
 
-var sounds = {
+const sounds = {
   ADD: {
     url: 'file://' + path.join(config.STATIC_PATH, 'sound', 'add.wav'),
     volume: VOLUME
@@ -47,10 +47,10 @@ var sounds = {
 }
 
 function preload () {
-  for (var name in sounds) {
+  for (let name in sounds) {
     if (!cache[name]) {
-      var sound = sounds[name]
-      var audio = cache[name] = new window.Audio()
+      const sound = sounds[name]
+      const audio = cache[name] = new window.Audio()
       audio.volume = sound.volume
       audio.src = sound.url
     }
@@ -58,9 +58,9 @@ function preload () {
 }
 
 function play (name) {
-  var audio = cache[name]
+  let audio = cache[name]
   if (!audio) {
-    var sound = sounds[name]
+    const sound = sounds[name]
     if (!sound) {
       throw new Error('Invalid sound name')
     }

src/renderer/lib/state.js

@@ -1,11 +1,11 @@
-var appConfig = require('application-config')('WebTorrent')
-var path = require('path')
-var {EventEmitter} = require('events')
+const appConfig = require('application-config')('WebTorrent')
+const path = require('path')
+const {EventEmitter} = require('events')
 
-var config = require('../../config')
-var migrations = require('./migrations')
+const config = require('../../config')
+const migrations = require('./migrations')
 
-var State = module.exports = Object.assign(new EventEmitter(), {
+const State = module.exports = Object.assign(new EventEmitter(), {
   getDefaultPlayState,
   load,
   save,
@@ -15,7 +15,7 @@ var State = module.exports = Object.assign(new EventEmitter(), {
 appConfig.filePath = path.join(config.CONFIG_PATH, 'config.json')
 
 function getDefaultState () {
-  var LocationHistory = require('location-history')
+  const LocationHistory = require('location-history')
 
   return {
     /*
@@ -24,7 +24,11 @@ function getDefaultState () {
      */
     client: null, /* the WebTorrent client */
     server: null, /* local WebTorrent-to-HTTP server */
-    prev: {}, /* used for state diffing in updateElectron() */
+    prev: { /* used for state diffing in updateElectron() */
+      title: null,
+      progress: -1,
+      badge: null
+    },
     location: new LocationHistory(),
     window: {
       bounds: null, /* {x, y, width, height } */
@@ -94,22 +98,25 @@ function getDefaultPlayState () {
 
 /* If the saved state file doesn't exist yet, here's what we use instead */
 function setupSavedState (cb) {
-  var fs = require('fs-extra')
-  var parseTorrent = require('parse-torrent')
-  var parallel = require('run-parallel')
+  const fs = require('fs-extra')
+  const parseTorrent = require('parse-torrent')
+  const parallel = require('run-parallel')
 
-  var saved = {
+  const saved = {
     prefs: {
-      downloadPath: config.DEFAULT_DOWNLOAD_PATH
+      downloadPath: config.DEFAULT_DOWNLOAD_PATH,
+      isFileHandler: false,
+      openExternalPlayer: false,
+      externalPlayerPath: null
     },
     torrents: config.DEFAULT_TORRENTS.map(createTorrentObject),
     version: config.APP_VERSION /* make sure we can upgrade gracefully later */
   }
 
-  var tasks = []
+  const tasks = []
 
   config.DEFAULT_TORRENTS.map(function (t, i) {
-    var infoHash = saved.torrents[i].infoHash
+    const infoHash = saved.torrents[i].infoHash
     tasks.push(function (cb) {
       fs.copy(
         path.join(config.STATIC_PATH, t.posterFileName),
@@ -132,8 +139,8 @@ function setupSavedState (cb) {
   })
 
   function createTorrentObject (t) {
-    var torrent = fs.readFileSync(path.join(config.STATIC_PATH, t.torrentFileName))
-    var parsedTorrent = parseTorrent(torrent)
+    const torrent = fs.readFileSync(path.join(config.STATIC_PATH, t.torrentFileName))
+    const parsedTorrent = parseTorrent(torrent)
 
     return {
       status: 'paused',
@@ -150,18 +157,18 @@ function setupSavedState (cb) {
 }
 
 function getPlayingTorrentSummary () {
-  var infoHash = this.playing.infoHash
+  const infoHash = this.playing.infoHash
   return this.saved.torrents.find((x) => x.infoHash === infoHash)
 }
 
 function getPlayingFileSummary () {
-  var torrentSummary = this.getPlayingTorrentSummary()
+  const torrentSummary = this.getPlayingTorrentSummary()
   if (!torrentSummary) return null
   return torrentSummary.files[this.playing.fileIndex]
 }
 
 function load (cb) {
-  var state = getDefaultState()
+  const state = getDefaultState()
 
   appConfig.read(function (err, saved) {
     if (err || !saved.version) {
@@ -186,14 +193,14 @@ function save (state, cb) {
   delete state.saveStateTimeout
 
   // Clean up, so that we're not saving any pending state
-  var copy = Object.assign({}, state.saved)
+  const copy = Object.assign({}, state.saved)
   // Remove torrents pending addition to the list, where we haven't finished
   // reading the torrent file or file(s) to seed & don't have an infohash
   copy.torrents = copy.torrents
     .filter((x) => x.infoHash)
     .map(function (x) {
-      var torrent = {}
-      for (var key in x) {
+      const torrent = {}
+      for (let key in x) {
         if (key === 'progress' || key === 'torrentKey') {
           continue // Don't save progress info or key for the webtorrent process
         }

src/renderer/lib/telemetry.js

@@ -14,7 +14,7 @@ const url = require('url')
 
 const config = require('../../config')
 
-var telemetry
+let telemetry
 
 function init (state) {
   telemetry = state.saved.telemetry
@@ -23,7 +23,8 @@ function init (state) {
     reset()
   }
 
-  var now = new Date()
+  const now = new Date()
+  telemetry.version = config.APP_VERSION
   telemetry.timestamp = now.toISOString()
   telemetry.localTime = now.toTimeString()
   telemetry.screens = getScreenInfo()
@@ -32,6 +33,8 @@ function init (state) {
 
   if (config.IS_PRODUCTION) {
     postToServer()
+    // If the user keeps WebTorrent running for a long time, post every 12h
+    setInterval(postToServer, 12 * 3600 * 1000)
   } else {
     // Development: telemetry used only for local debugging
     // Empty uncaught errors, etc at the start of every run
@@ -42,6 +45,7 @@ function init (state) {
 function reset () {
   telemetry.uncaughtErrors = []
   telemetry.playAttempts = {
+    minVersion: config.APP_VERSION,
     total: 0,
     success: 0,
     timeout: 0,
@@ -52,17 +56,17 @@ function reset () {
 
 function postToServer () {
   // Serialize the telemetry summary
-  var payload = new Buffer(JSON.stringify(telemetry), 'utf8')
+  const payload = new Buffer(JSON.stringify(telemetry), 'utf8')
 
   // POST to our server
-  var options = url.parse(config.TELEMETRY_URL)
+  const options = url.parse(config.TELEMETRY_URL)
   options.method = 'POST'
   options.headers = {
     'Content-Type': 'application/json',
     'Content-Length': payload.length
   }
 
-  var req = https.request(options, function (res) {
+  const req = https.request(options, function (res) {
     if (res.statusCode === 200) {
       console.log('Successfully posted telemetry summary')
       reset()
@@ -81,7 +85,7 @@ function postToServer () {
 // collects screen resolution, etc
 function createSummary () {
   // Make a 256-bit random unique ID
-  var userID = crypto.randomBytes(32).toString('hex')
+  const userID = crypto.randomBytes(32).toString('hex')
   return { userID }
 }
 
@@ -107,36 +111,73 @@ function getSystemInfo () {
 
 // Get the number of torrents, rounded to the nearest power of two
 function getApproxNumTorrents (state) {
-  var exactNum = state.saved.torrents.length
+  const exactNum = state.saved.torrents.length
   if (exactNum === 0) return 0
   // Otherwise, return 1, 2, 4, 8, etc by rounding in log space
-  var log2 = Math.log(exactNum) / Math.log(2)
+  const log2 = Math.log(exactNum) / Math.log(2)
   return 1 << Math.round(log2)
 }
 
 // An uncaught error happened in the main process or in one of the windows
-function logUncaughtError (procName, err) {
-  console.error('uncaught error', procName, err)
-
+function logUncaughtError (procName, e) {
   // Not initialized yet? Ignore.
   // Hopefully uncaught errors immediately on startup are fixed in dev
   if (!telemetry) return
 
-  var message, stack
-  if (err instanceof Error) {
-    message = err.message
-    stack = err.stack
+  let message
+  let stack = ''
+  if (e == null) {
+    message = 'Unexpected undefined error'
+  } else if (e.error) {
+    // Uncaught Javascript errors (window.onerror), err is an ErrorEvent
+    if (!e.error.message) {
+      message = 'Unexpected ErrorEvent.error: ' + Object.keys(e.error).join(' ')
+    } else {
+      message = e.error.message
+      stack = e.error.stack
+    }
+  } else if (e.message) {
+    // err is either an Error or a plain object {message, stack}
+    message = e.message
+    stack = e.stack
   } else {
-    message = String(err)
-    stack = ''
+    // Resource errors (captured element.onerror), err is an Event
+    if (!e.target) {
+      message = 'Unexpected unknown error'
+    } else if (!e.target.error) {
+      message = 'Unexpected resource loading error: ' + getElemString(e.target)
+    } else {
+      message = 'Resource error ' + getElemString(e.target) + ': ' + e.target.error.code
+    }
   }
 
+  if (typeof stack !== 'string') stack = 'Unexpected stack: ' + stack
+  if (typeof message !== 'string') message = 'Unexpected message: ' + message
+
+  // Remove the first part of each file path in the stack trace.
+  // - Privacy: remove personal info like C:\Users\<full name>
+  // - Aggregation: this lets us find which stacktraces occur often
+  stack = stack.replace(/\(.*app.asar/g, '(...')
+  stack = stack.replace(/at .*app.asar/g, 'at ...')
+
   // We need to POST the telemetry object, make sure it stays < 100kb
   if (telemetry.uncaughtErrors.length > 20) return
   if (message.length > 1000) message = message.substring(0, 1000)
   if (stack.length > 1000) stack = stack.substring(0, 1000)
 
-  telemetry.uncaughtErrors.push({process: procName, message, stack})
+  // Log the app version *at the time of the error*
+  const version = config.APP_VERSION
+
+  telemetry.uncaughtErrors.push({process: procName, message, stack, version})
+}
+
+// Turns a DOM element into a string, eg "DIV.my-class.visible"
+function getElemString (elem) {
+  let ret = elem.tagName
+  try {
+    ret += '.' + Array.from(elem.classList).join('.')
+  } catch (e) {}
+  return ret
 }
 
 // The user pressed play. It either worked, timed out, or showed the
@@ -146,7 +187,7 @@ function logPlayAttempt (result) {
     return console.error('Unknown play attempt result', result)
   }
 
-  var attempts = telemetry.playAttempts
+  const attempts = telemetry.playAttempts
   attempts.total = (attempts.total || 0) + 1
   attempts[result] = (attempts[result] || 0) + 1
 }

src/renderer/lib/torrent-player.js

@@ -3,11 +3,10 @@ module.exports = {
   isVideo,
   isAudio,
   isTorrent,
-  isPlayableTorrentSummary,
-  pickFileToPlay
+  isPlayableTorrentSummary
 }
 
-var path = require('path')
+const path = require('path')
 
 // Checks whether a fileSummary or file path is audio/video that we can play,
 // based on the file extension
@@ -37,7 +36,8 @@ function isAudio (file) {
     '.ac3',
     '.mp3',
     '.ogg',
-    '.wav'
+    '.wav',
+    '.m4a'
   ].includes(getFileExtension(file))
 }
 
@@ -46,38 +46,16 @@ function isAudio (file) {
 // - a file object where obj.name is ends in .torrent
 // - a string that's a magnet link (magnet://...)
 function isTorrent (file) {
-  var isTorrentFile = getFileExtension(file) === '.torrent'
-  var isMagnet = typeof file === 'string' && /^(stream-)?magnet:/.test(file)
+  const isTorrentFile = getFileExtension(file) === '.torrent'
+  const isMagnet = typeof file === 'string' && /^(stream-)?magnet:/.test(file)
   return isTorrentFile || isMagnet
 }
 
 function getFileExtension (file) {
-  var name = typeof file === 'string' ? file : file.name
+  const name = typeof file === 'string' ? file : file.name
   return path.extname(name).toLowerCase()
 }
 
 function isPlayableTorrentSummary (torrentSummary) {
   return torrentSummary.files && torrentSummary.files.some(isPlayable)
 }
-
-// Picks the default file to play from a list of torrent or torrentSummary files
-// Returns an index or undefined, if no files are playable
-function pickFileToPlay (files) {
-  // first, try to find the biggest video file
-  var videoFiles = files.filter(isVideo)
-  if (videoFiles.length > 0) {
-    var largestVideoFile = videoFiles.reduce(function (a, b) {
-      return a.length > b.length ? a : b
-    })
-    return files.indexOf(largestVideoFile)
-  }
-
-  // if there are no videos, play the first audio file
-  var audioFiles = files.filter(isAudio)
-  if (audioFiles.length > 0) {
-    return files.indexOf(audioFiles[0])
-  }
-
-  // no video or audio means nothing is playable
-  return undefined
-}

src/renderer/lib/torrent-poster.js

@@ -1,22 +1,22 @@
 module.exports = torrentPoster
 
-var captureVideoFrame = require('./capture-video-frame')
-var path = require('path')
+const captureVideoFrame = require('./capture-video-frame')
+const path = require('path')
 
 function torrentPoster (torrent, cb) {
   // First, try to use a poster image if available
-  var posterFile = torrent.files.filter(function (file) {
+  const posterFile = torrent.files.filter(function (file) {
     return /^poster\.(jpg|png|gif)$/.test(file.name)
   })[0]
   if (posterFile) return torrentPosterFromImage(posterFile, torrent, cb)
 
   // Second, try to use the largest video file
   // Filter out file formats that the <video> tag definitely can't play
-  var videoFile = getLargestFileByExtension(torrent, ['.mp4', '.m4v', '.webm', '.mov', '.mkv'])
+  const videoFile = getLargestFileByExtension(torrent, ['.mp4', '.m4v', '.webm', '.mov', '.mkv'])
   if (videoFile) return torrentPosterFromVideo(videoFile, torrent, cb)
 
   // Third, try to use the largest image file
-  var imgFile = getLargestFileByExtension(torrent, ['.gif', '.jpg', '.jpeg', '.png'])
+  const imgFile = getLargestFileByExtension(torrent, ['.gif', '.jpg', '.jpeg', '.png'])
   if (imgFile) return torrentPosterFromImage(imgFile, torrent, cb)
 
   // TODO: generate a waveform from the largest sound file
@@ -25,8 +25,8 @@ function torrentPoster (torrent, cb) {
 }
 
 function getLargestFileByExtension (torrent, extensions) {
-  var files = torrent.files.filter(function (file) {
-    var extname = path.extname(file.name).toLowerCase()
+  const files = torrent.files.filter(function (file) {
+    const extname = path.extname(file.name).toLowerCase()
     return extensions.indexOf(extname) !== -1
   })
   if (files.length === 0) return undefined
@@ -36,15 +36,15 @@ function getLargestFileByExtension (torrent, extensions) {
 }
 
 function torrentPosterFromVideo (file, torrent, cb) {
-  var index = torrent.files.indexOf(file)
+  const index = torrent.files.indexOf(file)
 
-  var server = torrent.createServer(0)
+  const 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')
+    const port = server.address().port
+    const url = 'http://localhost:' + port + '/' + index
+    const video = document.createElement('video')
     video.addEventListener('canplay', onCanPlay)
 
     video.volume = 0
@@ -61,7 +61,7 @@ function torrentPosterFromVideo (file, torrent, cb) {
     function onSeeked () {
       video.removeEventListener('seeked', onSeeked)
 
-      var buf = captureVideoFrame(video)
+      const buf = captureVideoFrame(video)
 
       // unload video element
       video.pause()
@@ -78,6 +78,6 @@ function torrentPosterFromVideo (file, torrent, cb) {
 }
 
 function torrentPosterFromImage (file, torrent, cb) {
-  var extname = path.extname(file.name)
+  const extname = path.extname(file.name)
   file.getBuffer((err, buf) => cb(err, buf, extname))
 }

src/renderer/lib/torrent-summary.js

@@ -6,8 +6,8 @@ module.exports = {
   getFileOrFolder
 }
 
-var path = require('path')
-var config = require('../../config')
+const path = require('path')
+const config = require('../../config')
 
 // Expects a torrentSummary
 // Returns an absolute path to the torrent file, or null if unavailable
@@ -20,7 +20,7 @@ function getTorrentPath (torrentSummary) {
 // Returns an absolute path to the poster image, or null if unavailable
 function getPosterPath (torrentSummary) {
   if (!torrentSummary || !torrentSummary.posterFileName) return null
-  var posterPath = path.join(config.POSTER_PATH, torrentSummary.posterFileName)
+  const posterPath = path.join(config.POSTER_PATH, torrentSummary.posterFileName)
   // Work around a Chrome bug (reproduced in vanilla Chrome, not just Electron):
   // Backslashes in URLS in CSS cause bizarre string encoding issues
   return posterPath.replace(/\\/g, '/')
@@ -29,7 +29,7 @@ function getPosterPath (torrentSummary) {
 // Expects a torrentSummary
 // Returns a torrentID: filename, magnet URI, or infohash
 function getTorrentID (torrentSummary) {
-  var s = torrentSummary
+  const s = torrentSummary
   if (s.torrentFileName) { // Load torrent file from disk
     return getTorrentPath(s)
   } else { // Load torrent from DHT
@@ -51,6 +51,7 @@ function getByKey (state, torrentKey) {
 // TODO: make this assumption explicit, enforce it in the `create-torrent`
 // module. Store root folder explicitly to avoid hacky path processing below.
 function getFileOrFolder (torrentSummary) {
-  var ts = torrentSummary
+  const ts = torrentSummary
+  if (!ts.path || !ts.files || ts.files.length === 0) return null
   return path.join(ts.path, ts.files[0].path.split('/')[0])
 }

src/renderer/main.js

@@ -5,17 +5,21 @@ crashReporter.init()
 
 const dragDrop = require('drag-drop')
 const electron = require('electron')
+const fs = require('fs')
 const React = require('react')
 const ReactDOM = require('react-dom')
-const fs = require('fs')
 
 const config = require('../config')
-const App = require('./views/app')
 const telemetry = require('./lib/telemetry')
 const sound = require('./lib/sound')
 const State = require('./lib/state')
 const TorrentPlayer = require('./lib/torrent-player')
 
+// Required by Material UI -- adds `onTouchTap` event
+require('react-tap-event-plugin')()
+
+const App = require('./pages/app')
+
 const MediaController = require('./controllers/media-controller')
 const UpdateController = require('./controllers/update-controller')
 const PrefsController = require('./controllers/prefs-controller')
@@ -24,27 +28,27 @@ const SubtitlesController = require('./controllers/subtitles-controller')
 const TorrentListController = require('./controllers/torrent-list-controller')
 const TorrentController = require('./controllers/torrent-controller')
 
+// Electron apps have two processes: a main process (node) runs first and starts
+// a renderer process (essentially a Chrome window). We're in the renderer process,
+// and this IPC channel receives from and sends messages to the main process
+const ipcRenderer = electron.ipcRenderer
+
 // Yo-yo pattern: state object lives here and percolates down thru all the views.
 // Events come back up from the views via dispatch(...)
 require('./lib/dispatcher').setDispatch(dispatch)
 
 // From dispatch(...), events are sent to one of the controllers
-var controllers = null
+let controllers = null
 
 // This dependency is the slowest-loading, so we lazy load it
-var Cast = null
-
-// Electron apps have two processes: a main process (node) runs first and starts
-// a renderer process (essentially a Chrome window). We're in the renderer process,
-// and this IPC channel receives from and sends messages to the main process
-var ipcRenderer = electron.ipcRenderer
+let Cast = null
 
 // All state lives in state.js. `state.saved` is read from and written to a file.
 // All other state is ephemeral. First we load state.saved then initialize the app.
-var state
+let state
 
 // Root React component
-var app
+let app
 
 State.load(onState)
 
@@ -55,6 +59,13 @@ function onState (err, _state) {
   if (err) return onError(err)
   state = window.state = _state // Make available for easier debugging
 
+  telemetry.init(state)
+
+  // Log uncaught JS errors
+  window.addEventListener('error',
+    (e) => telemetry.logUncaughtError('window', e),
+    true /* capture */)
+
   // Create controllers
   controllers = {
     media: new MediaController(state),
@@ -110,10 +121,6 @@ function onState (err, _state) {
   // ...window visibility state.
   document.addEventListener('webkitvisibilitychange', onVisibilityChange)
 
-  // Log uncaught JS errors
-  window.addEventListener('error',
-    (e) => telemetry.logUncaughtError('window', e.error || e.target), true)
-
   // Done! Ideally we want to get here < 500ms after the user clicks the app
   sound.play('STARTUP')
   console.timeEnd('init')
@@ -123,7 +130,6 @@ function onState (err, _state) {
 function delayedInit () {
   lazyLoadCast()
   sound.preload()
-  telemetry.init(state)
 }
 
 // Lazily loads Chromecast and Airplay support
@@ -153,7 +159,7 @@ function updateElectron () {
     state.prev.title = state.window.title
     ipcRenderer.send('setTitle', state.window.title)
   }
-  if (state.dock.progress !== state.prev.progress) {
+  if (state.dock.progress.toFixed(2) !== state.prev.progress.toFixed(2)) {
     state.prev.progress = state.dock.progress
     ipcRenderer.send('setProgress', state.dock.progress)
   }
@@ -171,19 +177,26 @@ const dispatchHandlers = {
 
   'addTorrent': (torrentId) => controllers.torrentList.addTorrent(torrentId),
   'showCreateTorrent': (paths) => controllers.torrentList.showCreateTorrent(paths),
-  'toggleCreateTorrentAdvanced': () => controllers.torrentList.toggleCreateTorrentAdvanced(),
   'createTorrent': (options) => controllers.torrentList.createTorrent(options),
   'toggleTorrent': (infoHash) => controllers.torrentList.toggleTorrent(infoHash),
-  'toggleTorrentFile': (infoHash, index) => controllers.torrentList.toggleTorrentFile(infoHash, index),
-  'confirmDeleteTorrent': (infoHash, deleteData) => controllers.torrentList.confirmDeleteTorrent(infoHash, deleteData),
-  'deleteTorrent': (infoHash, deleteData) => controllers.torrentList.deleteTorrent(infoHash, deleteData),
-  'toggleSelectTorrent': (infoHash) => controllers.torrentList.toggleSelectTorrent(infoHash),
-  'openTorrentContextMenu': (infoHash) => controllers.torrentList.openTorrentContextMenu(infoHash),
-  'startTorrentingSummary': (torrentKey) => controllers.torrentList.startTorrentingSummary(torrentKey),
+  'toggleTorrentFile': (infoHash, index) =>
+    controllers.torrentList.toggleTorrentFile(infoHash, index),
+  'confirmDeleteTorrent': (infoHash, deleteData) =>
+    controllers.torrentList.confirmDeleteTorrent(infoHash, deleteData),
+  'deleteTorrent': (infoHash, deleteData) =>
+    controllers.torrentList.deleteTorrent(infoHash, deleteData),
+  'toggleSelectTorrent': (infoHash) =>
+    controllers.torrentList.toggleSelectTorrent(infoHash),
+  'openTorrentContextMenu': (infoHash) =>
+    controllers.torrentList.openTorrentContextMenu(infoHash),
+  'startTorrentingSummary': (torrentKey) =>
+    controllers.torrentList.startTorrentingSummary(torrentKey),
 
   // Playback
   'playFile': (infoHash, index) => controllers.playback.playFile(infoHash, index),
   'playPause': () => controllers.playback.playPause(),
+  'nextTrack': () => controllers.playback.nextTrack(),
+  'previousTrack': () => controllers.playback.previousTrack(),
   'skip': (time) => controllers.playback.skip(time),
   'skipTo': (time) => controllers.playback.skipTo(time),
   'changePlaybackRate': (dir) => controllers.playback.changePlaybackRate(dir),
@@ -198,14 +211,14 @@ const dispatchHandlers = {
   'checkForSubtitles': () => controllers.subtitles.checkForSubtitles(),
   'addSubtitles': (files, autoSelect) => controllers.subtitles.addSubtitles(files, autoSelect),
 
-  // Local media: <video>, <audio>, VLC
+  // Local media: <video>, <audio>, external players
   'mediaStalled': () => controllers.media.mediaStalled(),
   'mediaError': (err) => controllers.media.mediaError(err),
   'mediaSuccess': () => controllers.media.mediaSuccess(),
   'mediaTimeUpdate': () => controllers.media.mediaTimeUpdate(),
   'mediaMouseMoved': () => controllers.media.mediaMouseMoved(),
-  'vlcPlay': () => controllers.media.vlcPlay(),
-  'vlcNotFound': () => controllers.media.vlcNotFound(),
+  'openExternalPlayer': () => controllers.media.openExternalPlayer(),
+  'externalPlayerNotFound': () => controllers.media.externalPlayerNotFound(),
 
   // Remote casting: Chromecast, Airplay, etc
   'toggleCastMenu': (deviceType) => lazyLoadCast().toggleMenu(deviceType),
@@ -251,7 +264,7 @@ function dispatch (action, ...args) {
     console.log('dispatch: %s %o', action, args)
   }
 
-  var handler = dispatchHandlers[action]
+  const handler = dispatchHandlers[action]
   if (handler) handler(...args)
   else console.error('Missing dispatch handler: ' + action)
 
@@ -271,7 +284,7 @@ function setupIpc () {
 
   ipcRenderer.on('fullscreenChanged', onFullscreenChanged)
 
-  var tc = controllers.torrent
+  const tc = controllers.torrent
   ipcRenderer.on('wt-infohash', (e, ...args) => tc.torrentInfoHash(...args))
   ipcRenderer.on('wt-metadata', (e, ...args) => tc.torrentMetadata(...args))
   ipcRenderer.on('wt-done', (e, ...args) => tc.torrentDone(...args))
@@ -298,7 +311,7 @@ function backToList () {
   state.modal = null
   state.location.backToFirst(function () {
     // If we were already on the torrent list, scroll to the top
-    var contentTag = document.querySelector('.content')
+    const contentTag = document.querySelector('.content')
     if (contentTag) contentTag.scrollTop = 0
   })
 }
@@ -345,24 +358,24 @@ function setDimensions (dimensions) {
   state.window.wasMaximized = electron.remote.getCurrentWindow().isMaximized
 
   // Limit window size to screen size
-  var screenWidth = window.screen.width
-  var screenHeight = window.screen.height
-  var aspectRatio = dimensions.width / dimensions.height
-  var scaleFactor = Math.min(
+  const screenWidth = window.screen.width
+  const screenHeight = window.screen.height
+  const aspectRatio = dimensions.width / dimensions.height
+  const scaleFactor = Math.min(
     Math.min(screenWidth / dimensions.width, 1),
     Math.min(screenHeight / dimensions.height, 1)
   )
-  var width = Math.max(
+  const width = Math.max(
     Math.floor(dimensions.width * scaleFactor),
     config.WINDOW_MIN_WIDTH
   )
-  var height = Math.max(
+  const height = Math.max(
     Math.floor(dimensions.height * scaleFactor),
     config.WINDOW_MIN_HEIGHT
   )
 
   ipcRenderer.send('setAspectRatio', aspectRatio)
-  ipcRenderer.send('setBounds', {x: null, y: null, width, height})
+  ipcRenderer.send('setBounds', {contentBounds: true, x: null, y: null, width, height})
   state.playing.aspectRatio = aspectRatio
 }
 
@@ -371,9 +384,9 @@ function setDimensions (dimensions) {
 function onOpen (files) {
   if (!Array.isArray(files)) files = [ files ]
 
-  var url = state.location.url()
-  var allTorrents = files.every(TorrentPlayer.isTorrent)
-  var allSubtitles = files.every(controllers.subtitles.isSubtitle)
+  const url = state.location.url()
+  const allTorrents = files.every(TorrentPlayer.isTorrent)
+  const allSubtitles = files.every(controllers.subtitles.isSubtitle)
 
   if (allTorrents) {
     // Drop torrents onto the app: go to home screen, add torrents, no matter what
@@ -409,7 +422,7 @@ function onError (err) {
 function onPaste (e) {
   if (e.target.tagName.toLowerCase() === 'input') return
 
-  var torrentIds = electron.clipboard.readText().split('\n')
+  const torrentIds = electron.clipboard.readText().split('\n')
   torrentIds.forEach(function (torrentId) {
     torrentId = torrentId.trim()
     if (torrentId.length === 0) return

src/renderer/pages/app.js

@@ -0,0 +1,116 @@
+const colors = require('material-ui/styles/colors')
+const React = require('react')
+
+const darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme').default
+const lightBaseTheme = require('material-ui/styles/baseThemes/lightBaseTheme').default
+const getMuiTheme = require('material-ui/styles/getMuiTheme').default
+const MuiThemeProvider = require('material-ui/styles/MuiThemeProvider').default
+
+const Header = require('../components/header')
+
+const Views = {
+  'home': require('./torrent-list-page'),
+  'player': require('./player-page'),
+  'create-torrent': require('./create-torrent-page'),
+  'preferences': require('./preferences-page')
+}
+
+const Modals = {
+  'open-torrent-address-modal': require('../components/open-torrent-address-modal'),
+  'remove-torrent-modal': require('../components/remove-torrent-modal'),
+  'update-available-modal': require('../components/update-available-modal'),
+  'unsupported-media-modal': require('../components/unsupported-media-modal')
+}
+
+const fontFamily = process.platform === 'win32'
+  ? '"Segoe UI", sans-serif'
+  : 'BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif'
+lightBaseTheme.fontFamily = fontFamily
+darkBaseTheme.fontFamily = fontFamily
+darkBaseTheme.palette.primary1Color = colors.cyan500
+darkBaseTheme.palette.primary2Color = colors.cyan500
+darkBaseTheme.palette.primary3Color = colors.grey600
+darkBaseTheme.palette.accent1Color = colors.redA200
+darkBaseTheme.palette.accent2Color = colors.redA400
+darkBaseTheme.palette.accent3Color = colors.redA100
+
+class App extends React.Component {
+  render () {
+    const state = this.props.state
+
+    // Hide player controls while playing video, if the mouse stays still for a while
+    // Never hide the controls when:
+    // * The mouse is over the controls or we're scrubbing (see CSS)
+    // * The video is paused
+    // * The video is playing remotely on Chromecast or Airplay
+    const hideControls = state.location.url() === 'player' &&
+      state.playing.mouseStationarySince !== 0 &&
+      new Date().getTime() - state.playing.mouseStationarySince > 2000 &&
+      !state.playing.isPaused &&
+      state.playing.location === 'local' &&
+      state.playing.playbackRate === 1
+
+    const cls = [
+      'view-' + state.location.url(), /* e.g. view-home, view-player */
+      'is-' + process.platform /* e.g. is-darwin, is-win32, is-linux */
+    ]
+    if (state.window.isFullScreen) cls.push('is-fullscreen')
+    if (state.window.isFocused) cls.push('is-focused')
+    if (hideControls) cls.push('hide-video-controls')
+
+    const vdom = (
+      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
+        <div className={'app ' + cls.join(' ')}>
+          <Header state={state} />
+          {this.getErrorPopover()}
+          <div key='content' className='content'>{this.getView()}</div>
+          {this.getModal()}
+        </div>
+      </MuiThemeProvider>
+    )
+
+    return vdom
+  }
+
+  getErrorPopover () {
+    const state = this.props.state
+    const now = new Date().getTime()
+    const recentErrors = state.errors.filter((x) => now - x.time < 5000)
+    const hasErrors = recentErrors.length > 0
+
+    const errorElems = recentErrors.map(function (error, i) {
+      return (<div key={i} className='error'>{error.message}</div>)
+    })
+    return (
+      <div key='errors'
+        className={'error-popover ' + (hasErrors ? 'visible' : 'hidden')}>
+        <div key='title' className='title'>Error</div>
+        {errorElems}
+      </div>
+    )
+  }
+
+  getModal () {
+    const state = this.props.state
+    if (!state.modal) return
+    const ModalContents = Modals[state.modal.id]
+    return (
+      <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
+        <div key='modal' className='modal'>
+          <div key='modal-background' className='modal-background' />
+          <div key='modal-content' className='modal-content'>
+            <ModalContents state={state} />
+          </div>
+        </div>
+      </MuiThemeProvider>
+    )
+  }
+
+  getView () {
+    const state = this.props.state
+    const View = Views[state.location.url()]
+    return (<View state={state} />)
+  }
+}
+
+module.exports = App

src/renderer/pages/create-torrent-page.js

@@ -0,0 +1,216 @@
+const createTorrent = require('create-torrent')
+const path = require('path')
+const prettyBytes = require('prettier-bytes')
+const React = require('react')
+
+const {dispatch, dispatcher} = require('../lib/dispatcher')
+
+const FlatButton = require('material-ui/FlatButton').default
+const RaisedButton = require('material-ui/RaisedButton').default
+const TextField = require('material-ui/TextField').default
+const Checkbox = require('material-ui/Checkbox').default
+
+const CreateTorrentErrorPage = require('../components/create-torrent-error-page')
+const Heading = require('../components/heading')
+const ShowMore = require('../components/show-more')
+
+// Shows a basic UI to create a torrent, from an already-selected file or folder.
+// Includes a "Show Advanced..." button and more advanced UI.
+class CreateTorrentPage extends React.Component {
+  constructor (props) {
+    super(props)
+
+    const state = this.props.state
+    const info = state.location.current()
+
+    // First, extract the base folder that the files are all in
+    let pathPrefix = info.folderPath
+    if (!pathPrefix) {
+      pathPrefix = info.files.map((x) => x.path).reduce(findCommonPrefix)
+      if (!pathPrefix.endsWith('/') && !pathPrefix.endsWith('\\')) {
+        pathPrefix = path.dirname(pathPrefix)
+      }
+    }
+
+    // Then, exclude .DS_Store and other dotfiles
+    const files = info.files
+      .filter((f) => !containsDots(f.path, pathPrefix))
+      .map((f) => ({name: f.name, path: f.path, size: f.size}))
+    if (files.length === 0) return (<CreateTorrentErrorPage state={state} />)
+
+    // Then, use the name of the base folder (or sole file, for a single file torrent)
+    // as the default name. Show all files relative to the base folder.
+    let defaultName, basePath
+    if (files.length === 1) {
+      // Single file torrent: /a/b/foo.jpg -> torrent name 'foo.jpg', path '/a/b'
+      defaultName = files[0].name
+      basePath = pathPrefix
+    } else {
+      // Multi file torrent: /a/b/{foo, bar}.jpg -> torrent name 'b', path '/a'
+      defaultName = path.basename(pathPrefix)
+      basePath = path.dirname(pathPrefix)
+    }
+
+    // Default trackers
+    const trackers = createTorrent.announceList.join('\n')
+
+    this.state = {
+      comment: '',
+      isPrivate: false,
+      pathPrefix,
+      basePath,
+      defaultName,
+      files,
+      trackers
+    }
+
+    // Create React event handlers only once
+    this.setIsPrivate = (_, isPrivate) => this.setState({isPrivate})
+    this.setComment = (_, comment) => this.setState({comment})
+    this.setTrackers = (_, trackers) => this.setState({trackers})
+    this.handleSubmit = handleSubmit.bind(this)
+  }
+
+  render () {
+    const files = this.state.files
+
+    // Sanity check: show the number of files and total size
+    const numFiles = files.length
+    const totalBytes = files
+      .map((f) => f.size)
+      .reduce((a, b) => a + b, 0)
+    const torrentInfo = `${numFiles} files, ${prettyBytes(totalBytes)}`
+
+    return (
+      <div className='create-torrent'>
+        <Heading level={1}>Create torrent {this.state.defaultName}</Heading>
+        <div className='torrent-info'>{torrentInfo}</div>
+        <div className='torrent-attribute'>
+          <label>Path:</label>
+          <div>{this.state.pathPrefix}</div>
+        </div>
+        <ShowMore
+          style={{
+            marginBottom: 10
+          }}
+          hideLabel='Hide advanced settings...'
+          showLabel='Show advanced settings...'>
+          {this.renderAdvanced()}
+        </ShowMore>
+        <div className='float-right'>
+          <FlatButton
+            className='control'
+            label='Cancel'
+            style={{
+              marginRight: 10
+            }}
+            onClick={dispatcher('cancel')} />
+          <RaisedButton
+            className='control'
+            label='Create Torrent'
+            primary
+            onClick={this.handleSubmit} />
+        </div>
+      </div>
+    )
+  }
+
+  // Renders everything after clicking Show Advanced...:
+  // * Is Private? (private torrents, not announced to DHT)
+  // * Announce list (trackers)
+  // * Comment
+  renderAdvanced () {
+    // Create file list
+    const maxFileElems = 100
+    const files = this.state.files
+    const fileElems = files.slice(0, maxFileElems).map((file, i) => {
+      const relativePath = path.relative(this.state.pathPrefix, file.path)
+      return (<div key={i}>{relativePath}</div>)
+    })
+    if (files.length > maxFileElems) {
+      fileElems.push(<div key='more'>+ {files.length - maxFileElems} more</div>)
+    }
+
+    // Align the text fields
+    const textFieldStyle = { width: '' }
+    const textareaStyle = { margin: 0 }
+
+    return (
+      <div key='advanced' className='create-torrent-advanced'>
+        <div key='private' className='torrent-attribute'>
+          <label>Private:</label>
+          <Checkbox
+            className='torrent-is-private control'
+            style={{display: ''}}
+            checked={this.state.isPrivate}
+            onCheck={this.setIsPrivate} />
+        </div>
+        <div key='trackers' className='torrent-attribute'>
+          <label>Trackers:</label>
+          <TextField
+            className='torrent-trackers control'
+            style={textFieldStyle}
+            textareaStyle={textareaStyle}
+            multiLine
+            rows={2}
+            rowsMax={10}
+            value={this.state.trackers}
+            onChange={this.setTrackers} />
+        </div>
+        <div key='comment' className='torrent-attribute'>
+          <label>Comment:</label>
+          <TextField
+            className='torrent-comment control'
+            style={textFieldStyle}
+            textareaStyle={textareaStyle}
+            hintText='Optionally describe your torrent...'
+            multiLine
+            rows={2}
+            rowsMax={10}
+            value={this.state.comment}
+            onChange={this.setComment} />
+        </div>
+        <div key='files' className='torrent-attribute'>
+          <label>Files:</label>
+          <div>{fileElems}</div>
+        </div>
+      </div>
+    )
+  }
+}
+
+function handleSubmit () {
+  const announceList = this.state.trackers
+    .split('\n')
+    .map((s) => s.trim())
+    .filter((s) => s !== '')
+  const options = {
+    // We can't let the user choose their own name if we want WebTorrent
+    // to use the files in place rather than creating a new folder.
+    name: this.state.defaultName,
+    path: this.state.basePath,
+    files: this.state.files,
+    announce: announceList,
+    private: this.state.isPrivate,
+    comment: this.state.comment.trim()
+  }
+  dispatch('createTorrent', options)
+}
+
+// Finds the longest common prefix
+function findCommonPrefix (a, b) {
+  let i
+  for (i = 0; i < a.length && i < b.length; i++) {
+    if (a.charCodeAt(i) !== b.charCodeAt(i)) break
+  }
+  if (i === a.length) return a
+  if (i === b.length) return b
+  return a.substring(0, i)
+}
+
+function containsDots (path, pathPrefix) {
+  const suffix = path.substring(pathPrefix.length).replace(/\\/g, '/')
+  return ('/' + suffix).includes('/.')
+}
+
+module.exports = CreateTorrentPage

src/renderer/pages/player-page.js

@@ -2,8 +2,10 @@ const React = require('react')
 const Bitfield = require('bitfield')
 const prettyBytes = require('prettier-bytes')
 const zeroFill = require('zero-fill')
+const path = require('path')
 
 const TorrentSummary = require('../lib/torrent-summary')
+const Playlist = require('../lib/playlist')
 const {dispatch, dispatcher} = require('../lib/dispatcher')
 
 // Shows a streaming video player. Standard features + Chromecast + Airplay
@@ -11,15 +13,16 @@ module.exports = class Player extends React.Component {
   render () {
     // Show the video as large as will fit in the window, play immediately
     // If the video is on Chromecast or Airplay, show a title screen instead
-    var state = this.props.state
-    var showVideo = state.playing.location === 'local'
+    const state = this.props.state
+    const showVideo = state.playing.location === 'local'
+    const showControls = state.playing.location !== 'external'
     return (
       <div
         className='player'
         onWheel={handleVolumeWheel}
         onMouseMove={dispatcher('mediaMouseMoved')}>
         {showVideo ? renderMedia(state) : renderCastScreen(state)}
-        {renderPlayerControls(state)}
+        {showControls ? renderPlayerControls(state) : null}
       </div>
     )
   }
@@ -36,7 +39,7 @@ function renderMedia (state) {
   // Unfortunately, play/pause can't be done just by modifying HTML.
   // Instead, grab the DOM node and play/pause it if necessary
   // Get the <video> or <audio> tag
-  var mediaElement = document.querySelector(state.playing.type)
+  const mediaElement = document.querySelector(state.playing.type)
   if (mediaElement !== null) {
     if (state.playing.isPaused && !mediaElement.paused) {
       mediaElement.pause()
@@ -64,20 +67,20 @@ function renderMedia (state) {
     }
 
     // Switch to the newly added subtitle track, if available
-    var tracks = mediaElement.textTracks || []
-    for (var j = 0; j < tracks.length; j++) {
-      var isSelectedTrack = j === state.playing.subtitles.selectedIndex
+    const tracks = mediaElement.textTracks || []
+    for (let j = 0; j < tracks.length; j++) {
+      const isSelectedTrack = j === state.playing.subtitles.selectedIndex
       tracks[j].mode = isSelectedTrack ? 'showing' : 'hidden'
     }
 
     // Save video position
-    var file = state.getPlayingFileSummary()
+    const file = state.getPlayingFileSummary()
     file.currentTime = state.playing.currentTime = mediaElement.currentTime
     file.duration = state.playing.duration = mediaElement.duration
 
     // Save selected subtitle
     if (state.playing.subtitles.selectedIndex !== -1) {
-      var index = state.playing.subtitles.selectedIndex
+      const index = state.playing.subtitles.selectedIndex
       file.selectedSubtitle = state.playing.subtitles.tracks[index].filePath
     } else if (file.selectedSubtitle != null) {
       delete file.selectedSubtitle
@@ -87,11 +90,11 @@ function renderMedia (state) {
   }
 
   // Add subtitles to the <video> tag
-  var trackTags = []
+  const trackTags = []
   if (state.playing.subtitles.selectedIndex >= 0) {
-    for (var i = 0; i < state.playing.subtitles.tracks.length; i++) {
-      var track = state.playing.subtitles.tracks[i]
-      var isSelected = state.playing.subtitles.selectedIndex === i
+    for (let i = 0; i < state.playing.subtitles.tracks.length; i++) {
+      const track = state.playing.subtitles.tracks[i]
+      const isSelected = state.playing.subtitles.selectedIndex === i
       trackTags.push(
         <track
           key={i}
@@ -104,10 +107,10 @@ function renderMedia (state) {
   }
 
   // Create the <audio> or <video> tag
-  var MediaTagName = state.playing.type
-  var mediaTag = (
+  const MediaTagName = state.playing.type
+  const mediaTag = (
     <MediaTagName
-      src={state.server.localURL}
+      src={Playlist.getCurrentLocalURL(state)}
       onDoubleClick={dispatcher('toggleFullScreen')}
       onLoadedMetadata={onLoadedMetadata}
       onEnded={onEnded}
@@ -134,21 +137,25 @@ function renderMedia (state) {
   // As soon as we know the video dimensions, resize the window
   function onLoadedMetadata (e) {
     if (state.playing.type !== 'video') return
-    var video = e.target
-    var dimensions = {
+    const video = e.target
+    const dimensions = {
       width: video.videoWidth,
       height: video.videoHeight
     }
     dispatch('setDimensions', dimensions)
   }
 
-  // When the video completes, pause the video instead of looping
   function onEnded (e) {
-    state.playing.isPaused = true
+    if (Playlist.hasNext(state)) {
+      dispatch('nextTrack')
+    } else {
+      // When the last video completes, pause the video instead of looping
+      state.playing.isPaused = true
+    }
   }
 
   function onCanPlay (e) {
-    var elem = e.target
+    const elem = e.target
     if (state.playing.type === 'video' &&
       elem.webkitVideoDecodedByteCount === 0) {
       dispatch('mediaError', 'Video codec unsupported')
@@ -162,15 +169,15 @@ function renderMedia (state) {
 }
 
 function renderOverlay (state) {
-  var elems = []
-  var audioMetadataElem = renderAudioMetadata(state)
-  var spinnerElem = renderLoadingSpinner(state)
+  const elems = []
+  const audioMetadataElem = renderAudioMetadata(state)
+  const spinnerElem = renderLoadingSpinner(state)
   if (audioMetadataElem) elems.push(audioMetadataElem)
   if (spinnerElem) elems.push(spinnerElem)
 
   // Video fills the window, centered with black bars if necessary
   // Audio gets a static poster image and a summary of the file metadata.
-  var style
+  let style
   if (state.playing.type === 'audio') {
     style = { backgroundImage: cssBackgroundImagePoster(state) }
   } else if (elems.length !== 0) {
@@ -188,27 +195,27 @@ function renderOverlay (state) {
 }
 
 function renderAudioMetadata (state) {
-  var fileSummary = state.getPlayingFileSummary()
+  const fileSummary = state.getPlayingFileSummary()
   if (!fileSummary.audioInfo) return
-  var info = fileSummary.audioInfo
+  const info = fileSummary.audioInfo
 
   // Get audio track info
-  var title = info.title
+  let title = info.title
   if (!title) {
     title = fileSummary.name
   }
-  var artist = info.artist && info.artist[0]
-  var album = info.album
+  let artist = info.artist && info.artist[0]
+  let album = info.album
   if (album && info.year && !album.includes(info.year)) {
     album += ' (' + info.year + ')'
   }
-  var track
+  let track
   if (info.track && info.track.no && info.track.of) {
     track = info.track.no + ' of ' + info.track.of
   }
 
   // Show a small info box in the middle of the screen with title/album/etc
-  var elems = []
+  const elems = []
   if (artist) {
     elems.push((
       <div key='artist' className='audio-artist'>
@@ -232,7 +239,7 @@ function renderAudioMetadata (state) {
   }
 
   // Align the title with the other info, if available. Otherwise, center title
-  var emptyLabel = (<label />)
+  const emptyLabel = (<label />)
   elems.unshift((
     <div key='title' className='audio-title'>
       {elems.length ? emptyLabel : undefined}{title}
@@ -244,14 +251,14 @@ function renderAudioMetadata (state) {
 
 function renderLoadingSpinner (state) {
   if (state.playing.isPaused) return
-  var isProbablyStalled = state.playing.isStalled ||
+  const isProbablyStalled = state.playing.isStalled ||
     (new Date().getTime() - state.playing.lastTimeUpdate > 2000)
   if (!isProbablyStalled) return
 
-  var prog = state.getPlayingTorrentSummary().progress || {}
-  var fileProgress = 0
+  const prog = state.getPlayingTorrentSummary().progress || {}
+  let fileProgress = 0
   if (prog.files) {
-    var file = prog.files[state.playing.fileIndex]
+    const file = prog.files[state.playing.fileIndex]
     fileProgress = Math.floor(100 * file.numPiecesPresent / file.numPieces)
   }
 
@@ -268,7 +275,7 @@ function renderLoadingSpinner (state) {
 }
 
 function renderCastScreen (state) {
-  var castIcon, castType, isCast
+  let castIcon, castType, isCast
   if (state.playing.location.startsWith('chromecast')) {
     castIcon = 'cast_connected'
     castType = 'Chromecast'
@@ -281,9 +288,12 @@ function renderCastScreen (state) {
     castIcon = 'tv'
     castType = 'DLNA'
     isCast = true
-  } else if (state.playing.location === 'vlc') {
+  } else if (state.playing.location === 'external') {
+    // TODO: get the player name in a more reliable way
+    const playerPath = state.saved.prefs.externalPlayerPath
+    const playerName = playerPath ? path.basename(playerPath).split('.')[0] : 'VLC'
     castIcon = 'tv'
-    castType = 'VLC'
+    castType = playerName
     isCast = false
   } else if (state.playing.location === 'error') {
     castIcon = 'error_outline'
@@ -291,15 +301,15 @@ function renderCastScreen (state) {
     isCast = false
   }
 
-  var isStarting = state.playing.location.endsWith('-pending')
-  var castName = state.playing.castName
-  var castStatus
+  const isStarting = state.playing.location.endsWith('-pending')
+  const castName = state.playing.castName
+  let castStatus
   if (isCast && isStarting) castStatus = 'Connecting to ' + castName + '...'
   else if (isCast && !isStarting) castStatus = 'Connected to ' + castName
   else castStatus = ''
 
   // Show a nice title image, if possible
-  var style = {
+  const style = {
     backgroundImage: cssBackgroundImagePoster(state)
   }
 
@@ -317,12 +327,12 @@ function renderCastScreen (state) {
 function renderCastOptions (state) {
   if (!state.devices.castMenu) return
 
-  var {location, devices} = state.devices.castMenu
-  var player = state.devices[location]
+  const {location, devices} = state.devices.castMenu
+  const player = state.devices[location]
 
-  var items = devices.map(function (device, ix) {
-    var isSelected = player.device === device
-    var name = device.name
+  const items = devices.map(function (device, ix) {
+    const isSelected = player.device === device
+    const name = device.name
     return (
       <li key={ix} onClick={dispatcher('selectCastDevice', ix)}>
         <i className='icon'>{isSelected ? 'radio_button_checked' : 'radio_button_unchecked'}</i>
@@ -339,11 +349,11 @@ function renderCastOptions (state) {
 }
 
 function renderSubtitleOptions (state) {
-  var subtitles = state.playing.subtitles
+  const subtitles = state.playing.subtitles
   if (!subtitles.tracks.length || !subtitles.showMenu) return
 
-  var items = subtitles.tracks.map(function (track, ix) {
-    var isSelected = state.playing.subtitles.selectedIndex === ix
+  const items = subtitles.tracks.map(function (track, ix) {
+    const isSelected = state.playing.subtitles.selectedIndex === ix
     return (
       <li key={ix} onClick={dispatcher('selectSubtitle', ix)}>
         <i className='icon'>{'radio_button_' + (isSelected ? 'checked' : 'unchecked')}</i>
@@ -352,8 +362,8 @@ function renderSubtitleOptions (state) {
     )
   })
 
-  var noneSelected = state.playing.subtitles.selectedIndex === -1
-  var noneClass = 'radio_button_' + (noneSelected ? 'checked' : 'unchecked')
+  const noneSelected = state.playing.subtitles.selectedIndex === -1
+  const noneClass = 'radio_button_' + (noneSelected ? 'checked' : 'unchecked')
   return (
     <ul key='subtitle-options' className='options-list'>
       {items}
@@ -366,32 +376,39 @@ function renderSubtitleOptions (state) {
 }
 
 function renderPlayerControls (state) {
-  var positionPercent = 100 * state.playing.currentTime / state.playing.duration
-  var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 3px)' }
-  var captionsClass = state.playing.subtitles.tracks.length === 0
+  const positionPercent = 100 * state.playing.currentTime / state.playing.duration
+  const playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 3px)' }
+  const captionsClass = state.playing.subtitles.tracks.length === 0
     ? 'disabled'
     : state.playing.subtitles.selectedIndex >= 0
       ? 'active'
       : ''
+  const prevClass = Playlist.hasPrevious(state) ? '' : 'disabled'
+  const nextClass = Playlist.hasNext(state) ? '' : 'disabled'
 
-  var elements = [
+  const elements = [
     <div key='playback-bar' className='playback-bar'>
       {renderLoadingBar(state)}
       <div
         key='cursor'
         className='playback-cursor'
-        style={playbackCursorStyle}
-      />
+        style={playbackCursorStyle} />
       <div
         key='scrub-bar'
         className='scrub-bar'
         draggable='true'
         onDragStart={handleDragStart}
         onClick={handleScrub}
-        onDrag={handleScrub}
-      />
+        onDrag={handleScrub} />
     </div>,
 
+    <i
+      key='skip-previous'
+      className={'icon skip-previous float-left ' + prevClass}
+      onClick={dispatcher('previousTrack')}>
+      skip_previous
+    </i>,
+
     <i
       key='play'
       className='icon play-pause float-left'
@@ -399,6 +416,13 @@ function renderPlayerControls (state) {
       {state.playing.isPaused ? 'play_arrow' : 'pause'}
     </i>,
 
+    <i
+      key='skip-next'
+      className={'icon skip-next float-left ' + nextClass}
+      onClick={dispatcher('nextTrack')}>
+      skip_next
+    </i>,
+
     <i
       key='fullscreen'
       className='icon fullscreen float-right'
@@ -420,24 +444,24 @@ function renderPlayerControls (state) {
   }
 
   // If we've detected a Chromecast or AppleTV, the user can play video there
-  var castTypes = ['chromecast', 'airplay', 'dlna']
-  var isCastingAnywhere = castTypes.some(
+  const castTypes = ['chromecast', 'airplay', 'dlna']
+  const isCastingAnywhere = castTypes.some(
     (castType) => state.playing.location.startsWith(castType))
 
   // Add the cast buttons. Icons for each cast type, connected/disconnected:
-  var buttonIcons = {
+  const buttonIcons = {
     'chromecast': {true: 'cast_connected', false: 'cast'},
     'airplay': {true: 'airplay', false: 'airplay'},
     'dlna': {true: 'tv', false: 'tv'}
   }
   castTypes.forEach(function (castType) {
     // Do we show this button (eg. the Chromecast button) at all?
-    var isCasting = state.playing.location.startsWith(castType)
-    var player = state.devices[castType]
+    const isCasting = state.playing.location.startsWith(castType)
+    const player = state.devices[castType]
     if ((!player || player.getDevices().length === 0) && !isCasting) return
 
     // Show the button. Three options for eg the Chromecast button:
-    var buttonClass, buttonHandler
+    let buttonClass, buttonHandler
     if (isCasting) {
       // Option 1: we are currently connected to Chromecast. Button stops the cast.
       buttonClass = 'active'
@@ -451,7 +475,7 @@ function renderPlayerControls (state) {
       buttonClass = ''
       buttonHandler = dispatcher('toggleCastMenu', castType)
     }
-    var buttonIcon = buttonIcons[castType][isCasting]
+    const buttonIcon = buttonIcons[castType][isCasting]
 
     elements.push((
       <i
@@ -464,13 +488,13 @@ function renderPlayerControls (state) {
   })
 
   // Render volume slider
-  var volume = state.playing.volume
-  var volumeIcon = 'volume_' + (
+  const volume = state.playing.volume
+  const volumeIcon = 'volume_' + (
     volume === 0 ? 'off'
     : volume < 0.3 ? 'mute'
     : volume < 0.6 ? 'down'
     : 'up')
-  var volumeStyle = {
+  const volumeStyle = {
     background: '-webkit-gradient(linear, left top, right top, ' +
       'color-stop(' + (volume * 100) + '%, #eee), ' +
       'color-stop(' + (volume * 100) + '%, #727272))'
@@ -490,14 +514,13 @@ function renderPlayerControls (state) {
         type='range' min='0' max='1' step='0.05'
         value={volume}
         onChange={handleVolumeScrub}
-        style={volumeStyle}
-      />
+        style={volumeStyle} />
     </div>
   ))
 
   // Show video playback progress
-  var currentTimeStr = formatTime(state.playing.currentTime)
-  var durationStr = formatTime(state.playing.duration)
+  const currentTimeStr = formatTime(state.playing.currentTime)
+  const durationStr = formatTime(state.playing.duration)
   elements.push((
     <span key='time' className='time float-left'>
       {currentTimeStr} / {durationStr}
@@ -524,7 +547,7 @@ function renderPlayerControls (state) {
   function handleDragStart (e) {
     // Prevent the cursor from changing, eg to a green + icon on Mac
     if (e.dataTransfer) {
-      var dt = e.dataTransfer
+      const dt = e.dataTransfer
       dt.effectAllowed = 'none'
     }
   }
@@ -533,9 +556,9 @@ function renderPlayerControls (state) {
   function handleScrub (e) {
     if (!e.clientX) return
     dispatch('mediaMouseMoved')
-    var windowWidth = document.querySelector('body').clientWidth
-    var fraction = e.clientX / windowWidth
-    var position = fraction * state.playing.duration /* seconds */
+    const windowWidth = document.querySelector('body').clientWidth
+    const fraction = e.clientX / windowWidth
+    const position = fraction * state.playing.duration /* seconds */
     dispatch('skipTo', position)
   }
 
@@ -566,18 +589,18 @@ function renderPlayerControls (state) {
 // Renders the loading bar. Shows which parts of the torrent are loaded, which
 // can be 'spongey' / non-contiguous
 function renderLoadingBar (state) {
-  var torrentSummary = state.getPlayingTorrentSummary()
+  const torrentSummary = state.getPlayingTorrentSummary()
   if (!torrentSummary.progress) {
     return []
   }
 
   // Find all contiguous parts of the torrent which are loaded
-  var prog = torrentSummary.progress
-  var fileProg = prog.files[state.playing.fileIndex]
-  var parts = []
-  var lastPiecePresent = false
-  for (var i = fileProg.startPiece; i <= fileProg.endPiece; i++) {
-    var partPresent = Bitfield.prototype.get.call(prog.bitfield, i)
+  const prog = torrentSummary.progress
+  const fileProg = prog.files[state.playing.fileIndex]
+  const parts = []
+  let lastPiecePresent = false
+  for (let i = fileProg.startPiece; i <= fileProg.endPiece; i++) {
+    const partPresent = Bitfield.prototype.get.call(prog.bitfield, i)
     if (partPresent && !lastPiecePresent) {
       parts.push({start: i - fileProg.startPiece, count: 1})
     } else if (partPresent) {
@@ -587,8 +610,8 @@ function renderLoadingBar (state) {
   }
 
   // Output some bars to show which parts of the file are loaded
-  var loadingBarElems = parts.map(function (part, i) {
-    var style = {
+  const loadingBarElems = parts.map(function (part, i) {
+    const style = {
       left: (100 * part.start / fileProg.numPieces) + '%',
       width: (100 * part.count / fileProg.numPieces) + '%'
     }
@@ -600,10 +623,10 @@ function renderLoadingBar (state) {
 
 // Returns the CSS background-image string for a poster image + dark vignette
 function cssBackgroundImagePoster (state) {
-  var torrentSummary = state.getPlayingTorrentSummary()
-  var posterPath = TorrentSummary.getPosterPath(torrentSummary)
+  const torrentSummary = state.getPlayingTorrentSummary()
+  const posterPath = TorrentSummary.getPosterPath(torrentSummary)
   if (!posterPath) return ''
-  return cssBackgroundImageDarkGradient() + `, url(${posterPath})`
+  return cssBackgroundImageDarkGradient() + `, url('${posterPath}')`
 }
 
 function cssBackgroundImageDarkGradient () {
@@ -616,12 +639,12 @@ function formatTime (time) {
     return '0:00'
   }
 
-  var hours = Math.floor(time / 3600)
-  var minutes = Math.floor(time % 3600 / 60)
+  let hours = Math.floor(time / 3600)
+  let minutes = Math.floor(time % 3600 / 60)
   if (hours > 0) {
     minutes = zeroFill(2, minutes)
   }
-  var seconds = zeroFill(2, Math.floor(time % 60))
+  let seconds = zeroFill(2, Math.floor(time % 60))
 
   return (hours > 0 ? hours + ':' : '') + minutes + ':' + seconds
 }

src/renderer/pages/preferences-page.js

@@ -0,0 +1,170 @@
+const colors = require('material-ui/styles/colors')
+const path = require('path')
+const React = require('react')
+
+const Checkbox = require('material-ui/Checkbox').default
+const Heading = require('../components/heading')
+const PathSelector = require('../components/path-selector')
+const RaisedButton = require('material-ui/RaisedButton').default
+
+const {dispatch} = require('../lib/dispatcher')
+
+class PreferencesPage extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.handleDownloadPathChange =
+      this.handleDownloadPathChange.bind(this)
+
+    this.handleOpenExternalPlayerChange =
+      this.handleOpenExternalPlayerChange.bind(this)
+
+    this.handleExternalPlayerPathChange =
+      this.handleExternalPlayerPathChange.bind(this)
+  }
+
+  downloadPathSelector () {
+    return (
+      <Preference>
+        <PathSelector
+          dialog={{
+            title: 'Select download directory',
+            properties: [ 'openDirectory' ]
+          }}
+          onChange={this.handleDownloadPathChange}
+          title='Download location'
+          value={this.props.state.unsaved.prefs.downloadPath} />
+      </Preference>
+    )
+  }
+
+  handleDownloadPathChange (filePath) {
+    dispatch('updatePreferences', 'downloadPath', filePath)
+  }
+
+  openExternalPlayerCheckbox () {
+    return (
+      <Preference>
+        <Checkbox
+          className='control'
+          checked={!this.props.state.unsaved.prefs.openExternalPlayer}
+          label={'Play torrent media files using WebTorrent'}
+          onCheck={this.handleOpenExternalPlayerChange} />
+      </Preference>
+    )
+  }
+
+  handleOpenExternalPlayerChange (e, isChecked) {
+    dispatch('updatePreferences', 'openExternalPlayer', !isChecked)
+  }
+
+  externalPlayerPathSelector () {
+    const playerName = path.basename(
+      this.props.state.unsaved.prefs.externalPlayerPath || 'VLC'
+    )
+
+    const description = this.props.state.unsaved.prefs.openExternalPlayer
+      ? `Torrent media files will always play in ${playerName}.`
+      : `Torrent media files will play in ${playerName} if WebTorrent cannot ` +
+        'play them.'
+
+    return (
+      <Preference>
+        <p>{description}</p>
+        <PathSelector
+          dialog={{
+            title: 'Select media player app',
+            properties: [ 'openFile' ]
+          }}
+          displayValue={playerName}
+          onChange={this.handleExternalPlayerPathChange}
+          title='External player'
+          value={this.props.state.unsaved.prefs.externalPlayerPath} />
+      </Preference>
+    )
+  }
+
+  handleExternalPlayerPathChange (filePath) {
+    if (path.extname(filePath) === '.app') {
+      // Mac: Use executable in packaged .app bundle
+      filePath += '/Contents/MacOS/' + path.basename(filePath, '.app')
+    }
+    dispatch('updatePreferences', 'externalPlayerPath', filePath)
+  }
+
+  setDefaultAppButton () {
+    const isFileHandler = this.props.state.unsaved.prefs.isFileHandler
+    if (isFileHandler) {
+      return (
+        <Preference>
+          <p>WebTorrent is your default torrent app. Hooray!</p>
+        </Preference>
+      )
+    }
+    return (
+      <Preference>
+        <p>WebTorrent is not currently the default torrent app.</p>
+        <RaisedButton
+          className='control'
+          onClick={this.handleSetDefaultApp}
+          label='Make WebTorrent the default' />
+      </Preference>
+    )
+  }
+
+  handleSetDefaultApp () {
+    dispatch('updatePreferences', 'isFileHandler', true)
+  }
+
+  render () {
+    const style = {
+      color: colors.grey400,
+      marginLeft: 25,
+      marginRight: 25
+    }
+    return (
+      <div style={style}>
+        <PreferencesSection title='Downloads'>
+          {this.downloadPathSelector()}
+        </PreferencesSection>
+        <PreferencesSection title='Playback'>
+          {this.openExternalPlayerCheckbox()}
+          {this.externalPlayerPathSelector()}
+        </PreferencesSection>
+        <PreferencesSection title='Default torrent app'>
+          {this.setDefaultAppButton()}
+        </PreferencesSection>
+      </div>
+    )
+  }
+}
+
+class PreferencesSection extends React.Component {
+  static get propTypes () {
+    return {
+      title: React.PropTypes.string
+    }
+  }
+
+  render () {
+    const style = {
+      marginBottom: 25,
+      marginTop: 25
+    }
+    return (
+      <div style={style}>
+        <Heading level={2}>{this.props.title}</Heading>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+class Preference extends React.Component {
+  render () {
+    const style = { marginBottom: 10 }
+    return (<div style={style}>{this.props.children}</div>)
+  }
+}
+
+module.exports = PreferencesPage

src/renderer/pages/torrent-list-page.js

@@ -7,9 +7,9 @@ const {dispatcher} = require('../lib/dispatcher')
 
 module.exports = class TorrentList extends React.Component {
   render () {
-    var state = this.props.state
+    const state = this.props.state
 
-    var contents = []
+    const contents = []
     if (state.downloadPathStatus === 'missing') {
       contents.push(
         <div key='torrent-missing-path'>
@@ -21,7 +21,7 @@ module.exports = class TorrentList extends React.Component {
         </div>
       )
     }
-    var torrentElems = state.saved.torrents.map(
+    const torrentElems = state.saved.torrents.map(
       (torrentSummary) => this.renderTorrent(torrentSummary)
     )
     contents.push(...torrentElems)
@@ -39,23 +39,21 @@ module.exports = class TorrentList extends React.Component {
   }
 
   renderTorrent (torrentSummary) {
-    var state = this.props.state
-    var infoHash = torrentSummary.infoHash
-    var isSelected = infoHash && state.selectedInfoHash === infoHash
+    const state = this.props.state
+    const infoHash = torrentSummary.infoHash
+    const isSelected = infoHash && state.selectedInfoHash === infoHash
 
     // Background image: show some nice visuals, like a frame from the movie, if possible
-    var style = {}
+    const style = {}
     if (torrentSummary.posterFileName) {
-      var gradient = isSelected
-        ? 'linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%)'
-        : 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)'
-      var posterPath = TorrentSummary.getPosterPath(torrentSummary)
-      style.backgroundImage = gradient + `, url('${posterPath}')`
+      const gradient = 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)'
+      const posterPath = TorrentSummary.getPosterPath(torrentSummary)
+      style.backgroundImage = `${gradient}, url('${posterPath}')`
     }
 
     // Foreground: name of the torrent, basic info like size, play button,
     // cast buttons if available, and delete
-    var classes = ['torrent']
+    const classes = ['torrent']
     //  playStatus turns the play button into a loading spinner or error icon
     if (torrentSummary.playStatus) classes.push(torrentSummary.playStatus)
     if (isSelected) classes.push('selected')
@@ -77,13 +75,13 @@ module.exports = class TorrentList extends React.Component {
 
   // Show name, download status, % complete
   renderTorrentMetadata (torrentSummary) {
-    var name = torrentSummary.name || 'Loading torrent...'
-    var elements = [(
+    const name = torrentSummary.name || 'Loading torrent...'
+    const elements = [(
       <div key='name' className='name ellipsis'>{name}</div>
     )]
 
     // If it's downloading/seeding then show progress info
-    var prog = torrentSummary.progress
+    const prog = torrentSummary.progress
     if (torrentSummary.error) {
       elements.push(
         <div key='progress-info' className='ellipsis'>
@@ -93,6 +91,7 @@ module.exports = class TorrentList extends React.Component {
     } else if (torrentSummary.status !== 'paused' && prog) {
       elements.push(
         <div key='progress-info' className='ellipsis'>
+          {renderProgressBar()}
           {renderPercentProgress()}
           {renderTotalProgress()}
           {renderPeers()}
@@ -105,14 +104,19 @@ module.exports = class TorrentList extends React.Component {
 
     return (<div key='metadata' className='metadata'>{elements}</div>)
 
+    function renderProgressBar () {
+      const progress = Math.floor(100 * prog.progress)
+      return (<progress value={progress} max='100'>{progress}%</progress>)
+    }
+
     function renderPercentProgress () {
-      var progress = Math.floor(100 * prog.progress)
+      const progress = Math.floor(100 * prog.progress)
       return (<span key='percent-progress'>{progress}%</span>)
     }
 
     function renderTotalProgress () {
-      var downloaded = prettyBytes(prog.downloaded)
-      var total = prettyBytes(prog.length || 0)
+      const downloaded = prettyBytes(prog.downloaded)
+      const total = prettyBytes(prog.length || 0)
       if (downloaded === total) {
         return (<span key='total-progress'>{downloaded}</span>)
       } else {
@@ -122,7 +126,7 @@ module.exports = class TorrentList extends React.Component {
 
     function renderPeers () {
       if (prog.numPeers === 0) return
-      var count = prog.numPeers === 1 ? 'peer' : 'peers'
+      const count = prog.numPeers === 1 ? 'peer' : 'peers'
       return (<span key='peers'>{prog.numPeers} {count}</span>)
     }
 
@@ -137,22 +141,22 @@ module.exports = class TorrentList extends React.Component {
     }
 
     function renderEta () {
-      var downloaded = prog.downloaded
-      var total = prog.length || 0
-      var missing = total - downloaded
-      var downloadSpeed = prog.downloadSpeed
+      const downloaded = prog.downloaded
+      const total = prog.length || 0
+      const missing = total - downloaded
+      const downloadSpeed = prog.downloadSpeed
       if (downloadSpeed === 0 || missing === 0) return
 
-      var rawEta = missing / downloadSpeed
-      var hours = Math.floor(rawEta / 3600) % 24
-      var minutes = Math.floor(rawEta / 60) % 60
-      var seconds = Math.floor(rawEta % 60)
+      const rawEta = missing / downloadSpeed
+      const hours = Math.floor(rawEta / 3600) % 24
+      const minutes = Math.floor(rawEta / 60) % 60
+      const seconds = Math.floor(rawEta % 60)
 
       // Only display hours and minutes if they are greater than 0 but always
       // display minutes if hours is being displayed
-      var hoursStr = hours ? hours + 'h' : ''
-      var minutesStr = (hours || minutes) ? minutes + 'm' : ''
-      var secondsStr = seconds + 's'
+      const hoursStr = hours ? hours + 'h' : ''
+      const minutesStr = (hours || minutes) ? minutes + 'm' : ''
+      const secondsStr = seconds + 's'
 
       return (<span>ETA: {hoursStr} {minutesStr} {secondsStr}</span>)
     }
@@ -161,9 +165,9 @@ module.exports = class TorrentList extends React.Component {
   // Download button toggles between torrenting (DL/seed) and paused
   // Play button starts streaming the torrent immediately, unpausing if needed
   renderTorrentButtons (torrentSummary) {
-    var infoHash = torrentSummary.infoHash
+    const infoHash = torrentSummary.infoHash
 
-    var playIcon, playTooltip, playClass
+    let playIcon, playTooltip, playClass
     if (torrentSummary.playStatus === 'timeout') {
       playIcon = 'warning'
       playTooltip = 'Playback timed out. No seeds? No internet? Click to try again.'
@@ -172,7 +176,7 @@ module.exports = class TorrentList extends React.Component {
       playTooltip = 'Start streaming'
     }
 
-    var downloadIcon, downloadTooltip
+    let downloadIcon, downloadTooltip
     if (torrentSummary.status === 'seeding') {
       downloadIcon = 'file_upload'
       downloadTooltip = 'Seeding. Click to stop.'
@@ -184,33 +188,9 @@ module.exports = class TorrentList extends React.Component {
       downloadTooltip = 'Click to start torrenting.'
     }
 
-    // Do we have a saved position? Show it using a radial progress bar on top
-    // of the play button, unless already showing a spinner there:
-    var positionElem
-    var willShowSpinner = torrentSummary.playStatus === 'requested'
-    var defaultFile = torrentSummary.files &&
-      torrentSummary.files[torrentSummary.defaultPlayFileIndex]
-    if (defaultFile && defaultFile.currentTime && !willShowSpinner) {
-      var fraction = defaultFile.currentTime / defaultFile.duration
-      positionElem = this.renderRadialProgressBar(fraction, 'radial-progress-large')
-      playClass = 'resume-position'
-    }
-
-    // Only show the play button for torrents that contain playable media
-    var playButton, downloadButton
-    var noErrors = !torrentSummary.error
-    if (noErrors && TorrentPlayer.isPlayableTorrentSummary(torrentSummary)) {
-      playButton = (
-        <i
-          key='play-button'
-          title={playTooltip}
-          className={'button-round icon play ' + playClass}
-          onClick={dispatcher('playFile', infoHash)}>
-          {playIcon}
-        </i>
-      )
-    }
-    if (noErrors) {
+    // Only show the play/dowload buttons for torrents that contain playable media
+    let playButton, downloadButton, positionElem
+    if (!torrentSummary.error) {
       downloadButton = (
         <i
           key='download-button'
@@ -220,6 +200,29 @@ module.exports = class TorrentList extends React.Component {
           {downloadIcon}
         </i>
       )
+
+      // Do we have a saved position? Show it using a radial progress bar on top
+      // of the play button, unless already showing a spinner there:
+      const willShowSpinner = torrentSummary.playStatus === 'requested'
+      const mostRecentFile = torrentSummary.files &&
+        torrentSummary.files[torrentSummary.mostRecentFileIndex]
+      if (mostRecentFile && mostRecentFile.currentTime && !willShowSpinner) {
+        const fraction = mostRecentFile.currentTime / mostRecentFile.duration
+        positionElem = this.renderRadialProgressBar(fraction, 'radial-progress-large')
+        playClass = 'resume-position'
+      }
+
+      if (TorrentPlayer.isPlayableTorrentSummary(torrentSummary)) {
+        playButton = (
+          <i
+            key='play-button'
+            title={playTooltip}
+            className={'button-round icon play ' + playClass}
+            onClick={dispatcher('playFile', infoHash)}>
+            {playIcon}
+          </i>
+        )
+      }
     }
 
     return (
@@ -240,9 +243,9 @@ module.exports = class TorrentList extends React.Component {
 
   // Show files, per-file download status and play buttons, and so on
   renderTorrentDetails (torrentSummary) {
-    var filesElement
+    let filesElement
     if (torrentSummary.error || !torrentSummary.files) {
-      var message = ''
+      let message = ''
       if (torrentSummary.error === 'path-missing') {
         // Special case error: this torrent's download dir or file is missing
         message = 'Missing path: ' + TorrentSummary.getFileOrFolder(torrentSummary)
@@ -263,14 +266,9 @@ module.exports = class TorrentList extends React.Component {
       )
     } else {
       // We do know the files. List them and show download stats for each one
-      var fileRows = torrentSummary.files
+      const fileRows = torrentSummary.files
         .filter((file) => !file.path.includes('/.____padding_file/'))
         .map((file, index) => ({ file, index }))
-        .sort(function (a, b) {
-          if (a.file.name < b.file.name) return -1
-          if (b.file.name < a.file.name) return 1
-          return 0
-        })
         .map((object) => this.renderFileRow(torrentSummary, object.file, object.index))
 
       filesElement = (
@@ -295,36 +293,39 @@ module.exports = class TorrentList extends React.Component {
   renderFileRow (torrentSummary, file, index) {
     // First, find out how much of the file we've downloaded
     // Are we even torrenting it?
-    var isSelected = torrentSummary.selections && torrentSummary.selections[index]
-    var isDone = false // Are we finished torrenting it?
-    var progress = ''
+    const isSelected = torrentSummary.selections && torrentSummary.selections[index]
+    let isDone = false // Are we finished torrenting it?
+    let progress = ''
     if (torrentSummary.progress && torrentSummary.progress.files &&
         torrentSummary.progress.files[index]) {
-      var fileProg = torrentSummary.progress.files[index]
+      const fileProg = torrentSummary.progress.files[index]
       isDone = fileProg.numPiecesPresent === fileProg.numPieces
       progress = Math.round(100 * fileProg.numPiecesPresent / fileProg.numPieces) + '%'
     }
 
     // Second, for media files where we saved our position, show how far we got
-    var positionElem
+    let positionElem
     if (file.currentTime) {
       // Radial progress bar. 0% = start from 0:00, 270% = 3/4 of the way thru
       positionElem = this.renderRadialProgressBar(file.currentTime / file.duration)
     }
 
     // Finally, render the file as a table row
-    var isPlayable = TorrentPlayer.isPlayable(file)
-    var infoHash = torrentSummary.infoHash
-    var icon
-    var handleClick
+    const isPlayable = TorrentPlayer.isPlayable(file)
+    const infoHash = torrentSummary.infoHash
+    let icon
+    let handleClick
     if (isPlayable) {
       icon = 'play_arrow' /* playable? add option to play */
       handleClick = dispatcher('playFile', infoHash, index)
     } else {
       icon = 'description' /* file icon, opens in OS default app */
-      handleClick = dispatcher('openItem', infoHash, index)
+      handleClick = isDone
+        ? dispatcher('openItem', infoHash, index)
+        : (e) => e.stopPropagation() // noop if file is not ready
     }
-    var rowClass = ''
+    // TODO: add a css 'disabled' class to indicate that a file cannot be opened/streamed
+    let rowClass = ''
     if (!isSelected) rowClass = 'disabled' // File deselected, not being torrented
     if (!isDone && !isPlayable) rowClass = 'disabled' // Can't open yet, can't stream
     return (
@@ -351,9 +352,9 @@ module.exports = class TorrentList extends React.Component {
   }
 
   renderRadialProgressBar (fraction, cssClass) {
-    var rotation = 360 * fraction
-    var transformFill = {transform: 'rotate(' + (rotation / 2) + 'deg)'}
-    var transformFix = {transform: 'rotate(' + rotation + 'deg)'}
+    const rotation = 360 * fraction
+    const transformFill = {transform: 'rotate(' + (rotation / 2) + 'deg)'}
+    const transformFix = {transform: 'rotate(' + rotation + 'deg)'}
 
     return (
       <div key='radial-progress' className={'radial-progress ' + cssClass}>
@@ -373,7 +374,7 @@ module.exports = class TorrentList extends React.Component {
 }
 
 function getErrorMessage (torrentSummary) {
-  var err = torrentSummary.error
+  const err = torrentSummary.error
   if (err === 'path-missing') {
     return (
       <span>

src/renderer/views/app.js

@@ -1,97 +0,0 @@
-const React = require('react')
-
-const Header = require('./header')
-
-const Views = {
-  'home': require('./torrent-list'),
-  'player': require('./player'),
-  'create-torrent': require('./create-torrent'),
-  'preferences': require('./preferences')
-}
-
-const Modals = {
-  'open-torrent-address-modal': require('./open-torrent-address-modal'),
-  'remove-torrent-modal': require('./remove-torrent-modal'),
-  'update-available-modal': require('./update-available-modal'),
-  'unsupported-media-modal': require('./unsupported-media-modal')
-}
-
-module.exports = class App extends React.Component {
-
-  constructor (props) {
-    super(props)
-    this.state = props.state
-  }
-
-  render () {
-    var state = this.state
-
-    // Hide player controls while playing video, if the mouse stays still for a while
-    // Never hide the controls when:
-    // * The mouse is over the controls or we're scrubbing (see CSS)
-    // * The video is paused
-    // * The video is playing remotely on Chromecast or Airplay
-    var hideControls = state.location.url() === 'player' &&
-      state.playing.mouseStationarySince !== 0 &&
-      new Date().getTime() - state.playing.mouseStationarySince > 2000 &&
-      !state.playing.isPaused &&
-      state.playing.location === 'local' &&
-      state.playing.playbackRate === 1
-
-    var cls = [
-      'view-' + state.location.url(), /* e.g. view-home, view-player */
-      'is-' + process.platform /* e.g. is-darwin, is-win32, is-linux */
-    ]
-    if (state.window.isFullScreen) cls.push('is-fullscreen')
-    if (state.window.isFocused) cls.push('is-focused')
-    if (hideControls) cls.push('hide-video-controls')
-
-    var vdom = (
-      <div className={'app ' + cls.join(' ')}>
-        <Header state={state} />
-        {this.getErrorPopover()}
-        <div key='content' className='content'>{this.getView()}</div>
-        {this.getModal()}
-      </div>
-    )
-
-    return vdom
-  }
-
-  getErrorPopover () {
-    var now = new Date().getTime()
-    var recentErrors = this.state.errors.filter((x) => now - x.time < 5000)
-    var hasErrors = recentErrors.length > 0
-
-    var errorElems = recentErrors.map(function (error, i) {
-      return (<div key={i} className='error'>{error.message}</div>)
-    })
-    return (
-      <div key='errors'
-        className={'error-popover ' + (hasErrors ? 'visible' : 'hidden')}>
-        <div key='title' className='title'>Error</div>
-        {errorElems}
-      </div>
-    )
-  }
-
-  getModal () {
-    var state = this.state
-    if (!state.modal) return
-    var ModalContents = Modals[state.modal.id]
-    return (
-      <div key='modal' className='modal'>
-        <div key='modal-background' className='modal-background' />
-        <div key='modal-content' className='modal-content'>
-          <ModalContents state={state} />
-        </div>
-      </div>
-    )
-  }
-
-  getView () {
-    var state = this.state
-    var View = Views[state.location.url()]
-    return (<View state={state} />)
-  }
-}

src/renderer/views/create-torrent.js

@@ -1,131 +0,0 @@
-const React = require('react')
-const createTorrent = require('create-torrent')
-const path = require('path')
-const prettyBytes = require('prettier-bytes')
-
-const {dispatch, dispatcher} = require('../lib/dispatcher')
-const CreateTorrentErrorPage = require('./create-torrent-error-page')
-
-module.exports = class CreateTorrentPage extends React.Component {
-  render () {
-    var state = this.props.state
-    var info = state.location.current()
-
-    // Preprocess: exclude .DS_Store and other dotfiles
-    var files = info.files
-      .filter((f) => !f.name.startsWith('.'))
-      .map((f) => ({name: f.name, path: f.path, size: f.size}))
-    if (files.length === 0) return (<CreateTorrentErrorPage state={state} />)
-
-    // First, extract the base folder that the files are all in
-    var pathPrefix = info.folderPath
-    if (!pathPrefix) {
-      pathPrefix = files.map((x) => x.path).reduce(findCommonPrefix)
-      if (!pathPrefix.endsWith('/') && !pathPrefix.endsWith('\\')) {
-        pathPrefix = path.dirname(pathPrefix)
-      }
-    }
-
-    // Sanity check: show the number of files and total size
-    var numFiles = files.length
-    var totalBytes = files
-      .map((f) => f.size)
-      .reduce((a, b) => a + b, 0)
-    var torrentInfo = `${numFiles} files, ${prettyBytes(totalBytes)}`
-
-    // Then, use the name of the base folder (or sole file, for a single file torrent)
-    // as the default name. Show all files relative to the base folder.
-    var defaultName, basePath
-    if (files.length === 1) {
-      // Single file torrent: /a/b/foo.jpg -> torrent name 'foo.jpg', path '/a/b'
-      defaultName = files[0].name
-      basePath = pathPrefix
-    } else {
-      // Multi file torrent: /a/b/{foo, bar}.jpg -> torrent name 'b', path '/a'
-      defaultName = path.basename(pathPrefix)
-      basePath = path.dirname(pathPrefix)
-    }
-    var maxFileElems = 100
-    var fileElems = files.slice(0, maxFileElems).map(function (file, i) {
-      var relativePath = files.length === 0 ? file.name : path.relative(pathPrefix, file.path)
-      return (<div key={i}>{relativePath}</div>)
-    })
-    if (files.length > maxFileElems) {
-      fileElems.push(<div key='more'>+ {maxFileElems - files.length} more</div>)
-    }
-    var trackers = createTorrent.announceList.join('\n')
-    var collapsedClass = info.showAdvanced ? 'expanded' : 'collapsed'
-
-    return (
-      <div className='create-torrent'>
-        <h2>Create torrent {defaultName}</h2>
-        <div key='info' className='torrent-info'>
-          {torrentInfo}
-        </div>
-        <div key='path-prefix' className='torrent-attribute'>
-          <label>Path:</label>
-          <div className='torrent-attribute'>{pathPrefix}</div>
-        </div>
-        <div key='toggle' className={'expand-collapse ' + collapsedClass}
-          onClick={dispatcher('toggleCreateTorrentAdvanced')}>
-          {info.showAdvanced ? 'Basic' : 'Advanced'}
-        </div>
-        <div key='advanced' className={'create-torrent-advanced ' + collapsedClass}>
-          <div key='comment' className='torrent-attribute'>
-            <label>Comment:</label>
-            <textarea className='torrent-attribute torrent-comment' />
-          </div>
-          <div key='trackers' className='torrent-attribute'>
-            <label>Trackers:</label>
-            <textarea className='torrent-attribute torrent-trackers' defaultValue={trackers} />
-          </div>
-          <div key='private' className='torrent-attribute'>
-            <label>Private:</label>
-            <input type='checkbox' className='torrent-is-private' value='torrent-is-private' />
-          </div>
-          <div key='files' className='torrent-attribute'>
-            <label>Files:</label>
-            <div>{fileElems}</div>
-          </div>
-        </div>
-        <div key='buttons' className='float-right'>
-          <button key='cancel' className='button-flat light' onClick={dispatcher('cancel')}>Cancel</button>
-          <button key='create' className='button-raised' onClick={handleOK}>Create Torrent</button>
-        </div>
-      </div>
-    )
-
-    function handleOK () {
-      // TODO: dcposch use React refs instead
-      var announceList = document.querySelector('.torrent-trackers').value
-        .split('\n')
-        .map((s) => s.trim())
-        .filter((s) => s !== '')
-      var isPrivate = document.querySelector('.torrent-is-private').checked
-      var comment = document.querySelector('.torrent-comment').value.trim()
-      var options = {
-        // We can't let the user choose their own name if we want WebTorrent
-        // to use the files in place rather than creating a new folder.
-        // If we ever want to add support for that:
-        // name: document.querySelector('.torrent-name').value
-        name: defaultName,
-        path: basePath,
-        files: files,
-        announce: announceList,
-        private: isPrivate,
-        comment: comment
-      }
-      dispatch('createTorrent', options)
-    }
-  }
-}
-
-// Finds the longest common prefix
-function findCommonPrefix (a, b) {
-  for (var i = 0; i < a.length && i < b.length; i++) {
-    if (a.charCodeAt(i) !== b.charCodeAt(i)) break
-  }
-  if (i === a.length) return a
-  if (i === b.length) return b
-  return a.substring(0, i)
-}

src/renderer/views/open-torrent-address-modal.js

@@ -1,32 +0,0 @@
-const React = require('react')
-
-const {dispatch, dispatcher} = require('../lib/dispatcher')
-
-module.exports = class OpenTorrentAddressModal extends React.Component {
-  render () {
-    // TODO: dcposch remove janky inline <script>
-    return (
-      <div className='open-torrent-address-modal'>
-        <p><label>Enter torrent address or magnet link</label></p>
-        <p>
-          <input id='add-torrent-url' type='text' onKeyPress={handleKeyPress} />
-        </p>
-        <p className='float-right'>
-          <button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
-          <button className='button button-raised' onClick={handleOK}>OK</button>
-        </p>
-        <script>document.querySelector('#add-torrent-url').focus()</script>
-      </div>
-    )
-  }
-}
-
-function handleKeyPress (e) {
-  if (e.which === 13) handleOK() /* hit Enter to submit */
-}
-
-function handleOK () {
-  dispatch('exitModal')
-  // TODO: dcposch use React refs instead
-  dispatch('addTorrent', document.querySelector('#add-torrent-url').value)
-}

src/renderer/views/preferences.js

@@ -1,194 +0,0 @@
-const React = require('react')
-const remote = require('electron').remote
-const dialog = remote.dialog
-
-const {dispatch} = require('../lib/dispatcher')
-
-module.exports = class Preferences extends React.Component {
-  render () {
-    var state = this.props.state
-    return (
-      <div className='preferences'>
-        {renderGeneralSection(state)}
-        {renderPlaybackSection(state)}
-      </div>
-    )
-  }
-}
-
-function renderGeneralSection (state) {
-  return renderSection({
-    key: 'general',
-    title: 'General',
-    description: '',
-    icon: 'settings'
-  }, [
-    renderDownloadPathSelector(state),
-    renderFileHandlers(state)
-  ])
-}
-
-function renderPlaybackSection (state) {
-  return renderSection({
-    title: 'Playback',
-    description: '',
-    icon: 'settings'
-  }, [
-    renderPlayInVlcSelector(state)
-  ])
-}
-
-function renderPlayInVlcSelector (state) {
-  return renderCheckbox({
-    key: 'play-in-vlc',
-    label: 'Play in VLC',
-    description: 'Media will play in VLC',
-    property: 'playInVlc',
-    value: state.saved.prefs.playInVlc
-  },
-  state.unsaved.prefs.playInVlc,
-  function (value) {
-    dispatch('updatePreferences', 'playInVlc', value)
-  })
-}
-
-function renderDownloadPathSelector (state) {
-  return renderFileSelector({
-    key: 'download-path',
-    label: 'Download Path',
-    description: 'Data from torrents will be saved here',
-    property: 'downloadPath',
-    options: {
-      title: 'Select download directory',
-      properties: [ 'openDirectory' ]
-    }
-  },
-  state.unsaved.prefs.downloadPath,
-  function (filePath) {
-    dispatch('updatePreferences', 'downloadPath', filePath)
-  })
-}
-
-function renderFileHandlers (state) {
-  var definition = {
-    key: 'file-handlers',
-    label: 'Handle Torrent Files'
-  }
-  var buttonText = state.unsaved.prefs.isFileHandler
-    ? 'Remove default app for torrent files'
-    : 'Make WebTorrent the default app for torrent files'
-  var controls = [(
-    <button key='toggle-handlers'
-      className='btn'
-      onClick={toggleFileHandlers}>
-      {buttonText}
-    </button>
-  )]
-  return renderControlGroup(definition, controls)
-
-  function toggleFileHandlers () {
-    var isFileHandler = state.unsaved.prefs.isFileHandler
-    dispatch('updatePreferences', 'isFileHandler', !isFileHandler)
-  }
-}
-
-// Renders a prefs section.
-// - definition should be {icon, title, description}
-// - controls should be an array of vdom elements
-function renderSection (definition, controls) {
-  var helpElem = !definition.description ? null : (
-    <div key='help' className='help text'>
-      <i className='icon'>help_outline</i>{definition.description}
-    </div>
-  )
-  return (
-    <section key={definition.key} className='section preferences-panel'>
-      <div className='section-container'>
-        <div key='heading' className='section-heading'>
-          <i className='icon'>{definition.icon}</i>{definition.title}
-        </div>
-        {helpElem}
-        <div key='body' className='section-body'>
-          {controls}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function renderCheckbox (definition, value, callback) {
-  var iconClass = 'icon clickable'
-  if (value) iconClass += ' enabled'
-
-  return (
-    <div key='{definition.key}' className='control-group'>
-      <div className='controls'>
-        <label className='control-label'>
-          <div className='preference-title'>{definition.label}</div>
-        </label>
-        <div className='controls'>
-          <label className='clickable' onClick={handleClick}>
-            <i
-              className={iconClass}
-              id='{definition.property}'
-            >
-              check_circle
-            </i>
-            <span className='checkbox-label'>{definition.description}</span>
-          </label>
-        </div>
-      </div>
-    </div>
-  )
-  function handleClick () {
-    callback(!value)
-  }
-}
-
-// Creates a file chooser
-// - defition should be {label, description, options}
-//   options are passed to dialog.showOpenDialog
-// - value should be the current pref, a file or folder path
-// - callback takes a new file or folder path
-function renderFileSelector (definition, value, callback) {
-  var controls = [(
-    <input
-      type='text'
-      className='file-picker-text'
-      key={definition.property}
-      id={definition.property}
-      disabled='disabled'
-      value={value} />
-  ), (
-    <button
-      key={definition.property + '-btn'}
-      className='btn'
-      onClick={handleClick}>
-      <i className='icon'>folder_open</i>
-    </button>
-  )]
-  return renderControlGroup(definition, controls)
-
-  function handleClick () {
-    dialog.showOpenDialog(remote.getCurrentWindow(), definition.options, function (filenames) {
-      if (!Array.isArray(filenames)) return
-      callback(filenames[0])
-    })
-  }
-}
-
-function renderControlGroup (definition, controls) {
-  return (
-    <div key={definition.key} className='control-group'>
-      <div className='controls'>
-        <label className='control-label'>
-          <div className='preference-title'>{definition.label}</div>
-          <div className='preference-description'>{definition.description}</div>
-        </label>
-        <div className='controls'>
-          {controls}
-        </div>
-      </div>
-    </div>
-  )
-}

src/renderer/views/unsupported-media-modal.js

@@ -1,39 +0,0 @@
-const React = require('react')
-const electron = require('electron')
-
-const {dispatcher} = require('../lib/dispatcher')
-
-module.exports = class UnsupportedMediaModal extends React.Component {
-  render () {
-    var state = this.props.state
-    var err = state.modal.error
-    var message = (err && err.getMessage)
-      ? err.getMessage()
-      : err
-    var actionButton = state.modal.vlcInstalled
-      ? (<button className='button-raised' onClick={dispatcher('vlcPlay')}>Play in VLC</button>)
-      : (<button className='button-raised' onClick={() => this.onInstall}>Install VLC</button>)
-    var vlcMessage = state.modal.vlcNotFound
-      ? 'Couldn\'t run VLC. Please make sure it\'s installed.'
-      : ''
-    return (
-      <div>
-        <p><strong>Sorry, we can't play that file.</strong></p>
-        <p>{message}</p>
-        <p className='float-right'>
-          <button className='button-flat' onClick={dispatcher('backToList')}>Cancel</button>
-          {actionButton}
-        </p>
-        <p className='error-text'>{vlcMessage}</p>
-      </div>
-    )
-  }
-
-  onInstall () {
-    electron.shell.openExternal('http://www.videolan.org/vlc/')
-
-    // TODO: dcposch send a dispatch rather than modifying state directly
-    var state = this.props.state
-    state.modal.vlcInstalled = true // Assume they'll install it successfully
-  }
-}

src/renderer/webtorrent.js

@@ -2,26 +2,26 @@
 // process from the main window.
 console.time('init')
 
-var deepEqual = require('deep-equal')
-var defaultAnnounceList = require('create-torrent').announceList
-var electron = require('electron')
-var fs = require('fs-extra')
-var hat = require('hat')
-var musicmetadata = require('musicmetadata')
-var networkAddress = require('network-address')
-var path = require('path')
-var WebTorrent = require('webtorrent')
-var zeroFill = require('zero-fill')
+const crypto = require('crypto')
+const deepEqual = require('deep-equal')
+const defaultAnnounceList = require('create-torrent').announceList
+const electron = require('electron')
+const fs = require('fs-extra')
+const musicmetadata = require('musicmetadata')
+const networkAddress = require('network-address')
+const path = require('path')
+const WebTorrent = require('webtorrent')
+const zeroFill = require('zero-fill')
 
-var crashReporter = require('../crash-reporter')
-var config = require('../config')
-var torrentPoster = require('./lib/torrent-poster')
+const crashReporter = require('../crash-reporter')
+const config = require('../config')
+const torrentPoster = require('./lib/torrent-poster')
 
 // Report when the process crashes
 crashReporter.init()
 
 // Send & receive messages from the main window
-var ipc = electron.ipcRenderer
+const ipc = electron.ipcRenderer
 
 // Force use of webtorrent trackers on all torrents
 global.WEBTORRENT_ANNOUNCE = defaultAnnounceList
@@ -31,7 +31,7 @@ global.WEBTORRENT_ANNOUNCE = defaultAnnounceList
 /**
  * WebTorrent version.
  */
-var VERSION = require('../../package.json').version
+const VERSION = require('../../package.json').version
 
 /**
  * Version number in Azureus-style. Generated from major and minor semver version.
@@ -39,7 +39,7 @@ var VERSION = require('../../package.json').version
  *   '0.16.1' -> '0016'
  *   '1.2.5' -> '0102'
  */
-var VERSION_STR = VERSION.match(/([0-9]+)/g)
+const VERSION_STR = VERSION.match(/([0-9]+)/g)
   .slice(0, 2)
   .map((v) => zeroFill(2, v))
   .join('')
@@ -51,19 +51,19 @@ var VERSION_STR = VERSION.match(/([0-9]+)/g)
  * For example:
  *   '-WW0102-'...
  */
-var VERSION_PREFIX = '-WD' + VERSION_STR + '-'
+const VERSION_PREFIX = '-WD' + VERSION_STR + '-'
 
 // Connect to the WebTorrent and BitTorrent networks. WebTorrent Desktop is a hybrid
 // client, as explained here: https://webtorrent.io/faq
-var client = window.client = new WebTorrent({
-  peerId: Buffer.from(VERSION_PREFIX + hat(48))
+const client = window.client = new WebTorrent({
+  peerId: Buffer.from(VERSION_PREFIX + crypto.randomBytes(6).toString('hex'))
 })
 
 // WebTorrent-to-HTTP streaming sever
-var server = null
+let server = null
 
 // Used for diffing, so we only send progress updates when necessary
-var prevProgress = null
+let prevProgress = null
 
 init()
 
@@ -83,8 +83,8 @@ function init () {
     generateTorrentPoster(torrentKey))
   ipc.on('wt-get-audio-metadata', (e, infoHash, index) =>
     getAudioMetadata(infoHash, index))
-  ipc.on('wt-start-server', (e, infoHash, index) =>
-    startServer(infoHash, index))
+  ipc.on('wt-start-server', (e, infoHash) =>
+    startServer(infoHash))
   ipc.on('wt-stop-server', (e) =>
     stopServer())
   ipc.on('wt-select-files', (e, infoHash, selections) =>
@@ -97,14 +97,15 @@ function init () {
     true)
 
   setInterval(updateTorrentProgress, 1000)
+  console.timeEnd('init')
 }
 
-// Starts a given TorrentID, which can be an infohash, magnet URI, etc. Returns WebTorrent object
-// See https://github.com/feross/webtorrent/blob/master/docs/api.md#clientaddtorrentid-opts-function-ontorrent-torrent-
+// Starts a given TorrentID, which can be an infohash, magnet URI, etc.
+// Returns a WebTorrent object. See https://git.io/vik9M
 function startTorrenting (torrentKey, torrentID, path, fileModtimes, selections) {
   console.log('starting torrent %s: %s', torrentKey, torrentID)
 
-  var torrent = client.add(torrentID, {
+  const torrent = client.add(torrentID, {
     path: path,
     fileModtimes: fileModtimes
   })
@@ -120,15 +121,15 @@ function startTorrenting (torrentKey, torrentID, path, fileModtimes, selections)
 }
 
 function stopTorrenting (infoHash) {
-  var torrent = client.get(infoHash)
+  const torrent = client.get(infoHash)
   if (torrent) torrent.destroy()
 }
 
 // Create a new torrent, start seeding
 function createTorrent (torrentKey, options) {
   console.log('creating torrent', torrentKey, options)
-  var paths = options.files.map((f) => f.path)
-  var torrent = client.seed(paths, options)
+  const paths = options.files.map((f) => f.path)
+  const torrent = client.seed(paths, options)
   torrent.key = torrentKey
   addTorrentEvents(torrent)
   ipc.send('wt-new-torrent')
@@ -146,14 +147,14 @@ function addTorrentEvents (torrent) {
   torrent.on('done', torrentDone)
 
   function torrentMetadata () {
-    var info = getTorrentInfo(torrent)
+    const info = getTorrentInfo(torrent)
     ipc.send('wt-metadata', torrent.key, info)
 
     updateTorrentProgress()
   }
 
   function torrentReady () {
-    var info = getTorrentInfo(torrent)
+    const info = getTorrentInfo(torrent)
     ipc.send('wt-ready', torrent.key, info)
     ipc.send('wt-ready-' + torrent.infoHash, torrent.key, info) // TODO: hack
 
@@ -161,7 +162,7 @@ function addTorrentEvents (torrent) {
   }
 
   function torrentDone () {
-    var info = getTorrentInfo(torrent)
+    const info = getTorrentInfo(torrent)
     ipc.send('wt-done', torrent.key, info)
 
     updateTorrentProgress()
@@ -197,9 +198,9 @@ function getTorrentFileInfo (file) {
 // Every time we resolve a magnet URI, save the torrent file so that we never
 // have to download it again. Never ask the DHT the same question twice.
 function saveTorrentFile (torrentKey) {
-  var torrent = getTorrent(torrentKey)
+  const torrent = getTorrent(torrentKey)
   checkIfTorrentFileExists(torrent.infoHash, function (torrentPath, exists) {
-    var fileName = torrent.infoHash + '.torrent'
+    const fileName = torrent.infoHash + '.torrent'
     if (exists) {
       // We've already saved the file
       return ipc.send('wt-file-saved', torrentKey, fileName)
@@ -219,7 +220,7 @@ function saveTorrentFile (torrentKey) {
 // Checks whether we've already resolved a given infohash to a torrent file
 // Calls back with (torrentPath, exists). Logs, does not call back on error
 function checkIfTorrentFileExists (infoHash, cb) {
-  var torrentPath = path.join(config.TORRENT_PATH, infoHash + '.torrent')
+  const torrentPath = path.join(config.TORRENT_PATH, infoHash + '.torrent')
   fs.exists(torrentPath, function (exists) {
     cb(torrentPath, exists)
   })
@@ -228,14 +229,14 @@ function checkIfTorrentFileExists (infoHash, cb) {
 // Save a JPG that represents a torrent.
 // Auto chooses either a frame from a video file, an image, etc
 function generateTorrentPoster (torrentKey) {
-  var torrent = getTorrent(torrentKey)
+  const torrent = getTorrent(torrentKey)
   torrentPoster(torrent, function (err, buf, extension) {
     if (err) return console.log('error generating poster: %o', err)
     // save it for next time
     fs.mkdirp(config.POSTER_PATH, function (err) {
       if (err) return console.log('error creating poster dir: %o', err)
-      var posterFileName = torrent.infoHash + extension
-      var posterFilePath = path.join(config.POSTER_PATH, posterFileName)
+      const posterFileName = torrent.infoHash + extension
+      const posterFilePath = path.join(config.POSTER_PATH, posterFileName)
       fs.writeFile(posterFilePath, buf, function (err) {
         if (err) return console.log('error saving poster: %o', err)
         // show the poster
@@ -246,7 +247,7 @@ function generateTorrentPoster (torrentKey) {
 }
 
 function updateTorrentProgress () {
-  var progress = getTorrentProgress()
+  const progress = getTorrentProgress()
   // TODO: diff torrent-by-torrent, not once for the whole update
   if (prevProgress && deepEqual(progress, prevProgress, {strict: true})) {
     return /* don't send heavy object if it hasn't changed */
@@ -257,19 +258,19 @@ function updateTorrentProgress () {
 
 function getTorrentProgress () {
   // First, track overall progress
-  var progress = client.progress
-  var hasActiveTorrents = client.torrents.some(function (torrent) {
+  const progress = client.progress
+  const hasActiveTorrents = client.torrents.some(function (torrent) {
     return torrent.progress !== 1
   })
 
   // Track progress for every file in each torrent
   // TODO: ideally this would be tracked by WebTorrent, which could do it
   // more efficiently than looping over torrent.bitfield
-  var torrentProg = client.torrents.map(function (torrent) {
-    var fileProg = torrent.files && torrent.files.map(function (file, index) {
-      var numPieces = file._endPiece - file._startPiece + 1
-      var numPiecesPresent = 0
-      for (var piece = file._startPiece; piece <= file._endPiece; piece++) {
+  const torrentProg = client.torrents.map(function (torrent) {
+    const fileProg = torrent.files && torrent.files.map(function (file, index) {
+      const numPieces = file._endPiece - file._startPiece + 1
+      let numPiecesPresent = 0
+      for (let piece = file._startPiece; piece <= file._endPiece; piece++) {
         if (torrent.bitfield.get(piece)) numPiecesPresent++
       }
       return {
@@ -300,28 +301,28 @@ function getTorrentProgress () {
   }
 }
 
-function startServer (infoHash, index) {
-  var torrent = client.get(infoHash)
-  if (torrent.ready) startServerFromReadyTorrent(torrent, index)
-  else torrent.once('ready', () => startServerFromReadyTorrent(torrent, index))
+function startServer (infoHash) {
+  const torrent = client.get(infoHash)
+  if (torrent.ready) startServerFromReadyTorrent(torrent)
+  else torrent.once('ready', () => startServerFromReadyTorrent(torrent))
 }
 
-function startServerFromReadyTorrent (torrent, index, cb) {
+function startServerFromReadyTorrent (torrent, cb) {
   if (server) return
 
   // start the streaming torrent-to-http server
   server = torrent.createServer()
   server.listen(0, function () {
-    var port = server.address().port
-    var urlSuffix = ':' + port + '/' + index
-    var info = {
+    const port = server.address().port
+    const urlSuffix = ':' + port
+    const info = {
       torrentKey: torrent.key,
       localURL: 'http://localhost' + urlSuffix,
       networkURL: 'http://' + networkAddress() + urlSuffix
     }
 
     ipc.send('wt-server-running', info)
-    ipc.send('wt-server-' + torrent.infoHash, info) // TODO: hack
+    ipc.send('wt-server-' + torrent.infoHash, info)
   })
 }
 
@@ -332,8 +333,8 @@ function stopServer () {
 }
 
 function getAudioMetadata (infoHash, index) {
-  var torrent = client.get(infoHash)
-  var file = torrent.files[index]
+  const torrent = client.get(infoHash)
+  const file = torrent.files[index]
   musicmetadata(file.createReadStream(), function (err, info) {
     if (err) return
     console.log('got audio metadata for %s: %o', file.name, info)
@@ -343,7 +344,7 @@ function getAudioMetadata (infoHash, index) {
 
 function selectFiles (torrentOrInfoHash, selections) {
   // Get the torrent object
-  var torrent
+  let torrent
   if (typeof torrentOrInfoHash === 'string') {
     torrent = client.get(torrentOrInfoHash)
   } else {
@@ -368,8 +369,8 @@ function selectFiles (torrentOrInfoHash, selections) {
   torrent.deselect(0, torrent.pieces.length - 1, false)
 
   // Add selections (individual files)
-  for (var i = 0; i < selections.length; i++) {
-    var file = torrent.files[i]
+  for (let i = 0; i < selections.length; i++) {
+    const file = torrent.files[i]
     if (selections[i]) {
       file.select()
     } else {
@@ -382,7 +383,7 @@ function selectFiles (torrentOrInfoHash, selections) {
 // Gets a WebTorrent handle by torrentKey
 // Throws an Error if we're not currently torrenting anything w/ that key
 function getTorrent (torrentKey) {
-  var ret = client.torrents.find((x) => x.key === torrentKey)
+  const ret = client.torrents.find((x) => x.key === torrentKey)
   if (!ret) throw new Error('missing torrent key ' + torrentKey)
   return ret
 }

static/linux/share/applications/webtorrent-desktop.desktop

@@ -0,0 +1,33 @@
+[Desktop Entry]
+Name=WebTorrent
+Version=1.0
+GenericName=BitTorrent Client
+X-GNOME-FullName=WebTorrent
+Comment=Download and share files over BitTorrent
+Encoding=UTF-8
+Type=Application
+Icon=webtorrent-desktop
+Terminal=false
+Path=/opt/webtorrent-desktop
+Exec=/opt/webtorrent-desktop/WebTorrent %U
+TryExec=/opt/webtorrent-desktop/WebTorrent
+StartupNotify=false
+Categories=Network;FileTransfer;P2P;
+MimeType=application/x-bittorrent;x-scheme-handler/magnet;x-scheme-handler/stream-magnet;
+
+Actions=CreateNewTorrent;OpenTorrentFile;OpenTorrentAddress;
+
+[Desktop Action CreateNewTorrent]
+Name=Create New Torrent...
+Exec=/opt/webtorrent-desktop/WebTorrent -n
+Path=/opt/webtorrent-desktop
+
+[Desktop Action OpenTorrentFile]
+Name=Open Torrent File...
+Exec=/opt/webtorrent-desktop/WebTorrent -o
+Path=/opt/webtorrent-desktop
+
+[Desktop Action OpenTorrentAddress]
+Name=Open Torrent Address...
+Exec=/opt/webtorrent-desktop/WebTorrent -u
+Path=/opt/webtorrent-desktop

static/main.css

@@ -19,13 +19,17 @@ body {
   overflow: hidden;
 }
 
-body {
-  color: #FFF;
+.app {
+  color: #FAFAFA; /* grey50 */
   font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
   font-size: 14px;
   line-height: 1.5em;
 }
 
+.app.is-win32 {
+  font-family: 'Segoe UI', sans-serif;
+}
+
 #body {
   width: 100%;
   height: 100%;
@@ -71,12 +75,12 @@ table {
   height: 100%;
   display: flex;
   flex-flow: column;
-  background: rgb(40, 40, 40);
+  background: rgb(30, 30, 30);
   animation: fadein 0.5s;
 }
 
 .app:not(.is-focused) {
-  background: rgb(50, 50, 50);
+  background: rgb(40, 40, 40);
 }
 
 /*
@@ -87,9 +91,7 @@ table {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: local('Material Icons'),
-       local('MaterialIcons-Regular'),
-       url(MaterialIcons-Regular.woff2) format('woff2');
+  src: url('MaterialIcons-Regular.woff2') format('woff2');
 }
 
 .icon {
@@ -122,10 +124,6 @@ table {
  * UTILITY CLASSES
  */
 
-.clickable {
-  cursor: pointer;
-}
-
 .ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -140,33 +138,13 @@ table {
   float: right;
 }
 
-.expand-collapse.expanded::before {
-  content: '▲'
-}
-
-.expand-collapse.collapsed::before {
-  content: '▼'
-}
-
-.expand-collapse::before {
-  margin-right: 5px;
-}
-
-.expand-collapse.collapsed {
-  display: block;
-}
-
-.collapsed {
-  display: none;
-}
-
 /*
  * HEADER
  */
 
 .header {
   background: rgb(40, 40, 40);
-  border-bottom: 1px solid rgb(20, 20, 20);
+  border-bottom: 1px solid rgb(30, 30, 30);
   height: 38px; /* vertically center OS menu buttons (OS X) */
   padding-top: 7px;
   overflow: hidden;
@@ -243,7 +221,7 @@ table {
   overflow-x: hidden;
   overflow-y: overlay;
   flex: 1 1 auto;
-  margin-top: 37px;
+  margin-top: 38px;
 }
 
 .app.view-player .content {
@@ -287,10 +265,6 @@ table {
   font-weight: bold;
 }
 
-.open-torrent-address-modal input {
-  width: 100%;
-}
-
 .create-torrent {
   padding: 10px 25px;
   overflow: hidden;
@@ -298,6 +272,7 @@ table {
 
 .create-torrent .torrent-attribute {
   white-space: nowrap;
+  margin: 8px 0;
 }
 
 .create-torrent .torrent-attribute>* {
@@ -305,13 +280,12 @@ table {
 }
 
 .create-torrent .torrent-attribute label {
-  width: 60px;
-  margin-right: 10px;
+  width: 100px;
   vertical-align: top;
 }
 
 .create-torrent .torrent-attribute>div {
-  width: calc(100% - 90px);
+  width: calc(100% - 100px);
 }
 
 .create-torrent .torrent-attribute div {
@@ -320,29 +294,8 @@ table {
   text-overflow: ellipsis;
 }
 
-.create-torrent .torrent-attribute textarea {
-  width: calc(100% - 80px);
-  height: 80px;
-  color: #eee;
-  background-color: transparent;
-  line-height: 1.5;
-  font-size: 14px;
-  font-family: inherit;
-  border-radius: 2px;
-  padding: 4px 6px;
-}
-
-.create-torrent textarea.torrent-trackers {
-  height: 200px;
-}
-
-.create-torrent input.torrent-is-private {
-  margin: 0;
-}
-
 /*
  * BUTTONS
- * See https://www.google.com/design/spec/components/buttons.html
  */
 
 a,
@@ -365,62 +318,13 @@ i:not(.disabled):hover { /* Show they're clickable without pointer: cursor */
   text-align: center;
 }
 
-button { /* Rectangular text buttons */
-  background: transparent;
-  margin-left: 10px;
-  padding: 0;
-  border: none;
-  border-radius: 3px;
-  font-size: 14px;
-  font-weight: bold;
-  color: #aaa;
-  outline: none;
-}
-
-button.button-flat {
-  color: #222;
-  padding: 7px 18px;
-}
-
-button.button-flat.light {
-  color: #eee;
-}
-
-button.button-flat:hover,
-button.button-flat:focus { /* Material design: focused */
-  background-color: rgba(153, 153, 153, 0.2);
-}
-
-button.button-flat:active { /* Material design: pressed */
-  background-color: rgba(153, 153, 153, 0.4);
-}
-
-button.button-raised {
-  background-color: #2196f3;
-  color: #eee;
-  padding: 7px 18px;
-}
-
-button.button-raised:hover,
-button.button-raised:focus {
-  background-color: #38a0f5;
-}
-
-button.button-raised:active {
-  background-color: #51abf6;
-}
-
 /*
- * OTHER FORM ELEMENT DEFAULTS
+ * INPUTS
  */
-
-input[type='text'] {
-  background: transparent;
-  width: 300px;
-  padding: 6px;
-  border: 1px solid #bbb;
-  border-radius: 3px;
-  outline: none;
+input,
+textarea,
+.control {
+  font-size: 14px !important;
 }
 
 /*
@@ -434,7 +338,7 @@ input[type='text'] {
   background-position: center;
   transition: -webkit-filter 0.1s ease-out;
   position: relative;
-  animation: fadein .4s;
+  animation: fadein 0.5s;
 }
 
 .torrent,
@@ -446,10 +350,6 @@ input[type='text'] {
   border-bottom: 1px solid rgb(20, 20, 20);
 }
 
-.torrent:hover {
-  -webkit-filter: brightness(1.1);
-}
-
 .torrent .metadata {
   position: absolute;
   top: 25px;
@@ -555,6 +455,20 @@ input[type='text'] {
   line-height: 1.5em;
 }
 
+progress {
+  width: 60px;
+  margin-right: 8px;
+  -webkit-appearance: none;
+}
+
+progress::-webkit-progress-bar {
+  background-color: #888;
+}
+
+progress::-webkit-progress-value {
+  background-color: #eee;
+}
+
 /*
  * TORRENT LIST: ERRORS
  */
@@ -606,6 +520,7 @@ body.drag .app::after {
 /*
  * TORRENT LIST: EXPANDED TORRENT DETAILS
  */
+
 .torrent.selected {
   height: auto;
 }
@@ -629,10 +544,6 @@ body.drag .app::after {
   height: 28px;
 }
 
-.torrent-details tr:hover {
-  background-color: rgba(200, 200, 200, 0.3);
-}
-
 .torrent-details td {
   overflow: hidden;
   padding: 0;
@@ -729,11 +640,15 @@ body.drag .app::after {
   opacity: 1;
 }
 
-.player .controls .play-pause {
+.player .controls .icon.disabled {
+  opacity: 0.3;
+}
+
+.player .controls .icon.skip-previous,
+.player .controls .icon.play-pause,
+.player .controls .icon.skip-next {
   font-size: 28px;
-  margin-top: 5px;
-  margin-right: 10px;
-  margin-left: 15px;
+  margin: 5px;
 }
 
 .player .controls .volume-slider {
@@ -917,185 +832,6 @@ video::-webkit-media-text-track-container {
   font-weight: bold;
 }
 
-/*
- * Preferences page, based on Atom settings style
- */
-
-.preferences {
-  font-size: 12px;
-  line-height: calc(10/7);
-}
-
-.preferences .text {
-  color: #a8a8a8;
-}
-
-.preferences .icon {
-  color: rgba(170, 170, 170, 0.6);
-  font-size: 16px;
-  margin-right: 0.2em;
-}
-
-.preferences .icon.enabled {
-  color: yellow;
-}
-
-.preferences .btn {
-  display: inline-block;
-  -webkit-appearance: button;
-  margin: 0;
-  font-weight: normal;
-  text-align: center;
-  vertical-align: middle;
-  border-color: #cccccc;
-  border-radius: 3px;
-  color: #9da5b4;
-  text-shadow: none;
-  border: 1px solid #181a1f;
-  background-color: #3d3d3d;
-  white-space: initial;
-  font-size: 0.889em;
-  line-height: 1;
-  padding: 0.5em 0.75em;
-}
-
-.preferences .btn .icon {
-  margin: 0;
-  color: #a8a8a8;
-}
-
-.preferences .help .icon {
-  vertical-align: sub;
-}
-
-
-.preferences .preferences-panel .control-group + .control-group {
-  margin-top: 1.5em;
-}
-
-.preferences .section {
-  padding: 20px;
-  border-top: 1px solid #181a1f;
-}
-
-.preferences .section:first {
-  border-top: 0px;
-}
-
-.preferences .section:first-child,
-.preferences .section:last-child {
-  padding: 20px;
-}
-
-.preferences .section.section:empty {
-  padding: 0;
-  border-top: none;
-}
-
-.preferences .section-container {
-  width: 100%;
-  max-width: 800px;
-}
-
-.preferences section .section-heading,
-.preferences .section .section-heading {
-  margin-bottom: 10px;
-  color: #dcdcdc;
-  font-size: 1.75em;
-  font-weight: bold;
-  line-height: 1;
-  -webkit-user-select: none;
-  cursor: default;
-}
-
-.preferences .sub-section-heading.icon:before,
-.preferences .section-heading.icon:before {
-  margin-right: 8px;
-}
-
-.preferences .section-heading-count {
-  margin-left: .5em;
-}
-
-.preferences .section-body {
-  margin-top: 20px;
-}
-
-.preferences .sub-section {
-  margin: 20px 0;
-}
-
-.preferences .sub-section .sub-section-heading {
-  color: #dcdcdc;
-  font-size: 1.4em;
-  font-weight: bold;
-  line-height: 1;
-  -webkit-user-select: none;
-}
-
-.preferences .preferences-panel label {
-  color: #a8a8a8;
-}
-
-.preferences .preferences-panel .control-group + .control-group {
-  margin-top: 1.5em;
-}
-
-.preferences .preferences-panel .control-group .editor-container {
-  margin: 0;
-}
-
-.preferences .preference-title {
-  font-size: 1.2em;
-  -webkit-user-select: none;
-  display: inline-block;
-}
-
-.preferences .preference-description {
-    color: rgba(170, 170, 170, 0.6);
-    -webkit-user-select: none;
-    cursor: default;
-}
-
-.preferences input {
-  font-size: 1.1em;
-  line-height: 1.15em;
-  max-height: none;
-  width: 100%;
-  padding-left: 0.5em;
-  border-radius: 3px;
-  color: #a8a8a8;
-  border: 1px solid #181a1f;
-  background-color: #1b1d23;
-}
-
-.preferences input::-webkit-input-placeholder {
-  color: rgba(170, 170, 170, 0.6);
-}
-
-.preferences .control-group input {
-  margin-top: 0.2em;
-}
-
-.preferences .control-group input.file-picker-text {
-  width: calc(100% - 40px);
-}
-
-.preferences .control-group .checkbox .icon {
-  font-size: 1.5em;
-  margin: 0;
-  vertical-align: text-bottom;
-}
-
-.preferences .checkbox {
-  width: auto;
-}
-
-.checkbox-label {
-  vertical-align: top;
-}
-
-
 /*
  * MEDIA OVERLAY / AUDIO DETAILS
  */
@@ -1254,3 +990,19 @@ video::-webkit-media-text-track-container {
   height: 32px;
   margin: 4px 0 0 4px;
 }
+
+/**
+ * Use this class on Material UI components to get correct native app behavior:
+ *
+ * - Dragging the button should NOT drag the entire app window
+ * - The cursor should be default, not a pointer (hand) like on the web
+ */
+
+.control {
+  -webkit-app-region: no-drag;
+  cursor: default !important;
+}
+
+.control * {
+  cursor: default !important;
+}

static/main.html

@@ -7,11 +7,7 @@
     <link rel="stylesheet" href="main.css">
   </head>
   <body>
-    <!-- React prints a warning if you render to <body> directly -->
     <div id='body'></div>
-    <!-- We can't just say src='...main.js', that breaks require()s -->
-    <script>
-      require('../build/renderer/main.js')
-    </script>
+    <script>require('../build/renderer/main.js')</script>
   </body>
 </html>