Fixed interval, remove exo 2 and added loading screen.
This commit is contained in:
parent
8f503a6b10
commit
57afd09ad4
3 changed files with 72 additions and 25 deletions
|
|
@ -5,13 +5,18 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
<title>Now Listening</title>
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Exo+2:400,400italic,200,200italic" rel="stylesheet" type="text/css" />
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
|
||||
<link href="//flash.moe/css/electrolize/style.css" type="text/css" rel="stylesheet"/>
|
||||
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/now.css" type="text/css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="background" id="background"></div>
|
||||
<div class="container">
|
||||
<div class="container__loading hidden" id="loading">
|
||||
<div class="loading">
|
||||
<i class="fa fa-spinner fa-spin fa-4x"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container__index hidden" id="index">
|
||||
<div class="index__title">Now Listening</div>
|
||||
<div class="index__description">
|
||||
|
|
@ -22,7 +27,7 @@
|
|||
<button class="index__submit fa fa-forward" id="submit"></button>
|
||||
</div>
|
||||
<div class="index__dev">
|
||||
<a class="fa fa-code" href="https://github.com/flashwave/now-listening" title="Written"></a> by <a class="fa fa-flash" href="https://flash.moe" title="flash"></a>
|
||||
<a href="//flash.moe">flashwave</a> 2016-2021 | <a href="//github.com/flashwave/now-listening">Source</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container__user hidden" id="user">
|
||||
|
|
|
|||
|
|
@ -10,10 +10,18 @@ body {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
|
|
@ -24,7 +32,7 @@ a {
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font: 12px/20px 'Exo 2', sans-serif;
|
||||
font: 12px/20px Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -39,6 +47,13 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
.container__loading {
|
||||
text-align: center;
|
||||
background: rgba(17, 17, 17, 0.8);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.container__index {
|
||||
text-align: center;
|
||||
background: rgba(17, 17, 17, 0.8);
|
||||
|
|
@ -62,13 +77,15 @@ a {
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
transition: background-color 2.1s;
|
||||
filter: blur(10px);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.index__title {
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
font-size: 3em;
|
||||
line-height: 1.5em;
|
||||
font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.index__form {
|
||||
|
|
@ -90,7 +107,7 @@ a {
|
|||
.index__username {
|
||||
background: rgba(17, 17, 17, 0.5);
|
||||
border-right: 0;
|
||||
font-family: 'Exo 2', sans-serif;
|
||||
font-family: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -143,7 +160,7 @@ a {
|
|||
.info__title {
|
||||
font-size: 3em;
|
||||
line-height: 1.2em;
|
||||
font-style: italic;
|
||||
font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@ var fnp = {
|
|||
defaultCoverFnp: '/resources/no-cover.png',
|
||||
defaultCoverLfm: 'https://lastfm.freetls.fastly.net/i/u/300x300/2a96cbd8b46e442fc41c2b86b821562f.png',
|
||||
watch: {
|
||||
userName: null,
|
||||
interval: 0,
|
||||
interval: 15 * 1000,
|
||||
userName: '',
|
||||
timeOut: 0,
|
||||
stopping: false,
|
||||
},
|
||||
ui: {
|
||||
mode: '',
|
||||
|
|
@ -20,6 +22,9 @@ fnp.switchUser = function(userName) {
|
|||
fnp.updateHash = function() {
|
||||
var userName = decodeURIComponent(location.hash.substring(2));
|
||||
|
||||
this.ui.setBackgroundFade();
|
||||
this.ui.goLoading();
|
||||
|
||||
if(userName.length > 0) {
|
||||
this.watch.start(userName, function(response) {
|
||||
if(response.error) {
|
||||
|
|
@ -29,48 +34,63 @@ fnp.updateHash = function() {
|
|||
}
|
||||
|
||||
var cover = response[0].images.extralarge;
|
||||
console.log(cover);
|
||||
if(cover.length < 1 || cover === this.defaultCoverLfm)
|
||||
cover = this.defaultCoverFnp;
|
||||
console.log(cover);
|
||||
|
||||
this.ui.setInfo(cover, response[0].name, response[0].artist.name, userName, response[0].nowplaying || false);
|
||||
this.ui.goUser();
|
||||
}.bind(this));
|
||||
} else {
|
||||
this.watch.stop();
|
||||
this.watch.stop(function() {
|
||||
this.ui.goIndex();
|
||||
this.ui.setBackgroundFade();
|
||||
}.bind(this));
|
||||
}
|
||||
};
|
||||
|
||||
fnp.watch.start = function(userName, callback) {
|
||||
this.stop();
|
||||
this.userName = userName = (userName || '').toString();
|
||||
this.fetch(function(response) {
|
||||
|
||||
this.callback = function(response) {
|
||||
if(this.stopping)
|
||||
return;
|
||||
|
||||
if(response.error)
|
||||
this.stop();
|
||||
else
|
||||
this.timeOut = setTimeout(this.fetch.bind(this), this.interval);
|
||||
|
||||
callback(response);
|
||||
}.bind(this));
|
||||
};
|
||||
fnp.watch.stop = function() {
|
||||
if(this.interval !== 0) {
|
||||
clearInterval(this.interval);
|
||||
this.interval = 0;
|
||||
this.callback.bind(this);
|
||||
|
||||
this.fetch();
|
||||
};
|
||||
fnp.watch.stop = function(callback) {
|
||||
if(this.stopping)
|
||||
return;
|
||||
this.stopping = true;
|
||||
|
||||
if(this.timeOut !== 0) {
|
||||
clearTimeout(this.timeOut);
|
||||
this.timeOut = 0;
|
||||
}
|
||||
|
||||
this.userName = null;
|
||||
this.userName = '';
|
||||
|
||||
if(callback)
|
||||
callback();
|
||||
this.stopping = false;
|
||||
};
|
||||
fnp.watch.fetch = function(callback) {
|
||||
if(typeof callback !== 'function')
|
||||
fnp.watch.fetch = function() {
|
||||
if(typeof this.callback !== 'function')
|
||||
return;
|
||||
var xhr = new XMLHttpRequest;
|
||||
xhr.onreadystatechange = function() {
|
||||
if(xhr.readyState !== 4)
|
||||
return;
|
||||
callback(JSON.parse(xhr.responseText));
|
||||
};
|
||||
this.callback(JSON.parse(xhr.responseText));
|
||||
}.bind(this);
|
||||
xhr.open('GET', '/get.php?u=' + encodeURIComponent(this.userName));
|
||||
xhr.send();
|
||||
};
|
||||
|
|
@ -92,6 +112,9 @@ fnp.ui.goIndex = function() {
|
|||
fnp.ui.goUser = function() {
|
||||
this.setMode('user');
|
||||
};
|
||||
fnp.ui.goLoading = function() {
|
||||
this.setMode('loading');
|
||||
};
|
||||
|
||||
fnp.ui.setBackground = function(bgPath) {
|
||||
if(bgPath === '::fade') {
|
||||
|
|
@ -145,6 +168,7 @@ fnp.ui.setInfo = function(cover, title, artist, user, now) {
|
|||
window.onload = function() {
|
||||
fnp.ui.eIndex = document.getElementById('index');
|
||||
fnp.ui.eUser = document.getElementById('user');
|
||||
fnp.ui.eLoading = document.getElementById('loading');
|
||||
fnp.ui.eBg = document.getElementById('background');
|
||||
fnp.ui.eFormUser = document.getElementById('username');
|
||||
fnp.ui.eFormSend = document.getElementById('submit');
|
||||
|
|
@ -158,6 +182,7 @@ window.onload = function() {
|
|||
fnp.ui.modes = [
|
||||
{ name: 'index', elem: fnp.ui.eIndex },
|
||||
{ name: 'user', elem: fnp.ui.eUser },
|
||||
{ name: 'loading', elem: fnp.ui.eLoading },
|
||||
];
|
||||
|
||||
fnp.ui.eInfoBack.onclick = function() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue