0.8.1

new protocol handler: stream-magnet

.gitignore

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

AUTHORS.md

@@ -10,6 +10,18 @@
 - Romain Beaumont <romain.rom1@gmail.com>
 - Dan Flettre <fletd01@yahoo.com>
 - Liam Gray <liam.r.gray@gmail.com>
-- grunjol <grunjol@argenteam.net>
+- 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>
+- Gediminas Petrikas <gedas18@gmail.com>
 
 #### Generated by bin/update-authors.sh.

CHANGELOG.md

@@ -1,16 +1,201 @@
 # WebTorrent Desktop Version History
 
-## UNRELEASED
+## v0.8.0 - 2016-06-23
 
 ### Added
+
+- Cast menu: choose which Chromecast, Airplay, or DLNA device you want to use
+- Telemetry: send basic data, plus stats on how often the play button works
+- Make posters from jpeg files, not just jpg
+- Support .wmv video via Play in VLC
+- Windows thumbnail bar with a play/pause button
+
 ### Changed
 
-- Use Squirrel.Windows 1.3.0
+- Nicer modal styles
-  - Fix installing when the app is already installed
-  - Don't kill unrelated processes on uninstall
 
 ### Fixed
 
+- Windows tray icon now stays in the right state
+
+## v0.7.2 - 2016-06-02
+
+### Fixed
+
+- Fix exception that affects users upgrading from v0.5.1 or older
+  - Ensure `state.saved.prefs` configuration exists
+- Fix window title on "About WebTorrent" window
+
+## v0.7.1 - 2016-06-02
+
+### Changed
+
+- Change "Step Forward" keyboard shortcut to `Alt+Left` (Windows)
+- Change "Step Backward" keyboard shortcut to to `Alt+Right` (Windows)
+
+### Fixed
+
+- First time startup bug -- invalid torrent/poster paths
+
+## v0.7.0 - 2016-06-02
+
+### Added
+
+- Improved AirPlay support -- using the new [`airplayer`](https://www.npmjs.com/package/airplayer) package
+- Remember volume setting in player, for as long as the app is open
+
+### Changed
+
+- Add (+) button now also accepts non .torrent files and creates a torrent from
+  those files
+- Show prompt text in title bar for open dialogs (OS X)
+- Upgrade Electron to 1.2.1
+  - Improve window resizing when aspect ratio is enforced (OS X)
+  - Use .ico format for better icon rendering quality (Windows)
+  - Fix crash reporter not working (Windows)
+
+### Fixed
+
+- Re-enable WebRTC (web peers)! (OS X, Windows)
+  - Windows support was disabled in v0.6.1 to work around a bug in Electron
+  - OS X support was disabled in v0.4.0 to work around a 100% CPU bug
+- Fix subtitle selector radio button UI size glitch
+- Fix race condition causing exeption on app startup
+- Fix duplicate torrent detection in some cases
+- Fix "gray screen" exception caused by incorrect file list order
+- Fix torrent loading message UI misalignment
+
+### Known issues
+
+- When upgrading to WebTorrent Desktop v0.7.0, some torrent metadata (file list,
+  selected files, whether torrent is streamable) will be cleared. Just start the
+  torrent to re-populate the metadata.
+
+## v0.6.1 - 2016-05-26
+
+### Fixed
+
+- Disable WebRTC to work around Electron crash (Windows)
+  - Will be re-enabled in the next version of WebTorrent, which will be based on
+    the next version of Electron, where the bug is fixed.
+- Fix crash when updating from WebTorrent 0.5.x in some situtations (#583)
+- Fix crash when dropping files onto the dock icon (OS X)
+- Fix keyboard shortcuts Space and ESC being captured globally (#585)
+- Fix crash, show error when drag-dropping hidden files (#586)
+
+## v0.6.0 - 2016-05-24
+
+### Added
+
+- Added Preferences page to set Download folder
+- Save video position, resume playback from saved position
+- Add additional video player keyboard shortcuts (#275)
+- Use `poster.jpg` file as the poster image if available (#558)
+- Associate .torrent files to WebTorrent Desktop (OS X) (#553)
+- Add support for pasting `instant.io` links (#559)
+- Add announcement feature
+
+### Changed
+
+- Nicer player UI
+- Reduce startup jank, improve startup time (#568)
+- Cleanup unsupported codec detection (#569, #570)
+- Cleaner look for the torrent file list
+- Improve subtitle positioning (#551)
+
+### Fixed
+
+- Fix Uncaught TypeError: Cannot read property 'update' of undefined (#567)
+- Fix bugs in LocationHistory
+  - When player is active, and magnet link is pasted, go back to list
+  - After deleting torrent, remove just the player from forward stack
+  - After creating torrent, remove create torrent page from forward stack
+  - Cancel button on create torrent page should only go back one page
+
+## v0.5.1 - 2016-05-18
+
+### Fixed
+
+- Fix auto-updater (OS X, Windows).
+
+## v0.5.0 - 2016-05-17
+
+### Added
+
+- Select/deselect individual files to torrent.
+- Automatically include subtitle files (.srt, .vtt) from torrent in the subtitles menu.
+- "Add Subtitle File..." menu item.
+
+### Changed
+
+- When manually adding subtitle track(s), always switch to the new track.
+
+### Fixed
+
+- Magnet links throw exception on app launch. (OS X)
+- Multi-file torrents would not seed in-place, were copied to Downloads folder.
+- Missing 'About WebTorrent' menu item. (Windows)
+- Rare exception. ("Cannot create BrowserWindow before app is ready")
+
+## v0.4.0 - 2016-05-13
+
+### Added
+
+- Better Windows support!
+  - Windows 32-bit build.
+  - Windows Portable App build.
+  - Windows app signing, for fewer install warnings.
+- Better Linux support!
+  - Linux 32-bit build.
+- Subtitles support!
+  - .srt and .vtt file support.
+  - Drag-and-drop files on video, or choose from file selector.
+  - Multiple subtitle files support.
+- Stream to VLC when the audio codec is unplayable (e.g. AC3, EAC3).
+- "Show in Folder" item in context menu.
+- Volume slider, with mute/unmute button.
+- New "Create torrent" page to modify:
+  - Torrent comment.
+  - Trackers.
+  - Private torrent flag.
+- Use mouse wheel to increase/decrease volume.
+- Bounce the Downloads stack when download completes. (OS X)
+- New default torrent on first launch: The WIRED CD.
+
+### Changed
+
+- Improve app startup time by 40%.
+- UI tweaks: Reduce font size, reduce torrent list item height.
+- Add Playback menu for playback-related functionality.
+- Fix installing when the app is already installed. (Windows)
+- Don't kill unrelated processes on uninstall. (Windows)
+- Set "sheet offset" correctly for create torrent dialog. (OS X)
+- Remove OS X-style Window menu. (Linux, Windows)
+- Remove "Add Fake Airplay/Chromecast" menu items.
+
+### Fixed
+
+- Disable WebRTC to fix 100% CPU usage/crashes caused by Chromium issue. This is
+  temporary. (OS X)
+- When fullscreen, make controls use the full window. (OS X)
+- Support creating torrents that contain .torrent files.
+- Block power save while casting to a remote device.
+- Do not block power save when the space key is pressed from the torrent list.
+- Support playing .mpg and .ogv extensions in the app.
+- Fix video centering for multi-screen setups.
+- Show an error when adding a duplicate torrent.
+- Show an error when adding an invalid magnet link.
+- Do not stop music when tabbing to another program (OS X)
+- Properly size the Windows volume mixer icon.
+- Default to the user's OS-defined, localized "Downloads" folder.
+- Enforce minimimum window size when resizing player to prevent window disappearing.
+- Fix rare race condition error on app quit.
+- Don't use zero-byte torrent "poster" images.
+
+Thanks to @grunjol, @rguedes, @furstenheim, @karloluis, @DiegoRBaquero, @alxhotel,
+@AgentEpsilon, @remijouannet, Rolando Guedes, @dcposch, and @feross for contributing
+to this release!
+
 ## v0.3.3 - 2016-04-07
 
 ### Fixed

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) Feross Aboukhadijeh
+Copyright (c) WebTorrent, LLC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -81,10 +81,14 @@ brew install wine
 
 (Requires the [Homebrew](http://brew.sh/) package manager.)
 
+### Privacy
+
+WebTorrent Desktop collects some basic usage stats to help us make the app better. For example, we track what OSs are users are on, and how well the play button works (how often does it succeed? time out? show a missing codec error?). The app never sends personally identifying or other private info.
+
 ### Code Style
 
 [![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
 
 ## License
 
-MIT. Copyright (c) [Feross Aboukhadijeh](http://feross.org).
+MIT. Copyright (c) [WebTorrent, LLC](https://webtorrent.io).

bin/check-deps.js

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

bin/clean.js

@@ -5,9 +5,9 @@
  * Useful for developers.
  */
 
+var fs = require('fs')
 var os = require('os')
 var path = require('path')
-var pathExists = require('path-exists')
 var rimraf = require('rimraf')
 
 var config = require('../config')
@@ -15,7 +15,12 @@ var handlers = require('../main/handlers')
 
 rimraf.sync(config.CONFIG_PATH)
 
-var tmpPath = path.join(pathExists.sync('/tmp') ? '/tmp' : os.tmpDir(), 'webtorrent')
+var tmpPath
+try {
+  tmpPath = path.join(fs.statSync('/tmp') && '/tmp', 'webtorrent')
+} catch (err) {
+  tmpPath = path.join(os.tmpDir(), 'webtorrent')
+}
 rimraf.sync(tmpPath)
 
 // Uninstall .torrent file and magnet link handlers

bin/cmd.js

@@ -6,5 +6,5 @@ var path = require('path')
 
 var child = cp.spawn(electron, [path.join(__dirname, '..')], {stdio: 'inherit'})
 child.on('close', function (code) {
-  process.exit(code)
+  process.exitCode = code
 })

bin/list-deps.sh

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

bin/open-config.js

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

bin/package.js

@@ -9,6 +9,7 @@ var electronPackager = require('electron-packager')
 var fs = require('fs')
 var minimist = require('minimist')
 var mkdirp = require('mkdirp')
+var os = require('os')
 var path = require('path')
 var rimraf = require('rimraf')
 var series = require('run-series')
@@ -18,16 +19,6 @@ var config = require('../config')
 var pkg = require('../package.json')
 
 var BUILD_NAME = config.APP_NAME + '-v' + config.APP_VERSION
-
-/*
- * Path to folder with the following files:
- *   - Windows Authenticode private key and cert (authenticode.p12)
- *   - Windows Authenticode password file (authenticode.txt)
- */
-var CERT_PATH = process.platform === 'win32'
-  ? 'D:'
-  : '/Volumes/Certs'
-
 var DIST_PATH = path.join(config.ROOT_PATH, 'dist')
 
 var argv = minimist(process.argv.slice(2), {
@@ -64,9 +55,6 @@ function build () {
 }
 
 var all = {
-  // Build 64 bit binaries only.
-  arch: 'x64',
-
   // The human-readable copyright line for the app. Maps to the `LegalCopyright` metadata
   // property on Windows, and `NSHumanReadableCopyright` on OS X.
   'app-copyright': config.APP_COPYRIGHT,
@@ -85,9 +73,9 @@ var all = {
   'asar-unpack': 'WebTorrent*',
 
   // The build version of the application. Maps to the FileVersion metadata property on
-  // Windows, and CFBundleVersion on OS X. We're using the short git hash (e.g. 'e7d837e')
+  // Windows, and CFBundleVersion on OS X. Note: Windows requires the build version to
-  // Windows requires the build version to start with a number :/ so we stick on a prefix
+  // start with a number. We're using the version of the underlying WebTorrent library.
-  'build-version': '0-' + cp.execSync('git rev-parse --short HEAD').toString().replace('\n', ''),
+  'build-version': require('webtorrent/package.json').version,
 
   // The application source directory.
   dir: config.ROOT_PATH,
@@ -110,12 +98,16 @@ var all = {
   prune: true,
 
   // The Electron version with which the app is built (without the leading 'v')
-  version: pkg.dependencies['electron-prebuilt']
+  version: require('electron-prebuilt/package.json').version
 }
 
 var darwin = {
+  // Build for OS X
   platform: 'darwin',
 
+  // Build 64 bit binaries only.
+  arch: 'x64',
+
   // The bundle identifier to use in the application's plist (OS X only).
   'app-bundle-id': 'io.webtorrent.webtorrent',
 
@@ -131,8 +123,12 @@ var darwin = {
 }
 
 var win32 = {
+  // Build for Windows.
   platform: 'win32',
 
+  // Build 32 bit binaries only.
+  arch: 'ia32',
+
   // Object hash of application metadata to embed into the executable (Windows only)
   'version-string': {
 
@@ -161,9 +157,10 @@ var win32 = {
 }
 
 var linux = {
+  // Build for Linux.
   platform: 'linux',
 
-  // Build 32/64 bit binaries.
+  // Build 32 and 64 bit binaries.
   arch: 'all'
 
   // Note: Application icon for Linux is specified via the BrowserWindow `icon` option.
@@ -177,7 +174,7 @@ function buildDarwin (cb) {
   console.log('OS X: Packaging electron...')
   electronPackager(Object.assign({}, all, darwin), function (err, buildPath) {
     if (err) return cb(err)
-    console.log('OS X: Packaged electron. ' + buildPath[0])
+    console.log('OS X: Packaged electron. ' + buildPath)
 
     var appPath = path.join(buildPath[0], config.APP_NAME + '.app')
     var contentsPath = path.join(appPath, 'Contents')
@@ -185,8 +182,6 @@ function buildDarwin (cb) {
     var infoPlistPath = path.join(contentsPath, 'Info.plist')
     var infoPlist = plist.parse(fs.readFileSync(infoPlistPath, 'utf8'))
 
-    // TODO: Use new `extend-info` and `extra-resource` opts to electron-packager,
-    // available as of v6.
     infoPlist.CFBundleDocumentTypes = [
       {
         CFBundleTypeExtensions: [ 'torrent' ],
@@ -211,6 +206,31 @@ function buildDarwin (cb) {
         CFBundleURLIconFile: path.basename(config.APP_FILE_ICON) + '.icns',
         CFBundleURLName: 'BitTorrent Magnet URL',
         CFBundleURLSchemes: [ 'magnet' ]
+      },
+      {
+        CFBundleTypeRole: 'Editor',
+        CFBundleURLIconFile: path.basename(config.APP_FILE_ICON) + '.icns',
+        CFBundleURLName: 'BitTorrent Stream-Magnet URL',
+        CFBundleURLSchemes: [ 'stream-magnet' ]
+      }
+    ]
+
+    infoPlist.UTExportedTypeDeclarations = [
+      {
+        UTTypeConformsTo: [
+          'public.data',
+          'public.item',
+          'com.bittorrent.torrent'
+        ],
+        UTTypeDescription: 'BitTorrent Document',
+        UTTypeIconFile: path.basename(config.APP_FILE_ICON) + '.icns',
+        UTTypeIdentifier: 'org.bittorrent.torrent',
+        UTTypeReferenceURL: 'http://www.bittorrent.org/beps/bep_0000.html',
+        UTTypeTagSpecification: {
+          'com.apple.ostype': 'TORR',
+          'public.filename-extension': [ 'torrent' ],
+          'public.mime-type': 'application/x-bittorrent'
+        }
       }
     ]
 
@@ -277,7 +297,7 @@ function buildDarwin (cb) {
 
       var inPath = path.join(buildPath[0], config.APP_NAME + '.app')
       var outPath = path.join(DIST_PATH, BUILD_NAME + '-darwin.zip')
-      zip(inPath, outPath)
+      zip.zipSync(inPath, outPath)
 
       console.log('OS X: Created zip.')
     }
@@ -313,11 +333,11 @@ function buildDarwin (cb) {
       }
 
       var dmg = appDmg(dmgOpts)
-      dmg.on('error', cb)
+      dmg.once('error', cb)
       dmg.on('progress', function (info) {
         if (info.type === 'step-begin') console.log(info.title + '...')
       })
-      dmg.on('finish', function (info) {
+      dmg.once('finish', function (info) {
         console.log('OS X: Created dmg.')
         cb(null)
       })
@@ -327,11 +347,24 @@ function buildDarwin (cb) {
 
 function buildWin32 (cb) {
   var installer = require('electron-winstaller')
-
   console.log('Windows: Packaging electron...')
+
+  /*
+   * Path to folder with the following files:
+   *   - Windows Authenticode private key and cert (authenticode.p12)
+   *   - Windows Authenticode password file (authenticode.txt)
+   */
+  var CERT_PATH
+  try {
+    fs.accessSync('D:')
+    CERT_PATH = 'D:'
+  } catch (err) {
+    CERT_PATH = path.join(os.homedir(), 'Desktop')
+  }
+
   electronPackager(Object.assign({}, all, win32), function (err, buildPath) {
     if (err) return cb(err)
-    console.log('Windows: Packaged electron. ' + buildPath[0])
+    console.log('Windows: Packaged electron. ' + buildPath)
 
     var signWithParams
     if (process.platform === 'win32') {
@@ -358,6 +391,7 @@ function buildWin32 (cb) {
 
     function packageInstaller (cb) {
       console.log('Windows: Creating installer...')
+
       installer.createWindowsInstaller({
         appDirectory: buildPath[0],
         authors: config.APP_TEAM,
@@ -376,14 +410,15 @@ function buildWin32 (cb) {
         title: config.APP_NAME,
         usePackageJson: false,
         version: pkg.version
-      }).then(function () {
+      })
+      .then(function () {
         console.log('Windows: Created installer.')
         cb(null)
-      }).catch(cb)
+      })
+      .catch(cb)
     }
 
     function packagePortable (cb) {
-      // Create Windows portable app
       console.log('Windows: Creating portable app...')
 
       var portablePath = path.join(buildPath[0], 'Portable Settings')
@@ -391,7 +426,7 @@ function buildWin32 (cb) {
 
       var inPath = path.join(DIST_PATH, path.basename(buildPath[0]))
       var outPath = path.join(DIST_PATH, BUILD_NAME + '-win.zip')
-      zip(inPath, outPath)
+      zip.zipSync(inPath, outPath)
 
       console.log('Windows: Created portable app.')
       cb(null)
@@ -403,7 +438,7 @@ function buildLinux (cb) {
   console.log('Linux: Packaging electron...')
   electronPackager(Object.assign({}, all, linux), function (err, buildPath) {
     if (err) return cb(err)
-    console.log('Linux: Packaged electron. ' + buildPath[0])
+    console.log('Linux: Packaged electron. ' + buildPath)
 
     var tasks = []
     buildPath.forEach(function (filesPath) {
@@ -455,7 +490,7 @@ function buildLinux (cb) {
 
     var inPath = path.join(DIST_PATH, path.basename(filesPath))
     var outPath = path.join(DIST_PATH, BUILD_NAME + '-linux-' + destArch + '.zip')
-    zip(inPath, outPath)
+    zip.zipSync(inPath, outPath)
 
     console.log(`Linux: Created ${destArch} zip.`)
     cb(null)

bin/release-_post.sh

@@ -1,9 +1,10 @@
 #!/bin/sh
 set -e
 
+npm run update-authors
 git diff --exit-code
 npm run package -- --sign
 git push
 git push --tags
 npm publish
-gh-release
+./node_modules/.bin/gh-release

bin/release-_pre.sh

@@ -2,10 +2,7 @@
 set -e
 
 git pull
-npm run update-authors
-git diff --exit-code
 rm -rf node_modules/
 npm install
-npm prune
 npm dedupe
 npm test

bin/update-authors.sh

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

config.js

@@ -1,14 +1,19 @@
 var appConfig = require('application-config')('WebTorrent')
+var fs = require('fs')
 var path = require('path')
-var pathExists = require('path-exists')
 
 var APP_NAME = 'WebTorrent'
-var APP_TEAM = 'The WebTorrent Project'
+var APP_TEAM = 'WebTorrent, LLC'
 var APP_VERSION = require('./package.json').version
 
 var PORTABLE_PATH = path.join(path.dirname(process.execPath), 'Portable Settings')
 
 module.exports = {
+  ANNOUNCEMENT_URL: 'https://webtorrent.io/desktop/announcement',
+  AUTO_UPDATE_URL: 'https://webtorrent.io/desktop/update',
+  CRASH_REPORT_URL: 'https://webtorrent.io/desktop/crash-report',
+  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'),
@@ -17,24 +22,53 @@ module.exports = {
   APP_VERSION: APP_VERSION,
   APP_WINDOW_TITLE: APP_NAME + ' (BETA)',
 
-  AUTO_UPDATE_CHECK_STARTUP_DELAY: 5 * 1000 /* 5 seconds */,
-  AUTO_UPDATE_URL: 'https://webtorrent.io/desktop/update' +
-    '?version=' + APP_VERSION + '&platform=' + process.platform,
-
-  CRASH_REPORT_URL: 'https://webtorrent.io/desktop/crash-report',
-
   CONFIG_PATH: getConfigPath(),
-  CONFIG_POSTER_PATH: path.join(getConfigPath(), 'Posters'),
+
-  CONFIG_TORRENT_PATH: path.join(getConfigPath(), 'Torrents'),
+  DEFAULT_TORRENTS: [
+    {
+      name: 'Big Buck Bunny',
+      posterFileName: 'bigBuckBunny.jpg',
+      torrentFileName: 'bigBuckBunny.torrent'
+    },
+    {
+      name: 'Cosmos Laundromat (Preview)',
+      posterFileName: 'cosmosLaundromat.jpg',
+      torrentFileName: 'cosmosLaundromat.torrent'
+    },
+    {
+      name: 'Sintel',
+      posterFileName: 'sintel.jpg',
+      torrentFileName: 'sintel.torrent'
+    },
+    {
+      name: 'Tears of Steel',
+      posterFileName: 'tearsOfSteel.jpg',
+      torrentFileName: 'tearsOfSteel.torrent'
+    },
+    {
+      name: 'The WIRED CD - Rip. Sample. Mash. Share.',
+      posterFileName: 'wiredCd.jpg',
+      torrentFileName: 'wiredCd.torrent'
+    }
+  ],
+
+  DELAYED_INIT: 3000 /* 3 seconds */,
+
+  DEFAULT_DOWNLOAD_PATH: getDefaultDownloadPath(),
 
   GITHUB_URL: 'https://github.com/feross/webtorrent-desktop',
+  GITHUB_URL_ISSUES: 'https://github.com/feross/webtorrent-desktop/issues',
   GITHUB_URL_RAW: 'https://raw.githubusercontent.com/feross/webtorrent-desktop/master',
 
+  HOME_PAGE_URL: 'https://webtorrent.io',
+
   IS_PORTABLE: isPortable(),
   IS_PRODUCTION: isProduction(),
 
+  POSTER_PATH: path.join(getConfigPath(), 'Posters'),
   ROOT_PATH: __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'),
@@ -52,8 +86,28 @@ function getConfigPath () {
   }
 }
 
+function getDefaultDownloadPath () {
+  if (!process || !process.type) {
+    return ''
+  }
+
+  if (isPortable()) {
+    return path.join(getConfigPath(), 'Downloads')
+  }
+
+  var electron = require('electron')
+
+  return process.type === 'renderer'
+    ? electron.remote.app.getPath('downloads')
+    : electron.app.getPath('downloads')
+}
+
 function isPortable () {
-  return process.platform === 'win32' && isProduction() && pathExists(PORTABLE_PATH)
+  try {
+    return process.platform === 'win32' && isProduction() && !!fs.statSync(PORTABLE_PATH)
+  } catch (err) {
+    return false
+  }
 }
 
 function isProduction () {
@@ -61,7 +115,7 @@ function isProduction () {
     return false
   }
   if (process.platform === 'darwin') {
-    return !/\/Electron\.app\/Contents\/MacOS\/Electron$/.test(process.execPath)
+    return !/\/Electron\.app\//.test(process.execPath)
   }
   if (process.platform === 'win32') {
     return !/\\electron\.exe$/.test(process.execPath)

crash-reporter.js

@@ -11,5 +11,4 @@ function init () {
     productName: config.APP_NAME,
     submitURL: config.CRASH_REPORT_URL
   })
-  console.log('crash reporter started')
 }

index.js

@@ -1,2 +1 @@
-console.time('init')
 require('./main')

main/announcement.js

@@ -0,0 +1,57 @@
+module.exports = {
+  init
+}
+
+var electron = require('electron')
+
+var config = require('../config')
+var log = require('./log')
+
+var ANNOUNCEMENT_URL = config.ANNOUNCEMENT_URL +
+  '?version=' + config.APP_VERSION +
+  '&platform=' + process.platform
+
+/**
+ * In certain situations, the WebTorrent team may need to show an announcement to
+ * all WebTorrent Desktop users. For example: a security notice, or an update
+ * notification (if the auto-updater stops working).
+ *
+ * When there is an announcement, the `ANNOUNCEMENT_URL` endpoint should return an
+ * HTTP 200 status code with a JSON object like this:
+ *
+ *   {
+ *     "title": "WebTorrent Desktop Announcement",
+ *     "message": "Security Issue in v0.xx",
+ *     "detail": "Please update to v0.xx as soon as possible..."
+ *   }
+ */
+function init () {
+  var get = require('simple-get')
+  get.concat(ANNOUNCEMENT_URL, onResponse)
+}
+
+function onResponse (err, res, data) {
+  if (err) return log(`Failed to retrieve announcement: ${err.message}`)
+  if (res.statusCode !== 200) return log('No announcement exists')
+
+  try {
+    data = JSON.parse(data.toString())
+  } catch (err) {
+    // Support plaintext announcement messages, using a default title.
+    data = {
+      title: 'WebTorrent Desktop Announcement',
+      message: data.toString(),
+      detail: data.toString()
+    }
+  }
+
+  electron.dialog.showMessageBox({
+    type: 'info',
+    buttons: ['OK'],
+    title: data.title,
+    message: data.message,
+    detail: data.detail
+  }, noop)
+}
+
+function noop () {}

main/auto-updater.js

@@ -1,50 +0,0 @@
-module.exports = {
-  init
-}
-
-var electron = require('electron')
-var get = require('simple-get')
-
-var config = require('../config')
-var log = require('./log')
-var windows = require('./windows')
-
-var autoUpdater = electron.autoUpdater
-
-function init () {
-  autoUpdater.on('error', function (err) {
-    log.error('App update error: ' + err.message || err)
-  })
-
-  autoUpdater.setFeedURL(config.AUTO_UPDATE_URL)
-
-  /*
-   * We always check for updates on app startup. To keep app startup fast, we delay this
-   * first check so it happens when there is less going on.
-   */
-  setTimeout(checkForUpdates, config.AUTO_UPDATE_CHECK_STARTUP_DELAY)
-
-  autoUpdater.on('checking-for-update', () => log('Checking for app update'))
-  autoUpdater.on('update-available', () => log('App update available'))
-  autoUpdater.on('update-not-available', () => log('App update not available'))
-  autoUpdater.on('update-downloaded', function (e, releaseNotes, releaseName, releaseDate, updateURL) {
-    log('App update downloaded: ', releaseName, updateURL)
-  })
-}
-
-function checkForUpdates () {
-  // Electron's built-in auto updater only supports Mac and Windows, for now
-  if (process.platform !== 'linux') {
-    return autoUpdater.checkForUpdates()
-  }
-
-  // If we're on Linux, we have to do it ourselves
-  get.concat(config.AUTO_UPDATE_URL, function (err, res, data) {
-    if (err) return log('Error checking for app update: ' + err.message)
-    if (![200, 204].includes(res.statusCode)) return log('Error checking for app update, got HTTP ' + res.statusCode)
-    if (res.statusCode !== 200) return
-
-    var obj = JSON.parse(data)
-    windows.main.send('dispatch', 'updateAvailable', obj.version)
-  })
-}

main/dialog.js

@@ -0,0 +1,122 @@
+module.exports = {
+  openSeedFile,
+  openSeedDirectory,
+  openTorrentFile,
+  openTorrentAddress,
+  openFiles
+}
+
+var electron = require('electron')
+
+var config = require('../config')
+var log = require('./log')
+var windows = require('./windows')
+
+/**
+ * Show open dialog to create a single-file torrent.
+ */
+function openSeedFile () {
+  if (!windows.main.win) return
+  log('openSeedFile')
+  var opts = {
+    title: 'Select a file for the torrent.',
+    properties: [ 'openFile' ]
+  }
+  setTitle(opts.title)
+  electron.dialog.showOpenDialog(windows.main.win, opts, function (selectedPaths) {
+    resetTitle()
+    if (!Array.isArray(selectedPaths)) return
+    windows.main.dispatch('showCreateTorrent', selectedPaths)
+  })
+}
+
+/*
+ * Show open dialog to create a single-file or single-directory torrent. On
+ * Windows and Linux, open dialogs are for files *or* directories only, not both,
+ * so this function shows a directory dialog on those platforms.
+ */
+function openSeedDirectory () {
+  if (!windows.main.win) return
+  log('openSeedDirectory')
+  var opts = process.platform === 'darwin'
+    ? {
+      title: 'Select a file or folder for the torrent.',
+      properties: [ 'openFile', 'openDirectory' ]
+    }
+    : {
+      title: 'Select a folder for the torrent.',
+      properties: [ 'openDirectory' ]
+    }
+  setTitle(opts.title)
+  electron.dialog.showOpenDialog(windows.main.win, opts, function (selectedPaths) {
+    resetTitle()
+    if (!Array.isArray(selectedPaths)) return
+    windows.main.dispatch('showCreateTorrent', selectedPaths)
+  })
+}
+
+/*
+ * Show flexible open dialog that supports selecting .torrent files to add, or
+ * a file or folder to create a single-file or single-directory torrent.
+ */
+function openFiles () {
+  if (!windows.main.win) return
+  log('openFiles')
+  var opts = process.platform === 'darwin'
+    ? {
+      title: 'Select a file or folder to add.',
+      properties: [ 'openFile', 'openDirectory' ]
+    }
+    : {
+      title: 'Select a file to add.',
+      properties: [ 'openFile' ]
+    }
+  setTitle(opts.title)
+  electron.dialog.showOpenDialog(windows.main.win, opts, function (selectedPaths) {
+    resetTitle()
+    if (!Array.isArray(selectedPaths)) return
+    windows.main.dispatch('onOpen', selectedPaths)
+  })
+}
+
+/*
+ * Show open dialog to open a .torrent file.
+ */
+function openTorrentFile () {
+  if (!windows.main.win) return
+  log('openTorrentFile')
+  var opts = {
+    title: 'Select a .torrent file.',
+    filters: [{ name: 'Torrent Files', extensions: ['torrent'] }],
+    properties: [ 'openFile', 'multiSelections' ]
+  }
+  setTitle(opts.title)
+  electron.dialog.showOpenDialog(windows.main.win, opts, function (selectedPaths) {
+    resetTitle()
+    if (!Array.isArray(selectedPaths)) return
+    selectedPaths.forEach(function (selectedPath) {
+      windows.main.dispatch('addTorrent', selectedPath)
+    })
+  })
+}
+
+/*
+ * Show modal dialog to open a torrent URL (magnet uri, http torrent link, etc.)
+ */
+function openTorrentAddress () {
+  log('openTorrentAddress')
+  windows.main.dispatch('openTorrentAddress')
+}
+
+/**
+ * Dialogs on do not show a title on OS X, so the window title is used instead.
+ */
+function setTitle (title) {
+  if (process.platform === 'darwin') {
+    windows.main.dispatch('setTitle', title)
+  }
+}
+
+function resetTitle () {
+  setTitle(config.APP_WINDOW_TITLE)
+}

main/dock.js

@@ -0,0 +1,59 @@
+module.exports = {
+  downloadFinished,
+  init,
+  setBadge
+}
+
+var electron = require('electron')
+
+var app = electron.app
+
+var dialog = require('./dialog')
+var log = require('./log')
+
+/**
+ * Add a right-click menu to the dock icon. (OS X)
+ */
+function init () {
+  if (!app.dock) return
+  var menu = electron.Menu.buildFromTemplate(getMenuTemplate())
+  app.dock.setMenu(menu)
+}
+
+/**
+ * Bounce the Downloads stack if `path` is inside the Downloads folder. (OS X)
+ */
+function downloadFinished (path) {
+  if (!app.dock) return
+  log(`downloadFinished: ${path}`)
+  app.dock.downloadFinished(path)
+}
+
+/**
+ * Display string in dock badging area. (OS X)
+ */
+function setBadge (text) {
+  if (!app.dock) return
+  log(`setBadge: ${text}`)
+  app.dock.setBadge(String(text))
+}
+
+function getMenuTemplate () {
+  return [
+    {
+      label: 'Create New Torrent...',
+      accelerator: 'CmdOrCtrl+N',
+      click: () => dialog.openSeedDirectory()
+    },
+    {
+      label: 'Open Torrent File...',
+      accelerator: 'CmdOrCtrl+O',
+      click: () => dialog.openTorrentFile()
+    },
+    {
+      label: 'Open Torrent Address...',
+      accelerator: 'CmdOrCtrl+U',
+      click: () => dialog.openTorrentAddress()
+    }
+  ]
+}

main/handlers.js

@@ -3,6 +3,7 @@ module.exports = {
   uninstall
 }
 
+var config = require('../config')
 var path = require('path')
 
 function install () {
@@ -33,24 +34,49 @@ 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 default
+  // On OS X, only protocols that are listed in `Info.plist` can be set as the
-  // handler at runtime.
+  // default handler at runtime.
   app.setAsDefaultProtocolClient('magnet')
+  app.setAsDefaultProtocolClient('stream-magnet')
 
-  // File handlers are registered in the Info.plist.
+  // File handlers are defined in `Info.plist`.
 }
 
 function uninstallDarwin () {}
 
+var EXEC_COMMAND = [ process.execPath ]
+
+if (!config.IS_PRODUCTION) {
+  EXEC_COMMAND.push(config.ROOT_PATH)
+}
+
 function installWin32 () {
   var Registry = require('winreg')
 
   var log = require('./log')
 
-  var iconPath = path.join(process.resourcesPath, 'app.asar.unpacked', 'static', 'WebTorrentFile.ico')
+  var iconPath = path.join(
-
+    process.resourcesPath, 'app.asar.unpacked', 'static', 'WebTorrentFile.ico'
-  registerProtocolHandlerWin32('magnet', 'URL:BitTorrent Magnet URL', iconPath, process.execPath)
+  )
-  registerFileHandlerWin32('.torrent', 'io.webtorrent.torrent', 'BitTorrent Document', iconPath, process.execPath)
+  registerProtocolHandlerWin32(
+    'magnet',
+    'URL:BitTorrent Magnet URL',
+    iconPath,
+    EXEC_COMMAND
+  )
+  registerProtocolHandlerWin32(
+    'stream-magnet',
+    'URL:BitTorrent Stream-Magnet URL',
+    iconPath,
+    EXEC_COMMAND
+  )
+  registerFileHandlerWin32(
+    '.torrent',
+    'io.webtorrent.torrent',
+    'BitTorrent Document',
+    iconPath,
+    EXEC_COMMAND
+  )
 
   /**
    * To add a protocol handler, the following keys must be added to the Windows registry:
@@ -108,7 +134,7 @@ function installWin32 () {
         hive: Registry.HKCU,
         key: '\\Software\\Classes\\' + protocol + '\\shell\\open\\command'
       })
-      commandKey.set('', Registry.REG_SZ, '"' + command + '" "%1"', done)
+      commandKey.set('', Registry.REG_SZ, `${commandToArgs(command)} "%1"`, done)
     }
 
     function done (err) {
@@ -169,7 +195,7 @@ function installWin32 () {
         hive: Registry.HKCU,
         key: '\\Software\\Classes\\' + id + '\\shell\\open\\command'
       })
-      commandKey.set('', Registry.REG_SZ, '"' + command + '" "%1"', done)
+      commandKey.set('', Registry.REG_SZ, `${commandToArgs(command)} "%1"`, done)
     }
 
     function done (err) {
@@ -181,8 +207,9 @@ function installWin32 () {
 function uninstallWin32 () {
   var Registry = require('winreg')
 
-  unregisterProtocolHandlerWin32('magnet', process.execPath)
+  unregisterProtocolHandlerWin32('magnet', EXEC_COMMAND)
-  unregisterFileHandlerWin32('.torrent', 'io.webtorrent.torrent', process.execPath)
+  unregisterProtocolHandlerWin32('stream-magnet', EXEC_COMMAND)
+  unregisterFileHandlerWin32('.torrent', 'io.webtorrent.torrent', EXEC_COMMAND)
 
   function unregisterProtocolHandlerWin32 (protocol, command) {
     getCommand()
@@ -193,7 +220,7 @@ function uninstallWin32 () {
         key: '\\Software\\Classes\\' + protocol + '\\shell\\open\\command'
       })
       commandKey.get('', function (err, item) {
-        if (!err && item.value.indexOf(command) >= 0) {
+        if (!err && item.value.indexOf(commandToArgs(command)) >= 0) {
           destroyProtocol()
         }
       })
@@ -241,6 +268,10 @@ function uninstallWin32 () {
   }
 }
 
+function commandToArgs (command) {
+  return command.map((arg) => `"${arg}"`).join(' ')
+}
+
 function installLinux () {
   var fs = require('fs-extra')
   var os = require('os')
@@ -253,21 +284,23 @@ function installLinux () {
   installIconFile()
 
   function installDesktopFile () {
-    var templatePath = path.join(config.STATIC_PATH, 'linux', 'webtorrent-desktop.desktop')
+    var templatePath = path.join(
+      config.STATIC_PATH, 'linux', 'webtorrent-desktop.desktop'
+    )
     fs.readFile(templatePath, 'utf8', writeDesktopFile)
   }
 
   function writeDesktopFile (err, desktopFile) {
     if (err) return log.error(err.message)
 
-    var appPath = config.IS_PRODUCTION ? path.dirname(process.execPath) : config.ROOT_PATH
+    var appPath = config.IS_PRODUCTION
-    var execPath = process.execPath + (config.IS_PRODUCTION ? '' : ' \.')
+      ? path.dirname(process.execPath)
-    var tryExecPath = process.execPath
+      : config.ROOT_PATH
 
     desktopFile = desktopFile.replace(/\$APP_NAME/g, config.APP_NAME)
     desktopFile = desktopFile.replace(/\$APP_PATH/g, appPath)
-    desktopFile = desktopFile.replace(/\$EXEC_PATH/g, execPath)
+    desktopFile = desktopFile.replace(/\$EXEC_PATH/g, EXEC_COMMAND.join(' '))
-    desktopFile = desktopFile.replace(/\$TRY_EXEC_PATH/g, tryExecPath)
+    desktopFile = desktopFile.replace(/\$TRY_EXEC_PATH/g, process.execPath)
 
     var desktopFilePath = path.join(
       os.homedir(),

main/index.js

@@ -1,19 +1,23 @@
+console.time('init')
+
 var electron = require('electron')
 
 var app = electron.app
 var ipcMain = electron.ipcMain
 
-var autoUpdater = require('./auto-updater')
+var announcement = require('./announcement')
 var config = require('../config')
 var crashReporter = require('../crash-reporter')
+var dialog = require('./dialog')
+var dock = require('./dock')
 var handlers = require('./handlers')
 var ipc = require('./ipc')
 var log = require('./log')
 var menu = require('./menu')
-var shortcuts = require('./shortcuts')
 var squirrelWin32 = require('./squirrel-win32')
-var windows = require('./windows')
 var tray = require('./tray')
+var updater = require('./updater')
+var windows = require('./windows')
 
 var shouldQuit = false
 var argv = sliceArgv(process.argv)
@@ -41,6 +45,7 @@ function init () {
     app.setPath('userData', config.CONFIG_PATH)
   }
 
+  var isReady = false // app ready, windows can be created
   app.ipcReady = false // main window has finished loading and IPC is ready
   app.isQuitting = false
 
@@ -50,23 +55,32 @@ function init () {
 
   ipc.init()
 
-  app.on('will-finish-launching', function () {
+  app.once('will-finish-launching', function () {
     crashReporter.init()
-    autoUpdater.init()
   })
 
   app.on('ready', function () {
+    isReady = true
+
+    windows.main.init()
+    windows.webtorrent.init()
     menu.init()
-    windows.createMainWindow()
+
-    windows.createWebTorrentHiddenWindow()
+    // To keep app startup fast, some code is delayed.
-    shortcuts.init()
+    setTimeout(delayedInit, config.DELAYED_INIT)
-    tray.init()
+
-    handlers.install()
+    // Report uncaught exceptions
+    process.on('uncaughtException', (err) => {
+      console.error(err)
+      var errJSON = {message: err.message, stack: err.stack}
+      windows.main.dispatch('uncaughtError', 'main', errJSON)
+    })
   })
 
-  app.on('ipcReady', function () {
+  app.once('ipcReady', function () {
     log('Command line args:', argv)
     processArgv(argv)
+    console.timeEnd('init')
   })
 
   app.on('before-quit', function (e) {
@@ -74,27 +88,34 @@ function init () {
 
     app.isQuitting = true
     e.preventDefault()
-    windows.main.send('dispatch', 'saveState') /* try to save state on exit */
+    windows.main.dispatch('saveState') // try to save state on exit
     ipcMain.once('savedState', () => app.quit())
-    setTimeout(() => app.quit(), 2000) /* quit after 2 secs, at most */
+    setTimeout(() => app.quit(), 2000) // quit after 2 secs, at most
   })
 
   app.on('activate', function () {
-    windows.createMainWindow()
+    if (isReady) windows.main.show()
   })
 }
 
+function delayedInit () {
+  announcement.init()
+  dock.init()
+  handlers.install()
+  tray.init()
+  updater.init()
+}
+
 function onOpen (e, torrentId) {
   e.preventDefault()
 
   if (app.ipcReady) {
-    windows.main.send('dispatch', 'onOpen', torrentId)
+    // Magnet links opened from Chrome won't focus the app without a setTimeout.
-    // Magnet links opened from Chrome won't focus the app without a setTimeout. The
+    // The confirmation dialog Chrome shows causes Chrome to steal back the focus.
-    // confirmation dialog Chrome shows causes Chrome to steal back the focus.
     // Electron issue: https://github.com/atom/electron/issues/4338
-    setTimeout(function () {
+    setTimeout(() => windows.main.show(), 100)
-      windows.focusWindow(windows.main)
+
-    }, 100)
+    processArgv([ torrentId ])
   } else {
     argv.push(torrentId)
   }
@@ -105,7 +126,7 @@ function onAppOpen (newArgv) {
 
   if (app.ipcReady) {
     log('Second app instance opened, but was prevented:', newArgv)
-    windows.focusWindow(windows.main)
+    windows.main.show()
 
     processArgv(newArgv)
   } else {
@@ -118,18 +139,22 @@ function sliceArgv (argv) {
 }
 
 function processArgv (argv) {
+  var torrentIds = []
   argv.forEach(function (arg) {
     if (arg === '-n') {
-      windows.main.send('dispatch', 'showOpenSeedFiles')
+      dialog.openSeedDirectory()
     } else if (arg === '-o') {
-      windows.main.send('dispatch', 'showOpenTorrentFile')
+      dialog.openTorrentFile()
     } else if (arg === '-u') {
-      windows.main.send('showOpenTorrentAddress')
+      dialog.openTorrentAddress()
     } else if (arg.startsWith('-psn')) {
       // Ignore OS X launchd "process serial number" argument
-      // More: https://github.com/feross/webtorrent-desktop/issues/214
+      // Issue: https://github.com/feross/webtorrent-desktop/issues/214
     } else {
-      windows.main.send('dispatch', 'onOpen', arg)
+      torrentIds.push(arg)
     }
   })
+  if (torrentIds.length > 0) {
+    windows.main.dispatch('onOpen', torrentIds)
+  }
 }

main/ipc.js

@@ -5,27 +5,33 @@ module.exports = {
 var electron = require('electron')
 
 var app = electron.app
-var ipcMain = electron.ipcMain
-var powerSaveBlocker = electron.powerSaveBlocker
 
+var dialog = require('./dialog')
+var dock = require('./dock')
 var log = require('./log')
 var menu = require('./menu')
-var windows = require('./windows')
+var powerSaveBlocker = require('./power-save-blocker')
+var shell = require('./shell')
 var shortcuts = require('./shortcuts')
+var vlc = require('./vlc')
+var windows = require('./windows')
+var thumbnail = require('./thumbnail')
 
-// has to be a number, not a boolean, and undefined throws an error
+// Messages from the main process, to be sent once the WebTorrent process starts
-var powerSaveBlockID = 0
+var messageQueueMainToWebTorrent = []
+
+// holds a ChildProcess while we're playing a video in VLC, null otherwise
+var vlcProcess
 
 function init () {
-  ipcMain.on('ipcReady', function (e) {
+  var ipc = electron.ipcMain
+
+  ipc.once('ipcReady', function (e) {
     app.ipcReady = true
     app.emit('ipcReady')
-    windows.main.show()
-    console.timeEnd('init')
   })
 
-  var messageQueueMainToWebTorrent = []
+  ipc.once('ipcReadyWebTorrent', function (e) {
-  ipcMain.on('ipcReadyWebTorrent', function (e) {
     app.ipcReadyWebTorrent = true
     log('sending %d queued messages from the main win to the webtorrent window',
       messageQueueMainToWebTorrent.length)
@@ -35,57 +41,117 @@ function init () {
     })
   })
 
-  ipcMain.on('showOpenTorrentFile', menu.showOpenTorrentFile)
+  /**
-  ipcMain.on('showOpenSeedFiles', menu.showOpenSeedFiles)
+   * Dialog
+   */
 
-  ipcMain.on('setBounds', function (e, bounds, maximize) {
+  ipc.on('openTorrentFile', () => dialog.openTorrentFile())
-    setBounds(bounds, maximize)
+  ipc.on('openFiles', () => dialog.openFiles())
-  })
 
-  ipcMain.on('setAspectRatio', function (e, aspectRatio, extraSize) {
+  /**
-    setAspectRatio(aspectRatio, extraSize)
+   * Dock
-  })
+   */
 
-  ipcMain.on('setBadge', function (e, text) {
+  ipc.on('setBadge', (e, ...args) => dock.setBadge(...args))
-    setBadge(text)
+  ipc.on('downloadFinished', (e, ...args) => dock.downloadFinished(...args))
-  })
 
-  ipcMain.on('setProgress', function (e, progress) {
+  /**
-    setProgress(progress)
+   * Events
-  })
+   */
 
-  ipcMain.on('toggleFullScreen', function (e, flag) {
+  ipc.on('onPlayerOpen', function () {
-    menu.toggleFullScreen(flag)
-  })
-
-  ipcMain.on('setTitle', function (e, title) {
-    windows.main.setTitle(title)
-  })
-
-  ipcMain.on('openItem', function (e, path) {
-    log('opening file or folder: ' + path)
-    electron.shell.openItem(path)
-  })
-
-  ipcMain.on('blockPowerSave', blockPowerSave)
-  ipcMain.on('unblockPowerSave', unblockPowerSave)
-
-  ipcMain.on('onPlayerOpen', function () {
     menu.onPlayerOpen()
-    shortcuts.registerPlayerShortcuts()
+    shortcuts.onPlayerOpen()
-  })
-  ipcMain.on('onPlayerClose', function () {
-    menu.onPlayerClose()
-    shortcuts.unregisterPlayerShortcuts()
   })
 
-  ipcMain.on('focusWindow', function (e, windowName) {
+  ipc.on('onPlayerClose', function () {
-    windows.focusWindow(windows[windowName])
+    menu.onPlayerClose()
+    shortcuts.onPlayerOpen()
+  })
+
+  ipc.on('updateThumbnailBar', function (e, isPaused) {
+    thumbnail.updateThumbarButtons(isPaused)
+  })
+
+  /**
+   * Power Save Blocker
+   */
+
+  ipc.on('blockPowerSave', () => powerSaveBlocker.start())
+  ipc.on('unblockPowerSave', () => powerSaveBlocker.stop())
+
+  /**
+   * Shell
+   */
+
+  ipc.on('openItem', (e, ...args) => shell.openItem(...args))
+  ipc.on('showItemInFolder', (e, ...args) => shell.showItemInFolder(...args))
+  ipc.on('moveItemToTrash', (e, ...args) => shell.moveItemToTrash(...args))
+
+  /**
+   * Windows: Main
+   */
+
+  var main = windows.main
+
+  ipc.on('setAspectRatio', (e, ...args) => main.setAspectRatio(...args))
+  ipc.on('setBounds', (e, ...args) => main.setBounds(...args))
+  ipc.on('setProgress', (e, ...args) => main.setProgress(...args))
+  ipc.on('setTitle', (e, ...args) => main.setTitle(...args))
+  ipc.on('show', () => main.show())
+  ipc.on('toggleFullScreen', (e, ...args) => main.toggleFullScreen(...args))
+
+  /**
+   * VLC
+   * TODO: Move most of this code to vlc.js
+   */
+
+  ipc.on('checkForVLC', function (e) {
+    vlc.checkForVLC(function (isInstalled) {
+      windows.main.send('checkForVLC', isInstalled)
+    })
+  })
+
+  ipc.on('vlcPlay', function (e, url) {
+    var args = ['--play-and-exit', '--video-on-top', '--no-video-title-show', '--quiet', url]
+    log('Running vlc ' + args.join(' '))
+
+    vlc.spawn(args, function (err, proc) {
+      if (err) return windows.main.dispatch('vlcNotFound')
+      vlcProcess = proc
+
+      // If it works, close the modal after a second
+      var closeModalTimeout = setTimeout(() =>
+        windows.main.dispatch('exitModal'), 1000)
+
+      vlcProcess.on('close', function (code) {
+        clearTimeout(closeModalTimeout)
+        if (!vlcProcess) return // Killed
+        log('VLC exited with code ', code)
+        if (code === 0) {
+          windows.main.dispatch('backToList')
+        } else {
+          windows.main.dispatch('vlcNotFound')
+        }
+        vlcProcess = null
+      })
+
+      vlcProcess.on('error', function (e) {
+        log('VLC error', e)
+      })
+    })
+  })
+
+  ipc.on('vlcQuit', function () {
+    if (!vlcProcess) return
+    log('Killing VLC, pid ' + vlcProcess.pid)
+    vlcProcess.kill('SIGKILL') // kill -9
+    vlcProcess = null
   })
 
   // Capture all events
-  var oldEmit = ipcMain.emit
+  var oldEmit = ipc.emit
-  ipcMain.emit = function (name, e, ...args) {
+  ipc.emit = function (name, e, ...args) {
     // Relay messages between the main window and the WebTorrent hidden window
     if (name.startsWith('wt-') && !app.isQuitting) {
       if (e.sender.browserWindowOptions.title === 'webtorrent-hidden-window') {
@@ -108,81 +174,6 @@ function init () {
     }
 
     // Emit all other events normally
-    oldEmit.call(ipcMain, name, e, ...args)
+    oldEmit.call(ipc, name, e, ...args)
-  }
-}
-
-function setBounds (bounds, maximize) {
-  // Do nothing in fullscreen
-  if (!windows.main || windows.main.isFullScreen()) {
-    log('setBounds: not setting bounds because we\'re in full screen')
-    return
-  }
-
-  // Maximize or minimize, if the second argument is present
-  var willBeMaximized
-  if (maximize === true) {
-    if (!windows.main.isMaximized()) {
-      log('setBounds: maximizing')
-      windows.main.maximize()
-    }
-    willBeMaximized = true
-  } else if (maximize === false) {
-    if (windows.main.isMaximized()) {
-      log('setBounds: unmaximizing')
-      windows.main.unmaximize()
-    }
-    willBeMaximized = false
-  } else {
-    willBeMaximized = windows.main.isMaximized()
-  }
-
-  // Assuming we're not maximized or maximizing, set the window size
-  if (!willBeMaximized) {
-    log('setBounds: setting bounds to ' + JSON.stringify(bounds))
-    if (bounds.x === null && bounds.y === null) {
-      // X and Y not specified? By default, center on current screen
-      var screen = require('screen')
-      var scr = screen.getDisplayMatching(windows.main.getBounds())
-      bounds.x = Math.round(scr.bounds.x + scr.bounds.width / 2 - bounds.width / 2)
-      bounds.y = Math.round(scr.bounds.y + scr.bounds.height / 2 - bounds.height / 2)
-      log('setBounds: centered to ' + JSON.stringify(bounds))
-    }
-    windows.main.setBounds(bounds, true)
-  } else {
-    log('setBounds: not setting bounds because of window maximization')
-  }
-}
-
-function setAspectRatio (aspectRatio, extraSize) {
-  log('setAspectRatio %o %o', aspectRatio, extraSize)
-  if (windows.main) {
-    windows.main.setAspectRatio(aspectRatio, extraSize)
-  }
-}
-
-// Display string in dock badging area (OS X)
-function setBadge (text) {
-  log('setBadge %s', text)
-  if (app.dock) app.dock.setBadge(String(text))
-}
-
-// Show progress bar. Valid range is [0, 1]. Remove when < 0; indeterminate when > 1.
-function setProgress (progress) {
-  log('setProgress %s', progress)
-  if (windows.main) {
-    windows.main.setProgressBar(progress)
-  }
-}
-
-function blockPowerSave () {
-  powerSaveBlockID = powerSaveBlocker.start('prevent-display-sleep')
-  log('blockPowerSave %d', powerSaveBlockID)
-}
-
-function unblockPowerSave () {
-  if (powerSaveBlocker.isStarted(powerSaveBlockID)) {
-    powerSaveBlocker.stop(powerSaveBlockID)
-    log('unblockPowerSave %d', powerSaveBlockID)
   }
 }

main/log.js

@@ -9,7 +9,6 @@ module.exports.error = error
  */
 
 var electron = require('electron')
-
 var windows = require('./windows')
 
 var app = electron.app
@@ -18,7 +17,7 @@ function log (...args) {
   if (app.ipcReady) {
     windows.main.send('log', ...args)
   } else {
-    app.on('ipcReady', () => windows.main.send('log', ...args))
+    app.once('ipcReady', () => windows.main.send('log', ...args))
   }
 }
 
@@ -26,6 +25,6 @@ function error (...args) {
   if (app.ipcReady) {
     windows.main.send('error', ...args)
   } else {
-    app.on('ipcReady', () => windows.main.send('error', ...args))
+    app.once('ipcReady', () => windows.main.send('error', ...args))
   }
 }

main/menu.js

@@ -1,13 +1,11 @@
 module.exports = {
   init,
-  onToggleFullScreen,
-  onWindowHide,
-  onWindowShow,
-  onPlayerOpen,
   onPlayerClose,
-  showOpenSeedFiles,
+  onPlayerOpen,
-  showOpenTorrentFile,
+  onToggleAlwaysOnTop,
-  toggleFullScreen
+  onToggleFullScreen,
+  onWindowBlur,
+  onWindowFocus
 }
 
 var electron = require('electron')
@@ -15,171 +13,104 @@ var electron = require('electron')
 var app = electron.app
 
 var config = require('../config')
-var log = require('./log')
+var dialog = require('./dialog')
+var shell = require('./shell')
 var windows = require('./windows')
+var thumbnail = require('./thumbnail')
 
-var appMenu, dockMenu
+var menu
 
 function init () {
-  appMenu = electron.Menu.buildFromTemplate(getAppMenuTemplate())
+  menu = electron.Menu.buildFromTemplate(getMenuTemplate())
-  electron.Menu.setApplicationMenu(appMenu)
+  electron.Menu.setApplicationMenu(menu)
-
-  dockMenu = electron.Menu.buildFromTemplate(getDockMenuTemplate())
-  if (app.dock) app.dock.setMenu(dockMenu)
 }
 
-function toggleFullScreen (flag) {
+function onPlayerClose () {
-  log('toggleFullScreen %s', flag)
+  getMenuItem('Play/Pause').enabled = false
-  if (windows.main && windows.main.isVisible()) {
+  getMenuItem('Increase Volume').enabled = false
-    flag = flag != null ? flag : !windows.main.isFullScreen()
+  getMenuItem('Decrease Volume').enabled = false
-    windows.main.setFullScreen(flag)
+  getMenuItem('Step Forward').enabled = false
-  }
+  getMenuItem('Step Backward').enabled = false
+  getMenuItem('Increase Speed').enabled = false
+  getMenuItem('Decrease Speed').enabled = false
+  getMenuItem('Add Subtitles File...').enabled = false
+
+  thumbnail.showPlayerThumbnailBar()
 }
 
-// Sets whether the window should always show on top of other windows
+function onPlayerOpen () {
-function toggleFloatOnTop (flag) {
+  getMenuItem('Play/Pause').enabled = true
-  log('toggleFloatOnTop %s', flag)
+  getMenuItem('Increase Volume').enabled = true
-  if (windows.main) {
+  getMenuItem('Decrease Volume').enabled = true
-    flag = flag != null ? flag : !windows.main.isAlwaysOnTop()
+  getMenuItem('Step Forward').enabled = true
-    windows.main.setAlwaysOnTop(flag)
+  getMenuItem('Step Backward').enabled = true
-    getMenuItem('Float on Top').checked = flag
+  getMenuItem('Increase Speed').enabled = true
-  }
+  getMenuItem('Decrease Speed').enabled = true
+  getMenuItem('Add Subtitles File...').enabled = true
+
+  thumbnail.hidePlayerThumbnailBar()
 }
 
-function increaseVolume () {
+function onToggleAlwaysOnTop (flag) {
-  if (windows.main) {
+  getMenuItem('Float on Top').checked = flag
-    windows.main.send('dispatch', 'changeVolume', 0.1)
-  }
 }
 
-function decreaseVolume () {
+function onToggleFullScreen (flag) {
-  if (windows.main) {
+  getMenuItem('Full Screen').checked = flag
-    windows.main.send('dispatch', 'changeVolume', -0.1)
-  }
 }
 
-function toggleDevTools () {
+function onWindowBlur () {
-  log('toggleDevTools')
-  if (windows.main) {
-    windows.main.toggleDevTools()
-  }
-}
-
-function showWebTorrentWindow () {
-  windows.webtorrent.show()
-  windows.webtorrent.webContents.openDevTools({ detach: true })
-}
-
-function onWindowShow () {
-  log('onWindowShow')
-  getMenuItem('Full Screen').enabled = true
-  getMenuItem('Float on Top').enabled = true
-}
-
-function onWindowHide () {
-  log('onWindowHide')
   getMenuItem('Full Screen').enabled = false
   getMenuItem('Float on Top').enabled = false
 }
 
-function onPlayerOpen () {
+function onWindowFocus () {
-  getMenuItem('Increase Volume').enabled = true
+  getMenuItem('Full Screen').enabled = true
-  getMenuItem('Decrease Volume').enabled = true
+  getMenuItem('Float on Top').enabled = true
-}
-
-function onPlayerClose () {
-  getMenuItem('Increase Volume').enabled = false
-  getMenuItem('Decrease Volume').enabled = false
-}
-
-function onToggleFullScreen (isFullScreen) {
-  isFullScreen = isFullScreen != null ? isFullScreen : windows.main.isFullScreen()
-  windows.main.setMenuBarVisibility(!isFullScreen)
-  getMenuItem('Full Screen').checked = isFullScreen
-  windows.main.send('fullscreenChanged', isFullScreen)
 }
 
 function getMenuItem (label) {
-  for (var i = 0; i < appMenu.items.length; i++) {
+  for (var i = 0; i < menu.items.length; i++) {
-    var menuItem = appMenu.items[i].submenu.items.find(function (item) {
+    var menuItem = menu.items[i].submenu.items.find(function (item) {
       return item.label === label
     })
     if (menuItem) return menuItem
   }
 }
 
-// Prompts the user for a file or folder, then makes a torrent out of the data
+function getMenuTemplate () {
-function showOpenSeedFiles () {
-  // Allow only a single selection
-  // To create a multi-file torrent, the user must select a folder
-  electron.dialog.showOpenDialog({
-    title: 'Select a file or folder for the torrent file.',
-    properties: [ 'openFile', 'openDirectory' ]
-  }, function (filenames) {
-    if (!Array.isArray(filenames)) return
-    var fileOrFolder = filenames[0]
-    windows.main.send('dispatch', 'showCreateTorrent', fileOrFolder)
-  })
-}
-
-// Prompts the user to choose a torrent file, then adds it to the app
-function showOpenTorrentFile () {
-  electron.dialog.showOpenDialog(windows.main, {
-    title: 'Select a .torrent file to open.',
-    filters: [{ name: 'Torrent Files', extensions: ['torrent'] }],
-    properties: [ 'openFile', 'multiSelections' ]
-  }, function (filenames) {
-    if (!Array.isArray(filenames)) return
-    filenames.forEach(function (filename) {
-      windows.main.send('dispatch', 'addTorrent', filename)
-    })
-  })
-}
-
-// Prompts the user for the URL of a torrent file, then downloads and adds it
-function showOpenTorrentAddress () {
-  windows.main.send('showOpenTorrentAddress')
-}
-
-function getAppMenuTemplate () {
-  var fileMenu = [
-    {
-      label: 'Create New Torrent...',
-      accelerator: 'CmdOrCtrl+N',
-      click: showOpenSeedFiles
-    },
-    {
-      label: 'Open Torrent File...',
-      accelerator: 'CmdOrCtrl+O',
-      click: showOpenTorrentFile
-    },
-    {
-      label: 'Open Torrent Address...',
-      accelerator: 'CmdOrCtrl+U',
-      click: showOpenTorrentAddress
-    },
-    {
-      type: 'separator'
-    },
-    {
-      label: process.platform === 'windows' ? 'Close' : 'Close Window',
-      accelerator: 'CmdOrCtrl+W',
-      role: 'close'
-    }
-  ]
-
-  // File > Quit for Linux users with distros where the system tray is broken
-  if (process.platform === 'linux') {
-    fileMenu.push({
-      label: 'Quit',
-      click: () => app.quit()
-    })
-  }
-
   var template = [
     {
       label: 'File',
-      submenu: fileMenu
+      submenu: [
+        {
+          label: process.platform === 'darwin'
+            ? 'Create New Torrent...'
+            : 'Create New Torrent from Folder...',
+          accelerator: 'CmdOrCtrl+N',
+          click: () => dialog.openSeedDirectory()
+        },
+        {
+          label: 'Open Torrent File...',
+          accelerator: 'CmdOrCtrl+O',
+          click: () => dialog.openTorrentFile()
+        },
+        {
+          label: 'Open Torrent Address...',
+          accelerator: 'CmdOrCtrl+U',
+          click: () => dialog.openTorrentAddress()
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: process.platform === 'win32'
+            ? 'Close'
+            : 'Close Window',
+          accelerator: 'CmdOrCtrl+W',
+          role: 'close'
+        }
+      ]
     },
     {
       label: 'Edit',
@@ -203,6 +134,14 @@ function getAppMenuTemplate () {
           label: 'Select All',
           accelerator: 'CmdOrCtrl+A',
           role: 'selectall'
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Preferences',
+          accelerator: 'CmdOrCtrl+,',
+          click: () => windows.main.dispatch('preferences')
         }
       ]
     },
@@ -215,27 +154,20 @@ function getAppMenuTemplate () {
           accelerator: process.platform === 'darwin'
             ? 'Ctrl+Command+F'
             : 'F11',
-          click: () => toggleFullScreen()
+          click: () => windows.main.toggleFullScreen()
         },
         {
           label: 'Float on Top',
           type: 'checkbox',
-          click: () => toggleFloatOnTop()
+          click: () => windows.main.toggleAlwaysOnTop()
         },
         {
           type: 'separator'
         },
         {
-          label: 'Increase Volume',
+          label: 'Go Back',
-          accelerator: 'CmdOrCtrl+Up',
+          accelerator: 'Esc',
-          click: increaseVolume,
+          click: () => windows.main.dispatch('escapeBack')
-          enabled: false
-        },
-        {
-          label: 'Decrease Volume',
-          accelerator: 'CmdOrCtrl+Down',
-          click: decreaseVolume,
-          enabled: false
         },
         {
           type: 'separator'
@@ -248,27 +180,84 @@ function getAppMenuTemplate () {
               accelerator: process.platform === 'darwin'
                 ? 'Alt+Command+I'
                 : 'Ctrl+Shift+I',
-              click: toggleDevTools
+              click: () => windows.main.toggleDevTools()
             },
             {
               label: 'Show WebTorrent Process',
               accelerator: process.platform === 'darwin'
                 ? 'Alt+Command+P'
                 : 'Ctrl+Shift+P',
-              click: showWebTorrentWindow
+              click: () => windows.webtorrent.toggleDevTools()
             }
           ]
         }
       ]
     },
     {
-      label: 'Window',
+      label: 'Playback',
-      role: 'window',
       submenu: [
         {
-          label: 'Minimize',
+          label: 'Play/Pause',
-          accelerator: 'CmdOrCtrl+M',
+          accelerator: 'Space',
-          role: 'minimize'
+          click: () => windows.main.dispatch('playPause'),
+          enabled: false
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Increase Volume',
+          accelerator: 'CmdOrCtrl+Up',
+          click: () => windows.main.dispatch('changeVolume', 0.1),
+          enabled: false
+        },
+        {
+          label: 'Decrease Volume',
+          accelerator: 'CmdOrCtrl+Down',
+          click: () => windows.main.dispatch('changeVolume', -0.1),
+          enabled: false
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Step Forward',
+          accelerator: process.platform === 'darwin'
+            ? 'CmdOrCtrl+Alt+Right'
+            : 'Alt+Right',
+          click: () => windows.main.dispatch('skip', 1),
+          enabled: false
+        },
+        {
+          label: 'Step Backward',
+          accelerator: process.platform === 'darwin'
+            ? 'CmdOrCtrl+Alt+Left'
+            : 'Alt+Left',
+          click: () => windows.main.dispatch('skip', -1),
+          enabled: false
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Increase Speed',
+          accelerator: 'CmdOrCtrl+=',
+          click: () => windows.main.dispatch('changePlaybackRate', 1),
+          enabled: false
+        },
+        {
+          label: 'Decrease Speed',
+          accelerator: 'CmdOrCtrl+-',
+          click: () => windows.main.dispatch('changePlaybackRate', -1),
+          enabled: false
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Add Subtitles File...',
+          click: () => windows.main.dispatch('openSubtitles'),
+          enabled: false
         }
       ]
     },
@@ -278,25 +267,25 @@ function getAppMenuTemplate () {
       submenu: [
         {
           label: 'Learn more about ' + config.APP_NAME,
-          click: () => electron.shell.openExternal('https://webtorrent.io')
+          click: () => shell.openExternal(config.HOME_PAGE_URL)
         },
         {
           label: 'Contribute on GitHub',
-          click: () => electron.shell.openExternal(config.GITHUB_URL)
+          click: () => shell.openExternal(config.GITHUB_URL)
         },
         {
           type: 'separator'
         },
         {
           label: 'Report an Issue...',
-          click: () => electron.shell.openExternal(config.GITHUB_URL + '/issues')
+          click: () => shell.openExternal(config.GITHUB_URL_ISSUES)
         }
       ]
     }
   ]
 
   if (process.platform === 'darwin') {
-    // WebTorrent menu (OS X)
+    // Add WebTorrent app menu (OS X)
     template.unshift({
       label: config.APP_NAME,
       submenu: [
@@ -307,6 +296,14 @@ function getAppMenuTemplate () {
         {
           type: 'separator'
         },
+        {
+          label: 'Preferences',
+          accelerator: 'Cmd+,',
+          click: () => windows.main.dispatch('preferences')
+        },
+        {
+          type: 'separator'
+        },
         {
           label: 'Services',
           role: 'services',
@@ -340,17 +337,36 @@ function getAppMenuTemplate () {
       ]
     })
 
-    // Window menu (OS X)
+    // Add Window menu (OS X)
-    template[4].submenu.push(
+    template.splice(5, 0, {
-      {
+      label: 'Window',
-        type: 'separator'
+      role: 'window',
-      },
+      submenu: [
-      {
+        {
-        label: 'Bring All to Front',
+          label: 'Minimize',
-        role: 'front'
+          accelerator: 'CmdOrCtrl+M',
-      }
+          role: 'minimize'
-    )
+        },
-  } else {
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Bring All to Front',
+          role: 'front'
+        }
+      ]
+    })
+  }
+
+  // On Windows and Linux, open dialogs do not support selecting both files and
+  // folders and files, so add an extra menu item so there is one for each type.
+  if (process.platform === 'linux' || process.platform === 'win32') {
+    // File menu (Windows, Linux)
+    template[0].submenu.unshift({
+      label: 'Create New Torrent from File...',
+      click: () => dialog.openSeedFile()
+    })
+
     // Help menu (Windows, Linux)
     template[4].submenu.push(
       {
@@ -358,30 +374,19 @@ function getAppMenuTemplate () {
       },
       {
         label: 'About ' + config.APP_NAME,
-        click: windows.createAboutWindow
+        click: () => windows.about.init()
       }
     )
   }
+  // Add "File > Quit" menu item so Linux distros where the system tray icon is
+  // missing will have a way to quit the app.
+  if (process.platform === 'linux') {
+    // File menu (Linux)
+    template[0].submenu.push({
+      label: 'Quit',
+      click: () => app.quit()
+    })
+  }
 
   return template
 }
-
-function getDockMenuTemplate () {
-  return [
-    {
-      label: 'Create New Torrent...',
-      accelerator: 'CmdOrCtrl+N',
-      click: showOpenSeedFiles
-    },
-    {
-      label: 'Open Torrent File...',
-      accelerator: 'CmdOrCtrl+O',
-      click: showOpenTorrentFile
-    },
-    {
-      label: 'Open Torrent Address...',
-      accelerator: 'CmdOrCtrl+U',
-      click: showOpenTorrentAddress
-    }
-  ]
-}

main/power-save-blocker.js

@@ -0,0 +1,30 @@
+module.exports = {
+  start,
+  stop
+}
+
+var electron = require('electron')
+var log = require('./log')
+
+var blockId = 0
+
+/**
+ * Block the system from entering low-power (sleep) mode or turning off the
+ * display.
+ */
+function start () {
+  stop() // Stop the previous power saver block, if one exists.
+  blockId = electron.powerSaveBlocker.start('prevent-display-sleep')
+  log(`powerSaveBlocker.start: ${blockId}`)
+}
+
+/**
+ * Stop blocking the system from entering low-power mode.
+ */
+function stop () {
+  if (!electron.powerSaveBlocker.isStarted(blockId)) {
+    return
+  }
+  electron.powerSaveBlocker.stop(blockId)
+  log(`powerSaveBlocker.stop: ${blockId}`)
+}

main/shell.js

@@ -0,0 +1,41 @@
+module.exports = {
+  openExternal,
+  openItem,
+  showItemInFolder,
+  moveItemToTrash
+}
+
+var electron = require('electron')
+var log = require('./log')
+
+/**
+ * Open the given external protocol URL in the desktop’s default manner.
+ */
+function openExternal (url) {
+  log(`openExternal: ${url}`)
+  electron.shell.openExternal(url)
+}
+
+/**
+ * Open the given file in the desktop’s default manner.
+ */
+function openItem (path) {
+  log(`openItem: ${path}`)
+  electron.shell.openItem(path)
+}
+
+/**
+ * Show the given file in a file manager. If possible, select the file.
+ */
+function showItemInFolder (path) {
+  log(`showItemInFolder: ${path}`)
+  electron.shell.showItemInFolder(path)
+}
+
+/**
+ * Move the given file to trash and returns a boolean status for the operation.
+ */
+function moveItemToTrash (path) {
+  log(`moveItemToTrash: ${path}`)
+  electron.shell.moveItemToTrash(path)
+}

main/shortcuts.js

@@ -1,29 +1,20 @@
 module.exports = {
-  init,
+  onPlayerClose,
-  registerPlayerShortcuts,
+  onPlayerOpen
-  unregisterPlayerShortcuts
 }
 
 var electron = require('electron')
-var localShortcut = require('electron-localshortcut')
-
-var globalShortcut = electron.globalShortcut
-
-var menu = require('./menu')
 var windows = require('./windows')
 
-function init () {
+function onPlayerOpen () {
-  // ⌘+Shift+F is an alternative fullscreen shortcut to the ones defined in menu.js.
+  // Register play/pause media key, available on some keyboards.
-  // Electron does not support multiple accelerators for a single menu item, so this
+  electron.globalShortcut.register(
-  // is registered separately here.
+    'MediaPlayPause',
-  localShortcut.register('CmdOrCtrl+Shift+F', menu.toggleFullScreen)
+    () => windows.main.dispatch('playPause')
+  )
 }
 
-function registerPlayerShortcuts () {
+function onPlayerClose () {
-  // Special "media key" for play/pause, available on some keyboards
+  // Return the media key to the OS, so other apps can use it.
-  globalShortcut.register('MediaPlayPause', () => windows.main.send('dispatch', 'playPause'))
+  electron.globalShortcut.unregister('MediaPlayPause')
-}
-
-function unregisterPlayerShortcuts () {
-  globalShortcut.unregister('MediaPlayPause')
 }

main/squirrel-win32.js

@@ -12,8 +12,8 @@ var app = electron.app
 
 var handlers = require('./handlers')
 
-var exeName = path.basename(process.execPath)
+var EXE_NAME = path.basename(process.execPath)
-var updateDotExe = path.join(process.execPath, '..', '..', 'Update.exe')
+var UPDATE_EXE = path.join(process.execPath, '..', '..', 'Update.exe')
 
 function handleEvent (cmd) {
   if (cmd === '--squirrel-install') {
@@ -61,15 +61,17 @@ function handleEvent (cmd) {
   }
 
   if (cmd === '--squirrel-firstrun') {
-    // This is called on the app's first run. Do not quit, allow startup to continue.
+    // App is running for the first time. Do not quit, allow startup to continue.
     return false
   }
 
   return false
 }
 
-// Spawn a command and invoke the callback when it completes with an error and the output
+/**
-// from standard out.
+ * Spawn a command and invoke the callback when it completes with an error and
+ * the output from standard out.
+ */
 function spawn (command, args, cb) {
   var stdout = ''
 
@@ -99,24 +101,31 @@ function spawn (command, args, cb) {
   })
 }
 
-// Spawn Squirrel's Update.exe with the given arguments and invoke the callback when the
+/**
-// command completes.
+ * Spawn the Squirrel `Update.exe` command with the given arguments and invoke
+ * the callback when the command completes.
+ */
 function spawnUpdate (args, cb) {
-  spawn(updateDotExe, args, cb)
+  spawn(UPDATE_EXE, args, cb)
 }
 
-// Create desktop/start menu shortcuts using the Squirrel Update.exe command line API
+/**
+ * Create desktop and start menu shortcuts using the Squirrel `Update.exe`
+ * command.
+ */
 function createShortcuts (cb) {
-  spawnUpdate(['--createShortcut', exeName], cb)
+  spawnUpdate(['--createShortcut', EXE_NAME], cb)
 }
 
-// Update desktop/start menu shortcuts using the Squirrel Update.exe command line API
+/**
+ * Update desktop and start menu shortcuts using the Squirrel `Update.exe`
+ * command.
+ */
 function updateShortcuts (cb) {
   var homeDir = os.homedir()
   if (homeDir) {
     var desktopShortcutPath = path.join(homeDir, 'Desktop', 'WebTorrent.lnk')
-    // Check if the desktop shortcut has been previously deleted and and keep it deleted
+    // If the desktop shortcut was deleted by the user, then keep it deleted.
-    // if it was
     fs.access(desktopShortcutPath, function (err) {
       var desktopShortcutExists = !err
       createShortcuts(function () {
@@ -133,7 +142,10 @@ function updateShortcuts (cb) {
   }
 }
 
-// Remove desktop/start menu shortcuts using the Squirrel Update.exe command line API
+/**
+ * Remove desktop and start menu shortcuts using the Squirrel `Update.exe`
+ * command.
+ */
 function removeShortcuts (cb) {
-  spawnUpdate(['--removeShortcut', exeName], cb)
+  spawnUpdate(['--removeShortcut', EXE_NAME], cb)
 }

main/thumbnail.js

@@ -0,0 +1,35 @@
+module.exports = {
+  showPlayerThumbnailBar,
+  hidePlayerThumbnailBar,
+  updateThumbarButtons
+}
+
+var path = require('path')
+var config = require('../config')
+
+var windows = require('./windows')
+
+// gets called on player open
+function showPlayerThumbnailBar () {
+  updateThumbarButtons(false)
+}
+
+// gets called on player close
+function hidePlayerThumbnailBar () {
+  windows.main.win.setThumbarButtons([])
+}
+
+function updateThumbarButtons (isPaused) {
+  var icon = isPaused ? 'PlayThumbnailBarButton.png' : 'PauseThumbnailBarButton.png'
+  var tooltip = isPaused ? 'Play' : 'Pause'
+  var buttons = [
+    {
+      tooltip: tooltip,
+      icon: path.join(config.STATIC_PATH, icon),
+      click: function () {
+        windows.main.send('dispatch', 'playPause')
+      }
+    }
+  ]
+  windows.main.win.setThumbarButtons(buttons)
+}

main/tray.js

@@ -1,53 +1,62 @@
 module.exports = {
+  hasTray,
   init,
-  hasTray
+  onWindowBlur,
+  onWindowFocus
 }
 
-var cp = require('child_process')
-var path = require('path')
 var electron = require('electron')
 
 var app = electron.app
-var Menu = electron.Menu
-var Tray = electron.Tray
 
+var config = require('../config')
 var windows = require('./windows')
 
-var trayIcon
+var tray
 
 function init () {
-  // OS X has no tray icon
-  if (process.platform === 'darwin') return
-
-  // On Linux, asynchronously check for libappindicator1
   if (process.platform === 'linux') {
-    checkLinuxTraySupport(function (supportsTray) {
+    initLinux()
-      if (supportsTray) createTrayIcon()
-    })
   }
-
+  if (process.platform === 'win32') {
-  // Windows always supports minimize-to-tray
+    initWin32()
-  if (process.platform === 'win32') createTrayIcon()
+  }
+  // OS X apps generally do not have menu bar icons
 }
 
+/**
+ * Returns true if there a tray icon is active.
+ */
 function hasTray () {
-  return !!trayIcon
+  return !!tray
 }
 
-function createTrayIcon () {
+function onWindowBlur () {
-  trayIcon = new Tray(path.join(__dirname, '..', 'static', 'WebTorrentSmall.png'))
+  if (!tray) return
-
-  // On Windows, left click to open the app, right click for context menu
-  // On Linux, any click (right or left) opens the context menu
-  trayIcon.on('click', showApp)
-
-  // Show the tray context menu, and keep the available commands up to date
   updateTrayMenu()
-  windows.main.on('show', updateTrayMenu)
-  windows.main.on('hide', updateTrayMenu)
 }
 
+function onWindowFocus () {
+  if (!tray) return
+  updateTrayMenu()
+}
+
+function initLinux () {
+  checkLinuxTraySupport(function (supportsTray) {
+    if (supportsTray) createTray()
+  })
+}
+
+function initWin32 () {
+  createTray()
+}
+
+/**
+ * Check for libappindicator1 support before creating tray icon
+ */
 function checkLinuxTraySupport (cb) {
+  var cp = require('child_process')
+
   // Check that we're on Ubuntu (or another debian system) and that we have
   // libappindicator1. If WebTorrent was installed from the deb file, we should
   // always have it. If it was installed from the zip file, we might not.
@@ -59,25 +68,48 @@ function checkLinuxTraySupport (cb) {
   })
 }
 
+function createTray () {
+  tray = new electron.Tray(getIconPath())
+
+  // On Windows, left click opens the app, right click opens the context menu.
+  // On Linux, any click (left or right) opens the context menu.
+  tray.on('click', () => windows.main.show())
+
+  // Show the tray context menu, and keep the available commands up to date
+  updateTrayMenu()
+}
+
 function updateTrayMenu () {
-  var showHideMenuItem
+  var contextMenu = electron.Menu.buildFromTemplate(getMenuTemplate())
-  if (windows.main.isVisible()) {
+  tray.setContextMenu(contextMenu)
-    showHideMenuItem = { label: 'Hide to tray', click: hideApp }
+}
-  } else {
+
-    showHideMenuItem = { label: 'Show', click: showApp }
+function getMenuTemplate () {
+  return [
+    getToggleItem(),
+    {
+      label: 'Quit',
+      click: () => app.quit()
+    }
+  ]
+
+  function getToggleItem () {
+    if (windows.main.win.isVisible()) {
+      return {
+        label: 'Hide to tray',
+        click: () => windows.main.hide()
+      }
+    } else {
+      return {
+        label: 'Show WebTorrent',
+        click: () => windows.main.show()
+      }
+    }
   }
-  var contextMenu = Menu.buildFromTemplate([
-    showHideMenuItem,
-    { label: 'Quit', click: () => app.quit() }
-  ])
-  trayIcon.setContextMenu(contextMenu)
 }
 
-function showApp () {
+function getIconPath () {
-  windows.main.show()
+  return process.platform === 'win32'
-}
+    ? config.APP_ICON + '.ico'
-
+    : config.APP_ICON + '.png'
-function hideApp () {
-  windows.main.hide()
-  windows.main.send('dispatch', 'backToList')
 }

main/updater.js

@@ -0,0 +1,76 @@
+module.exports = {
+  init
+}
+
+var electron = require('electron')
+var get = require('simple-get')
+
+var config = require('../config')
+var log = require('./log')
+var windows = require('./windows')
+
+var AUTO_UPDATE_URL = config.AUTO_UPDATE_URL +
+  '?version=' + config.APP_VERSION +
+  '&platform=' + process.platform
+
+function init () {
+  if (process.platform === 'linux') {
+    initLinux()
+  } else {
+    initDarwinWin32()
+  }
+}
+
+// The Electron auto-updater does not support Linux yet, so manually check for
+// updates and show the user a modal notification.
+function initLinux () {
+  get.concat(AUTO_UPDATE_URL, onResponse)
+}
+
+function onResponse (err, res, data) {
+  if (err) return log(`Update error: ${err.message}`)
+  if (res.statusCode === 200) {
+    // Update available
+    try {
+      data = JSON.parse(data)
+    } catch (err) {
+      return log(`Update error: Invalid JSON response: ${err.message}`)
+    }
+    windows.main.dispatch('updateAvailable', data.version)
+  } else if (res.statusCode === 204) {
+    // No update available
+  } else {
+    // Unexpected status code
+    log(`Update error: Unexpected status code: ${res.statusCode}`)
+  }
+}
+
+function initDarwinWin32 () {
+  electron.autoUpdater.on(
+    'error',
+    (err) => log.error(`Update error: ${err.message}`)
+  )
+
+  electron.autoUpdater.on(
+    'checking-for-update',
+    () => log('Checking for update')
+  )
+
+  electron.autoUpdater.on(
+    'update-available',
+    () => log('Update available')
+  )
+
+  electron.autoUpdater.on(
+    'update-not-available',
+    () => log('Update not available')
+  )
+
+  electron.autoUpdater.on(
+    'update-downloaded',
+    (e, notes, name, date, url) => log(`Update downloaded: ${name}: ${url}`)
+  )
+
+  electron.autoUpdater.setFeedURL(AUTO_UPDATE_URL)
+  electron.autoUpdater.checkForUpdates()
+}

main/vlc.js

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

main/windows.js

@@ -1,131 +0,0 @@
-var windows = module.exports = {
-  about: null,
-  main: null,
-  createAboutWindow,
-  createWebTorrentHiddenWindow,
-  createMainWindow,
-  focusWindow
-}
-
-var electron = require('electron')
-
-var config = require('../config')
-var menu = require('./menu')
-var tray = require('./tray')
-
-function createAboutWindow () {
-  if (windows.about) {
-    return focusWindow(windows.about)
-  }
-  var win = windows.about = new electron.BrowserWindow({
-    backgroundColor: '#ECECEC',
-    show: false,
-    center: true,
-    resizable: false,
-    icon: config.APP_ICON + '.png',
-    title: process.platform !== 'darwin'
-      ? 'About ' + config.APP_WINDOW_TITLE
-      : '',
-    useContentSize: true, // Specify web page size without OS chrome
-    width: 300,
-    height: 170,
-    minimizable: false,
-    maximizable: false,
-    fullscreen: false,
-    skipTaskbar: true
-  })
-  win.loadURL(config.WINDOW_ABOUT)
-
-  // No window menu
-  win.setMenu(null)
-
-  win.webContents.on('did-finish-load', function () {
-    win.show()
-  })
-
-  win.once('closed', function () {
-    windows.about = null
-  })
-}
-
-function createWebTorrentHiddenWindow () {
-  var win = windows.webtorrent = new electron.BrowserWindow({
-    backgroundColor: '#1E1E1E',
-    show: false,
-    center: true,
-    title: 'webtorrent-hidden-window',
-    useContentSize: true,
-    width: 150,
-    height: 150,
-    minimizable: false,
-    maximizable: false,
-    resizable: false,
-    fullscreenable: false,
-    fullscreen: false,
-    skipTaskbar: true
-  })
-  win.loadURL(config.WINDOW_WEBTORRENT)
-
-  // Prevent killing the WebTorrent process
-  win.on('close', function (e) {
-    if (!electron.app.isQuitting) {
-      e.preventDefault()
-      win.hide()
-    }
-  })
-
-  win.once('closed', function () {
-    windows.webtorrent = null
-  })
-}
-
-function createMainWindow () {
-  if (windows.main) {
-    return focusWindow(windows.main)
-  }
-  var win = windows.main = new electron.BrowserWindow({
-    backgroundColor: '#1E1E1E',
-    darkTheme: true, // Forces dark theme (GTK+3)
-    icon: config.APP_ICON + 'Smaller.png', // Window and Volume Mixer icon.
-    minWidth: config.WINDOW_MIN_WIDTH,
-    minHeight: config.WINDOW_MIN_HEIGHT,
-    show: false, // Hide window until DOM finishes loading
-    title: config.APP_WINDOW_TITLE,
-    titleBarStyle: 'hidden-inset', // Hide OS chrome, except traffic light buttons (OS X)
-    useContentSize: true, // Specify web page size without OS chrome
-    width: 500,
-    height: 38 + (120 * 5) // header height + 4 torrents
-  })
-  win.loadURL(config.WINDOW_MAIN)
-
-  win.webContents.on('dom-ready', function () {
-    menu.onToggleFullScreen()
-  })
-
-  win.on('blur', menu.onWindowHide)
-  win.on('focus', menu.onWindowShow)
-
-  win.on('enter-full-screen', () => menu.onToggleFullScreen(true))
-  win.on('leave-full-screen', () => menu.onToggleFullScreen(false))
-
-  win.on('close', function (e) {
-    if (process.platform !== 'darwin' && !tray.hasTray()) {
-      electron.app.quit()
-    } else if (!electron.app.isQuitting) {
-      e.preventDefault()
-      win.hide()
-      win.send('dispatch', 'backToList')
-    }
-  })
-
-  win.once('closed', function () {
-    windows.main = null
-  })
-}
-
-function focusWindow (win) {
-  if (win.isMinimized()) {
-    win.restore()
-  }
-  win.show() // shows and gives focus
-}

main/windows/about.js

@@ -0,0 +1,48 @@
+var about = module.exports = {
+  init,
+  win: null
+}
+
+var config = require('../../config')
+var electron = require('electron')
+
+function init () {
+  if (about.win) {
+    return about.win.show()
+  }
+
+  var win = about.win = new electron.BrowserWindow({
+    backgroundColor: '#ECECEC',
+    center: true,
+    fullscreen: false,
+    height: 170,
+    icon: getIconPath(),
+    maximizable: false,
+    minimizable: false,
+    resizable: false,
+    show: false,
+    skipTaskbar: true,
+    title: 'About ' + config.APP_WINDOW_TITLE,
+    useContentSize: true,
+    width: 300
+  })
+
+  win.loadURL(config.WINDOW_ABOUT)
+
+  // No menu on the About window
+  win.setMenu(null)
+
+  win.webContents.once('did-finish-load', function () {
+    win.show()
+  })
+
+  win.once('closed', function () {
+    about.win = null
+  })
+}
+
+function getIconPath () {
+  return process.platform === 'win32'
+    ? config.APP_ICON + '.ico'
+    : config.APP_ICON + '.png'
+}

main/windows/index.js

@@ -0,0 +1,3 @@
+exports.about = require('./about')
+exports.main = require('./main')
+exports.webtorrent = require('./webtorrent')

main/windows/main.js

@@ -0,0 +1,220 @@
+var main = module.exports = {
+  dispatch,
+  hide,
+  init,
+  send,
+  setAspectRatio,
+  setBounds,
+  setProgress,
+  setTitle,
+  show,
+  toggleAlwaysOnTop,
+  toggleDevTools,
+  toggleFullScreen,
+  win: null
+}
+
+var electron = require('electron')
+
+var app = electron.app
+
+var config = require('../../config')
+var log = require('../log')
+var menu = require('../menu')
+var tray = require('../tray')
+
+var HEADER_HEIGHT = 37
+var TORRENT_HEIGHT = 100
+
+function init () {
+  if (main.win) {
+    return main.win.show()
+  }
+  var win = main.win = new electron.BrowserWindow({
+    backgroundColor: '#1E1E1E',
+    darkTheme: true, // Forces dark theme (GTK+3)
+    icon: getIconPath(), // Window icon (Windows, Linux)
+    minWidth: config.WINDOW_MIN_WIDTH,
+    minHeight: config.WINDOW_MIN_HEIGHT,
+    title: config.APP_WINDOW_TITLE,
+    titleBarStyle: 'hidden-inset', // Hide title bar (OS X)
+    useContentSize: true, // Specify web page size without OS chrome
+    width: 500,
+    height: HEADER_HEIGHT + (TORRENT_HEIGHT * 6) // header height + 5 torrents
+  })
+
+  win.loadURL(config.WINDOW_MAIN)
+
+  if (win.setSheetOffset) win.setSheetOffset(HEADER_HEIGHT)
+
+  win.webContents.on('dom-ready', function () {
+    menu.onToggleFullScreen(main.win.isFullScreen())
+  })
+
+  win.on('blur', onWindowBlur)
+  win.on('focus', onWindowFocus)
+
+  win.on('hide', onWindowBlur)
+  win.on('show', onWindowFocus)
+
+  win.on('enter-full-screen', function () {
+    menu.onToggleFullScreen(true)
+    send('fullscreenChanged', true)
+    win.setMenuBarVisibility(false)
+  })
+
+  win.on('leave-full-screen', function () {
+    menu.onToggleFullScreen(false)
+    send('fullscreenChanged', false)
+    win.setMenuBarVisibility(true)
+  })
+
+  win.on('close', function (e) {
+    if (process.platform !== 'darwin' && !tray.hasTray()) {
+      app.quit()
+    } else if (!app.isQuitting) {
+      e.preventDefault()
+      hide()
+    }
+  })
+}
+
+function dispatch (...args) {
+  send('dispatch', ...args)
+}
+
+function hide () {
+  if (!main.win) return
+  main.win.send('dispatch', 'backToList')
+  main.win.hide()
+}
+
+function send (...args) {
+  if (!main.win) return
+  main.win.send(...args)
+}
+
+/**
+ * Enforce window aspect ratio. Remove with 0. (OS X)
+ */
+function setAspectRatio (aspectRatio) {
+  if (!main.win) return
+  main.win.setAspectRatio(aspectRatio)
+}
+
+/**
+ * Change the size of the window.
+ * TODO: Clean this up? Seems overly complicated.
+ */
+function setBounds (bounds, maximize) {
+  // Do nothing in fullscreen
+  if (!main.win || main.win.isFullScreen()) {
+    log('setBounds: not setting bounds because we\'re in full screen')
+    return
+  }
+
+  // Maximize or minimize, if the second argument is present
+  var willBeMaximized
+  if (maximize === true) {
+    if (!main.win.isMaximized()) {
+      log('setBounds: maximizing')
+      main.win.maximize()
+    }
+    willBeMaximized = true
+  } else if (maximize === false) {
+    if (main.win.isMaximized()) {
+      log('setBounds: unmaximizing')
+      main.win.unmaximize()
+    }
+    willBeMaximized = false
+  } else {
+    willBeMaximized = main.win.isMaximized()
+  }
+
+  // Assuming we're not maximized or maximizing, set the window size
+  if (!willBeMaximized) {
+    log('setBounds: setting bounds to ' + JSON.stringify(bounds))
+    if (bounds.x === null && bounds.y === null) {
+      // X and Y not specified? By default, center on current screen
+      var scr = electron.screen.getDisplayMatching(main.win.getBounds())
+      bounds.x = Math.round(scr.bounds.x + scr.bounds.width / 2 - bounds.width / 2)
+      bounds.y = Math.round(scr.bounds.y + scr.bounds.height / 2 - bounds.height / 2)
+      log('setBounds: centered to ' + JSON.stringify(bounds))
+    }
+    main.win.setBounds(bounds, true)
+  } else {
+    log('setBounds: not setting bounds because of window maximization')
+  }
+}
+
+/**
+ * Set progress bar to [0, 1]. Indeterminate when > 1. Remove with < 0.
+ */
+function setProgress (progress) {
+  if (!main.win) return
+  main.win.setProgressBar(progress)
+}
+
+function setTitle (title) {
+  if (!main.win) return
+  main.win.setTitle(title)
+}
+
+function show () {
+  if (!main.win) return
+  main.win.show()
+}
+
+// Sets whether the window should always show on top of other windows
+function toggleAlwaysOnTop (flag) {
+  if (!main.win) return
+  if (flag == null) {
+    flag = !main.win.isAlwaysOnTop()
+  }
+  log(`toggleAlwaysOnTop ${flag}`)
+  main.win.setAlwaysOnTop(flag)
+  menu.onToggleAlwaysOnTop(flag)
+}
+
+function toggleDevTools () {
+  if (!main.win) return
+  log('toggleDevTools')
+  if (main.win.webContents.isDevToolsOpened()) {
+    main.win.webContents.closeDevTools()
+  } else {
+    main.win.webContents.openDevTools({ detach: true })
+  }
+}
+
+function toggleFullScreen (flag) {
+  if (!main.win || !main.win.isVisible()) {
+    return
+  }
+
+  if (flag == null) flag = !main.win.isFullScreen()
+
+  log(`toggleFullScreen ${flag}`)
+
+  if (flag) {
+    // Fullscreen and aspect ratio do not play well together. (OS X)
+    main.win.setAspectRatio(0)
+  }
+
+  main.win.setFullScreen(flag)
+}
+
+function onWindowBlur () {
+  menu.onWindowBlur()
+  tray.onWindowBlur()
+}
+
+function onWindowFocus () {
+  menu.onWindowFocus()
+  tray.onWindowFocus()
+}
+
+function getIconPath () {
+  return process.platform === 'win32'
+    ? config.APP_ICON + '.ico'
+    : config.APP_ICON + '.png'
+}

main/windows/webtorrent.js

@@ -0,0 +1,62 @@
+var webtorrent = module.exports = {
+  init,
+  send,
+  show,
+  toggleDevTools,
+  win: null
+}
+
+var electron = require('electron')
+
+var config = require('../../config')
+var log = require('../log')
+
+function init () {
+  var win = webtorrent.win = new electron.BrowserWindow({
+    backgroundColor: '#1E1E1E',
+    center: true,
+    fullscreen: false,
+    fullscreenable: false,
+    height: 150,
+    maximizable: false,
+    minimizable: false,
+    resizable: false,
+    show: false,
+    skipTaskbar: true,
+    title: 'webtorrent-hidden-window',
+    useContentSize: true,
+    width: 150
+  })
+
+  win.loadURL(config.WINDOW_WEBTORRENT)
+
+  // Prevent killing the WebTorrent process
+  win.on('close', function (e) {
+    if (electron.app.isQuitting) {
+      return
+    }
+    e.preventDefault()
+    win.hide()
+  })
+}
+
+function show () {
+  if (!webtorrent.win) return
+  webtorrent.win.show()
+}
+
+function send (...args) {
+  if (!webtorrent.win) return
+  webtorrent.win.send(...args)
+}
+
+function toggleDevTools () {
+  if (!webtorrent.win) return
+  log('toggleDevTools')
+  if (webtorrent.win.webContents.isDevToolsOpened()) {
+    webtorrent.win.webContents.closeDevTools()
+    webtorrent.win.hide()
+  } else {
+    webtorrent.win.webContents.openDevTools({ detach: true })
+  }
+}

package.json

@@ -1,11 +1,11 @@
 {
   "name": "webtorrent-desktop",
   "description": "WebTorrent, the streaming torrent client. For OS X, Windows, and Linux.",
-  "version": "0.3.3",
+  "version": "0.8.1",
   "author": {
-    "name": "Feross Aboukhadijeh",
+    "name": "WebTorrent, LLC",
-    "email": "feross@feross.org",
+    "email": "feross@webtorrent.io",
-    "url": "http://feross.org"
+    "url": "https://webtorrent.io"
   },
   "bin": {
     "webtorrent-desktop": "./bin/cmd.js"
@@ -14,54 +14,65 @@
     "url": "https://github.com/feross/webtorrent-desktop/issues"
   },
   "dependencies": {
-    "airplay-js": "guerrerocarlos/node-airplay-js",
+    "airplayer": "^2.0.0",
-    "application-config": "feross/node-application-config",
+    "application-config": "^0.2.1",
     "bitfield": "^1.0.2",
     "chromecasts": "^1.8.0",
-    "concat-stream": "^1.5.1",
     "create-torrent": "^3.24.5",
     "deep-equal": "^1.0.1",
-    "dlnacasts": "^0.0.3",
+    "dlnacasts": "^0.1.0",
     "drag-drop": "^2.11.0",
-    "electron-localshortcut": "^0.6.0",
+    "electron-prebuilt": "1.2.1",
-    "electron-prebuilt": "0.37.6",
     "fs-extra": "^0.27.0",
     "hyperx": "^2.0.2",
+    "iso-639-1": "^1.2.1",
     "languagedetect": "^1.1.1",
     "main-loop": "^3.2.0",
     "musicmetadata": "^2.0.2",
     "network-address": "^1.1.0",
+    "parse-torrent": "^5.7.3",
     "prettier-bytes": "^1.0.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",
-    "upload-element": "^1.0.1",
     "virtual-dom": "^2.1.1",
+    "vlc-command": "^1.0.1",
     "webtorrent": "0.x",
-    "winreg": "^1.1.1"
+    "winreg": "^1.2.0",
+    "zero-fill": "^2.2.3"
   },
   "devDependencies": {
-    "cross-zip": "^1.0.0",
+    "cross-zip": "^2.0.1",
     "electron-osx-sign": "^0.3.0",
     "electron-packager": "^7.0.0",
-    "electron-winstaller": "feross/windows-installer#build",
+    "electron-winstaller": "^2.3.0",
     "gh-release": "^2.0.3",
     "minimist": "^1.2.0",
-    "nobin-debian-installer": "^0.0.9",
+    "mkdirp": "^0.5.1",
+    "nobin-debian-installer": "^0.0.10",
+    "open": "0.0.5",
     "plist": "^1.2.0",
+    "rimraf": "^2.5.2",
     "run-series": "^1.1.4",
-    "standard": "^6.0.5"
+    "standard": "^7.0.0"
   },
   "homepage": "https://webtorrent.io",
   "keywords": [
     "desktop",
     "electron",
     "electron-app",
+    "hybrid webtorrent client",
+    "mad science",
+    "torrent client",
+    "torrent",
     "webtorrent"
   ],
   "license": "MIT",
   "main": "index.js",
   "optionalDependencies": {
-    "appdmg": "^0.3.6"
+    "appdmg": "^0.4.3"
   },
   "productName": "WebTorrent",
   "repository": {
@@ -70,9 +81,10 @@
   },
   "scripts": {
     "clean": "node ./bin/clean.js",
+    "open-config": "node ./bin/open-config.js",
     "package": "node ./bin/package.js",
     "start": "electron .",
-    "test": "standard",
+    "test": "standard && node ./bin/check-deps.js",
     "update-authors": "./bin/update-authors.sh"
   }
 }

renderer/about.html

@@ -29,7 +29,10 @@
   <body>
     <img src="../static/WebTorrent.png">
     <h1>WebTorrent</h1>
-    <p>Version <script>document.write(require('../package.json').version)</script></p>
+    <p>
+      Version <script>document.write(require('../package.json').version)</script>
+      (<script>document.write(require('webtorrent/package.json').version)</script>)
+    </p>
     <p><script>document.write(require('../config').APP_COPYRIGHT)</script></p>
   </body>
 </html>

renderer/lib/cast.js

@@ -3,15 +3,17 @@
 // * Starts and stops casting, provides remote video controls
 module.exports = {
   init,
-  open,
+  toggleMenu,
-  close,
+  selectDevice,
+  stop,
   play,
   pause,
   seek,
-  setVolume
+  setVolume,
+  setRate
 }
 
-var airplay = require('airplay-js')
+var airplayer = require('airplayer')()
 var chromecasts = require('chromecasts')()
 var dlnacasts = require('dlnacasts')()
 
@@ -31,25 +33,49 @@ function init (appState, callback) {
   state = appState
   update = callback
 
+  state.devices.chromecast = chromecastPlayer()
+  state.devices.dlna = dlnaPlayer()
+  state.devices.airplay = airplayPlayer()
+
   // Listen for devices: Chromecast, DLNA and Airplay
-  chromecasts.on('update', function (player) {
+  chromecasts.on('update', function (device) {
-    state.devices.chromecast = chromecastPlayer(player)
+    // TODO: how do we tell if there are *no longer* any Chromecasts available?
+    // From looking at the code, chromecasts.players only grows, never shrinks
+    state.devices.chromecast.addDevice(device)
   })
 
-  dlnacasts.on('update', function (player) {
+  dlnacasts.on('update', function (device) {
-    state.devices.dlna = dlnaPlayer(player)
+    state.devices.dlna.addDevice(device)
   })
 
-  var browser = airplay.createBrowser()
+  airplayer.on('update', function (device) {
-  browser.on('deviceOn', function (player) {
+    state.devices.airplay.addDevice(device)
-    state.devices.airplay = airplayPlayer(player)
+  })
-  }).start()
 }
 
 // chromecast player implementation
-function chromecastPlayer (player) {
+function chromecastPlayer () {
-  function addEvents () {
+  var ret = {
-    player.on('error', function (err) {
+    device: null,
+    addDevice,
+    getDevices,
+    open,
+    play,
+    pause,
+    stop,
+    status,
+    seek,
+    volume
+  }
+  return ret
+
+  function getDevices () {
+    return chromecasts.players
+  }
+
+  function addDevice (device) {
+    device.on('error', function (err) {
+      if (device !== ret.device) return
       state.playing.location = 'local'
       state.errors.push({
         time: new Date().getTime(),
@@ -57,7 +83,8 @@ function chromecastPlayer (player) {
       })
       update()
     })
-    player.on('disconnect', function () {
+    device.on('disconnect', function () {
+      if (device !== ret.device) return
       state.playing.location = 'local'
       update()
     })
@@ -65,7 +92,7 @@ function chromecastPlayer (player) {
 
   function open () {
     var torrentSummary = state.saved.torrents.find((x) => x.infoHash === state.playing.infoHash)
-    player.play(state.server.networkURL, {
+    ret.device.play(state.server.networkURL, {
       type: 'video/mp4',
       title: config.APP_NAME + ' - ' + torrentSummary.name
     }, function (err) {
@@ -83,19 +110,19 @@ function chromecastPlayer (player) {
   }
 
   function play (callback) {
-    player.play(null, null, callback)
+    ret.device.play(null, null, callback)
   }
 
   function pause (callback) {
-    player.pause(callback)
+    ret.device.pause(callback)
   }
 
   function stop (callback) {
-    player.stop(callback)
+    ret.device.stop(callback)
   }
 
   function status () {
-    player.status(function (err, status) {
+    ret.device.status(function (err, status) {
       if (err) return console.log('error getting %s status: %o', state.playing.location, err)
       state.playing.isPaused = status.playerState === 'PAUSED'
       state.playing.currentTime = status.currentTime
@@ -105,36 +132,59 @@ function chromecastPlayer (player) {
   }
 
   function seek (time, callback) {
-    player.seek(time, callback)
+    ret.device.seek(time, callback)
   }
 
   function volume (volume, callback) {
-    player.volume(volume, callback)
+    ret.device.volume(volume, callback)
-  }
-
-  addEvents()
-
-  return {
-    player: player,
-    open: open,
-    play: play,
-    pause: pause,
-    stop: stop,
-    status: status,
-    seek: seek,
-    volume: volume
   }
 }
 
 // airplay player implementation
-function airplayPlayer (player) {
+function airplayPlayer () {
+  var ret = {
+    device: null,
+    addDevice,
+    getDevices,
+    open,
+    play,
+    pause,
+    stop,
+    status,
+    seek,
+    volume
+  }
+  return ret
+
+  function addDevice (player) {
+    player.on('event', function (event) {
+      switch (event.state) {
+        case 'loading':
+          break
+        case 'playing':
+          state.playing.isPaused = false
+          break
+        case 'paused':
+          state.playing.isPaused = true
+          break
+        case 'stopped':
+          break
+      }
+      update()
+    })
+  }
+
+  function getDevices () {
+    return airplayer.players
+  }
+
   function open () {
-    player.play(state.server.networkURL, 0, function (res) {
+    ret.device.play(state.server.networkURL, function (err, res) {
-      if (res.statusCode !== 200) {
+      if (err) {
         state.playing.location = 'local'
         state.errors.push({
           time: new Date().getTime(),
-          message: 'Could not connect to AirPlay.'
+          message: 'Could not connect to AirPlay. ' + err.message
         })
       } else {
         state.playing.location = 'airplay'
@@ -144,55 +194,67 @@ function airplayPlayer (player) {
   }
 
   function play (callback) {
-    player.rate(1, callback)
+    ret.device.resume(callback)
   }
 
   function pause (callback) {
-    player.rate(0, callback)
+    ret.device.pause(callback)
   }
 
   function stop (callback) {
-    player.stop(callback)
+    ret.device.stop(callback)
   }
 
   function status () {
-    player.status(function (status) {
+    ret.device.playbackInfo(function (err, res, status) {
-      state.playing.isPaused = status.rate === 0
+      if (err) {
-      state.playing.currentTime = status.position
+        state.playing.location = 'local'
-      // TODO: get airplay volume, implementation needed. meanwhile set value in setVolume
+        state.errors.push({
-      // According to docs is in [-30 - 0] (db) range
+          time: new Date().getTime(),
-      // should be converted to [0 - 1] using (val / 30 + 1)
+          message: 'Could not connect to AirPlay. ' + err.message
-      update()
+        })
+      } else {
+        state.playing.isPaused = status.rate === 0
+        state.playing.currentTime = status.position
+        update()
+      }
     })
   }
 
   function seek (time, callback) {
-    player.scrub(time, callback)
+    ret.device.scrub(time, callback)
   }
 
   function volume (volume, callback) {
-    // TODO remove line below once we can fetch the information in status update
+    // AirPlay doesn't support volume
+    // TODO: We should just disable the volume slider
     state.playing.volume = volume
-    volume = (volume - 1) * 30
-    player.volume(volume, callback)
-  }
-
-  return {
-    player: player,
-    open: open,
-    play: play,
-    pause: pause,
-    stop: stop,
-    status: status,
-    seek: seek,
-    volume: volume
   }
 }
 
 // DLNA player implementation
 function dlnaPlayer (player) {
-  function addEvents () {
+  var ret = {
-    player.on('error', function (err) {
+    device: null,
+    addDevice,
+    getDevices,
+    open,
+    play,
+    pause,
+    stop,
+    status,
+    seek,
+    volume
+  }
+  return ret
+
+  function getDevices () {
+    return dlnacasts.players
+  }
+
+  function addDevice (device) {
+    device.on('error', function (err) {
+      if (device !== ret.device) return
       state.playing.location = 'local'
       state.errors.push({
         time: new Date().getTime(),
@@ -200,7 +262,8 @@ function dlnaPlayer (player) {
       })
       update()
     })
-    player.on('disconnect', function () {
+    device.on('disconnect', function () {
+      if (device !== ret.device) return
       state.playing.location = 'local'
       update()
     })
@@ -208,7 +271,7 @@ function dlnaPlayer (player) {
 
   function open () {
     var torrentSummary = state.saved.torrents.find((x) => x.infoHash === state.playing.infoHash)
-    player.play(state.server.networkURL, {
+    ret.device.play(state.server.networkURL, {
       type: 'video/mp4',
       title: config.APP_NAME + ' - ' + torrentSummary.name,
       seek: state.playing.currentTime > 10 ? state.playing.currentTime : 0
@@ -227,19 +290,19 @@ function dlnaPlayer (player) {
   }
 
   function play (callback) {
-    player.play(null, null, callback)
+    ret.device.play(null, null, callback)
   }
 
   function pause (callback) {
-    player.pause(callback)
+    ret.device.pause(callback)
   }
 
   function stop (callback) {
-    player.stop(callback)
+    ret.device.stop(callback)
   }
 
   function status () {
-    player.status(function (err, status) {
+    ret.device.status(function (err, status) {
       if (err) return console.log('error getting %s status: %o', state.playing.location, err)
       state.playing.isPaused = status.playerState === 'PAUSED'
       state.playing.currentTime = status.currentTime
@@ -249,61 +312,78 @@ function dlnaPlayer (player) {
   }
 
   function seek (time, callback) {
-    player.seek(time, callback)
+    ret.device.seek(time, callback)
   }
 
   function volume (volume, callback) {
-    player.volume(volume, function (err) {
+    ret.device.volume(volume, function (err) {
       // quick volume update
       state.playing.volume = volume
       callback(err)
     })
   }
-
-  addEvents()
-
-  return {
-    player: player,
-    open: open,
-    play: play,
-    pause: pause,
-    stop: stop,
-    status: status,
-    seek: seek,
-    volume: volume
-  }
 }
 
 // Start polling cast device state, whenever we're connected
 function startStatusInterval () {
   statusInterval = setInterval(function () {
-    var device = getDevice()
+    var player = getPlayer()
-    if (device) {
+    if (player) player.status()
-      device.status()
-    }
   }, 1000)
 }
 
-function open (location) {
+/*
+ * Shows the device menu for a given cast type ('chromecast', 'airplay', etc)
+ * The menu lists eg. all Chromecasts detected; the user can click one to cast.
+ * If the menu was already showing for that type, hides the menu.
+ */
+function toggleMenu (location) {
+  // If the menu is already showing, hide it
+  if (state.devices.castMenu && state.devices.castMenu.location === location) {
+    state.devices.castMenu = null
+    return
+  }
+
+  // Never cast to two devices at the same time
   if (state.playing.location !== 'local') {
     throw new Error('You can\'t connect to ' + location + ' when already connected to another device')
   }
 
-  state.playing.location = location + '-pending'
+  // Find all cast devices of the given type
-  var device = getDevice(location)
+  var player = getPlayer(location)
-  if (device) {
+  var devices = player ? player.getDevices() : []
-    getDevice(location).open()
+  if (devices.length === 0) throw new Error('No ' + location + ' devices available')
-    startStatusInterval()
-  }
 
+  // Show a menu
+  state.devices.castMenu = {location, devices}
+}
+
+function selectDevice (index) {
+  var {location, devices} = state.devices.castMenu
+
+  // Start casting
+  var player = getPlayer(location)
+  player.device = devices[index]
+  player.open()
+
+  // Poll the casting device's status every few seconds
+  startStatusInterval()
+
+  // Show the Connecting... screen
+  state.devices.castMenu = null
+  state.playing.castName = devices[index].name
+  state.playing.location = location + '-pending'
   update()
 }
 
 // Stops casting, move video back to local screen
-function close () {
+function stop () {
-  var device = getDevice()
+  var player = getPlayer()
-  if (device) {
+  if (player) {
-    device.stop(stoppedCasting)
+    player.stop(function () {
+      player.device = null
+      stoppedCasting()
+    })
     clearInterval(statusInterval)
   } else {
     stoppedCasting()
@@ -316,8 +396,8 @@ function stoppedCasting () {
   update()
 }
 
-function getDevice (location) {
+function getPlayer (location) {
-  if (location && state.devices[location]) {
+  if (location) {
     return state.devices[location]
   } else if (state.playing.location === 'chromecast') {
     return state.devices.chromecast
@@ -331,31 +411,39 @@ function getDevice (location) {
 }
 
 function play () {
-  var device = getDevice()
+  var player = getPlayer()
-  if (device) {
+  if (player) player.play(castCallback)
-    device.play(castCallback)
-  }
 }
 
 function pause () {
-  var device = getDevice()
+  var player = getPlayer()
-  if (device) {
+  if (player) player.pause(castCallback)
-    device.pause(castCallback)
+}
+
+function setRate (rate) {
+  var player
+  var result = true
+  if (state.playing.location === 'chromecast') {
+    // TODO find how to control playback rate on chromecast
+    castCallback()
+    result = false
+  } else if (state.playing.location === 'airplay') {
+    player = state.devices.airplay
+    player.rate(rate, castCallback)
+  } else {
+    result = false
   }
+  return result
 }
 
 function seek (time) {
-  var device = getDevice()
+  var player = getPlayer()
-  if (device) {
+  if (player) player.seek(time, castCallback)
-    device.seek(time, castCallback)
-  }
 }
 
 function setVolume (volume) {
-  var device = getDevice()
+  var player = getPlayer()
-  if (device) {
+  if (player) player.volume(volume, castCallback)
-    device.volume(volume, castCallback)
-  }
 }
 
 function castCallback () {

renderer/lib/dispatcher.js

@@ -1,36 +1,39 @@
 module.exports = {
-  setDispatch,
   dispatch,
-  dispatcher
+  dispatcher,
+  setDispatch
 }
 
-// Memoize most of our event handlers, which are functions in the form
+var dispatchers = {}
-// () => dispatch(<args>)
+var _dispatch = function () {}
-// ... this prevents virtual-dom from updating every listener on every update()
-var _dispatchers = {}
-var _dispatch = () => {}
 
 function setDispatch (dispatch) {
   _dispatch = dispatch
 }
 
-// Get a _memoized event handler that calls dispatch()
+function dispatch (...args) {
-// All args must be JSON-able
+  _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
+// each update().
 function dispatcher (...args) {
-  var json = JSON.stringify(args)
+  var str = JSON.stringify(args)
-  var handler = _dispatchers[json]
+  var handler = dispatchers[str]
   if (!handler) {
-    handler = _dispatchers[json] = (e) => {
+    handler = dispatchers[str] = function (e) {
-      // Don't click on whatever is below the button
+      // Do not propagate click to elements below the button
       e.stopPropagation()
-      // Don't regisiter clicks on disabled buttons
+
-      if (e.currentTarget.classList.contains('disabled')) return
+      if (e.currentTarget.classList.contains('disabled')) {
-      _dispatch.apply(null, args)
+        // Ignore clicks on disabled elements
+        return
+      }
+
+      dispatch(...args)
     }
   }
   return handler
 }
-
-function dispatch (...args) {
-  _dispatch.apply(null, args)
-}

renderer/lib/hx.js

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

renderer/lib/location-history.js

@@ -4,81 +4,123 @@ function LocationHistory () {
   if (!new.target) return new LocationHistory()
   this._history = []
   this._forward = []
-  this._pending = null
+  this._pending = false
 }
 
-LocationHistory.prototype.go = function (page, cb) {
+LocationHistory.prototype.url = function () {
-  console.log('go', page)
+  return this.current() && this.current().url
-  this.clearForward()
-  this._go(page, cb)
-}
-
-LocationHistory.prototype._go = function (page, cb) {
-  if (this._pending) return
-  if (page.onbeforeload) {
-    this._pending = page
-    page.onbeforeload((err) => {
-      if (this._pending !== page) return /* navigation was cancelled */
-      this._pending = null
-      if (err) {
-        if (cb) cb(err)
-        return
-      }
-      this._history.push(page)
-      if (cb) cb()
-    })
-  } else {
-    this._history.push(page)
-    if (cb) cb()
-  }
-}
-
-LocationHistory.prototype.back = function (cb) {
-  if (this._history.length <= 1) return
-
-  var page = this._history.pop()
-
-  if (page.onbeforeunload) {
-    // TODO: this is buggy. If the user clicks back twice, then those pages
-    // may end up in _forward in the wrong order depending on which onbeforeunload
-    // call finishes first.
-    page.onbeforeunload(() => {
-      this._forward.push(page)
-      if (cb) cb()
-    })
-  } else {
-    this._forward.push(page)
-    if (cb) cb()
-  }
-}
-
-LocationHistory.prototype.forward = function (cb) {
-  if (this._forward.length === 0) return
-
-  var page = this._forward.pop()
-  this._go(page, cb)
-}
-
-LocationHistory.prototype.clearForward = function () {
-  this._forward = []
 }
 
 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.pending = function () {
+LocationHistory.prototype.clearForward = function (url) {
-  return this._pending
+  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.clearPending = function () {
+LocationHistory.prototype.backToFirst = function (cb) {
-  this._pending = null
+  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/lib/migrations.js

@@ -0,0 +1,95 @@
+/* eslint-disable camelcase */
+
+module.exports = {
+  run
+}
+
+var semver = require('semver')
+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)
+  if (!semver.valid(state.saved.version)) {
+    state.saved.version = '0.0.0' // Pre-0.7.0 version, so run all migrations
+  }
+
+  var version = state.saved.version
+
+  if (semver.lt(version, '0.7.0')) {
+    migrate_0_7_0(state.saved)
+  }
+
+  if (semver.lt(version, '0.7.2')) {
+    migrate_0_7_2(state.saved)
+  }
+
+  // Config is now on the new version
+  state.saved.version = config.APP_VERSION
+}
+
+function migrate_0_7_0 (saved) {
+  console.log('migrate to 0.7.0')
+
+  var fs = require('fs-extra')
+  var path = require('path')
+
+  saved.torrents.forEach(function (ts) {
+    var infoHash = ts.infoHash
+
+    // Replace torrentPath with torrentFileName
+    // There are a number of cases to handle here:
+    // * Originally we used absolute paths
+    // * Then, relative paths for the default torrents, eg '../static/sintel.torrent'
+    // * Then, paths computed at runtime for default torrents, eg 'sintel.torrent'
+    // * Finally, now we're getting rid of torrentPath altogether
+    var src, dst
+    if (ts.torrentPath) {
+      console.log('replacing torrentPath %s', ts.torrentPath)
+      if (path.isAbsolute(ts.torrentPath) || ts.torrentPath.startsWith('..')) {
+        src = ts.torrentPath
+      } else {
+        src = path.join(config.STATIC_PATH, ts.torrentPath)
+      }
+      dst = path.join(config.TORRENT_PATH, infoHash + '.torrent')
+      // Synchronous FS calls aren't ideal, but probably OK in a migration
+      // that only runs once
+      if (src !== dst) fs.copySync(src, dst)
+
+      delete ts.torrentPath
+      ts.torrentFileName = infoHash + '.torrent'
+    }
+
+    // Replace posterURL with posterFileName
+    if (ts.posterURL) {
+      console.log('replacing posterURL %s', ts.posterURL)
+      var extension = path.extname(ts.posterURL)
+      src = path.isAbsolute(ts.posterURL)
+        ? ts.posterURL
+        : path.join(config.STATIC_PATH, ts.posterURL)
+      dst = path.join(config.POSTER_PATH, infoHash + extension)
+      // Synchronous FS calls aren't ideal, but probably OK in a migration
+      // that only runs once
+      if (src !== dst) fs.copySync(src, dst)
+
+      delete ts.posterURL
+      ts.posterFileName = infoHash + extension
+    }
+
+    // Fix exception caused by incorrect file ordering.
+    // https://github.com/feross/webtorrent-desktop/pull/604#issuecomment-222805214
+    delete ts.defaultPlayFileIndex
+    delete ts.files
+    delete ts.selections
+    delete ts.fileModtimes
+  })
+}
+
+function migrate_0_7_2 (saved) {
+  if (!saved.prefs) {
+    saved.prefs = {
+      downloadPath: config.DEFAULT_DOWNLOAD_PATH
+    }
+  }
+}

renderer/lib/sound.js

@@ -6,41 +6,43 @@ module.exports = {
 var config = require('../../config')
 var path = require('path')
 
+var VOLUME = 0.15
+
 /* Cache of Audio elements, for instant playback */
 var cache = {}
 
 var sounds = {
   ADD: {
     url: 'file://' + path.join(config.STATIC_PATH, 'sound', 'add.wav'),
-    volume: 0.2
+    volume: VOLUME
   },
   DELETE: {
     url: 'file://' + path.join(config.STATIC_PATH, 'sound', 'delete.wav'),
-    volume: 0.1
+    volume: VOLUME
   },
   DISABLE: {
     url: 'file://' + path.join(config.STATIC_PATH, 'sound', 'disable.wav'),
-    volume: 0.2
+    volume: VOLUME
   },
   DONE: {
     url: 'file://' + path.join(config.STATIC_PATH, 'sound', 'done.wav'),
-    volume: 0.2
+    volume: VOLUME
   },
   ENABLE: {
     url: 'file://' + path.join(config.STATIC_PATH, 'sound', 'enable.wav'),
-    volume: 0.2
+    volume: VOLUME
   },
   ERROR: {
     url: 'file://' + path.join(config.STATIC_PATH, 'sound', 'error.wav'),
-    volume: 0.2
+    volume: VOLUME
   },
   PLAY: {
     url: 'file://' + path.join(config.STATIC_PATH, 'sound', 'play.wav'),
-    volume: 0.2
+    volume: VOLUME
   },
   STARTUP: {
     url: 'file://' + path.join(config.STATIC_PATH, 'sound', 'startup.wav'),
-    volume: 0.4
+    volume: VOLUME * 2
   }
 }
 

renderer/lib/state.js

@@ -0,0 +1,212 @@
+module.exports = {
+  getDefaultPlayState,
+  load,
+  save
+}
+
+var appConfig = require('application-config')('WebTorrent')
+var path = require('path')
+
+var config = require('../../config')
+var migrations = require('./migrations')
+
+appConfig.filePath = path.join(config.CONFIG_PATH, 'config.json')
+
+function getDefaultState () {
+  var LocationHistory = require('./location-history')
+
+  return {
+    /*
+     * Temporary state disappears once the program exits.
+     * It can contain complex objects like open connections, etc.
+     */
+    client: null, /* the WebTorrent client */
+    server: null, /* local WebTorrent-to-HTTP server */
+    prev: {}, /* used for state diffing in updateElectron() */
+    location: new LocationHistory(),
+    window: {
+      bounds: null, /* {x, y, width, height } */
+      isFocused: true,
+      isFullScreen: false,
+      title: config.APP_WINDOW_TITLE
+    },
+    selectedInfoHash: null, /* the torrent we've selected to view details. see state.torrents */
+    playing: getDefaultPlayState(), /* the media (audio or video) that we're currently playing */
+    devices: {}, /* playback devices like Chromecast and AppleTV */
+    dock: {
+      badge: 0,
+      progress: 0
+    },
+    modal: null, /* modal popover */
+    errors: [], /* user-facing errors */
+    nextTorrentKey: 1, /* identify torrents for IPC between the main and webtorrent windows */
+
+    /*
+     * Saved state is read from and written to a file every time the app runs.
+     * It should be simple and minimal and must be JSON.
+     * It must never contain absolute paths since we have a portable app.
+     *
+     * Config path:
+     *
+     * OS X                 ~/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
+     * Windows (XP, 2000)   %USERPROFILE%/Local Settings/Application Data/WebTorrent/config.json
+     *
+     * Also accessible via `require('application-config')('WebTorrent').filePath`
+     */
+    saved: {},
+
+    /*
+     * Getters, for convenience
+     */
+    getPlayingTorrentSummary,
+    getPlayingFileSummary
+  }
+}
+
+/* Whenever we stop playing video or audio, here's what we reset state.playing to */
+function getDefaultPlayState () {
+  return {
+    infoHash: null, /* the info hash of the torrent we're playing */
+    fileIndex: null, /* the zero-based index within the torrent */
+    location: 'local', /* 'local', 'chromecast', 'airplay' */
+    type: null, /* 'audio' or 'video', could be 'other' if ever support eg streaming to VLC */
+    currentTime: 0, /* seconds */
+    duration: 1, /* seconds */
+    isPaused: true,
+    isStalled: false,
+    lastTimeUpdate: 0, /* Unix time in ms */
+    mouseStationarySince: 0, /* Unix time in ms */
+    playbackRate: 1,
+    subtitles: {
+      tracks: [], /* subtitle tracks, each {label, language, ...} */
+      selectedIndex: -1, /* current subtitle track */
+      showMenu: false /* popover menu, above the video */
+    },
+    aspectRatio: 0 /* aspect ratio of the video */
+  }
+}
+
+/* If the saved state file doesn't exist yet, here's what we use instead */
+function setupSavedState (cb) {
+  var fs = require('fs-extra')
+  var parseTorrent = require('parse-torrent')
+  var parallel = require('run-parallel')
+
+  var saved = {
+    prefs: {
+      downloadPath: config.DEFAULT_DOWNLOAD_PATH
+    },
+    torrents: config.DEFAULT_TORRENTS.map(createTorrentObject),
+    version: config.APP_VERSION /* make sure we can upgrade gracefully later */
+  }
+
+  var tasks = []
+
+  config.DEFAULT_TORRENTS.map(function (t, i) {
+    var infoHash = saved.torrents[i].infoHash
+    tasks.push(function (cb) {
+      fs.copy(
+        path.join(config.STATIC_PATH, t.posterFileName),
+        path.join(config.POSTER_PATH, infoHash + path.extname(t.posterFileName)),
+        cb
+      )
+    })
+    tasks.push(function (cb) {
+      fs.copy(
+        path.join(config.STATIC_PATH, t.torrentFileName),
+        path.join(config.TORRENT_PATH, infoHash + '.torrent'),
+        cb
+      )
+    })
+  })
+
+  parallel(tasks, function (err) {
+    if (err) return cb(err)
+    cb(null, saved)
+  })
+
+  function createTorrentObject (t) {
+    var torrent = fs.readFileSync(path.join(config.STATIC_PATH, t.torrentFileName))
+    var parsedTorrent = parseTorrent(torrent)
+
+    return {
+      status: 'paused',
+      infoHash: parsedTorrent.infoHash,
+      name: t.name,
+      displayName: t.name,
+      posterFileName: parsedTorrent.infoHash + path.extname(t.posterFileName),
+      torrentFileName: parsedTorrent.infoHash + '.torrent',
+      magnetURI: parseTorrent.toMagnetURI(parsedTorrent),
+      files: parsedTorrent.files,
+      selections: parsedTorrent.files.map((x) => true)
+    }
+  }
+}
+
+function getPlayingTorrentSummary () {
+  var infoHash = this.playing.infoHash
+  return this.saved.torrents.find((x) => x.infoHash === infoHash)
+}
+
+function getPlayingFileSummary () {
+  var torrentSummary = this.getPlayingTorrentSummary()
+  if (!torrentSummary) return null
+  return torrentSummary.files[this.playing.fileIndex]
+}
+
+function load (cb) {
+  var state = getDefaultState()
+
+  appConfig.read(function (err, saved) {
+    if (err || !saved.version) {
+      console.log('Missing config file: Creating new one')
+      setupSavedState(onSaved)
+    } else {
+      onSaved(null, saved)
+    }
+  })
+
+  function onSaved (err, saved) {
+    if (err) return cb(err)
+    state.saved = saved
+    migrations.run(state)
+    cb(null, state)
+  }
+}
+
+// Write state.saved to the JSON state file
+function save (state, cb) {
+  console.log('Saving state to ' + appConfig.filePath)
+
+  var electron = require('electron')
+
+  // Clean up, so that we're not saving any pending state
+  var copy = Object.assign({}, state.saved)
+  // Remove torrents pending addition to the list, where we haven't finished
+  // reading the torrent file or file(s) to seed & don't have an infohash
+  copy.torrents = copy.torrents
+    .filter((x) => x.infoHash)
+    .map(function (x) {
+      var torrent = {}
+      for (var key in x) {
+        if (key === 'progress' || key === 'torrentKey') {
+          continue // Don't save progress info or key for the webtorrent process
+        }
+        if (key === 'playStatus') {
+          continue // Don't save whether a torrent is playing / pending
+        }
+        torrent[key] = x[key]
+      }
+      return torrent
+    })
+
+  appConfig.write(copy, function (err) {
+    if (err) console.error(err)
+
+    // TODO: this doesn't belong here
+    electron.ipcRenderer.send('savedState')
+  })
+}

renderer/lib/telemetry.js

@@ -0,0 +1,140 @@
+// Collects anonymous usage stats and uncaught errors
+// Reports back so that we can improve WebTorrent Desktop
+module.exports = {
+  init,
+  logUncaughtError,
+  logPlayAttempt
+}
+
+const crypto = require('crypto')
+const electron = require('electron')
+const https = require('https')
+const os = require('os')
+const url = require('url')
+
+const config = require('../../config')
+
+var telemetry
+
+function init (state) {
+  telemetry = state.saved.telemetry
+  if (!telemetry) {
+    telemetry = state.saved.telemetry = createSummary()
+    reset()
+  }
+
+  var now = new Date()
+  telemetry.timestamp = now.toISOString()
+  telemetry.localTime = now.toTimeString()
+  telemetry.screens = getScreenInfo()
+  telemetry.system = getSystemInfo()
+  telemetry.approxNumTorrents = getApproxNumTorrents(state)
+
+  postToServer(telemetry)
+}
+
+function reset () {
+  telemetry.uncaughtErrors = []
+  telemetry.playAttempts = {
+    total: 0,
+    success: 0,
+    timeout: 0,
+    error: 0,
+    abandoned: 0
+  }
+}
+
+function postToServer () {
+  // Serialize the telemetry summary
+  var payload = new Buffer(JSON.stringify(telemetry), 'utf8')
+
+  // POST to our server
+  var options = url.parse(config.TELEMETRY_URL)
+  options.method = 'POST'
+  options.headers = {
+    'Content-Type': 'application/json',
+    'Content-Length': payload.length
+  }
+
+  var req = https.request(options, function (res) {
+    if (res.statusCode === 200) {
+      console.log('Successfully posted telemetry summary')
+      reset()
+    } else {
+      console.error('Couldn\'t post telemetry summary, got HTTP ' + res.statusCode)
+    }
+  })
+  req.on('error', function (e) {
+    console.error('Couldn\'t post telemetry summary', e)
+  })
+  req.write(payload)
+  req.end()
+}
+
+// Creates a new telemetry summary. Gives the user a unique ID,
+// collects screen resolution, etc
+function createSummary () {
+  // Make a 256-bit random unique ID
+  var userID = crypto.randomBytes(32).toString('hex')
+  return { userID }
+}
+
+// Track screen resolution
+function getScreenInfo () {
+  return electron.screen.getAllDisplays().map((screen) => ({
+    width: screen.size.width,
+    height: screen.size.height,
+    scaleFactor: screen.scaleFactor
+  }))
+}
+
+// Track basic system info like OS version and amount of RAM
+function getSystemInfo () {
+  return {
+    osPlatform: process.platform,
+    osRelease: os.type() + ' ' + os.release(),
+    architecture: os.arch(),
+    totalMemoryMB: os.totalmem() / (1 << 20),
+    numCores: os.cpus().length
+  }
+}
+
+// Get the number of torrents, rounded to the nearest power of two
+function getApproxNumTorrents (state) {
+  var exactNum = state.saved.torrents.length
+  if (exactNum === 0) return 0
+  // Otherwise, return 1, 2, 4, 8, etc by rounding in log space
+  var log2 = Math.log(exactNum) / Math.log(2)
+  return 1 << Math.round(log2)
+}
+
+// An uncaught error happened in the main process or in one of the windows
+function logUncaughtError (procName, err) {
+  var message, stack
+  if (typeof err === 'string') {
+    message = err
+    stack = ''
+  } else {
+    message = err.message
+    stack = err.stack
+  }
+
+  // We need to POST the telemetry object, make sure it stays < 100kb
+  if (telemetry.uncaughtErrors.length > 20) return
+  if (message.length > 1000) message = message.substring(0, 1000)
+  if (stack.length > 1000) stack = stack.substring(0, 1000)
+
+  telemetry.uncaughtErrors.push({process: procName, message, stack})
+}
+
+// The user pressed play. It either worked, timed out, or showed the
+// "Play in VLC" codec error
+function logPlayAttempt (result) {
+  if (!['success', 'timeout', 'error', 'abandoned'].includes(result)) {
+    return console.error('Unknown play attempt result', result)
+  }
+
+  var attempts = telemetry.playAttempts
+  attempts.total = (attempts.total || 0) + 1
+  attempts[result] = (attempts[result] || 0) + 1
+}

renderer/lib/torrent-player.js

@@ -16,12 +16,28 @@ function isPlayable (file) {
 
 function isVideo (file) {
   var ext = path.extname(file.name).toLowerCase()
-  return ['.mp4', '.m4v', '.webm', '.mov', '.mkv'].indexOf(ext) !== -1
+  return [
+    '.avi',
+    '.m4v',
+    '.mkv',
+    '.mov',
+    '.mp4',
+    '.mpg',
+    '.ogv',
+    '.webm',
+    '.wmv'
+  ].includes(ext)
 }
 
 function isAudio (file) {
   var ext = path.extname(file.name).toLowerCase()
-  return ['.mp3', '.aac', '.ogg', '.wav'].indexOf(ext) !== -1
+  return [
+    '.aac',
+    '.ac3',
+    '.mp3',
+    '.ogg',
+    '.wav'
+  ].includes(ext)
 }
 
 function isPlayableTorrent (torrentSummary) {

renderer/lib/torrent-poster.js

@@ -4,13 +4,19 @@ var captureVideoFrame = require('./capture-video-frame')
 var path = require('path')
 
 function torrentPoster (torrent, cb) {
-  // First, try to use the largest video file
+  // First, try to use a poster image if available
+  var posterFile = torrent.files.filter(function (file) {
+    return /^poster\.(jpg|png|gif)$/.test(file.name)
+  })[0]
+  if (posterFile) return torrentPosterFromImage(posterFile, torrent, cb)
+
+  // Second, try to use the largest video file
   // Filter out file formats that the <video> tag definitely can't play
   var videoFile = getLargestFileByExtension(torrent, ['.mp4', '.m4v', '.webm', '.mov', '.mkv'])
   if (videoFile) return torrentPosterFromVideo(videoFile, torrent, cb)
 
-  // Second, try to use the largest image file
+  // Third, try to use the largest image file
-  var imgFile = getLargestFileByExtension(torrent, ['.gif', '.jpg', '.png'])
+  var imgFile = getLargestFileByExtension(torrent, ['.gif', '.jpg', '.jpeg', '.png'])
   if (imgFile) return torrentPosterFromImage(imgFile, torrent, cb)
 
   // TODO: generate a waveform from the largest sound file

renderer/lib/torrent-summary.js

@@ -10,14 +10,14 @@ var config = require('../../config')
 // Returns an absolute path to the torrent file, or null if unavailable
 function getTorrentPath (torrentSummary) {
   if (!torrentSummary || !torrentSummary.torrentFileName) return null
-  return path.join(config.CONFIG_TORRENT_PATH, torrentSummary.torrentFileName)
+  return path.join(config.TORRENT_PATH, torrentSummary.torrentFileName)
 }
 
 // Expects a torrentSummary
 // Returns an absolute path to the poster image, or null if unavailable
 function getPosterPath (torrentSummary) {
   if (!torrentSummary || !torrentSummary.posterFileName) return null
-  var posterPath = path.join(config.CONFIG_POSTER_PATH, torrentSummary.posterFileName)
+  var posterPath = path.join(config.POSTER_PATH, torrentSummary.posterFileName)
   // Work around a Chrome bug (reproduced in vanilla Chrome, not just Electron):
   // Backslashes in URLS in CSS cause bizarre string encoding issues
   return posterPath.replace(/\\/g, '/')

renderer/main.css

@@ -50,19 +50,22 @@ table {
 }
 
 @keyframes fadein {
-  from { opacity: 0; }
+  from {
-  to   { opacity: 1; }
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
-
 .app {
   -webkit-user-select: none;
   -webkit-app-region: drag;
   height: 100%;
   display: flex;
   flex-flow: column;
-  animation: fadein 0.3s;
   background: rgb(40, 40, 40);
+  animation: fadein 0.5s;
 }
 
 .app:not(.is-focused) {
@@ -94,11 +97,20 @@ table {
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
+  opacity: 0.85;
 
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
 
+.icon.disabled {
+  opacity: 0.3;
+}
+
+.icon:not(.disabled):hover {
+  opacity: 1;
+}
+
 /*
  * UTILITY CLASSES
  */
@@ -109,18 +121,14 @@ table {
   white-space: nowrap;
 }
 
-.disabled {
+.float-left {
-  opacity: 0.3;
+  float: left;
 }
 
 .float-right {
   float: right;
 }
 
-.expand-collapse {
-  cursor: pointer;
-}
-
 .expand-collapse.expanded::before {
   content: '▲'
 }
@@ -148,8 +156,8 @@ table {
 .header {
   background: rgb(40, 40, 40);
   border-bottom: 1px solid rgb(20, 20, 20);
-  height: 37px; /* vertically center OS menu buttons (OS X) */
+  height: 38px; /* vertically center OS menu buttons (OS X) */
-  padding-top: 6px;
+  padding-top: 7px;
   overflow: hidden;
   flex: 0 1 auto;
   opacity: 1;
@@ -168,7 +176,13 @@ table {
 }
 
 .app.view-player .header {
-  opacity: 0.8;
+  background: rgba(40, 40, 40, 0.8);
+  border-bottom: none;
+}
+
+.app.view-player.is-win32 .header,
+.app.view-player.is-linux .header {
+  background: none;
 }
 
 .app.hide-video-controls.view-player .header {
@@ -176,12 +190,8 @@ table {
   cursor: none;
 }
 
-.app.hide-header .header {
-  display: none;
-}
-
 .header .title {
-  opacity: 0.6;
+  opacity: 0.7;
   position: absolute;
   margin-top: 1px;
   padding: 0 150px 0 150px;
@@ -192,35 +202,22 @@ table {
 
 .header .nav {
   font-weight: bold;
-  margin-right: 9px;
 }
 
 .header .nav.left {
-  float: left;
+  margin-left: 10px;
+}
+
+.header .nav.right {
+  margin-right: 10px;
 }
 
 .app.is-darwin:not(.is-fullscreen) .header .nav.left {
   margin-left: 78px;
 }
 
-.header .nav.right {
+.header .back,
-  float: right;
+.header .forward {
-}
-
-.header .nav * {
-  opacity: 0.6;
-}
-
-.header .nav .disabled {
-  opacity: 0.1;
-}
-
-.header .nav *:not(.disabled):hover {
-  opacity: 1;
-}
-
-.header .nav .back,
-.header .nav .forward {
   font-size: 30px;
   margin-top: -3px;
 }
@@ -263,7 +260,7 @@ table {
 
 .modal .modal-content {
   position: fixed;
-  top: 45px;
+  top: 38px;
   left: 0;
   right: 0;
   margin: 0 auto;
@@ -276,7 +273,6 @@ table {
 }
 
 .modal label {
-  font-size: 16px;
   font-weight: bold;
 }
 
@@ -284,36 +280,36 @@ table {
   width: 100%;
 }
 
-.create-torrent-page {
+.create-torrent {
   padding: 10px 25px;
   overflow: hidden;
 }
 
-.create-torrent-page .torrent-attribute {
+.create-torrent .torrent-attribute {
   white-space: nowrap;
 }
 
-.create-torrent-page .torrent-attribute>* {
+.create-torrent .torrent-attribute>* {
   display: inline-block;
 }
 
-.create-torrent-page .torrent-attribute label {
+.create-torrent .torrent-attribute label {
   width: 60px;
   margin-right: 10px;
   vertical-align: top;
 }
 
-.create-torrent-page .torrent-attribute>div {
+.create-torrent .torrent-attribute>div {
   width: calc(100% - 90px);
 }
 
-.create-torrent-page .torrent-attribute div {
+.create-torrent .torrent-attribute div {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.create-torrent-page .torrent-attribute textarea {
+.create-torrent .torrent-attribute textarea {
   width: calc(100% - 80px);
   height: 80px;
   color: #eee;
@@ -325,11 +321,11 @@ table {
   padding: 4px 6px;
 }
 
-.create-torrent-page textarea.torrent-trackers {
+.create-torrent textarea.torrent-trackers {
   height: 200px;
 }
 
-.create-torrent-page input.torrent-is-private {
+.create-torrent input.torrent-is-private {
   width: initial;
   margin: 0;
 }
@@ -367,7 +363,6 @@ button { /* Rectangular text buttons */
   border-radius: 3px;
   font-size: 14px;
   font-weight: bold;
-  cursor: pointer;
   color: #aaa;
   outline: none;
 }
@@ -434,7 +429,7 @@ input {
 
 .torrent,
 .torrent-placeholder {
-  height: 120px;
+  height: 100px;
 }
 
 .torrent:not(:last-child) {
@@ -447,9 +442,9 @@ input {
 
 .torrent .metadata {
   position: absolute;
-  top: 20px;
+  top: 25px;
-  left: 20px;
+  left: 15px;
-  right: 20px;
+  right: 15px;
   width: calc(100% - 40px);
   text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
 }
@@ -459,12 +454,15 @@ input {
 }
 
 .torrent .metadata span:not(:last-child)::after {
-  content: ' — ';
+  content: ' • ';
+  opacity: 0.7;
+  padding-left: 4px;
+  padding-right: 4px;
 }
 
 .torrent .buttons {
   position: absolute;
-  top: 25px;
+  top: 29px;
   right: 10px;
   align-items: center;
   display: none;
@@ -538,6 +536,11 @@ input {
   }
 }
 
+.torrent .buttons .play.resume-position {
+  position: relative;
+  -webkit-clip-path: circle(18px at center);
+}
+
 .torrent .buttons .delete {
   opacity: 0.5;
 }
@@ -546,15 +549,13 @@ input {
   opacity: 0.7;
 }
 
-.torrent .name {
+.torrent .buttons .radial-progress {
-  font-size: 1.5em;
+  position: absolute;
-  font-weight: bold;
-  line-height: 1.5em;
 }
 
-.torrent .status,
+.torrent .name {
-.torrent .status2 {
+  font-size: 18px;
-  font-size: 1em;
+  font-weight: bold;
   line-height: 1.5em;
 }
 
@@ -601,11 +602,11 @@ body.drag .app::after {
 }
 
 .torrent-details {
-  padding: 8em 20px 20px 20px;
+  padding: 8em 0 20px 0;
 }
 
-.torrent-details .open-folder {
+.torrent-details .warning {
-  float: right;
+  padding-left: 15px;
 }
 
 .torrent-details table {
@@ -619,27 +620,37 @@ body.drag .app::after {
   height: 28px;
 }
 
-.torrent-details tr:hover,
+.torrent-details td {
-.torrent-details .open-folder:hover {
+  vertical-align: center;
+}
+
+.torrent-details tr:hover {
   background-color: rgba(200, 200, 200, 0.3);
 }
 
 .torrent-details td {
   overflow: hidden;
   padding: 0;
-  vertical-align: bottom;
+  vertical-align: middle;
 }
 
-.torrent-details td.col-icon {
+.torrent-details td .icon {
-  width: 2em;
-}
-
-.torrent-details td.col-icon .icon {
   font-size: 18px;
   position: relative;
   top: 3px;
 }
 
+.torrent-details td.col-icon {
+  width: 3em;
+  padding-left: 16px;
+}
+
+.torrent-details td.col-icon .radial-progress {
+  position: absolute;
+  margin-top: 4px;
+  margin-left: 0.5px;
+}
+
 .torrent-details td.col-name {
   width: auto;
   text-overflow: ellipsis;
@@ -655,6 +666,12 @@ body.drag .app::after {
   text-align: right;
 }
 
+.torrent-details td.col-select {
+  width: 3em;
+  padding-right: 13px;
+  text-align: right;
+}
+
 /*
  * PLAYER
  */
@@ -683,7 +700,7 @@ body.drag .app::after {
  * PLAYER CONTROLS
  */
 
-.player-controls {
+.player .controls {
   position: fixed;
   background: rgba(40, 40, 40, 0.8);
   width: 100%;
@@ -692,7 +709,60 @@ body.drag .app::after {
   transition: opacity 0.15s ease-out;
 }
 
-.app.hide-video-controls .player-controls {
+.player .controls .icon {
+  display: block;
+  margin: 8px;
+  font-size: 22px;
+  opacity: 0.85;
+
+  /* Make all icons have uniform spacing */
+  max-width: 23px;
+  overflow: hidden;
+}
+
+.player .controls .icon:hover {
+  opacity: 1;
+}
+
+.player .controls .play-pause {
+  font-size: 28px;
+  margin-top: 5px;
+  margin-right: 10px;
+  margin-left: 15px;
+}
+
+.player .controls .volume-slider {
+  -webkit-appearance: none;
+  -webkit-app-region: no-drag;
+  width: 60px;
+  height: 3px;
+  margin: 18px 8px 8px 0;
+  border: none;
+  padding: 0;
+  opacity: 0.85;
+  vertical-align: sub;
+}
+
+.player .controls .time,
+.player .controls .rate {
+  font-weight: 100;
+  font-size: 13px;
+  margin: 9px 8px 8px 8px;
+  opacity: 0.8;
+}
+
+.player .controls .icon.closed-caption {
+  font-size: 26px;
+  margin-top: 6px;
+}
+
+.player .controls .icon.fullscreen {
+  font-size: 26px;
+  margin-right: 15px;
+  margin-top: 6px;
+}
+
+.app.hide-video-controls .player .controls {
   opacity: 0;
 }
 
@@ -700,13 +770,16 @@ body.drag .app::after {
   cursor: none;
 }
 
-.app.hide-video-controls .player .player-controls:hover {
+/* TODO: find better way to handle this (that also
+ * keeps the header visible too).
+ */
+.app.hide-video-controls .player .controls:hover {
   opacity: 1;
   cursor: default;
 }
 
 /* invisible click target for scrubbing */
-.player-controls .scrub-bar {
+.player .controls .scrub-bar {
   position: absolute;
   width: 100%;
   height: 23px; /* 3px .loading-bar plus 10px above and below */
@@ -715,7 +788,7 @@ body.drag .app::after {
   -webkit-app-region: no-drag;
 }
 
-.player-controls .loading-bar {
+.player .controls .loading-bar {
   position: relative;
   width: 100%;
   top: -3px;
@@ -725,14 +798,14 @@ body.drag .app::after {
   position: absolute;
 }
 
-.player-controls .loading-bar-part {
+.player .controls .loading-bar-part {
   position: absolute;
   background-color: #dd0000;
   top: 0;
   height: 100%;
 }
 
-.player-controls .playback-cursor {
+.player .controls .playback-cursor {
   position: absolute;
   top: -3px;
   background-color: #FFF;
@@ -741,86 +814,26 @@ body.drag .app::after {
   border-radius: 50%;
   margin-top: 0;
   margin-left: 0;
-  transition-property: width, height, border-radius, margin-top, margin-left;
+  transition-property: width, height, top, margin-left;
   transition-duration: 0.1s;
   transition-timing-function: ease-out;
 }
 
-.player-controls .play-pause {
+.player .controls .closed-caption.active,
-  display: block;
+.player .controls .device.active {
-  width: 30px;
-  height: 30px;
-  padding: 5px;
-  margin: 0 auto;
-}
-
-.player-controls .device,
-.player-controls .fullscreen,
-.player-controls .closed-captions,
-.player-controls .volume-icon,
-.player-controls .back {
-  display: block;
-  width: 20px;
-  height: 20px;
-  margin: 5px;
-}
-
-.player-controls .volume,
-.player-controls .back {
-  float: left;
-}
-
-.player-controls .device,
-.player-controls .closed-captions,
-.player-controls .fullscreen {
-  float: right;
-}
-
-.player-controls .fullscreen {
-  margin-right: 15px;
-}
-
-.player-controls .volume-icon,
-.player-controls .device {
-  font-size: 18px; /* make the cast icons less huge */
-  margin-top: 8px !important;
-}
-
-.player-controls .closed-captions.active,
-.player-controls .device.active {
   color: #9af;
 }
 
-.player-controls .volume {
+.player .controls .volume-slider::-webkit-slider-thumb {
-  display: block;
-  width: 90px;
-}
-
-.player-controls .volume-icon {
-  float: left;
-  margin-right: 0px;
-}
-
-.player-controls .volume-slider {
-  -webkit-appearance: none;
-  width: 50px;
-  height: 3px;
-  border: none;
-  padding: 0;
-  vertical-align: sub;
-}
-
-.player-controls .volume-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
+  -webkit-app-region: no-drag;
   background-color: #fff;
-  opacity: 1.0;
+  width: 13px;
-  width: 10px;
+  height: 13px;
-  height: 10px;
-  border: 1px solid #303233;
   border-radius: 50%;
 }
 
-.player-controls .volume-slider:focus {
+.player .controls .volume-slider:focus {
   outline: none;
 }
 
@@ -830,19 +843,49 @@ body.drag .app::after {
 
 .player .playback-bar:hover .playback-cursor {
   top: -8px;
+  margin-left: -5px;
   width: 14px;
   height: 14px;
 }
 
+.player .controls .options-list {
+  position: fixed;
+  background: rgba(40, 40, 40, 0.8);
+  min-width: 100px;
+  bottom: 45px;
+  right: 3px;
+  transition: opacity 0.15s ease-out;
+  padding: 5px 10px;
+  border-radius: 3px;
+  margin: 0;
+  list-style-type: none;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.player .controls .options-list .icon {
+  display: inline;
+  font-size: 17px;
+  vertical-align: bottom;
+  line-height: 21px;
+  margin: 4px;
+}
+
+/**
+ * Set the cue text position so it appears above the player controls.
+ */
+video::-webkit-media-text-track-container {
+  bottom: 60px;
+  transition: bottom 0.1s ease-out;
+}
+.app.hide-video-controls video::-webkit-media-text-track-container {
+  bottom: 30px;
+}
 ::cue {
   background: none;
   color: #FFF;
-  font: 24px;
-  line-height: 1.3em;
   text-shadow: #000 -1px 0 1px, #000 1px 0 1px, #000 0 -1px 1px, #000 0 1px 1px, rgba(50, 50, 50, 0.5) 2px 2px 0;
 }
 
-
 /*
  * CHROMECAST / AIRPLAY CONTROLS
  */
@@ -870,28 +913,172 @@ body.drag .app::after {
 }
 
 /*
- * Subtitles list
+ * Preferences page, based on Atom settings style
  */
 
-.subtitles-list {
+.preferences {
-  position: fixed;
+  font-size: 12px;
-  background: rgba(40, 40, 40, 0.8);
+  line-height: calc(10/7);
-  min-width: 100px;
-  bottom: 45px;
-  right: 3px;
-  transition: opacity 0.15s ease-out;
-  padding: 5px 10px;
-  border-radius: 3px;
-  margin: 0;
-  list-style-type: none;
-  color: rgba(255, 255, 255, 0.8);
 }
 
-.subtitles-list i {
+.preferences .text {
-  font-size: 11px; /* make the cast icons less huge */
+  color: #a8a8a8;
-  margin-right: 4px !important;
 }
 
+.preferences .icon {
+  color: rgba(170, 170, 170, 0.6);
+  font-size: 16px;
+  margin-right: 0.2em;
+}
+
+.preferences .btn {
+  display: inline-block;
+  -webkit-appearance: button;
+  margin: 0;
+  font-weight: normal;
+  text-align: center;
+  vertical-align: middle;
+  border-color: #cccccc;
+  border-radius: 3px;
+  color: #9da5b4;
+  text-shadow: none;
+  border: 1px solid #181a1f;
+  background-color: #3d3d3d;
+  white-space: initial;
+  font-size: 0.889em;
+  line-height: 1;
+  padding: 0.5em 0.75em;
+}
+
+.preferences .btn .icon {
+  margin: 0;
+  color: #a8a8a8;
+}
+
+.preferences .help .icon {
+  vertical-align: sub;
+}
+
+
+.preferences .preferences-panel .control-group + .control-group {
+  margin-top: 1.5em;
+}
+
+.preferences .section {
+  padding: 20px;
+  border-top: 1px solid #181a1f;
+}
+
+.preferences .section:first {
+  border-top: 0px;
+}
+
+.preferences .section:first-child,
+.preferences .section:last-child {
+  padding: 20px;
+}
+
+.preferences .section.section:empty {
+  padding: 0;
+  border-top: none;
+}
+
+.preferences .section-container {
+  width: 100%;
+  max-width: 800px;
+}
+
+.preferences section .section-heading,
+.preferences .section .section-heading {
+  margin-bottom: 10px;
+  color: #dcdcdc;
+  font-size: 1.75em;
+  font-weight: bold;
+  line-height: 1;
+  -webkit-user-select: none;
+  cursor: default;
+}
+
+.preferences .sub-section-heading.icon:before,
+.preferences .section-heading.icon:before {
+  margin-right: 8px;
+}
+
+.preferences .section-heading-count {
+  margin-left: .5em;
+}
+
+.preferences .section-body {
+  margin-top: 20px;
+}
+
+.preferences .sub-section {
+  margin: 20px 0;
+}
+
+.preferences .sub-section .sub-section-heading {
+  color: #dcdcdc;
+  font-size: 1.4em;
+  font-weight: bold;
+  line-height: 1;
+  -webkit-user-select: none;
+}
+
+.preferences .preferences-panel label {
+  color: #a8a8a8;
+}
+
+.preferences .preferences-panel .control-group + .control-group {
+  margin-top: 1.5em;
+}
+
+.preferences .preferences-panel .control-group .editor-container {
+  margin: 0;
+}
+
+.preferences .preference-title {
+  font-size: 1.2em;
+  -webkit-user-select: none;
+  display: inline-block;
+}
+
+.preferences .preference-description {
+    color: rgba(170, 170, 170, 0.6);
+    -webkit-user-select: none;
+    cursor: default;
+}
+
+.preferences input {
+  font-size: 1.1em;
+  line-height: 1.15em;
+  max-height: none;
+  width: 100%;
+  padding-left: 0.5em;
+  border-radius: 3px;
+  color: #a8a8a8;
+  border: 1px solid #181a1f;
+  background-color: #1b1d23;
+}
+
+.preferences input::-webkit-input-placeholder {
+  color: rgba(170, 170, 170, 0.6);
+}
+
+.preferences .control-group input {
+  margin-top: 0.2em;
+}
+
+.preferences .control-group input.file-picker-text {
+  width: calc(100% - 40px);
+}
+
+.preferences .control-group .checkbox .icon {
+  font-size: 1.5em;
+  margin: 0;
+  vertical-align: text-bottom;
+}
+
+
 /*
  * MEDIA OVERLAY / AUDIO DETAILS
  */
@@ -960,10 +1147,6 @@ body.drag .app::after {
   z-index: 1;
 }
 
-.app.hide-header .error-popover {
-  top: 0px;
-}
-
 .error-popover.hidden {
   display: none;
 }
@@ -987,3 +1170,70 @@ body.drag .app::after {
 .error-popover .error:last-child {
   border-bottom: none;
 }
+
+.error-text {
+  color: #c44;
+}
+
+/*
+ * RADIAL PROGRESS BAR
+ */
+
+.radial-progress {
+  width:  16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #888;
+}
+
+.radial-progress .circle .mask,
+.radial-progress .circle .fill {
+  width:    16px;
+  height:   16px;
+  position: absolute;
+  border-radius: 50%;
+  -webkit-backface-visibility: hidden;
+}
+
+.radial-progress .circle .mask {
+  clip: rect(0px, 16px, 16px, 8px);
+}
+
+.radial-progress .circle .fill {
+  clip: rect(0px, 8px, 16px, 0px);
+  background-color: white;
+}
+
+.radial-progress .inset {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  margin: 2px 0 0 2px;
+  border-radius: 50%;
+  background-color: black;
+}
+
+.radial-progress-large {
+  width:  40px;
+  height: 40px;
+}
+
+.radial-progress-large .circle .mask,
+.radial-progress-large .circle .fill {
+  width:  40px;
+  height: 40px;
+}
+.radial-progress-large .circle .mask {
+  clip: rect(0px, 40px, 40px, 20px);
+}
+
+.radial-progress-large .circle .fill {
+  clip: rect(0px, 20px, 40px, 0px);
+  background-color: white;
+}
+
+.radial-progress-large .inset {
+  width: 32px;
+  height: 32px;
+  margin: 4px 0 0 4px;
+}

renderer/main.html

@@ -3,9 +3,9 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="index.css" charset="utf-8">
+    <link rel="stylesheet" href="main.css" charset="utf-8">
   </head>
   <body>
-    <script async src="index.js"></script>
+    <script async src="main.js"></script>
   </body>
 </html>

renderer/state.js

@@ -1,264 +0,0 @@
-var electron = require('electron')
-var path = require('path')
-
-var remote = electron.remote
-
-var config = require('../config')
-var LocationHistory = require('./lib/location-history')
-
-module.exports = {
-  getInitialState,
-  getDefaultPlayState,
-  getDefaultSavedState
-}
-
-function getInitialState () {
-  return {
-    /*
-     * Temporary state disappears once the program exits.
-     * It can contain complex objects like open connections, etc.
-     */
-    client: null, /* the WebTorrent client */
-    server: null, /* local WebTorrent-to-HTTP server */
-    prev: {}, /* used for state diffing in updateElectron() */
-    location: new LocationHistory(),
-    window: {
-      bounds: null, /* {x, y, width, height } */
-      isFocused: true,
-      isFullScreen: false,
-      title: config.APP_WINDOW_TITLE
-    },
-    selectedInfoHash: null, /* the torrent we've selected to view details. see state.torrents */
-    playing: getDefaultPlayState(), /* the media (audio or video) that we're currently playing */
-    devices: { /* playback devices like Chromecast and AppleTV */
-      airplay: null, /* airplay client. finds and manages AppleTVs */
-      chromecast: null /* chromecast client. finds and manages Chromecasts */
-    },
-    dock: {
-      badge: 0,
-      progress: 0
-    },
-    modal: null, /* modal popover */
-    errors: [], /* user-facing errors */
-    nextTorrentKey: 1, /* identify torrents for IPC between the main and webtorrent windows */
-
-    /*
-     * Saved state is read from and written to a file every time the app runs.
-     * It should be simple and minimal and must be JSON.
-     * It must never contain absolute paths since we have a portable app.
-     *
-     * Config path:
-     *
-     * OS X                 ~/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
-     * Windows (XP, 2000)   %USERPROFILE%/Local Settings/Application Data/WebTorrent/config.json
-     *
-     * Also accessible via `require('application-config')('WebTorrent').filePath`
-     */
-    saved: {}
-  }
-}
-
-/* Whenever we stop playing video or audio, here's what we reset state.playing to */
-function getDefaultPlayState () {
-  return {
-    infoHash: null, /* the info hash of the torrent we're playing */
-    fileIndex: null, /* the zero-based index within the torrent */
-    location: 'local', /* 'local', 'chromecast', 'airplay' */
-    type: null, /* 'audio' or 'video', could be 'other' if ever support eg streaming to VLC */
-    currentTime: 0, /* seconds */
-    duration: 1, /* seconds */
-    isPaused: true,
-    isStalled: false,
-    lastTimeUpdate: 0, /* Unix time in ms */
-    mouseStationarySince: 0, /* Unix time in ms */
-    subtitles: {
-      tracks: [], /* subtitles file (Buffer) */
-      enabled: false
-    }
-  }
-}
-
-/* If the saved state file doesn't exist yet, here's what we use instead */
-function getDefaultSavedState () {
-  return {
-    version: 1, /* make sure we can upgrade gracefully later */
-    torrents: [
-      {
-        status: 'paused',
-        infoHash: '88594aaacbde40ef3e2510c47374ec0aa396c08e',
-        magnetURI: 'magnet:?xt=urn:btih:88594aaacbde40ef3e2510c47374ec0aa396c08e&dn=bbb_sunflower_1080p_30fps_normal.mp4&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80%2Fannounce&tr=udp%3A%2F%2Ftracker.publicbt.com%3A80%2Fannounce&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=http%3A%2F%2Fdistribution.bbb3d.renderfarming.net%2Fvideo%2Fmp4%2Fbbb_sunflower_1080p_30fps_normal.mp4',
-        displayName: 'Big Buck Bunny',
-        posterURL: 'bigBuckBunny.jpg',
-        torrentPath: 'bigBuckBunny.torrent',
-        files: [
-          {
-            length: 276134947,
-            name: 'bbb_sunflower_1080p_30fps_normal.mp4'
-          }
-        ]
-      },
-      {
-        status: 'paused',
-        infoHash: '6a9759bffd5c0af65319979fb7832189f4f3c35d',
-        magnetURI: 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=udp%3A%2F%2Fexodus.desync.com%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.internetwarriors.net%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4',
-        displayName: 'Sintel',
-        posterURL: 'sintel.jpg',
-        torrentPath: 'sintel.torrent',
-        files: [
-          {
-            length: 129241752,
-            name: 'sintel.mp4'
-          }
-        ]
-      },
-      {
-        status: 'paused',
-        infoHash: '02767050e0be2fd4db9a2ad6c12416ac806ed6ed',
-        magnetURI: 'magnet:?xt=urn:btih:02767050e0be2fd4db9a2ad6c12416ac806ed6ed&dn=tears_of_steel_1080p.webm&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io',
-        displayName: 'Tears of Steel',
-        posterURL: 'tearsOfSteel.jpg',
-        torrentPath: 'tearsOfSteel.torrent',
-        files: [
-          {
-            length: 571346576,
-            name: 'tears_of_steel_1080p.webm'
-          }
-        ]
-      },
-      {
-        status: 'paused',
-        infoHash: '6a02592d2bbc069628cd5ed8a54f88ee06ac0ba5',
-        magnetURI: 'magnet:?xt=urn:btih:6a02592d2bbc069628cd5ed8a54f88ee06ac0ba5&dn=CosmosLaundromatFirstCycle&tr=http%3A%2F%2Fbt1.archive.org%3A6969%2Fannounce&tr=http%3A%2F%2Fbt2.archive.org%3A6969%2Fannounce&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=http%3A%2F%2Fia601508.us.archive.org%2F14%2Fitems%2F&ws=http%3A%2F%2Fia801508.us.archive.org%2F14%2Fitems%2F&ws=https%3A%2F%2Farchive.org%2Fdownload%2F',
-        displayName: 'Cosmos Laundromat (Preview)',
-        posterURL: 'cosmosLaundromat.jpg',
-        torrentPath: 'cosmosLaundromat.torrent',
-        files: [
-          {
-            length: 223580,
-            name: 'Cosmos Laundromat - First Cycle (1080p).gif'
-          },
-          {
-            length: 220087570,
-            name: 'Cosmos Laundromat - First Cycle (1080p).mp4'
-          },
-          {
-            length: 56832560,
-            name: 'Cosmos Laundromat - First Cycle (1080p).ogv'
-          },
-          {
-            length: 3949,
-            name: 'CosmosLaundromat-FirstCycle1080p.en.srt'
-          },
-          {
-            length: 3907,
-            name: 'CosmosLaundromat-FirstCycle1080p.es.srt'
-          },
-          {
-            length: 4119,
-            name: 'CosmosLaundromat-FirstCycle1080p.fr.srt'
-          },
-          {
-            length: 3941,
-            name: 'CosmosLaundromat-FirstCycle1080p.it.srt'
-          },
-          {
-            length: 11264,
-            name: 'CosmosLaundromatFirstCycle_meta.sqlite'
-          },
-          {
-            length: 1204,
-            name: 'CosmosLaundromatFirstCycle_meta.xml'
-          }
-        ]
-      },
-      {
-        status: 'paused',
-        infoHash: '3ba219a8634bf7bae3d848192b2da75ae995589d',
-        magnetURI: 'magnet:?xt=urn:btih:3ba219a8634bf7bae3d848192b2da75ae995589d&dn=The+WIRED+CD+-+Rip.+Sample.+Mash.+Share.&tr=udp%3A%2F%2Fexodus.desync.com%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.internetwarriors.net%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F',
-        displayName: 'The WIRED CD - Rip. Sample. Mash. Share.',
-        posterURL: 'wired-cd.jpg',
-        torrentPath: 'wired-cd.torrent',
-        files: [
-          {
-            length: 1964275,
-            name: '01 - Beastie Boys - Now Get Busy.mp3'
-          },
-          {
-            length: 3610523,
-            name: '02 - David Byrne - My Fair Lady.mp3'
-          },
-          {
-            length: 2759377,
-            name: '03 - Zap Mama - Wadidyusay.mp3'
-          },
-          {
-            length: 5816537,
-            name: '04 - My Morning Jacket - One Big Holiday.mp3'
-          },
-          {
-            length: 2106421,
-            name: '05 - Spoon - Revenge!.mp3'
-          },
-          {
-            length: 3347550,
-            name: '06 - Gilberto Gil - Oslodum.mp3'
-          },
-          {
-            length: 2107577,
-            name: '07 - Dan The Automator - Relaxation Spa Treatment.mp3'
-          },
-          {
-            length: 3108130,
-            name: '08 - Thievery Corporation - Dc 3000.mp3'
-          },
-          {
-            length: 3051528,
-            name: '09 - Le Tigre - Fake French.mp3'
-          },
-          {
-            length: 3270259,
-            name: '10 - Paul Westerberg - Looking Up In Heaven.mp3'
-          },
-          {
-            length: 3263528,
-            name: '11 - Chuck D - No Meaning No (feat. Fine Arts Militia).mp3'
-          },
-          {
-            length: 6380952,
-            name: '12 - The Rapture - Sister Saviour (Blackstrobe Remix).mp3'
-          },
-          {
-            length: 6550396,
-            name: '13 - Cornelius - Wataridori 2.mp3'
-          },
-          {
-            length: 3034692,
-            name: '14 - DJ Danger Mouse - What U Sittin\' On (feat. Jemini, Cee Lo And Tha Alkaholiks).mp3'
-          },
-          {
-            length: 3854611,
-            name: '15 - DJ Dolores - Oslodum 2004.mp3'
-          },
-          {
-            length: 1762120,
-            name: '16 - Matmos - Action At A Distance.mp3'
-          },
-          {
-            length: 4071,
-            name: 'README.md'
-          },
-          {
-            length: 78163,
-            name: 'poster.jpg'
-          }
-        ]
-      }
-    ],
-    downloadPath: config.IS_PORTABLE
-      ? path.join(config.CONFIG_PATH, 'Downloads')
-      : remote.app.getPath('downloads')
-  }
-}

renderer/views/app.js

@@ -1,18 +1,19 @@
 module.exports = App
 
-var h = require('virtual-dom/h')
+var hx = require('../lib/hx')
-var hyperx = require('hyperx')
-var hx = hyperx(h)
-
 var Header = require('./header')
+
 var Views = {
-  'home': require('./torrent-list'),
+  'home': require('./home'),
   'player': require('./player'),
-  'create-torrent': require('./create-torrent-page')
+  'create-torrent': require('./create-torrent'),
+  'preferences': require('./preferences')
 }
+
 var Modals = {
   'open-torrent-address-modal': require('./open-torrent-address-modal'),
-  'update-available-modal': require('./update-available-modal')
+  'update-available-modal': require('./update-available-modal'),
+  'unsupported-media-modal': require('./unsupported-media-modal')
 }
 
 function App (state) {
@@ -21,24 +22,20 @@ function App (state) {
   // * 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.current().url === 'player' &&
+  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.location === 'local' &&
-
+    state.playing.playbackRate === 1
-  // Hide the header on Windows/Linux when in the player
-  // On OSX, the header appears as part of the title bar
-  var hideHeader = process.platform !== 'darwin' && state.location.current().url === 'player'
 
   var cls = [
-    'view-' + state.location.current().url, /* e.g. view-home, view-player */
+    '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')
-  if (hideHeader) cls.push('hide-header')
 
   return hx`
     <div class='app ${cls.join(' ')}'>
@@ -53,12 +50,13 @@ function App (state) {
 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 ${recentErrors.length > 0 ? 'visible' : 'hidden'}'>
+    <div class='error-popover ${hasErrors ? 'visible' : 'hidden'}'>
       <div class='title'>Error</div>
       ${errorElems}
     </div>
@@ -79,6 +77,6 @@ function getModal (state) {
 }
 
 function getView (state) {
-  var url = state.location.current().url
+  var url = state.location.url()
   return Views[url](state)
 }

renderer/views/create-torrent.js

@@ -1,14 +1,11 @@
 module.exports = CreateTorrentPage
 
-var h = require('virtual-dom/h')
-var hyperx = require('hyperx')
-var hx = hyperx(h)
-
 var createTorrent = require('create-torrent')
 var path = require('path')
 var prettyBytes = require('prettier-bytes')
 
-var {dispatch} = require('../lib/dispatcher')
+var {dispatch, dispatcher} = require('../lib/dispatcher')
+var hx = require('../lib/hx')
 
 function CreateTorrentPage (state) {
   var info = state.location.current()
@@ -17,23 +14,19 @@ function CreateTorrentPage (state) {
   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) {
-    if (files.length > 0) {
+    pathPrefix = files.map((x) => x.path).reduce(findCommonPrefix)
-      pathPrefix = files.map((x) => x.path).reduce(findCommonPrefix)
+    if (!pathPrefix.endsWith('/') && !pathPrefix.endsWith('\\')) {
-      if (!pathPrefix.endsWith('/') && !pathPrefix.endsWith('\\')) {
+      pathPrefix = path.dirname(pathPrefix)
-        pathPrefix = path.dirname(pathPrefix)
-      }
-    } else {
-      pathPrefix = files[0]
     }
   }
 
   // Sanity check: show the number of files and total size
   var numFiles = files.length
-  console.log('FILES', files)
   var totalBytes = files
     .map((f) => f.size)
     .reduce((a, b) => a + b, 0)
@@ -41,8 +34,16 @@ function CreateTorrentPage (state) {
 
   // Then, use the name of the base folder (or sole file, for a single file torrent)
   // as the default name. Show all files relative to the base folder.
-  var defaultName = path.basename(pathPrefix)
+  var defaultName, basePath
-  var basePath = path.dirname(pathPrefix)
+  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)
@@ -55,7 +56,7 @@ function CreateTorrentPage (state) {
   var collapsedClass = info.showAdvanced ? 'expanded' : 'collapsed'
 
   return hx`
-    <div class='create-torrent-page'>
+    <div class='create-torrent'>
       <h2>Create torrent ${defaultName}</h2>
       <p class="torrent-info">
         ${torrentInfo}
@@ -112,11 +113,10 @@ function CreateTorrentPage (state) {
       comment: comment
     }
     dispatch('createTorrent', options)
-    dispatch('backToList')
   }
 
   function handleCancel () {
-    dispatch('backToList')
+    dispatch('back')
   }
 
   function handleToggleShowAdvanced () {
@@ -127,6 +127,27 @@ function CreateTorrentPage (state) {
   }
 }
 
+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++) {

renderer/views/header.js

@@ -1,16 +1,13 @@
 module.exports = Header
 
-var h = require('virtual-dom/h')
-var hyperx = require('hyperx')
-var hx = hyperx(h)
-
 var {dispatcher} = require('../lib/dispatcher')
+var hx = require('../lib/hx')
 
 function Header (state) {
   return hx`
     <div class='header'>
       ${getTitle()}
-      <div class='nav left'>
+      <div class='nav left float-left'>
         <i.icon.back
           class=${state.location.hasBack() ? '' : 'disabled'}
           title='Back'
@@ -24,7 +21,7 @@ function Header (state) {
           chevron_right
         </i>
       </div>
-      <div class='nav right'>
+      <div class='nav right float-right'>
         ${getAddButton()}
       </div>
     </div>
@@ -37,12 +34,12 @@ function Header (state) {
   }
 
   function getAddButton () {
-    if (state.location.current().url !== 'player') {
+    if (state.location.url() === 'home') {
       return hx`
         <i
           class='icon add'
           title='Add torrent'
-          onclick=${dispatcher('showOpenTorrentFile')}>
+          onclick=${dispatcher('openFiles')}>
           add
         </i>
       `

renderer/views/home.js

@@ -1,17 +1,17 @@
 module.exports = TorrentList
 
-var h = require('virtual-dom/h')
-var hyperx = require('hyperx')
-var hx = hyperx(h)
 var prettyBytes = require('prettier-bytes')
 
+var hx = require('../lib/hx')
 var TorrentSummary = require('../lib/torrent-summary')
 var TorrentPlayer = require('../lib/torrent-player')
 var {dispatcher} = require('../lib/dispatcher')
 
 function TorrentList (state) {
   var torrentRows = state.saved.torrents.map(
-    (torrentSummary) => renderTorrent(torrentSummary))
+    (torrentSummary) => renderTorrent(torrentSummary)
+  )
+
   return hx`
     <div class='torrent-list'>
       ${torrentRows}
@@ -20,11 +20,7 @@ function TorrentList (state) {
       </div>
     </div>`
 
-  // Renders a torrent in the torrent list
-  // Includes name, download status, play button, background image
-  // May be expanded for additional info, including the list of files inside
   function renderTorrent (torrentSummary) {
-    // Get ephemeral data (like progress %) directly from the WebTorrent handle
     var infoHash = torrentSummary.infoHash
     var isSelected = infoHash && state.selectedInfoHash === infoHash
 
@@ -67,39 +63,49 @@ function TorrentList (state) {
     // If it's downloading/seeding then show progress info
     var prog = torrentSummary.progress
     if (torrentSummary.status !== 'paused' && prog) {
-      var progress = Math.floor(100 * prog.progress)
-      var downloaded = prettyBytes(prog.downloaded)
-      var total = prettyBytes(prog.length || 0)
-      if (downloaded !== total) downloaded += ` / ${total}`
-
       elements.push(hx`
-        <div class='status ellipsis'>
+        <div class='ellipsis'>
-          ${getFilesLength()}
+          ${renderPercentProgress()}
-          <span>${getPeers()}</span>
+          ${renderTotalProgress()}
-          <span>↓ ${prettyBytes(prog.downloadSpeed || 0)}/s</span>
+          ${renderPeers()}
-          <span>↑ ${prettyBytes(prog.uploadSpeed || 0)}/s</span>
+          ${renderDownloadSpeed()}
-        </div>
+          ${renderUploadSpeed()}
-      `)
-      elements.push(hx`
-        <div class='status2 ellipsis'>
-          <span class='progress'>${progress}%</span>
-          <span>${downloaded}</span>
         </div>
       `)
     }
 
     return hx`<div class='metadata'>${elements}</div>`
 
-    function getPeers () {
+    function renderPercentProgress () {
-      var count = prog.numPeers === 1 ? 'peer' : 'peers'
+      var progress = Math.floor(100 * prog.progress)
-      return `${prog.numPeers} ${count}`
+      return hx`<span>${progress}%</span>`
     }
 
-    function getFilesLength () {
+    function renderTotalProgress () {
-      if (torrentSummary.files && torrentSummary.files.length > 1) {
+      var downloaded = prettyBytes(prog.downloaded)
-        return hx`<span class='files'>${torrentSummary.files.length} files</span>`
+      var total = prettyBytes(prog.length || 0)
+      if (downloaded === total) {
+        return hx`<span>${downloaded}</span>`
+      } else {
+        return hx`<span>${downloaded} / ${total}</span>`
       }
     }
+
+    function renderPeers () {
+      if (prog.numPeers === 0) return
+      var count = prog.numPeers === 1 ? 'peer' : 'peers'
+      return hx`<span>${prog.numPeers} ${count}</span>`
+    }
+
+    function renderDownloadSpeed () {
+      if (prog.downloadSpeed === 0) return
+      return hx`<span>↓ ${prettyBytes(prog.downloadSpeed)}/s</span>`
+    }
+
+    function renderUploadSpeed () {
+      if (prog.uploadSpeed === 0) return
+      return hx`<span>↑ ${prettyBytes(prog.uploadSpeed)}/s</span>`
+    }
   }
 
   // Download button toggles between torrenting (DL/seed) and paused
@@ -108,12 +114,7 @@ function TorrentList (state) {
     var infoHash = torrentSummary.infoHash
 
     var playIcon, playTooltip, playClass
-    if (torrentSummary.playStatus === 'unplayable') {
+    if (torrentSummary.playStatus === 'timeout') {
-      playIcon = 'play_arrow'
-      playClass = 'disabled'
-      playTooltip = 'Sorry, WebTorrent can\'t play any of the files in this torrent. ' +
-        'View details and click on individual files to open them in another program.'
-    } else if (torrentSummary.playStatus === 'timeout') {
       playIcon = 'warning'
       playTooltip = 'Playback timed out. No seeds? No internet? Click to try again.'
     } else {
@@ -133,6 +134,18 @@ function TorrentList (state) {
       downloadTooltip = 'Click to start torrenting.'
     }
 
+    // Do we have a saved position? Show it using a radial progress bar on top
+    // of the play button, unless already showing a spinner there:
+    var positionElem
+    var willShowSpinner = torrentSummary.playStatus === 'requested'
+    var defaultFile = torrentSummary.files &&
+      torrentSummary.files[torrentSummary.defaultPlayFileIndex]
+    if (defaultFile && defaultFile.currentTime && !willShowSpinner) {
+      var fraction = defaultFile.currentTime / defaultFile.duration
+      positionElem = renderRadialProgressBar(fraction, 'radial-progress-large')
+      playClass = 'resume-position'
+    }
+
     // Only show the play button for torrents that contain playable media
     var playButton
     if (TorrentPlayer.isPlayableTorrent(torrentSummary)) {
@@ -148,6 +161,7 @@ function TorrentList (state) {
 
     return hx`
       <div class='buttons'>
+        ${positionElem}
         ${playButton}
         <i.button-round.icon.download
           class=${torrentSummary.status}
@@ -167,7 +181,6 @@ function TorrentList (state) {
 
   // Show files, per-file download status and play buttons, and so on
   function renderTorrentDetails (torrentSummary) {
-    var infoHash = torrentSummary.infoHash
     var filesElement
     if (!torrentSummary.files) {
       // We don't know what files this torrent contains
@@ -177,15 +190,17 @@ function TorrentList (state) {
       filesElement = hx`<div class='files warning'>${message}</div>`
     } else {
       // We do know the files. List them and show download stats for each one
-      var fileRows = torrentSummary.files.map(
+      var fileRows = torrentSummary.files
-        (file, index) => renderFileRow(torrentSummary, file, index))
+        .map((file, index) => ({ file, index }))
+        .sort(function (a, b) {
+          if (a.file.name < b.file.name) return -1
+          if (b.file.name < a.file.name) return 1
+          return 0
+        })
+        .map((object) => renderFileRow(torrentSummary, object.file, object.index))
+
       filesElement = hx`
         <div class='files'>
-          <strong>Files</strong>
-          <span class='open-folder'
-            onclick=${dispatcher('openFolder', infoHash)}>
-            Open folder
-          </span>
           <table>
             ${fileRows}
           </table>
@@ -203,7 +218,9 @@ function TorrentList (state) {
   // Show a single torrentSummary file in the details view for a single torrent
   function renderFileRow (torrentSummary, file, index) {
     // First, find out how much of the file we've downloaded
-    var isDone = false
+    // Are we even torrenting it?
+    var isSelected = torrentSummary.selections && torrentSummary.selections[index]
+    var isDone = false // Are we finished torrenting it?
     var progress = ''
     if (torrentSummary.progress && torrentSummary.progress.files) {
       var fileProg = torrentSummary.progress.files[index]
@@ -211,28 +228,69 @@ function TorrentList (state) {
       progress = Math.round(100 * fileProg.numPiecesPresent / fileProg.numPieces) + '%'
     }
 
-    // Second, render the file as a table row
+    // Second, for media files where we saved our position, show how far we got
+    var positionElem
+    if (file.currentTime) {
+      // Radial progress bar. 0% = start from 0:00, 270% = 3/4 of the way thru
+      positionElem = renderRadialProgressBar(file.currentTime / file.duration)
+    }
+
+    // Finally, render the file as a table row
+    var isPlayable = TorrentPlayer.isPlayable(file)
     var infoHash = torrentSummary.infoHash
     var icon
-    var rowClass = ''
     var handleClick
-    if (TorrentPlayer.isPlayable(file)) {
+    if (isPlayable) {
       icon = 'play_arrow' /* playable? add option to play */
       handleClick = dispatcher('play', infoHash, index)
     } else {
       icon = 'description' /* file icon, opens in OS default app */
-      rowClass = isDone ? '' : 'disabled'
+      handleClick = dispatcher('openItem', infoHash, index)
-      handleClick = dispatcher('openFile', infoHash, index)
     }
+    var rowClass = ''
+    if (!isSelected) rowClass = 'disabled' // File deselected, not being torrented
+    if (!isDone && !isPlayable) rowClass = 'disabled' // Can't open yet, can't stream
     return hx`
-      <tr onclick=${handleClick} class='${rowClass}'>
+      <tr onclick=${handleClick}>
-        <td class='col-icon'>
+        <td class='col-icon ${rowClass}'>
+          ${positionElem}
           <i class='icon'>${icon}</i>
         </td>
-        <td class='col-name'>${file.name}</td>
+        <td class='col-name ${rowClass}'>
-        <td class='col-progress'>${progress}</td>
+          ${file.name}
-        <td class='col-size'>${prettyBytes(file.length)}</td>
+        </td>
+        <td class='col-progress ${rowClass}'>
+          ${isSelected ? progress : ''}
+        </td>
+        <td class='col-size ${rowClass}'>
+          ${prettyBytes(file.length)}
+        </td>
+        <td class='col-select'
+            onclick=${dispatcher('toggleTorrentFile', infoHash, index)}>
+          <i class='icon'>${isSelected ? 'close' : 'add'}</i>
+        </td>
       </tr>
     `
   }
 }
+
+function renderRadialProgressBar (fraction, cssClass) {
+  var rotation = 360 * fraction
+  var transformFill = {transform: 'rotate(' + (rotation / 2) + 'deg)'}
+  var transformFix = {transform: 'rotate(' + rotation + 'deg)'}
+
+  return hx`
+    <div class="radial-progress ${cssClass}">
+      <div class="circle">
+        <div class="mask full" style=${transformFill}>
+          <div class="fill" style=${transformFill}></div>
+        </div>
+        <div class="mask half">
+          <div class="fill" style=${transformFill}></div>
+          <div class="fill fix" style=${transformFix}></div>
+        </div>
+      </div>
+      <div class="inset"></div>
+    </div>
+  `
+}

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

@@ -1,10 +1,7 @@
 module.exports = OpenTorrentAddressModal
 
-var h = require('virtual-dom/h')
+var {dispatch, dispatcher} = require('../lib/dispatcher')
-var hyperx = require('hyperx')
+var hx = require('../lib/hx')
-var hx = hyperx(h)
-
-var {dispatch} = require('../lib/dispatcher')
 
 function OpenTorrentAddressModal (state) {
   return hx`
@@ -14,8 +11,8 @@ function OpenTorrentAddressModal (state) {
         <input id='add-torrent-url' type='text' onkeypress=${handleKeyPress} />
       </p>
       <p class='float-right'>
-        <button class='button button-flat' onclick=${handleCancel}>CANCEL</button>
+        <button class='button button-flat' onclick=${dispatcher('exitModal')}>Cancel</button>
-          <button class='button button-raised' onclick=${handleOK}>OK</button>
+        <button class='button button-raised' onclick=${handleOK}>OK</button>
       </p>
       <script>document.querySelector('#add-torrent-url').focus()</script>
     </div>
@@ -30,7 +27,3 @@ function handleOK () {
   dispatch('exitModal')
   dispatch('addTorrent', document.querySelector('#add-torrent-url').value)
 }
-
-function handleCancel () {
-  dispatch('exitModal')
-}

renderer/views/player.js

@@ -1,12 +1,10 @@
 module.exports = Player
 
-var h = require('virtual-dom/h')
-var hyperx = require('hyperx')
-var hx = hyperx(h)
-
-var prettyBytes = require('prettier-bytes')
 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')
 
@@ -18,6 +16,7 @@ function Player (state) {
   return hx`
     <div
       class='player'
+      onwheel=${handleVolumeWheel}
       onmousemove=${dispatcher('mediaMouseMoved')}>
       ${showVideo ? renderMedia(state) : renderCastScreen(state)}
       ${renderPlayerControls(state)}
@@ -25,12 +24,18 @@ function Player (state) {
   `
 }
 
+// Handles volume change by wheel
+function handleVolumeWheel (e) {
+  dispatch('changeVolume', (-e.deltaY | e.deltaX) / 500)
+}
+
 function renderMedia (state) {
   if (!state.server) return
 
   // Unfortunately, play/pause can't be done just by modifying HTML.
   // Instead, grab the DOM node and play/pause it if necessary
-  var mediaElement = document.querySelector(state.playing.type) /* get the <video> or <audio> tag */
+  // Get the <video> or <audio> tag
+  var mediaElement = document.querySelector(state.playing.type)
   if (mediaElement !== null) {
     if (state.playing.isPaused && !mediaElement.paused) {
       mediaElement.pause()
@@ -42,36 +47,44 @@ function renderMedia (state) {
       mediaElement.currentTime = state.playing.jumpToTime
       state.playing.jumpToTime = null
     }
+    if (state.playing.playbackRate !== mediaElement.playbackRate) {
+      mediaElement.playbackRate = state.playing.playbackRate
+    }
+    // Recover previous volume
+    if (state.previousVolume !== null && isFinite(state.previousVolume)) {
+      mediaElement.volume = state.previousVolume
+      state.previousVolume = null
+    }
+
     // Set volume
     if (state.playing.setVolume !== null && isFinite(state.playing.setVolume)) {
       mediaElement.volume = state.playing.setVolume
       state.playing.setVolume = null
     }
 
-    // fix textTrack cues not been removed <track> rerender
+    // Switch to the newly added subtitle track, if available
-    if (state.playing.subtitles.change) {
+    var tracks = mediaElement.textTracks || []
-      var tracks = mediaElement.textTracks
+    for (var j = 0; j < tracks.length; j++) {
-      for (var j = 0; j < tracks.length; j++) {
+      var isSelectedTrack = j === state.playing.subtitles.selectedIndex
-        // mode is not an <track> attribute, only available on DOM
+      tracks[j].mode = isSelectedTrack ? 'showing' : 'hidden'
-        tracks[j].mode = (tracks[j].label === state.playing.subtitles.change) ? 'showing' : 'hidden'
-      }
-      state.playing.subtitles.change = null
     }
 
-    state.playing.currentTime = mediaElement.currentTime
+    // Save video position
-    state.playing.duration = mediaElement.duration
+    var file = state.getPlayingFileSummary()
+    file.currentTime = state.playing.currentTime = mediaElement.currentTime
+    file.duration = state.playing.duration = mediaElement.duration
     state.playing.volume = mediaElement.volume
   }
 
   // Add subtitles to the <video> tag
   var trackTags = []
-
+  if (state.playing.subtitles.selectedIndex >= 0) {
-  if (state.playing.subtitles.enabled && state.playing.subtitles.tracks.length > 0) {
     for (var i = 0; i < state.playing.subtitles.tracks.length; i++) {
       var track = state.playing.subtitles.tracks[i]
+      var isSelected = state.playing.subtitles.selectedIndex === i
       trackTags.push(hx`
         <track
-          ${track.selected ? 'default' : ''}
+          ${isSelected ? 'default' : ''}
           label=${track.label}
           type='subtitles'
           src=${track.buffer}>
@@ -89,7 +102,8 @@ function renderMedia (state) {
       onstalling=${dispatcher('mediaStalled')}
       onerror=${dispatcher('mediaError')}
       ontimeupdate=${dispatcher('mediaTimeUpdate')}
-      autoplay>
+      onencrypted=${dispatcher('mediaEncrypted')}
+      oncanplay=${onCanPlay}>
       ${trackTags}
     </div>
   `
@@ -105,7 +119,7 @@ function renderMedia (state) {
     </div>
   `
 
-  // As soon as the video loads enough to know the video dimensions, resize the window
+  // As soon as we know the video dimensions, resize the window
   function onLoadedMetadata (e) {
     if (state.playing.type !== 'video') return
     var video = e.target
@@ -120,6 +134,19 @@ function renderMedia (state) {
   function onEnded (e) {
     state.playing.isPaused = true
   }
+
+  function onCanPlay (e) {
+    var elem = e.target
+    if (state.playing.type === 'video' &&
+      elem.webkitVideoDecodedByteCount === 0) {
+      dispatch('mediaError', 'Video codec unsupported')
+    } else if (elem.webkitAudioDecodedByteCount === 0) {
+      dispatch('mediaError', 'Audio codec unsupported')
+    } else {
+      dispatch('mediaSuccess')
+      elem.play()
+    }
+  }
 }
 
 function renderOverlay (state) {
@@ -137,7 +164,8 @@ function renderOverlay (state) {
   } else if (elems.length !== 0) {
     style = { backgroundImage: cssBackgroundImageDarkGradient() }
   } else {
-    return /* Video, not audio, and it isn't stalled, so no spinner. No overlay needed. */
+    // Video playing, so no spinner. No overlay needed
+    return
   }
 
   return hx`
@@ -148,8 +176,7 @@ function renderOverlay (state) {
 }
 
 function renderAudioMetadata (state) {
-  var torrentSummary = getPlayingTorrentSummary(state)
+  var fileSummary = state.getPlayingFileSummary()
-  var fileSummary = torrentSummary.files[state.playing.fileIndex]
   if (!fileSummary.audioInfo) return
   var info = fileSummary.audioInfo
 
@@ -168,15 +195,37 @@ function renderAudioMetadata (state) {
     track = info.track.no + ' of ' + info.track.of
   }
 
-  // Show a small info box in the middle of the screen with title/album/artist/etc
+  // 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}</div>`)
+  if (artist) {
-  if (album) elems.push(hx`<div class='audio-album'><label>Album</label>${album}</div>`)
+    elems.push(hx`
-  if (track) elems.push(hx`<div class='audio-track'><label>Track</label>${track}</div>`)
+      <div class='audio-artist'>
+        <label>Artist</label>${artist}
+      </div>
+    `)
+  }
+  if (album) {
+    elems.push(hx`
+      <div class='audio-album'>
+        <label>Album</label>${album}
+      </div>
+    `)
+  }
+  if (track) {
+    elems.push(hx`
+      <div class='audio-track'>
+        <label>Track</label>${track}
+      </div>
+    `)
+  }
 
-  // Align the title with the artist/etc info, if available. Otherwise, center the title
+  // 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}</div>`)
+  elems.unshift(hx`
+    <div class='audio-title'>
+      ${elems.length ? emptyLabel : undefined}${title}
+    </div>
+  `)
 
   return hx`<div class='audio-metadata'>${elems}</div>`
 }
@@ -187,7 +236,7 @@ function renderLoadingSpinner (state) {
     (new Date().getTime() - state.playing.lastTimeUpdate > 2000)
   if (!isProbablyStalled) return
 
-  var prog = getPlayingTorrentSummary(state).progress || {}
+  var prog = state.getPlayingTorrentSummary().progress || {}
   var fileProgress = 0
   if (prog.files) {
     var file = prog.files[state.playing.fileIndex]
@@ -207,20 +256,35 @@ function renderLoadingSpinner (state) {
 }
 
 function renderCastScreen (state) {
-  var castIcon, castType
+  var castIcon, castType, isCast
   if (state.playing.location.startsWith('chromecast')) {
     castIcon = 'cast_connected'
     castType = 'Chromecast'
+    isCast = true
   } else if (state.playing.location.startsWith('airplay')) {
     castIcon = 'airplay'
     castType = 'AirPlay'
+    isCast = true
   } else if (state.playing.location.startsWith('dlna')) {
     castIcon = 'tv'
     castType = 'DLNA'
+    isCast = true
+  } else if (state.playing.location === 'vlc') {
+    castIcon = 'tv'
+    castType = 'VLC'
+    isCast = false
+  } else if (state.playing.location === 'error') {
+    castIcon = 'error_outline'
+    castType = 'Error'
+    isCast = false
   }
 
   var isStarting = state.playing.location.endsWith('-pending')
-  var castStatus = isStarting ? 'Connecting...' : 'Connected'
+  var castName = state.playing.castName
+  var castStatus
+  if (isCast && isStarting) castStatus = 'Connecting to ' + castName + '...'
+  else if (isCast && !isStarting) castStatus = 'Connected to ' + castName
+  else castStatus = ''
 
   // Show a nice title image, if possible
   var style = {
@@ -238,25 +302,63 @@ function renderCastScreen (state) {
   `
 }
 
+function renderCastOptions (state) {
+  if (!state.devices.castMenu) return
+
+  var {location, devices} = state.devices.castMenu
+  var player = state.devices[location]
+
+  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}
+      </li>
+    `
+  })
+
+  return hx`
+    <ul.options-list>
+      ${items}
+    </ul>
+  `
+}
+
 function renderSubtitlesOptions (state) {
   var subtitles = state.playing.subtitles
-  if (subtitles.tracks.length && subtitles.show) {
+  if (!subtitles.tracks.length || !subtitles.showMenu) return
-    return hx`<ul.subtitles-list>
+
-      ${subtitles.tracks.map(function (w, i) {
+  var items = subtitles.tracks.map(function (track, ix) {
-        return hx`<li onclick=${dispatcher('selectSubtitle', w.label)}><i.icon>${w.selected ? 'radio_button_checked' : 'radio_button_unchecked'}</i>${w.label}</li>`
+    var isSelected = state.playing.subtitles.selectedIndex === ix
-      })}
+    return hx`
-        <li onclick=${dispatcher('selectSubtitle', '')}><i.icon>${!subtitles.enabled ? 'radio_button_checked' : 'radio_button_unchecked'}</i>None</li>
+      <li onclick=${dispatcher('selectSubtitle', ix)}>
-      </ul>
+        <i.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>
+        None
+      </li>
+    </ul>
+  `
 }
 
 function renderPlayerControls (state) {
   var positionPercent = 100 * state.playing.currentTime / state.playing.duration
-  var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 8px)' }
+  var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 3px)' }
   var captionsClass = state.playing.subtitles.tracks.length === 0
     ? 'disabled'
-    : state.playing.subtitles.enabled
+    : state.playing.subtitles.selectedIndex >= 0
       ? 'active'
       : ''
 
@@ -264,15 +366,27 @@ function renderPlayerControls (state) {
     hx`
       <div class='playback-bar'>
         ${renderLoadingBar(state)}
-        <div class='playback-cursor' style=${playbackCursorStyle}></div>
+        <div
-        <div class='scrub-bar'
+          class='playback-cursor'
+          style=${playbackCursorStyle}>
+        </div>
+        <div
+          class='scrub-bar'
           draggable='true'
+          ondragstart=${handleDragStart}
           onclick=${handleScrub},
-          ondrag=${handleScrub}></div>
+          ondrag=${handleScrub}>
+        </div>
       </div>
     `,
     hx`
-      <i class='icon fullscreen'
+      <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>
@@ -282,127 +396,123 @@ function renderPlayerControls (state) {
   if (state.playing.type === 'video') {
     // show closed captions icon
     elements.push(hx`
-      <i.icon.closed-captions
+      <i.icon.closed-caption.float-right
         class=${captionsClass}
         onclick=${handleSubtitles}>
-        closed_captions
+        closed_caption
       </i>
     `)
   }
 
   // If we've detected a Chromecast or AppleTV, the user can play video there
-  var isOnChromecast = state.playing.location.startsWith('chromecast')
+  var castTypes = ['chromecast', 'airplay', 'dlna']
-  var isOnAirplay = state.playing.location.startsWith('airplay')
+  var isCastingAnywhere = castTypes.some(
-  var isOnDlna = state.playing.location.startsWith('dlna')
+    (castType) => state.playing.location.startsWith(castType))
-  var chromecastClass, chromecastHandler, airplayClass, airplayHandler, dlnaClass, dlnaHandler
+
-  if (isOnChromecast) {
+  // Add the cast buttons. Icons for each cast type, connected/disconnected:
-    chromecastClass = 'active'
+  var buttonIcons = {
-    dlnaClass = 'disabled'
+    'chromecast': {true: 'cast_connected', false: 'cast'},
-    airplayClass = 'disabled'
+    'airplay': {true: 'airplay', false: 'airplay'},
-    chromecastHandler = dispatcher('closeDevice')
+    'dlna': {true: 'tv', false: 'tv'}
-    airplayHandler = undefined
+  }
-    dlnaHandler = undefined
+  castTypes.forEach(function (castType) {
-  } else if (isOnAirplay) {
+    // Do we show this button (eg. the Chromecast button) at all?
-    chromecastClass = 'disabled'
+    var isCasting = state.playing.location.startsWith(castType)
-    dlnaClass = 'disabled'
+    var player = state.devices[castType]
-    airplayClass = 'active'
+    if ((!player || player.getDevices().length === 0) && !isCasting) return
-    chromecastHandler = undefined
+
-    airplayHandler = dispatcher('closeDevice')
+    // Show the button. Three options for eg the Chromecast button:
-    dlnaHandler = undefined
+    var buttonClass, buttonHandler
-  } else if (isOnDlna) {
+    if (isCasting) {
-    chromecastClass = 'disabled'
+      // Option 1: we are currently connected to Chromecast. Button stops the cast.
-    dlnaClass = 'active'
+      buttonClass = 'active'
-    airplayClass = 'disabled'
+      buttonHandler = dispatcher('stopCasting')
-    chromecastHandler = undefined
+    } else if (isCastingAnywhere) {
-    airplayHandler = undefined
+      // Option 2: we are currently connected somewhere else. Button disabled.
-    dlnaHandler = dispatcher('closeDevice')
+      buttonClass = 'disabled'
-  } else {
+      buttonHandler = undefined
-    chromecastClass = ''
+    } else {
-    airplayClass = ''
+      // Option 3: we are not connected anywhere. Button opens Chromecast menu.
-    dlnaClass = ''
+      buttonClass = ''
-    chromecastHandler = dispatcher('openDevice', 'chromecast')
+      buttonHandler = dispatcher('toggleCastMenu', castType)
-    airplayHandler = dispatcher('openDevice', 'airplay')
+    }
-    dlnaHandler = dispatcher('openDevice', 'dlna')
+    var buttonIcon = buttonIcons[castType][isCasting]
-  }
-  if (state.devices.chromecast || isOnChromecast) {
-    var castIcon = isOnChromecast ? 'cast_connected' : 'cast'
-    elements.push(hx`
-      <i.icon.device
-        class=${chromecastClass}
-        onclick=${chromecastHandler}>
-        ${castIcon}
-      </i>
-    `)
-  }
-  if (state.devices.airplay || isOnAirplay) {
-    elements.push(hx`
-      <i.icon.device
-        class=${airplayClass}
-        onclick=${airplayHandler}>
-        airplay
-      </i>
-    `)
-  }
-  if (state.devices.dlna || isOnDlna) {
-    elements.push(hx`
-      <i.icon.device
-        class=${dlnaClass}
-        onclick=${dlnaHandler}>
-        tv
-      </i>
-    `)
-  }
 
-  // On OSX, the back button is in the title bar of the window; see app.js
-  // On other platforms, we render one over the video on mouseover
-  if (process.platform !== 'darwin') {
     elements.push(hx`
-      <i.icon.back
+      <i.icon.device.float-right
-        onclick=${dispatcher('back')}>
+        class=${buttonClass}
-        chevron_left
+        onclick=${buttonHandler}>
+        ${buttonIcon}
       </i>
     `)
-  }
+  })
 
-  // render volume
+  // Render volume slider
   var volume = state.playing.volume
-  var volumeIcon = 'volume_' + (volume === 0 ? 'off' : volume < 0.3 ? 'mute' : volume < 0.6 ? 'down' : 'up')
+  var volumeIcon = 'volume_' + (
-  var volumeStyle = { background: '-webkit-gradient(linear, left top, right top, ' +
+    volume === 0 ? 'off'
-    'color-stop(' + (volume * 100) + '%, #eee), ' +
+    : volume < 0.3 ? 'mute'
-    'color-stop(' + (volume * 100) + '%, #727272))'
+    : volume < 0.6 ? 'down'
+    : 'up')
+  var volumeStyle = {
+    background: '-webkit-gradient(linear, left top, right top, ' +
+      'color-stop(' + (volume * 100) + '%, #eee), ' +
+      'color-stop(' + (volume * 100) + '%, #727272))'
   }
 
   elements.push(hx`
-    <div.volume
+    <div class='volume float-left'>
-      onwheel=${handleVolumeWheel}>
+      <i
-        <i.icon.volume-icon onmousedown=${handleVolumeMute}>
+        class='icon volume-icon float-left'
-          ${volumeIcon}
+        onmousedown=${handleVolumeMute}>
-        </i>
+        ${volumeIcon}
-        <input.volume-slider
+      </i>
-          type='range' min='0' max='1' step='0.05' value=${volumeChanging !== false ? volumeChanging : volume}
+      <input
-          onmousedown=${handleVolumeScrub}
+        class='volume-slider float-right'
-          onmouseup=${handleVolumeScrub}
+        type='range' min='0' max='1' step='0.05'
-          onmousemove=${handleVolumeScrub}
+        value=${volumeChanging !== false ? volumeChanging : volume}
-          onwheel=${handleVolumeWheel}
+        onmousedown=${handleVolumeScrub}
-          style=${volumeStyle}
+        onmouseup=${handleVolumeScrub}
-        />
+        onmousemove=${handleVolumeScrub}
+        style=${volumeStyle}
+      />
     </div>
   `)
 
-  // Finally, the big button in the center plays or pauses the video
+  // Show video playback progress
+  var currentTimeStr = formatTime(state.playing.currentTime)
+  var durationStr = formatTime(state.playing.duration)
   elements.push(hx`
-    <i class='icon play-pause' onclick=${dispatcher('playPause')}>
+    <span class='time float-left'>
-      ${state.playing.isPaused ? 'play_arrow' : 'pause'}
+      ${currentTimeStr} / ${durationStr}
-    </i>
+    </span>
   `)
 
+  // render playback rate
+  if (state.playing.playbackRate !== 1) {
+    elements.push(hx`
+      <span class='rate float-left'>
+        ${state.playing.playbackRate}x
+      </span>
+    `)
+  }
+
   return hx`
-    <div class='player-controls'>
+    <div class='controls'>
       ${elements}
+      ${renderCastOptions(state)}
       ${renderSubtitlesOptions(state)}
     </div>
   `
 
+  function handleDragStart (e) {
+    // Prevent the cursor from changing, eg to a green + icon on Mac
+    if (e.dataTransfer) {
+      var dt = e.dataTransfer
+      dt.effectAllowed = 'none'
+    }
+  }
+
   // Handles a click or drag to scrub (jump to another position in the video)
   function handleScrub (e) {
     dispatch('mediaMouseMoved')
@@ -412,11 +522,6 @@ function renderPlayerControls (state) {
     dispatch('playbackJump', position)
   }
 
-  // Handles volume change by wheel
-  function handleVolumeWheel (e) {
-    dispatch('changeVolume', (-e.deltaY | e.deltaX) / 500)
-  }
-
   // Handles volume muting and Unmuting
   function handleVolumeMute (e) {
     if (state.playing.volume === 0.0) {
@@ -450,7 +555,7 @@ function renderPlayerControls (state) {
       // if no subtitles available select it
       dispatch('openSubtitles')
     } else {
-      dispatch('showSubtitles')
+      dispatch('toggleSubtitlesMenu')
     }
   }
 }
@@ -461,7 +566,7 @@ var volumeChanging = false
 // Renders the loading bar. Shows which parts of the torrent are loaded, which
 // can be "spongey" / non-contiguous
 function renderLoadingBar (state) {
-  var torrentSummary = getPlayingTorrentSummary(state)
+  var torrentSummary = state.getPlayingTorrentSummary()
   if (!torrentSummary.progress) {
     return []
   }
@@ -498,7 +603,7 @@ function renderLoadingBar (state) {
 
 // Returns the CSS background-image string for a poster image + dark vignette
 function cssBackgroundImagePoster (state) {
-  var torrentSummary = getPlayingTorrentSummary(state)
+  var torrentSummary = state.getPlayingTorrentSummary()
   var posterPath = TorrentSummary.getPosterPath(torrentSummary)
   if (!posterPath) return ''
   return cssBackgroundImageDarkGradient() + `, url(${posterPath})`
@@ -509,7 +614,17 @@ function cssBackgroundImageDarkGradient () {
     'rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 100%)'
 }
 
-function getPlayingTorrentSummary (state) {
+function formatTime (time) {
-  var infoHash = state.playing.infoHash
+  if (typeof time !== 'number' || Number.isNaN(time)) {
-  return state.saved.torrents.find((x) => x.infoHash === infoHash)
+    return '0:00'
+  }
+
+  var hours = Math.floor(time / 3600)
+  var minutes = Math.floor(time % 3600 / 60)
+  if (hours > 0) {
+    minutes = zeroFill(2, minutes)
+  }
+  var seconds = zeroFill(2, Math.floor(time % 60))
+
+  return (hours > 0 ? hours + ':' : '') + minutes + ':' + seconds
 }

renderer/views/preferences.js

@@ -0,0 +1,102 @@
+module.exports = Preferences
+
+var hx = require('../lib/hx')
+var {dispatch} = require('../lib/dispatcher')
+
+var remote = require('electron').remote
+var dialog = remote.dialog
+
+function Preferences (state) {
+  return hx`
+    <div class='preferences'>
+      ${renderGeneralSection(state)}
+    </div>
+  `
+}
+
+function renderGeneralSection (state) {
+  return renderSection({
+    title: 'General',
+    description: '',
+    icon: 'settings'
+  }, [
+    renderDownloadDirSelector(state)
+  ])
+}
+
+function renderDownloadDirSelector (state) {
+  return renderFileSelector({
+    label: 'Download Path',
+    description: 'Data from torrents will be saved here',
+    property: 'downloadPath',
+    options: {
+      title: 'Select download directory',
+      properties: [ 'openDirectory' ]
+    }
+  },
+  state.unsaved.prefs.downloadPath,
+  function (filePath) {
+    setStateValue('downloadPath', filePath)
+  })
+}
+
+// Renders a prefs section.
+// - definition should be {icon, title, description}
+// - controls should be an array of vdom elements
+function renderSection (definition, controls) {
+  var helpElem = !definition.description ? null : hx`
+    <div class='help text'>
+      <i.icon>help_outline</i>${definition.description}
+    </div>
+  `
+  return hx`
+    <section class='section preferences-panel'>
+      <div class='section-container'>
+        <div class='section-heading'>
+          <i.icon>${definition.icon}</i>${definition.title}
+        </div>
+        ${helpElem}
+        <div class='section-body'>
+          ${controls}
+        </div>
+      </div>
+    </section>
+  `
+}
+
+// Creates a file chooser
+// - defition should be {label, description, options}
+//   options are passed to dialog.showOpenDialog
+// - value should be the current pref, a file or folder path
+// - callback takes a new file or folder path
+function renderFileSelector (definition, value, callback) {
+  return hx`
+    <div class='control-group'>
+      <div class='controls'>
+        <label class='control-label'>
+          <div class='preference-title'>${definition.label}</div>
+          <div class='preference-description'>${definition.description}</div>
+        </label>
+        <div class='controls'>
+          <input type='text' class='file-picker-text'
+            id=${definition.property}
+            disabled='disabled'
+            value=${value} />
+          <button class='btn' onclick=${handleClick}>
+            <i.icon>folder_open</i>
+          </button>
+        </div>
+      </div>
+    </div>
+  `
+  function handleClick () {
+    dialog.showOpenDialog(remote.getCurrentWindow(), definition.options, function (filenames) {
+      if (!Array.isArray(filenames)) return
+      callback(filenames[0])
+    })
+  }
+}
+
+function setStateValue (property, value) {
+  dispatch('updatePreferences', property, value)
+}

renderer/views/unsupported-media-modal.js

@@ -0,0 +1,39 @@
+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,21 +1,18 @@
 module.exports = UpdateAvailableModal
 
-var h = require('virtual-dom/h')
-var hyperx = require('hyperx')
-var hx = hyperx(h)
-
 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>
+      <p class='float-right'>
-        <button class='primary' onclick=${handleOK}>Show Download Page</button>
+        <button class='button button-flat' onclick=${handleCancel}>Skip This Release</button>
-        <button class='cancel' onclick=${handleCancel}>Skip This Release</button>
+        <button class='button button-raised' onclick=${handleOK}>Show Download Page</button>
       </p>
     </div>
   `

renderer/webtorrent.js

@@ -28,13 +28,13 @@ global.WEBTORRENT_ANNOUNCE = defaultAnnounceList
 
 // Connect to the WebTorrent and BitTorrent networks. WebTorrent Desktop is a hybrid
 // client, as explained here: https://webtorrent.io/faq
-var client = window.client = new WebTorrent()
+var client = new WebTorrent()
 
 // WebTorrent-to-HTTP streaming sever
-var server = window.server = null
+var server = null
 
 // Used for diffing, so we only send progress updates when necessary
-var prevProgress = window.prevProgress = null
+var prevProgress = null
 
 init()
 
@@ -42,8 +42,8 @@ function init () {
   client.on('warning', (err) => ipc.send('wt-warning', null, err.message))
   client.on('error', (err) => ipc.send('wt-error', null, err.message))
 
-  ipc.on('wt-start-torrenting', (e, torrentKey, torrentID, path, fileModtimes) =>
+  ipc.on('wt-start-torrenting', (e, torrentKey, torrentID, path, fileModtimes, selections) =>
-    startTorrenting(torrentKey, torrentID, path, fileModtimes))
+    startTorrenting(torrentKey, torrentID, path, fileModtimes, selections))
   ipc.on('wt-stop-torrenting', (e, infoHash) =>
     stopTorrenting(infoHash))
   ipc.on('wt-create-torrent', (e, torrentKey, options) =>
@@ -58,39 +58,41 @@ function init () {
     startServer(infoHash, index))
   ipc.on('wt-stop-server', (e) =>
     stopServer())
+  ipc.on('wt-select-files', (e, infoHash, selections) =>
+    selectFiles(infoHash, selections))
 
   ipc.send('ipcReadyWebTorrent')
 
+  window.addEventListener('error', (e) =>
+    ipc.send('wt-uncaught-error', {message: e.error.message, stack: e.error.stack}),
+    true)
+
   setInterval(updateTorrentProgress, 1000)
 }
 
 // Starts a given TorrentID, which can be an infohash, magnet URI, etc. Returns WebTorrent object
 // See https://github.com/feross/webtorrent/blob/master/docs/api.md#clientaddtorrentid-opts-function-ontorrent-torrent-
-function startTorrenting (torrentKey, torrentID, path, fileModtimes) {
+function startTorrenting (torrentKey, torrentID, path, fileModtimes, selections) {
   console.log('starting torrent %s: %s', torrentKey, torrentID)
-  var torrent
+
-  try {
+  var torrent = client.add(torrentID, {
-    torrent = client.add(torrentID, {
+    path: path,
-      path: path,
+    fileModtimes: fileModtimes
-      fileModtimes: fileModtimes
+  })
-    })
-  } catch (err) {
-    return ipc.send('wt-error', torrentKey, err.message)
-  }
-  // If we add a duplicate magnet URI or infohash, WebTorrent returns the
-  // existing torrent object! (If we add a duplicate torrent file, it creates a
-  // new torrent object and raises an error later.) Workaround:
-  if (torrent.key) {
-    return ipc.send('wt-error', torrentKey, 'Can\'t add duplicate torrent')
-  }
   torrent.key = torrentKey
+
+  // Listen for ready event, progress notifications, etc
   addTorrentEvents(torrent)
+
+  // Only download the files the user wants, not necessarily all files
+  torrent.once('ready', () => selectFiles(torrent, selections))
+
   return torrent
 }
 
 function stopTorrenting (infoHash) {
   var torrent = client.get(infoHash)
-  torrent.destroy()
+  if (torrent) torrent.destroy()
 }
 
 // Create a new torrent, start seeding
@@ -159,9 +161,7 @@ function getTorrentFileInfo (file) {
   return {
     name: file.name,
     length: file.length,
-    path: file.path,
+    path: file.path
-    numPiecesPresent: 0,
-    numPieces: null
   }
 }
 
@@ -177,7 +177,7 @@ function saveTorrentFile (torrentKey) {
     }
 
     // Otherwise, save the .torrent file, under the app config folder
-    fs.mkdir(config.CONFIG_TORRENT_PATH, function (_) {
+    fs.mkdir(config.TORRENT_PATH, function (_) {
       fs.writeFile(torrentPath, torrent.torrentFile, function (err) {
         if (err) return console.log('error saving torrent file %s: %o', torrentPath, err)
         console.log('saved torrent file %s', torrentPath)
@@ -190,7 +190,7 @@ function saveTorrentFile (torrentKey) {
 // Checks whether we've already resolved a given infohash to a torrent file
 // Calls back with (torrentPath, exists). Logs, does not call back on error
 function checkIfTorrentFileExists (infoHash, cb) {
-  var torrentPath = path.join(config.CONFIG_TORRENT_PATH, infoHash + '.torrent')
+  var torrentPath = path.join(config.TORRENT_PATH, infoHash + '.torrent')
   fs.exists(torrentPath, function (exists) {
     cb(torrentPath, exists)
   })
@@ -203,10 +203,10 @@ function generateTorrentPoster (torrentKey) {
   torrentPoster(torrent, function (err, buf, extension) {
     if (err) return console.log('error generating poster: %o', err)
     // save it for next time
-    fs.mkdirp(config.CONFIG_POSTER_PATH, function (err) {
+    fs.mkdirp(config.POSTER_PATH, function (err) {
       if (err) return console.log('error creating poster dir: %o', err)
       var posterFileName = torrent.infoHash + extension
-      var posterFilePath = path.join(config.CONFIG_POSTER_PATH, posterFileName)
+      var posterFilePath = path.join(config.POSTER_PATH, posterFileName)
       fs.writeFile(posterFilePath, buf, function (err) {
         if (err) return console.log('error saving poster: %o', err)
         // show the poster
@@ -274,7 +274,7 @@ function getTorrentProgress () {
 function startServer (infoHash, index) {
   var torrent = client.get(infoHash)
   if (torrent.ready) startServerFromReadyTorrent(torrent, index)
-  else torrent.on('ready', () => startServerFromReadyTorrent(torrent, index))
+  else torrent.once('ready', () => startServerFromReadyTorrent(torrent, index))
 }
 
 function startServerFromReadyTorrent (torrent, index, cb) {
@@ -312,6 +312,44 @@ function getAudioMetadata (infoHash, index) {
   })
 }
 
+function selectFiles (torrentOrInfoHash, selections) {
+  // Get the torrent object
+  var torrent
+  if (typeof torrentOrInfoHash === 'string') {
+    torrent = client.get(torrentOrInfoHash)
+  } else {
+    torrent = torrentOrInfoHash
+  }
+
+  // Selections not specified?
+  // Load all files. We still need to replace the default whole-torrent
+  // selection with individual selections for each file, so we can
+  // select/deselect files later on
+  if (!selections) {
+    selections = torrent.files.map((x) => true)
+  }
+
+  // Selections specified incorrectly?
+  if (selections.length !== torrent.files.length) {
+    throw new Error('got ' + selections.length + ' file selections, ' +
+      'but the torrent contains ' + torrent.files.length + ' files')
+  }
+
+  // Remove default selection (whole torrent)
+  torrent.deselect(0, torrent.pieces.length - 1, false)
+
+  // Add selections (individual files)
+  for (var i = 0; i < selections.length; i++) {
+    var file = torrent.files[i]
+    if (selections[i]) {
+      file.select()
+    } else {
+      console.log('deselecting file ' + i + ' of torrent ' + torrent.name)
+      file.deselect()
+    }
+  }
+}
+
 // Gets a WebTorrent handle by torrentKey
 // Throws an Error if we're not currently torrenting anything w/ that key
 function getTorrent (torrentKey) {

static/linux/webtorrent-desktop.desktop

@@ -13,7 +13,7 @@ Exec=$EXEC_PATH %U
 TryExec=$TRY_EXEC_PATH
 StartupNotify=false
 Categories=Network;FileTransfer;P2P;
-MimeType=application/x-bittorrent;x-scheme-handler/magnet;
+MimeType=application/x-bittorrent;x-scheme-handler/magnet;x-scheme-handler/stream-magnet;
 
 Actions=CreateNewTorrent;OpenTorrentFile;OpenTorrentAddress;