From 6d95cd7285a6927d22150e168f45ff0af3c90752 Mon Sep 17 00:00:00 2001 From: Feross Aboukhadijeh Date: Wed, 2 Mar 2016 17:59:59 -0800 Subject: [PATCH] add header --- main/index.css | 58 +++++++++++++------- main/index.js | 21 ++++---- main/views/app.js | 108 ++++++------------------------------- main/views/header.js | 23 ++++++++ main/views/player.js | 21 ++++++++ main/views/torrent-list.js | 60 +++++++++++++++++++++ 6 files changed, 170 insertions(+), 121 deletions(-) create mode 100644 main/views/header.js create mode 100644 main/views/player.js create mode 100644 main/views/torrent-list.js diff --git a/main/index.css b/main/index.css index 8ab8c384..92cd0ce9 100644 --- a/main/index.css +++ b/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 { diff --git a/main/index.js b/main/index.js index 7d553c6a..03fb9a5c 100644 --- a/main/index.js +++ b/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) { diff --git a/main/views/app.js b/main/views/app.js index b9244bd3..faec6610 100644 --- a/main/views/app.js +++ b/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') - } + ]) } diff --git a/main/views/header.js b/main/views/header.js new file mode 100644 index 00000000..650cf5fa --- /dev/null +++ b/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) + } +} diff --git a/main/views/player.js b/main/views/player.js new file mode 100644 index 00000000..c5485c77 --- /dev/null +++ b/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') + } +} + diff --git a/main/views/torrent-list.js b/main/views/torrent-list.js new file mode 100644 index 00000000..adfde22e --- /dev/null +++ b/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) +}