From 5f0c8e86ad68b7fe8000274d443fc2c8a7ffaff7 Mon Sep 17 00:00:00 2001 From: Nate Goldman Date: Mon, 7 Mar 2016 12:42:39 -0800 Subject: [PATCH 1/2] improve loading experience --- renderer/index.css | 23 +++++++++++++++++++++++ renderer/index.html | 3 ++- renderer/index.js | 24 ++++++++++++++++-------- 3 files changed, 41 insertions(+), 9 deletions(-) diff --git a/renderer/index.css b/renderer/index.css index 18b89866..935153e9 100644 --- a/renderer/index.css +++ b/renderer/index.css @@ -23,6 +23,29 @@ body { overflow: hidden; } +.loading { + display: flex; + flex-direction: column; + justify-content: center; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +.loading .icon { + font-size: 42px; + display: block; + text-align: center; + animation: spin 2s infinite linear; +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + .app { -webkit-user-select: none; -webkit-app-region: drag; diff --git a/renderer/index.html b/renderer/index.html index 355ef568..93b1f586 100644 --- a/renderer/index.html +++ b/renderer/index.html @@ -6,6 +6,7 @@ - +
sync
+ diff --git a/renderer/index.js b/renderer/index.js index 1fa09774..34515d75 100644 --- a/renderer/index.js +++ b/renderer/index.js @@ -1,5 +1,6 @@ /* global URL, Blob */ +console.time('init') var airplay = require('airplay-js') var chromecasts = require('chromecasts')() var createTorrent = require('create-torrent') @@ -49,6 +50,8 @@ loadState(init) * the dock icon and drag+drop. */ function init () { + document.querySelector('.loading').remove() + // Connect to the WebTorrent and BitTorrent networks // WebTorrent.app is a hybrid client, as explained here: https://webtorrent.io/faq state.client = new WebTorrent() @@ -81,14 +84,7 @@ function init () { // OS integrations: // ...Chromecast and Airplay - chromecasts.on('update', function (player) { - state.devices.chromecast = player - update() - }) - - airplay.createBrowser().on('deviceOn', function (player) { - state.devices.airplay = player - }).start() + detectDevices() // ...drag and drop a torrent or video file to play or seed dragDrop('body', onFiles) @@ -121,6 +117,8 @@ function init () { window.addEventListener('blur', function () { state.isFocused = false }) + + console.timeEnd('init') } // This is the (mostly) pure funtion from state -> UI. Returns a virtual DOM @@ -213,6 +211,16 @@ function setupIpc () { }) } +function detectDevices () { + chromecasts.on('update', function (player) { + state.devices.chromecast = player + }) + + airplay.createBrowser().on('deviceOn', function (player) { + state.devices.airplay = player + }).start() +} + // Load state.saved from the JSON state file function loadState (callback) { cfg.read(function (err, data) { From 98eef0819bfb8359a573574d68512bb586518024 Mon Sep 17 00:00:00 2001 From: Nate Goldman Date: Mon, 7 Mar 2016 13:05:04 -0800 Subject: [PATCH 2/2] ui tweaks --- renderer/index.css | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/renderer/index.css b/renderer/index.css index 935153e9..c0edf4c7 100644 --- a/renderer/index.css +++ b/renderer/index.css @@ -38,20 +38,32 @@ body { font-size: 42px; display: block; text-align: center; - animation: spin 2s infinite linear; + animation: spin-ccw 2s infinite linear; } @keyframes spin { from { transform: rotate(0deg); } - to { transform: rotate(360deg); } + to { transform: rotate(360deg); } } +@keyframes spin-ccw { + from { transform: rotate(360deg); } + to { transform: rotate(0deg); } +} + +@keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} + + .app { -webkit-user-select: none; -webkit-app-region: drag; height: 100%; display: flex; flex-flow: column; + animation: fadein 1s; } /* @@ -252,6 +264,7 @@ body.drag::before { background-position: 0 50%; transition: all 0.1s ease-out; position: relative; + animation: fadein .4s; } .torrent:not(:last-child) {