Custom video controls + button to delete torrents

Also:
* Clean up the state object a bit
* Simplify, factor out torrent-list.js

main/index.css

@@ -214,7 +214,7 @@ body.drag::before {
   width: calc(100% - 170px);
 }
 
-.torrent .btn {
+.torrent .btn, .torrent .delete {
   float: right;
   margin-top: 20px;
   margin-left: 15px;
@@ -222,7 +222,12 @@ body.drag::before {
   display: none;
 }
 
-.torrent:hover .btn {
+.torrent .delete {
+  opacity: 0.5;
+  color: #bbb;
+}
+
+.torrent:hover .btn, .torrent:hover .delete {
   display: block;
 }
 
@@ -254,3 +259,50 @@ body.drag::before {
 .torrent .status :not(:last-child)::after {
   content: ' — ';
 }
+
+
+/*
+ * VIDEO CONTROLS
+ */
+.player-controls .bottom-bar {
+  position: fixed;
+  width: 100%;
+  height: 38px;
+  bottom: 0;
+  opacity: 0;
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+.player:hover .bottom-bar {
+ opacity: 1;
+}
+
+.player-controls .loading-bar {
+  position: relative;
+  width: 100%;
+  height: 3px;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.player-controls .loading-bar-part {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background-color: rgba(100, 0, 0, 0.8);
+}
+
+.player-controls .playback-cursor {
+  position: absolute;
+  top: -2px;
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+  border: 3px solid #bbbbbb;
+}
+
+.player-controls .play-pause {
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 5px auto;
+}

main/index.js

@@ -29,7 +29,8 @@ global.WEBTORRENT_ANNOUNCE = createTorrent.announceList
   })
 
 var state = global.state = {
-  server: null,
+  server: null, /* local WebTorrent-to-HTTP server */
+  player: null, /* 'local', 'airplay', or 'chromecast'. persists across videos */
   view: {
     url: '/',
     dock: {
@@ -37,15 +38,18 @@ var state = global.state = {
       progress: 0
     },
     devices: {
-      airplay: null,
+      airplay: null, /* airplay client. finds and manages AppleTVs */
-      chromecast: null
+      chromecast: null /* chromecast client. finds and manages Chromecasts */
     },
-    client: null, // TODO: remove this
+    client: null, /* the WebTorrent client */
-    // history: [],
+    // history: [], /* track how we got to the current view. enables Back button */
     // historyIndex: 0,
     isFocused: true,
-    mainWindowBounds: null,
+    mainWindowBounds: null, /* x y width height */
-    title: 'WebTorrent'
+    title: 'WebTorrent' /* current window title */
+  },
+  video: {
+    isPaused: false
   }
 }
 
@@ -129,6 +133,9 @@ function dispatch (action, ...args) {
   if (action === 'openPlayer') {
     openPlayer(args[0] /* torrent */)
   }
+  if (action === 'deleteTorrent') {
+    deleteTorrent(args[0] /* torrent */)
+  }
   if (action === 'openChromecast') {
     openChromecast(args[0] /* torrent */)
   }
@@ -146,6 +153,10 @@ function dispatch (action, ...args) {
     state.view.url = '/'
     update()
   }
+  if (action === 'playPause') {
+    state.video.isPaused = !state.video.isPaused
+    update()
+  }
 }
 
 electron.ipcRenderer.on('addTorrent', function (e, torrentId) {
@@ -243,6 +254,16 @@ function openPlayer (torrent) {
   })
 }
 
+function deleteTorrent (torrent) {
+  console.log('Deleting %o', torrent)
+  torrent.isDeleting = true
+  update()
+  state.view.client.remove(torrent.infoHash, function () {
+    console.log('Deleted torrent ' + torrent.infoHash)
+    update()
+  })
+}
+
 function openChromecast (torrent) {
   startServer(torrent, function () {
     state.view.chromecast.play(state.server.networkURL, { title: 'WebTorrent — ' + torrent.name })

main/views/player.js

@@ -3,15 +3,29 @@ module.exports = Player
 var h = require('virtual-dom/h')
 
 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) {
+      videoElement.pause()
+    } else {
+      videoElement.play()
+    }
+  }
+
   return h('.player', [
     h('video', {
       src: state.server.localURL,
       autoplay: true,
-      controls: true,
       onloadedmetadata: onLoadedMetadata
-    })
+    }),
+    renderPlayerControls(state, dispatch)
   ])
 
+  // As soon as the video loads far enough to know the dimensions, resize the
+  // window to match the video resolution
   function onLoadedMetadata (e) {
     var video = e.target
     var dimensions = {
@@ -22,3 +36,37 @@ function Player (state, dispatch) {
   }
 }
 
+// Renders all video controls: play/pause, scrub, loading bar
+// TODO: cast buttons
+function renderPlayerControls (state, dispatch) {
+  return h('.player-controls', [
+    h('.bottom-bar', [
+      h('.loading-bar', {
+        onclick: () => dispatch('playbackJump')
+      }, renderLoadingBar(state)),
+      h('.playback-cursor', {
+        style: {left: '125px'}
+      }),
+      h('i.icon.play-pause', {
+        onclick: () => dispatch('playPause')
+      }, state.video.isPaused ? 'play_arrow' : 'pause')
+    ])
+  ])
+}
+
+// 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'}
+    })
+  ]
+}

main/views/torrent-list.js

@@ -4,64 +4,66 @@ var h = require('virtual-dom/h')
 var prettyBytes = require('pretty-bytes')
 
 function TorrentList (state, dispatch) {
-  return h('.torrent-list', getList())
+  var torrents = state.view.client
+    ? state.view.client.torrents
+    : []
 
-  function getList () {
+  var list = torrents.map((torrent) => renderTorrent(state, dispatch, torrent))
-    return state.view.client.torrents.map(function (torrent) {
+  return h('.torrent-list', list)
-      var style = {}
+}
-      if (torrent.posterURL) {
+
-        style['background-image'] = 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%), url("' + torrent.posterURL + '")'
+// Renders a torrent in the torrent list
-      }
+// Includes name, download status, play button, background image
-      return h('.torrent', {
+// May be expanded for additional info, including the list of files inside
-        style: style
+function renderTorrent (state, dispatch, torrent) {
-      }, [
+  // Background image: show some nice visuals, like a frame from the movie, if possible
-        h('.metadata', [
+  var style = {}
-          h('.name.ellipsis', torrent.name || 'Loading torrent...'),
+  if (torrent.posterURL) {
-          h('.status', [
+    style['background-image'] = 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%), url("' + torrent.posterURL + '")'
-            h('span.progress', Math.floor(100 * torrent.progress) + '%'),
+  }
-            (function () {
+
-              if (torrent.ready && torrent.files.length > 1) {
+  // Foreground: name of the torrent, basic info like size, play button,
-                return h('span.files', torrent.files.length + ' files')
+  // cast buttons if available, and delete
-              }
+  var elements = [
-            })(),
+    renderTorrentMetadata(torrent),
-            h('span', torrent.numPeers + ' ' + (torrent.numPeers === 1 ? 'peer' : 'peers')),
+    h('i.icon.delete', {
-            h('span', prettyBytes(torrent.downloadSpeed) + '/s'),
+      onclick: () => dispatch('deleteTorrent', torrent)
-            h('span', prettyBytes(torrent.uploadSpeed) + '/s')
+    }, 'close'),
-          ])
+    h('i.btn.icon.play', {
-        ]),
+      className: !torrent.ready ? 'disabled' : '',
-        h('i.btn.icon.play', {
+      onclick: () => dispatch('openPlayer', torrent)
-          className: !torrent.ready ? 'disabled' : '',
+    }, 'play_arrow')
-          onclick: openPlayer
+  ]
-        }, 'play_arrow'),
+  if (state.view.chromecast) {
-        (function () {
+    elements.push(h('i.btn.icon.chromecast', {
-          if (state.view.chromecast) {
+      className: !torrent.ready ? 'disabled' : '',
-            return h('i.btn.icon.chromecast', {
+      onclick: () => dispatch('openChromecast', torrent)
-              className: !torrent.ready ? 'disabled' : '',
+    }, 'cast'))
-              onclick: openChromecast
+  }
-            }, 'cast')
+  if (state.view.devices.airplay) {
-          }
+    elements.push(h('i.btn.icon.airplay', {
-        })(),
+      className: !torrent.ready ? 'disabled' : '',
-        (function () {
+      onclick: () => dispatch('openAirplay', torrent)
-          if (state.view.devices.airplay) {
+    }, 'airplay'))
-            return h('i.btn.icon.airplay', {
+  }
-              className: !torrent.ready ? 'disabled' : '',
+
-              onclick: openAirplay
+  return h('.torrent', {style: style}, elements)
-            }, 'airplay')
+}
-          }
+
-        })()
+// Renders the torrent name and download progress
-      ])
+function renderTorrentMetadata (torrent) {
-
+  return h('.metadata', [
-      function openPlayer () {
+    h('.name.ellipsis', torrent.name || 'Loading torrent...'),
-        dispatch('openPlayer', torrent)
+    h('.status', [
-      }
+      h('span.progress', Math.floor(100 * torrent.progress) + '%'),
-
+      (function () {
-      function openChromecast () {
+        if (torrent.ready && torrent.files.length > 1) {
-        dispatch('openChromecast', torrent)
+          return h('span.files', torrent.files.length + ' files')
-      }
+        }
-
+      })(),
-      function openAirplay () {
+      h('span', torrent.numPeers + ' ' + (torrent.numPeers === 1 ? 'peer' : 'peers')),
-        dispatch('openAirplay', torrent)
+      h('span', prettyBytes(torrent.downloadSpeed) + '/s'),
-      }
+      h('span', prettyBytes(torrent.uploadSpeed) + '/s')
-    })
+    ])
-  }
+  ])
 }