diff --git a/renderer/index.css b/renderer/index.css index 18b89866..c0edf4c7 100644 --- a/renderer/index.css +++ b/renderer/index.css @@ -23,12 +23,47 @@ 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-ccw 2s infinite linear; +} + +@keyframes spin { + from { transform: rotate(0deg); } + 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; } /* @@ -229,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) { 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) {