0.10.0

Add Smoke Tests to CONTRIBUTING.md

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-dist
+build
+dist

AUTHORS.md

@@ -2,29 +2,30 @@
 
 #### 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)
+- 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)
+- Andrea Tupini (tupini07@gmail.com)
 
 #### Generated by bin/update-authors.sh.

CHANGELOG.md

@@ -1,17 +1,51 @@
 # WebTorrent Desktop Version History
 
+## 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 client. 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>
@@ -22,7 +22,7 @@
 ## Screenshot
 
 <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-main.png" width="612" height="749" alt="screenshot" align="center">
 </p>
 
 ## How to Contribute
@@ -41,7 +41,7 @@ $ npm start
 
 ### Package app
 
-Builds app binaries for OS X, Linux, and Windows.
+Builds app binaries for Mac, Linux, and Windows.
 
 ```
 $ npm run package
@@ -57,23 +57,23 @@ 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.
 
-On OS X, first install [XQuartz](http://www.xquartz.org/), then run:
+On Mac, first install [XQuartz](http://www.xquartz.org/), then run:
 
 ```
 brew install wine

bin/check-deps.js

@@ -45,7 +45,13 @@ 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']
+var EXECUTABLE_DEPS = [
+  'gh-release',
+  'standard',
+  'babel-cli',
+  'babel-plugin-syntax-jsx',
+  'babel-plugin-transform-react-jsx'
+]
 
 main()
 

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

@@ -2,7 +2,7 @@
 # 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 "require('" src/ bin/ -R |
     grep '.js:' |
     sed "s/.*require('\([^'\/]*\).*/\1/" |
     grep -v '^\.' |

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,
@@ -102,20 +109,20 @@ var all = {
 }
 
 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)
       })
     }

bin/update-authors.sh

@@ -2,16 +2,16 @@
 
 # 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)/;
   $seen{$_} = push @authors, "- ", $_;
 }
 END {

index.js

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

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.10.0",
   "author": {
     "name": "WebTorrent, LLC",
     "email": "feross@webtorrent.io",
@@ -15,35 +15,39 @@
   },
   "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-prebuilt": "1.3.2",
+    "fs-extra": "^0.30.0",
+    "hat": "0.0.3",
     "iso-639-1": "^1.2.1",
     "languagedetect": "^1.1.1",
-    "main-loop": "^3.2.0",
+    "location-history": "^1.0.0",
     "musicmetadata": "^2.0.2",
     "network-address": "^1.1.0",
     "parse-torrent": "^5.7.3",
     "prettier-bytes": "^1.0.1",
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1",
     "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-react-jsx": "^6.8.0",
     "cross-zip": "^2.0.1",
     "electron-osx-sign": "^0.3.0",
     "electron-packager": "^7.0.0",
@@ -58,6 +62,9 @@
     "run-series": "^1.1.4",
     "standard": "^7.0.0"
   },
+  "engines": {
+    "node": ">=4.0.0"
+  },
   "homepage": "https://webtorrent.io",
   "keywords": [
     "desktop",
@@ -65,8 +72,8 @@
     "electron-app",
     "hybrid webtorrent client",
     "mad science",
-    "torrent client",
     "torrent",
+    "torrent client",
     "webtorrent"
   ],
   "license": "MIT",
@@ -80,10 +87,12 @@
     "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 .",
+    "prepublish": "npm run build",
+    "start": "npm run build && electron .",
     "test": "standard && node ./bin/check-deps.js",
     "update-authors": "./bin/update-authors.sh"
   }

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

@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="main.css" charset="utf-8">
-  </head>
-  <body>
-    <script async src="main.js"></script>
-  </body>
-</html>

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/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/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,6 @@
+{
+  "plugins": [
+    "syntax-jsx",
+    "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/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')

src/main/index.js

@@ -17,14 +17,21 @@ 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) {
@@ -107,6 +114,7 @@ function delayedInit () {
   handlers.install()
   tray.init()
   updater.init()
+  userTasks.init()
 }
 
 function onOpen (e, torrentId) {
@@ -151,7 +159,7 @@ 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 {
       torrentIds.push(arg)

src/main/ipc.js

@@ -115,8 +115,8 @@ function init () {
     })
   })
 
-  ipc.on('vlcPlay', function (e, url) {
-    var args = ['--play-and-exit', '--video-on-top', '--no-video-title-show', '--quiet', url]
+  ipc.on('vlcPlay', function (e, url, title) {
+    var args = ['--play-and-exit', '--video-on-top', '--no-video-title-show', '--quiet', `--meta-title=${title}`, url]
     log('Running vlc ' + args.join(' '))
 
     vlc.spawn(args, function (err, proc) {

src/main/menu.js

@@ -99,10 +99,6 @@ function getMenuTemplate () {
           type: 'separator'
         },
         {
-          label: process.platform === 'win32'
-            ? 'Close'
-            : 'Close Window',
-          accelerator: 'CmdOrCtrl+W',
           role: 'close'
         }
       ]
@@ -111,23 +107,28 @@ function getMenuTemplate () {
       label: 'Edit',
       submenu: [
         {
-          label: 'Cut',
-          accelerator: 'CmdOrCtrl+X',
+          role: 'undo'
+        },
+        {
+          role: 'redo'
+        },
+        {
+          type: 'separator'
+        },
+        {
           role: 'cut'
         },
         {
-          label: 'Copy',
-          accelerator: 'CmdOrCtrl+C',
           role: 'copy'
         },
         {
           label: 'Paste Torrent Address',
-          accelerator: 'CmdOrCtrl+V',
           role: 'paste'
         },
         {
-          label: 'Select All',
-          accelerator: 'CmdOrCtrl+A',
+          role: 'delete'
+        },
+        {
           role: 'selectall'
         },
         {
@@ -280,12 +281,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 +300,6 @@ function getMenuTemplate () {
           type: 'separator'
         },
         {
-          label: 'Services',
           role: 'services',
           submenu: []
         },
@@ -308,45 +307,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'
         }
       ]

src/main/tray.js

@@ -21,7 +21,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
 }
 
 /**

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

@@ -37,7 +37,7 @@ function init () {
     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
@@ -196,7 +196,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)
   }
 

src/renderer/controllers/media-controller.js

@@ -43,7 +43,7 @@ module.exports = class MediaController {
   }
 
   vlcPlay () {
-    ipcRenderer.send('vlcPlay', this.state.server.localURL)
+    ipcRenderer.send('vlcPlay', this.state.server.localURL, this.state.window.title)
     this.state.playing.location = 'vlc'
   }
 

src/renderer/controllers/playback-controller.js

@@ -28,11 +28,11 @@ 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)
     })
@@ -162,134 +162,134 @@ 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)
+      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()
+      }
+
+      // otherwise, play the video
+      dispatch('setTitle', torrentSummary.files[state.playing.fileIndex].name)
+      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 === '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.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,3 +1,4 @@
+const {dispatch} = require('../lib/dispatcher')
 const State = require('../lib/state')
 
 // Controls the Preferences screen
@@ -12,24 +13,19 @@ 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'
+        dispatch('setTitle', 'Preferences')
         state.unsaved = Object.assign(state.unsaved || {}, {prefs: state.saved.prefs || {}})
         cb()
       },
-      onbeforeunload: (cb) => {
-        // save state after preferences
-        this.save()
-        state.window.title = this.config.APP_WINDOW_TITLE
-        cb()
-      }
+      destroy: () => this.save()
     })
   }
 
   // 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

src/renderer/controllers/subtitles-controller.js

@@ -116,17 +116,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,7 +182,7 @@ function showDoneNotification (torrent) {
     silent: true
   })
 
-  notif.onclick = function () {
+  notif.onClick = function () {
     ipcRenderer.send('show')
   }
 

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

@@ -10,7 +10,7 @@ var config = require('../../config')
 // 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
   }

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 {
     /*
@@ -50,7 +50,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 +82,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 */

src/renderer/lib/telemetry.js

@@ -140,7 +140,7 @@ function logUncaughtError (procName, err) {
 }
 
 // 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/main.js

@@ -5,11 +5,8 @@ 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 React = require('react')
+const ReactDOM = require('react-dom')
 
 const config = require('../config')
 const App = require('./views/app')
@@ -43,7 +40,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 +52,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,7 +66,13 @@ 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()
@@ -74,17 +80,6 @@ function onState (err, _state) {
   // 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()
 
@@ -92,15 +87,19 @@ function onState (err, _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'))
 
   // 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)
 
@@ -132,20 +131,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()
 }
 
@@ -162,7 +155,7 @@ function updateElectron () {
   }
   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)
   }
 }
 
@@ -235,6 +228,7 @@ const dispatchHandlers = {
   '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 +241,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 +250,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 +295,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()
   })
 }
 
@@ -382,7 +369,7 @@ function onOpen (files) {
   if (state.location.url() === 'home' || subtitles.length === 0) {
     if (files.every(TorrentPlayer.isTorrent)) {
       if (state.location.url() !== 'home') {
-        backToList()
+        dispatch('backToList')
       }
       // All .torrent files? Add them.
       files.forEach((file) => controllers.torrentList.addTorrent(file))
@@ -439,7 +426,7 @@ 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)
   }
 

src/renderer/views/app.js

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

src/renderer/views/create-torrent-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('back')}>
+            Cancel
+          </button>
+        </p>
+      </div>
+    )
+  }
+}

src/renderer/views/create-torrent.js

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

src/renderer/views/header.js

@@ -0,0 +1,50 @@
+const React = require('react')
+
+const {dispatcher} = require('../lib/dispatcher')
+
+module.exports = class Header extends React.Component {
+  render () {
+    var loc = this.props.state.location
+    return (
+      <div key='header' 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>
+    )
+  }
+}

src/renderer/views/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/views/player.js

@@ -1,27 +1,28 @@
-module.exports = Player
+const React = require('react')
+const Bitfield = require('bitfield')
+const prettyBytes = require('prettier-bytes')
+const zeroFill = require('zero-fill')
 
-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'
+    return (
+      <div
+        className='player'
+        onWheel={handleVolumeWheel}
+        onMouseMove={dispatcher('mediaMouseMoved')}>
+        {showVideo ? renderMedia(state) : renderCastScreen(state)}
+        {renderPlayerControls(state)}
       </div>
-  `
+    )
+  }
 }
 
 // Handles volume change by wheel
@@ -91,42 +92,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 +180,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 +210,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></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 +255,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) {
@@ -300,15 +303,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 +323,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 +375,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 key='playback-bar' className='playback-bar'>
+      {renderLoadingBar(state)}
+      <div
+        key='cursor'
+        className='playback-cursor'
+        style={playbackCursorStyle}>
       </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='scrub-bar'
+        className='scrub-bar'
+        draggable='true'
+        onDragStart={handleDragStart}
+        onClick={handleScrub}
+        onDrag={handleScrub}>
+      </div>
+    </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 +453,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 +476,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 +550,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 +563,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 +587,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}></div>)
+  })
+  return (<div key='loading-bar' className='loading-bar'>{loadingBarElems}</div>)
 }
 
 // Returns the CSS background-image string for a poster image + dark vignette

src/renderer/views/preferences.js

@@ -1,21 +1,23 @@
-module.exports = Preferences
+const React = require('react')
+const remote = require('electron').remote
+const dialog = remote.dialog
 
-var hx = require('../lib/hx')
-var {dispatch} = require('../lib/dispatcher')
+const {dispatch} = require('../lib/dispatcher')
 
-var remote = require('electron').remote
-var dialog = remote.dialog
-
-function Preferences (state) {
-  return hx`
-    <div class='preferences'>
-      ${renderGeneralSection(state)}
-    </div>
-  `
+module.exports = class Preferences extends React.Component {
+  render () {
+    var state = this.props.state
+    return (
+      <div className='preferences'>
+        {renderGeneralSection(state)}
+      </div>
+    )
+  }
 }
 
 function renderGeneralSection (state) {
   return renderSection({
+    key: 'general',
     title: 'General',
     description: '',
     icon: 'settings'
@@ -26,6 +28,7 @@ function renderGeneralSection (state) {
 
 function renderDownloadDirSelector (state) {
   return renderFileSelector({
+    key: 'download-path',
     label: 'Download Path',
     description: 'Data from torrents will be saved here',
     property: 'downloadPath',
@@ -44,24 +47,24 @@ function renderDownloadDirSelector (state) {
 // - 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}
+  var helpElem = !definition.description ? null : (
+    <div key='help' className='help text'>
+      <i className='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}
+  )
+  return (
+    <section key={definition.key} className='section preferences-panel'>
+      <div className='section-container'>
+        <div key='heading' className='section-heading'>
+          <i className='icon'>{definition.icon}</i>{definition.title}
         </div>
-        ${helpElem}
-        <div class='section-body'>
-          ${controls}
+        {helpElem}
+        <div key='body' className='section-body'>
+          {controls}
         </div>
       </div>
     </section>
-  `
+  )
 }
 
 // Creates a file chooser
@@ -70,25 +73,25 @@ function renderSection (definition, controls) {
 // - 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>
+  return (
+    <div key={definition.key} className='control-group'>
+      <div className='controls'>
+        <label className='control-label'>
+          <div className='preference-title'>{definition.label}</div>
+          <div className='preference-description'>{definition.description}</div>
         </label>
-        <div class='controls'>
-          <input type='text' class='file-picker-text'
-            id=${definition.property}
+        <div className='controls'>
+          <input type='text' className='file-picker-text'
+            id={definition.property}
             disabled='disabled'
-            value=${value} />
-          <button class='btn' onclick=${handleClick}>
-            <i.icon>folder_open</i>
+            value={value} />
+          <button className='btn' onClick={handleClick}>
+            <i className='icon'>folder_open</i>
           </button>
         </div>
       </div>
     </div>
-  `
+  )
   function handleClick () {
     dialog.showOpenDialog(remote.getCurrentWindow(), definition.options, function (filenames) {
       if (!Array.isArray(filenames)) return

src/renderer/views/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/views/torrent-list.js

@@ -1,26 +1,29 @@
-module.exports = TorrentList
+const React = require('react')
+const prettyBytes = require('prettier-bytes')
 
-var prettyBytes = require('prettier-bytes')
+const TorrentSummary = require('../lib/torrent-summary')
+const TorrentPlayer = require('../lib/torrent-player')
+const {dispatcher} = require('../lib/dispatcher')
 
-var hx = require('../lib/hx')
-var TorrentSummary = require('../lib/torrent-summary')
-var TorrentPlayer = require('../lib/torrent-player')
-var {dispatcher} = require('../lib/dispatcher')
+module.exports = class TorrentList extends React.Component {
+  render () {
+    var state = this.props.state
+    var torrentRows = state.saved.torrents.map(
+      (torrentSummary) => this.renderTorrent(torrentSummary)
+    )
 
-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>
+    return (
+      <div key='torrent-list' className='torrent-list'>
+        {torrentRows}
+        <div key='torrent-placeholder' className='torrent-placeholder'>
+          <span className='ellipsis'>Drop a torrent file here or paste a magnet link</span>
+        </div>
       </div>
-    </div>`
+    )
+  }
 
-  function renderTorrent (torrentSummary) {
+  renderTorrent (torrentSummary) {
+    var state = this.props.state
     var infoHash = torrentSummary.infoHash
     var isSelected = infoHash && state.selectedInfoHash === infoHash
 
@@ -41,76 +44,100 @@ function TorrentList (state) {
     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) : ''}
+    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
-  function renderTorrentMetadata (torrentSummary) {
+  renderTorrentMetadata (torrentSummary) {
     var name = torrentSummary.name || 'Loading torrent...'
-    var elements = [hx`
-      <div class='name ellipsis'>${name}</div>
-    `]
+    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.status !== 'paused' && prog) {
-      elements.push(hx`
-        <div class='ellipsis'>
-          ${renderPercentProgress()}
-          ${renderTotalProgress()}
-          ${renderPeers()}
-          ${renderDownloadSpeed()}
-          ${renderUploadSpeed()}
+      elements.push((
+        <div key='progress-info' className='ellipsis'>
+          {renderPercentProgress()}
+          {renderTotalProgress()}
+          {renderPeers()}
+          {renderDownloadSpeed()}
+          {renderUploadSpeed()}
+          {renderEta()}
         </div>
-      `)
+      ))
     }
 
-    return hx`<div class='metadata'>${elements}</div>`
+    return (<div key='metadata' className='metadata'>{elements}</div>)
 
     function renderPercentProgress () {
       var progress = Math.floor(100 * prog.progress)
-      return hx`<span>${progress}%</span>`
+      return (<span key='percent-progress'>{progress}%</span>)
     }
 
     function renderTotalProgress () {
       var downloaded = prettyBytes(prog.downloaded)
       var total = prettyBytes(prog.length || 0)
       if (downloaded === total) {
-        return hx`<span>${downloaded}</span>`
+        return (<span key='total-progress'>{downloaded}</span>)
       } else {
-        return hx`<span>${downloaded} / ${total}</span>`
+        return (<span key='total-progress'>{downloaded} / {total}</span>)
       }
     }
 
     function renderPeers () {
       if (prog.numPeers === 0) return
       var count = prog.numPeers === 1 ? 'peer' : 'peers'
-      return hx`<span>${prog.numPeers} ${count}</span>`
+      return (<span key='peers'>{prog.numPeers} {count}</span>)
     }
 
     function renderDownloadSpeed () {
       if (prog.downloadSpeed === 0) return
-      return hx`<span>↓ ${prettyBytes(prog.downloadSpeed)}/s</span>`
+      return (<span key='download'>↓ {prettyBytes(prog.downloadSpeed)}/s</span>)
     }
 
     function renderUploadSpeed () {
       if (prog.uploadSpeed === 0) return
-      return hx`<span>↑ ${prettyBytes(prog.uploadSpeed)}/s</span>`
+      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
-  function renderTorrentButtons (torrentSummary) {
+  renderTorrentButtons (torrentSummary) {
     var infoHash = torrentSummary.infoHash
 
     var playIcon, playTooltip, playClass
@@ -142,87 +169,94 @@ function TorrentList (state) {
       torrentSummary.files[torrentSummary.defaultPlayFileIndex]
     if (defaultFile && defaultFile.currentTime && !willShowSpinner) {
       var fraction = defaultFile.currentTime / defaultFile.duration
-      positionElem = renderRadialProgressBar(fraction, 'radial-progress-large')
+      positionElem = this.renderRadialProgressBar(fraction, 'radial-progress-large')
       playClass = 'resume-position'
     }
 
     // Only show the play button for torrents that contain playable media
     var playButton
     if (TorrentPlayer.isPlayableTorrentSummary(torrentSummary)) {
-      playButton = hx`
-        <i.button-round.icon.play
-          title=${playTooltip}
-          class=${playClass}
-          onclick=${dispatcher('playFile', infoHash)}>
-          ${playIcon}
+      playButton = (
+        <i
+          key='play-button'
+          title={playTooltip}
+          className={'button-round icon play ' + 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}
+    return (
+      <div key='buttons' className='buttons'>
+        {positionElem}
+        {playButton}
+        <i
+          key='download-button'
+          className={'button-round icon download ' + torrentSummary.status}
+          title={downloadTooltip}
+          onClick={dispatcher('toggleTorrent', infoHash)}>
+          {downloadIcon}
         </i>
         <i
-          class='icon delete'
+          key='delete-button'
+          className='icon delete'
           title='Remove torrent'
-          onclick=${dispatcher('confirmDeleteTorrent', infoHash, false)}>
+          onClick={dispatcher('confirmDeleteTorrent', infoHash, false)}>
           close
         </i>
       </div>
-    `
+    )
   }
 
   // Show files, per-file download status and play buttons, and so on
-  function renderTorrentDetails (torrentSummary) {
+  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>`
+      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) => renderFileRow(torrentSummary, object.file, object.index))
+        .map((object) => this.renderFileRow(torrentSummary, object.file, object.index))
 
-      filesElement = hx`
-        <div class='files'>
+      filesElement = (
+        <div key='files' className='files'>
           <table>
-            ${fileRows}
+            <tbody>
+              {fileRows}
+            </tbody>
           </table>
         </div>
-      `
+      )
     }
 
-    return hx`
-      <div class='torrent-details'>
-        ${filesElement}
+    return (
+      <div key='details' className='torrent-details'>
+        {filesElement}
       </div>
-    `
+    )
   }
 
   // Show a single torrentSummary file in the details view for a single torrent
-  function renderFileRow (torrentSummary, file, index) {
+  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) {
+    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) + '%'
@@ -232,7 +266,7 @@ function TorrentList (state) {
     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)
+      positionElem = this.renderRadialProgressBar(file.currentTime / file.duration)
     }
 
     // Finally, render the file as a table row
@@ -250,47 +284,47 @@ function TorrentList (state) {
     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>
+    return (
+      <tr key={index} onClick={handleClick}>
+        <td className={'col-icon ' + rowClass}>
+          {positionElem}
+          <i className='icon'>{icon}</i>
         </td>
-        <td class='col-name ${rowClass}'>
-          ${file.name}
+        <td className={'col-name ' + rowClass}>
+          {file.name}
         </td>
-        <td class='col-progress ${rowClass}'>
-          ${isSelected ? progress : ''}
+        <td className={'col-progress ' + rowClass}>
+          {isSelected ? progress : ''}
         </td>
-        <td class='col-size ${rowClass}'>
-          ${prettyBytes(file.length)}
+        <td className={'col-size ' + rowClass}>
+          {prettyBytes(file.length)}
         </td>
-        <td class='col-select'
-            onclick=${dispatcher('toggleTorrentFile', infoHash, index)}>
-          <i class='icon'>${isSelected ? 'close' : 'add'}</i>
+        <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>
+          <div key='mask-half' className='mask half'>
+            <div key='fill' className='fill' style={transformFill}></div>
+            <div key='fill-fix' className='fill fix' style={transformFix}></div>
+          </div>
+        </div>
+        <div key='inset' className='inset'></div>
+      </div>
+    )
   }
 }
-
-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>
-  `
-}

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

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

src/renderer/views/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={handleCancel}>Skip This Release</button>
+          <button className='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/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 deepEqual = require('deep-equal')
+var defaultAnnounceList = require('create-torrent').announceList
 var electron = require('electron')
 var fs = require('fs-extra')
+var hat = require('hat')
 var musicmetadata = require('musicmetadata')
 var networkAddress = require('network-address')
 var path = require('path')
+var WebTorrent = require('webtorrent')
+var zeroFill = require('zero-fill')
 
 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 + hat(48))
+})
 
 // WebTorrent-to-HTTP streaming sever
 var server = null

static/main.css

@@ -26,6 +26,13 @@ body {
   line-height: 1.5em;
 }
 
+#body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
 table {
   table-layout: fixed;
 }
@@ -82,7 +89,7 @@ table {
   font-weight: 400;
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
-       url(../static/MaterialIcons-Regular.woff2) format('woff2');
+       url(MaterialIcons-Regular.woff2) format('woff2');
 }
 
 .icon {
@@ -485,21 +492,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 {
@@ -619,10 +612,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 +629,7 @@ body.drag .app::after {
 }
 
 .torrent-details td.col-icon {
-  width: 3em;
+  width: 45px;
   padding-left: 16px;
 }
 
@@ -656,17 +645,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;
 }

static/main.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>WebTorrent Desktop</title>
+    <link rel="stylesheet" href="main.css">
+  </head>
+  <body>
+    <!-- React prints a warning if you render to <body> directly -->
+    <div id='body'></div>
+    <!-- We can't just say src='...main.js', that breaks require()s -->
+    <script>
+      require('../build/renderer/main.js')
+    </script>
+  </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>