separation of concerns

renderer/views/app.js

@@ -0,0 +1,22 @@
+module.exports = App
+
+var h = require('virtual-dom/h')
+
+var Header = require('./header')
+var Player = require('./player')
+var TorrentList = require('./torrent-list')
+
+function App (state, dispatch) {
+  return h('.app', [
+    Header(state, dispatch),
+    h('.content', [
+      (function () {
+        if (state.view.url === '/') {
+          return TorrentList(state, dispatch)
+        } else if (state.view.url === '/player') {
+          return Player(state, dispatch)
+        }
+      })()
+    ])
+  ])
+}

renderer/views/header.js

@@ -0,0 +1,43 @@
+module.exports = Header
+
+var h = require('virtual-dom/h')
+
+function Header (state, dispatch) {
+  return h('.header', [
+    (function () {
+      if (process.platform === 'darwin') {
+        return h('.title', state.view.title)
+      }
+    })(),
+    h('.nav.left', [
+      h('i.icon.back', {
+        onclick: onBack
+      }, 'chevron_left'),
+      h('i.icon.forward', {
+        onclick: onForward
+      }, 'chevron_right')
+    ]),
+    (function () {
+      if (state.url !== '/player') {
+        return h('.nav.right', [
+          h('i.icon.add', {
+            onclick: onAddTorrent
+          }, 'add')
+        ])
+      }
+    })()
+  ])
+
+  function onBack (e) {
+    dispatch('back')
+  }
+
+  function onForward (e) {
+    dispatch('forward')
+  }
+
+  function onAddTorrent (e) {
+    var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4'
+    dispatch('addTorrent', torrentId)
+  }
+}

renderer/views/player.js

@@ -0,0 +1,110 @@
+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) {
+    if (state.video.isPaused && !videoElement.paused) {
+      videoElement.pause()
+    } 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,
+      autoplay: 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 = {
+      width: video.videoWidth,
+      height: video.videoHeight
+    }
+    dispatch('setDimensions', dimensions)
+  }
+}
+
+// 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', renderLoadingBar(state)),
+      h('.scrub-bar', {
+        draggable: true,
+        onclick: handleScrub,
+        ondrag: handleScrub
+      }),
+      h('.playback-cursor', {
+        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) {
+  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) + '%'
+      }
+    })
+  })
+}

renderer/views/torrent-list.js

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