add header

main/index.css

@@ -11,6 +11,7 @@
 html,
 body {
   background: rgb(40, 40, 40);
+  color: #FFF;
   cursor: default;
   height: 100%;
   font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
@@ -18,9 +19,14 @@ body {
   line-height: 1.5em;
   margin: 0;
   padding: 0;
-  overflow: auto;
   -webkit-user-select: none;
   -webkit-app-region: drag;
+  width: 100%;
+  overflow: hidden;
+}
+
+.app {
+  height: 100%;
 }
 
 /*
@@ -51,33 +57,39 @@ a:not(.disabled):hover {
 }
 
 .btn {
-  width: 50px;
-  height: 50px;
-  border-radius: 25px;
-  color: #FFF;
-  font-size: 24px;
-  transition: all 0.1s;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  font-size: 22px;
+  transition: all 0.05s ease-out;
   text-align: center;
 }
 
 
 /*
- * WINDOW
+ * HEADER
  */
 
 .header {
+  border-bottom: 1px solid rgb(20, 20, 20);
   height: 37px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+  padding-top: 6px;
   overflow: hidden;
 }
 
+.header .title {
+  font-size: 14px;
+  opacity: 0.6;
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+
 .header .nav {
-  color: #FFF;
   font-size: 17px;
   font-weight: bold;
   margin-left: 80px;
   margin-right: 7px;
-  margin-top: 6px;
 }
 
 .header .left-nav {
@@ -104,6 +116,17 @@ a:not(.disabled):hover {
   padding-right: 8px;
 }
 
+/*
+ * CONTENT
+ */
+
+.content {
+  width: 100%;
+  height: calc(100% - 38px);
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 body.drag::before {
   content: '';
   position: fixed;
@@ -133,33 +156,32 @@ body.drag::before {
  */
 
 .torrent {
-  height: 150px;
+  height: 130px;
   padding: 20px;
   background: rgba(0, 0, 0, 0.5);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 0 50%;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
-  transition: all 0.1s;
+  border-bottom: 1px solid rgb(20, 20, 20);
+  transition: all 0.05s ease-out;
   position: relative;
 }
 
 .torrent:hover {
-  -webkit-filter: brightness(1.2);
+  -webkit-filter: brightness(1.1);
 }
 
 .torrent .metadata {
   float: left;
   width: calc(100% - 240px);
-  color: #FFF;
   text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
 }
 
 .torrent .btn {
   float: right;
-  margin-top: 25px;
-  padding-top: 14px;
+  margin-top: 21px;
   margin-left: 20px;
+  padding-top: 9px;
 }
 
 .torrent .play {

main/index.js

@@ -29,6 +29,7 @@ global.WEBTORRENT_ANNOUNCE = createTorrent.announceList
   })
 
 var state = global.state = {
+  title: 'WebTorrent',
   torrents: [],
   server: null,
   player: null,
@@ -39,7 +40,7 @@ var state = global.state = {
 var currentVDom, rootElement, getClient, updateThrottled
 
 function init () {
-  currentVDom = App(state, handler)
+  currentVDom = App(state, dispatch)
   rootElement = createElement(currentVDom)
   document.body.appendChild(rootElement)
 
@@ -73,20 +74,18 @@ function init () {
   document.addEventListener('paste', function () {
     electron.ipcRenderer.send('action', 'addTorrentFromPaste')
   })
-
-  handler('addTorrent', 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4')
 }
 init()
 
 function update () {
-  var newVDom = App(state, handler)
+  var newVDom = App(state, dispatch)
   var patches = diff(currentVDom, newVDom)
   rootElement = patch(rootElement, patches)
   currentVDom = newVDom
 }
 
-function handler (action, ...args) {
-  console.log('handler: %s %o', action, args)
+function dispatch (action, ...args) {
+  console.log('dispatch: %s %o', action, args)
   if (action === 'addTorrent') {
     addTorrent(args[0] /* torrentId */)
   }
@@ -108,15 +107,17 @@ function handler (action, ...args) {
 }
 
 electron.ipcRenderer.on('action', function (e, action, ...args) {
-  handler(action, ...args)
+  dispatch(action, ...args)
 })
 
 function onFiles (files) {
   // .torrent file = start downloading the torrent
-  files.filter(isTorrentFile).forEach(addTorrent)
+  files.filter(isTorrentFile).forEach(function (torrentFile) {
+    dispatch('addTorrent', torrentFile)
+  })
 
   // everything else = seed these files
-  seed(files.filter(isNotTorrentFile))
+  dispatch('seed', files.filter(isNotTorrentFile))
 }
 
 function isTorrentFile (file) {
@@ -146,7 +147,6 @@ function getRtcConfig (url, cb) {
 }
 
 function addTorrent (torrentId) {
-  console.log('Downloading torrent from %s', torrentId)
   getClient(function (err, client) {
     if (err) return onError(err)
     var torrent = client.add(torrentId)
@@ -156,7 +156,6 @@ function addTorrent (torrentId) {
 
 function seed (files) {
   if (files.length === 0) return
-  console.log('Seeding ' + files.length + ' files')
 
   // Seed from WebTorrent
   getClient(function (err, client) {

main/views/app.js

@@ -2,97 +2,21 @@ module.exports = App
 
 var h = require('virtual-dom/h')
 
-function App (state, handler) {
-  if (state.player === 'local') {
-    return h('.player', [
-      h('video', {
-        src: state.server.localURL,
-        autoplay: true,
-        controls: true
-      }),
-      h('a.close', {
-        onclick: closePlayer
-      }, 'Close')
+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.player === 'local') {
+          return Player(state, dispatch)
+        } else {
+          return TorrentList(state, dispatch)
+        }
+      })()
     ])
-  } else {
-    var list = state.torrents.map(function (torrent) {
-      var style = {}
-      if (torrent.posterURL) {
-        style['background-image'] = 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url("' + torrent.posterURL + '")'
-      }
-      return h('.torrent', {
-        style: style
-      }, [
-        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('a.btn.play', {
-          className: !torrent.ready ? 'disabled' : '',
-          onclick: openPlayer
-        }, '▶'),
-        (function () {
-          if (state.chromecast) {
-            return h('a.btn.chromecast', {
-              className: !torrent.ready ? 'disabled' : '',
-              onclick: openChromecast
-            }, 'C')
-          }
-        })(),
-        (function () {
-          if (state.airplay) {
-            return h('a.btn.airplay', {
-              className: !torrent.ready ? 'disabled' : '',
-              onclick: openAirplay
-            }, 'A')
-          }
-        })()
-      ])
-
-      function openPlayer () {
-        handler('openPlayer', torrent)
-      }
-
-      function openChromecast () {
-        handler('openChromecast', torrent)
-      }
-
-      function openAirplay () {
-        handler('openAirplay', torrent)
-      }
-    })
-    return h('.app', [
-      h('.header', [
-        h('.nav.left-nav', [
-          h('a.back.icon-left-open.disabled'),
-          h('a.forward.icon-right-open')
-        ]),
-        h('.nav.right-nav', [
-          h('a.add.icon-plus')
-        ])
-      ]),
-      h('.torrent-list', list),
-      h('.add', [
-        h('button', {
-          onclick: onAddTorrent
-        }, 'Add New Torrent')
-      ])
-    ])
-  }
-
-  function onAddTorrent (e) {
-    var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4'
-    handler('addTorrent', torrentId)
-  }
-
-  function closePlayer () {
-    handler('closePlayer')
-  }
+  ])
 }

main/views/header.js

@@ -0,0 +1,23 @@
+module.exports = Header
+
+var h = require('virtual-dom/h')
+
+function Header (state, dispatch) {
+  return h('.header', [
+    h('.title', state.title),
+    h('.nav.left-nav', [
+      h('a.back.icon-left-open.disabled'),
+      h('a.forward.icon-right-open')
+    ]),
+    h('.nav.right-nav', [
+      h('a.add.icon-plus', {
+        onclick: onAddTorrent
+      })
+    ])
+  ])
+
+  function onAddTorrent (e) {
+    var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4'
+    dispatch('addTorrent', torrentId)
+  }
+}

main/views/player.js

@@ -0,0 +1,21 @@
+module.exports = Player
+
+var h = require('virtual-dom/h')
+
+function Player (state, dispatch) {
+  return h('.player', [
+    h('video', {
+      src: state.server.localURL,
+      autoplay: true,
+      controls: true
+    }),
+    h('a.close', {
+      onclick: closePlayer
+    }, 'Close')
+  ])
+
+  function closePlayer () {
+    dispatch('closePlayer')
+  }
+}
+

main/views/torrent-list.js

@@ -0,0 +1,60 @@
+module.exports = TorrentList
+
+var h = require('virtual-dom/h')
+
+function TorrentList (state, dispatch) {
+  var list = state.torrents.map(function (torrent) {
+    var style = {}
+    if (torrent.posterURL) {
+      style['background-image'] = 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url("' + torrent.posterURL + '")'
+    }
+    return h('.torrent', {
+      style: style
+    }, [
+      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('a.btn.play', {
+        className: !torrent.ready ? 'disabled' : '',
+        onclick: openPlayer
+      }, '▶'),
+      (function () {
+        if (state.chromecast) {
+          return h('a.btn.chromecast', {
+            className: !torrent.ready ? 'disabled' : '',
+            onclick: openChromecast
+          }, 'C')
+        }
+      })(),
+      (function () {
+        if (state.airplay) {
+          return h('a.btn.airplay', {
+            className: !torrent.ready ? 'disabled' : '',
+            onclick: openAirplay
+          }, 'A')
+        }
+      })()
+    ])
+
+    function openPlayer () {
+      dispatch('openPlayer', torrent)
+    }
+
+    function openChromecast () {
+      dispatch('openChromecast', torrent)
+    }
+
+    function openAirplay () {
+      dispatch('openAirplay', torrent)
+    }
+  })
+  return h('.torrent-list', list)
+}