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) {