0.13.1

* use depcheck to replace our own check-dependencies script

* ignore packges used in npm scripts

.gitignore

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

.nodemonignore

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

.travis.yml

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

AUTHORS.md

@@ -10,7 +10,6 @@
 - Romain Beaumont (romain.rom1@gmail.com)
 - Dan Flettre (fletd01@yahoo.com)
 - Liam Gray (liam.r.gray@gmail.com)
-- grunjol (grunjol@users.noreply.github.com)
 - Rémi Jouannet (remijouannet@users.noreply.github.com)
 - Evan Miller (miller.evan815@gmail.com)
 - Alex (alxmorais8@msn.com)
@@ -28,5 +27,9 @@
 - Adam Gotlib (gotlib.adam+dev@gmail.com)
 - Rémi Jouannet (remijouannet@gmail.com)
 - Andrea Tupini (tupini07@gmail.com)
+- grunjol (grunjol@gmail.com)
+- Jason Kurian (jasonk92@gmail.com)
+- Vamsi Krishna Avula (vamsi_ism@outlook.com)
+- Noam Okman (noamokman@gmail.com)
 
 #### Generated by bin/update-authors.sh.

CHANGELOG.md

@@ -1,9 +1,40 @@
 # WebTorrent Desktop Version History
 
+## v0.13.0 - 2016-08-31
+
+### Added
+- Torrent progress bar
+- Support .m4a audio
+- Better telemetry: log error versions, report more types of errors
+
+### Changed
+- New look - Material UI. Rewrote Create Torrent and Preferences pages.
+
+### Fixed
+- Fixed telemetry [object Object] and [object HTMLMediaElement] bugs
+- Don't render player controls when playing externally, eg in VLC
+- Don't play notification sounds during media playback
+
+## v0.12.0 - 2016-08-23
+
+### Added
+
+- Custom external media player
+- Linux: add system-wide launcher and icons for Debian, including Ubuntu
+
+### Changed
+
+- Telemetry improvements: redact stacktraces, log app version
+
+### Fixed
+
+- Fix playback and download of default torrents ("missing path" error) (#804)
+- Fix Delete Torrent + Data for newly added magnet links
+- Fix jumpToTime error (#804)
+
 ## v0.11.0 - 2016-08-19
 
 ### Added
-
 - New Preference to "Set WebTorrent as default handler for torrents and magnet links" (#771)
 - New Preference to "Always play in VLC" (#674)
 - Check for missing default download path and torrent folders on start up (#776)

README.md

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

bin/check-deps.js

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

bin/cmd.js

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

bin/list-deps.sh

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

bin/package.js

@@ -105,7 +105,7 @@ var all = {
   prune: true,
 
   // The Electron version with which the app is built (without the leading 'v')
-  version: require('electron-prebuilt/package.json').version
+  version: require('electron/package.json').version
 }
 
 var darwin = {

bin/release-_post.sh

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

bin/update-authors.sh

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

package.json

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

src/.babelrc

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

src/main/index.js

@@ -78,8 +78,8 @@ function init () {
     // Report uncaught exceptions
     process.on('uncaughtException', (err) => {
       console.error(err)
-      var errJSON = {message: err.message, stack: err.stack}
-      windows.main.dispatch('uncaughtError', 'main', errJSON)
+      var error = {message: err.message, stack: err.stack}
+      windows.main.dispatch('uncaughtError', 'main', error)
     })
   })
 

src/main/menu.js

@@ -42,9 +42,12 @@ function setWindowFocus (flag) {
 // Disallow opening more screens on top of the current one.
 function setAllowNav (flag) {
   getMenuItem('Preferences').enabled = flag
-  getMenuItem('Create New Torrent...').enabled = flag
-  var item = getMenuItem('Create New Torrent from File...')
-  if (item) item.enabled = flag
+  if (process.platform === 'darwin') {
+    getMenuItem('Create New Torrent...').enabled = flag
+  } else {
+    getMenuItem('Create New Torrent from Folder...').enabled = flag
+    getMenuItem('Create New Torrent from File...').enabled = flag
+  }
 }
 
 function onToggleAlwaysOnTop (flag) {

src/main/windows/main.js

@@ -23,7 +23,7 @@ var log = require('../log')
 var menu = require('../menu')
 var tray = require('../tray')
 
-var HEADER_HEIGHT = 37
+var HEADER_HEIGHT = 38
 var TORRENT_HEIGHT = 100
 
 function init () {
@@ -31,7 +31,7 @@ function init () {
     return main.win.show()
   }
   var win = main.win = new electron.BrowserWindow({
-    backgroundColor: '#1E1E1E',
+    backgroundColor: '#282828',
     darkTheme: true, // Forces dark theme (GTK+3)
     icon: getIconPath(), // Window icon (Windows, Linux)
     minWidth: config.WINDOW_MIN_WIDTH,

src/renderer/components/Heading.js

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

src/renderer/components/PathSelector.js

@@ -0,0 +1,93 @@
+const colors = require('material-ui/styles/colors')
+const electron = require('electron')
+const React = require('react')
+
+const remote = electron.remote
+
+const RaisedButton = require('material-ui/RaisedButton').default
+const TextField = require('material-ui/TextField').default
+
+class PathSelector extends React.Component {
+  static get propTypes () {
+    return {
+      className: React.PropTypes.string,
+      dialog: React.PropTypes.object,
+      displayValue: React.PropTypes.string,
+      id: React.PropTypes.string,
+      onChange: React.PropTypes.func,
+      title: React.PropTypes.string.isRequired,
+      value: React.PropTypes.string
+    }
+  }
+
+  constructor (props) {
+    super(props)
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  handleClick () {
+    var opts = Object.assign({
+      defaultPath: this.props.value,
+      properties: [ 'openFile', 'openDirectory' ]
+    }, this.props.dialog)
+
+    remote.dialog.showOpenDialog(
+      remote.getCurrentWindow(),
+      opts,
+      (filenames) => {
+        if (!Array.isArray(filenames)) return
+        this.props.onChange && this.props.onChange(filenames[0])
+      }
+    )
+  }
+
+  render () {
+    const id = this.props.title.replace(' ', '-').toLowerCase()
+    return (
+      <div
+        className={this.props.className}
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          width: '100%'
+        }}
+      >
+        <div
+          className='label'
+          style={{
+            flex: '0 auto',
+            marginRight: 10,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+          }}
+        >
+          {this.props.title}:
+        </div>
+        <TextField
+          className='control'
+          disabled
+          id={id}
+          inputStyle={{
+            color: colors.grey50
+          }}
+          style={{
+            flex: '1',
+            fontSize: 14
+          }}
+          value={this.props.displayValue || this.props.value}
+        />
+        <RaisedButton
+          className='control'
+          label='Change'
+          onClick={this.handleClick}
+          style={{
+            marginLeft: 10
+          }}
+        />
+      </div>
+    )
+  }
+}
+
+module.exports = PathSelector

src/renderer/components/ShowMore.js

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

src/renderer/components/header.js

@@ -2,11 +2,11 @@ const React = require('react')
 
 const {dispatcher} = require('../lib/dispatcher')
 
-module.exports = class Header extends React.Component {
+class Header extends React.Component {
   render () {
     var loc = this.props.state.location
     return (
-      <div key='header' className='header'>
+      <div className='header'>
         {this.getTitle()}
         <div className='nav left float-left'>
           <i
@@ -48,3 +48,5 @@ module.exports = class Header extends React.Component {
     )
   }
 }
+
+module.exports = Header

src/renderer/controllers/playback-controller.js

@@ -38,7 +38,7 @@ module.exports = class PlaybackController {
     })
   }
 
-  // Show a file in the OS, eg in Finder on a Mac
+  // Open a file in OS default app.
   openItem (infoHash, index) {
     var torrentSummary = TorrentSummary.getByKey(this.state, infoHash)
     var filePath = path.join(

src/renderer/controllers/torrent-controller.js

@@ -186,5 +186,6 @@ function showDoneNotification (torrent) {
     ipcRenderer.send('show')
   }
 
-  sound.play('DONE')
+  // Only play notification sound if player is inactive
+  if (this.state.playing.isPaused) sound.play('DONE')
 }

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

@@ -64,13 +64,6 @@ module.exports = class TorrentListController {
     findFilesRecursive(files, (allFiles) => this.showCreateTorrent(allFiles))
   }
 
-  // Switches between the advanced and simple Create Torrent UI
-  toggleCreateTorrentAdvanced () {
-    var info = this.state.location.current()
-    if (info.url !== 'create-torrent') return
-    info.showAdvanced = !info.showAdvanced
-  }
-
   // Creates a new torrent and start seeeding
   createTorrent (options) {
     var state = this.state

src/renderer/lib/state.js

@@ -24,7 +24,11 @@ function getDefaultState () {
      */
     client: null, /* the WebTorrent client */
     server: null, /* local WebTorrent-to-HTTP server */
-    prev: {}, /* used for state diffing in updateElectron() */
+    prev: { /* used for state diffing in updateElectron() */
+      title: null,
+      progress: -1,
+      badge: null
+    },
     location: new LocationHistory(),
     window: {
       bounds: null, /* {x, y, width, height } */

src/renderer/lib/telemetry.js

@@ -33,7 +33,7 @@ function init (state) {
 
   if (config.IS_PRODUCTION) {
     postToServer()
-    // If the user keeps WebTorrent running for a long time, post every 24h
+    // If the user keeps WebTorrent running for a long time, post every 12h
     setInterval(postToServer, 12 * 3600 * 1000)
   } else {
     // Development: telemetry used only for local debugging
@@ -45,6 +45,7 @@ function init (state) {
 function reset () {
   telemetry.uncaughtErrors = []
   telemetry.playAttempts = {
+    minVersion: config.APP_VERSION,
     total: 0,
     success: 0,
     timeout: 0,
@@ -118,29 +119,64 @@ function getApproxNumTorrents (state) {
 }
 
 // An uncaught error happened in the main process or in one of the windows
-function logUncaughtError (procName, err) {
+function logUncaughtError (procName, e) {
   // Not initialized yet? Ignore.
   // Hopefully uncaught errors immediately on startup are fixed in dev
   if (!telemetry) return
 
-  var message, stack
-  if (err instanceof Error) {
-    message = err.message
-    // Remove the first part of each file path in the stack trace.
-    // - Privacy: remove personal info like C:\Users\<full name>
-    // - Aggregation: this lets us find which stacktraces occur often
-    stack = err.stack.replace(/\(.*app.asar/g, '(...')
+  var message
+  var stack = ''
+  if (e == null) {
+    message = 'Unexpected undefined error'
+  } else if (e.message) {
+    // err is either an Error or a plain object {message, stack}
+    message = e.message
+    stack = e.stack
+  } else if (e.error) {
+    // Uncaught Javascript errors (window.onerror), err is an ErrorEvent
+    if (!e.error.message) {
+      message = 'Unexpected ErrorEvent.error: ' + Object.keys(e.error).join(' ')
+    } else {
+      message = e.error.message
+      stack = e.error.stack
+    }
   } else {
-    message = String(err)
-    stack = ''
+    // Resource errors (captured element.onerror), err is an Event
+    if (!e.target) {
+      message = 'Unexpected unknown error'
+    } else if (!e.target.error) {
+      message = 'Unexpected resource loading error: ' + getElemString(e.target)
+    } else {
+      message = 'Resource error ' + getElemString(e.target) + ': ' + e.target.error.code
+    }
   }
 
+  if (typeof stack !== 'string') stack = 'Unexpected stack: ' + stack
+  if (typeof message !== 'string') message = 'Unexpected message: ' + message
+
+  // Remove the first part of each file path in the stack trace.
+  // - Privacy: remove personal info like C:\Users\<full name>
+  // - Aggregation: this lets us find which stacktraces occur often
+  stack = stack.replace(/\(.*app.asar/g, '(...')
+
   // We need to POST the telemetry object, make sure it stays < 100kb
   if (telemetry.uncaughtErrors.length > 20) return
   if (message.length > 1000) message = message.substring(0, 1000)
   if (stack.length > 1000) stack = stack.substring(0, 1000)
 
-  telemetry.uncaughtErrors.push({process: procName, message, stack})
+  // Log the app version *at the time of the error*
+  var version = config.APP_VERSION
+
+  telemetry.uncaughtErrors.push({process: procName, message, stack, version})
+}
+
+// Turns a DOM element into a string, eg "DIV.my-class.visible"
+function getElemString (elem) {
+  var ret = elem.tagName
+  try {
+    ret += '.' + Array.from(elem.classList).join('.')
+  } catch (e) {}
+  return ret
 }
 
 // The user pressed play. It either worked, timed out, or showed the

src/renderer/lib/torrent-player.js

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

src/renderer/main.js

@@ -5,17 +5,21 @@ crashReporter.init()
 
 const dragDrop = require('drag-drop')
 const electron = require('electron')
+const fs = require('fs')
 const React = require('react')
 const ReactDOM = require('react-dom')
-const fs = require('fs')
 
 const config = require('../config')
-const App = require('./views/app')
 const telemetry = require('./lib/telemetry')
 const sound = require('./lib/sound')
 const State = require('./lib/state')
 const TorrentPlayer = require('./lib/torrent-player')
 
+// Required by Material UI -- adds `onTouchTap` event
+require('react-tap-event-plugin')()
+
+const App = require('./pages/App')
+
 const MediaController = require('./controllers/media-controller')
 const UpdateController = require('./controllers/update-controller')
 const PrefsController = require('./controllers/prefs-controller')
@@ -112,7 +116,8 @@ function onState (err, _state) {
 
   // Log uncaught JS errors
   window.addEventListener('error',
-    (e) => telemetry.logUncaughtError('window', e.error || e.target), true)
+    (e) => telemetry.logUncaughtError('window', e),
+    true /* capture */)
 
   // Done! Ideally we want to get here < 500ms after the user clicks the app
   sound.play('STARTUP')
@@ -153,7 +158,7 @@ function updateElectron () {
     state.prev.title = state.window.title
     ipcRenderer.send('setTitle', state.window.title)
   }
-  if (state.dock.progress !== state.prev.progress) {
+  if (state.dock.progress.toFixed(2) !== state.prev.progress.toFixed(2)) {
     state.prev.progress = state.dock.progress
     ipcRenderer.send('setProgress', state.dock.progress)
   }
@@ -171,7 +176,6 @@ const dispatchHandlers = {
 
   'addTorrent': (torrentId) => controllers.torrentList.addTorrent(torrentId),
   'showCreateTorrent': (paths) => controllers.torrentList.showCreateTorrent(paths),
-  'toggleCreateTorrentAdvanced': () => controllers.torrentList.toggleCreateTorrentAdvanced(),
   'createTorrent': (options) => controllers.torrentList.createTorrent(options),
   'toggleTorrent': (infoHash) => controllers.torrentList.toggleTorrent(infoHash),
   'toggleTorrentFile': (infoHash, index) => controllers.torrentList.toggleTorrentFile(infoHash, index),

src/renderer/pages/App.js

@@ -1,30 +1,39 @@
+const colors = require('material-ui/styles/colors')
 const React = require('react')
 
-const Header = require('./header')
+const darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme').default
+const getMuiTheme = require('material-ui/styles/getMuiTheme').default
+const MuiThemeProvider = require('material-ui/styles/MuiThemeProvider').default
+
+const Header = require('../components/header')
 
 const Views = {
-  'home': require('./torrent-list'),
-  'player': require('./player'),
-  'create-torrent': require('./create-torrent'),
-  'preferences': require('./preferences')
+  'home': require('./TorrentListPage'),
+  'player': require('./PlayerPage'),
+  'create-torrent': require('./CreateTorrentPage'),
+  'preferences': require('./PreferencesPage')
 }
 
 const Modals = {
-  'open-torrent-address-modal': require('./open-torrent-address-modal'),
-  'remove-torrent-modal': require('./remove-torrent-modal'),
-  'update-available-modal': require('./update-available-modal'),
-  'unsupported-media-modal': require('./unsupported-media-modal')
+  'open-torrent-address-modal': require('../components/open-torrent-address-modal'),
+  'remove-torrent-modal': require('../components/remove-torrent-modal'),
+  'update-available-modal': require('../components/update-available-modal'),
+  'unsupported-media-modal': require('../components/unsupported-media-modal')
 }
 
-module.exports = class App extends React.Component {
-
-  constructor (props) {
-    super(props)
-    this.state = props.state
-  }
+darkBaseTheme.fontFamily = process.platform === 'win32'
+  ? '"Segoe UI", sans-serif'
+  : 'BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif'
+darkBaseTheme.palette.primary1Color = colors.cyan500
+darkBaseTheme.palette.primary2Color = colors.cyan500
+darkBaseTheme.palette.primary3Color = colors.grey600
+darkBaseTheme.palette.accent1Color = colors.redA200
+darkBaseTheme.palette.accent2Color = colors.redA400
+darkBaseTheme.palette.accent3Color = colors.redA100
 
+class App extends React.Component {
   render () {
-    var state = this.state
+    var state = this.props.state
 
     // Hide player controls while playing video, if the mouse stays still for a while
     // Never hide the controls when:
@@ -47,20 +56,23 @@ module.exports = class App extends React.Component {
     if (hideControls) cls.push('hide-video-controls')
 
     var vdom = (
-      <div className={'app ' + cls.join(' ')}>
-        <Header state={state} />
-        {this.getErrorPopover()}
-        <div key='content' className='content'>{this.getView()}</div>
-        {this.getModal()}
-      </div>
+      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
+        <div className={'app ' + cls.join(' ')}>
+          <Header state={state} />
+          {this.getErrorPopover()}
+          <div key='content' className='content'>{this.getView()}</div>
+          {this.getModal()}
+        </div>
+      </MuiThemeProvider>
     )
 
     return vdom
   }
 
   getErrorPopover () {
+    var state = this.props.state
     var now = new Date().getTime()
-    var recentErrors = this.state.errors.filter((x) => now - x.time < 5000)
+    var recentErrors = state.errors.filter((x) => now - x.time < 5000)
     var hasErrors = recentErrors.length > 0
 
     var errorElems = recentErrors.map(function (error, i) {
@@ -76,7 +88,7 @@ module.exports = class App extends React.Component {
   }
 
   getModal () {
-    var state = this.state
+    var state = this.props.state
     if (!state.modal) return
     var ModalContents = Modals[state.modal.id]
     return (
@@ -90,8 +102,10 @@ module.exports = class App extends React.Component {
   }
 
   getView () {
-    var state = this.state
+    var state = this.props.state
     var View = Views[state.location.url()]
     return (<View state={state} />)
   }
 }
+
+module.exports = App

src/renderer/pages/CreateTorrentPage.js

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

src/renderer/pages/PlayerPage.js

@@ -14,13 +14,14 @@ module.exports = class Player extends React.Component {
     // If the video is on Chromecast or Airplay, show a title screen instead
     var state = this.props.state
     var showVideo = state.playing.location === 'local'
+    var showControls = state.playing.location !== 'external'
     return (
       <div
         className='player'
         onWheel={handleVolumeWheel}
         onMouseMove={dispatcher('mediaMouseMoved')}>
         {showVideo ? renderMedia(state) : renderCastScreen(state)}
-        {renderPlayerControls(state)}
+        {showControls ? renderPlayerControls(state) : null}
       </div>
     )
   }
@@ -607,7 +608,7 @@ function cssBackgroundImagePoster (state) {
   var torrentSummary = state.getPlayingTorrentSummary()
   var posterPath = TorrentSummary.getPosterPath(torrentSummary)
   if (!posterPath) return ''
-  return cssBackgroundImageDarkGradient() + `, url(${posterPath})`
+  return cssBackgroundImageDarkGradient() + `, url('${posterPath}')`
 }
 
 function cssBackgroundImageDarkGradient () {

src/renderer/pages/PreferencesPage.js

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

src/renderer/pages/TorrentListPage.js

@@ -184,42 +184,43 @@ module.exports = class TorrentList extends React.Component {
       downloadTooltip = 'Click to start torrenting.'
     }
 
-    // Do we have a saved position? Show it using a radial progress bar on top
-    // of the play button, unless already showing a spinner there:
-    var positionElem
-    var willShowSpinner = torrentSummary.playStatus === 'requested'
-    var defaultFile = torrentSummary.files &&
-      torrentSummary.files[torrentSummary.defaultPlayFileIndex]
-    if (defaultFile && defaultFile.currentTime && !willShowSpinner) {
-      var fraction = defaultFile.currentTime / defaultFile.duration
-      positionElem = this.renderRadialProgressBar(fraction, 'radial-progress-large')
-      playClass = 'resume-position'
-    }
-
-    // Only show the play button for torrents that contain playable media
-    var playButton, downloadButton
-    var noErrors = !torrentSummary.error
-    if (noErrors && TorrentPlayer.isPlayableTorrentSummary(torrentSummary)) {
-      playButton = (
-        <i
-          key='play-button'
-          title={playTooltip}
-          className={'button-round icon play ' + playClass}
-          onClick={dispatcher('playFile', infoHash)}>
-          {playIcon}
-        </i>
-      )
-    }
-    if (noErrors) {
+    // Only show the play/dowload buttons for torrents that contain playable media
+    var playButton, downloadButton, positionElem
+    if (!torrentSummary.error) {
       downloadButton = (
         <i
           key='download-button'
           className={'button-round icon download ' + torrentSummary.status}
           title={downloadTooltip}
-          onClick={dispatcher('toggleTorrent', infoHash)}>
+          onClick={dispatcher('toggleTorrent', infoHash)}
+        >
           {downloadIcon}
         </i>
       )
+
+      // Do we have a saved position? Show it using a radial progress bar on top
+      // of the play button, unless already showing a spinner there:
+      var willShowSpinner = torrentSummary.playStatus === 'requested'
+      var defaultFile = torrentSummary.files &&
+        torrentSummary.files[torrentSummary.defaultPlayFileIndex]
+      if (defaultFile && defaultFile.currentTime && !willShowSpinner) {
+        var fraction = defaultFile.currentTime / defaultFile.duration
+        positionElem = this.renderRadialProgressBar(fraction, 'radial-progress-large')
+        playClass = 'resume-position'
+      }
+
+      if (TorrentPlayer.isPlayableTorrentSummary(torrentSummary)) {
+        playButton = (
+          <i
+            key='play-button'
+            title={playTooltip}
+            className={'button-round icon play ' + playClass}
+            onClick={dispatcher('playFile', infoHash)}
+          >
+            {playIcon}
+          </i>
+        )
+      }
     }
 
     return (
@@ -322,8 +323,11 @@ module.exports = class TorrentList extends React.Component {
       handleClick = dispatcher('playFile', infoHash, index)
     } else {
       icon = 'description' /* file icon, opens in OS default app */
-      handleClick = dispatcher('openItem', infoHash, index)
+      handleClick = isDone
+        ? dispatcher('openItem', infoHash, index)
+        : (e) => e.stopPropagation() // noop if file is not ready
     }
+    // TODO: add a css 'disabled' class to indicate that a file cannot be opened/streamed
     var rowClass = ''
     if (!isSelected) rowClass = 'disabled' // File deselected, not being torrented
     if (!isDone && !isPlayable) rowClass = 'disabled' // Can't open yet, can't stream

src/renderer/views/create-torrent.js

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

src/renderer/views/preferences.js

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

src/renderer/webtorrent.js

@@ -2,11 +2,11 @@
 // process from the main window.
 console.time('init')
 
+var crypto = require('crypto')
 var deepEqual = require('deep-equal')
 var defaultAnnounceList = require('create-torrent').announceList
 var electron = require('electron')
 var fs = require('fs-extra')
-var hat = require('hat')
 var musicmetadata = require('musicmetadata')
 var networkAddress = require('network-address')
 var path = require('path')
@@ -56,7 +56,7 @@ var VERSION_PREFIX = '-WD' + VERSION_STR + '-'
 // Connect to the WebTorrent and BitTorrent networks. WebTorrent Desktop is a hybrid
 // client, as explained here: https://webtorrent.io/faq
 var client = window.client = new WebTorrent({
-  peerId: Buffer.from(VERSION_PREFIX + hat(48))
+  peerId: Buffer.from(VERSION_PREFIX + crypto.randomBytes(6).toString('hex'))
 })
 
 // WebTorrent-to-HTTP streaming sever
@@ -97,6 +97,7 @@ function init () {
     true)
 
   setInterval(updateTorrentProgress, 1000)
+  console.timeEnd('init')
 }
 
 // Starts a given TorrentID, which can be an infohash, magnet URI, etc. Returns WebTorrent object

static/main.css

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

static/main.html

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