Merge pull request #69 from feross/loading
add loading state, ui tweaks
This commit is contained in:
@@ -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) {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user