WIP: add embedded mkv subtitles

A require() had the wrong case, which apparently works for `npm start` build but fails in the packaged app

.gitignore

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

.nodemonignore

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

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,10 @@
 - 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)
 
 #### Generated by bin/update-authors.sh.

CHANGELOG.md

@@ -1,5 +1,42 @@
 # WebTorrent Desktop Version History
 
+## 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)
+
+### Changed
+
+- Do not automatically set WebTorrent as the default handler for torrents (#771)
+- Torrents can only be created from the home screen (#770)
+- Update Electron to 1.3.3 (#772)
+
+### Fixed
+
+- Allow modifying the default tracker list on the Create Torrent page (#775)
+- Prevent opening multiple stacked Preference windows or Create Torrent windows (#770)
+- Windows: Player window auto-resize does not match video aspect ratio (#565)
+- Missing page title on Create Torrent page
+
 ## v0.10.0 - 2016-08-05
 
 ### Added

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

@@ -46,11 +46,14 @@ 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'
+  'babel-plugin-transform-es2015-destructuring',
+  'babel-plugin-transform-object-rest-spread',
+  'babel-plugin-transform-react-jsx',
+  'gh-release',
+  'nodemon',
+  'standard'
 ]
 
 main()

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/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/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.10.0",
+  "version": "0.12.0",
   "author": {
     "name": "WebTorrent, LLC",
     "email": "feross@webtorrent.io",
@@ -22,18 +22,20 @@
     "deep-equal": "^1.0.1",
     "dlnacasts": "^0.1.0",
     "drag-drop": "^2.12.1",
-    "electron-prebuilt": "1.3.2",
+    "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",
+    "matroska-subtitles": "^2.0.0",
     "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,6 +49,8 @@
   "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",
     "electron-osx-sign": "^0.3.0",
@@ -56,11 +60,12 @@
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
     "nobin-debian-installer": "^0.0.10",
+    "nodemon": "^1.10.2",
     "open": "0.0.5",
-    "plist": "^1.2.0",
+    "plist": "^2.0.1",
     "rimraf": "^2.5.2",
     "run-series": "^1.1.4",
-    "standard": "^7.0.0"
+    "standard": "*"
   },
   "engines": {
     "node": ">=4.0.0"
@@ -94,6 +99,7 @@
     "prepublish": "npm run build",
     "start": "npm run build && electron .",
     "test": "standard && node ./bin/check-deps.js",
-    "update-authors": "./bin/update-authors.sh"
+    "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/main/external-player.js

@@ -0,0 +1,65 @@
+module.exports = {
+  spawn,
+  kill,
+  checkInstall
+}
+
+var cp = require('child_process')
+var vlcCommand = require('vlc-command')
+
+var log = require('./log')
+var windows = require('./windows')
+
+// holds a ChildProcess while we're playing a video in an external player, null otherwise
+var proc
+
+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')
+    var 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
+  var 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

@@ -280,6 +280,9 @@ function installLinux () {
   var config = require('../config')
   var log = require('./log')
 
+  // Do not install in user dir if running on system
+  if (/^\/opt/.test(process.execPath)) return
+
   installDesktopFile()
   installIconFile()
 

src/main/index.js

@@ -10,7 +10,6 @@ var config = require('../config')
 var crashReporter = require('../crash-reporter')
 var dialog = require('./dialog')
 var dock = require('./dock')
-var handlers = require('./handlers')
 var ipc = require('./ipc')
 var log = require('./log')
 var menu = require('./menu')
@@ -35,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()
@@ -79,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)
+      var error = {message: err.message, stack: err.stack}
+      windows.main.dispatch('uncaughtError', 'main', error)
     })
   })
 
@@ -111,7 +110,6 @@ function init () {
 function delayedInit () {
   announcement.init()
   dock.init()
-  handlers.install()
   tray.init()
   updater.init()
   userTasks.init()
@@ -161,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

@@ -8,21 +8,19 @@ var 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 externalPlayer = require('./external-player')
 var windows = require('./windows')
 var 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
-
 function init () {
   var ipc = electron.ipcMain
 
@@ -60,14 +58,14 @@ function init () {
    */
 
   ipc.on('onPlayerOpen', function () {
-    menu.onPlayerOpen()
+    menu.setPlayerOpen(true)
     powerSaveBlocker.enable()
     shortcuts.enable()
     thumbar.enable()
   })
 
   ipc.on('onPlayerClose', function () {
-    menu.onPlayerClose()
+    menu.setPlayerOpen(false)
     powerSaveBlocker.disable()
     shortcuts.disable()
     thumbar.disable()
@@ -91,6 +89,14 @@ function init () {
   ipc.on('showItemInFolder', (e, ...args) => shell.showItemInFolder(...args))
   ipc.on('moveItemToTrash', (e, ...args) => shell.moveItemToTrash(...args))
 
+  /**
+   * File handlers
+   */
+  ipc.on('setDefaultFileHandler', (e, flag) => {
+    if (flag) handlers.install()
+    else handlers.uninstall()
+  })
+
   /**
    * Windows: Main
    */
@@ -103,54 +109,20 @@ function init () {
   ipc.on('setTitle', (e, ...args) => main.setTitle(...args))
   ipc.on('show', () => main.show())
   ipc.on('toggleFullScreen', (e, ...args) => main.toggleFullScreen(...args))
+  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

src/main/menu.js

@@ -1,11 +1,10 @@
 module.exports = {
   init,
-  onPlayerClose,
-  onPlayerOpen,
+  setPlayerOpen,
+  setWindowFocus,
+  setAllowNav,
   onToggleAlwaysOnTop,
-  onToggleFullScreen,
-  onWindowBlur,
-  onWindowFocus
+  onToggleFullScreen
 }
 
 var electron = require('electron')
@@ -24,26 +23,31 @@ function init () {
   electron.Menu.setApplicationMenu(menu)
 }
 
-function onPlayerClose () {
-  getMenuItem('Play/Pause').enabled = false
-  getMenuItem('Increase Volume').enabled = false
-  getMenuItem('Decrease Volume').enabled = false
-  getMenuItem('Step Forward').enabled = false
-  getMenuItem('Step Backward').enabled = false
-  getMenuItem('Increase Speed').enabled = false
-  getMenuItem('Decrease Speed').enabled = false
-  getMenuItem('Add Subtitles File...').enabled = false
+function setPlayerOpen (flag) {
+  getMenuItem('Play/Pause').enabled = flag
+  getMenuItem('Increase Volume').enabled = flag
+  getMenuItem('Decrease Volume').enabled = flag
+  getMenuItem('Step Forward').enabled = flag
+  getMenuItem('Step Backward').enabled = flag
+  getMenuItem('Increase Speed').enabled = flag
+  getMenuItem('Decrease Speed').enabled = flag
+  getMenuItem('Add Subtitles File...').enabled = flag
 }
 
-function onPlayerOpen () {
-  getMenuItem('Play/Pause').enabled = true
-  getMenuItem('Increase Volume').enabled = true
-  getMenuItem('Decrease Volume').enabled = true
-  getMenuItem('Step Forward').enabled = true
-  getMenuItem('Step Backward').enabled = true
-  getMenuItem('Increase Speed').enabled = true
-  getMenuItem('Decrease Speed').enabled = true
-  getMenuItem('Add Subtitles File...').enabled = true
+function setWindowFocus (flag) {
+  getMenuItem('Full Screen').enabled = flag
+  getMenuItem('Float on Top').enabled = flag
+}
+
+// Disallow opening more screens on top of the current one.
+function setAllowNav (flag) {
+  getMenuItem('Preferences').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) {
@@ -54,16 +58,6 @@ function onToggleFullScreen (flag) {
   getMenuItem('Full Screen').checked = flag
 }
 
-function onWindowBlur () {
-  getMenuItem('Full Screen').enabled = false
-  getMenuItem('Float on Top').enabled = false
-}
-
-function onWindowFocus () {
-  getMenuItem('Full Screen').enabled = true
-  getMenuItem('Float on Top').enabled = true
-}
-
 function getMenuItem (label) {
   for (var i = 0; i < menu.items.length; i++) {
     var menuItem = menu.items[i].submenu.items.find(function (item) {
@@ -130,14 +124,6 @@ function getMenuTemplate () {
         },
         {
           role: 'selectall'
-        },
-        {
-          type: 'separator'
-        },
-        {
-          label: 'Preferences',
-          accelerator: 'CmdOrCtrl+,',
-          click: () => windows.main.dispatch('preferences')
         }
       ]
     },
@@ -350,6 +336,17 @@ function getMenuTemplate () {
       click: () => dialog.openSeedFile()
     })
 
+    // Edit menu (Windows, Linux)
+    template[1].submenu.push(
+      {
+        type: 'separator'
+      },
+      {
+        label: 'Preferences',
+        accelerator: 'CmdOrCtrl+,',
+        click: () => windows.main.dispatch('preferences')
+      })
+
     // Help menu (Windows, Linux)
     template[4].submenu.push(
       {

src/main/power-save-blocker.js

@@ -13,7 +13,10 @@ var blockId = 0
  * 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/tray.js

@@ -1,8 +1,7 @@
 module.exports = {
   hasTray,
   init,
-  onWindowBlur,
-  onWindowFocus
+  setWindowFocus
 }
 
 var electron = require('electron')
@@ -31,12 +30,7 @@ function hasTray () {
   return !!tray
 }
 
-function onWindowBlur () {
-  if (!tray) return
-  updateTrayMenu()
-}
-
-function onWindowFocus () {
+function setWindowFocus (flag) {
   if (!tray) return
   updateTrayMenu()
 }

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/main.js

@@ -23,7 +23,7 @@ var log = require('../log')
 var menu = require('../menu')
 var tray = require('../tray')
 
-var HEADER_HEIGHT = 37
+var HEADER_HEIGHT = 38
 var TORRENT_HEIGHT = 100
 
 function init () {
@@ -31,7 +31,7 @@ function init () {
     return main.win.show()
   }
   var win = main.win = new electron.BrowserWindow({
-    backgroundColor: '#1E1E1E',
+    backgroundColor: '#282828',
     darkTheme: true, // Forces dark theme (GTK+3)
     icon: getIconPath(), // Window icon (Windows, Linux)
     minWidth: config.WINDOW_MIN_WIDTH,
@@ -141,7 +141,13 @@ function setBounds (bounds, maximize) {
       bounds.y = Math.round(scr.bounds.y + scr.bounds.height / 2 - bounds.height / 2)
       log('setBounds: centered to ' + JSON.stringify(bounds))
     }
-    main.win.setBounds(bounds, true)
+    // Resize the window's content area (so window border doesn't need to be taken
+    // into account)
+    if (bounds.contentBounds) {
+      main.win.setContentBounds(bounds, true)
+    } else {
+      main.win.setBounds(bounds, true)
+    }
   } else {
     log('setBounds: not setting bounds because of window maximization')
   }
@@ -204,13 +210,13 @@ function toggleFullScreen (flag) {
 }
 
 function onWindowBlur () {
-  menu.onWindowBlur()
-  tray.onWindowBlur()
+  menu.setWindowFocus(false)
+  tray.setWindowFocus(false)
 }
 
 function onWindowFocus () {
-  menu.onWindowFocus()
-  tray.onWindowFocus()
+  menu.setWindowFocus(true)
+  tray.setWindowFocus(true)
 }
 
 function getIconPath () {

src/renderer/components/Heading.js

@@ -0,0 +1,35 @@
+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
+    return (
+      <HeadingTag
+        style={{
+          color: colors.grey100,
+          fontSize: 20,
+          marginBottom: 15,
+          marginTop: 30
+        }}
+      >
+        {this.props.children}
+      </HeadingTag>
+    )
+  }
+}
+
+module.exports = Heading

src/renderer/components/PathSelector.js

@@ -0,0 +1,93 @@
+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
+
+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 () {
+    var 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()
+    return (
+      <div
+        className={this.props.className}
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          width: '100%'
+        }}
+      >
+        <div
+          className='label'
+          style={{
+            flex: '0 auto',
+            marginRight: 10,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+          }}
+        >
+          {this.props.title}:
+        </div>
+        <TextField
+          className='control'
+          disabled
+          id={id}
+          inputStyle={{
+            color: colors.grey50
+          }}
+          style={{
+            flex: '1',
+            fontSize: 14
+          }}
+          value={this.props.displayValue || this.props.value}
+        />
+        <RaisedButton
+          className='control'
+          label='Change'
+          onClick={this.handleClick}
+          style={{
+            marginLeft: 10
+          }}
+        />
+      </div>
+    )
+  }
+}
+
+module.exports = PathSelector

src/renderer/components/ShowMore.js

@@ -0,0 +1,55 @@
+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/create-torrent-error-page.js

@@ -16,7 +16,7 @@ module.exports = class CreateTorrentErrorPage extends React.Component {
           </p>
         </p>
         <p className='float-right'>
-          <button className='button-flat light' onClick={dispatcher('back')}>
+          <button className='button-flat light' onClick={dispatcher('cancel')}>
             Cancel
           </button>
         </p>

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
     return (
-      <div key='header' className='header'>
+      <div className='header'>
         {this.getTitle()}
         <div className='nav left float-left'>
           <i
@@ -48,3 +48,5 @@ module.exports = class Header extends React.Component {
     )
   }
 }
+
+module.exports = Header

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

@@ -1,5 +1,6 @@
 const React = require('react')
 const electron = require('electron')
+const path = require('path')
 
 const {dispatcher} = require('../lib/dispatcher')
 
@@ -10,11 +11,15 @@ module.exports = class UnsupportedMediaModal extends React.Component {
     var message = (err && err.getMessage)
       ? err.getMessage()
       : err
-    var actionButton = state.modal.vlcInstalled
-      ? (<button className='button-raised' onClick={dispatcher('vlcPlay')}>Play in VLC</button>)
+    var playerPath = state.saved.prefs.externalPlayerPath
+    var playerName = playerPath
+      ? path.basename(playerPath).split('.')[0]
+      : 'VLC'
+    var actionButton = state.modal.externalPlayerInstalled
+      ? (<button className='button-raised' onClick={dispatcher('openExternalPlayer')}>Play in {playerName}</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.'
+    var playerMessage = state.modal.externalPlayerNotFound
+      ? 'Couldn\'t run external player. Please make sure it\'s installed.'
       : ''
     return (
       <div>
@@ -24,7 +29,7 @@ module.exports = class UnsupportedMediaModal extends React.Component {
           <button className='button-flat' onClick={dispatcher('backToList')}>Cancel</button>
           {actionButton}
         </p>
-        <p className='error-text'>{vlcMessage}</p>
+        <p className='error-text'>{playerMessage}</p>
       </div>
     )
   }
@@ -34,6 +39,6 @@ module.exports = class UnsupportedMediaModal extends React.Component {
 
     // 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
+    state.modal.externalPlayerInstalled = true // Assume they'll install it successfully
   }
 }

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

@@ -11,18 +11,18 @@ module.exports = class UpdateAvailableModal extends React.Component {
         <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={handleCancel}>Skip This Release</button>
-          <button className='button button-raised' onClick={handleOK}>Show Download Page</button>
+          <button className='button button-flat' onClick={handleSkip}>Skip This Release</button>
+          <button className='button button-raised' onClick={handleShow}>Show Download Page</button>
         </p>
       </div>
     )
 
-    function handleOK () {
+    function handleShow () {
       electron.shell.openExternal('https://github.com/feross/webtorrent-desktop/releases')
       dispatch('exitModal')
     }
 
-    function handleCancel () {
+    function handleSkip () {
       dispatch('skipVersion', state.modal.version)
       dispatch('exitModal')
     }

src/renderer/controllers/media-controller.js

@@ -22,12 +22,12 @@ module.exports = class MediaController {
     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 +42,16 @@ 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 () {
+    var state = this.state
+    ipcRenderer.send('openExternalPlayer', state.saved.prefs.externalPlayerPath, state.server.localURL, state.window.title)
+    state.playing.location = 'external'
   }
 
-  vlcNotFound () {
+  externalPlayerNotFound () {
     var modal = this.state.modal
     if (modal && modal.id === 'unsupported-media-modal') {
-      modal.vlcNotFound = true
+      modal.externalPlayerNotFound = true
     }
   }
 }

src/renderer/controllers/playback-controller.js

@@ -13,7 +13,7 @@ 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
@@ -38,7 +38,7 @@ module.exports = class PlaybackController {
     })
   }
 
-  // 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(
@@ -93,6 +93,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
   }
@@ -188,7 +192,7 @@ module.exports = class PlaybackController {
     }, 10000) /* give it a few seconds */
 
     if (torrentSummary.status === 'paused') {
-      dispatch('startTorrentingSummary', torrentSummary)
+      dispatch('startTorrentingSummary', torrentSummary.torrentKey)
       ipcRenderer.once('wt-ready-' + torrentSummary.infoHash,
         () => this.openPlayerFromActiveTorrent(torrentSummary, index, timeout, cb))
     } else {
@@ -241,12 +245,20 @@ module.exports = class PlaybackController {
         return this.update()
       }
 
+      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()
+        cb()
+        return
+      }
+
       // otherwise, play the video
-      dispatch('setTitle', torrentSummary.files[state.playing.fileIndex].name)
       this.update()
 
       ipcRenderer.send('onPlayerOpen')
-
       cb()
     })
   }
@@ -259,8 +271,8 @@ module.exports = class PlaybackController {
     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)

src/renderer/controllers/prefs-controller.js

@@ -1,5 +1,6 @@
-const {dispatch} = require('../lib/dispatcher')
 const State = require('../lib/state')
+const {dispatch} = require('../lib/dispatcher')
+const ipcRenderer = require('electron').ipcRenderer
 
 // Controls the Preferences screen
 module.exports = class PrefsController {
@@ -15,11 +16,15 @@ module.exports = class PrefsController {
       url: 'preferences',
       setup: function (cb) {
         // initialize preferences
-        dispatch('setTitle', 'Preferences')
+        state.window.title = 'Preferences'
         state.unsaved = Object.assign(state.unsaved || {}, {prefs: state.saved.prefs || {}})
+        ipcRenderer.send('setAllowNav', false)
         cb()
       },
-      destroy: () => this.save()
+      destroy: () => {
+        ipcRenderer.send('setAllowNav', true)
+        this.save()
+      }
     })
   }
 
@@ -41,7 +46,11 @@ module.exports = class PrefsController {
   // All unsaved prefs take effect atomically, and are saved to config.json
   save () {
     var state = this.state
+    if (state.unsaved.prefs.isFileHandler !== state.saved.prefs.isFileHandler) {
+      ipcRenderer.send('setDefaultFileHandler', state.unsaved.prefs.isFileHandler)
+    }
     state.saved.prefs = Object.assign(state.saved.prefs || {}, state.unsaved.prefs)
     State.save(state)
+    dispatch('checkDownloadPath')
   }
 }

src/renderer/controllers/subtitles-controller.js

@@ -2,6 +2,10 @@ const electron = require('electron')
 const fs = require('fs-extra')
 const path = require('path')
 const parallel = require('run-parallel')
+const zeroFill = require('zero-fill')
+
+const remote = electron.remote
+const ipcRenderer = electron.ipcRenderer
 
 const {dispatch} = require('../lib/dispatcher')
 
@@ -11,7 +15,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' ]
@@ -72,6 +76,7 @@ module.exports = class SubtitlesController {
     torrentSummary.progress.files.forEach((fp, ix) => {
       if (fp.numPieces !== fp.numPiecesPresent) return // ignore incomplete files
       var file = torrentSummary.files[ix]
+      if (this.state.playing.fileIndex === ix) return this.checkForEmbeddedMKVSubtitles(file)
       if (!this.isSubtitle(file.name)) return
       var filePath = path.join(torrentSummary.path, file.path)
       this.addSubtitles([filePath], false)
@@ -83,12 +88,31 @@ module.exports = class SubtitlesController {
     var ext = path.extname(name).toLowerCase()
     return ext === '.srt' || ext === '.vtt'
   }
+
+  checkForEmbeddedMKVSubtitles (file) {
+    var playing = this.state.playing
+    // var playingFile = this.state.getPlayingFileSummary()
+    // var playingPath = path.join(torrentSummary.path, playingFile.path)
+
+    if (path.extname(file.name).toLowerCase() === '.mkv') {
+      ipcRenderer.send('wt-get-mkv-subtitles', playing.infoHash, playing.fileIndex)
+
+      ipcRenderer.once('wt-mkv-subtitles', function (e, tracks) {
+        tracks.forEach(function (trackEntry) {
+          var track = loadEmbeddedSubtitle(trackEntry)
+          console.log('loaded emb subs', track)
+          playing.subtitles.tracks.push(track)
+        })
+
+        if (tracks.length > 0) relabelSubtitles(playing.subtitles)
+      })
+    }
+  }
 }
 
 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')
 
   // Read the .SRT or .VTT file, parse it, add subtitle track
@@ -99,11 +123,7 @@ function loadSubtitle (file, cb) {
   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)
-    langDetected = langDetected.length ? langDetected[0][0] : 'subtitle'
-    langDetected = langDetected.slice(0, 1).toUpperCase() + langDetected.slice(1)
+    var langDetected = detectVTTLanguage(buf)
 
     var track = {
       buffer: 'data:text/vtt;base64,' + buf.toString('base64'),
@@ -135,3 +155,49 @@ function relabelSubtitles (subtitles) {
     track.label = counts[lang] > 1 ? (lang + ' ' + counts[lang]) : lang
   })
 }
+
+function detectVTTLanguage (buffer) {
+  var LanguageDetect = require('languagedetect')
+
+  // Detect what language the subtitles are in
+  var vttContents = buffer.toString().replace(/(.*-->.*)/g, '') // remove numbers?
+  var langDetected = (new LanguageDetect()).detect(vttContents, 2)
+  langDetected = langDetected.length ? langDetected[0][0] : 'subtitle'
+  langDetected = langDetected.slice(0, 1).toUpperCase() + langDetected.slice(1)
+
+  return langDetected
+}
+
+function loadEmbeddedSubtitle (trackEntry) {
+  // convert to .vtt format
+  var vtt = 'WEBVTT FILE\r\n\r\n'
+  trackEntry.subtitles.forEach(function (sub, i) {
+    vtt += `${i + 1}\r\n`
+    vtt += `${msToTime(sub.time)} --> ${msToTime(sub.time + sub.duration)}\r\n`
+    vtt += `${sub.text}\r\n\r\n`
+  })
+
+  function msToTime (s) {
+    var ms = s % 1000
+    s = (s - ms) / 1000
+    var secs = s % 60
+    s = (s - secs) / 60
+    var mins = s % 60
+    var hrs = (s - mins) / 60
+
+    var z = zeroFill
+    return z(2, hrs) + ':' + z(2, mins) + ':' + z(2, secs) + '.' + z(3, ms)
+  }
+
+  var buf = new Buffer(vtt)
+  var langDetected = detectVTTLanguage(buf)
+
+  var track = {
+    buffer: 'data:text/vtt;base64,' + buf.toString('base64'),
+    language: langDetected,
+    label: langDetected,
+    filePath: null
+  }
+
+  return track
+}

src/renderer/controllers/torrent-controller.js

@@ -186,5 +186,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

@@ -24,8 +24,8 @@ module.exports = class TorrentListController {
       // Use path string instead of W3C File object
       torrentId = torrentId.path
     }
+
     // Allow a instant.io link to be pasted
-    // TODO: remove this once support is added to webtorrent core
     if (typeof torrentId === 'string' && instantIoRegex.test(torrentId)) {
       torrentId = torrentId.slice(torrentId.indexOf('#') + 1)
     }
@@ -40,12 +40,21 @@ module.exports = class TorrentListController {
 
   // Shows the Create Torrent page with options to seed a given file or folder
   showCreateTorrent (files) {
+    // You can only create torrents from the home screen.
+    if (this.state.location.url() !== 'home') {
+      return dispatch('error', 'Please go back to the torrent list before creating a new torrent.')
+    }
+
     // Files will either be an array of file objects, which we can send directly
     // to the create-torrent screen
     if (files.length === 0 || typeof files[0] !== 'string') {
       this.state.location.go({
         url: 'create-torrent',
-        files: files
+        files: files,
+        setup: (cb) => {
+          this.state.window.title = 'Create New Torrent'
+          cb(null)
+        }
       })
       return
     }
@@ -55,39 +64,43 @@ 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++
     ipcRenderer.send('wt-create-torrent', torrentKey, options)
-    state.location.backToFirst(function () {
-      state.location.clearForward('create-torrent')
-    })
+    state.location.cancel()
   }
 
   // Starts downloading and/or seeding a given torrentSummary.
-  startTorrentingSummary (torrentSummary) {
-    var s = torrentSummary
+  startTorrentingSummary (torrentKey) {
+    var s = TorrentSummary.getByKey(this.state, torrentKey)
+    if (!s) throw new Error('Missing key: ' + torrentKey)
 
-    // Backward compatibility for config files save before we had torrentKey
-    if (!s.torrentKey) s.torrentKey = this.state.nextTorrentKey++
+    // New torrent: give it a path
+    if (!s.path) {
+      // Use Downloads folder by default
+      s.path = this.state.saved.prefs.downloadPath
+      return start()
+    }
 
-    // Use Downloads folder by default
-    if (!s.path) s.path = this.state.saved.prefs.downloadPath
+    // Existing torrent: check that the path is still there
+    fs.stat(TorrentSummary.getFileOrFolder(s), function (err) {
+      if (err) {
+        s.error = 'path-missing'
+        return
+      }
+      start()
+    })
 
-    ipcRenderer.send('wt-start-torrenting',
-                      s.torrentKey,
-                      TorrentSummary.getTorrentID(s),
-                      s.path,
-                      s.fileModtimes,
-                      s.selections)
+    function start () {
+      ipcRenderer.send('wt-start-torrenting',
+        s.torrentKey,
+        TorrentSummary.getTorrentID(s),
+        s.path,
+        s.fileModtimes,
+        s.selections)
+    }
   }
 
   // TODO: use torrentKey, not infoHash
@@ -95,7 +108,7 @@ module.exports = class TorrentListController {
     var torrentSummary = TorrentSummary.getByKey(this.state, infoHash)
     if (torrentSummary.status === 'paused') {
       torrentSummary.status = 'new'
-      this.startTorrentingSummary(torrentSummary)
+      this.startTorrentingSummary(torrentSummary.torrentKey)
       sound.play('ENABLE')
     } else {
       torrentSummary.status = 'paused'
@@ -252,7 +265,7 @@ function deleteFile (path) {
 // Delete all files in a torrent
 function moveItemToTrash (torrentSummary) {
   var filePath = TorrentSummary.getFileOrFolder(torrentSummary)
-  ipcRenderer.send('moveItemToTrash', filePath)
+  if (filePath) ipcRenderer.send('moveItemToTrash', filePath)
 }
 
 function showItemInFolder (torrentSummary) {
@@ -271,6 +284,7 @@ function saveTorrentFileAs (torrentSummary) {
     ]
   }
   electron.remote.dialog.showSaveDialog(electron.remote.getCurrentWindow(), opts, function (savePath) {
+    if (!savePath) return // They clicked Cancel
     var torrentPath = TorrentSummary.getTorrentPath(torrentSummary)
     fs.readFile(torrentPath, function (err, torrentFile) {
       if (err) return dispatch('error', err)

src/renderer/lib/cast.js

@@ -396,7 +396,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()
 }
 

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
@@ -25,13 +27,19 @@ function run (state) {
     migrate_0_7_2(state.saved)
   }
 
+  if (semver.lt(version, '0.11.0')) {
+    migrate_0_11_0(state.saved)
+  }
+
+  if (semver.lt(version, '0.12.0')) {
+    migrate_0_12_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')
 
@@ -46,7 +54,6 @@ function migrate_0_7_0 (saved) {
     // * Finally, now we're getting rid of torrentPath altogether
     var src, dst
     if (ts.torrentPath) {
-      console.log('replacing torrentPath %s', ts.torrentPath)
       if (path.isAbsolute(ts.torrentPath) || ts.torrentPath.startsWith('..')) {
         src = ts.torrentPath
       } else {
@@ -63,7 +70,6 @@ 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)
       src = path.isAbsolute(ts.posterURL)
         ? ts.posterURL
@@ -87,9 +93,45 @@ 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
     }
   }
 }
+
+function migrate_0_11_0 (saved) {
+  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
+  var defaultTorrentFiles = [
+    '6a9759bffd5c0af65319979fb7832189f4f3c35d.torrent',
+    '88594aaacbde40ef3e2510c47374ec0aa396c08e.torrent',
+    '6a02592d2bbc069628cd5ed8a54f88ee06ac0ba5.torrent',
+    '02767050e0be2fd4db9a2ad6c12416ac806ed6ed.torrent',
+    '3ba219a8634bf7bae3d848192b2da75ae995589d.torrent'
+  ]
+  saved.torrents.forEach(function (torrentSummary) {
+    if (!defaultTorrentFiles.includes(torrentSummary.torrentFileName)) return
+    var fileOrFolder = TorrentSummary.getFileOrFolder(torrentSummary)
+    if (!fileOrFolder) return
+    try {
+      fs.statSync(fileOrFolder)
+    } catch (e) {
+      // Default torrent with "missing path" error. Clear path.
+      delete torrentSummary.path
+    }
+  })
+}

src/renderer/lib/state.js

@@ -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 } */
@@ -100,7 +104,10 @@ function setupSavedState (cb) {
 
   var 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 */
@@ -200,6 +207,9 @@ function save (state, cb) {
         if (key === 'playStatus') {
           continue // Don't save whether a torrent is playing / pending
         }
+        if (key === 'error') {
+          continue // Don't save error states
+        }
         torrent[key] = x[key]
       }
       return torrent

src/renderer/lib/telemetry.js

@@ -24,6 +24,7 @@ function init (state) {
   }
 
   var 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,
@@ -115,28 +119,60 @@ function getApproxNumTorrents (state) {
 }
 
 // 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
+  var message
+  var stack = ''
+  if (e.message) {
+    // err is either an Error or a plain object {message, stack}
+    message = e.message
+    stack = e.stack
+  } 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 {
-    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
+    }
   }
 
+  // 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
+  if (stack && typeof stack === 'string') stack = stack.replace(/\(.*app.asar/g, '(...')
+  else if (stack) stack = 'Unexpected stack: ' + stack
+
   // 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*
+  var 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) {
+  var 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

src/renderer/lib/torrent-player.js

@@ -37,7 +37,8 @@ function isAudio (file) {
     '.ac3',
     '.mp3',
     '.ogg',
-    '.wav'
+    '.wav',
+    '.m4a'
   ].includes(getFileExtension(file))
 }
 

src/renderer/lib/torrent-summary.js

@@ -52,5 +52,6 @@ function getByKey (state, torrentKey) {
 // module. Store root folder explicitly to avoid hacky path processing below.
 function getFileOrFolder (torrentSummary) {
   var 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,16 +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 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')
@@ -77,17 +82,20 @@ function onState (err, _state) {
   // Restart everything we were torrenting last time the app ran
   resumeTorrents()
 
+  // Calling update() updates the UI given the current state
+  // Do this at least once a second to give every file in every torrentSummary
+  // a progress bar and to keep the cursor in sync when playing a video
+  setInterval(update, 1000)
+  app = ReactDOM.render(<App state={state} />, document.querySelector('#body'))
+
   // Lazy-load other stuff, like the AppleTV module, later to keep startup fast
   window.setTimeout(delayedInit, config.DELAYED_INIT)
 
   // Listen for messages from the main process
   setupIpc()
 
-  // Calling update() updates the UI given the current state
-  // Do this at least once a second to give every file in every torrentSummary
-  // a progress bar and to keep the cursor in sync when playing a video
-  setInterval(update, 1000)
-  app = ReactDOM.render(<App state={state} />, document.querySelector('#body'))
+  // Warn if the download dir is gone, eg b/c an external drive is unplugged
+  checkDownloadPath()
 
   // OS integrations:
   // ...drag and drop files/text to start torrenting or seeding
@@ -108,7 +116,8 @@ function onState (err, _state) {
 
   // Log uncaught JS errors
   window.addEventListener('error',
-    (e) => telemetry.logUncaughtError('window', e.error || e.target), true)
+    (e) => telemetry.logUncaughtError('window', e),
+    true /* capture */)
 
   // Done! Ideally we want to get here < 500ms after the user clicks the app
   sound.play('STARTUP')
@@ -149,7 +158,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)
   }
@@ -167,7 +176,6 @@ 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),
@@ -175,8 +183,7 @@ const dispatchHandlers = {
   'deleteTorrent': (infoHash, deleteData) => controllers.torrentList.deleteTorrent(infoHash, deleteData),
   'toggleSelectTorrent': (infoHash) => controllers.torrentList.toggleSelectTorrent(infoHash),
   'openTorrentContextMenu': (infoHash) => controllers.torrentList.openTorrentContextMenu(infoHash),
-  'startTorrentingSummary': (torrentSummary) =>
-    controllers.torrentList.startTorrentingSummary(torrentSummary),
+  'startTorrentingSummary': (torrentKey) => controllers.torrentList.startTorrentingSummary(torrentKey),
 
   // Playback
   'playFile': (infoHash, index) => controllers.playback.playFile(infoHash, index),
@@ -195,14 +202,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),
@@ -212,6 +219,7 @@ const dispatchHandlers = {
   // Preferences screen
   'preferences': () => controllers.prefs.show(),
   'updatePreferences': (key, value) => controllers.prefs.update(key, value),
+  'checkDownloadPath': checkDownloadPath,
 
   // Update (check for new versions on Linux, where there's no auto updater)
   'updateAvailable': (version) => controllers.update.updateAvailable(version),
@@ -223,6 +231,7 @@ const dispatchHandlers = {
   'escapeBack': escapeBack,
   'back': () => state.location.back(),
   'forward': () => state.location.forward(),
+  'cancel': () => state.location.cancel(),
 
   // Controlling the window
   'setDimensions': setDimensions,
@@ -312,8 +321,14 @@ function escapeBack () {
 // Starts all torrents that aren't paused on program startup
 function resumeTorrents () {
   state.saved.torrents
-    .filter((torrentSummary) => torrentSummary.status !== 'paused')
-    .forEach((torrentSummary) => controllers.torrentList.startTorrentingSummary(torrentSummary))
+    .map((torrentSummary) => {
+      // Torrent keys are ephemeral, reassigned each time the app runs.
+      // On startup, give all torrents a key, even the ones that are paused.
+      torrentSummary.torrentKey = state.nextTorrentKey++
+      return torrentSummary
+    })
+    .filter((s) => s.status !== 'paused')
+    .forEach((s) => controllers.torrentList.startTorrentingSummary(s.torrentKey))
 }
 
 // Set window dimensions to match video dimensions or fill the screen
@@ -351,7 +366,7 @@ function setDimensions (dimensions) {
   )
 
   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
 }
 
@@ -360,25 +375,25 @@ function setDimensions (dimensions) {
 function onOpen (files) {
   if (!Array.isArray(files)) files = [ files ]
 
-  if (state.modal) {
+  var url = state.location.url()
+  var allTorrents = files.every(TorrentPlayer.isTorrent)
+  var allSubtitles = files.every(controllers.subtitles.isSubtitle)
+
+  if (allTorrents) {
+    // Drop torrents onto the app: go to home screen, add torrents, no matter what
+    dispatch('backToList')
+    // All .torrent files? Add them.
+    files.forEach((file) => controllers.torrentList.addTorrent(file))
+  } else if (url === 'player' && allSubtitles) {
+    // Drop subtitles onto a playing video: add subtitles
+    controllers.subtitles.addSubtitles(files, true)
+  } else if (url === 'home') {
+    // Drop files onto home screen: show Create Torrent
     state.modal = null
-  }
-
-  var subtitles = files.filter(controllers.subtitles.isSubtitle)
-
-  if (state.location.url() === 'home' || subtitles.length === 0) {
-    if (files.every(TorrentPlayer.isTorrent)) {
-      if (state.location.url() !== 'home') {
-        dispatch('backToList')
-      }
-      // All .torrent files? Add them.
-      files.forEach((file) => controllers.torrentList.addTorrent(file))
-    } else {
-      // Show the Create Torrent screen. Let's seed those files.
-      controllers.torrentList.showCreateTorrent(files)
-    }
-  } else if (state.location.url() === 'player') {
-    controllers.subtitles.addSubtitles(subtitles, true)
+    controllers.torrentList.showCreateTorrent(files)
+  } else {
+    // Drop files onto any other screen: show error
+    return onError('Please go back to the torrent list before creating a new torrent.')
   }
 
   update()
@@ -432,3 +447,14 @@ function onFullscreenChanged (e, isFullScreen) {
 
   update()
 }
+
+function checkDownloadPath () {
+  fs.stat(state.saved.prefs.downloadPath, function (err, stat) {
+    if (err) {
+      state.downloadPathStatus = 'missing'
+      return console.error(err)
+    }
+    if (stat.isDirectory()) state.downloadPathStatus = 'ok'
+    else state.downloadPathStatus = 'missing'
+  })
+}

src/renderer/pages/App.js

@@ -1,30 +1,39 @@
+const colors = require('material-ui/styles/colors')
 const React = require('react')
 
-const Header = require('./header')
+const darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme').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'),
-  'player': require('./player'),
-  'create-torrent': require('./create-torrent'),
-  'preferences': require('./preferences')
+  'home': require('./TorrentListPage'),
+  'player': require('./PlayerPage'),
+  'create-torrent': require('./CreateTorrentPage'),
+  'preferences': require('./PreferencesPage')
 }
 
 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')
+  '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')
 }
 
-module.exports = class App extends React.Component {
-
-  constructor (props) {
-    super(props)
-    this.state = props.state
-  }
+darkBaseTheme.fontFamily = process.platform === 'win32'
+  ? '"Segoe UI", sans-serif'
+  : 'BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif'
+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 () {
-    var state = this.state
+    var state = this.props.state
 
     // Hide player controls while playing video, if the mouse stays still for a while
     // Never hide the controls when:
@@ -47,20 +56,23 @@ module.exports = class App extends React.Component {
     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>
+      <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 () {
+    var state = this.props.state
     var now = new Date().getTime()
-    var recentErrors = this.state.errors.filter((x) => now - x.time < 5000)
+    var recentErrors = state.errors.filter((x) => now - x.time < 5000)
     var hasErrors = recentErrors.length > 0
 
     var errorElems = recentErrors.map(function (error, i) {
@@ -76,12 +88,12 @@ module.exports = class App extends React.Component {
   }
 
   getModal () {
-    var state = this.state
+    var state = this.props.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>
+        <div key='modal-background' className='modal-background' />
         <div key='modal-content' className='modal-content'>
           <ModalContents state={state} />
         </div>
@@ -90,8 +102,10 @@ module.exports = class App extends React.Component {
   }
 
   getView () {
-    var state = this.state
+    var state = this.props.state
     var View = Views[state.location.url()]
     return (<View state={state} />)
   }
 }
+
+module.exports = App

src/renderer/pages/CreateTorrentPage.js

@@ -0,0 +1,171 @@
+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 CreateTorrentErrorPage = require('../components/create-torrent-error-page')
+const Heading = require('../components/Heading')
+const ShowMore = require('../components/ShowMore')
+
+class CreateTorrentPage extends React.Component {
+  constructor (props) {
+    super(props)
+
+    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')
+
+    this.state = {
+      basePath,
+      defaultName,
+      fileElems,
+      torrentInfo,
+      trackers
+    }
+  }
+
+  handleSubmit () {
+    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: this.state.defaultName,
+      path: this.state.basePath,
+      files: this.state.files,
+      announce: announceList,
+      private: isPrivate,
+      comment: comment
+    }
+    dispatch('createTorrent', options)
+  }
+
+  render () {
+    return (
+      <div className='create-torrent'>
+        <Heading level={1}>
+          Create torrent "{this.state.defaultName}"
+        </Heading>
+        <div className='torrent-info'>
+          {this.state.torrentInfo}
+        </div>
+        <div className='torrent-attribute'>
+          <label>Path:</label>
+          <div className='torrent-attribute'>{this.state.pathPrefix}</div>
+        </div>
+        <ShowMore
+          style={{
+            marginBottom: 10
+          }}
+          hideLabel='Hide advanced settings...'
+          showLabel='Show advanced settings...'
+        >
+          <div key='advanced' className='create-torrent-advanced'>
+            <div key='private' className='torrent-attribute'>
+              <label>Private:</label>
+              <input type='checkbox' className='torrent-is-private' value='torrent-is-private' />
+            </div>
+            <Heading level={2}>Trackers:</Heading>
+            <TextField
+              className='torrent-trackers'
+              hintText='Tracker'
+              multiLine
+              rows={2}
+              rowsMax={10}
+              defaultValue={this.state.trackers}
+            />
+            <div key='comment' className='torrent-attribute'>
+              <label>Comment:</label>
+              <textarea className='torrent-attribute torrent-comment' />
+            </div>
+            <div key='files' className='torrent-attribute'>
+              <label>Files:</label>
+              <div>{this.state.fileElems}</div>
+            </div>
+          </div>
+        </ShowMore>
+        <div className='float-right'>
+          <FlatButton
+            label='Cancel'
+            style={{
+              marginRight: 10
+            }}
+            onClick={dispatcher('cancel')}
+          />
+          <RaisedButton
+            label='Create Torrent'
+            primary
+            onClick={this.handleSubmit}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+// 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)
+}
+
+module.exports = CreateTorrentPage

src/renderer/pages/PlayerPage.js

@@ -2,6 +2,7 @@ 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 {dispatch, dispatcher} = require('../lib/dispatcher')
@@ -13,13 +14,14 @@ module.exports = class Player extends React.Component {
     // If the video is on Chromecast or Airplay, show a title screen instead
     var state = this.props.state
     var showVideo = state.playing.location === 'local'
+    var 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>
     )
   }
@@ -232,7 +234,7 @@ function renderAudioMetadata (state) {
   }
 
   // Align the title with the other info, if available. Otherwise, center title
-  var emptyLabel = (<label></label>)
+  var emptyLabel = (<label />)
   elems.unshift((
     <div key='title' className='audio-title'>
       {elems.length ? emptyLabel : undefined}{title}
@@ -281,9 +283,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
+    var playerPath = state.saved.prefs.externalPlayerPath
+    var 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'
@@ -380,16 +385,16 @@ function renderPlayerControls (state) {
       <div
         key='cursor'
         className='playback-cursor'
-        style={playbackCursorStyle}>
-      </div>
+        style={playbackCursorStyle}
+      />
       <div
         key='scrub-bar'
         className='scrub-bar'
         draggable='true'
         onDragStart={handleDragStart}
         onClick={handleScrub}
-        onDrag={handleScrub}>
-      </div>
+        onDrag={handleScrub}
+      />
     </div>,
 
     <i
@@ -593,7 +598,7 @@ function renderLoadingBar (state) {
       width: (100 * part.count / fileProg.numPieces) + '%'
     }
 
-    return (<div key={i} className='loading-bar-part' style={style}></div>)
+    return (<div key={i} className='loading-bar-part' style={style} />)
   })
   return (<div key='loading-bar' className='loading-bar'>{loadingBarElems}</div>)
 }
@@ -603,7 +608,7 @@ function cssBackgroundImagePoster (state) {
   var torrentSummary = state.getPlayingTorrentSummary()
   var posterPath = TorrentSummary.getPosterPath(torrentSummary)
   if (!posterPath) return ''
-  return cssBackgroundImageDarkGradient() + `, url(${posterPath})`
+  return cssBackgroundImageDarkGradient() + `, url('${posterPath}')`
 }
 
 function cssBackgroundImageDarkGradient () {

src/renderer/pages/PreferencesPage.js

@@ -0,0 +1,177 @@
+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/PathSelector')
+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 () {
+    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 () {
+    window.alert('TODO')
+    // var isFileHandler = state.unsaved.prefs.isFileHandler
+    // dispatch('updatePreferences', 'isFileHandler', !isFileHandler)
+  }
+
+  render () {
+    return (
+      <div
+        style={{
+          color: colors.grey400,
+          marginLeft: 25,
+          marginRight: 25
+        }}
+      >
+        <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 () {
+    return (
+      <div
+        style={{
+          marginBottom: 25,
+          marginTop: 25
+        }}
+      >
+        <Heading level={2}>{this.props.title}</Heading>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+class Preference extends React.Component {
+  render () {
+    return (
+      <div
+        style={{
+          marginBottom: 10
+        }}
+      >
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+module.exports = PreferencesPage

src/renderer/pages/TorrentListPage.js

@@ -8,16 +8,32 @@ const {dispatcher} = require('../lib/dispatcher')
 module.exports = class TorrentList extends React.Component {
   render () {
     var state = this.props.state
-    var torrentRows = state.saved.torrents.map(
+
+    var contents = []
+    if (state.downloadPathStatus === 'missing') {
+      contents.push(
+        <div key='torrent-missing-path'>
+          <p>Download path missing: {state.saved.prefs.downloadPath}</p>
+          <p>Check that all drives are connected?</p>
+          <p>Alternatively, choose a new download path
+            in <a href='#' onClick={dispatcher('preferences')}>Preferences</a>
+          </p>
+        </div>
+      )
+    }
+    var torrentElems = state.saved.torrents.map(
       (torrentSummary) => this.renderTorrent(torrentSummary)
     )
+    contents.push(...torrentElems)
+    contents.push(
+      <div key='torrent-placeholder' className='torrent-placeholder'>
+        <span className='ellipsis'>Drop a torrent file here or paste a magnet link</span>
+      </div>
+    )
 
     return (
       <div key='torrent-list' className='torrent-list'>
-        {torrentRows}
-        <div key='torrent-placeholder' className='torrent-placeholder'>
-          <span className='ellipsis'>Drop a torrent file here or paste a magnet link</span>
-        </div>
+        {contents}
       </div>
     )
   }
@@ -44,6 +60,7 @@ module.exports = class TorrentList extends React.Component {
     if (torrentSummary.playStatus) classes.push(torrentSummary.playStatus)
     if (isSelected) classes.push('selected')
     if (!infoHash) classes.push('disabled')
+    if (!torrentSummary.torrentKey) throw new Error('Missing torrentKey')
     return (
       <div
         key={torrentSummary.torrentKey}
@@ -67,8 +84,14 @@ module.exports = class TorrentList extends React.Component {
 
     // If it's downloading/seeding then show progress info
     var prog = torrentSummary.progress
-    if (torrentSummary.status !== 'paused' && prog) {
-      elements.push((
+    if (torrentSummary.error) {
+      elements.push(
+        <div key='progress-info' className='ellipsis'>
+          {getErrorMessage(torrentSummary)}
+        </div>
+      )
+    } else if (torrentSummary.status !== 'paused' && prog) {
+      elements.push(
         <div key='progress-info' className='ellipsis'>
           {renderPercentProgress()}
           {renderTotalProgress()}
@@ -77,7 +100,7 @@ module.exports = class TorrentList extends React.Component {
           {renderUploadSpeed()}
           {renderEta()}
         </div>
-      ))
+      )
     }
 
     return (<div key='metadata' className='metadata'>{elements}</div>)
@@ -161,43 +184,50 @@ 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
-    if (TorrentPlayer.isPlayableTorrentSummary(torrentSummary)) {
-      playButton = (
+    // Only show the play/dowload buttons for torrents that contain playable media
+    var playButton, downloadButton, positionElem
+    if (!torrentSummary.error) {
+      downloadButton = (
         <i
-          key='play-button'
-          title={playTooltip}
-          className={'button-round icon play ' + playClass}
-          onClick={dispatcher('playFile', infoHash)}>
-          {playIcon}
+          key='download-button'
+          className={'button-round icon download ' + torrentSummary.status}
+          title={downloadTooltip}
+          onClick={dispatcher('toggleTorrent', infoHash)}
+        >
+          {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:
+      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'
+      }
+
+      if (TorrentPlayer.isPlayableTorrentSummary(torrentSummary)) {
+        playButton = (
+          <i
+            key='play-button'
+            title={playTooltip}
+            className={'button-round icon play ' + playClass}
+            onClick={dispatcher('playFile', infoHash)}
+          >
+            {playIcon}
+          </i>
+        )
+      }
     }
 
     return (
       <div key='buttons' className='buttons'>
         {positionElem}
         {playButton}
-        <i
-          key='download-button'
-          className={'button-round icon download ' + torrentSummary.status}
-          title={downloadTooltip}
-          onClick={dispatcher('toggleTorrent', infoHash)}>
-          {downloadIcon}
-        </i>
+        {downloadButton}
         <i
           key='delete-button'
           className='icon delete'
@@ -212,12 +242,26 @@ module.exports = class TorrentList extends React.Component {
   // Show files, per-file download status and play buttons, and so on
   renderTorrentDetails (torrentSummary) {
     var filesElement
-    if (!torrentSummary.files) {
-      // We don't know what files this torrent contains
-      var message = torrentSummary.status === 'paused'
-        ? 'Failed to load torrent info. Click the download button to try again...'
-        : 'Downloading torrent info...'
-      filesElement = (<div key='files' className='files warning'>{message}</div>)
+    if (torrentSummary.error || !torrentSummary.files) {
+      var message = ''
+      if (torrentSummary.error === 'path-missing') {
+        // Special case error: this torrent's download dir or file is missing
+        message = 'Missing path: ' + TorrentSummary.getFileOrFolder(torrentSummary)
+      } else if (torrentSummary.error) {
+        // General error for this torrent: just show the message
+        message = torrentSummary.error.message || torrentSummary.error
+      } else if (torrentSummary.status === 'paused') {
+        // No file info, no infohash, and we're not trying to download from the DHT
+        message = 'Failed to load torrent info. Click the download button to try again...'
+      } else {
+        // No file info, no infohash, trying to load from the DHT
+        message = 'Downloading torrent info...'
+      }
+      filesElement = (
+        <div key='files' className='files warning'>
+          {message}
+        </div>
+      )
     } else {
       // We do know the files. List them and show download stats for each one
       var fileRows = torrentSummary.files
@@ -279,8 +323,11 @@ module.exports = class TorrentList extends React.Component {
       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
     }
+    // TODO: add a css 'disabled' class to indicate that a file cannot be opened/streamed
     var rowClass = ''
     if (!isSelected) rowClass = 'disabled' // File deselected, not being torrented
     if (!isDone && !isPlayable) rowClass = 'disabled' // Can't open yet, can't stream
@@ -316,15 +363,28 @@ module.exports = class TorrentList extends React.Component {
       <div key='radial-progress' className={'radial-progress ' + cssClass}>
         <div key='circle' className='circle'>
           <div key='mask-full' className='mask full' style={transformFill}>
-            <div key='fill' className='fill' style={transformFill}></div>
+            <div key='fill' className='fill' style={transformFill} />
           </div>
           <div key='mask-half' className='mask half'>
-            <div key='fill' className='fill' style={transformFill}></div>
-            <div key='fill-fix' className='fill fix' style={transformFix}></div>
+            <div key='fill' className='fill' style={transformFill} />
+            <div key='fill-fix' className='fill fix' style={transformFix} />
           </div>
         </div>
-        <div key='inset' className='inset'></div>
+        <div key='inset' className='inset' />
       </div>
     )
   }
 }
+
+function getErrorMessage (torrentSummary) {
+  var err = torrentSummary.error
+  if (err === 'path-missing') {
+    return (
+      <span>
+        Path missing.<br />
+        Fix and restart the app, or delete the torrent.
+      </span>
+    )
+  }
+  return 'Error'
+}

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'></textarea>
-          </div>
-          <div key='trackers' className='torrent-attribute'>
-            <label>Trackers:</label>
-            <textarea className='torrent-attribute torrent-trackers' value={trackers}></textarea>
-          </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('back')}>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/preferences.js

@@ -1,105 +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)}
-      </div>
-    )
-  }
-}
-
-function renderGeneralSection (state) {
-  return renderSection({
-    key: 'general',
-    title: 'General',
-    description: '',
-    icon: 'settings'
-  }, [
-    renderDownloadDirSelector(state)
-  ])
-}
-
-function renderDownloadDirSelector (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) {
-    setStateValue('downloadPath', filePath)
-  })
-}
-
-// 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>
-  )
-}
-
-// 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) {
-  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'>
-          <input type='text' className='file-picker-text'
-            id={definition.property}
-            disabled='disabled'
-            value={value} />
-          <button className='btn' onClick={handleClick}>
-            <i className='icon'>folder_open</i>
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-  function handleClick () {
-    dialog.showOpenDialog(remote.getCurrentWindow(), definition.options, function (filenames) {
-      if (!Array.isArray(filenames)) return
-      callback(filenames[0])
-    })
-  }
-}
-
-function setStateValue (property, value) {
-  dispatch('updatePreferences', property, value)
-}

src/renderer/webtorrent.js

@@ -2,11 +2,11 @@
 // process from the main window.
 console.time('init')
 
+var crypto = require('crypto')
 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')
@@ -56,7 +56,7 @@ var 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))
+  peerId: Buffer.from(VERSION_PREFIX + crypto.randomBytes(6).toString('hex'))
 })
 
 // WebTorrent-to-HTTP streaming sever
@@ -83,6 +83,8 @@ function init () {
     generateTorrentPoster(torrentKey))
   ipc.on('wt-get-audio-metadata', (e, infoHash, index) =>
     getAudioMetadata(infoHash, index))
+  ipc.on('wt-get-mkv-subtitles', (e, infoHash, index) =>
+    getMKVSubtitles(infoHash, index))
   ipc.on('wt-start-server', (e, infoHash, index) =>
     startServer(infoHash, index))
   ipc.on('wt-stop-server', (e) =>
@@ -97,6 +99,7 @@ function init () {
     true)
 
   setInterval(updateTorrentProgress, 1000)
+  console.timeEnd('init')
 }
 
 // Starts a given TorrentID, which can be an infohash, magnet URI, etc. Returns WebTorrent object
@@ -341,6 +344,32 @@ function getAudioMetadata (infoHash, index) {
   })
 }
 
+function getMKVSubtitles (infoHash, index) {
+  var torrent = client.get(infoHash)
+  var file = torrent.files[index]
+
+  var MatroskaSubtitles = require('matroska-subtitles')
+  var subtitleParser = new MatroskaSubtitles()
+
+  var textTracks = new Map()
+
+  subtitleParser.once('tracks', function (tracks) {
+    tracks.forEach(function (track) {
+      textTracks.set(track.number, { track: track, subtitles: [] })
+    })
+  })
+
+  subtitleParser.on('subtitle', function (subtitle, trackNumber) {
+    textTracks.get(trackNumber).subtitles.push(subtitle)
+  })
+
+  subtitleParser.on('finish', function () {
+    ipc.send('wt-mkv-subtitles', Array.from(textTracks.values()))
+  })
+
+  file.createReadStream().pipe(subtitleParser)
+}
+
 function selectFiles (torrentOrInfoHash, selections) {
   // Get the torrent object
   var torrent

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 {
@@ -136,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;
@@ -239,7 +221,7 @@ table {
   overflow-x: hidden;
   overflow-y: overlay;
   flex: 1 1 auto;
-  margin-top: 37px;
+  margin-top: 38px;
 }
 
 .app.view-player .content {
@@ -328,17 +310,8 @@ table {
   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,
@@ -361,64 +334,6 @@ 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
- */
-
-input[type='text'] {
-  background: transparent;
-  width: 300px;
-  padding: 6px;
-  border: 1px solid #bbb;
-  border-radius: 3px;
-  outline: none;
-}
-
 /*
  * TORRENT LIST
  */
@@ -430,7 +345,7 @@ input[type='text'] {
   background-position: center;
   transition: -webkit-filter 0.1s ease-out;
   position: relative;
-  animation: fadein .4s;
+  animation: fadein 0.5s;
 }
 
 .torrent,
@@ -551,6 +466,19 @@ input[type='text'] {
   line-height: 1.5em;
 }
 
+/*
+ * TORRENT LIST: ERRORS
+ */
+
+.torrent-list p {
+  margin: 10px 20px;
+}
+
+.torrent-list a {
+  color: #99f;
+  text-decoration: none;
+}
+
 /*
  * TORRENT LIST: DRAG-DROP TARGET
  */
@@ -900,173 +828,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 .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;
-}
-
-
 /*
  * MEDIA OVERLAY / AUDIO DETAILS
  */
@@ -1225,3 +986,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>