Split state into temp and saved

Also stop using IPC to calculate window width

Add default torrents--the Blender Foundation videos--not displayed yet

renderer/views/app.js

@@ -10,9 +10,9 @@ var TorrentList = require('./torrent-list')
 
 function App (state, dispatch) {
   function getView () {
-    if (state.view.url === '/') {
+    if (state.temp.url === '/') {
       return TorrentList(state, dispatch)
-    } else if (state.view.url === '/player') {
+    } else if (state.temp.url === '/player') {
       return Player(state, dispatch)
     }
   }
@@ -20,8 +20,8 @@ function App (state, dispatch) {
   // Show the header only when we're outside of fullscreen
   // Also don't show it in the video player except in OSX
   var isOSX = process.platform === 'darwin'
-  var isVideo = state.view.url === '/player'
-  var isFullScreen = state.view.isFullScreen
+  var isVideo = state.temp.url === '/player'
+  var isFullScreen = state.temp.isFullScreen
   var header = !isFullScreen && (!isVideo || isOSX) ? Header(state, dispatch) : null
 
   return hx`

renderer/views/header.js

@@ -23,12 +23,12 @@ function Header (state, dispatch) {
 
   function getTitle () {
     if (process.platform === 'darwin') {
-      return hx`<div class="title">${state.view.title}</div>`
+      return hx`<div class="title">${state.temp.title}</div>`
     }
   }
 
   function plusButton () {
-    if (state.view.url !== '/player') {
+    if (state.temp.url !== '/player') {
       return hx`<i class="icon add" onclick=${onAddTorrent}>add</i>`
     }
   }

renderer/views/player.js

@@ -3,25 +3,24 @@ module.exports = Player
 var h = require('virtual-dom/h')
 var hyperx = require('hyperx')
 var hx = hyperx(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) {
+    if (state.temp.video.isPaused && !videoElement.paused) {
       videoElement.pause()
-    } else if (!state.video.isPaused && videoElement.paused) {
+    } else if (!state.temp.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
+    if (state.temp.video.jumpToTime) {
+      videoElement.currentTime = state.temp.video.jumpToTime
+      state.temp.video.jumpToTime = null
     }
-    state.video.currentTime = videoElement.currentTime
-    state.video.duration = videoElement.duration
+    state.temp.video.currentTime = videoElement.currentTime
+    state.temp.video.duration = videoElement.duration
   }
 
   // Show the video as large as will fit in the window, play immediately
@@ -29,7 +28,7 @@ function Player (state, dispatch) {
     <div class="player">
       <div class="letterbox">
         <video
-          src="${state.server.localURL}"
+          src="${state.temp.server.localURL}"
           onloadedmetadata=${onLoadedMetadata}
           autoplay="autoplay">
         </video>
@@ -53,9 +52,9 @@ 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
+  var positionPercent = 100 * state.temp.video.currentTime / state.temp.video.duration
   var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 8px)' }
-  var torrent = state.view.torrentPlaying._torrent
+  var torrent = state.temp.torrentPlaying._torrent
 
   var elements = [
     hx`
@@ -76,7 +75,7 @@ function renderPlayerControls (state, dispatch) {
     `
   ]
   // If we've detected a Chromecast or AppleTV, the user can play video there
-  if (state.view.devices.chromecast) {
+  if (state.temp.devices.chromecast) {
     elements.push(hx`
       <i.icon.chromecast
         onclick=${() => dispatch('openChromecast', torrent)}>
@@ -84,7 +83,7 @@ function renderPlayerControls (state, dispatch) {
       </i>
     `)
   }
-  if (state.view.devices.airplay) {
+  if (state.temp.devices.airplay) {
     elements.push(hx`
       <i.icon.airplay
         onclick=${() => dispatch('openAirplay', torrent)}>
@@ -104,7 +103,7 @@ function renderPlayerControls (state, dispatch) {
   }
   elements.push(hx`
     <i class="icon play-pause" onclick=${() => dispatch('playPause')}>
-      ${state.video.isPaused ? 'play_arrow' : 'pause'}
+      ${state.temp.video.isPaused ? 'play_arrow' : 'pause'}
     </i>
   `)
 
@@ -112,11 +111,9 @@ function renderPlayerControls (state, dispatch) {
 
   // Handles a click or drag to scrub (jump to another position in the video)
   function handleScrub (e) {
-    // TODO: don't use remote -- it does IPC with the main process which is overkill
-    // just to get the width
-    var windowWidth = electron.remote.getCurrentWindow().getBounds().width
+    var windowWidth = document.querySelector('body').clientWidth
     var fraction = e.clientX / windowWidth
-    var position = fraction * state.video.duration /* seconds */
+    var position = fraction * state.temp.video.duration /* seconds */
     dispatch('playbackJump', position)
   }
 }
@@ -124,7 +121,7 @@ function renderPlayerControls (state, dispatch) {
 // 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
+  var torrent = state.temp.torrentPlaying._torrent
   if (torrent === null) {
     return []
   }

renderer/views/torrent-list.js

@@ -6,18 +6,18 @@ var hx = hyperx(h)
 var prettyBytes = require('pretty-bytes')
 
 function TorrentList (state, dispatch) {
-  var torrents = state.view.client
-    ? state.view.client.torrents
+  var torrents = state.temp.client
+    ? state.temp.client.torrents
     : []
 
-  var list = torrents.map((torrent) => renderTorrent(state, dispatch, torrent))
+  var list = torrents.map((torrent) => renderTorrent(torrent, dispatch))
   return hx`<div class="torrent-list">${list}</div>`
 }
 
 // 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) {
+function renderTorrent (torrent, dispatch) {
   // Background image: show some nice visuals, like a frame from the movie, if possible
   var style = {}
   if (torrent.posterURL) {