changelog

Talked about it w @feross, the new one sounds kind of like an error or warning

AUTHORS.md

@@ -33,5 +33,6 @@
 - Noam Okman (noamokman@gmail.com)
 - PurgingPanda (t3ch0wn3r@gmail.com)
 - Kai Curtis (morecode@kcurtis.com)
+- Omri Litov (omrilitov@gmail.com)
 
 #### Generated by bin/update-authors.sh.

CHANGELOG.md

@@ -1,5 +1,23 @@
 # WebTorrent Desktop Version History
 
+## v0.17.0 - 2016-09-23
+
+### Added
+- Remember window size and position
+
+### Changed
+- Torrent list redesign
+- Quieter, more subtle sounds
+- Got rid of the play button spinner, now goes to the player immediately
+- Faster startup
+
+### Fixed
+- Fix bug where playback rate could go negative
+- Don't hide header when moused over player controls
+- Fix Delete Data File on Windows
+- Fix a sad, sad bug that resulted in 100+ MB config files
+- Fix app DMG background image
+
 ## v0.16.0 - 2016-09-18
 
 ### Added
@@ -7,6 +25,9 @@
   - Existing 32-bit users will update to 64-bit automatically in next release
   - 64-bit reduces likelihood of out-of-memory errors by increasing the address space
 
+### Fixed
+- Mac: Fix background image on .DMG
+
 ## v0.15.0 - 2016-09-16
 
 ### Added

README.md

@@ -76,7 +76,11 @@ The integration tests use Spectron and Tape. They click through the app, taking
 * Small UI changes will break a few tests, but the fix is as easy as deleting the offending screenshots and running the tests, which will recreate them with the new look.
 * The resulting Github PR will then show, pixel by pixel, the exact UI changes that were made! Ses https://github.com/blog/817-behold-image-view-modes
 
-For MacOS, you'll need a Retina screen for the integration tests to pass.
+For MacOS, you'll need a Retina screen for the integration tests to pass. Your screen should have the same resolution as a 2016 12" Macbook.
+
+For Windows, you'll need Windows 10 with a 1366x768 screen.
+
+When running integration tests, keep the mouse on the edge of the screen and don't touch the mouse or keyboard while the tests are running.
 
 ### Package the app
 

bin/package.js

@@ -39,9 +39,9 @@ function build () {
   rimraf.sync(DIST_PATH)
   rimraf.sync(BUILD_PATH)
 
-  console.log('Babel: Building JSX...')
+  console.log('Build: Transpiling to ES5...')
   cp.execSync('npm run build', { NODE_ENV: 'production', stdio: 'inherit' })
-  console.log('Babel: Built JSX.')
+  console.log('Build: Transpiled to ES5.')
 
   var platform = argv._[0]
   if (platform === 'darwin') {
@@ -73,11 +73,11 @@ var all = {
   // Package the application's source code into an archive, using Electron's archive
   // format. Mitigates issues around long path names on Windows and slightly speeds up
   // require().
-  asar: true,
+  asar: {
-
+    // A glob expression, that unpacks the files with matching names to the
-  // A glob expression, that unpacks the files with matching names to the
+    // "app.asar.unpacked" directory.
-  // "app.asar.unpacked" directory.
+    unpack: 'WebTorrent*'
-  'asar-unpack': 'WebTorrent*',
+  },
 
   // The build version of the application. Maps to the FileVersion metadata property on
   // Windows, and CFBundleVersion on Mac. Note: Windows requires the build version to
@@ -137,7 +137,7 @@ var win32 = {
   arch: 'all',
 
   // Object hash of application metadata to embed into the executable (Windows only)
-  'version-string': {
+  win32metadata: {
 
     // Company that produced the file.
     CompanyName: config.APP_NAME,
@@ -462,18 +462,18 @@ function buildWin32 (cb) {
 
           // WebTorrent-vX.X.X-full.nupkg -> WebTorrent-vX.X.X-ia32-full.nupkg
           fs.renameSync(
-            path.join(DIST_PATH, `${BUILD_NAME}-full.nupkg`),
+            path.join(DIST_PATH, `${config.APP_NAME}-${config.APP_VERSION}-full.nupkg`),
-            path.join(DIST_PATH, `${BUILD_NAME}-ia32-full.nupkg`)
+            path.join(DIST_PATH, `${config.APP_NAME}-${config.APP_VERSION}-ia32-full.nupkg`)
           )
 
           // Change file name inside RELEASES-ia32 to match renamed file
           var relContent = fs.readFileSync(relPath, 'utf8')
-          var relContent32 = relContent.replace(/full\.nupkg$/, '-ia32-full.nupkg')
+          var relContent32 = relContent.replace('full.nupkg', 'ia32-full.nupkg')
           fs.writeFileSync(relPath, relContent32)
 
           if (relContent === relContent32) {
             // Sanity check
-            throw new Error('Fixing RELEASE-ia32 failed. Replacement did not modify the file.')
+            throw new Error('Fixing RELEASES-ia32 failed. Replacement did not modify the file.')
           }
 
           console.log('Windows: Renamed ia32 installer files.')

package.json

@@ -1,7 +1,7 @@
 {
   "name": "webtorrent-desktop",
   "description": "WebTorrent, the streaming torrent client. For Mac, Windows, and Linux.",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "author": {
     "name": "WebTorrent, LLC",
     "email": "feross@webtorrent.io",
@@ -16,15 +16,17 @@
   "dependencies": {
     "airplayer": "^2.0.0",
     "application-config": "^1.0.0",
+    "arch": "^2.0.0",
     "auto-launch": "^4.0.1",
     "bitfield": "^1.0.2",
     "capture-frame": "^1.0.0",
     "chromecasts": "^1.8.0",
     "create-torrent": "^3.24.5",
+    "debounce": "^1.0.0",
     "deep-equal": "^1.0.1",
     "dlnacasts": "^0.1.0",
     "drag-drop": "^2.12.1",
-    "electron": "1.4.0",
+    "electron": "1.4.1",
     "es6-error": "^3.0.1",
     "fs-extra": "^0.30.0",
     "iso-639-1": "^1.2.1",
@@ -49,15 +51,11 @@
     "zero-fill": "^2.2.3"
   },
   "devDependencies": {
-    "babel-cli": "^6.11.4",
+    "buble": "^0.14.0",
-    "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-packager": "^8.0.0",
     "electron-winstaller": "^2.3.0",
     "gh-release": "^2.0.3",
     "minimist": "^1.2.0",
@@ -99,14 +97,14 @@
     "url": "git://github.com/feross/webtorrent-desktop.git"
   },
   "scripts": {
-    "build": "babel --quiet src --out-dir build",
+    "build": "buble src --output build",
     "clean": "node ./bin/clean.js",
     "open-config": "node ./bin/open-config.js",
     "package": "node ./bin/package.js",
     "prepublish": "npm run build",
     "start": "npm run build && electron .",
     "integration-test": "npm run build && node ./test",
-    "test": "standard && depcheck --ignores=babel-cli,nodemon,gh-release --ignore-dirs=build,dist && node ./bin/extra-lint.js",
+    "test": "standard && depcheck --ignores=buble,nodemon,gh-release --ignore-dirs=build,dist && node ./bin/extra-lint.js",
     "gh-release": "gh-release",
     "update-authors": "./bin/update-authors.sh",
     "watch": "nodemon --exec \"npm run start\" --ext js,pug,css"

src/.babelrc

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

src/config.js

@@ -2,6 +2,7 @@ const appConfig = require('application-config')('WebTorrent')
 const fs = require('fs')
 const path = require('path')
 const electron = require('electron')
+const arch = require('arch')
 
 const APP_NAME = 'WebTorrent'
 const APP_TEAM = 'WebTorrent, LLC'
@@ -9,11 +10,14 @@ const APP_VERSION = require('../package.json').version
 
 const IS_TEST = isTest()
 const PORTABLE_PATH = IS_TEST
-  ? path.join(__dirname, '../test/tempTestData')
+  ? path.join(process.platform === 'win32' ? 'C:\\Windows\\Temp' : '/tmp', 'WebTorrentTest')
   : path.join(path.dirname(process.execPath), 'Portable Settings')
 const IS_PORTABLE = isPortable()
 const IS_PRODUCTION = isProduction()
 
+const UI_HEADER_HEIGHT = 38
+const UI_TORRENT_HEIGHT = 100
+
 console.log('Production: %s portable: %s test: %s',
   IS_PRODUCTION, IS_PORTABLE, IS_TEST)
 if (IS_PORTABLE) console.log('Portable path: %s', PORTABLE_PATH)
@@ -81,7 +85,7 @@ module.exports = {
   IS_PRODUCTION: IS_PRODUCTION,
   IS_TEST: IS_TEST,
 
-  OS_SYSARCH: is64BitOperatingSystem() ? 'x64' : 'ia32',
+  OS_SYSARCH: arch() === 'x64' ? 'x64' : 'ia32',
 
   POSTER_PATH: path.join(getConfigPath(), 'Posters'),
   ROOT_PATH: path.join(__dirname, '..'),
@@ -92,8 +96,15 @@ module.exports = {
   WINDOW_MAIN: 'file://' + path.join(__dirname, '..', 'static', 'main.html'),
   WINDOW_WEBTORRENT: 'file://' + path.join(__dirname, '..', 'static', 'webtorrent.html'),
 
-  WINDOW_MIN_HEIGHT: 38 + (120 * 2), // header height + 2 torrents
+  WINDOW_INITIAL_BOUNDS: {
-  WINDOW_MIN_WIDTH: 425
+    width: 500,
+    height: UI_HEADER_HEIGHT + (UI_TORRENT_HEIGHT * 6) // header + 6 torrents
+  },
+  WINDOW_MIN_HEIGHT: UI_HEADER_HEIGHT + (UI_TORRENT_HEIGHT * 2), // header + 2 torrents
+  WINDOW_MIN_WIDTH: 425,
+
+  UI_HEADER_HEIGHT: UI_HEADER_HEIGHT,
+  UI_TORRENT_HEIGHT: UI_TORRENT_HEIGHT
 }
 
 function getConfigPath () {
@@ -151,32 +162,3 @@ function isProduction () {
     return !/\/electron$/.test(process.execPath)
   }
 }
-
-/**
- * Returns the operating system's CPU architecture. This is different than
- * `process.arch` which returns the architecture the binary was compiled for.
- *
- * On Windows, the most reliable way to detect a 64-bit OS from within a 32-bit
- * app is based on the presence of a WOW64 file: %SystemRoot%\SysNative.
- *
- * Background: https://twitter.com/feross/status/776949077208510464
- */
-function is64BitOperatingSystem () {
-  // This is a 64-bit binary, so the OS clearly supports 64-bit apps
-  if (process.arch === 'x64') return true
-
-  let useEnv = false
-  try {
-    useEnv = !!(process.env.SYSTEMROOT && fs.statSync(process.env.SYSTEMROOT))
-  } catch (err) {}
-
-  let sysRoot = useEnv ? process.env.SYSTEMROOT : 'C:\\Windows'
-
-  // If %SystemRoot%\SysNative exists, we are in a WOW64 FS Redirected application.
-  let isWOW64 = false
-  try {
-    isWOW64 = !!fs.statSync(path.join(sysRoot, 'sysnative'))
-  } catch (err) {}
-
-  return isWOW64
-}

src/main/index.js

@@ -2,20 +2,15 @@ console.time('init')
 
 const electron = require('electron')
 const app = electron.app
-const ipcMain = electron.ipcMain
 
-const announcement = require('./announcement')
+const parallel = require('run-parallel')
+
 const config = require('../config')
 const crashReporter = require('../crash-reporter')
-const dialog = require('./dialog')
-const dock = require('./dock')
 const ipc = require('./ipc')
 const log = require('./log')
 const menu = require('./menu')
-const squirrelWin32 = require('./squirrel-win32')
+const State = require('../renderer/lib/state')
-const tray = require('./tray')
-const updater = require('./updater')
-const userTasks = require('./user-tasks')
 const windows = require('./windows')
 
 let shouldQuit = false
@@ -33,6 +28,7 @@ if (config.IS_PRODUCTION) {
 }
 
 if (process.platform === 'win32') {
+  const squirrelWin32 = require('./squirrel-win32')
   shouldQuit = squirrelWin32.handleEvent(argv[0])
   argv = argv.filter((arg) => !arg.includes('--squirrel'))
 }
@@ -55,24 +51,23 @@ function init () {
     app.setPath('userData', config.CONFIG_PATH)
   }
 
+  const ipcMain = electron.ipcMain
+
   let isReady = false // app ready, windows can be created
   app.ipcReady = false // main window has finished loading and IPC is ready
   app.isQuitting = false
 
-  // Open handlers must be added as early as possible
+  parallel({
-  app.on('open-file', onOpen)
+    appReady: (cb) => app.on('ready', () => cb(null)),
-  app.on('open-url', onOpen)
+    state: (cb) => State.load(cb)
+  }, onReady)
 
-  ipc.init()
+  function onReady (err, results) {
+    if (err) throw err
 
-  app.once('will-finish-launching', function () {
-    crashReporter.init()
-  })
-
-  app.on('ready', function () {
     isReady = true
 
-    windows.main.init({hidden: hidden})
+    windows.main.init(results.state, {hidden: hidden})
     windows.webtorrent.init()
     menu.init()
 
@@ -85,6 +80,15 @@ function init () {
       const error = {message: err.message, stack: err.stack}
       windows.main.dispatch('uncaughtError', 'main', error)
     })
+  }
+
+  app.on('open-file', onOpen)
+  app.on('open-url', onOpen)
+
+  ipc.init()
+
+  app.once('will-finish-launching', function () {
+    crashReporter.init()
   })
 
   app.once('ipcReady', function () {
@@ -98,12 +102,12 @@ function init () {
 
     app.isQuitting = true
     e.preventDefault()
-    windows.main.dispatch('saveState') // try to save state on exit
+    windows.main.dispatch('stateSaveImmediate') // try to save state on exit
-    ipcMain.once('savedState', () => app.quit())
+    ipcMain.once('stateSaved', () => app.quit())
     setTimeout(() => {
       console.error('Saving state took too long. Quitting.')
       app.quit()
-    }, 2000) // quit after 2 secs, at most
+    }, 4000) // quit after 4 secs, at most
   })
 
   app.on('activate', function () {
@@ -112,6 +116,12 @@ function init () {
 }
 
 function delayedInit () {
+  const announcement = require('./announcement')
+  const dock = require('./dock')
+  const tray = require('./tray')
+  const updater = require('./updater')
+  const userTasks = require('./user-tasks')
+
   announcement.init()
   dock.init()
   tray.init()
@@ -160,12 +170,16 @@ function sliceArgv (argv) {
 function processArgv (argv) {
   let torrentIds = []
   argv.forEach(function (arg) {
-    if (arg === '-n') {
+    if (arg === '-n' || arg === '-o' || arg === '-u') {
-      dialog.openSeedDirectory()
+      // Critical path: Only load the 'dialog' package if it is needed
-    } else if (arg === '-o') {
+      const dialog = require('./dialog')
-      dialog.openTorrentFile()
+      if (arg === '-n') {
-    } else if (arg === '-u') {
+        dialog.openSeedDirectory()
-      dialog.openTorrentAddress()
+      } else if (arg === '-o') {
+        dialog.openTorrentFile()
+      } else if (arg === '-u') {
+        dialog.openTorrentAddress()
+      }
     } else if (arg === '--hidden') {
       // Ignore hidden argument, already being handled
     } else if (arg.startsWith('-psn')) {

src/main/ipc.js

@@ -6,18 +6,9 @@ const electron = require('electron')
 
 const app = electron.app
 
-const dialog = require('./dialog')
-const dock = require('./dock')
-const handlers = require('./handlers')
 const log = require('./log')
 const menu = require('./menu')
-const powerSaveBlocker = require('./power-save-blocker')
-const shell = require('./shell')
-const shortcuts = require('./shortcuts')
-const externalPlayer = require('./external-player')
 const windows = require('./windows')
-const thumbar = require('./thumbar')
-const startup = require('./startup')
 
 // Messages from the main process, to be sent once the WebTorrent process starts
 const messageQueueMainToWebTorrent = []
@@ -44,21 +35,37 @@ function init () {
    * Dialog
    */
 
-  ipc.on('openTorrentFile', () => dialog.openTorrentFile())
+  ipc.on('openTorrentFile', () => {
-  ipc.on('openFiles', () => dialog.openFiles())
+    const dialog = require('./dialog')
+    dialog.openTorrentFile()
+  })
+  ipc.on('openFiles', () => {
+    const dialog = require('./dialog')
+    dialog.openFiles()
+  })
 
   /**
    * Dock
    */
 
-  ipc.on('setBadge', (e, ...args) => dock.setBadge(...args))
+  ipc.on('setBadge', (e, ...args) => {
-  ipc.on('downloadFinished', (e, ...args) => dock.downloadFinished(...args))
+    const dock = require('./dock')
+    dock.setBadge(...args)
+  })
+  ipc.on('downloadFinished', (e, ...args) => {
+    const dock = require('./dock')
+    dock.downloadFinished(...args)
+  })
 
   /**
    * Events
    */
 
   ipc.on('onPlayerOpen', function () {
+    const powerSaveBlocker = require('./power-save-blocker')
+    const shortcuts = require('./shortcuts')
+    const thumbar = require('./thumbar')
+
     menu.togglePlaybackControls(true)
     powerSaveBlocker.enable()
     shortcuts.enable()
@@ -66,11 +73,17 @@ function init () {
   })
 
   ipc.on('onPlayerUpdate', function (e, ...args) {
+    const thumbar = require('./thumbar')
+
     menu.onPlayerUpdate(...args)
     thumbar.onPlayerUpdate(...args)
   })
 
   ipc.on('onPlayerClose', function () {
+    const powerSaveBlocker = require('./power-save-blocker')
+    const shortcuts = require('./shortcuts')
+    const thumbar = require('./thumbar')
+
     menu.togglePlaybackControls(false)
     powerSaveBlocker.disable()
     shortcuts.disable()
@@ -78,11 +91,17 @@ function init () {
   })
 
   ipc.on('onPlayerPlay', function () {
+    const powerSaveBlocker = require('./power-save-blocker')
+    const thumbar = require('./thumbar')
+
     powerSaveBlocker.enable()
     thumbar.onPlayerPlay()
   })
 
   ipc.on('onPlayerPause', function () {
+    const powerSaveBlocker = require('./power-save-blocker')
+    const thumbar = require('./thumbar')
+
     powerSaveBlocker.disable()
     thumbar.onPlayerPause()
   })
@@ -91,15 +110,26 @@ function init () {
    * Shell
    */
 
-  ipc.on('openItem', (e, ...args) => shell.openItem(...args))
+  ipc.on('openItem', (e, ...args) => {
-  ipc.on('showItemInFolder', (e, ...args) => shell.showItemInFolder(...args))
+    const shell = require('./shell')
-  ipc.on('moveItemToTrash', (e, ...args) => shell.moveItemToTrash(...args))
+    shell.openItem(...args)
+  })
+  ipc.on('showItemInFolder', (e, ...args) => {
+    const shell = require('./shell')
+    shell.showItemInFolder(...args)
+  })
+  ipc.on('moveItemToTrash', (e, ...args) => {
+    const shell = require('./shell')
+    shell.moveItemToTrash(...args)
+  })
 
   /**
    * File handlers
    */
 
   ipc.on('setDefaultFileHandler', (e, flag) => {
+    const handlers = require('./handlers')
+
     if (flag) handlers.install()
     else handlers.uninstall()
   })
@@ -109,6 +139,8 @@ function init () {
    */
 
   ipc.on('setStartup', (e, flag) => {
+    const startup = require('./startup')
+
     if (flag) startup.install()
     else startup.uninstall()
   })
@@ -132,18 +164,26 @@ function init () {
    */
 
   ipc.on('checkForExternalPlayer', function (e, path) {
+    const externalPlayer = require('./external-player')
+
     externalPlayer.checkInstall(path, function (isInstalled) {
       windows.main.send('checkForExternalPlayer', isInstalled)
     })
   })
 
   ipc.on('openExternalPlayer', (e, ...args) => {
+    const externalPlayer = require('./external-player')
+    const thumbar = require('./thumbar')
+
     menu.togglePlaybackControls(false)
     thumbar.disable()
     externalPlayer.spawn(...args)
   })
 
-  ipc.on('quitExternalPlayer', () => externalPlayer.kill())
+  ipc.on('quitExternalPlayer', () => {
+    const externalPlayer = require('./external-player')
+    externalPlayer.kill()
+  })
 
   /**
    * Message passing

src/main/menu.js

@@ -13,8 +13,6 @@ const electron = require('electron')
 const app = electron.app
 
 const config = require('../config')
-const dialog = require('./dialog')
-const shell = require('./shell')
 const windows = require('./windows')
 
 let menu = null
@@ -90,17 +88,26 @@ function getMenuTemplate () {
             ? 'Create New Torrent...'
             : 'Create New Torrent from Folder...',
           accelerator: 'CmdOrCtrl+N',
-          click: () => dialog.openSeedDirectory()
+          click: () => {
+            const dialog = require('./dialog')
+            dialog.openSeedDirectory()
+          }
         },
         {
           label: 'Open Torrent File...',
           accelerator: 'CmdOrCtrl+O',
-          click: () => dialog.openTorrentFile()
+          click: () => {
+            const dialog = require('./dialog')
+            dialog.openTorrentFile()
+          }
         },
         {
           label: 'Open Torrent Address...',
           accelerator: 'CmdOrCtrl+U',
-          click: () => dialog.openTorrentAddress()
+          click: () => {
+            const dialog = require('./dialog')
+            dialog.openTorrentAddress()
+          }
         },
         {
           type: 'separator'
@@ -277,18 +284,27 @@ function getMenuTemplate () {
       submenu: [
         {
           label: 'Learn more about ' + config.APP_NAME,
-          click: () => shell.openExternal(config.HOME_PAGE_URL)
+          click: () => {
+            const shell = require('./shell')
+            shell.openExternal(config.HOME_PAGE_URL)
+          }
         },
         {
           label: 'Contribute on GitHub',
-          click: () => shell.openExternal(config.GITHUB_URL)
+          click: () => {
+            const shell = require('./shell')
+            shell.openExternal(config.GITHUB_URL)
+          }
         },
         {
           type: 'separator'
         },
         {
           label: 'Report an Issue...',
-          click: () => shell.openExternal(config.GITHUB_URL_ISSUES)
+          click: () => {
+            const shell = require('./shell')
+            shell.openExternal(config.GITHUB_URL_ISSUES)
+          }
         }
       ]
     }
@@ -361,7 +377,10 @@ function getMenuTemplate () {
     // File menu (Windows, Linux)
     template[0].submenu.unshift({
       label: 'Create New Torrent from File...',
-      click: () => dialog.openSeedFile()
+      click: () => {
+        const dialog = require('./dialog')
+        dialog.openSeedFile()
+      }
     })
 
     // Edit menu (Windows, Linux)

src/main/windows/about.js

@@ -32,7 +32,7 @@ function init () {
   // No menu on the About window
   win.setMenu(null)
 
-  win.webContents.once('did-finish-load', function () {
+  win.once('ready-to-show', function () {
     win.show()
   })
 

src/main/windows/main.js

@@ -21,15 +21,14 @@ const app = electron.app
 const config = require('../../config')
 const log = require('../log')
 const menu = require('../menu')
-const tray = require('../tray')
 
-const HEADER_HEIGHT = 38
+function init (state, options) {
-const TORRENT_HEIGHT = 100
-
-function init (options) {
   if (main.win) {
     return main.win.show()
   }
+
+  const initialBounds = Object.assign(config.WINDOW_INITIAL_BOUNDS, state.saved.bounds)
+
   const win = main.win = new electron.BrowserWindow({
     backgroundColor: '#282828',
     darkTheme: true, // Forces dark theme (GTK+3)
@@ -39,14 +38,20 @@ function init (options) {
     title: config.APP_WINDOW_TITLE,
     titleBarStyle: 'hidden-inset', // Hide title bar (Mac)
     useContentSize: true, // Specify web page size without OS chrome
-    width: 500,
+    show: false,
-    height: HEADER_HEIGHT + (TORRENT_HEIGHT * 6), // header height + 5 torrents
+    width: initialBounds.width,
-    show: !options.hidden
+    height: initialBounds.height,
+    x: initialBounds.x,
+    y: initialBounds.y
+  })
+
+  win.once('ready-to-show', function () {
+    if (!options.hidden) win.show()
   })
 
   win.loadURL(config.WINDOW_MAIN)
 
-  if (win.setSheetOffset) win.setSheetOffset(HEADER_HEIGHT)
+  if (win.setSheetOffset) win.setSheetOffset(config.UI_HEADER_HEIGHT)
 
   win.webContents.on('dom-ready', function () {
     menu.onToggleFullScreen(main.win.isFullScreen())
@@ -70,7 +75,17 @@ function init (options) {
     win.setMenuBarVisibility(true)
   })
 
+  win.on('move', function (e) {
+    send('windowBoundsChanged', e.sender.getBounds())
+  })
+
+  win.on('resize', function (e) {
+    send('windowBoundsChanged', e.sender.getBounds())
+  })
+
   win.on('close', function (e) {
+    const tray = require('../tray')
+
     if (process.platform !== 'darwin' && !tray.hasTray()) {
       app.quit()
     } else if (!app.isQuitting) {
@@ -211,11 +226,15 @@ function toggleFullScreen (flag) {
 }
 
 function onWindowBlur () {
+  const tray = require('../tray')
+
   menu.setWindowFocus(false)
   tray.setWindowFocus(false)
 }
 
 function onWindowFocus () {
+  const tray = require('../tray')
+
   menu.setWindowFocus(true)
   tray.setWindowFocus(true)
 }

src/renderer/components/header.js

@@ -6,7 +6,10 @@ class Header extends React.Component {
   render () {
     const loc = this.props.state.location
     return (
-      <div className='header' onMouseMove={dispatcher('mediaMouseMoved')}>
+      <div className='header'
+        onMouseMove={dispatcher('mediaMouseMoved')}
+        onMouseEnter={dispatcher('mediaControlsMouseEnter')}
+        onMouseLeave={dispatcher('mediaControlsMouseLeave')}>
         {this.getTitle()}
         <div className='nav left float-left'>
           <i

src/renderer/controllers/media-controller.js

@@ -44,6 +44,16 @@ module.exports = class MediaController {
     this.state.playing.mouseStationarySince = new Date().getTime()
   }
 
+  controlsMouseEnter () {
+    this.state.playing.mouseInControls = true
+    this.state.playing.mouseStationarySince = new Date().getTime()
+  }
+
+  controlsMouseLeave () {
+    this.state.playing.mouseInControls = false
+    this.state.playing.mouseStationarySince = new Date().getTime()
+  }
+
   openExternalPlayer () {
     const state = this.state
     const mediaURL = Playlist.getCurrentLocalURL(this.state)

src/renderer/controllers/playback-controller.js

@@ -4,8 +4,7 @@ const path = require('path')
 const Cast = require('../lib/cast')
 const {dispatch} = require('../lib/dispatcher')
 const telemetry = require('../lib/telemetry')
-const {UnplayableFileError, UnplayableTorrentError,
+const {UnplayableFileError, UnplayableTorrentError} = require('../lib/errors')
-      PlaybackTimedOutError} = require('../lib/errors')
 const sound = require('../lib/sound')
 const TorrentPlayer = require('../lib/torrent-player')
 const TorrentSummary = require('../lib/torrent-summary')
@@ -153,26 +152,21 @@ module.exports = class PlaybackController {
   changePlaybackRate (direction) {
     const state = this.state
     let rate = state.playing.playbackRate
-    if (direction > 0 && rate >= 0.25 && rate < 2) {
+    if (direction > 0 && rate < 2) {
       rate += 0.25
     } else if (direction < 0 && rate > 0.25 && rate <= 2) {
       rate -= 0.25
-    } else if (direction < 0 && rate === 0.25) {
+    } else if (direction > 0 && rate >= 1 && rate < 16) {
-      // When we set playback rate at 0 in html 5, playback hangs ;(
-      rate = -1
-    } else if (direction > 0 && rate === -1) {
-      rate = 0.25
-    } else if ((direction > 0 && rate >= 1 && rate < 16) ||
-      (direction < 0 && rate > -16 && rate <= -1)) {
       rate *= 2
-    } else if ((direction < 0 && rate > 1 && rate <= 16) ||
+    } else if (direction < 0 && rate > 1 && rate <= 16) {
-      (direction > 0 && rate >= -16 && rate < -1)) {
       rate /= 2
     }
     state.playing.playbackRate = rate
     if (isCasting(state) && !Cast.setRate(rate)) {
       state.playing.playbackRate = 1
     }
+    // Wait a bit before we hide the controls and header again
+    state.playing.mouseStationarySince = new Date().getTime()
   }
 
   // Change the volume, in range [0, 1], by some amount
@@ -202,11 +196,7 @@ module.exports = class PlaybackController {
   // * The video is playing remotely on Chromecast or Airplay
   showOrHidePlayerControls () {
     const state = this.state
-    const hideControls = state.location.url() === 'player' &&
+    const hideControls = state.shouldHidePlayerControls()
-      state.playing.mouseStationarySince !== 0 &&
-      new Date().getTime() - state.playing.mouseStationarySince > 2000 &&
-      !state.playing.isPaused &&
-      state.playing.location === 'local'
 
     if (hideControls !== state.playing.hideControls) {
       state.playing.hideControls = hideControls
@@ -223,38 +213,15 @@ module.exports = class PlaybackController {
     state.playing.infoHash = torrentSummary.infoHash
 
     // update UI to show pending playback
-    if (torrentSummary.progress !== 1) sound.play('PLAY')
+    sound.play('PLAY')
-    // TODO: remove torrentSummary.playStatus
-    torrentSummary.playStatus = 'requested'
-    this.update()
 
-    const timeout = setTimeout(() => {
+    this.startServer(torrentSummary)
-      telemetry.logPlayAttempt('timeout')
+    ipcRenderer.send('onPlayerOpen')
-      // TODO: remove torrentSummary.playStatus
+    this.updatePlayer(infoHash, index, true, cb)
-      torrentSummary.playStatus = 'timeout' /* no seeders available? */
-      sound.play('ERROR')
-      cb(new PlaybackTimedOutError())
-      this.update()
-    }, 10000) /* give it a few seconds */
-
-    this.startServer(torrentSummary, () => {
-      clearTimeout(timeout)
-
-      // if we timed out (user clicked play a long time ago), don't autoplay
-      const timedOut = torrentSummary.playStatus === 'timeout'
-      delete torrentSummary.playStatus
-      if (timedOut) {
-        ipcRenderer.send('wt-stop-server')
-        return this.update()
-      }
-
-      ipcRenderer.send('onPlayerOpen')
-      this.updatePlayer(infoHash, index, true, cb)
-    })
   }
 
   // Starts WebTorrent server for media streaming
-  startServer (torrentSummary, cb) {
+  startServer (torrentSummary) {
     if (torrentSummary.status === 'paused') {
       dispatch('startTorrentingSummary', torrentSummary.torrentKey)
       ipcRenderer.once('wt-ready-' + torrentSummary.infoHash,
@@ -265,7 +232,6 @@ module.exports = class PlaybackController {
 
     function onTorrentReady () {
       ipcRenderer.send('wt-start-server', torrentSummary.infoHash)
-      ipcRenderer.once('wt-server-' + torrentSummary.infoHash, () => cb())
     }
   }
 

src/renderer/controllers/prefs-controller.js

@@ -1,4 +1,3 @@
-const State = require('../lib/state')
 const {dispatch} = require('../lib/dispatcher')
 const ipcRenderer = require('electron').ipcRenderer
 
@@ -56,7 +55,7 @@ module.exports = class PrefsController {
       ipcRenderer.send('setStartup', state.unsaved.prefs.startup)
     }
     state.saved.prefs = Object.assign(state.saved.prefs || {}, state.unsaved.prefs)
-    State.save(state)
+    dispatch('stateSaveImmediate')
     dispatch('checkDownloadPath')
   }
 }

src/renderer/controllers/torrent-controller.js

@@ -129,20 +129,20 @@ module.exports = class TorrentController {
     const torrentSummary = this.getTorrentSummary(torrentKey)
     if (!torrentSummary) throw new Error('Not saving modtimes for deleted torrent ' + torrentKey)
     torrentSummary.fileModtimes = fileModtimes
-    dispatch('saveStateThrottled')
+    dispatch('stateSave')
   }
 
   torrentFileSaved (torrentKey, torrentFileName) {
     console.log('torrent file saved %s: %s', torrentKey, torrentFileName)
     const torrentSummary = this.getTorrentSummary(torrentKey)
     torrentSummary.torrentFileName = torrentFileName
-    dispatch('saveStateThrottled')
+    dispatch('stateSave')
   }
 
   torrentPosterSaved (torrentKey, posterFileName) {
     const torrentSummary = this.getTorrentSummary(torrentKey)
     torrentSummary.posterFileName = posterFileName
-    dispatch('saveStateThrottled')
+    dispatch('stateSave')
   }
 
   torrentAudioMetadata (infoHash, index, info) {

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

@@ -4,7 +4,6 @@ const electron = require('electron')
 
 const {dispatch} = require('../lib/dispatcher')
 const {TorrentKeyNotFoundError} = require('../lib/errors')
-const State = require('../lib/state')
 const sound = require('../lib/sound')
 const TorrentSummary = require('../lib/torrent-summary')
 
@@ -159,7 +158,7 @@ module.exports = class TorrentListController {
 
       // remove torrent from saved list
       this.state.saved.torrents.splice(index, 1)
-      State.saveThrottled(this.state)
+      dispatch('stateSave')
     }
 
     // prevent user from going forward to a deleted torrent

src/renderer/controllers/update-controller.js

@@ -1,4 +1,4 @@
-const State = require('../lib/state')
+const {dispatch} = require('../lib/dispatcher')
 
 // Controls the UI checking for new versions of the app, prompting install
 module.exports = class UpdateController {
@@ -21,6 +21,6 @@ module.exports = class UpdateController {
     let skipped = this.state.saved.skippedVersions
     if (!skipped) skipped = this.state.saved.skippedVersions = []
     skipped.push(version)
-    State.saveThrottled(this.state)
+    dispatch('stateSave')
   }
 }

src/renderer/lib/errors.js

@@ -17,10 +17,6 @@ class UnplayableFileError extends PlaybackError {
   constructor () { super('Can\'t play that file') }
 }
 
-class PlaybackTimedOutError extends PlaybackError {
-  constructor () { super('Playback timed out. Try again.') }
-}
-
 /* Sound */
 
 class InvalidSoundNameError extends SoundError {
@@ -42,7 +38,6 @@ module.exports = {
   TorrentError,
   UnplayableTorrentError,
   UnplayableFileError,
-  PlaybackTimedOutError,
   InvalidSoundNameError,
   TorrentKeyNotFoundError,
   InvalidTorrentError

src/renderer/lib/migrations.js

@@ -4,10 +4,10 @@ module.exports = {
   run
 }
 
-const semver = require('semver')
-const config = require('../../config')
-const TorrentSummary = require('./torrent-summary')
 const fs = require('fs')
+const semver = require('semver')
+
+const 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
@@ -39,6 +39,10 @@ function run (state) {
     migrate_0_14_0(state.saved)
   }
 
+  if (semver.lt(version, '0.17.0')) {
+    migrate_0_17_0(state.saved)
+  }
+
   // Config is now on the new version
   state.saved.version = config.APP_VERSION
 }
@@ -112,6 +116,8 @@ function migrate_0_11_0 (saved) {
 }
 
 function migrate_0_12_0 (saved) {
+  const TorrentSummary = require('./torrent-summary')
+
   if (saved.prefs.openExternalPlayer == null && saved.prefs.playInVlc != null) {
     saved.prefs.openExternalPlayer = saved.prefs.playInVlc
   }
@@ -145,3 +151,15 @@ function migrate_0_14_0 (saved) {
     delete ts.defaultPlayFileIndex
   })
 }
+
+function migrate_0_17_0 (saved) {
+  // Fix a sad, sad bug that resulted in 100MB+ config.json files
+  saved.torrents.forEach(function (ts) {
+    if (!ts.files) return
+    ts.files.forEach(function (file) {
+      if (!file.audioInfo || !file.audioInfo.picture) return
+      // This contained a Buffer, which 30x'd in size when serialized to JSON
+      delete file.audioInfo.picture
+    })
+  })
+}

src/renderer/lib/playlist.js

@@ -37,7 +37,9 @@ function getPreviousIndex (state) {
 }
 
 function getCurrentLocalURL (state) {
-  return state.server.localURL + '/' + state.playing.fileIndex
+  return state.server
+    ? state.server.localURL + '/' + state.playing.fileIndex
+    : ''
 }
 
 function updateCache (state) {

src/renderer/lib/sound.js

@@ -7,7 +7,7 @@ const config = require('../../config')
 const {InvalidSoundNameError} = require('./errors')
 const path = require('path')
 
-const VOLUME = 0.15
+const VOLUME = 0.3
 
 /* Cache of Audio elements, for instant playback */
 const cache = {}
@@ -19,7 +19,7 @@ const sounds = {
   },
   DELETE: {
     url: 'file://' + path.join(config.STATIC_PATH, 'sound', 'delete.wav'),
-    volume: VOLUME
+    volume: VOLUME * 0.5
   },
   DISABLE: {
     url: 'file://' + path.join(config.STATIC_PATH, 'sound', 'disable.wav'),
@@ -39,11 +39,11 @@ const sounds = {
   },
   PLAY: {
     url: 'file://' + path.join(config.STATIC_PATH, 'sound', 'play.wav'),
-    volume: VOLUME
+    volume: VOLUME * 1.25
   },
   STARTUP: {
     url: 'file://' + path.join(config.STATIC_PATH, 'sound', 'startup.wav'),
-    volume: VOLUME * 2
+    volume: VOLUME
   }
 }
 

src/renderer/lib/state.js

@@ -1,15 +1,19 @@
 const appConfig = require('application-config')('WebTorrent')
+const debounce = require('debounce')
 const path = require('path')
 const {EventEmitter} = require('events')
 
 const config = require('../../config')
 const migrations = require('./migrations')
 
+const SAVE_DEBOUNCE_INTERVAL = 1000
+
 const State = module.exports = Object.assign(new EventEmitter(), {
   getDefaultPlayState,
   load,
-  save,
+  // state.save() calls are rate-limited. Use state.saveImmediate() to skip limit.
-  saveThrottled
+  save: debounce(saveImmediate, SAVE_DEBOUNCE_INTERVAL),
+  saveImmediate
 })
 
 appConfig.filePath = path.join(config.CONFIG_PATH, 'config.json')
@@ -69,7 +73,8 @@ function getDefaultState () {
      */
     getPlayingTorrentSummary,
     getPlayingFileSummary,
-    getExternalPlayerName
+    getExternalPlayerName,
+    shouldHidePlayerControls
   }
 }
 
@@ -98,7 +103,7 @@ function getDefaultPlayState () {
 }
 
 /* If the saved state file doesn't exist yet, here's what we use instead */
-function setupSavedState (cb) {
+function setupStateSaved (cb) {
   const fs = require('fs-extra')
   const parseTorrent = require('parse-torrent')
   const parallel = require('run-parallel')
@@ -176,20 +181,29 @@ function getExternalPlayerName () {
   return path.basename(playerPath).split('.')[0]
 }
 
-function load (cb) {
+function shouldHidePlayerControls () {
-  const state = getDefaultState()
+  return this.location.url() === 'player' &&
+    this.playing.mouseStationarySince !== 0 &&
+    new Date().getTime() - this.playing.mouseStationarySince > 2000 &&
+    !this.playing.mouseInControls &&
+    !this.playing.isPaused &&
+    this.playing.location === 'local' &&
+    this.playing.playbackRate === 1
+}
 
+function load (cb) {
   appConfig.read(function (err, saved) {
     if (err || !saved.version) {
       console.log('Missing config file: Creating new one')
-      setupSavedState(onSaved)
+      setupStateSaved(onSavedState)
     } else {
-      onSaved(null, saved)
+      onSavedState(null, saved)
     }
   })
 
-  function onSaved (err, saved) {
+  function onSavedState (err, saved) {
     if (err) return cb(err)
+    const state = getDefaultState()
     state.saved = saved
     migrations.run(state)
     cb(null, state)
@@ -197,9 +211,8 @@ function load (cb) {
 }
 
 // Write state.saved to the JSON state file
-function save (state, cb) {
+function saveImmediate (state, cb) {
   console.log('Saving state to ' + appConfig.filePath)
-  delete state.saveStateTimeout
 
   // Clean up, so that we're not saving any pending state
   const copy = Object.assign({}, state.saved)
@@ -213,9 +226,6 @@ function save (state, cb) {
         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
-        }
         if (key === 'error') {
           continue // Don't save error states
         }
@@ -226,15 +236,6 @@ function save (state, cb) {
 
   appConfig.write(copy, (err) => {
     if (err) console.error(err)
-    else State.emit('savedState')
+    else State.emit('stateSaved')
   })
 }
-
-// Write, but no more than once a second
-function saveThrottled (state) {
-  if (state.saveStateTimeout) return
-  state.saveStateTimeout = setTimeout(function () {
-    if (!state.saveStateTimeout) return
-    save(state)
-  }, 1000)
-}

src/renderer/lib/torrent-summary.js

@@ -53,5 +53,6 @@ function getByKey (state, torrentKey) {
 function getFileOrFolder (torrentSummary) {
   const ts = torrentSummary
   if (!ts.path || !ts.files || ts.files.length === 0) return null
-  return path.join(ts.path, ts.files[0].path.split('/')[0])
+  const dirname = ts.files[0].path.split(path.sep)[0]
+  return path.join(ts.path, dirname)
 }

src/renderer/main.js

@@ -222,6 +222,8 @@ const dispatchHandlers = {
   'mediaSuccess': () => controllers.media.mediaSuccess(),
   'mediaTimeUpdate': () => controllers.media.mediaTimeUpdate(),
   'mediaMouseMoved': () => controllers.media.mediaMouseMoved(),
+  'mediaControlsMouseEnter': () => controllers.media.controlsMouseEnter(),
+  'mediaControlsMouseLeave': () => controllers.media.controlsMouseLeave(),
   'openExternalPlayer': () => controllers.media.openExternalPlayer(),
   'externalPlayerNotFound': () => controllers.media.externalPlayerNotFound(),
 
@@ -257,8 +259,8 @@ const dispatchHandlers = {
   'onOpen': onOpen,
   'error': onError,
   'uncaughtError': (proc, err) => telemetry.logUncaughtError(proc, err),
-  'saveState': () => State.save(state),
+  'stateSave': () => State.save(state),
-  'saveStateThrottled': () => State.saveThrottled(state),
+  'stateSaveImmediate': () => State.saveImmediate(state),
   'update': () => {} // No-op, just trigger an update
 }
 
@@ -288,6 +290,7 @@ function setupIpc () {
   ipcRenderer.on('dispatch', (e, ...args) => dispatch(...args))
 
   ipcRenderer.on('fullscreenChanged', onFullscreenChanged)
+  ipcRenderer.on('windowBoundsChanged', onWindowBoundsChanged)
 
   const tc = controllers.torrent
   ipcRenderer.on('wt-infohash', (e, ...args) => tc.torrentInfoHash(...args))
@@ -307,7 +310,7 @@ function setupIpc () {
 
   ipcRenderer.send('ipcReady')
 
-  State.on('savedState', () => ipcRenderer.send('savedState'))
+  State.on('stateSaved', () => ipcRenderer.send('stateSaved'))
 }
 
 // Quits any modal popovers and returns to the torrent list screen
@@ -462,6 +465,13 @@ function onFullscreenChanged (e, isFullScreen) {
   update()
 }
 
+function onWindowBoundsChanged (e, newBounds) {
+  if (state.location.url() !== 'player') {
+    state.saved.bounds = newBounds
+    dispatch('stateSave')
+  }
+}
+
 function checkDownloadPath () {
   fs.stat(state.saved.prefs.downloadPath, function (err, stat) {
     if (err) {

src/renderer/pages/app.js

@@ -27,8 +27,8 @@ const fontFamily = process.platform === 'win32'
   : 'BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif'
 lightBaseTheme.fontFamily = fontFamily
 darkBaseTheme.fontFamily = fontFamily
-darkBaseTheme.palette.primary1Color = colors.cyan500
+darkBaseTheme.palette.primary1Color = colors.grey50
-darkBaseTheme.palette.primary2Color = colors.cyan500
+darkBaseTheme.palette.primary2Color = colors.grey50
 darkBaseTheme.palette.primary3Color = colors.grey600
 darkBaseTheme.palette.accent1Color = colors.redA200
 darkBaseTheme.palette.accent2Color = colors.redA400
@@ -43,12 +43,7 @@ class App extends React.Component {
     // * 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
-    const hideControls = state.location.url() === 'player' &&
+    const hideControls = state.shouldHidePlayerControls()
-      state.playing.mouseStationarySince !== 0 &&
-      new Date().getTime() - state.playing.mouseStationarySince > 2000 &&
-      !state.playing.isPaused &&
-      state.playing.location === 'local' &&
-      state.playing.playbackRate === 1
 
     const cls = [
       'view-' + state.location.url(), /* e.g. view-home, view-player */

src/renderer/pages/player-page.js

@@ -26,6 +26,15 @@ module.exports = class Player extends React.Component {
       </div>
     )
   }
+
+  onComponentWillUnmount () {
+    // Unload the media element so that Chromium stops trying to fetch data
+    const tag = document.querySelector('audio,video')
+    if (!tag) return
+    tag.pause()
+    tag.src = ''
+    tag.load()
+  }
 }
 
 // Handles volume change by wheel
@@ -429,7 +438,7 @@ function renderPlayerControls (state) {
   ]
 
   if (state.playing.type === 'video') {
-    // show closed captions icon
+    // Show closed captions icon
     elements.push((
       <i
         key='subtitles'
@@ -497,8 +506,6 @@ function renderPlayerControls (state) {
       'color-stop(' + (volume * 100) + '%, #727272))'
   }
 
-  // TODO: dcposch change the range input to use value / onChanged instead of
-  // "readonly" / onMouse[Down,Move,Up]
   elements.push((
     <div key='volume' className='volume float-left'>
       <i
@@ -524,7 +531,7 @@ function renderPlayerControls (state) {
     </span>
   ))
 
-  // render playback rate
+  // Render playback rate
   if (state.playing.playbackRate !== 1) {
     elements.push((
       <span key='rate' className='rate float-left'>
@@ -534,7 +541,9 @@ function renderPlayerControls (state) {
   }
 
   return (
-    <div key='controls' className='controls'>
+    <div key='controls' className='controls'
+      onMouseEnter={dispatcher('mediaControlsMouseEnter')}
+      onMouseLeave={dispatcher('mediaControlsMouseLeave')}>
       {elements}
       {renderCastOptions(state)}
       {renderSubtitleOptions(state)}

src/renderer/pages/preferences-page.js

@@ -68,8 +68,7 @@ class PreferencesPage extends React.Component {
 
     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 ` +
+      : `Torrent media files will play in ${playerName} if WebTorrent cannot play them.`
-        'play them.'
 
     return (
       <Preference>

src/renderer/pages/torrent-list-page.js

@@ -1,5 +1,7 @@
 const React = require('react')
 const prettyBytes = require('prettier-bytes')
+const Checkbox = require('material-ui/Checkbox').default
+const LinearProgress = require('material-ui/LinearProgress').default
 
 const TorrentSummary = require('../lib/torrent-summary')
 const TorrentPlayer = require('../lib/torrent-player')
@@ -47,7 +49,7 @@ module.exports = class TorrentList extends React.Component {
     // Background image: show some nice visuals, like a frame from the movie, if possible
     const style = {}
     if (torrentSummary.posterFileName) {
-      const gradient = 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)'
+      const gradient = 'linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%)'
       const posterPath = TorrentSummary.getPosterPath(torrentSummary)
       style.backgroundImage = `${gradient}, url('${posterPath}')`
     }
@@ -55,8 +57,6 @@ module.exports = class TorrentList extends React.Component {
     // Foreground: name of the torrent, basic info like size, play button,
     // cast buttons if available, and delete
     const classes = ['torrent']
-    //  playStatus turns the play button into a loading spinner or error icon
-    if (torrentSummary.playStatus) classes.push(torrentSummary.playStatus)
     if (isSelected) classes.push('selected')
     if (!infoHash) classes.push('disabled')
     if (!torrentSummary.torrentKey) throw new InvalidTorrentError('Missing torrentKey')
@@ -71,6 +71,7 @@ module.exports = class TorrentList extends React.Component {
         {this.renderTorrentMetadata(torrentSummary)}
         {infoHash ? this.renderTorrentButtons(torrentSummary) : null}
         {isSelected ? this.renderTorrentDetails(torrentSummary) : null}
+        <hr />
       </div>
     )
   }
@@ -84,31 +85,66 @@ module.exports = class TorrentList extends React.Component {
 
     // If it's downloading/seeding then show progress info
     const prog = torrentSummary.progress
+    let progElems
     if (torrentSummary.error) {
-      elements.push(
+      progElems = [getErrorMessage(torrentSummary)]
-        <div key='progress-info' className='ellipsis'>
-          {getErrorMessage(torrentSummary)}
-        </div>
-      )
     } else if (torrentSummary.status !== 'paused' && prog) {
-      elements.push(
+      progElems = [
-        <div key='progress-info' className='ellipsis'>
+        renderDownloadCheckbox(),
-          {renderProgressBar()}
+        renderTorrentStatus(),
-          {renderPercentProgress()}
+        renderProgressBar(),
-          {renderTotalProgress()}
+        renderPercentProgress(),
-          {renderPeers()}
+        renderTotalProgress(),
-          {renderDownloadSpeed()}
+        renderPeers(),
-          {renderUploadSpeed()}
+        renderSpeeds(),
-          {renderEta()}
+        renderEta()
-        </div>
+      ]
-      )
+    } else {
+      progElems = [
+        renderDownloadCheckbox(),
+        renderTorrentStatus()
+      ]
     }
+    elements.push(
+      <div key='progress-info' className='ellipsis'>
+        {progElems}
+      </div>
+    )
 
     return (<div key='metadata' className='metadata'>{elements}</div>)
 
+    function renderDownloadCheckbox () {
+      const infoHash = torrentSummary.infoHash
+      const isActive = ['downloading', 'seeding'].includes(torrentSummary.status)
+      return (
+        <Checkbox
+          key='download-button'
+          className={'download ' + torrentSummary.status}
+          style={{display: 'inline-block', width: '32px'}}
+          iconStyle={{width: '20px', height: '20px'}}
+          checked={isActive}
+          onClick={stopPropagation}
+          onCheck={dispatcher('toggleTorrent', infoHash)} />
+      )
+    }
+
     function renderProgressBar () {
       const progress = Math.floor(100 * prog.progress)
-      return (<progress value={progress} max='100'>{progress}%</progress>)
+      const styles = {
+        wrapper: {
+          display: 'inline-block',
+          marginRight: '8px'
+        },
+        progress: {
+          height: '8px',
+          width: '30px'
+        }
+      }
+      return (
+        <div style={styles.wrapper}>
+          <LinearProgress style={styles.progress} mode='determinate' value={progress} />
+        </div>
+      )
     }
 
     function renderPercentProgress () {
@@ -132,14 +168,12 @@ module.exports = class TorrentList extends React.Component {
       return (<span key='peers'>{prog.numPeers} {count}</span>)
     }
 
-    function renderDownloadSpeed () {
+    function renderSpeeds () {
-      if (prog.downloadSpeed === 0) return
+      let str = ''
-      return (<span key='download'>↓ {prettyBytes(prog.downloadSpeed)}/s</span>)
+      if (prog.downloadSpeed > 0) str += ' ↓ ' + prettyBytes(prog.downloadSpeed) + '/s'
-    }
+      if (prog.uploadSpeed > 0) str += ' ↑ ' + prettyBytes(prog.uploadSpeed) + '/s'
-
+      if (str === '') return
-    function renderUploadSpeed () {
+      return (<span key='download'>{str}</span>)
-      if (prog.uploadSpeed === 0) return
-      return (<span key='upload'>↑ {prettyBytes(prog.uploadSpeed)}/s</span>)
     }
 
     function renderEta () {
@@ -160,7 +194,23 @@ module.exports = class TorrentList extends React.Component {
       const minutesStr = (hours || minutes) ? minutes + 'm' : ''
       const secondsStr = seconds + 's'
 
-      return (<span>ETA: {hoursStr} {minutesStr} {secondsStr}</span>)
+      return (<span>{hoursStr} {minutesStr} {secondsStr} remaining</span>)
+    }
+
+    function renderTorrentStatus () {
+      let status
+      if (torrentSummary.status === 'paused') {
+        if (!torrentSummary.progress) status = ''
+        else if (torrentSummary.progress.progress === 1) status = 'Not seeding'
+        else status = 'Paused'
+      } else if (torrentSummary.status === 'downloading') {
+        status = 'Downloading'
+      } else if (torrentSummary.status === 'seeding') {
+        status = 'Seeding'
+      } else { // torrentSummary.status is 'new' or something unexpected
+        status = ''
+      }
+      return (<span>{status}</span>)
     }
   }
 
@@ -169,69 +219,23 @@ module.exports = class TorrentList extends React.Component {
   renderTorrentButtons (torrentSummary) {
     const infoHash = torrentSummary.infoHash
 
-    let playIcon, playTooltip, playClass
-    if (torrentSummary.playStatus === 'timeout') {
-      playIcon = 'warning'
-      playTooltip = 'Playback timed out. No seeds? No internet? Click to try again.'
-    } else {
-      playIcon = 'play_arrow'
-      playTooltip = 'Start streaming'
-    }
-
-    let downloadIcon, downloadTooltip
-    if (torrentSummary.status === 'seeding') {
-      downloadIcon = 'file_upload'
-      downloadTooltip = 'Seeding. Click to stop.'
-    } else if (torrentSummary.status === 'downloading') {
-      downloadIcon = 'file_download'
-      downloadTooltip = 'Torrenting. Click to stop.'
-    } else {
-      downloadIcon = 'file_download'
-      downloadTooltip = 'Click to start torrenting.'
-    }
-
     // Only show the play/dowload buttons for torrents that contain playable media
-    let playButton, downloadButton, positionElem
+    let playButton
-    if (!torrentSummary.error) {
+    if (!torrentSummary.error && TorrentPlayer.isPlayableTorrentSummary(torrentSummary)) {
-      downloadButton = (
+      playButton = (
         <i
-          key='download-button'
+          key='play-button'
-          className={'button-round icon download ' + torrentSummary.status}
+          title='Start streaming'
-          title={downloadTooltip}
+          className={'icon play'}
-          onClick={dispatcher('toggleTorrent', infoHash)}>
+          onClick={dispatcher('playFile', infoHash)}>
-          {downloadIcon}
+          play_circle_outline
         </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:
-      const willShowSpinner = torrentSummary.playStatus === 'requested'
-      const mostRecentFile = torrentSummary.files &&
-        torrentSummary.files[torrentSummary.mostRecentFileIndex]
-      if (mostRecentFile && mostRecentFile.currentTime && !willShowSpinner) {
-        const fraction = mostRecentFile.currentTime / mostRecentFile.duration
-        positionElem = this.renderRadialProgressBar(fraction, 'radial-progress-large')
-        playClass = 'resume-position'
-      }
-
-      if (TorrentPlayer.isPlayableTorrentSummary(torrentSummary)) {
-        playButton = (
-          <i
-            key='play-button'
-            title={playTooltip}
-            className={'button-round icon play ' + playClass}
-            onClick={dispatcher('playFile', infoHash)}>
-            {playIcon}
-          </i>
-        )
-      }
     }
 
     return (
-      <div key='buttons' className='buttons'>
+      <div className='torrent-controls'>
-        {positionElem}
         {playButton}
-        {downloadButton}
         <i
           key='delete-button'
           className='icon delete'
@@ -375,6 +379,10 @@ module.exports = class TorrentList extends React.Component {
   }
 }
 
+function stopPropagation (e) {
+  e.stopPropagation()
+}
+
 function getErrorMessage (torrentSummary) {
   const err = torrentSummary.error
   if (err === 'path-missing') {

src/renderer/webtorrent.js

@@ -56,12 +56,8 @@ const VERSION_PREFIX = '-WD' + VERSION_STR + '-'
 
 /**
  * Generate an ephemeral peer ID each time.
- * Once there are around 2^24 = ~8 million WebTorrent Desktops online at the same time,
- * ID collisions will start happening. Birthday paradox.
- * This is fine, though. Bad peers can already clone someone else's peer ID.
- * The network is robust to occasional collisions.
  */
-const PEER_ID = Buffer.from(VERSION_PREFIX + crypto.randomBytes(6).toString('hex'))
+const PEER_ID = Buffer.from(VERSION_PREFIX + crypto.randomBytes(9).toString('base64'))
 
 // Connect to the WebTorrent and BitTorrent networks. WebTorrent Desktop is a hybrid
 // client, as explained here: https://webtorrent.io/faq
@@ -348,9 +344,11 @@ function getAudioMetadata (infoHash, index) {
   const torrent = client.get(infoHash)
   const file = torrent.files[index]
   musicmetadata(file.createReadStream(), function (err, info) {
-    if (err) return
+    if (err) return console.log('error getting audio metadata for ' + infoHash + ':' + index, err)
-    console.log('got audio metadata for %s: %o', file.name, info)
+    const { artist, album, albumartist, title, year, track, disk, genre } = info
-    ipc.send('wt-audio-metadata', infoHash, index, info)
+    const importantInfo = { artist, album, albumartist, title, year, track, disk, genre }
+    console.log('got audio metadata for %s: %o', file.name, importantInfo)
+    ipc.send('wt-audio-metadata', infoHash, index, importantInfo)
   })
 }
 

static/main.css

@@ -309,15 +309,6 @@ i:not(.disabled):hover { /* Show they're clickable without pointer: cursor */
   -webkit-filter: brightness(1.3);
 }
 
-.button-round { /* Circular icon buttons, used on <i> tags */
-  width: 40px;
-  height: 40px;
-  border-radius: 20px;
-  font-size: 22px;
-  transition: all 0.1s ease-out;
-  text-align: center;
-}
-
 /*
  * INPUTS
  */
@@ -347,22 +338,18 @@ textarea,
 }
 
 .torrent:not(:last-child) {
-  border-bottom: 1px solid rgb(20, 20, 20);
+  border-bottom: 1px solid #282828;
 }
 
 .torrent .metadata {
   position: absolute;
-  top: 25px;
+  top: 20px;
   left: 15px;
   right: 15px;
-  width: calc(100% - 40px);
+  width: calc(100% - 30px);
   text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
 }
 
-.torrent:hover .metadata {
-  width: calc(100% - 150px);
-}
-
 .torrent .metadata span:not(:last-child)::after {
   content: ' • ';
   opacity: 0.7;
@@ -370,79 +357,34 @@ textarea,
   padding-right: 4px;
 }
 
-.torrent .buttons {
+.torrent:hover .metadata {
-  position: absolute;
+  width: calc(100% - 120px);
-  top: 29px;
+}
-  right: 10px;
+
-  align-items: center;
+.torrent .torrent-controls {
   display: none;
 }
 
-.torrent:hover .buttons {
+.torrent:hover .torrent-controls {
-  display: flex;
+  display: block;
 }
 
-.torrent .buttons > * {
+.torrent .play {
-  margin-left: 6px; /* space buttons apart */
+  position: absolute;
+  top: 23px;
+  right: 45px;
+  font-size: 55px;
 }
 
-.torrent .buttons .download {
+.torrent .delete {
-  background-color: #2233BB;
+  position: absolute;
-  width: 28px;
+  top: 38px;
-  height: 28px;
+  right: 12px;
-  border-radius: 14px;
-  font-size: 18px;
-  padding-top: 6px;
 }
 
-.torrent .buttons .download.downloading {
+.torrent .download {
-  color: #44dd44;
+  vertical-align: -0.4em;
-}
+  margin-left: -2px;
-
-.torrent .buttons .download.seeding {
-  color: #44dd44;
-}
-
-.torrent .buttons .play {
-  padding-top: 10px;
-  background-color: #F44336;
-}
-
-.torrent.timeout .play {
-  padding-top: 8px;
-}
-
-.torrent.requested .play,
-.loading-spinner {
-  border-top: 6px solid rgba(255, 255, 255, 0.2);
-  border-right: 6px solid rgba(255, 255, 255, 0.2);
-  border-bottom: 6px solid rgba(255, 255, 255, 0.2);
-  border-left: 6px solid #ffffff;
-  border-radius: 50%;
-  color: transparent;
-  animation: load8 1.1s infinite linear;
-}
-
-@keyframes load8 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.torrent .buttons .play.resume-position {
-  position: relative;
-  -webkit-clip-path: circle(18px at center);
-}
-
-.torrent .buttons .delete {
-  opacity: 0.5;
-}
-
-.torrent .buttons .delete:hover {
-  opacity: 0.7;
 }
 
 .torrent .buttons .radial-progress {
@@ -450,23 +392,27 @@ textarea,
 }
 
 .torrent .name {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: bold;
   line-height: 1.5em;
+  margin-bottom: 6px;
 }
 
-progress {
+.torrent hr {
-  width: 60px;
+  position: absolute;
-  margin-right: 8px;
+  bottom: 5px;
-  -webkit-appearance: none;
+  left: calc(50% - 20px);
+  width: 40px;
+  height: 1px;
+  background: #ccc;
+  display: none;
+  margin: 0;
+  padding: 0;
+  border: none;
 }
 
-progress::-webkit-progress-bar {
+.torrent:hover hr {
-  background-color: #888;
+  display: block;
-}
-
-progress::-webkit-progress-value {
-  background-color: #eee;
 }
 
 /*
@@ -690,14 +636,6 @@ body.drag .app::after {
   cursor: none;
 }
 
-/* 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 {
   position: absolute;

test/config.js

@@ -1,6 +1,7 @@
 const path = require('path')
 
-const TEST_DIR = path.join(__dirname, 'tempTestData')
+const TEMP_DIR = process.platform === 'win32' ? 'C:\\Windows\\Temp' : '/tmp'
+const TEST_DIR = path.join(TEMP_DIR, 'WebTorrentTest')
 const TEST_DIR_DOWNLOAD = path.join(TEST_DIR, 'Downloads')
 const TEST_DIR_DESKTOP = path.join(TEST_DIR, 'Desktop')
 

test/index.js

@@ -8,7 +8,6 @@ test('app runs', function (t) {
   setup.resetTestDataDir()
   const app = setup.createApp()
   setup.waitForLoad(app, t)
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'app-basic'))
     .then(() => setup.endTest(app, t),
           (err) => setup.endTest(app, t, err || 'error'))

test/setup.js

@@ -11,11 +11,13 @@ module.exports = {
   screenshotCreateOrCompare,
   compareDownloadFolder,
   compareFiles,
+  compareTorrentFile,
   compareTorrentFiles,
   waitForLoad,
   wait,
   resetTestDataDir,
-  deleteTestDataDir
+  deleteTestDataDir,
+  copy
 }
 
 // Runs WebTorrent Desktop.
@@ -26,7 +28,8 @@ function createApp (t) {
     path: path.join(__dirname, '..', 'node_modules', '.bin',
       'electron' + (process.platform === 'win32' ? '.cmd' : '')),
     args: ['-r', path.join(__dirname, 'mocks.js'), path.join(__dirname, '..')],
-    env: {NODE_ENV: 'test'}
+    env: {NODE_ENV: 'test'},
+    waitTimeout: 10e3
   })
 }
 
@@ -37,7 +40,7 @@ function waitForLoad (app, t, opts) {
     return app.client.waitUntilWindowLoaded()
   }).then(function () {
     // Offline mode
-    if (opts.offline) app.webContents.executeJavaScript('testOfflineMode()')
+    if (!opts.online) app.webContents.executeJavaScript('testOfflineMode()')
   }).then(function () {
     // Switch to the main window. Index 0 is apparently the hidden webtorrent window...
     return app.client.windowByIndex(1)
@@ -74,7 +77,9 @@ function screenshotCreateOrCompare (app, t, name) {
   const ssPath = path.join(ssDir, name + '.png')
   fs.ensureFileSync(ssPath)
   const ssBuf = fs.readFileSync(ssPath)
-  return app.browserWindow.capturePage().then(function (buffer) {
+  return wait().then(function () {
+    return app.browserWindow.capturePage()
+  }).then(function (buffer) {
     if (ssBuf.length === 0) {
       console.log('Saving screenshot ' + ssPath)
       fs.writeFileSync(ssPath, buffer)
@@ -97,6 +102,8 @@ function compareIgnoringTransparency (bufActual, bufExpected) {
   if (Buffer.compare(bufActual, bufExpected) === 0) return true
 
   // Otherwise, compare pixel by pixel
+  let sumSquareDiff = 0
+  let numDiff = 0
   const pngA = PNG.sync.read(bufActual)
   const pngE = PNG.sync.read(bufExpected)
   if (pngA.width !== pngE.width || pngA.height !== pngE.height) return false
@@ -108,10 +115,23 @@ function compareIgnoringTransparency (bufActual, bufExpected) {
     for (let x = 0; x < w; x++) {
       const i = (y * w + x) * 4
       if (de[i + 3] === 0) continue // Skip transparent pixels
-      if (da[i] !== de[i] || da[i + 1] !== de[i + 1] || da[i + 2] !== de[i + 2]) return false
+      const ca = (da[i] << 16) | (da[i + 1] << 8) | da[i + 2]
+      const ce = (de[i] << 16) | (de[i + 1] << 8) | de[i + 2]
+      if (ca === ce) continue
+
+      // Add pixel diff to running sum
+      // This is necessary on Windows, where rendering apparently isn't quite deterministic
+      // and a few pixels in the screenshot will sometimes be off by 1. (Visually identical.)
+      numDiff++
+      sumSquareDiff += (da[i] - de[i]) * (da[i] - de[i])
+      sumSquareDiff += (da[i + 1] - de[i + 1]) * (da[i + 1] - de[i + 1])
+      sumSquareDiff += (da[i + 2] - de[i + 2]) * (da[i + 2] - de[i + 2])
     }
   }
-  return true
+  const rms = Math.sqrt(sumSquareDiff / (numDiff + 1))
+  const l2Distance = Math.round(Math.sqrt(sumSquareDiff))
+  console.log('screenshot diff l2 distance: ' + l2Distance + ', rms: ' + rms)
+  return l2Distance < 4000 && rms < 100
 }
 
 // Resets the test directory, containing config.json, torrents, downloads, etc
@@ -133,6 +153,9 @@ function compareDownloadFolder (t, dirname, filenames) {
   const dirpath = path.join(config.TEST_DIR_DOWNLOAD, dirname)
   try {
     const actualFilenames = fs.readdirSync(dirpath)
+    if (filenames === null) {
+      return t.fail('expected download folder to be absent, but it\'s here: ' + dirpath)
+    }
     const expectedSorted = filenames.slice().sort()
     const actualSorted = actualFilenames.slice().sort()
     t.deepEqual(actualSorted, expectedSorted, 'download folder contents: ' + dirname)
@@ -163,8 +186,28 @@ function compareTorrentFiles (t, pathActual, pathExpected) {
   t.deepEqual(fieldsActual, fieldsExpected, 'torrent contents: ' + pathActual)
 }
 
+// Makes sure two torrents have the same infohash and flags
+function compareTorrentFile (t, pathActual, fieldsExpected) {
+  const bufActual = fs.readFileSync(pathActual)
+  const fieldsActual = extractImportantFields(parseTorrent(bufActual))
+  t.deepEqual(fieldsActual, fieldsExpected, 'torrent contents: ' + pathActual)
+}
+
 function extractImportantFields (parsedTorrent) {
   const { infoHash, name, announce, urlList, comment } = parsedTorrent
   const priv = parsedTorrent.private // private is a reserved word in JS
   return { infoHash, name, announce, urlList, comment, 'private': priv }
 }
+
+function copy (pathFrom, pathTo) {
+  try {
+    fs.copySync(pathFrom, pathTo)
+  } catch (e) {
+    // There is a bug in either node or `fs-extra` on windows
+    // Windows lets us create files and folders under C:\Windows\Temp,
+    // but when you try to `copySync` into one of those folders, you get EPERM
+    // Ignore for now...
+    if (process.platform !== 'win32' || e.code !== 'EPERM') throw e
+    console.log('ignoring windows copy EPERM error', e)
+  }
+}

test/test-add-torrent.js

@@ -1,5 +1,4 @@
 const test = require('tape')
-const fs = require('fs-extra')
 const path = require('path')
 const setup = require('./setup')
 const config = require('./config')
@@ -14,21 +13,21 @@ test('add-torrent', function (t) {
     // Add an existing torrent. The corresponding file is not present. Should be at 0%
     .then(() => app.electron.ipcRenderer.send('openTorrentFile'))
     // The call to dialog.openFiles() is mocked. See mocks.js
-    .then(() => app.client.waitUntilTextExists('m3.jpg'))
+    .then(() => app.client.waitUntilTextExists('.torrent-list', 'm3.jpg'))
     .then(() => setup.screenshotCreateOrCompare(app, t, 'add-torrent-0-percent'))
     // Delete the torrent.
     .then(() => app.client.moveToObject('.torrent'))
     .then(() => setup.wait())
     .then(() => app.client.click('.icon.delete'))
-    .then(() => app.client.waitUntilTextExists('REMOVE'))
+    .then(() => app.client.waitUntilTextExists('.modal', 'REMOVE'))
     .then(() => app.client.click('.control.ok'))
     // Add the same existing torrent, this time with the file present. Should be at 100%
-    .then(() => fs.copySync(
+    .then(() => setup.copy(
       path.join(__dirname, 'resources', 'm3.jpg'),
       path.join(config.TEST_DIR_DOWNLOAD, 'm3.jpg')))
     .then(() => app.electron.ipcRenderer.send('openTorrentFile'))
-    .then(() => app.client.waitUntilTextExists('m3.jpg'))
+    .then(() => app.client.waitUntilTextExists('.torrent-list', 'm3.jpg'))
-    .then(() => setup.wait())
+    .then(() => app.client.moveToObject('.torrent'))
     .then(() => setup.screenshotCreateOrCompare(app, t, 'add-torrent-100-percent'))
     .then(() => setup.endTest(app, t),
           (err) => setup.endTest(app, t, err || 'error'))
@@ -37,8 +36,26 @@ test('add-torrent', function (t) {
 test('create-torrent', function (t) {
   setup.resetTestDataDir()
 
+  const expectedTorrent = {
+    announce: [
+      'udp://exodus.desync.com:6969',
+      'udp://tracker.coppersurfer.tk:6969',
+      'udp://tracker.internetwarriors.net:1337',
+      'udp://tracker.leechers-paradise.org:6969',
+      'udp://tracker.openbittorrent.com:80',
+      'wss://tracker.btorrent.xyz',
+      'wss://tracker.fastcast.nz',
+      'wss://tracker.openwebtorrent.com'
+    ],
+    comment: undefined,
+    infoHash: '4b087858a32e31a0d313b5f9e0a2e13c08c5403f',
+    name: 'tmp.jpg',
+    private: false,
+    urlList: []
+  }
+
   // Set up the files to seed
-  fs.copySync(path.join(__dirname, 'resources', 'm3.jpg'), config.SEED_FILES[0])
+  setup.copy(path.join(__dirname, 'resources', 'm3.jpg'), config.SEED_FILES[0])
 
   t.timeoutAfter(30e3)
   const app = setup.createApp()
@@ -46,24 +63,25 @@ test('create-torrent', function (t) {
     .then(() => app.client.waitUntilTextExists('.torrent-list', 'Big Buck Bunny'))
     // Click the + button, open a non-torrent file to seed
     .then(() => app.client.click('.icon.add'))
-    .then(() => app.client.waitUntilTextExists('Create'))
+    .then(() => app.client.waitUntilTextExists('h1', 'Create'))
     .then(() => setup.screenshotCreateOrCompare(app, t, 'create-torrent-simple'))
     // Click to show advanced settings
     .then(() => app.client.click('.show-more .control'))
-    .then(() => app.client.waitUntilTextExists('Comment'))
+    .then(() => app.client.waitUntilTextExists('.create-torrent-advanced', 'Comment'))
     .then(() => setup.screenshotCreateOrCompare(app, t, 'create-torrent-advanced'))
     // Click OK to create the torrent
     .then(() => app.client.click('.control.create-torrent'))
-    .then(() => app.client.waitUntilTextExists('tmp.jpg'))
+    .then(() => app.client.waitUntilTextExists('.torrent-list', 'tmp.jpg'))
+    .then(() => app.client.moveToObject('.torrent'))
     .then(() => setup.screenshotCreateOrCompare(app, t, 'create-torrent-100-percent'))
     // Click "Save Torrent File As..." on the new torrent
     .then(() => app.webContents.executeJavaScript(
       'dispatch("saveTorrentFileAs", 6)'))
     .then(() => setup.wait())
     // Mock saves to <temp folder>/Desktop/saved.torrent
-    .then(() => setup.compareTorrentFiles(t,
+    .then(() => setup.compareTorrentFile(t,
       config.SAVED_TORRENT_FILE,
-      path.join(__dirname, 'resources', 'expected-single-file.torrent')))
+      expectedTorrent))
     .then(() => setup.endTest(app, t),
           (err) => setup.endTest(app, t, err || 'error'))
 })

test/test-audio.js

@@ -12,47 +12,45 @@ test('audio-streaming', function (t) {
     .then(() => app.client.moveToObject('#torrent-wired'))
     .then(() => setup.wait())
     .then(() => app.client.click('#torrent-wired .icon.play'))
-    .then(() => app.client.waitUntilTextExists('The Wired CD'))
+    .then(() => app.client.waitUntilTextExists('.player', 'The Wired CD'))
     // Pause. Skip to two seconds in. Wait another two seconds for it to load.
     .then(() => app.webContents.executeJavaScript('dispatch("playPause")'))
     .then(() => app.webContents.executeJavaScript('dispatch("skipTo", 2)'))
-    .then(() => setup.wait())
+    .then(() => app.client.waitUntilTextExists('.player', 'Beastie Boys', 10e3))
-    .then(() => app.client.waitUntilTextExists('Artist'))
+    .then(() => setup.wait(5e3))
     .then(() => setup.screenshotCreateOrCompare(app, t, 'play-torrent-wired'))
     // Click next
     .then(() => app.client.click('.skip-next'))
-    .then(() => app.client.waitUntilTextExists('The Wired CD'))
+    .then(() => app.client.waitUntilTextExists('.player', 'David Byrne'))
+    .then(() => setup.wait(5e3))
     .then(() => app.client.moveToObject('.letterbox'))
     .then(() => app.webContents.executeJavaScript('dispatch("playPause")'))
     .then(() => app.webContents.executeJavaScript('dispatch("skipTo", 2)'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'play-torrent-wired-2'))
     // Play from end of song, let it advance on its own
     .then(() => app.webContents.executeJavaScript('dispatch("skipTo", 206)'))
     .then(() => app.webContents.executeJavaScript('dispatch("playPause")'))
-    .then(() => setup.wait(5e3)) // Let it play a few seconds, past the end of the song
+    // Play past the end of the song, then pause after the start of the next song by Zap Mama
+    .then(() => app.client.waitUntilTextExists('.player', 'Zap Mama'), 15e3)
+    .then(() => setup.wait(5e3))
     .then(() => app.webContents.executeJavaScript('dispatch("playPause")'))
     .then(() => app.webContents.executeJavaScript('dispatch("skipTo", 2)'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'play-torrent-wired-3'))
     // Fullscreen
     .then(() => app.client.click('.fullscreen'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'play-torrent-wired-fullscreen'))
     // Back to normal audio view. Give the player controls have had time to disappear.
     .then(() => app.webContents.executeJavaScript('dispatch("escapeBack")'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'play-torrent-wired-4'))
     // Back. Return to torrent list
     .then(() => app.client.click('.back'))
-    .then(() => app.client.waitUntilTextExists('Big Buck Bunny'))
+    .then(() => app.client.waitUntilTextExists('.torrent-list', 'Big Buck Bunny'))
     .then(() => setup.screenshotCreateOrCompare(app, t, 'play-torrent-wired-list'))
     // Forward. Should play again where we left off (should not stay paused)
     .then(() => app.client.click('.forward'))
     .then(() => setup.wait())
     .then(() => app.webContents.executeJavaScript('dispatch("playPause")'))
     .then(() => app.webContents.executeJavaScript('dispatch("skipTo", 2)'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'play-torrent-wired-5'))
     .then(() => setup.endTest(app, t),
           (err) => setup.endTest(app, t, err || 'error'))

test/test-torrent-list.js

@@ -28,35 +28,29 @@ test('torrent-list: start, stop, and delete torrents', function (t) {
   setup.resetTestDataDir()
 
   const app = setup.createApp()
-  setup.waitForLoad(app, t, {offline: true})
+  setup.waitForLoad(app, t)
     .then(() => app.client.waitUntilTextExists('.torrent-list', 'Big Buck Bunny'))
     // Mouse over the first torrent
     .then(() => app.client.moveToObject('.torrent'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'torrent-list-hover'))
     // Click download on the first torrent, start downloading
     .then(() => app.client.click('.icon.download'))
-    .then(() => app.client.waitUntilTextExists('.torrent-list', '276MB'))
+    .then(() => app.client.waitUntilTextExists('.torrent-list', '276 MB'))
     .then(() => setup.screenshotCreateOrCompare(app, t, 'torrent-list-start-download'))
     // Click download on the first torrent again, stop downloading
     .then(() => app.client.click('.icon.download'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'torrent-list-hover-download'))
     // Click delete on the first torrent
     .then(() => app.client.click('.icon.delete'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'torrent-list-delete-prompt'))
     // Click cancel on the resulting confirmation dialog. Should be same as before.
     .then(() => app.client.click('.control.cancel'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'torrent-list-hover'))
     // Click delete on the first torrent again
     .then(() => app.client.click('.icon.delete'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'torrent-list-delete-prompt'))
     // This time, click OK to confirm.
     .then(() => app.client.click('.control.ok'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'torrent-list-deleted'))
     .then(() => setup.endTest(app, t),
           (err) => setup.endTest(app, t, err || 'error'))
@@ -66,23 +60,20 @@ test('torrent-list: expand torrent, unselect file', function (t) {
   setup.resetTestDataDir()
 
   const app = setup.createApp()
-  setup.waitForLoad(app, t, {offline: true})
+  setup.waitForLoad(app, t)
     .then(() => app.client.waitUntilTextExists('.torrent-list', 'Big Buck Bunny'))
     // Mouse over the torrent
     .then(() => app.client.moveToObject('#torrent-cosmos'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'torrent-list-cosmos-hover'))
     // Click on the torrent, expand
     .then(() => app.client.click('#torrent-cosmos'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'torrent-list-cosmos-expand'))
     // Deselect the first file
     .then(() => app.client.click('#torrent-cosmos .icon.deselect-file'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'torrent-list-cosmos-expand-deselect'))
     // Start the torrent
     .then(() => app.client.click('#torrent-cosmos .icon.download'))
-    .then(() => app.client.waitUntilTextExists('.torrent-list', 'peers'))
+    .then(() => app.client.waitUntilTextExists('.torrent-list', '0%'))
     .then(() => setup.screenshotCreateOrCompare(app, t, 'torrent-list-cosmos-expand-start'))
     // Make sure that it creates all files EXCEPT the deslected one
     .then(() => setup.compareDownloadFolder(t, 'CosmosLaundromatFirstCycle', [
@@ -102,11 +93,9 @@ test('torrent-list: expand torrent, unselect file', function (t) {
     // Spectron doesn't have proper support for menu clicks yet...
     .then(() => app.webContents.executeJavaScript(
       'dispatch("confirmDeleteTorrent", "6a02592d2bbc069628cd5ed8a54f88ee06ac0ba5", true)'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'torrent-list-cosmos-delete-data'))
     // Click confirm
     .then(() => app.client.click('.control.ok'))
-    .then(() => setup.wait())
     .then(() => setup.screenshotCreateOrCompare(app, t, 'torrent-list-cosmos-deleted'))
     // Make sure that all the files are gone
     .then(() => setup.compareDownloadFolder(t, 'CosmosLaundromatFirstCycle', null))

test/test-video.js

@@ -28,7 +28,6 @@ test('video-streaming', function (t) {
     .then(() => app.client.click('.icon.delete'))
     .then(() => setup.wait())
     .then(() => app.client.click('.control.ok'))
-    .then(() => setup.wait())
     // Take another screenshot to verify that the window resized correctly
     .then(() => setup.screenshotCreateOrCompare(app, t, 'play-torrent-return'))
     .then(() => setup.endTest(app, t),