From 30732305ff94fed7e35f590932610d8cfc85897a Mon Sep 17 00:00:00 2001
From: Adam Gotlib <gotlib.adam+dev@gmail.com>
Date: Fri, 2 Sep 2016 04:18:48 +0200
Subject: [PATCH] Add playlists feature (#871)

* Open multi-file torrents as playlists

* Add `repeat` and `shuffle` options to the player

* Autoplay first file in torrent

* replaces `pickFileToPlay` feature
* when reopening player, restores the most recently viewed file

* Add playlist navigation buttons to Windows thumbar

* Remove `repeat` and `shuffle` options

This reverts commit 9284122461fdb57a3884e97f43495b2167a259dd.

* Play files in order they appear in torrent

* Clean up playlists code
---
 src/main/ipc.js                               |   5 +
 src/main/menu.js                              |  28 ++++
 src/main/shortcuts.js                         |  10 ++
 src/main/thumbar.js                           |  69 ++++++--
 src/renderer/controllers/media-controller.js  |   5 +-
 .../controllers/playback-controller.js        | 154 ++++++++++++------
 .../controllers/torrent-controller.js         |   2 -
 src/renderer/lib/cast.js                      |   6 +-
 src/renderer/lib/errors.js                    |  13 +-
 src/renderer/lib/playlist.js                  |  85 ++++++++++
 src/renderer/lib/torrent-player.js            |  25 +--
 src/renderer/main.js                          |   2 +
 src/renderer/pages/PlayerPage.js              |  27 ++-
 src/renderer/pages/TorrentListPage.js         |  13 +-
 src/renderer/webtorrent.js                    |  16 +-
 static/NextTrackThumbnailBarButton.png        | Bin 0 -> 225 bytes
 static/PreviousTrackThumbnailBarButton.png    | Bin 0 -> 233 bytes
 static/main.css                               |  20 ++-
 18 files changed, 363 insertions(+), 117 deletions(-)
 create mode 100644 src/renderer/lib/playlist.js
 create mode 100644 static/NextTrackThumbnailBarButton.png
 create mode 100644 static/PreviousTrackThumbnailBarButton.png

diff --git a/src/main/ipc.js b/src/main/ipc.js
index ec6f4b1b..2e9ffc33 100644
--- a/src/main/ipc.js
+++ b/src/main/ipc.js
@@ -64,6 +64,11 @@ function init () {
     thumbar.enable()
   })
 
+  ipc.on('onPlayerUpdate', function (e, ...args) {
+    menu.onPlayerUpdate(...args)
+    thumbar.onPlayerUpdate(...args)
+  })
+
   ipc.on('onPlayerClose', function () {
     menu.setPlayerOpen(false)
     powerSaveBlocker.disable()
diff --git a/src/main/menu.js b/src/main/menu.js
index 74067fa3..2e4d6373 100644
--- a/src/main/menu.js
+++ b/src/main/menu.js
@@ -3,6 +3,7 @@ module.exports = {
   setPlayerOpen,
   setWindowFocus,
   setAllowNav,
+  onPlayerUpdate,
   onToggleAlwaysOnTop,
   onToggleFullScreen
 }
@@ -25,6 +26,8 @@ function init () {
 
 function setPlayerOpen (flag) {
   getMenuItem('Play/Pause').enabled = flag
+  getMenuItem('Skip Next').enabled = flag
+  getMenuItem('Skip Previous').enabled = flag
   getMenuItem('Increase Volume').enabled = flag
   getMenuItem('Decrease Volume').enabled = flag
   getMenuItem('Step Forward').enabled = flag
@@ -32,6 +35,16 @@ function setPlayerOpen (flag) {
   getMenuItem('Increase Speed').enabled = flag
   getMenuItem('Decrease Speed').enabled = flag
   getMenuItem('Add Subtitles File...').enabled = flag
+
+  if (flag === false) {
+    getMenuItem('Skip Next').enabled = false
+    getMenuItem('Skip Previous').enabled = false
+  }
+}
+
+function onPlayerUpdate (hasNext, hasPrevious) {
+  getMenuItem('Skip Next').enabled = hasNext
+  getMenuItem('Skip Previous').enabled = hasPrevious
 }
 
 function setWindowFocus (flag) {
@@ -187,6 +200,21 @@ function getMenuTemplate () {
         {
           type: 'separator'
         },
+        {
+          label: 'Skip Next',
+          accelerator: 'N',
+          click: () => windows.main.dispatch('nextTrack'),
+          enabled: false
+        },
+        {
+          label: 'Skip Previous',
+          accelerator: 'P',
+          click: () => windows.main.dispatch('previousTrack'),
+          enabled: false
+        },
+        {
+          type: 'separator'
+        },
         {
           label: 'Increase Volume',
           accelerator: 'CmdOrCtrl+Up',
diff --git a/src/main/shortcuts.js b/src/main/shortcuts.js
index 02bc2320..9fd71e8a 100644
--- a/src/main/shortcuts.js
+++ b/src/main/shortcuts.js
@@ -12,9 +12,19 @@ function enable () {
     'MediaPlayPause',
     () => windows.main.dispatch('playPause')
   )
+  electron.globalShortcut.register(
+    'MediaNextTrack',
+    () => windows.main.dispatch('nextTrack')
+  )
+  electron.globalShortcut.register(
+    'MediaPreviousTrack',
+    () => windows.main.dispatch('previousTrack')
+  )
 }
 
 function disable () {
   // Return the media key to the OS, so other apps can use it.
   electron.globalShortcut.unregister('MediaPlayPause')
+  electron.globalShortcut.unregister('MediaNextTrack')
+  electron.globalShortcut.unregister('MediaPreviousTrack')
 }
diff --git a/src/main/thumbar.js b/src/main/thumbar.js
index 749aa1a3..6793cfae 100644
--- a/src/main/thumbar.js
+++ b/src/main/thumbar.js
@@ -2,7 +2,8 @@ module.exports = {
   disable,
   enable,
   onPlayerPause,
-  onPlayerPlay
+  onPlayerPlay,
+  onPlayerUpdate
 }
 
 /**
@@ -16,39 +17,75 @@ var config = require('../config')
 
 var windows = require('./windows')
 
+const PREV_ICON = path.join(config.STATIC_PATH, 'PreviousTrackThumbnailBarButton.png')
+const PLAY_ICON = path.join(config.STATIC_PATH, 'PlayThumbnailBarButton.png')
+const PAUSE_ICON = path.join(config.STATIC_PATH, 'PauseThumbnailBarButton.png')
+const NEXT_ICON = path.join(config.STATIC_PATH, 'NextTrackThumbnailBarButton.png')
+
+// Array indices for each button
+const PREV = 0
+const PLAY_PAUSE = 1
+const NEXT = 2
+
+var buttons = []
+
 /**
  * Show the Windows thumbnail toolbar buttons.
  */
 function enable () {
-  update(false)
+  buttons = [
+    {
+      tooltip: 'Previous Track',
+      icon: PREV_ICON,
+      click: () => windows.main.dispatch('previousTrack')
+    },
+    {
+      tooltip: 'Pause',
+      icon: PAUSE_ICON,
+      click: () => windows.main.dispatch('playPause')
+    },
+    {
+      tooltip: 'Next Track',
+      icon: NEXT_ICON,
+      click: () => windows.main.dispatch('nextTrack')
+    }
+  ]
+  update()
 }
 
 /**
  * Hide the Windows thumbnail toolbar buttons.
  */
 function disable () {
-  windows.main.win.setThumbarButtons([])
+  buttons = []
+  update()
 }
 
 function onPlayerPause () {
-  update(true)
+  if (!isEnabled()) return
+  buttons[PLAY_PAUSE].tooltip = 'Play'
+  buttons[PLAY_PAUSE].icon = PLAY_ICON
+  update()
 }
 
 function onPlayerPlay () {
-  update(false)
+  if (!isEnabled()) return
+  buttons[PLAY_PAUSE].tooltip = 'Pause'
+  buttons[PLAY_PAUSE].icon = PAUSE_ICON
+  update()
 }
 
-function update (isPaused) {
-  var icon = isPaused
-    ? 'PlayThumbnailBarButton.png'
-    : 'PauseThumbnailBarButton.png'
+function onPlayerUpdate (state) {
+  if (!isEnabled()) return
+  buttons[PREV].flags = [ state.hasPrevious ? 'enabled' : 'disabled' ]
+  buttons[NEXT].flags = [ state.hasNext ? 'enabled' : 'disabled' ]
+  update()
+}
 
-  var buttons = [
-    {
-      tooltip: isPaused ? 'Play' : 'Pause',
-      icon: path.join(config.STATIC_PATH, icon),
-      click: () => windows.main.dispatch('playPause')
-    }
-  ]
+function isEnabled () {
+  return buttons.length > 0
+}
+
+function update () {
   windows.main.win.setThumbarButtons(buttons)
 }
diff --git a/src/renderer/controllers/media-controller.js b/src/renderer/controllers/media-controller.js
index a3821683..128878a2 100644
--- a/src/renderer/controllers/media-controller.js
+++ b/src/renderer/controllers/media-controller.js
@@ -2,6 +2,8 @@ const electron = require('electron')
 
 const ipcRenderer = electron.ipcRenderer
 
+const Playlist = require('../lib/playlist')
+
 // Controls local play back: the <video>/<audio> tag and VLC
 // Does not control remote casting (Chromecast etc)
 module.exports = class MediaController {
@@ -44,7 +46,8 @@ module.exports = class MediaController {
 
   openExternalPlayer () {
     var state = this.state
-    ipcRenderer.send('openExternalPlayer', state.saved.prefs.externalPlayerPath, state.server.localURL, state.window.title)
+    var mediaURL = Playlist.getCurrentLocalURL(this.state)
+    ipcRenderer.send('openExternalPlayer', state.saved.prefs.externalPlayerPath, mediaURL, state.window.title)
     state.playing.location = 'external'
   }
 
diff --git a/src/renderer/controllers/playback-controller.js b/src/renderer/controllers/playback-controller.js
index d1c38153..b1bdada5 100644
--- a/src/renderer/controllers/playback-controller.js
+++ b/src/renderer/controllers/playback-controller.js
@@ -8,6 +8,7 @@ const errors = require('../lib/errors')
 const sound = require('../lib/sound')
 const TorrentPlayer = require('../lib/torrent-player')
 const TorrentSummary = require('../lib/torrent-summary')
+const Playlist = require('../lib/playlist')
 const State = require('../lib/state')
 
 const ipcRenderer = electron.ipcRenderer
@@ -24,18 +25,29 @@ module.exports = class PlaybackController {
   // Play a file in a torrent.
   // * Start torrenting, if necessary
   // * Stream, if not already fully downloaded
-  // * If no file index is provided, pick the default file to play
+  // * If no file index is provided, restore the most recently viewed file or autoplay the first
   playFile (infoHash, index /* optional */) {
-    this.state.location.go({
-      url: 'player',
-      setup: (cb) => {
-        this.play()
-        this.openPlayer(infoHash, index, cb)
-      },
-      destroy: () => this.closePlayer()
-    }, (err) => {
-      if (err) dispatch('error', err)
-    })
+    var state = this.state
+    if (state.location.url() === 'player') {
+      this.updatePlayer(infoHash, index, false, (err) => {
+        if (err) dispatch('error', err)
+        else this.play()
+      })
+    } else {
+      state.location.go({
+        url: 'player',
+        setup: (cb) => {
+          this.play()
+          this.openPlayer(infoHash, index, (err) => {
+            if (!err) this.play
+            cb(err)
+          })
+        },
+        destroy: () => this.closePlayer()
+      }, (err) => {
+        if (err) dispatch('error', err)
+      })
+    }
   }
 
   // Open a file in OS default app.
@@ -64,6 +76,30 @@ module.exports = class PlaybackController {
     else this.pause()
   }
 
+  // Play next file in list (if any)
+  nextTrack () {
+    var state = this.state
+    if (Playlist.hasNext(state)) {
+      this.updatePlayer(
+          state.playing.infoHash, Playlist.getNextIndex(state), false, (err) => {
+            if (err) dispatch('error', err)
+            else this.play()
+          })
+    }
+  }
+
+  // Play previous track in list (if any)
+  previousTrack () {
+    var state = this.state
+    if (Playlist.hasPrevious(state)) {
+      this.updatePlayer(
+        state.playing.infoHash, Playlist.getPreviousIndex(state), false, (err) => {
+          if (err) dispatch('error', err)
+          else this.play()
+        })
+    }
+  }
+
   // Play (unpause) the current media
   play () {
     var state = this.state
@@ -169,13 +205,16 @@ module.exports = class PlaybackController {
 
   // Opens the video player to a specific torrent
   openPlayer (infoHash, index, cb) {
-    var torrentSummary = TorrentSummary.getByKey(this.state, infoHash)
+    var state = this.state
 
-    // automatically choose which file in the torrent to play, if necessary
-    if (index === undefined) index = torrentSummary.defaultPlayFileIndex
-    if (index === undefined) index = TorrentPlayer.pickFileToPlay(torrentSummary.files)
+    var torrentSummary = TorrentSummary.getByKey(state, infoHash)
+
+    if (index === undefined) index = torrentSummary.mostRecentFileIndex
+    if (index === undefined) index = torrentSummary.files.findIndex(TorrentPlayer.isPlayable)
     if (index === undefined) return cb(new errors.UnplayableError())
 
+    state.playing.infoHash = torrentSummary.infoHash
+
     // update UI to show pending playback
     if (torrentSummary.progress !== 1) sound.play('PLAY')
     // TODO: remove torrentSummary.playStatus
@@ -191,34 +230,68 @@ module.exports = class PlaybackController {
       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
+      var 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) {
     if (torrentSummary.status === 'paused') {
       dispatch('startTorrentingSummary', torrentSummary.torrentKey)
       ipcRenderer.once('wt-ready-' + torrentSummary.infoHash,
-        () => this.openPlayerFromActiveTorrent(torrentSummary, index, timeout, cb))
+        () => onTorrentReady())
     } else {
-      this.openPlayerFromActiveTorrent(torrentSummary, index, timeout, cb)
+      onTorrentReady()
+    }
+
+    function onTorrentReady () {
+      ipcRenderer.send('wt-start-server', torrentSummary.infoHash)
+      ipcRenderer.once('wt-server-' + torrentSummary.infoHash, () => cb())
     }
   }
 
-  openPlayerFromActiveTorrent (torrentSummary, index, timeout, cb) {
+  // Called each time the current file changes
+  updatePlayer (infoHash, index, resume, cb) {
+    var state = this.state
+
+    var torrentSummary = TorrentSummary.getByKey(state, infoHash)
     var fileSummary = torrentSummary.files[index]
 
+    if (!TorrentPlayer.isPlayable(fileSummary)) {
+      torrentSummary.mostRecentFileIndex = undefined
+      return cb(new Error('Can\'t play that file'))
+    }
+
+    torrentSummary.mostRecentFileIndex = index
+
     // update state
-    var state = this.state
-    state.playing.infoHash = torrentSummary.infoHash
     state.playing.fileIndex = index
     state.playing.type = TorrentPlayer.isVideo(fileSummary) ? 'video'
       : TorrentPlayer.isAudio(fileSummary) ? 'audio'
       : 'other'
 
     // pick up where we left off
-    if (fileSummary.currentTime) {
+    var jumpToTime = 0
+    if (resume && fileSummary.currentTime) {
       var fraction = fileSummary.currentTime / fileSummary.duration
       var secondsLeft = fileSummary.duration - fileSummary.currentTime
       if (fraction < 0.9 && secondsLeft > 10) {
-        state.playing.jumpToTime = fileSummary.currentTime
+        jumpToTime = fileSummary.currentTime
       }
     }
+    state.playing.jumpToTime = jumpToTime
 
     // if it's audio, parse out the metadata (artist, title, etc)
     if (state.playing.type === 'audio' && !fileSummary.audioInfo) {
@@ -233,34 +306,21 @@ module.exports = class PlaybackController {
       dispatch('addSubtitles', [fileSummary.selectedSubtitle], true)
     }
 
-    ipcRenderer.send('wt-start-server', torrentSummary.infoHash, index)
-    ipcRenderer.once('wt-server-' + torrentSummary.infoHash, (e, info) => {
-      clearTimeout(timeout)
+    state.window.title = fileSummary.name
 
-      // if we timed out (user clicked play a long time ago), don't autoplay
-      var timedOut = torrentSummary.playStatus === 'timeout'
-      delete torrentSummary.playStatus
-      if (timedOut) {
-        ipcRenderer.send('wt-stop-server')
-        return this.update()
-      }
-
-      state.window.title = torrentSummary.files[state.playing.fileIndex].name
-
-      // play in VLC if set as default player (Preferences / Playback / Play in VLC)
-      if (this.state.saved.prefs.openExternalPlayer) {
-        dispatch('openExternalPlayer')
-        this.update()
-        cb()
-        return
-      }
-
-      // otherwise, play the video
+    // play in VLC if set as default player (Preferences / Playback / Play in VLC)
+    if (this.state.saved.prefs.openExternalPlayer) {
+      dispatch('openExternalPlayer')
       this.update()
-
-      ipcRenderer.send('onPlayerOpen')
       cb()
-    })
+      return
+    }
+
+    // otherwise, play the video
+    this.update()
+
+    ipcRenderer.send('onPlayerUpdate', Playlist.hasNext(state), Playlist.hasPrevious(state))
+    cb()
   }
 
   closePlayer () {
diff --git a/src/renderer/controllers/torrent-controller.js b/src/renderer/controllers/torrent-controller.js
index 4d71f05b..90aec3c4 100644
--- a/src/renderer/controllers/torrent-controller.js
+++ b/src/renderer/controllers/torrent-controller.js
@@ -2,7 +2,6 @@ const path = require('path')
 const ipcRenderer = require('electron').ipcRenderer
 
 const TorrentSummary = require('../lib/torrent-summary')
-const TorrentPlayer = require('../lib/torrent-player')
 const sound = require('../lib/sound')
 const {dispatch} = require('../lib/dispatcher')
 
@@ -73,7 +72,6 @@ module.exports = class TorrentController {
     if (!torrentSummary.selections) {
       torrentSummary.selections = torrentSummary.files.map((x) => true)
     }
-    torrentSummary.defaultPlayFileIndex = TorrentPlayer.pickFileToPlay(torrentInfo.files)
     dispatch('update')
 
     // Save the .torrent file, if it hasn't been saved already
diff --git a/src/renderer/lib/cast.js b/src/renderer/lib/cast.js
index 180c833e..8fdf6884 100644
--- a/src/renderer/lib/cast.js
+++ b/src/renderer/lib/cast.js
@@ -96,7 +96,7 @@ function chromecastPlayer () {
 
   function open () {
     var torrentSummary = state.saved.torrents.find((x) => x.infoHash === state.playing.infoHash)
-    ret.device.play(state.server.networkURL, {
+    ret.device.play(state.server.networkURL + '/' + state.playing.fileIndex, {
       type: 'video/mp4',
       title: config.APP_NAME + ' - ' + torrentSummary.name
     }, function (err) {
@@ -183,7 +183,7 @@ function airplayPlayer () {
   }
 
   function open () {
-    ret.device.play(state.server.networkURL, function (err, res) {
+    ret.device.play(state.server.networkURL + '/' + state.playing.fileIndex, function (err, res) {
       if (err) {
         state.playing.location = 'local'
         state.errors.push({
@@ -275,7 +275,7 @@ function dlnaPlayer (player) {
 
   function open () {
     var torrentSummary = state.saved.torrents.find((x) => x.infoHash === state.playing.infoHash)
-    ret.device.play(state.server.networkURL, {
+    ret.device.play(state.server.networkURL + '/' + state.playing.fileIndex, {
       type: 'video/mp4',
       title: config.APP_NAME + ' - ' + torrentSummary.name,
       seek: state.playing.currentTime > 10 ? state.playing.currentTime : 0
diff --git a/src/renderer/lib/errors.js b/src/renderer/lib/errors.js
index 2bdfdfe6..a69c1ead 100644
--- a/src/renderer/lib/errors.js
+++ b/src/renderer/lib/errors.js
@@ -1,8 +1,15 @@
 module.exports = {
-  UnplayableError
+  UnplayableTorrentError,
+  UnplayableFileError
 }
 
-function UnplayableError () {
+function UnplayableTorrentError () {
   this.message = 'Can\'t play any files in torrent'
 }
-UnplayableError.prototype = Error
+
+function UnplayableFileError () {
+  this.message = 'Can\'t play that file'
+}
+
+UnplayableTorrentError.prototype = Error
+UnplayableFileError.prototype = Error
diff --git a/src/renderer/lib/playlist.js b/src/renderer/lib/playlist.js
new file mode 100644
index 00000000..d2e6a500
--- /dev/null
+++ b/src/renderer/lib/playlist.js
@@ -0,0 +1,85 @@
+module.exports = {
+  hasNext,
+  getNextIndex,
+  hasPrevious,
+  getPreviousIndex,
+  getCurrentLocalURL
+}
+
+const TorrentSummary = require('./torrent-summary')
+const TorrentPlayer = require('./torrent-player')
+
+var cache = {
+  infoHash: null,
+  previousIndex: null,
+  currentIndex: null,
+  nextIndex: null
+}
+
+function hasNext (state) {
+  updateCache(state)
+  return cache.nextIndex !== null
+}
+
+function getNextIndex (state) {
+  updateCache(state)
+  return cache.nextIndex
+}
+
+function hasPrevious (state) {
+  updateCache(state)
+  return cache.previousIndex !== null
+}
+
+function getPreviousIndex (state) {
+  updateCache(state)
+  return cache.previousIndex
+}
+
+function getCurrentLocalURL (state) {
+  return state.server.localURL + '/' + state.playing.fileIndex
+}
+
+function updateCache (state) {
+  var infoHash = state.playing.infoHash
+  var fileIndex = state.playing.fileIndex
+
+  if (infoHash === cache.infoHash) {
+    switch (fileIndex) {
+      case cache.currentIndex:
+        return
+      case cache.nextIndex:
+        cache.previousIndex = cache.currentIndex
+        cache.currentIndex = fileIndex
+        cache.nextIndex = findNextIndex(state)
+        return
+      case cache.previousIndex:
+        cache.previousIndex = findPreviousIndex(state)
+        cache.nextIndex = cache.currentIndex
+        cache.currentIndex = fileIndex
+        return
+    }
+  } else {
+    cache.infoHash = infoHash
+  }
+
+  cache.previousIndex = findPreviousIndex(state)
+  cache.currentIndex = fileIndex
+  cache.nextIndex = findNextIndex(state)
+}
+
+function findPreviousIndex (state) {
+  var files = TorrentSummary.getByKey(state, state.playing.infoHash).files
+  for (var i = state.playing.fileIndex - 1; i >= 0; i--) {
+    if (TorrentPlayer.isPlayable(files[i])) return i
+  }
+  return null
+}
+
+function findNextIndex (state) {
+  var files = TorrentSummary.getByKey(state, state.playing.infoHash).files
+  for (var i = state.playing.fileIndex + 1; i < files.length; i++) {
+    if (TorrentPlayer.isPlayable(files[i])) return i
+  }
+  return null
+}
diff --git a/src/renderer/lib/torrent-player.js b/src/renderer/lib/torrent-player.js
index 10d93411..d3ecceed 100644
--- a/src/renderer/lib/torrent-player.js
+++ b/src/renderer/lib/torrent-player.js
@@ -3,8 +3,7 @@ module.exports = {
   isVideo,
   isAudio,
   isTorrent,
-  isPlayableTorrentSummary,
-  pickFileToPlay
+  isPlayableTorrentSummary
 }
 
 var path = require('path')
@@ -60,25 +59,3 @@ function getFileExtension (file) {
 function isPlayableTorrentSummary (torrentSummary) {
   return torrentSummary.files && torrentSummary.files.some(isPlayable)
 }
-
-// Picks the default file to play from a list of torrent or torrentSummary files
-// Returns an index or undefined, if no files are playable
-function pickFileToPlay (files) {
-  // first, try to find the biggest video file
-  var videoFiles = files.filter(isVideo)
-  if (videoFiles.length > 0) {
-    var largestVideoFile = videoFiles.reduce(function (a, b) {
-      return a.length > b.length ? a : b
-    })
-    return files.indexOf(largestVideoFile)
-  }
-
-  // if there are no videos, play the first audio file
-  var audioFiles = files.filter(isAudio)
-  if (audioFiles.length > 0) {
-    return files.indexOf(audioFiles[0])
-  }
-
-  // no video or audio means nothing is playable
-  return undefined
-}
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 970d89bc..8d5d9112 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -189,6 +189,8 @@ const dispatchHandlers = {
   // Playback
   'playFile': (infoHash, index) => controllers.playback.playFile(infoHash, index),
   'playPause': () => controllers.playback.playPause(),
+  'nextTrack': () => controllers.playback.nextTrack(),
+  'previousTrack': () => controllers.playback.previousTrack(),
   'skip': (time) => controllers.playback.skip(time),
   'skipTo': (time) => controllers.playback.skipTo(time),
   'changePlaybackRate': (dir) => controllers.playback.changePlaybackRate(dir),
diff --git a/src/renderer/pages/PlayerPage.js b/src/renderer/pages/PlayerPage.js
index 44db7c81..222191b5 100644
--- a/src/renderer/pages/PlayerPage.js
+++ b/src/renderer/pages/PlayerPage.js
@@ -5,6 +5,7 @@ const zeroFill = require('zero-fill')
 const path = require('path')
 
 const TorrentSummary = require('../lib/torrent-summary')
+const Playlist = require('../lib/playlist')
 const {dispatch, dispatcher} = require('../lib/dispatcher')
 
 // Shows a streaming video player. Standard features + Chromecast + Airplay
@@ -109,7 +110,7 @@ function renderMedia (state) {
   var MediaTagName = state.playing.type
   var mediaTag = (
     <MediaTagName
-      src={state.server.localURL}
+      src={Playlist.getCurrentLocalURL(state)}
       onDoubleClick={dispatcher('toggleFullScreen')}
       onLoadedMetadata={onLoadedMetadata}
       onEnded={onEnded}
@@ -144,9 +145,13 @@ function renderMedia (state) {
     dispatch('setDimensions', dimensions)
   }
 
-  // When the video completes, pause the video instead of looping
   function onEnded (e) {
-    state.playing.isPaused = true
+    if (Playlist.hasNext(state)) {
+      dispatch('nextTrack')
+    } else {
+      // When the last video completes, pause the video instead of looping
+      state.playing.isPaused = true
+    }
   }
 
   function onCanPlay (e) {
@@ -378,6 +383,8 @@ function renderPlayerControls (state) {
     : state.playing.subtitles.selectedIndex >= 0
       ? 'active'
       : ''
+  var prevClass = Playlist.hasPrevious(state) ? '' : 'disabled'
+  var nextClass = Playlist.hasNext(state) ? '' : 'disabled'
 
   var elements = [
     <div key='playback-bar' className='playback-bar'>
@@ -397,6 +404,13 @@ function renderPlayerControls (state) {
       />
     </div>,
 
+    <i
+      key='skip-previous'
+      className={'icon skip-previous float-left ' + prevClass}
+      onClick={dispatcher('previousTrack')}>
+      skip_previous
+    </i>,
+
     <i
       key='play'
       className='icon play-pause float-left'
@@ -404,6 +418,13 @@ function renderPlayerControls (state) {
       {state.playing.isPaused ? 'play_arrow' : 'pause'}
     </i>,
 
+    <i
+      key='skip-next'
+      className={'icon skip-next float-left ' + nextClass}
+      onClick={dispatcher('nextTrack')}>
+      skip_next
+    </i>,
+
     <i
       key='fullscreen'
       className='icon fullscreen float-right'
diff --git a/src/renderer/pages/TorrentListPage.js b/src/renderer/pages/TorrentListPage.js
index 093504ed..608de522 100644
--- a/src/renderer/pages/TorrentListPage.js
+++ b/src/renderer/pages/TorrentListPage.js
@@ -207,10 +207,10 @@ module.exports = class TorrentList extends React.Component {
       // 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
+      var mostRecentFile = torrentSummary.files &&
+        torrentSummary.files[torrentSummary.mostRecentFileIndex]
+      if (mostRecentFile && mostRecentFile.currentTime && !willShowSpinner) {
+        var fraction = mostRecentFile.currentTime / mostRecentFile.duration
         positionElem = this.renderRadialProgressBar(fraction, 'radial-progress-large')
         playClass = 'resume-position'
       }
@@ -273,11 +273,6 @@ module.exports = class TorrentList extends React.Component {
       var fileRows = torrentSummary.files
         .filter((file) => !file.path.includes('/.____padding_file/'))
         .map((file, index) => ({ file, index }))
-        .sort(function (a, b) {
-          if (a.file.name < b.file.name) return -1
-          if (b.file.name < a.file.name) return 1
-          return 0
-        })
         .map((object) => this.renderFileRow(torrentSummary, object.file, object.index))
 
       filesElement = (
diff --git a/src/renderer/webtorrent.js b/src/renderer/webtorrent.js
index fb6a2c33..e125424e 100644
--- a/src/renderer/webtorrent.js
+++ b/src/renderer/webtorrent.js
@@ -83,8 +83,8 @@ function init () {
     generateTorrentPoster(torrentKey))
   ipc.on('wt-get-audio-metadata', (e, infoHash, index) =>
     getAudioMetadata(infoHash, index))
-  ipc.on('wt-start-server', (e, infoHash, index) =>
-    startServer(infoHash, index))
+  ipc.on('wt-start-server', (e, infoHash) =>
+    startServer(infoHash))
   ipc.on('wt-stop-server', (e) =>
     stopServer())
   ipc.on('wt-select-files', (e, infoHash, selections) =>
@@ -301,20 +301,20 @@ function getTorrentProgress () {
   }
 }
 
-function startServer (infoHash, index) {
+function startServer (infoHash) {
   var torrent = client.get(infoHash)
-  if (torrent.ready) startServerFromReadyTorrent(torrent, index)
-  else torrent.once('ready', () => startServerFromReadyTorrent(torrent, index))
+  if (torrent.ready) startServerFromReadyTorrent(torrent)
+  else torrent.once('ready', () => startServerFromReadyTorrent(torrent))
 }
 
-function startServerFromReadyTorrent (torrent, index, cb) {
+function startServerFromReadyTorrent (torrent, cb) {
   if (server) return
 
   // start the streaming torrent-to-http server
   server = torrent.createServer()
   server.listen(0, function () {
     var port = server.address().port
-    var urlSuffix = ':' + port + '/' + index
+    var urlSuffix = ':' + port
     var info = {
       torrentKey: torrent.key,
       localURL: 'http://localhost' + urlSuffix,
@@ -322,7 +322,7 @@ function startServerFromReadyTorrent (torrent, index, cb) {
     }
 
     ipc.send('wt-server-running', info)
-    ipc.send('wt-server-' + torrent.infoHash, info) // TODO: hack
+    ipc.send('wt-server-' + torrent.infoHash, info)
   })
 }
 
diff --git a/static/NextTrackThumbnailBarButton.png b/static/NextTrackThumbnailBarButton.png
new file mode 100644
index 0000000000000000000000000000000000000000..97a05c3ae613aae8f92f0a18d054a0c09a2a2731
GIT binary patch
literal 225
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA0wn)(8}b0D6`n4RAr*{or)@lWh(Uy{UtTBZ
zX5_7`xA%89NLw`eEs%b}w5w701%p*XX_W5UoJ%Y!pAIl?u`v1Yj?Kd3(C<V3lT|!7
zEk12+qHn+K;i((ECN>e54VfR#Tqwz*{VY$x=7KTv!`@D5j_o383OYZ{nG?@WvNsl(
z_hNSAhjUx5HZK0zktO!bTTgQ4{FiNuwk}V~m)qSn)7pZ$*eLv2N?glD^SbDL{*zQr
Z3jcD_x?347v=HcK22WQ%mvv4FO#o`>SX=-A

literal 0
HcmV?d00001

diff --git a/static/PreviousTrackThumbnailBarButton.png b/static/PreviousTrackThumbnailBarButton.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1bc9e3a9b4f69bdb32c41fc7467d9aa9aa83955
GIT binary patch
literal 233
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA0wn)(8}b0D4W2HJAr*{ouWsaJOq4kGv0iWI
zvstgFY{{x(OJGuiA#Mo=-_?8kmQFaaxI+Ab&B^dR`=uYuzcYOgzvj{q6T$oTQRmJb
zn4(_9n)R(_qPD@4wh7uBp7q8w%89qcG+N3Qu}bxE>|{!oJ0ZH_#wW*h2O6}U)*YB6
zUc@H$j^WGP{Td-TbNXf6?(AjEu&`iGbW7*`(H|ROd46ks0h6iq^OUyE;xEppJDZkH
axy0Wuq4jaQc)S$Q?F^o-elF{r5}E+-a#&yh

literal 0
HcmV?d00001

diff --git a/static/main.css b/static/main.css
index fbe3bb6b..10e567c5 100644
--- a/static/main.css
+++ b/static/main.css
@@ -634,7 +634,25 @@ body.drag .app::after {
   opacity: 1;
 }
 
-.player .controls .play-pause {
+.player .controls .icon.disabled {
+  opacity: 0.3;
+}
+
+.player .controls .icon.skip-previous {
+  font-size: 28px;
+  margin-top: 5px;
+  margin-right: 10px;
+  margin-left: 15px;
+}
+
+.player .controls .icon.play-pause {
+  font-size: 28px;
+  margin-top: 5px;
+  margin-right: 10px;
+  margin-left: 15px;
+}
+
+.player .controls .icon.skip-next {
   font-size: 28px;
   margin-top: 5px;
   margin-right: 10px;