Merge pull request #69 from feross/loading

add loading state, ui tweaks
This commit is contained in:
Feross Aboukhadijeh
2016-03-07 15:18:07 -08:00
3 changed files with 54 additions and 9 deletions

View File

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

View File

@@ -6,6 +6,7 @@
<link rel="stylesheet" href="index.css" charset="utf-8">
</head>
<body>
<script src='index.js'></script>
<div class="loading"><i class="icon">sync</i></div>
<script async src="index.js"></script>
</body>
</html>

View File

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