Scrubbing works

main/views/player.js

@@ -1,20 +1,28 @@
 module.exports = Player
 
 var h = require('virtual-dom/h')
+var electron = require('electron')
 
 function Player (state, dispatch) {
   // Unfortunately, play/pause can't be done just by modifying HTML.
   // Instead, grab the DOM node and play/pause it if necessary
   var videoElement = document.querySelector('video')
-  if (videoElement !== null &&
-      videoElement.paused !== state.video.isPaused) {
-    if (state.video.isPaused) {
+  if (videoElement !== null) {
+    if (state.video.isPaused && !videoElement.paused) {
       videoElement.pause()
-    } else {
+    } else if (!state.video.isPaused && videoElement.paused) {
       videoElement.play()
     }
+    // When the user clicks or drags on the progress bar, jump to that position
+    if (state.video.jumpToTime) {
+      videoElement.currentTime = state.video.jumpToTime
+      state.video.jumpToTime = null
+    }
+    state.video.currentTime = videoElement.currentTime
+    state.video.duration = videoElement.duration
   }
 
+  // Show the video as large as will fit in the window, play immediately
   return h('.player', [
     h('video', {
       src: state.server.localURL,
@@ -39,34 +47,64 @@ function Player (state, dispatch) {
 // Renders all video controls: play/pause, scrub, loading bar
 // TODO: cast buttons
 function renderPlayerControls (state, dispatch) {
+  var positionPercent = 100 * state.video.currentTime / state.video.duration
   return h('.player-controls', [
     h('.bottom-bar', [
-      h('.loading-bar', {
-        onclick: () => dispatch('playbackJump')
-      }, renderLoadingBar(state)),
+      h('.loading-bar', renderLoadingBar(state)),
+      h('.scrub-bar', {
+        draggable: true,
+        onclick: handleScrub,
+        ondrag: handleScrub
+      }),
       h('.playback-cursor', {
-        style: {left: '125px'}
+        style: {
+          left: 'calc(' + positionPercent + '% - 4px)'
+        }
       }),
       h('i.icon.play-pause', {
         onclick: () => dispatch('playPause')
       }, state.video.isPaused ? 'play_arrow' : 'pause')
     ])
   ])
+
+  // Handles a click or drag to scrub (jump to another position in the video)
+  function handleScrub (e) {
+    var windowWidth = electron.remote.getCurrentWindow().getBounds().width
+    var fraction = e.clientX / windowWidth
+    var position = fraction * state.video.duration /* seconds */
+    dispatch('playbackJump', position)
+  }
 }
 
 // Renders the loading bar. Shows which parts of the torrent are loaded, which
 // can be "spongey" / non-contiguous
 function renderLoadingBar (state) {
-  // TODO: get real data from webtorrent
-  return [
-    h('.loading-bar-part', {
-      style: {left: '10px', width: '50px'}
-    }),
-    h('.loading-bar-part', {
-      style: {left: '90px', width: '40px'}
-    }),
-    h('.loading-bar-part', {
-      style: {left: '135px', width: '5px'}
+  var torrent = state.view.torrentPlaying._torrent
+  if (torrent === null) {
+    return []
+  }
+
+  // Find all contiguous parts of the torrent which are loaded
+  var parts = []
+  var lastPartPresent = false
+  var numParts = torrent.pieces.length
+  for (var i = 0; i < numParts; i++) {
+    var partPresent = torrent.bitfield.get(i)
+    if (partPresent && !lastPartPresent) {
+      parts.push({start: i, count: 1})
+    } else if (partPresent) {
+      parts[parts.length - 1].count++
+    }
+    lastPartPresent = partPresent
+  }
+
+  // Output an list of rectangles to show loading progress
+  return parts.map(function (part) {
+    return h('.loading-bar-part', {
+      style: {
+        left: (100 * part.start / numParts) + '%',
+        width: (100 * part.count / numParts) + '%'
+      }
     })
-  ]
+  })
 }