+
Now Listening
@@ -22,7 +27,7 @@
diff --git a/public/now.css b/public/now.css
index e341e8b..b2d9bc4 100644
--- a/public/now.css
+++ b/public/now.css
@@ -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;
}
diff --git a/public/now.js b/public/now.js
index e29c942..06c3b5b 100644
--- a/public/now.js
+++ b/public/now.js
@@ -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.ui.goIndex();
- this.ui.setBackgroundFade();
+ this.watch.stop(function() {
+ this.ui.goIndex();
+ }.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));
+ };
+ this.callback.bind(this);
+
+ this.fetch();
};
-fnp.watch.stop = function() {
- if(this.interval !== 0) {
- clearInterval(this.interval);
- this.interval = 0;
+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() {