0.13.1

* use depcheck to replace our own check-dependencies script

* ignore packges used in npm scripts

.gitignore

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

.nodemonignore

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

.travis.yml

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

AUTHORS.md

@@ -2,29 +2,34 @@
 
 #### Ordered by first contribution.
 
-- Feross Aboukhadijeh <feross@feross.org>
-- DC <dcposch@dcpos.ch>
-- Nate Goldman <nate@ngoldman.me>
-- Chris Morris <chris@chrismorris.org>
-- Giuseppe Crinò <giuscri@gmail.com>
-- 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>
-- Diego Rodríguez Baquero <diegorbaquero@gmail.com>
-- Karlo Luis Martinez Martos <karlo.luis.m@gmail.com>
-- gabriel <furstenheim@gmail.com>
-- Rolando Guedes <rolando.guedes@3gnt.net>
-- Benjamin Tan <demoneaux@gmail.com>
-- Mathias Rasmussen <mathiasvr@gmail.com>
-- Sergey Bargamon <sergey@bargamon.ru>
-- Thomas Watson Steen <w@tson.dk>
-- anonymlol <anonymlol7@gmail.com>
-- Gediminas Petrikas <gedas18@gmail.com>
-- Adam Gotlib <gotlib.adam+dev@gmail.com>
-- Rémi Jouannet <remijouannet@gmail.com>
+- Feross Aboukhadijeh (feross@feross.org)
+- DC (dcposch@dcpos.ch)
+- Nate Goldman (nate@ngoldman.me)
+- Chris Morris (chris@chrismorris.org)
+- Giuseppe Crinò (giuscri@gmail.com)
+- Romain Beaumont (romain.rom1@gmail.com)
+- Dan Flettre (fletd01@yahoo.com)
+- Liam Gray (liam.r.gray@gmail.com)
+- Rémi Jouannet (remijouannet@users.noreply.github.com)
+- Evan Miller (miller.evan815@gmail.com)
+- Alex (alxmorais8@msn.com)
+- Diego Rodríguez Baquero (diegorbaquero@gmail.com)
+- Karlo Luis Martinez Martos (karlo.luis.m@gmail.com)
+- gabriel (furstenheim@gmail.com)
+- Rolando Guedes (rolando.guedes@3gnt.net)
+- Benjamin Tan (demoneaux@gmail.com)
+- Mathias Rasmussen (mathiasvr@gmail.com)
+- Sergey Bargamon (sergey@bargamon.ru)
+- Thomas Watson Steen (w@tson.dk)
+- anonymlol (anonymlol7@gmail.com)
+- Gediminas Petrikas (gedas18@gmail.com)
+- Alberto Miranda (codealchemist@gmail.com)
+- Adam Gotlib (gotlib.adam+dev@gmail.com)
+- Rémi Jouannet (remijouannet@gmail.com)
+- Andrea Tupini (tupini07@gmail.com)
+- grunjol (grunjol@gmail.com)
+- Jason Kurian (jasonk92@gmail.com)
+- Vamsi Krishna Avula (vamsi_ism@outlook.com)
+- Noam Okman (noamokman@gmail.com)
 
 #### Generated by bin/update-authors.sh.

CHANGELOG.md

@@ -1,17 +1,103 @@
 # WebTorrent Desktop Version History
 
+## v0.13.0 - 2016-08-31
+
+### Added
+- Torrent progress bar
+- Support .m4a audio
+- Better telemetry: log error versions, report more types of errors
+
+### Changed
+- New look - Material UI. Rewrote Create Torrent and Preferences pages.
+
+### Fixed
+- Fixed telemetry [object Object] and [object HTMLMediaElement] bugs
+- Don't render player controls when playing externally, eg in VLC
+- Don't play notification sounds during media playback
+
+## v0.12.0 - 2016-08-23
+
+### Added
+
+- Custom external media player
+- Linux: add system-wide launcher and icons for Debian, including Ubuntu
+
+### Changed
+
+- Telemetry improvements: redact stacktraces, log app version
+
+### Fixed
+
+- Fix playback and download of default torrents ("missing path" error) (#804)
+- Fix Delete Torrent + Data for newly added magnet links
+- Fix jumpToTime error (#804)
+
+## v0.11.0 - 2016-08-19
+
+### Added
+- New Preference to "Set WebTorrent as default handler for torrents and magnet links" (#771)
+- New Preference to "Always play in VLC" (#674)
+- Check for missing default download path and torrent folders on start up (#776)
+
+### 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
+
+- Drag-and-drop magnet links (selected text) is now supported (#284)
+- Windows: Add "User Tasks" shortcuts to app icon in Start Menu (#114)
+- Linux: Show badge count for completed torrent downloads
+
+### Changed
+
+- Change WebTorrent Desktop peer ID prefix to 'WD' to distinguish from WebTorrent in the browser, 'WW' (#688)
+- Switch UI to React to improve UI rendering speed (#729)
+  - The primary bottleneck was actually `hyperx`, not `virtual-dom`.
+- Update Electron to 1.3.2 (#738) (#739) (#740) (#747) (#756)
+  - Mac 10.9: Fix the fullscreen button showing
+  - Mac 10.9: Fix window having border
+  - Mac 10.9: Fix occasional crash
+  - Mac: Update Squirrel.Mac to 0.2.1 (fixes situations in which updates would not get applied)
+  - Mac: Fix window not showing in Window menu
+  - Mac: Fix context menu always choosing first item by default
+  - Linux: Fix startup crashes (some Linux distros)
+  - Linux: Fix menubar not hiding after entering fullscreen (some Linux distros)
+- Improved location history (back/forward buttons) to fix rare exceptions (#687) (#748)
+  - Location history abstraction released independently as [`location-history`](https://www.npmjs.com/package/location-history)
+
+### Fixed
+
+- When streaming to VLC, set VLC window title to torrent file name (#746)
+- Fix "Cannot read property 'numPiecesPresent' of undefined" exception (#695)
+- Fix rare case where config file could not be completely written (#733)
+
 ## v0.9.0 - 2016-07-20
 
 ### Added
+
 - Save selected subtitles
 - Ask for confirmation before deleting torrents
 - Support Debian Jessie
 
 ### Changed
+
 - Only send telemetry in production
 - Clean up the code. Split main.js, refactor lots of things
 
 ### Fixed
+
 - Fix state.playing.jumpToTime behavior
 - Remove torrent file and poster image when deleting a torrent
 

CONTRIBUTING.md

@@ -73,3 +73,23 @@ By making a contribution to this project, I certify that:
   record of the contribution (including all personal information I submit with it,
   including my sign-off) is maintained indefinitely and may be redistributed consistent
   with this project or the open source license(s) involved.
+
+## Smoke Tests
+
+Before a release, check that the following basic use cases work correctly:
+
+1. Click "Play" to stream a built-in torrent (e.g. Sintel)
+  - Ensure that seeking to undownloaded region works and plays immediately.
+  - Ensure that sintel.mp4 gets downloaded to `~/Downloads`.
+
+2. Check that the auto-updater works
+  - Open the console and check for the line "No update available" to indicate
+
+3. Add a new .torrent file via drag-and-drop.
+  - Ensure that it gets added to the list and starts downloading
+
+4. Remove a torrent from the client
+  - Ensure that the file is removed from `~/Downloads`
+
+5. Create and seed a new a torrent via drag-and-drop.
+  - Ensure that the torrent gets created and seeding begins.

README.md

@@ -7,7 +7,7 @@
   <br>
 </h1>
 
-<h4 align="center">The streaming torrent client. For OS X, 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,31 +17,48 @@
 
 ## 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-main.png" width="562" height="630" alt="screenshot" 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
 
-Builds app binaries for OS X, Linux, and Windows.
+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.
 
 ```
 $ npm run package
@@ -50,30 +67,34 @@ $ 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).
 
 The following optional arguments are available:
 
-- `--sign` - Sign the application (OS X, Windows)
+- `--sign` - Sign the application (Mac, Windows)
 - `--package=[type]` - Package single output type.
    - `deb` - Debian package
    - `zip` - Linux zip file
-   - `dmg` - OS X disk image
+   - `dmg` - Mac disk image
    - `exe` - Windows installer
    - `portable` - Windows portable app
    - `all` - All platforms (default)
 
-Note: Even with the `--package` option, the auto-update files (.nupkg for Windows, *-darwin.zip for OS X) 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 OS X, first install [XQuartz](http://www.xquartz.org/), then run:
+Note: Windows code signing only works from **Windows**, for now.
+
+Note: To package the Windows app from non-Windows platforms,
+[Wine](https://www.winehq.org/) needs to be installed. For example on Mac, first
+install [XQuartz](http://www.xquartz.org/), then run:
 
 ```
 brew install wine
@@ -81,11 +102,22 @@ brew install wine
 
 (Requires the [Homebrew](http://brew.sh/) package manager.)
 
+#### Mac build notes
+
+The Mac app can only be packaged from **macOS**.
+
+#### Linux build notes
+
+The Linux app can be packaged from **any** platform.
+
 ### Privacy
 
-WebTorrent Desktop collects some basic usage stats to help us make the app better. For example, we track how well the play button works. How often does it succeed? Time out? Show a missing codec error?
+WebTorrent Desktop collects some basic usage stats to help us make the app better.
+For example, we track how well the play button works. How often does it succeed?
+Time out? Show a missing codec error?
 
-The app never sends personally identifying information, nor does it track which swarms you join.
+The app never sends any personally identifying information, nor does it track which
+torrents you add.
 
 ### Code Style
 

bin/check-deps.js

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

bin/clean.js

@@ -10,11 +10,17 @@ var os = require('os')
 var path = require('path')
 var rimraf = require('rimraf')
 
-var config = require('../config')
-var handlers = require('../main/handlers')
+var config = require('../src/config')
+var handlers = require('../src/main/handlers')
 
+// First, remove generated files
+rimraf.sync('build/')
+rimraf.sync('dist/')
+
+// Remove any saved configuration
 rimraf.sync(config.CONFIG_PATH)
 
+// Remove any temporary files
 var tmpPath
 try {
   tmpPath = path.join(fs.statSync('/tmp') && '/tmp', 'webtorrent')

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/list-deps.sh

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

bin/open-config.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-var config = require('../config')
+var config = require('../src/config')
 var open = require('open')
 
 open(config.CONFIG_PATH)

bin/package.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 /**
- * Builds app binaries for OS X, Linux, and Windows.
+ * Builds app binaries for Mac, Linux, and Windows.
  */
 
 var cp = require('child_process')
@@ -15,10 +15,11 @@ var rimraf = require('rimraf')
 var series = require('run-series')
 var zip = require('cross-zip')
 
-var config = require('../config')
+var config = require('../src/config')
 var pkg = require('../package.json')
 
 var BUILD_NAME = config.APP_NAME + '-v' + config.APP_VERSION
+var BUILD_PATH = path.join(config.ROOT_PATH, 'build')
 var DIST_PATH = path.join(config.ROOT_PATH, 'dist')
 
 var argv = minimist(process.argv.slice(2), {
@@ -36,6 +37,12 @@ var argv = minimist(process.argv.slice(2), {
 
 function build () {
   rimraf.sync(DIST_PATH)
+  rimraf.sync(BUILD_PATH)
+
+  console.log('Babel: Building JSX...')
+  cp.execSync('npm run build', { NODE_ENV: 'production', stdio: 'inherit' })
+  console.log('Babel: Built JSX.')
+
   var platform = argv._[0]
   if (platform === 'darwin') {
     buildDarwin(printDone)
@@ -56,11 +63,11 @@ function build () {
 
 var all = {
   // The human-readable copyright line for the app. Maps to the `LegalCopyright` metadata
-  // property on Windows, and `NSHumanReadableCopyright` on OS X.
+  // property on Windows, and `NSHumanReadableCopyright` on Mac.
   'app-copyright': config.APP_COPYRIGHT,
 
   // The release version of the application. Maps to the `ProductVersion` metadata
-  // property on Windows, and `CFBundleShortVersionString` on OS X.
+  // property on Windows, and `CFBundleShortVersionString` on Mac.
   'app-version': pkg.version,
 
   // Package the application's source code into an archive, using Electron's archive
@@ -73,7 +80,7 @@ var all = {
   'asar-unpack': 'WebTorrent*',
 
   // The build version of the application. Maps to the FileVersion metadata property on
-  // Windows, and CFBundleVersion on OS X. Note: Windows requires the build version to
+  // Windows, and CFBundleVersion on Mac. Note: Windows requires the build version to
   // start with a number. We're using the version of the underlying WebTorrent library.
   'build-version': require('webtorrent/package.json').version,
 
@@ -82,7 +89,7 @@ var all = {
 
   // Pattern which specifies which files to ignore when copying files to create the
   // package(s).
-  ignore: /^\/dist|\/(appveyor.yml|\.appveyor.yml|\.github|appdmg|AUTHORS|CONTRIBUTORS|bench|benchmark|benchmark\.js|bin|bower\.json|component\.json|coverage|doc|docs|docs\.mli|dragdrop\.min\.js|example|examples|example\.html|example\.js|externs|ipaddr\.min\.js|Makefile|min|minimist|perf|rusha|simplepeer\.min\.js|simplewebsocket\.min\.js|static\/screenshot\.png|test|tests|test\.js|tests\.js|webtorrent\.min\.js|\.[^\/]*|.*\.md|.*\.markdown)$/,
+  ignore: /^\/src|^\/dist|\/(appveyor.yml|\.appveyor.yml|\.github|appdmg|AUTHORS|CONTRIBUTORS|bench|benchmark|benchmark\.js|bin|bower\.json|component\.json|coverage|doc|docs|docs\.mli|dragdrop\.min\.js|example|examples|example\.html|example\.js|externs|ipaddr\.min\.js|Makefile|min|minimist|perf|rusha|simplepeer\.min\.js|simplewebsocket\.min\.js|static\/screenshot\.png|test|tests|test\.js|tests\.js|webtorrent\.min\.js|\.[^\/]*|.*\.md|.*\.markdown)$/,
 
   // The application name.
   name: config.APP_NAME,
@@ -98,24 +105,24 @@ 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 = {
-  // Build for OS X
+  // Build for Mac
   platform: 'darwin',
 
   // Build 64 bit binaries only.
   arch: 'x64',
 
-  // The bundle identifier to use in the application's plist (OS X only).
+  // The bundle identifier to use in the application's plist (Mac only).
   'app-bundle-id': 'io.webtorrent.webtorrent',
 
   // The application category type, as shown in the Finder via "View" -> "Arrange by
-  // Application Category" when viewing the Applications directory (OS X only).
+  // Application Category" when viewing the Applications directory (Mac only).
   'app-category-type': 'public.app-category.utilities',
 
-  // The bundle identifier to use in the application helper's plist (OS X only).
+  // The bundle identifier to use in the application helper's plist (Mac only).
   'helper-bundle-id': 'io.webtorrent.webtorrent-helper',
 
   // Application icon.
@@ -171,10 +178,10 @@ build()
 function buildDarwin (cb) {
   var plist = require('plist')
 
-  console.log('OS X: Packaging electron...')
+  console.log('Mac: Packaging electron...')
   electronPackager(Object.assign({}, all, darwin), function (err, buildPath) {
     if (err) return cb(err)
-    console.log('OS X: Packaged electron. ' + buildPath)
+    console.log('Mac: Packaged electron. ' + buildPath)
 
     var appPath = path.join(buildPath[0], config.APP_NAME + '.app')
     var contentsPath = path.join(appPath, 'Contents')
@@ -261,9 +268,9 @@ function buildDarwin (cb) {
        *   - So the auto-updater (Squirrrel.Mac) can check that app updates are signed by
        *     the same author as the current version.
        *   - So users will not a see a warning about the app coming from an "Unidentified
-       *     Developer" when they open it for the first time (OS X Gatekeeper).
+       *     Developer" when they open it for the first time (Mac Gatekeeper).
        *
-       * To sign an OS X app for distribution outside the App Store, the following are
+       * To sign an Mac app for distribution outside the App Store, the following are
        * required:
        *   - Xcode
        *   - Xcode Command Line Tools (xcode-select --install)
@@ -275,10 +282,10 @@ function buildDarwin (cb) {
         verbose: true
       }
 
-      console.log('OS X: Signing app...')
+      console.log('Mac: Signing app...')
       sign(signOpts, function (err) {
         if (err) return cb(err)
-        console.log('OS X: Signed app.')
+        console.log('Mac: Signed app.')
         cb(null)
       })
     }
@@ -293,24 +300,24 @@ function buildDarwin (cb) {
 
     function packageZip () {
       // Create .zip file (used by the auto-updater)
-      console.log('OS X: Creating zip...')
+      console.log('Mac: Creating zip...')
 
       var inPath = path.join(buildPath[0], config.APP_NAME + '.app')
       var outPath = path.join(DIST_PATH, BUILD_NAME + '-darwin.zip')
       zip.zipSync(inPath, outPath)
 
-      console.log('OS X: Created zip.')
+      console.log('Mac: Created zip.')
     }
 
     function packageDmg (cb) {
-      console.log('OS X: Creating dmg...')
+      console.log('Mac: Creating dmg...')
 
       var appDmg = require('appdmg')
 
       var targetPath = path.join(DIST_PATH, BUILD_NAME + '.dmg')
       rimraf.sync(targetPath)
 
-      // Create a .dmg (OS X disk image) file, for easy user installation.
+      // Create a .dmg (Mac disk image) file, for easy user installation.
       var dmgOpts = {
         basepath: config.ROOT_PATH,
         target: targetPath,
@@ -338,7 +345,7 @@ function buildDarwin (cb) {
         if (info.type === 'step-begin') console.log(info.title + '...')
       })
       dmg.once('finish', function (info) {
-        console.log('OS X: Created dmg.')
+        console.log('Mac: Created dmg.')
         cb(null)
       })
     }
@@ -477,6 +484,11 @@ function buildLinux (cb) {
       dest: destPath,
       expand: true,
       cwd: filesPath
+    }, {
+      src: ['./**'],
+      dest: path.join('/usr', 'share'),
+      expand: true,
+      cwd: path.join(config.STATIC_PATH, 'linux', 'share')
     }], function (err) {
       if (err) return cb(err)
       console.log(`Linux: Created ${destArch} deb.`)

bin/release-_post.sh

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

bin/update-authors.sh

@@ -2,16 +2,17 @@
 
 # Update AUTHORS.md based on git history.
 
-git log --reverse --format='%aN <%aE>' | perl -we '
+git log --reverse --format='%aN (%aE)' | perl -we '
 BEGIN {
   %seen = (), @authors = ();
 }
 while (<>) {
   next if $seen{$_};
-  next if /<support\@greenkeeper.io>/;
-  next if /<ungoldman\@gmail.com>/;
-  next if /<dc\@DCs-MacBook.local>/;
-  next if /<rolandoguedes\@gmail.com>/;
+  next if /(support\@greenkeeper.io)/;
+  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 {

index.js

@@ -1 +1 @@
-require('./main')
+require('./build/main')

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))
-  })
-}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "webtorrent-desktop",
-  "description": "WebTorrent, the streaming torrent client. For OS X, Windows, and Linux.",
-  "version": "0.9.0",
+  "description": "WebTorrent, the streaming torrent client. For Mac, Windows, and Linux.",
+  "version": "0.13.1",
   "author": {
     "name": "WebTorrent, LLC",
     "email": "feross@webtorrent.io",
@@ -15,36 +15,44 @@
   },
   "dependencies": {
     "airplayer": "^2.0.0",
-    "application-config": "^0.2.1",
+    "application-config": "^1.0.0",
     "bitfield": "^1.0.2",
     "chromecasts": "^1.8.0",
     "create-torrent": "^3.24.5",
     "deep-equal": "^1.0.1",
     "dlnacasts": "^0.1.0",
-    "drag-drop": "^2.11.0",
-    "electron-prebuilt": "1.2.1",
-    "fs-extra": "^0.27.0",
-    "hyperx": "^2.0.2",
+    "drag-drop": "^2.12.1",
+    "electron": "1.3.3",
+    "fs-extra": "^0.30.0",
     "iso-639-1": "^1.2.1",
     "languagedetect": "^1.1.1",
-    "main-loop": "^3.2.0",
+    "location-history": "^1.0.0",
+    "material-ui": "^0.15.4",
     "musicmetadata": "^2.0.2",
     "network-address": "^1.1.0",
     "parse-torrent": "^5.7.3",
     "prettier-bytes": "^1.0.1",
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1",
+    "react-tap-event-plugin": "^1.0.0",
     "run-parallel": "^1.1.6",
     "semver": "^5.1.0",
     "simple-concat": "^1.0.0",
     "simple-get": "^2.0.0",
     "srt-to-vtt": "^1.1.1",
-    "virtual-dom": "^2.1.1",
     "vlc-command": "^1.0.1",
     "webtorrent": "0.x",
     "winreg": "^1.2.0",
     "zero-fill": "^2.2.3"
   },
   "devDependencies": {
+    "babel-cli": "^6.11.4",
+    "babel-plugin-syntax-jsx": "^6.13.0",
+    "babel-plugin-transform-es2015-destructuring": "^6.9.0",
+    "babel-plugin-transform-object-rest-spread": "^6.8.0",
+    "babel-plugin-transform-react-jsx": "^6.8.0",
     "cross-zip": "^2.0.1",
+    "depcheck": "^0.6.4",
     "electron-osx-sign": "^0.3.0",
     "electron-packager": "^7.0.0",
     "electron-winstaller": "^2.3.0",
@@ -52,11 +60,15 @@
     "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"
   },
   "homepage": "https://webtorrent.io",
   "keywords": [
@@ -65,8 +77,8 @@
     "electron-app",
     "hybrid webtorrent client",
     "mad science",
-    "torrent client",
     "torrent",
+    "torrent client",
     "webtorrent"
   ],
   "license": "MIT",
@@ -80,11 +92,15 @@
     "url": "git://github.com/feross/webtorrent-desktop.git"
   },
   "scripts": {
+    "build": "babel --quiet src --out-dir build",
     "clean": "node ./bin/clean.js",
     "open-config": "node ./bin/open-config.js",
     "package": "node ./bin/package.js",
-    "start": "electron .",
-    "test": "standard && node ./bin/check-deps.js",
-    "update-authors": "./bin/update-authors.sh"
+    "prepublish": "npm run build",
+    "start": "npm run build && electron .",
+    "test": "standard && depcheck --ignores=babel-cli,nodemon,gh-release --ignore-dirs=build,dist",
+    "gh-release": "gh-release",
+    "update-authors": "./bin/update-authors.sh",
+    "watch": "nodemon --exec 'npm run start' --ext js,pug,css"
   }
 }

renderer/lib/hx.js

@@ -1,5 +0,0 @@
-var h = require('virtual-dom/h')
-var hyperx = require('hyperx')
-var hx = hyperx(h)
-
-module.exports = hx

renderer/lib/location-history.js

@@ -1,126 +0,0 @@
-module.exports = LocationHistory
-
-function LocationHistory () {
-  if (!new.target) return new LocationHistory()
-  this._history = []
-  this._forward = []
-  this._pending = false
-}
-
-LocationHistory.prototype.url = function () {
-  return this.current() && this.current().url
-}
-
-LocationHistory.prototype.current = function () {
-  return this._history[this._history.length - 1]
-}
-
-LocationHistory.prototype.go = function (page, cb) {
-  if (!cb) cb = noop
-  if (this._pending) return cb(null)
-
-  console.log('go', page)
-
-  this.clearForward()
-  this._go(page, cb)
-}
-
-LocationHistory.prototype.back = function (cb) {
-  var self = this
-  if (!cb) cb = noop
-  if (self._history.length <= 1 || self._pending) return cb(null)
-
-  var page = self._history.pop()
-  self._unload(page, done)
-
-  function done (err) {
-    if (err) return cb(err)
-    self._forward.push(page)
-    self._load(self.current(), cb)
-  }
-}
-
-LocationHistory.prototype.hasBack = function () {
-  return this._history.length > 1
-}
-
-LocationHistory.prototype.forward = function (cb) {
-  if (!cb) cb = noop
-  if (this._forward.length === 0 || this._pending) return cb(null)
-
-  var page = this._forward.pop()
-  this._go(page, cb)
-}
-
-LocationHistory.prototype.hasForward = function () {
-  return this._forward.length > 0
-}
-
-LocationHistory.prototype.clearForward = function (url) {
-  if (url == null) {
-    this._forward = []
-  } else {
-    console.log(this._forward)
-    console.log(url)
-    this._forward = this._forward.filter(function (page) {
-      return page.url !== url
-    })
-  }
-}
-
-LocationHistory.prototype.backToFirst = function (cb) {
-  var self = this
-  if (!cb) cb = noop
-  if (self._history.length <= 1) return cb(null)
-
-  self.back(function (err) {
-    if (err) return cb(err)
-    self.backToFirst(cb)
-  })
-}
-
-LocationHistory.prototype._go = function (page, cb) {
-  var self = this
-  if (!cb) cb = noop
-
-  self._unload(self.current(), done1)
-
-  function done1 (err) {
-    if (err) return cb(err)
-    self._load(page, done2)
-  }
-
-  function done2 (err) {
-    if (err) return cb(err)
-    self._history.push(page)
-    cb(null)
-  }
-}
-
-LocationHistory.prototype._load = function (page, cb) {
-  var self = this
-  self._pending = true
-
-  if (page && page.onbeforeload) page.onbeforeload(done)
-  else done(null)
-
-  function done (err) {
-    self._pending = false
-    cb(err)
-  }
-}
-
-LocationHistory.prototype._unload = function (page, cb) {
-  var self = this
-  self._pending = true
-
-  if (page && page.onbeforeunload) page.onbeforeunload(done)
-  else done(null)
-
-  function done (err) {
-    self._pending = false
-    cb(err)
-  }
-}
-
-function noop () {}

renderer/views/app.js

@@ -1,83 +0,0 @@
-module.exports = App
-
-var hx = require('../lib/hx')
-var Header = require('./header')
-
-var Views = {
-  'home': require('./torrent-list'),
-  'player': require('./player'),
-  'create-torrent': require('./create-torrent'),
-  'preferences': require('./preferences')
-}
-
-var 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')
-}
-
-function App (state) {
-  // Hide player controls while playing video, if the mouse stays still for a while
-  // Never hide the controls when:
-  // * The mouse is over the controls or we're scrubbing (see CSS)
-  // * The video is paused
-  // * The video is playing remotely on Chromecast or Airplay
-  var hideControls = state.location.url() === 'player' &&
-    state.playing.mouseStationarySince !== 0 &&
-    new Date().getTime() - state.playing.mouseStationarySince > 2000 &&
-    !state.playing.isPaused &&
-    state.playing.location === 'local' &&
-    state.playing.playbackRate === 1
-
-  var cls = [
-    'view-' + state.location.url(), /* e.g. view-home, view-player */
-    'is-' + process.platform /* e.g. is-darwin, is-win32, is-linux */
-  ]
-  if (state.window.isFullScreen) cls.push('is-fullscreen')
-  if (state.window.isFocused) cls.push('is-focused')
-  if (hideControls) cls.push('hide-video-controls')
-
-  return hx`
-    <div class='app ${cls.join(' ')}'>
-      ${Header(state)}
-      ${getErrorPopover(state)}
-      <div class='content'>${getView(state)}</div>
-      ${getModal(state)}
-    </div>
-  `
-}
-
-function getErrorPopover (state) {
-  var now = new Date().getTime()
-  var recentErrors = state.errors.filter((x) => now - x.time < 5000)
-  var hasErrors = recentErrors.length > 0
-
-  var errorElems = recentErrors.map(function (error) {
-    return hx`<div class='error'>${error.message}</div>`
-  })
-  return hx`
-    <div class='error-popover ${hasErrors ? 'visible' : 'hidden'}'>
-      <div class='title'>Error</div>
-      ${errorElems}
-    </div>
-  `
-}
-
-function getModal (state) {
-  if (!state.modal) return
-  var contents = Modals[state.modal.id](state)
-  return hx`
-    <div class='modal'>
-      <div class='modal-background'></div>
-      <div class='modal-content'>
-        ${contents}
-      </div>
-    </div>
-  `
-}
-
-function getView (state) {
-  var url = state.location.url()
-  return Views[url](state)
-}

renderer/views/create-torrent.js

@@ -1,149 +0,0 @@
-module.exports = CreateTorrentPage
-
-var createTorrent = require('create-torrent')
-var path = require('path')
-var prettyBytes = require('prettier-bytes')
-
-var {dispatch, dispatcher} = require('../lib/dispatcher')
-var hx = require('../lib/hx')
-
-function CreateTorrentPage (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()
-
-  // 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) {
-    var relativePath = files.length === 0 ? file.name : path.relative(pathPrefix, file.path)
-    return hx`<div>${relativePath}</div>`
-  })
-  if (files.length > maxFileElems) {
-    fileElems.push(hx`<div>+ ${maxFileElems - files.length} more</div>`)
-  }
-  var trackers = createTorrent.announceList.join('\n')
-  var collapsedClass = info.showAdvanced ? 'expanded' : 'collapsed'
-
-  return hx`
-    <div class='create-torrent'>
-      <h2>Create torrent ${defaultName}</h2>
-      <p class="torrent-info">
-        ${torrentInfo}
-      </p>
-      <p class='torrent-attribute'>
-        <label>Path:</label>
-        <div class='torrent-attribute'>${pathPrefix}</div>
-      </p>
-      <div class='expand-collapse ${collapsedClass}'
-           onclick=${dispatcher('toggleCreateTorrentAdvanced')}>
-        ${info.showAdvanced ? 'Basic' : 'Advanced'}
-      </div>
-      <div class="create-torrent-advanced ${collapsedClass}">
-        <p class='torrent-attribute'>
-          <label>Comment:</label>
-          <textarea class='torrent-attribute torrent-comment'></textarea>
-        </p>
-        <p class='torrent-attribute'>
-          <label>Trackers:</label>
-          <textarea class='torrent-attribute torrent-trackers'>${trackers}</textarea>
-        </p>
-        <p class='torrent-attribute'>
-          <label>Private:</label>
-          <input type='checkbox' class='torrent-is-private' value='torrent-is-private'>
-        </p>
-        <p class='torrent-attribute'>
-          <label>Files:</label>
-          <div>${fileElems}</div>
-        </p>
-      </div>
-      <p class="float-right">
-        <button class='button-flat light' onclick=${dispatcher('back')}>Cancel</button>
-        <button class='button-raised' onclick=${handleOK}>Create Torrent</button>
-      </p>
-    </div>
-  `
-
-  function handleOK () {
-    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)
-  }
-}
-
-function CreateTorrentErrorPage () {
-  return hx`
-    <div class='create-torrent'>
-      <h2>Create torrent</h2>
-      <p class="torrent-info">
-        <p>
-          Sorry, you must select at least one file that is not a hidden file.
-        </p>
-        <p>
-          Hidden files, starting with a . character, are not included.
-        </p>
-      </p>
-      <p class="float-right">
-        <button class='button-flat light' onclick=${dispatcher('back')}>
-          Cancel
-        </button>
-      </p>
-    </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)
-}

renderer/views/header.js

@@ -1,48 +0,0 @@
-module.exports = Header
-
-var {dispatcher} = require('../lib/dispatcher')
-var hx = require('../lib/hx')
-
-function Header (state) {
-  return hx`
-    <div class='header'>
-      ${getTitle()}
-      <div class='nav left float-left'>
-        <i.icon.back
-          class=${state.location.hasBack() ? '' : 'disabled'}
-          title='Back'
-          onclick=${dispatcher('back')}>
-          chevron_left
-        </i>
-        <i.icon.forward
-          class=${state.location.hasForward() ? '' : 'disabled'}
-          title='Forward'
-          onclick=${dispatcher('forward')}>
-          chevron_right
-        </i>
-      </div>
-      <div class='nav right float-right'>
-        ${getAddButton()}
-      </div>
-    </div>
-  `
-
-  function getTitle () {
-    if (process.platform === 'darwin') {
-      return hx`<div class='title ellipsis'>${state.window.title}</div>`
-    }
-  }
-
-  function getAddButton () {
-    if (state.location.url() === 'home') {
-      return hx`
-        <i
-          class='icon add'
-          title='Add torrent'
-          onclick=${dispatcher('openFiles')}>
-          add
-        </i>
-      `
-    }
-  }
-}

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

@@ -1,29 +0,0 @@
-module.exports = OpenTorrentAddressModal
-
-var {dispatch, dispatcher} = require('../lib/dispatcher')
-var hx = require('../lib/hx')
-
-function OpenTorrentAddressModal (state) {
-  return hx`
-    <div class='open-torrent-address-modal'>
-      <p><label>Enter torrent address or magnet link</label></p>
-      <p>
-        <input id='add-torrent-url' type='text' onkeypress=${handleKeyPress} />
-      </p>
-      <p class='float-right'>
-        <button class='button button-flat' onclick=${dispatcher('exitModal')}>Cancel</button>
-        <button class='button button-raised' onclick=${handleOK}>OK</button>
-      </p>
-      <script>document.querySelector('#add-torrent-url').focus()</script>
-    </div>
-  `
-}
-
-function handleKeyPress (e) {
-  if (e.which === 13) handleOK() /* hit Enter to submit */
-}
-
-function handleOK () {
-  dispatch('exitModal')
-  dispatch('addTorrent', document.querySelector('#add-torrent-url').value)
-}

renderer/views/preferences.js

@@ -1,102 +0,0 @@
-module.exports = Preferences
-
-var hx = require('../lib/hx')
-var {dispatch} = require('../lib/dispatcher')
-
-var remote = require('electron').remote
-var dialog = remote.dialog
-
-function Preferences (state) {
-  return hx`
-    <div class='preferences'>
-      ${renderGeneralSection(state)}
-    </div>
-  `
-}
-
-function renderGeneralSection (state) {
-  return renderSection({
-    title: 'General',
-    description: '',
-    icon: 'settings'
-  }, [
-    renderDownloadDirSelector(state)
-  ])
-}
-
-function renderDownloadDirSelector (state) {
-  return renderFileSelector({
-    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 : hx`
-    <div class='help text'>
-      <i.icon>help_outline</i>${definition.description}
-    </div>
-  `
-  return hx`
-    <section class='section preferences-panel'>
-      <div class='section-container'>
-        <div class='section-heading'>
-          <i.icon>${definition.icon}</i>${definition.title}
-        </div>
-        ${helpElem}
-        <div class='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 hx`
-    <div class='control-group'>
-      <div class='controls'>
-        <label class='control-label'>
-          <div class='preference-title'>${definition.label}</div>
-          <div class='preference-description'>${definition.description}</div>
-        </label>
-        <div class='controls'>
-          <input type='text' class='file-picker-text'
-            id=${definition.property}
-            disabled='disabled'
-            value=${value} />
-          <button class='btn' onclick=${handleClick}>
-            <i.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)
-}

renderer/views/remove-torrent-modal.js

@@ -1,26 +0,0 @@
-module.exports = RemoveTorrentModal
-
-var {dispatch, dispatcher} = require('../lib/dispatcher')
-var hx = require('../lib/hx')
-
-function RemoveTorrentModal (state) {
-  var message = state.modal.deleteData
-    ? 'Are you sure you want to remove this torrent from the list and delete the data file?'
-    : 'Are you sure you want to remove this torrent from the list?'
-  var buttonText = state.modal.deleteData ? 'Remove Data' : 'Remove'
-
-  return hx`
-    <div>
-      <p><strong>${message}</strong></p>
-      <p class='float-right'>
-        <button class='button button-flat' onclick=${dispatcher('exitModal')}>Cancel</button>
-        <button class='button button-raised' onclick=${handleRemove}>${buttonText}</button>
-      </p>
-    </div>
-  `
-
-  function handleRemove () {
-    dispatch('deleteTorrent', state.modal.infoHash, state.modal.deleteData)
-    dispatch('exitModal')
-  }
-}

renderer/views/torrent-list.js

@@ -1,296 +0,0 @@
-module.exports = TorrentList
-
-var prettyBytes = require('prettier-bytes')
-
-var hx = require('../lib/hx')
-var TorrentSummary = require('../lib/torrent-summary')
-var TorrentPlayer = require('../lib/torrent-player')
-var {dispatcher} = require('../lib/dispatcher')
-
-function TorrentList (state) {
-  var torrentRows = state.saved.torrents.map(
-    (torrentSummary) => renderTorrent(torrentSummary)
-  )
-
-  return hx`
-    <div class='torrent-list'>
-      ${torrentRows}
-      <div class='torrent-placeholder'>
-        <span class='ellipsis'>Drop a torrent file here or paste a magnet link</span>
-      </div>
-    </div>`
-
-  function renderTorrent (torrentSummary) {
-    var infoHash = torrentSummary.infoHash
-    var isSelected = infoHash && state.selectedInfoHash === infoHash
-
-    // Background image: show some nice visuals, like a frame from the movie, if possible
-    var style = {}
-    if (torrentSummary.posterFileName) {
-      var gradient = isSelected
-        ? 'linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%)'
-        : 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)'
-      var posterPath = TorrentSummary.getPosterPath(torrentSummary)
-      style.backgroundImage = gradient + `, url('${posterPath}')`
-    }
-
-    // Foreground: name of the torrent, basic info like size, play button,
-    // cast buttons if available, and delete
-    var classes = ['torrent']
-    //  playStatus turns the play button into a loading spinner or error icon
-    if (torrentSummary.playStatus) classes.push(torrentSummary.playStatus)
-    if (isSelected) classes.push('selected')
-    if (!infoHash) classes.push('disabled')
-    classes = classes.join(' ')
-    return hx`
-      <div style=${style} class=${classes}
-        oncontextmenu=${infoHash && dispatcher('openTorrentContextMenu', infoHash)}
-        onclick=${infoHash && dispatcher('toggleSelectTorrent', infoHash)}>
-        ${renderTorrentMetadata(torrentSummary)}
-        ${infoHash ? renderTorrentButtons(torrentSummary) : ''}
-        ${isSelected ? renderTorrentDetails(torrentSummary) : ''}
-      </div>
-    `
-  }
-
-  // Show name, download status, % complete
-  function renderTorrentMetadata (torrentSummary) {
-    var name = torrentSummary.name || 'Loading torrent...'
-    var elements = [hx`
-      <div class='name ellipsis'>${name}</div>
-    `]
-
-    // If it's downloading/seeding then show progress info
-    var prog = torrentSummary.progress
-    if (torrentSummary.status !== 'paused' && prog) {
-      elements.push(hx`
-        <div class='ellipsis'>
-          ${renderPercentProgress()}
-          ${renderTotalProgress()}
-          ${renderPeers()}
-          ${renderDownloadSpeed()}
-          ${renderUploadSpeed()}
-        </div>
-      `)
-    }
-
-    return hx`<div class='metadata'>${elements}</div>`
-
-    function renderPercentProgress () {
-      var progress = Math.floor(100 * prog.progress)
-      return hx`<span>${progress}%</span>`
-    }
-
-    function renderTotalProgress () {
-      var downloaded = prettyBytes(prog.downloaded)
-      var total = prettyBytes(prog.length || 0)
-      if (downloaded === total) {
-        return hx`<span>${downloaded}</span>`
-      } else {
-        return hx`<span>${downloaded} / ${total}</span>`
-      }
-    }
-
-    function renderPeers () {
-      if (prog.numPeers === 0) return
-      var count = prog.numPeers === 1 ? 'peer' : 'peers'
-      return hx`<span>${prog.numPeers} ${count}</span>`
-    }
-
-    function renderDownloadSpeed () {
-      if (prog.downloadSpeed === 0) return
-      return hx`<span>↓ ${prettyBytes(prog.downloadSpeed)}/s</span>`
-    }
-
-    function renderUploadSpeed () {
-      if (prog.uploadSpeed === 0) return
-      return hx`<span>↑ ${prettyBytes(prog.uploadSpeed)}/s</span>`
-    }
-  }
-
-  // Download button toggles between torrenting (DL/seed) and paused
-  // Play button starts streaming the torrent immediately, unpausing if needed
-  function renderTorrentButtons (torrentSummary) {
-    var infoHash = torrentSummary.infoHash
-
-    var playIcon, playTooltip, playClass
-    if (torrentSummary.playStatus === 'timeout') {
-      playIcon = 'warning'
-      playTooltip = 'Playback timed out. No seeds? No internet? Click to try again.'
-    } else {
-      playIcon = 'play_arrow'
-      playTooltip = 'Start streaming'
-    }
-
-    var downloadIcon, downloadTooltip
-    if (torrentSummary.status === 'seeding') {
-      downloadIcon = 'file_upload'
-      downloadTooltip = 'Seeding. Click to stop.'
-    } else if (torrentSummary.status === 'downloading') {
-      downloadIcon = 'file_download'
-      downloadTooltip = 'Torrenting. Click to stop.'
-    } else {
-      downloadIcon = 'file_download'
-      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 = 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 = hx`
-        <i.button-round.icon.play
-          title=${playTooltip}
-          class=${playClass}
-          onclick=${dispatcher('playFile', infoHash)}>
-          ${playIcon}
-        </i>
-      `
-    }
-
-    return hx`
-      <div class='buttons'>
-        ${positionElem}
-        ${playButton}
-        <i.button-round.icon.download
-          class=${torrentSummary.status}
-          title=${downloadTooltip}
-          onclick=${dispatcher('toggleTorrent', infoHash)}>
-          ${downloadIcon}
-        </i>
-        <i
-          class='icon delete'
-          title='Remove torrent'
-          onclick=${dispatcher('confirmDeleteTorrent', infoHash, false)}>
-          close
-        </i>
-      </div>
-    `
-  }
-
-  // Show files, per-file download status and play buttons, and so on
-  function 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 = hx`<div class='files warning'>${message}</div>`
-    } else {
-      // We do know the files. List them and show download stats for each one
-      var fileRows = torrentSummary.files
-        .map((file, index) => ({ file, index }))
-        .sort(function (a, b) {
-          if (a.file.name < b.file.name) return -1
-          if (b.file.name < a.file.name) return 1
-          return 0
-        })
-        .map((object) => renderFileRow(torrentSummary, object.file, object.index))
-
-      filesElement = hx`
-        <div class='files'>
-          <table>
-            ${fileRows}
-          </table>
-        </div>
-      `
-    }
-
-    return hx`
-      <div class='torrent-details'>
-        ${filesElement}
-      </div>
-    `
-  }
-
-  // Show a single torrentSummary file in the details view for a single torrent
-  function renderFileRow (torrentSummary, file, index) {
-    // First, find out how much of the file we've downloaded
-    // Are we even torrenting it?
-    var isSelected = torrentSummary.selections && torrentSummary.selections[index]
-    var isDone = false // Are we finished torrenting it?
-    var progress = ''
-    if (torrentSummary.progress && torrentSummary.progress.files) {
-      var fileProg = torrentSummary.progress.files[index]
-      isDone = fileProg.numPiecesPresent === fileProg.numPieces
-      progress = Math.round(100 * fileProg.numPiecesPresent / fileProg.numPieces) + '%'
-    }
-
-    // Second, for media files where we saved our position, show how far we got
-    var positionElem
-    if (file.currentTime) {
-      // Radial progress bar. 0% = start from 0:00, 270% = 3/4 of the way thru
-      positionElem = renderRadialProgressBar(file.currentTime / file.duration)
-    }
-
-    // Finally, render the file as a table row
-    var isPlayable = TorrentPlayer.isPlayable(file)
-    var infoHash = torrentSummary.infoHash
-    var icon
-    var handleClick
-    if (isPlayable) {
-      icon = 'play_arrow' /* playable? add option to play */
-      handleClick = dispatcher('playFile', infoHash, index)
-    } else {
-      icon = 'description' /* file icon, opens in OS default app */
-      handleClick = dispatcher('openItem', infoHash, index)
-    }
-    var rowClass = ''
-    if (!isSelected) rowClass = 'disabled' // File deselected, not being torrented
-    if (!isDone && !isPlayable) rowClass = 'disabled' // Can't open yet, can't stream
-    return hx`
-      <tr onclick=${handleClick}>
-        <td class='col-icon ${rowClass}'>
-          ${positionElem}
-          <i class='icon'>${icon}</i>
-        </td>
-        <td class='col-name ${rowClass}'>
-          ${file.name}
-        </td>
-        <td class='col-progress ${rowClass}'>
-          ${isSelected ? progress : ''}
-        </td>
-        <td class='col-size ${rowClass}'>
-          ${prettyBytes(file.length)}
-        </td>
-        <td class='col-select'
-            onclick=${dispatcher('toggleTorrentFile', infoHash, index)}>
-          <i class='icon'>${isSelected ? 'close' : 'add'}</i>
-        </td>
-      </tr>
-    `
-  }
-}
-
-function renderRadialProgressBar (fraction, cssClass) {
-  var rotation = 360 * fraction
-  var transformFill = {transform: 'rotate(' + (rotation / 2) + 'deg)'}
-  var transformFix = {transform: 'rotate(' + rotation + 'deg)'}
-
-  return hx`
-    <div class="radial-progress ${cssClass}">
-      <div class="circle">
-        <div class="mask full" style=${transformFill}>
-          <div class="fill" style=${transformFill}></div>
-        </div>
-        <div class="mask half">
-          <div class="fill" style=${transformFill}></div>
-          <div class="fill fix" style=${transformFix}></div>
-        </div>
-      </div>
-      <div class="inset"></div>
-    </div>
-  `
-}

renderer/views/unsupported-media-modal.js

@@ -1,39 +0,0 @@
-module.exports = UnsupportedMediaModal
-
-var electron = require('electron')
-
-var {dispatch, dispatcher} = require('../lib/dispatcher')
-var hx = require('../lib/hx')
-
-function UnsupportedMediaModal (state) {
-  var err = state.modal.error
-  var message = (err && err.getMessage)
-    ? err.getMessage()
-    : err
-  var actionButton = state.modal.vlcInstalled
-    ? hx`<button class="button-raised" onclick=${onPlay}>Play in VLC</button>`
-    : hx`<button class="button-raised" onclick=${onInstall}>Install VLC</button>`
-  var vlcMessage = state.modal.vlcNotFound
-    ? 'Couldn\'t run VLC. Please make sure it\'s installed.'
-    : ''
-  return hx`
-    <div>
-      <p><strong>Sorry, we can't play that file.</strong></p>
-      <p>${message}</p>
-      <p class='float-right'>
-        <button class="button-flat" onclick=${dispatcher('backToList')}>Cancel</button>
-        ${actionButton}
-      </p>
-      <p class='error-text'>${vlcMessage}</p>
-    </div>
-  `
-
-  function onInstall () {
-    electron.shell.openExternal('http://www.videolan.org/vlc/')
-    state.modal.vlcInstalled = true // Assume they'll install it successfully
-  }
-
-  function onPlay () {
-    dispatch('vlcPlay')
-  }
-}

renderer/views/update-available-modal.js

@@ -1,29 +0,0 @@
-module.exports = UpdateAvailableModal
-
-var electron = require('electron')
-
-var {dispatch} = require('../lib/dispatcher')
-var hx = require('../lib/hx')
-
-function UpdateAvailableModal (state) {
-  return hx`
-    <div class='update-available-modal'>
-      <p><strong>A new version of WebTorrent is available: v${state.modal.version}</strong></p>
-      <p>We have an auto-updater for Windows and Mac. We don't have one for Linux yet, so you'll have to download the new version manually.</p>
-      <p class='float-right'>
-        <button class='button button-flat' onclick=${handleCancel}>Skip This Release</button>
-        <button class='button button-raised' onclick=${handleOK}>Show Download Page</button>
-      </p>
-    </div>
-  `
-
-  function handleOK () {
-    electron.shell.openExternal('https://github.com/feross/webtorrent-desktop/releases')
-    dispatch('exitModal')
-  }
-
-  function handleCancel () {
-    dispatch('skipVersion', state.modal.version)
-    dispatch('exitModal')
-  }
-}

src/.babelrc

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

src/config.js

@@ -4,7 +4,7 @@ var path = require('path')
 
 var APP_NAME = 'WebTorrent'
 var APP_TEAM = 'WebTorrent, LLC'
-var APP_VERSION = require('./package.json').version
+var APP_VERSION = require('../package.json').version
 
 var PORTABLE_PATH = path.join(path.dirname(process.execPath), 'Portable Settings')
 
@@ -15,8 +15,8 @@ module.exports = {
   TELEMETRY_URL: 'https://webtorrent.io/desktop/telemetry',
 
   APP_COPYRIGHT: 'Copyright © 2014-2016 ' + APP_TEAM,
-  APP_FILE_ICON: path.join(__dirname, 'static', 'WebTorrentFile'),
-  APP_ICON: path.join(__dirname, 'static', 'WebTorrent'),
+  APP_FILE_ICON: path.join(__dirname, '..', 'static', 'WebTorrentFile'),
+  APP_ICON: path.join(__dirname, '..', 'static', 'WebTorrent'),
   APP_NAME: APP_NAME,
   APP_TEAM: APP_TEAM,
   APP_VERSION: APP_VERSION,
@@ -66,13 +66,13 @@ module.exports = {
   IS_PRODUCTION: isProduction(),
 
   POSTER_PATH: path.join(getConfigPath(), 'Posters'),
-  ROOT_PATH: __dirname,
-  STATIC_PATH: path.join(__dirname, 'static'),
+  ROOT_PATH: path.join(__dirname, '..'),
+  STATIC_PATH: path.join(__dirname, '..', 'static'),
   TORRENT_PATH: path.join(getConfigPath(), 'Torrents'),
 
-  WINDOW_ABOUT: 'file://' + path.join(__dirname, 'renderer', 'about.html'),
-  WINDOW_MAIN: 'file://' + path.join(__dirname, 'renderer', 'main.html'),
-  WINDOW_WEBTORRENT: 'file://' + path.join(__dirname, 'renderer', 'webtorrent.html'),
+  WINDOW_ABOUT: 'file://' + path.join(__dirname, '..', 'static', 'about.html'),
+  WINDOW_MAIN: 'file://' + path.join(__dirname, '..', 'static', 'main.html'),
+  WINDOW_WEBTORRENT: 'file://' + path.join(__dirname, '..', 'static', 'webtorrent.html'),
 
   WINDOW_MIN_HEIGHT: 38 + (120 * 2), // header height + 2 torrents
   WINDOW_MIN_WIDTH: 425

src/main/announcement.js

@@ -32,7 +32,7 @@ function init () {
 
 function onResponse (err, res, data) {
   if (err) return log(`Failed to retrieve announcement: ${err.message}`)
-  if (res.statusCode !== 200) return log('No announcement exists')
+  if (res.statusCode !== 200) return log('No announcement available')
 
   try {
     data = JSON.parse(data.toString())

src/main/dialog.js

@@ -8,7 +8,6 @@ module.exports = {
 
 var electron = require('electron')
 
-var config = require('../config')
 var log = require('./log')
 var windows = require('./windows')
 
@@ -109,7 +108,7 @@ function openTorrentAddress () {
 }
 
 /**
- * Dialogs on do not show a title on OS X, so the window title is used instead.
+ * Dialogs on do not show a title on Mac, so the window title is used instead.
  */
 function setTitle (title) {
   if (process.platform === 'darwin') {
@@ -118,5 +117,5 @@ function setTitle (title) {
 }
 
 function resetTitle () {
-  setTitle(config.APP_WINDOW_TITLE)
+  windows.main.dispatch('resetTitle')
 }

src/main/dock.js

@@ -12,7 +12,7 @@ var dialog = require('./dialog')
 var log = require('./log')
 
 /**
- * Add a right-click menu to the dock icon. (OS X)
+ * Add a right-click menu to the dock icon. (Mac)
  */
 function init () {
   if (!app.dock) return
@@ -21,7 +21,7 @@ function init () {
 }
 
 /**
- * Bounce the Downloads stack if `path` is inside the Downloads folder. (OS X)
+ * Bounce the Downloads stack if `path` is inside the Downloads folder. (Mac)
  */
 function downloadFinished (path) {
   if (!app.dock) return
@@ -30,12 +30,11 @@ function downloadFinished (path) {
 }
 
 /**
- * Display string in dock badging area. (OS X)
+ * Display a counter badge for the app. (Mac, Linux)
  */
-function setBadge (text) {
-  if (!app.dock) return
-  log(`setBadge: ${text}`)
-  app.dock.setBadge(String(text))
+function setBadge (count) {
+  log(`setBadge: ${count}`)
+  app.setBadgeCount(Number(count))
 }
 
 function getMenuTemplate () {

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

@@ -34,7 +34,7 @@ function installDarwin () {
   var electron = require('electron')
   var app = electron.app
 
-  // On OS X, only protocols that are listed in `Info.plist` can be set as the
+  // On Mac, only protocols that are listed in `Info.plist` can be set as the
   // default handler at runtime.
   app.setAsDefaultProtocolClient('magnet')
   app.setAsDefaultProtocolClient('stream-magnet')
@@ -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,26 +10,32 @@ 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')
 var squirrelWin32 = require('./squirrel-win32')
 var tray = require('./tray')
 var updater = require('./updater')
+var userTasks = require('./user-tasks')
 var windows = require('./windows')
 
 var shouldQuit = false
 var argv = sliceArgv(process.argv)
 
+if (config.IS_PRODUCTION) {
+  // When Electron is running in production mode (packaged app), then run React
+  // in production mode too.
+  process.env.NODE_ENV = 'production'
+}
+
 if (process.platform === 'win32') {
   shouldQuit = squirrelWin32.handleEvent(argv[0])
-  argv = argv.filter((arg) => arg.indexOf('--squirrel') === -1)
+  argv = argv.filter((arg) => !arg.includes('--squirrel'))
 }
 
 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()
@@ -72,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)
     })
   })
 
@@ -104,9 +110,9 @@ function init () {
 function delayedInit () {
   announcement.init()
   dock.init()
-  handlers.install()
   tray.init()
   updater.init()
+  userTasks.init()
 }
 
 function onOpen (e, torrentId) {
@@ -151,9 +157,12 @@ function processArgv (argv) {
     } else if (arg === '-u') {
       dialog.openTorrentAddress()
     } else if (arg.startsWith('-psn')) {
-      // Ignore OS X launchd "process serial number" argument
+      // 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) {
-    var args = ['--play-and-exit', '--video-on-top', '--no-video-title-show', '--quiet', 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) {
@@ -99,10 +93,6 @@ function getMenuTemplate () {
           type: 'separator'
         },
         {
-          label: process.platform === 'win32'
-            ? 'Close'
-            : 'Close Window',
-          accelerator: 'CmdOrCtrl+W',
           role: 'close'
         }
       ]
@@ -111,32 +101,29 @@ function getMenuTemplate () {
       label: 'Edit',
       submenu: [
         {
-          label: 'Cut',
-          accelerator: 'CmdOrCtrl+X',
-          role: 'cut'
+          role: 'undo'
         },
         {
-          label: 'Copy',
-          accelerator: 'CmdOrCtrl+C',
-          role: 'copy'
-        },
-        {
-          label: 'Paste Torrent Address',
-          accelerator: 'CmdOrCtrl+V',
-          role: 'paste'
-        },
-        {
-          label: 'Select All',
-          accelerator: 'CmdOrCtrl+A',
-          role: 'selectall'
+          role: 'redo'
         },
         {
           type: 'separator'
         },
         {
-          label: 'Preferences',
-          accelerator: 'CmdOrCtrl+,',
-          click: () => windows.main.dispatch('preferences')
+          role: 'cut'
+        },
+        {
+          role: 'copy'
+        },
+        {
+          label: 'Paste Torrent Address',
+          role: 'paste'
+        },
+        {
+          role: 'delete'
+        },
+        {
+          role: 'selectall'
         }
       ]
     },
@@ -280,12 +267,11 @@ function getMenuTemplate () {
   ]
 
   if (process.platform === 'darwin') {
-    // Add WebTorrent app menu (OS X)
+    // Add WebTorrent app menu (Mac)
     template.unshift({
       label: config.APP_NAME,
       submenu: [
         {
-          label: 'About ' + config.APP_NAME,
           role: 'about'
         },
         {
@@ -300,7 +286,6 @@ function getMenuTemplate () {
           type: 'separator'
         },
         {
-          label: 'Services',
           role: 'services',
           submenu: []
         },
@@ -308,45 +293,34 @@ function getMenuTemplate () {
           type: 'separator'
         },
         {
-          label: 'Hide ' + config.APP_NAME,
-          accelerator: 'Command+H',
           role: 'hide'
         },
         {
-          label: 'Hide Others',
-          accelerator: 'Command+Alt+H',
           role: 'hideothers'
         },
         {
-          label: 'Show All',
           role: 'unhide'
         },
         {
           type: 'separator'
         },
         {
-          label: 'Quit',
-          accelerator: 'Command+Q',
-          click: () => app.quit()
+          role: 'quit'
         }
       ]
     })
 
-    // Add Window menu (OS X)
+    // Add Window menu (Mac)
     template.splice(5, 0, {
-      label: 'Window',
       role: 'window',
       submenu: [
         {
-          label: 'Minimize',
-          accelerator: 'CmdOrCtrl+M',
           role: 'minimize'
         },
         {
           type: 'separator'
         },
         {
-          label: 'Bring All to Front',
           role: 'front'
         }
       ]
@@ -362,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')
@@ -21,7 +20,7 @@ function init () {
   if (process.platform === 'win32') {
     initWin32()
   }
-  // OS X apps generally do not have menu bar icons
+  // Mac apps generally do not have menu bar icons
 }
 
 /**
@@ -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/updater.js

@@ -63,7 +63,7 @@ function initDarwinWin32 () {
 
   electron.autoUpdater.on(
     'update-not-available',
-    () => log('Update not available')
+    () => log('No update available')
   )
 
   electron.autoUpdater.on(

src/main/user-tasks.js

@@ -0,0 +1,43 @@
+module.exports = {
+  init
+}
+
+var electron = require('electron')
+
+var app = electron.app
+
+/**
+ * Add a user task menu to the app icon on right-click. (Windows)
+ */
+function init () {
+  if (process.platform !== 'win32') return
+  app.setUserTasks(getUserTasks())
+}
+
+function getUserTasks () {
+  return [
+    {
+      arguments: '-n',
+      title: 'Create New Torrent...',
+      description: 'Create a new torrent'
+    },
+    {
+      arguments: '-o',
+      title: 'Open Torrent File...',
+      description: 'Open a .torrent file'
+    },
+    {
+      arguments: '-u',
+      title: 'Open Torrent Address...',
+      description: 'Open a torrent from a URL'
+    }
+  ].map(getUserTasksItem)
+}
+
+function getUserTasksItem (item) {
+  return Object.assign(item, {
+    program: process.execPath,
+    iconPath: process.execPath,
+    iconIndex: 0
+  })
+}

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,13 +31,13 @@ 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,
     minHeight: config.WINDOW_MIN_HEIGHT,
     title: config.APP_WINDOW_TITLE,
-    titleBarStyle: 'hidden-inset', // Hide title bar (OS X)
+    titleBarStyle: 'hidden-inset', // Hide title bar (Mac)
     useContentSize: true, // Specify web page size without OS chrome
     width: 500,
     height: HEADER_HEIGHT + (TORRENT_HEIGHT * 6) // header height + 5 torrents
@@ -95,7 +95,7 @@ function send (...args) {
 }
 
 /**
- * Enforce window aspect ratio. Remove with 0. (OS X)
+ * Enforce window aspect ratio. Remove with 0. (Mac)
  */
 function setAspectRatio (aspectRatio) {
   if (!main.win) return
@@ -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')
   }
@@ -196,7 +202,7 @@ function toggleFullScreen (flag) {
   log(`toggleFullScreen ${flag}`)
 
   if (flag) {
-    // Fullscreen and aspect ratio do not play well together. (OS X)
+    // Fullscreen and aspect ratio do not play well together. (Mac)
     main.win.setAspectRatio(0)
   }
 
@@ -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,52 @@
+const React = require('react')
+
+const FlatButton = require('material-ui/FlatButton').default
+
+class ShowMore extends React.Component {
+  static get propTypes () {
+    return {
+      defaultExpanded: React.PropTypes.bool,
+      hideLabel: React.PropTypes.string,
+      showLabel: React.PropTypes.string
+    }
+  }
+
+  static get defaultProps () {
+    return {
+      hideLabel: 'Hide more...',
+      showLabel: 'Show more...'
+    }
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      expanded: !!this.props.defaultExpanded
+    }
+
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  handleClick () {
+    this.setState({
+      expanded: !this.state.expanded
+    })
+  }
+
+  render () {
+    const label = this.state.expanded
+      ? this.props.hideLabel
+      : this.props.showLabel
+    return (
+      <div style={this.props.style}>
+        {this.state.expanded ? this.props.children : null}
+        <FlatButton
+          onClick={this.handleClick}
+          label={label} />
+      </div>
+    )
+  }
+}
+
+module.exports = ShowMore

src/renderer/components/create-torrent-error-page.js

@@ -0,0 +1,26 @@
+const React = require('react')
+
+const {dispatcher} = require('../lib/dispatcher')
+
+module.exports = class CreateTorrentErrorPage extends React.Component {
+  render () {
+    return (
+      <div className='create-torrent'>
+        <h2>Create torrent</h2>
+        <p className='torrent-info'>
+          <p>
+            Sorry, you must select at least one file that is not a hidden file.
+          </p>
+          <p>
+            Hidden files, starting with a . character, are not included.
+          </p>
+        </p>
+        <p className='float-right'>
+          <button className='button-flat light' onClick={dispatcher('cancel')}>
+            Cancel
+          </button>
+        </p>
+      </div>
+    )
+  }
+}

src/renderer/components/header.js

@@ -0,0 +1,52 @@
+const React = require('react')
+
+const {dispatcher} = require('../lib/dispatcher')
+
+class Header extends React.Component {
+  render () {
+    var loc = this.props.state.location
+    return (
+      <div className='header'>
+        {this.getTitle()}
+        <div className='nav left float-left'>
+          <i
+            className={'icon back ' + (loc.hasBack() ? '' : 'disabled')}
+            title='Back'
+            onClick={dispatcher('back')}>
+            chevron_left
+          </i>
+          <i
+            className={'icon forward ' + (loc.hasForward() ? '' : 'disabled')}
+            title='Forward'
+            onClick={dispatcher('forward')}>
+            chevron_right
+          </i>
+        </div>
+        <div className='nav right float-right'>
+          {this.getAddButton()}
+        </div>
+      </div>
+    )
+  }
+
+  getTitle () {
+    if (process.platform !== 'darwin') return null
+    var state = this.props.state
+    return (<div className='title ellipsis'>{state.window.title}</div>)
+  }
+
+  getAddButton () {
+    var state = this.props.state
+    if (state.location.url() !== 'home') return null
+    return (
+      <i
+        className='icon add'
+        title='Add torrent'
+        onClick={dispatcher('openFiles')}>
+        add
+      </i>
+    )
+  }
+}
+
+module.exports = Header

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

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+const React = require('react')
+const electron = require('electron')
+
+const {dispatch} = require('../lib/dispatcher')
+
+module.exports = class UpdateAvailableModal extends React.Component {
+  render () {
+    var state = this.props.state
+    return (
+      <div className='update-available-modal'>
+        <p><strong>A new version of WebTorrent is available: v{state.modal.version}</strong></p>
+        <p>We have an auto-updater for Windows and Mac. We don't have one for Linux yet, so you'll have to download the new version manually.</p>
+        <p className='float-right'>
+          <button className='button button-flat' onClick={handleSkip}>Skip This Release</button>
+          <button className='button button-raised' onClick={handleShow}>Show Download Page</button>
+        </p>
+      </div>
+    )
+
+    function handleShow () {
+      electron.shell.openExternal('https://github.com/feross/webtorrent-desktop/releases')
+      dispatch('exitModal')
+    }
+
+    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.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
@@ -28,17 +28,17 @@ module.exports = class PlaybackController {
   playFile (infoHash, index /* optional */) {
     this.state.location.go({
       url: 'player',
-      onbeforeload: (cb) => {
+      setup: (cb) => {
         this.play()
-        openPlayer(this.state, infoHash, index, cb)
+        this.openPlayer(infoHash, index, cb)
       },
-      onbeforeunload: (cb) => closePlayer(this.state, this.config, cb)
+      destroy: () => this.closePlayer()
     }, (err) => {
       if (err) dispatch('error', err)
     })
   }
 
-  // Show a file in the OS, eg in Finder on a Mac
+  // Open a file in OS default app.
   openItem (infoHash, index) {
     var torrentSummary = TorrentSummary.getByKey(this.state, infoHash)
     var filePath = path.join(
@@ -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
   }
@@ -162,134 +166,142 @@ module.exports = class PlaybackController {
     }
     return false
   }
-}
 
-// Opens the video player to a specific torrent
-function openPlayer (state, infoHash, index, cb) {
-  var torrentSummary = TorrentSummary.getByKey(state, infoHash)
+  // Opens the video player to a specific torrent
+  openPlayer (infoHash, index, cb) {
+    var torrentSummary = TorrentSummary.getByKey(this.state, infoHash)
 
-  // automatically choose which file in the torrent to play, if necessary
-  if (index === undefined) index = torrentSummary.defaultPlayFileIndex
-  if (index === undefined) index = TorrentPlayer.pickFileToPlay(torrentSummary.files)
-  if (index === undefined) return cb(new errors.UnplayableError())
+    // automatically choose which file in the torrent to play, if necessary
+    if (index === undefined) index = torrentSummary.defaultPlayFileIndex
+    if (index === undefined) index = TorrentPlayer.pickFileToPlay(torrentSummary.files)
+    if (index === undefined) return cb(new errors.UnplayableError())
 
-  // update UI to show pending playback
-  if (torrentSummary.progress !== 1) sound.play('PLAY')
-  // TODO: remove torrentSummary.playStatus
-  torrentSummary.playStatus = 'requested'
-  this.update()
-
-  var timeout = setTimeout(() => {
-    telemetry.logPlayAttempt('timeout')
+    // update UI to show pending playback
+    if (torrentSummary.progress !== 1) sound.play('PLAY')
     // TODO: remove torrentSummary.playStatus
-    torrentSummary.playStatus = 'timeout' /* no seeders available? */
-    sound.play('ERROR')
-    cb(new Error('Playback timed out. Try again.'))
+    torrentSummary.playStatus = 'requested'
     this.update()
-  }, 10000) /* give it a few seconds */
 
-  if (torrentSummary.status === 'paused') {
-    dispatch('startTorrentingSummary', torrentSummary)
-    ipcRenderer.once('wt-ready-' + torrentSummary.infoHash,
-      () => openPlayerFromActiveTorrent(state, torrentSummary, index, timeout, cb))
-  } else {
-    openPlayerFromActiveTorrent(state, torrentSummary, index, timeout, cb)
-  }
-}
+    var timeout = setTimeout(() => {
+      telemetry.logPlayAttempt('timeout')
+      // TODO: remove torrentSummary.playStatus
+      torrentSummary.playStatus = 'timeout' /* no seeders available? */
+      sound.play('ERROR')
+      cb(new Error('Playback timed out. Try again.'))
+      this.update()
+    }, 10000) /* give it a few seconds */
 
-function openPlayerFromActiveTorrent (state, torrentSummary, index, timeout, cb) {
-  var fileSummary = torrentSummary.files[index]
-
-  // update state
-  state.playing.infoHash = torrentSummary.infoHash
-  state.playing.fileIndex = index
-  state.playing.type = TorrentPlayer.isVideo(fileSummary) ? 'video'
-    : TorrentPlayer.isAudio(fileSummary) ? 'audio'
-    : 'other'
-
-  // pick up where we left off
-  if (fileSummary.currentTime) {
-    var fraction = fileSummary.currentTime / fileSummary.duration
-    var secondsLeft = fileSummary.duration - fileSummary.currentTime
-    if (fraction < 0.9 && secondsLeft > 10) {
-      state.playing.jumpToTime = fileSummary.currentTime
+    if (torrentSummary.status === 'paused') {
+      dispatch('startTorrentingSummary', torrentSummary.torrentKey)
+      ipcRenderer.once('wt-ready-' + torrentSummary.infoHash,
+        () => this.openPlayerFromActiveTorrent(torrentSummary, index, timeout, cb))
+    } else {
+      this.openPlayerFromActiveTorrent(torrentSummary, index, timeout, cb)
     }
   }
 
-  // if it's audio, parse out the metadata (artist, title, etc)
-  if (state.playing.type === 'audio' && !fileSummary.audioInfo) {
-    ipcRenderer.send('wt-get-audio-metadata', torrentSummary.infoHash, index)
-  }
+  openPlayerFromActiveTorrent (torrentSummary, index, timeout, cb) {
+    var fileSummary = torrentSummary.files[index]
 
-  // if it's video, check for subtitles files that are done downloading
-  dispatch('checkForSubtitles')
+    // update state
+    var state = this.state
+    state.playing.infoHash = torrentSummary.infoHash
+    state.playing.fileIndex = index
+    state.playing.type = TorrentPlayer.isVideo(fileSummary) ? 'video'
+      : TorrentPlayer.isAudio(fileSummary) ? 'audio'
+      : 'other'
 
-  // enable previously selected subtitle track
-  if (fileSummary.selectedSubtitle) {
-    dispatch('addSubtitles', [fileSummary.selectedSubtitle], true)
-  }
-
-  ipcRenderer.send('wt-start-server', torrentSummary.infoHash, index)
-  ipcRenderer.once('wt-server-' + torrentSummary.infoHash, (e, info) => {
-    clearTimeout(timeout)
-
-    // if we timed out (user clicked play a long time ago), don't autoplay
-    var timedOut = torrentSummary.playStatus === 'timeout'
-    delete torrentSummary.playStatus
-    if (timedOut) {
-      ipcRenderer.send('wt-stop-server')
-      return this.update()
+    // pick up where we left off
+    if (fileSummary.currentTime) {
+      var fraction = fileSummary.currentTime / fileSummary.duration
+      var secondsLeft = fileSummary.duration - fileSummary.currentTime
+      if (fraction < 0.9 && secondsLeft > 10) {
+        state.playing.jumpToTime = fileSummary.currentTime
+      }
     }
 
-    // otherwise, play the video
-    state.window.title = torrentSummary.files[state.playing.fileIndex].name
+    // if it's audio, parse out the metadata (artist, title, etc)
+    if (state.playing.type === 'audio' && !fileSummary.audioInfo) {
+      ipcRenderer.send('wt-get-audio-metadata', torrentSummary.infoHash, index)
+    }
+
+    // if it's video, check for subtitles files that are done downloading
+    dispatch('checkForSubtitles')
+
+    // enable previously selected subtitle track
+    if (fileSummary.selectedSubtitle) {
+      dispatch('addSubtitles', [fileSummary.selectedSubtitle], true)
+    }
+
+    ipcRenderer.send('wt-start-server', torrentSummary.infoHash, index)
+    ipcRenderer.once('wt-server-' + torrentSummary.infoHash, (e, info) => {
+      clearTimeout(timeout)
+
+      // if we timed out (user clicked play a long time ago), don't autoplay
+      var timedOut = torrentSummary.playStatus === 'timeout'
+      delete torrentSummary.playStatus
+      if (timedOut) {
+        ipcRenderer.send('wt-stop-server')
+        return this.update()
+      }
+
+      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
+      this.update()
+
+      ipcRenderer.send('onPlayerOpen')
+      cb()
+    })
+  }
+
+  closePlayer () {
+    console.log('closePlayer')
+
+    // Quit any external players, like Chromecast/Airplay/etc or VLC
+    var state = this.state
+    if (isCasting(state)) {
+      Cast.stop()
+    }
+    if (state.playing.location === 'external') {
+      ipcRenderer.send('quitExternalPlayer')
+    }
+
+    // Save volume (this session only, not in state.saved)
+    state.previousVolume = state.playing.volume
+
+    // Telemetry: track what happens after the user clicks play
+    var result = state.playing.result // 'success' or 'error'
+    if (result === 'success') telemetry.logPlayAttempt('success') // first frame displayed
+    else if (result === 'error') telemetry.logPlayAttempt('error') // codec missing, etc
+    else if (result === undefined) telemetry.logPlayAttempt('abandoned') // user exited before first frame
+    else console.error('Unknown state.playing.result', state.playing.result)
+
+    // Reset the window contents back to the home screen
+    state.playing = State.getDefaultPlayState()
+    state.server = null
+
+    // Reset the window size and location back to where it was
+    if (state.window.isFullScreen) {
+      dispatch('toggleFullScreen', false)
+    }
+    restoreBounds(state)
+
+    // Tell the WebTorrent process to kill the torrent-to-HTTP server
+    ipcRenderer.send('wt-stop-server')
+
+    ipcRenderer.send('onPlayerClose')
+
     this.update()
-
-    ipcRenderer.send('onPlayerOpen')
-
-    cb()
-  })
-}
-
-function closePlayer (state, config, cb) {
-  console.log('closePlayer')
-
-  // Quit any external players, like Chromecast/Airplay/etc or VLC
-  if (isCasting(state)) {
-    Cast.stop()
   }
-  if (state.playing.location === 'vlc') {
-    ipcRenderer.send('vlcQuit')
-  }
-
-  // Save volume (this session only, not in state.saved)
-  state.previousVolume = state.playing.volume
-
-  // Telemetry: track what happens after the user clicks play
-  var result = state.playing.result // 'success' or 'error'
-  if (result === 'success') telemetry.logPlayAttempt('success') // first frame displayed
-  else if (result === 'error') telemetry.logPlayAttempt('error') // codec missing, etc
-  else if (result === undefined) telemetry.logPlayAttempt('abandoned') // user exited before first frame
-  else console.error('Unknown state.playing.result', state.playing.result)
-
-  // Reset the window contents back to the home screen
-  state.window.title = config.APP_WINDOW_TITLE
-  state.playing = State.getDefaultPlayState()
-  state.server = null
-
-  // Reset the window size and location back to where it was
-  if (state.window.isFullScreen) {
-    dispatch('toggleFullScreen', false)
-  }
-  restoreBounds(state)
-
-  // Tell the WebTorrent process to kill the torrent-to-HTTP server
-  ipcRenderer.send('wt-stop-server')
-
-  ipcRenderer.send('onPlayerClose')
-
-  this.update()
-  cb()
 }
 
 // Checks whether we are connected and already casting

src/renderer/controllers/prefs-controller.js

@@ -1,4 +1,6 @@
 const State = require('../lib/state')
+const {dispatch} = require('../lib/dispatcher')
+const ipcRenderer = require('electron').ipcRenderer
 
 // Controls the Preferences screen
 module.exports = class PrefsController {
@@ -12,24 +14,23 @@ module.exports = class PrefsController {
     var state = this.state
     state.location.go({
       url: 'preferences',
-      onbeforeload: function (cb) {
+      setup: function (cb) {
         // initialize preferences
         state.window.title = 'Preferences'
         state.unsaved = Object.assign(state.unsaved || {}, {prefs: state.saved.prefs || {}})
+        ipcRenderer.send('setAllowNav', false)
         cb()
       },
-      onbeforeunload: (cb) => {
-        // save state after preferences
+      destroy: () => {
+        ipcRenderer.send('setAllowNav', true)
         this.save()
-        state.window.title = this.config.APP_WINDOW_TITLE
-        cb()
       }
     })
   }
 
   // Updates a single property in the UNSAVED prefs
-  // For example: updatePreferences("foo.bar", "baz")
-  // Call savePreferences to save to config.json
+  // For example: updatePreferences('foo.bar', 'baz')
+  // Call save() to save to config.json
   update (property, value) {
     var path = property.split('.')
     var key = this.state.unsaved.prefs
@@ -45,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

@@ -3,6 +3,8 @@ const fs = require('fs-extra')
 const path = require('path')
 const parallel = require('run-parallel')
 
+const remote = electron.remote
+
 const {dispatch} = require('../lib/dispatcher')
 
 module.exports = class SubtitlesController {
@@ -11,7 +13,7 @@ module.exports = class SubtitlesController {
   }
 
   openSubtitles () {
-    electron.remote.dialog.showOpenDialog({
+    remote.dialog.showOpenDialog({
       title: 'Select a subtitles file.',
       filters: [ { name: 'Subtitles', extensions: ['vtt', 'srt'] } ],
       properties: [ 'openFile' ]
@@ -116,17 +118,17 @@ function loadSubtitle (file, cb) {
   })
 }
 
-// Checks whether a language name like "English" or "German" matches the system
+// Checks whether a language name like 'English' or 'German' matches the system
 // language, aka the current locale
 function isSystemLanguage (language) {
   var iso639 = require('iso-639-1')
-  var osLangISO = window.navigator.language.split('-')[0] // eg "en"
-  var langIso = iso639.getCode(language) // eg "de" if language is "German"
+  var osLangISO = window.navigator.language.split('-')[0] // eg 'en'
+  var langIso = iso639.getCode(language) // eg 'de' if language is 'German'
   return langIso === osLangISO
 }
 
 // Make sure we don't have two subtitle tracks with the same label
-// Labels each track by language, eg "German", "English", "English 2", ...
+// Labels each track by language, eg 'German', 'English', 'English 2', ...
 function relabelSubtitles (subtitles) {
   var counts = {}
   subtitles.tracks.forEach(function (track) {

src/renderer/controllers/torrent-controller.js

@@ -129,8 +129,6 @@ module.exports = class TorrentController {
     //       files which are completed after a video starts to play to be added
     //       dynamically to the list of subtitles.
     // checkForSubtitles()
-
-    dispatch('update')
   }
 
   torrentFileModtimes (torrentKey, fileModtimes) {
@@ -184,9 +182,10 @@ function showDoneNotification (torrent) {
     silent: true
   })
 
-  notif.onclick = function () {
+  notif.onClick = function () {
     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/dispatcher.js

@@ -17,7 +17,7 @@ function dispatch (...args) {
 
 // Most DOM event handlers are trivial functions like `() => dispatch(<args>)`.
 // For these, `dispatcher(<args>)` is preferred because it memoizes the handler
-// function. This prevents virtual-dom from updating the listener functions on
+// function. This prevents React from updating the listener functions on
 // each update().
 function dispatcher (...args) {
   var str = JSON.stringify(args)

src/renderer/lib/migrations.js

@@ -4,13 +4,15 @@ 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
 function run (state) {
-  // Replace "{ version: 1 }" with app version (semver)
+  // Replace '{ version: 1 }' with app version (semver)
   if (!semver.valid(state.saved.version)) {
     state.saved.version = '0.0.0' // Pre-0.7.0 version, so run all migrations
   }
@@ -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

@@ -15,7 +15,7 @@ var State = module.exports = Object.assign(new EventEmitter(), {
 appConfig.filePath = path.join(config.CONFIG_PATH, 'config.json')
 
 function getDefaultState () {
-  var LocationHistory = require('./location-history')
+  var LocationHistory = require('location-history')
 
   return {
     /*
@@ -24,7 +24,11 @@ function getDefaultState () {
      */
     client: null, /* the WebTorrent client */
     server: null, /* local WebTorrent-to-HTTP server */
-    prev: {}, /* used for state diffing in updateElectron() */
+    prev: { /* used for state diffing in updateElectron() */
+      title: null,
+      progress: -1,
+      badge: null
+    },
     location: new LocationHistory(),
     window: {
       bounds: null, /* {x, y, width, height } */
@@ -50,7 +54,7 @@ function getDefaultState () {
      *
      * Config path:
      *
-     * OS X                 ~/Library/Application Support/WebTorrent/config.json
+     * Mac                  ~/Library/Application Support/WebTorrent/config.json
      * Linux (XDG)          $XDG_CONFIG_HOME/WebTorrent/config.json
      * Linux (Legacy)       ~/.config/WebTorrent/config.json
      * Windows (> Vista)    %LOCALAPPDATA%/WebTorrent/config.json
@@ -82,6 +86,7 @@ function getDefaultPlayState () {
     lastTimeUpdate: 0, /* Unix time in ms */
     mouseStationarySince: 0, /* Unix time in ms */
     playbackRate: 1,
+    volume: 1,
     subtitles: {
       tracks: [], /* subtitle tracks, each {label, language, ...} */
       selectedIndex: -1, /* current subtitle track */
@@ -99,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 */
@@ -199,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,32 +119,68 @@ 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 == null) {
+    message = 'Unexpected undefined error'
+  } else 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
+    }
   }
 
+  if (typeof stack !== 'string') stack = 'Unexpected stack: ' + stack
+  if (typeof message !== 'string') message = 'Unexpected message: ' + message
+
+  // Remove the first part of each file path in the stack trace.
+  // - Privacy: remove personal info like C:\Users\<full name>
+  // - Aggregation: this lets us find which stacktraces occur often
+  stack = stack.replace(/\(.*app.asar/g, '(...')
+
   // 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
-// "Play in VLC" codec error
+// 'Play in VLC' codec error
 function logPlayAttempt (result) {
   if (!['success', 'timeout', 'error', 'abandoned'].includes(result)) {
     return console.error('Unknown play attempt result', result)

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,19 +5,21 @@ crashReporter.init()
 
 const dragDrop = require('drag-drop')
 const electron = require('electron')
-const mainLoop = require('main-loop')
-
-const createElement = require('virtual-dom/create-element')
-const diff = require('virtual-dom/diff')
-const patch = require('virtual-dom/patch')
+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')
@@ -43,7 +45,10 @@ var ipcRenderer = electron.ipcRenderer
 
 // All state lives in state.js. `state.saved` is read from and written to a file.
 // All other state is ephemeral. First we load state.saved then initialize the app.
-var state, vdomLoop
+var state
+
+// Root React component
+var app
 
 State.load(onState)
 
@@ -52,7 +57,7 @@ State.load(onState)
 // the dock icon and drag+drop.
 function onState (err, _state) {
   if (err) return onError(err)
-  state = _state
+  state = window.state = _state // Make available for easier debugging
 
   // Create controllers
   controllers = {
@@ -66,41 +71,43 @@ function onState (err, _state) {
   }
 
   // Add first page to location history
-  state.location.go({ url: 'home' })
+  state.location.go({
+    url: 'home',
+    setup: (cb) => {
+      state.window.title = config.APP_WINDOW_TITLE
+      cb(null)
+    }
+  })
 
   // Restart everything we were torrenting last time the app ran
   resumeTorrents()
 
-  // Lazy-load other stuff, like the AppleTV module, later to keep startup fast
-  window.setTimeout(delayedInit, config.DELAYED_INIT)
-
-  // The UI is built with virtual-dom, a minimalist library extracted from React
-  // The concepts--one way data flow, a pure function that renders state to a
-  // virtual DOM tree, and a diff that applies changes in the vdom to the real
-  // DOM, are all the same. Learn more: https://facebook.github.io/react/
-  vdomLoop = mainLoop(state, render, {
-    create: createElement,
-    diff: diff,
-    patch: patch
-  })
-  document.body.appendChild(vdomLoop.target)
-
-  // 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'))
+
+  // 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()
+
+  // Warn if the download dir is gone, eg b/c an external drive is unplugged
+  checkDownloadPath()
 
   // OS integrations:
-  // ...drag and drop a torrent or video file to play or seed
-  dragDrop('body', onOpen)
+  // ...drag and drop files/text to start torrenting or seeding
+  dragDrop('body', {
+    onDrop: onOpen,
+    onDropText: onOpen
+  })
 
   // ...same thing if you paste a torrent
   document.addEventListener('paste', onPaste)
 
-  // ...focus and blur. Needed to show correct dock icon text ("badge") in OSX
+  // ...focus and blur. Needed to show correct dock icon text ('badge') in OSX
   window.addEventListener('focus', onFocus)
   window.addEventListener('blur', onBlur)
 
@@ -109,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')
@@ -132,20 +140,14 @@ function lazyLoadCast () {
   return Cast
 }
 
-// This is the (mostly) pure function from state -> UI. Returns a virtual DOM
-// tree. Any events, such as button clicks, will turn into calls to dispatch()
-function render (state) {
-  try {
-    return App(state)
-  } catch (e) {
-    console.log('rendering error: %s\n\t%s', e.message, e.stack)
-  }
-}
-
-// Calls render() to go from state -> UI, then applies to vdom to the real DOM.
+// React loop:
+// 1. update() - recompute the virtual DOM, diff, apply to the real DOM
+// 2. event - might be a click or other DOM event, or something external
+// 3. dispatch - the event handler calls dispatch(), main.js sends it to a controller
+// 4. controller - the controller handles the event, changing the state object
 function update () {
   controllers.playback.showOrHidePlayerControls()
-  vdomLoop.update(state)
+  app.setState(state)
   updateElectron()
 }
 
@@ -156,13 +158,13 @@ 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)
   }
   if (state.dock.badge !== state.prev.badge) {
     state.prev.badge = state.dock.badge
-    ipcRenderer.send('setBadge', state.dock.badge || '')
+    ipcRenderer.send('setBadge', state.dock.badge || 0)
   }
 }
 
@@ -174,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),
@@ -182,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),
@@ -202,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),
@@ -219,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),
@@ -230,11 +231,13 @@ const dispatchHandlers = {
   'escapeBack': escapeBack,
   'back': () => state.location.back(),
   'forward': () => state.location.forward(),
+  'cancel': () => state.location.cancel(),
 
   // Controlling the window
   'setDimensions': setDimensions,
   'toggleFullScreen': (setTo) => ipcRenderer.send('toggleFullScreen', setTo),
   'setTitle': (title) => { state.window.title = title },
+  'resetTitle': () => { state.window.title = config.APP_WINDOW_TITLE },
 
   // Everything else
   'onOpen': onOpen,
@@ -247,8 +250,8 @@ const dispatchHandlers = {
 
 // Events from the UI never modify state directly. Instead they call dispatch()
 function dispatch (action, ...args) {
-  // Log dispatch calls, for debugging
-  if (!['mediaMouseMoved', 'mediaTimeUpdate'].includes(action)) {
+  // Log dispatch calls, for debugging, but don't spam
+  if (!['mediaMouseMoved', 'mediaTimeUpdate', 'update'].includes(action)) {
     console.log('dispatch: %s %o', action, args)
   }
 
@@ -256,7 +259,7 @@ function dispatch (action, ...args) {
   if (handler) handler(...args)
   else console.error('Missing dispatch handler: ' + action)
 
-  // Update the virtual-dom, unless it's just a mouse move event
+  // Update the virtual DOM, unless it's just a mouse move event
   if (action !== 'mediaMouseMoved' ||
       controllers.playback.showOrHidePlayerControls()) {
     update()
@@ -301,13 +304,6 @@ function backToList () {
     // If we were already on the torrent list, scroll to the top
     var contentTag = document.querySelector('.content')
     if (contentTag) contentTag.scrollTop = 0
-
-    // Work around virtual-dom issue: it doesn't expose its redraw function,
-    // and only redraws on requestAnimationFrame(). That means when the user
-    // closes the window (hide window / minimize to tray) and we want to pause
-    // the video, we update the vdom but it keeps playing until you reopen!
-    var mediaTag = document.querySelector('video,audio')
-    if (mediaTag) mediaTag.pause()
   })
 }
 
@@ -325,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
@@ -364,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
 }
 
@@ -373,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') {
-        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()
@@ -439,9 +441,20 @@ function onVisibilityChange () {
 function onFullscreenChanged (e, isFullScreen) {
   state.window.isFullScreen = isFullScreen
   if (!isFullScreen) {
-    // Aspect ratio gets reset in fullscreen mode, so restore it (OS X)
+    // Aspect ratio gets reset in fullscreen mode, so restore it (Mac)
     ipcRenderer.send('setAspectRatio', state.playing.aspectRatio)
   }
 
   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

@@ -0,0 +1,111 @@
+const colors = require('material-ui/styles/colors')
+const React = require('react')
+
+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('./TorrentListPage'),
+  'player': require('./PlayerPage'),
+  'create-torrent': require('./CreateTorrentPage'),
+  'preferences': require('./PreferencesPage')
+}
+
+const Modals = {
+  'open-torrent-address-modal': require('../components/open-torrent-address-modal'),
+  'remove-torrent-modal': require('../components/remove-torrent-modal'),
+  'update-available-modal': require('../components/update-available-modal'),
+  'unsupported-media-modal': require('../components/unsupported-media-modal')
+}
+
+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.props.state
+
+    // Hide player controls while playing video, if the mouse stays still for a while
+    // Never hide the controls when:
+    // * The mouse is over the controls or we're scrubbing (see CSS)
+    // * The video is paused
+    // * The video is playing remotely on Chromecast or Airplay
+    var hideControls = state.location.url() === 'player' &&
+      state.playing.mouseStationarySince !== 0 &&
+      new Date().getTime() - state.playing.mouseStationarySince > 2000 &&
+      !state.playing.isPaused &&
+      state.playing.location === 'local' &&
+      state.playing.playbackRate === 1
+
+    var cls = [
+      'view-' + state.location.url(), /* e.g. view-home, view-player */
+      'is-' + process.platform /* e.g. is-darwin, is-win32, is-linux */
+    ]
+    if (state.window.isFullScreen) cls.push('is-fullscreen')
+    if (state.window.isFocused) cls.push('is-focused')
+    if (hideControls) cls.push('hide-video-controls')
+
+    var vdom = (
+      <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 = state.errors.filter((x) => now - x.time < 5000)
+    var hasErrors = recentErrors.length > 0
+
+    var errorElems = recentErrors.map(function (error, i) {
+      return (<div key={i} className='error'>{error.message}</div>)
+    })
+    return (
+      <div key='errors'
+        className={'error-popover ' + (hasErrors ? 'visible' : 'hidden')}>
+        <div key='title' className='title'>Error</div>
+        {errorElems}
+      </div>
+    )
+  }
+
+  getModal () {
+    var state = this.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 key='modal-content' className='modal-content'>
+          <ModalContents state={state} />
+        </div>
+      </div>
+    )
+  }
+
+  getView () {
+    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,209 @@
+const createTorrent = require('create-torrent')
+const path = require('path')
+const prettyBytes = require('prettier-bytes')
+const React = require('react')
+
+const {dispatch, dispatcher} = require('../lib/dispatcher')
+
+const FlatButton = require('material-ui/FlatButton').default
+const RaisedButton = require('material-ui/RaisedButton').default
+const TextField = require('material-ui/TextField').default
+const Checkbox = require('material-ui/Checkbox').default
+
+const CreateTorrentErrorPage = require('../components/create-torrent-error-page')
+const Heading = require('../components/Heading')
+const ShowMore = require('../components/ShowMore')
+
+class CreateTorrentPage extends React.Component {
+  constructor (props) {
+    super(props)
+
+    var state = this.props.state
+    var info = state.location.current()
+
+    // First, extract the base folder that the files are all in
+    var pathPrefix = info.folderPath
+    if (!pathPrefix) {
+      pathPrefix = info.files.map((x) => x.path).reduce(findCommonPrefix)
+      if (!pathPrefix.endsWith('/') && !pathPrefix.endsWith('\\')) {
+        pathPrefix = path.dirname(pathPrefix)
+      }
+    }
+
+    // Then, exclude .DS_Store and other dotfiles
+    var files = info.files
+      .filter((f) => !containsDots(f.path, pathPrefix))
+      .map((f) => ({name: f.name, path: f.path, size: f.size}))
+    if (files.length === 0) return (<CreateTorrentErrorPage state={state} />)
+
+    // Then, use the name of the base folder (or sole file, for a single file torrent)
+    // as the default name. Show all files relative to the base folder.
+    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)
+    }
+
+    // Default trackers
+    var trackers = createTorrent.announceList.join('\n')
+
+    this.state = {
+      comment: '',
+      isPrivate: false,
+      pathPrefix,
+      basePath,
+      defaultName,
+      files,
+      trackers
+    }
+
+    // Create React event handlers only once
+    this.setIsPrivate = (_, isPrivate) => this.setState({isPrivate})
+    this.setComment = (_, comment) => this.setState({comment})
+    this.setTrackers = (_, trackers) => this.setState({trackers})
+    this.handleSubmit = handleSubmit.bind(this)
+  }
+
+  render () {
+    var files = this.state.files
+
+    // 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)}`
+
+    return (
+      <div className='create-torrent'>
+        <Heading level={1}>Create torrent {this.state.defaultName}</Heading>
+        <div className='torrent-info'>{torrentInfo}</div>
+        <div className='torrent-attribute'>
+          <label>Path:</label>
+          <div>{this.state.pathPrefix}</div>
+        </div>
+        <ShowMore
+          style={{
+            marginBottom: 10
+          }}
+          hideLabel='Hide advanced settings...'
+          showLabel='Show advanced settings...' >
+          {this.renderAdvanced()}
+        </ShowMore>
+        <div className='float-right'>
+          <FlatButton
+            label='Cancel'
+            style={{
+              marginRight: 10
+            }}
+            onClick={dispatcher('cancel')}
+          />
+          <RaisedButton
+            label='Create Torrent'
+            primary
+            onClick={this.handleSubmit}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderAdvanced () {
+    // Create file list
+    var maxFileElems = 100
+    var files = this.state.files
+    var fileElems = files.slice(0, maxFileElems).map((file, i) => {
+      var relativePath = path.relative(this.state.pathPrefix, file.path)
+      return (<div key={i}>{relativePath}</div>)
+    })
+    if (files.length > maxFileElems) {
+      fileElems.push(<div key='more'>+ {files.length - maxFileElems} more</div>)
+    }
+
+    // Align the text fields
+    var textFieldStyle = { width: '' }
+    var textareaStyle = { margin: 0 }
+
+    return (
+      <div key='advanced' className='create-torrent-advanced'>
+        <div key='private' className='torrent-attribute'>
+          <label>Private:</label>
+          <Checkbox
+            className='torrent-is-private'
+            style={{display: ''}}
+            checked={this.state.isPrivate}
+            onCheck={this.setIsPrivate} />
+        </div>
+        <div key='trackers' className='torrent-attribute'>
+          <label>Trackers:</label>
+          <TextField
+            className='torrent-trackers'
+            style={textFieldStyle}
+            textareaStyle={textareaStyle}
+            multiLine
+            rows={2}
+            rowsMax={10}
+            value={this.state.trackers}
+            onChange={this.setTrackers} />
+        </div>
+        <div key='comment' className='torrent-attribute'>
+          <label>Comment:</label>
+          <TextField
+            className='torrent-comment'
+            style={textFieldStyle}
+            textareaStyle={textareaStyle}
+            hintText='Optionally describe your torrent...'
+            multiLine
+            rows={2}
+            rowsMax={10}
+            value={this.state.comment}
+            onChange={this.setComment} />
+        </div>
+        <div key='files' className='torrent-attribute'>
+          <label>Files:</label>
+          <div>{fileElems}</div>
+        </div>
+      </div>
+    )
+  }
+}
+
+function handleSubmit () {
+  var announceList = this.state.trackers
+    .split('\n')
+    .map((s) => s.trim())
+    .filter((s) => s !== '')
+  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.
+    name: this.state.defaultName,
+    path: this.state.basePath,
+    files: this.state.files,
+    announce: announceList,
+    private: this.state.isPrivate,
+    comment: this.state.comment.trim()
+  }
+  dispatch('createTorrent', options)
+}
+
+// Finds the longest common prefix
+function findCommonPrefix (a, b) {
+  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)
+}
+
+function containsDots (path, pathPrefix) {
+  var suffix = path.substring(pathPrefix.length).replace(/\\/g, '/')
+  return ('/' + suffix).includes('/.')
+}
+
+module.exports = CreateTorrentPage

src/renderer/pages/PlayerPage.js

@@ -1,27 +1,30 @@
-module.exports = Player
+const React = require('react')
+const Bitfield = require('bitfield')
+const prettyBytes = require('prettier-bytes')
+const zeroFill = require('zero-fill')
+const path = require('path')
 
-var Bitfield = require('bitfield')
-var prettyBytes = require('prettier-bytes')
-var zeroFill = require('zero-fill')
-
-var hx = require('../lib/hx')
-var TorrentSummary = require('../lib/torrent-summary')
-var {dispatch, dispatcher} = require('../lib/dispatcher')
+const TorrentSummary = require('../lib/torrent-summary')
+const {dispatch, dispatcher} = require('../lib/dispatcher')
 
 // Shows a streaming video player. Standard features + Chromecast + Airplay
-function Player (state) {
-  // Show the video as large as will fit in the window, play immediately
-  // If the video is on Chromecast or Airplay, show a title screen instead
-  var showVideo = state.playing.location === 'local'
-  return hx`
-    <div
-      class='player'
-      onwheel=${handleVolumeWheel}
-      onmousemove=${dispatcher('mediaMouseMoved')}>
-      ${showVideo ? renderMedia(state) : renderCastScreen(state)}
-      ${renderPlayerControls(state)}
+module.exports = class Player extends React.Component {
+  render () {
+    // Show the video as large as will fit in the window, play immediately
+    // If the video is on Chromecast or Airplay, show a title screen instead
+    var state = this.props.state
+    var showVideo = state.playing.location === 'local'
+    var showControls = state.playing.location !== 'external'
+    return (
+      <div
+        className='player'
+        onWheel={handleVolumeWheel}
+        onMouseMove={dispatcher('mediaMouseMoved')}>
+        {showVideo ? renderMedia(state) : renderCastScreen(state)}
+        {showControls ? renderPlayerControls(state) : null}
       </div>
-  `
+    )
+  }
 }
 
 // Handles volume change by wheel
@@ -91,42 +94,44 @@ function renderMedia (state) {
     for (var i = 0; i < state.playing.subtitles.tracks.length; i++) {
       var track = state.playing.subtitles.tracks[i]
       var isSelected = state.playing.subtitles.selectedIndex === i
-      trackTags.push(hx`
+      trackTags.push(
         <track
-          ${isSelected ? 'default' : ''}
-          label=${track.label}
+          key={i}
+          default={isSelected ? 'default' : ''}
+          label={track.label}
           type='subtitles'
-          src=${track.buffer}>
-      `)
+          src={track.buffer} />
+      )
     }
   }
 
   // Create the <audio> or <video> tag
-  var mediaTag = hx`
-    <div
-      src='${state.server.localURL}'
-      ondblclick=${dispatcher('toggleFullScreen')}
-      onloadedmetadata=${onLoadedMetadata}
-      onended=${onEnded}
-      onstalling=${dispatcher('mediaStalled')}
-      onerror=${dispatcher('mediaError')}
-      ontimeupdate=${dispatcher('mediaTimeUpdate')}
-      onencrypted=${dispatcher('mediaEncrypted')}
-      oncanplay=${onCanPlay}>
-      ${trackTags}
-    </div>
-  `
-  mediaTag.tagName = state.playing.type // conditional tag name
+  var MediaTagName = state.playing.type
+  var mediaTag = (
+    <MediaTagName
+      src={state.server.localURL}
+      onDoubleClick={dispatcher('toggleFullScreen')}
+      onLoadedMetadata={onLoadedMetadata}
+      onEnded={onEnded}
+      onStalled={dispatcher('mediaStalled')}
+      onError={dispatcher('mediaError')}
+      onTimeUpdate={dispatcher('mediaTimeUpdate')}
+      onEncrypted={dispatcher('mediaEncrypted')}
+      onCanPlay={onCanPlay}>
+      {trackTags}
+    </MediaTagName>
+  )
 
   // Show the media.
-  return hx`
+  return (
     <div
-      class='letterbox'
-      onmousemove=${dispatcher('mediaMouseMoved')}>
-      ${mediaTag}
-      ${renderOverlay(state)}
+      key='letterbox'
+      className='letterbox'
+      onMouseMove={dispatcher('mediaMouseMoved')}>
+      {mediaTag}
+      {renderOverlay(state)}
     </div>
-  `
+  )
 
   // As soon as we know the video dimensions, resize the window
   function onLoadedMetadata (e) {
@@ -177,11 +182,11 @@ function renderOverlay (state) {
     return
   }
 
-  return hx`
-    <div class='media-overlay-background' style=${style}>
-      <div class='media-overlay'>${elems}</div>
+  return (
+    <div key='overlay' className='media-overlay-background' style={style}>
+      <div className='media-overlay'>{elems}</div>
     </div>
-  `
+  )
 }
 
 function renderAudioMetadata (state) {
@@ -207,36 +212,36 @@ function renderAudioMetadata (state) {
   // Show a small info box in the middle of the screen with title/album/etc
   var elems = []
   if (artist) {
-    elems.push(hx`
-      <div class='audio-artist'>
-        <label>Artist</label>${artist}
+    elems.push((
+      <div key='artist' className='audio-artist'>
+        <label>Artist</label>{artist}
       </div>
-    `)
+    ))
   }
   if (album) {
-    elems.push(hx`
-      <div class='audio-album'>
-        <label>Album</label>${album}
+    elems.push((
+      <div key='album' className='audio-album'>
+        <label>Album</label>{album}
       </div>
-    `)
+    ))
   }
   if (track) {
-    elems.push(hx`
-      <div class='audio-track'>
-        <label>Track</label>${track}
+    elems.push((
+      <div key='track' className='audio-track'>
+        <label>Track</label>{track}
       </div>
-    `)
+    ))
   }
 
   // Align the title with the other info, if available. Otherwise, center title
-  var emptyLabel = hx`<label></label>`
-  elems.unshift(hx`
-    <div class='audio-title'>
-      ${elems.length ? emptyLabel : undefined}${title}
+  var emptyLabel = (<label />)
+  elems.unshift((
+    <div key='title' className='audio-title'>
+      {elems.length ? emptyLabel : undefined}{title}
     </div>
-  `)
+  ))
 
-  return hx`<div class='audio-metadata'>${elems}</div>`
+  return (<div key='audio-metadata' className='audio-metadata'>{elems}</div>)
 }
 
 function renderLoadingSpinner (state) {
@@ -252,16 +257,16 @@ function renderLoadingSpinner (state) {
     fileProgress = Math.floor(100 * file.numPiecesPresent / file.numPieces)
   }
 
-  return hx`
-    <div class='media-stalled'>
-      <div class='loading-spinner'>&nbsp;</div>
-      <div class='loading-status ellipsis'>
-        <span class='progress'>${fileProgress}%</span> downloaded,
-        <span>↓ ${prettyBytes(prog.downloadSpeed || 0)}/s</span>
-        <span>↑ ${prettyBytes(prog.uploadSpeed || 0)}/s</span>
+  return (
+    <div key='loading' className='media-stalled'>
+      <div key='loading-spinner' className='loading-spinner'>&nbsp;</div>
+      <div key='loading-progress' className='loading-status ellipsis'>
+        <span className='progress'>{fileProgress}%</span> downloaded,
+        <span>↓ {prettyBytes(prog.downloadSpeed || 0)}/s</span>
+        <span>↑ {prettyBytes(prog.uploadSpeed || 0)}/s</span>
       </div>
     </div>
-  `
+  )
 }
 
 function renderCastScreen (state) {
@@ -278,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'
@@ -300,15 +308,15 @@ function renderCastScreen (state) {
     backgroundImage: cssBackgroundImagePoster(state)
   }
 
-  return hx`
-    <div class='letterbox' style=${style}>
-      <div class='cast-screen'>
-        <i class='icon'>${castIcon}</i>
-        <div class='cast-type'>${castType}</div>
-        <div class='cast-status'>${castStatus}</div>
+  return (
+    <div key='cast' className='letterbox' style={style}>
+      <div className='cast-screen'>
+        <i className='icon'>{castIcon}</i>
+        <div key='type' className='cast-type'>{castType}</div>
+        <div key='status' className='cast-status'>{castStatus}</div>
       </div>
     </div>
-  `
+  )
 }
 
 function renderCastOptions (state) {
@@ -320,46 +328,46 @@ function renderCastOptions (state) {
   var items = devices.map(function (device, ix) {
     var isSelected = player.device === device
     var name = device.name
-    return hx`
-      <li onclick=${dispatcher('selectCastDevice', ix)}>
-        <i.icon>${isSelected ? 'radio_button_checked' : 'radio_button_unchecked'}</i>
-        ${name}
+    return (
+      <li key={ix} onClick={dispatcher('selectCastDevice', ix)}>
+        <i className='icon'>{isSelected ? 'radio_button_checked' : 'radio_button_unchecked'}</i>
+        {name}
       </li>
-    `
+    )
   })
 
-  return hx`
-    <ul.options-list>
-      ${items}
+  return (
+    <ul key='cast-options' className='options-list'>
+      {items}
     </ul>
-  `
+  )
 }
 
-function renderSubtitlesOptions (state) {
+function renderSubtitleOptions (state) {
   var subtitles = state.playing.subtitles
   if (!subtitles.tracks.length || !subtitles.showMenu) return
 
   var items = subtitles.tracks.map(function (track, ix) {
     var isSelected = state.playing.subtitles.selectedIndex === ix
-    return hx`
-      <li onclick=${dispatcher('selectSubtitle', ix)}>
-        <i.icon>${'radio_button_' + (isSelected ? 'checked' : 'unchecked')}</i>
-        ${track.label}
+    return (
+      <li key={ix} onClick={dispatcher('selectSubtitle', ix)}>
+        <i className='icon'>{'radio_button_' + (isSelected ? 'checked' : 'unchecked')}</i>
+        {track.label}
       </li>
-    `
+    )
   })
 
   var noneSelected = state.playing.subtitles.selectedIndex === -1
   var noneClass = 'radio_button_' + (noneSelected ? 'checked' : 'unchecked')
-  return hx`
-    <ul.options-list>
-      ${items}
-      <li onclick=${dispatcher('selectSubtitle', -1)}>
-        <i.icon>${noneClass}</i>
+  return (
+    <ul key='subtitle-options' className='options-list'>
+      {items}
+      <li onClick={dispatcher('selectSubtitle', -1)}>
+        <i className='icon'>{noneClass}</i>
         None
       </li>
     </ul>
-  `
+  )
 }
 
 function renderPlayerControls (state) {
@@ -372,45 +380,48 @@ function renderPlayerControls (state) {
       : ''
 
   var elements = [
-    hx`
-      <div class='playback-bar'>
-        ${renderLoadingBar(state)}
-        <div
-          class='playback-cursor'
-          style=${playbackCursorStyle}>
-        </div>
-        <div
-          class='scrub-bar'
-          draggable='true'
-          ondragstart=${handleDragStart}
-          onclick=${handleScrub},
-          ondrag=${handleScrub}>
-        </div>
-      </div>
-    `,
-    hx`
-      <i class='icon play-pause float-left' onclick=${dispatcher('playPause')}>
-        ${state.playing.isPaused ? 'play_arrow' : 'pause'}
-      </i>
-    `,
-    hx`
-      <i
-        class='icon fullscreen float-right'
-        onclick=${dispatcher('toggleFullScreen')}>
-        ${state.window.isFullScreen ? 'fullscreen_exit' : 'fullscreen'}
-      </i>
-    `
+    <div key='playback-bar' className='playback-bar'>
+      {renderLoadingBar(state)}
+      <div
+        key='cursor'
+        className='playback-cursor'
+        style={playbackCursorStyle}
+      />
+      <div
+        key='scrub-bar'
+        className='scrub-bar'
+        draggable='true'
+        onDragStart={handleDragStart}
+        onClick={handleScrub}
+        onDrag={handleScrub}
+      />
+    </div>,
+
+    <i
+      key='play'
+      className='icon play-pause float-left'
+      onClick={dispatcher('playPause')}>
+      {state.playing.isPaused ? 'play_arrow' : 'pause'}
+    </i>,
+
+    <i
+      key='fullscreen'
+      className='icon fullscreen float-right'
+      onClick={dispatcher('toggleFullScreen')}>
+      {state.window.isFullScreen ? 'fullscreen_exit' : 'fullscreen'}
+    </i>
   ]
 
   if (state.playing.type === 'video') {
     // show closed captions icon
-    elements.push(hx`
-      <i.icon.closed-caption.float-right
-        class=${captionsClass}
-        onclick=${handleSubtitles}>
+    elements.push((
+      <i
+        key='subtitles'
+        className={'icon closed-caption float-right ' + captionsClass}
+        onClick={handleSubtitles}>
         closed_caption
       </i>
-    `)
+    ))
   }
 
   // If we've detected a Chromecast or AppleTV, the user can play video there
@@ -447,13 +458,14 @@ function renderPlayerControls (state) {
     }
     var buttonIcon = buttonIcons[castType][isCasting]
 
-    elements.push(hx`
-      <i.icon.device.float-right
-        class=${buttonClass}
-        onclick=${buttonHandler}>
-        ${buttonIcon}
+    elements.push((
+      <i
+        key={castType}
+        className={'icon device float-right ' + buttonClass}
+        onClick={buttonHandler}>
+        {buttonIcon}
       </i>
-    `)
+    ))
   })
 
   // Render volume slider
@@ -469,50 +481,50 @@ function renderPlayerControls (state) {
       'color-stop(' + (volume * 100) + '%, #727272))'
   }
 
-  elements.push(hx`
-    <div class='volume float-left'>
+  // TODO: dcposch change the range input to use value / onChanged instead of
+  // "readonly" / onMouse[Down,Move,Up]
+  elements.push((
+    <div key='volume' className='volume float-left'>
       <i
-        class='icon volume-icon float-left'
-        onmousedown=${handleVolumeMute}>
-        ${volumeIcon}
+        className='icon volume-icon float-left'
+        onMouseDown={handleVolumeMute}>
+        {volumeIcon}
       </i>
       <input
-        class='volume-slider float-right'
+        className='volume-slider float-right'
         type='range' min='0' max='1' step='0.05'
-        value=${volumeChanging !== false ? volumeChanging : volume}
-        onmousedown=${handleVolumeScrub}
-        onmouseup=${handleVolumeScrub}
-        onmousemove=${handleVolumeScrub}
-        style=${volumeStyle}
+        value={volume}
+        onChange={handleVolumeScrub}
+        style={volumeStyle}
       />
     </div>
-  `)
+  ))
 
   // Show video playback progress
   var currentTimeStr = formatTime(state.playing.currentTime)
   var durationStr = formatTime(state.playing.duration)
-  elements.push(hx`
-    <span class='time float-left'>
-      ${currentTimeStr} / ${durationStr}
+  elements.push((
+    <span key='time' className='time float-left'>
+      {currentTimeStr} / {durationStr}
     </span>
-  `)
+  ))
 
   // render playback rate
   if (state.playing.playbackRate !== 1) {
-    elements.push(hx`
-      <span class='rate float-left'>
-        ${state.playing.playbackRate}x
+    elements.push((
+      <span key='rate' className='rate float-left'>
+        {state.playing.playbackRate}x
       </span>
-    `)
+    ))
   }
 
-  return hx`
-    <div class='controls'>
-      ${elements}
-      ${renderCastOptions(state)}
-      ${renderSubtitlesOptions(state)}
+  return (
+    <div key='controls' className='controls'>
+      {elements}
+      {renderCastOptions(state)}
+      {renderSubtitleOptions(state)}
     </div>
-  `
+  )
 
   function handleDragStart (e) {
     // Prevent the cursor from changing, eg to a green + icon on Mac
@@ -543,21 +555,7 @@ function renderPlayerControls (state) {
 
   // Handles volume slider scrub
   function handleVolumeScrub (e) {
-    switch (e.type) {
-      case 'mouseup':
-        volumeChanging = false
-        dispatch('setVolume', e.offsetX / 50)
-        break
-      case 'mousedown':
-        volumeChanging = this.value
-        break
-      case 'mousemove':
-        // only change if move was started by click
-        if (volumeChanging !== false) {
-          volumeChanging = this.value
-        }
-        break
-    }
+    dispatch('setVolume', e.target.value)
   }
 
   function handleSubtitles (e) {
@@ -570,11 +568,8 @@ function renderPlayerControls (state) {
   }
 }
 
-// lets scrub without sending to volume backend
-var volumeChanging = false
-
 // Renders the loading bar. Shows which parts of the torrent are loaded, which
-// can be "spongey" / non-contiguous
+// can be 'spongey' / non-contiguous
 function renderLoadingBar (state) {
   var torrentSummary = state.getPlayingTorrentSummary()
   if (!torrentSummary.progress) {
@@ -597,18 +592,15 @@ function renderLoadingBar (state) {
   }
 
   // Output some bars to show which parts of the file are loaded
-  return hx`
-    <div class='loading-bar'>
-      ${parts.map(function (part) {
-        var style = {
-          left: (100 * part.start / fileProg.numPieces) + '%',
-          width: (100 * part.count / fileProg.numPieces) + '%'
-        }
+  var loadingBarElems = parts.map(function (part, i) {
+    var style = {
+      left: (100 * part.start / fileProg.numPieces) + '%',
+      width: (100 * part.count / fileProg.numPieces) + '%'
+    }
 
-        return hx`<div class='loading-bar-part' style=${style}></div>`
-      })}
-    </div>
-  `
+    return (<div key={i} className='loading-bar-part' style={style} />)
+  })
+  return (<div key='loading-bar' className='loading-bar'>{loadingBarElems}</div>)
 }
 
 // Returns the CSS background-image string for a poster image + dark vignette
@@ -616,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,174 @@
+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 () {
+    var isFileHandler = this.props.state.unsaved.prefs.isFileHandler
+    if (isFileHandler) {
+      return (
+        <Preference>
+          <p>WebTorrent is your default torrent app. Hooray!</p>
+        </Preference>
+      )
+    }
+    return (
+      <Preference>
+        <p>WebTorrent is not currently the default torrent app.</p>
+        <RaisedButton
+          className='control'
+          onClick={this.handleSetDefaultApp}
+          label='Make WebTorrent the default'
+        />
+      </Preference>
+    )
+  }
+
+  handleSetDefaultApp () {
+    dispatch('updatePreferences', 'isFileHandler', true)
+  }
+
+  render () {
+    var style = {
+      color: colors.grey400,
+      marginLeft: 25,
+      marginRight: 25
+    }
+    return (
+      <div style={style} >
+        <PreferencesSection title='Downloads'>
+          {this.downloadPathSelector()}
+        </PreferencesSection>
+        <PreferencesSection title='Playback'>
+          {this.openExternalPlayerCheckbox()}
+          {this.externalPlayerPathSelector()}
+        </PreferencesSection>
+        <PreferencesSection title='Default torrent app'>
+          {this.setDefaultAppButton()}
+        </PreferencesSection>
+      </div>
+    )
+  }
+}
+
+class PreferencesSection extends React.Component {
+  static get propTypes () {
+    return {
+      title: React.PropTypes.string
+    }
+  }
+
+  render () {
+    var style = {
+      marginBottom: 25,
+      marginTop: 25
+    }
+    return (
+      <div style={style}>
+        <Heading level={2}>{this.props.title}</Heading>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+class Preference extends React.Component {
+  render () {
+    var style = { marginBottom: 10 }
+    return (<div style={style}>{this.props.children}</div>)
+  }
+}
+
+module.exports = PreferencesPage

src/renderer/pages/TorrentListPage.js

@@ -0,0 +1,390 @@
+const React = require('react')
+const prettyBytes = require('prettier-bytes')
+
+const TorrentSummary = require('../lib/torrent-summary')
+const TorrentPlayer = require('../lib/torrent-player')
+const {dispatcher} = require('../lib/dispatcher')
+
+module.exports = class TorrentList extends React.Component {
+  render () {
+    var state = this.props.state
+
+    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'>
+        {contents}
+      </div>
+    )
+  }
+
+  renderTorrent (torrentSummary) {
+    var state = this.props.state
+    var infoHash = torrentSummary.infoHash
+    var isSelected = infoHash && state.selectedInfoHash === infoHash
+
+    // Background image: show some nice visuals, like a frame from the movie, if possible
+    var style = {}
+    if (torrentSummary.posterFileName) {
+      var gradient = isSelected
+        ? 'linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%)'
+        : 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)'
+      var posterPath = TorrentSummary.getPosterPath(torrentSummary)
+      style.backgroundImage = gradient + `, url('${posterPath}')`
+    }
+
+    // Foreground: name of the torrent, basic info like size, play button,
+    // cast buttons if available, and delete
+    var classes = ['torrent']
+    //  playStatus turns the play button into a loading spinner or error icon
+    if (torrentSummary.playStatus) classes.push(torrentSummary.playStatus)
+    if (isSelected) classes.push('selected')
+    if (!infoHash) classes.push('disabled')
+    if (!torrentSummary.torrentKey) throw new Error('Missing torrentKey')
+    return (
+      <div
+        key={torrentSummary.torrentKey}
+        style={style}
+        className={classes.join(' ')}
+        onContextMenu={infoHash && dispatcher('openTorrentContextMenu', infoHash)}
+        onClick={infoHash && dispatcher('toggleSelectTorrent', infoHash)}>
+        {this.renderTorrentMetadata(torrentSummary)}
+        {infoHash ? this.renderTorrentButtons(torrentSummary) : null}
+        {isSelected ? this.renderTorrentDetails(torrentSummary) : null}
+      </div>
+    )
+  }
+
+  // Show name, download status, % complete
+  renderTorrentMetadata (torrentSummary) {
+    var name = torrentSummary.name || 'Loading torrent...'
+    var elements = [(
+      <div key='name' className='name ellipsis'>{name}</div>
+    )]
+
+    // If it's downloading/seeding then show progress info
+    var prog = torrentSummary.progress
+    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()}
+          {renderPeers()}
+          {renderDownloadSpeed()}
+          {renderUploadSpeed()}
+          {renderEta()}
+        </div>
+      )
+    }
+
+    return (<div key='metadata' className='metadata'>{elements}</div>)
+
+    function renderPercentProgress () {
+      var progress = Math.floor(100 * prog.progress)
+      return (<span key='percent-progress'>{progress}%</span>)
+    }
+
+    function renderTotalProgress () {
+      var downloaded = prettyBytes(prog.downloaded)
+      var total = prettyBytes(prog.length || 0)
+      if (downloaded === total) {
+        return (<span key='total-progress'>{downloaded}</span>)
+      } else {
+        return (<span key='total-progress'>{downloaded} / {total}</span>)
+      }
+    }
+
+    function renderPeers () {
+      if (prog.numPeers === 0) return
+      var count = prog.numPeers === 1 ? 'peer' : 'peers'
+      return (<span key='peers'>{prog.numPeers} {count}</span>)
+    }
+
+    function renderDownloadSpeed () {
+      if (prog.downloadSpeed === 0) return
+      return (<span key='download'>↓ {prettyBytes(prog.downloadSpeed)}/s</span>)
+    }
+
+    function renderUploadSpeed () {
+      if (prog.uploadSpeed === 0) return
+      return (<span key='upload'>↑ {prettyBytes(prog.uploadSpeed)}/s</span>)
+    }
+
+    function renderEta () {
+      var downloaded = prog.downloaded
+      var total = prog.length || 0
+      var missing = total - downloaded
+      var downloadSpeed = prog.downloadSpeed
+      if (downloadSpeed === 0 || missing === 0) return
+
+      var rawEta = missing / downloadSpeed
+      var hours = Math.floor(rawEta / 3600) % 24
+      var minutes = Math.floor(rawEta / 60) % 60
+      var seconds = Math.floor(rawEta % 60)
+
+      // Only display hours and minutes if they are greater than 0 but always
+      // display minutes if hours is being displayed
+      var hoursStr = hours ? hours + 'h' : ''
+      var minutesStr = (hours || minutes) ? minutes + 'm' : ''
+      var secondsStr = seconds + 's'
+
+      return (<span>ETA: {hoursStr} {minutesStr} {secondsStr}</span>)
+    }
+  }
+
+  // Download button toggles between torrenting (DL/seed) and paused
+  // Play button starts streaming the torrent immediately, unpausing if needed
+  renderTorrentButtons (torrentSummary) {
+    var infoHash = torrentSummary.infoHash
+
+    var playIcon, playTooltip, playClass
+    if (torrentSummary.playStatus === 'timeout') {
+      playIcon = 'warning'
+      playTooltip = 'Playback timed out. No seeds? No internet? Click to try again.'
+    } else {
+      playIcon = 'play_arrow'
+      playTooltip = 'Start streaming'
+    }
+
+    var downloadIcon, downloadTooltip
+    if (torrentSummary.status === 'seeding') {
+      downloadIcon = 'file_upload'
+      downloadTooltip = 'Seeding. Click to stop.'
+    } else if (torrentSummary.status === 'downloading') {
+      downloadIcon = 'file_download'
+      downloadTooltip = 'Torrenting. Click to stop.'
+    } else {
+      downloadIcon = 'file_download'
+      downloadTooltip = 'Click to start torrenting.'
+    }
+
+    // Only show the play/dowload buttons for torrents that contain playable media
+    var playButton, downloadButton, positionElem
+    if (!torrentSummary.error) {
+      downloadButton = (
+        <i
+          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}
+        {downloadButton}
+        <i
+          key='delete-button'
+          className='icon delete'
+          title='Remove torrent'
+          onClick={dispatcher('confirmDeleteTorrent', infoHash, false)}>
+          close
+        </i>
+      </div>
+    )
+  }
+
+  // Show files, per-file download status and play buttons, and so on
+  renderTorrentDetails (torrentSummary) {
+    var filesElement
+    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
+        .filter((file) => !file.path.includes('/.____padding_file/'))
+        .map((file, index) => ({ file, index }))
+        .sort(function (a, b) {
+          if (a.file.name < b.file.name) return -1
+          if (b.file.name < a.file.name) return 1
+          return 0
+        })
+        .map((object) => this.renderFileRow(torrentSummary, object.file, object.index))
+
+      filesElement = (
+        <div key='files' className='files'>
+          <table>
+            <tbody>
+              {fileRows}
+            </tbody>
+          </table>
+        </div>
+      )
+    }
+
+    return (
+      <div key='details' className='torrent-details'>
+        {filesElement}
+      </div>
+    )
+  }
+
+  // Show a single torrentSummary file in the details view for a single torrent
+  renderFileRow (torrentSummary, file, index) {
+    // First, find out how much of the file we've downloaded
+    // Are we even torrenting it?
+    var isSelected = torrentSummary.selections && torrentSummary.selections[index]
+    var isDone = false // Are we finished torrenting it?
+    var progress = ''
+    if (torrentSummary.progress && torrentSummary.progress.files &&
+        torrentSummary.progress.files[index]) {
+      var fileProg = torrentSummary.progress.files[index]
+      isDone = fileProg.numPiecesPresent === fileProg.numPieces
+      progress = Math.round(100 * fileProg.numPiecesPresent / fileProg.numPieces) + '%'
+    }
+
+    // Second, for media files where we saved our position, show how far we got
+    var positionElem
+    if (file.currentTime) {
+      // Radial progress bar. 0% = start from 0:00, 270% = 3/4 of the way thru
+      positionElem = this.renderRadialProgressBar(file.currentTime / file.duration)
+    }
+
+    // Finally, render the file as a table row
+    var isPlayable = TorrentPlayer.isPlayable(file)
+    var infoHash = torrentSummary.infoHash
+    var icon
+    var handleClick
+    if (isPlayable) {
+      icon = 'play_arrow' /* playable? add option to play */
+      handleClick = dispatcher('playFile', infoHash, index)
+    } else {
+      icon = 'description' /* file icon, opens in OS default app */
+      handleClick = 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
+    return (
+      <tr key={index} onClick={handleClick}>
+        <td className={'col-icon ' + rowClass}>
+          {positionElem}
+          <i className='icon'>{icon}</i>
+        </td>
+        <td className={'col-name ' + rowClass}>
+          {file.name}
+        </td>
+        <td className={'col-progress ' + rowClass}>
+          {isSelected ? progress : ''}
+        </td>
+        <td className={'col-size ' + rowClass}>
+          {prettyBytes(file.length)}
+        </td>
+        <td className='col-select'
+          onClick={dispatcher('toggleTorrentFile', infoHash, index)}>
+          <i className='icon'>{isSelected ? 'close' : 'add'}</i>
+        </td>
+      </tr>
+    )
+  }
+
+  renderRadialProgressBar (fraction, cssClass) {
+    var rotation = 360 * fraction
+    var transformFill = {transform: 'rotate(' + (rotation / 2) + 'deg)'}
+    var transformFix = {transform: 'rotate(' + rotation + 'deg)'}
+
+    return (
+      <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='mask-half' className='mask half'>
+            <div key='fill' className='fill' style={transformFill} />
+            <div key='fill-fix' className='fill fix' style={transformFix} />
+          </div>
+        </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/webtorrent.js

@@ -2,14 +2,16 @@
 // process from the main window.
 console.time('init')
 
-var WebTorrent = require('webtorrent')
-var defaultAnnounceList = require('create-torrent').announceList
+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 musicmetadata = require('musicmetadata')
 var networkAddress = require('network-address')
 var path = require('path')
+var WebTorrent = require('webtorrent')
+var zeroFill = require('zero-fill')
 
 var crashReporter = require('../crash-reporter')
 var config = require('../config')
@@ -26,9 +28,36 @@ global.WEBTORRENT_ANNOUNCE = defaultAnnounceList
   .map((arr) => arr[0])
   .filter((url) => url.indexOf('wss://') === 0 || url.indexOf('ws://') === 0)
 
+/**
+ * WebTorrent version.
+ */
+var VERSION = require('../../package.json').version
+
+/**
+ * Version number in Azureus-style. Generated from major and minor semver version.
+ * For example:
+ *   '0.16.1' -> '0016'
+ *   '1.2.5' -> '0102'
+ */
+var VERSION_STR = VERSION.match(/([0-9]+)/g)
+  .slice(0, 2)
+  .map((v) => zeroFill(2, v))
+  .join('')
+
+/**
+ * Version prefix string (used in peer ID). WebTorrent uses the Azureus-style
+ * encoding: '-', two characters for client id ('WW'), four ascii digits for version
+ * number, '-', followed by random numbers.
+ * For example:
+ *   '-WW0102-'...
+ */
+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 = new WebTorrent()
+var client = window.client = new WebTorrent({
+  peerId: Buffer.from(VERSION_PREFIX + crypto.randomBytes(6).toString('hex'))
+})
 
 // WebTorrent-to-HTTP streaming sever
 var server = null
@@ -68,6 +97,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

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,24 @@ 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%;
+  margin: 0;
+  padding: 0;
+}
+
 table {
   table-layout: fixed;
 }
@@ -64,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);
 }
 
 /*
@@ -80,9 +91,7 @@ table {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: local('Material Icons'),
-       local('MaterialIcons-Regular'),
-       url(../static/MaterialIcons-Regular.woff2) format('woff2');
+  src: url('MaterialIcons-Regular.woff2') format('woff2');
 }
 
 .icon {
@@ -129,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;
@@ -232,7 +221,7 @@ table {
   overflow-x: hidden;
   overflow-y: overlay;
   flex: 1 1 auto;
-  margin-top: 37px;
+  margin-top: 38px;
 }
 
 .app.view-player .content {
@@ -283,10 +272,12 @@ table {
 .create-torrent {
   padding: 10px 25px;
   overflow: hidden;
+  font: 16px/24px BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
 }
 
 .create-torrent .torrent-attribute {
   white-space: nowrap;
+  margin: 8px 0;
 }
 
 .create-torrent .torrent-attribute>* {
@@ -294,13 +285,12 @@ table {
 }
 
 .create-torrent .torrent-attribute label {
-  width: 60px;
-  margin-right: 10px;
+  width: 100px;
   vertical-align: top;
 }
 
 .create-torrent .torrent-attribute>div {
-  width: calc(100% - 90px);
+  width: calc(100% - 100px);
 }
 
 .create-torrent .torrent-attribute div {
@@ -309,29 +299,8 @@ table {
   text-overflow: ellipsis;
 }
 
-.create-torrent .torrent-attribute textarea {
-  width: calc(100% - 80px);
-  height: 80px;
-  color: #eee;
-  background-color: transparent;
-  line-height: 1.5;
-  font-size: 14px;
-  font-family: inherit;
-  border-radius: 2px;
-  padding: 4px 6px;
-}
-
-.create-torrent textarea.torrent-trackers {
-  height: 200px;
-}
-
-.create-torrent input.torrent-is-private {
-  margin: 0;
-}
-
 /*
  * BUTTONS
- * See https://www.google.com/design/spec/components/buttons.html
  */
 
 a,
@@ -354,64 +323,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
  */
@@ -423,7 +334,7 @@ input[type='text'] {
   background-position: center;
   transition: -webkit-filter 0.1s ease-out;
   position: relative;
-  animation: fadein .4s;
+  animation: fadein 0.5s;
 }
 
 .torrent,
@@ -485,21 +396,7 @@ input[type='text'] {
 }
 
 .torrent .buttons .download.downloading {
-  animation-name: greenpulse;
-  animation-duration: 0.8s;
-  animation-direction: alternate;
-  animation-iteration-count: infinite;
-}
-
-@keyframes greenpulse {
-  0% {
-    color: #ffffff;
-    padding-top: 4px;
-  }
-  100% {
-    color: #44dd44;
-    padding-top: 6px;
-  }
+  color: #44dd44;
 }
 
 .torrent .buttons .download.seeding {
@@ -558,6 +455,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
  */
@@ -619,10 +529,6 @@ body.drag .app::after {
   height: 28px;
 }
 
-.torrent-details td {
-  vertical-align: center;
-}
-
 .torrent-details tr:hover {
   background-color: rgba(200, 200, 200, 0.3);
 }
@@ -640,7 +546,7 @@ body.drag .app::after {
 }
 
 .torrent-details td.col-icon {
-  width: 3em;
+  width: 45px;
   padding-left: 16px;
 }
 
@@ -656,17 +562,17 @@ body.drag .app::after {
 }
 
 .torrent-details td.col-progress {
-  width: 4em;
+  width: 60px;
   text-align: right;
 }
 
 .torrent-details td.col-size {
-  width: 4em;
+  width: 60px;
   text-align: right;
 }
 
 .torrent-details td.col-select {
-  width: 3em;
+  width: 45px;
   padding-right: 13px;
   text-align: right;
 }
@@ -911,173 +817,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
  */
@@ -1236,3 +975,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

@@ -3,9 +3,11 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="main.css" charset="utf-8">
+    <title>WebTorrent Desktop</title>
+    <link rel="stylesheet" href="main.css">
   </head>
   <body>
-    <script async src="main.js"></script>
+    <div id='body'></div>
+    <script>require('../build/renderer/main.js')</script>
   </body>
 </html>

static/webtorrent.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>WebTorrent Desktop</title>
     <style>
       body {
         background-color: #282828;
@@ -14,9 +15,11 @@
         height: 140px;
       }
     </style>
+    <script>
+      require('../build/renderer/webtorrent.js')
+    </script>
   </head>
   <body>
-    <script async src="webtorrent.js"></script>
-    <img src="../static/WebTorrent.png">
+    <img alt="WebTorrent" src="WebTorrent.png">
   </body>
 </html>