Back
diff --git a/public/now.css b/public/now.css
index e355896..2a58cae 100644
--- a/public/now.css
+++ b/public/now.css
@@ -73,7 +73,7 @@ a:focus {
}
.background {
- background: none no-repeat center / cover #000;
+ background: #000;
z-index: -1;
position: absolute;
height: 100%;
@@ -138,6 +138,9 @@ a:focus {
.cover {
flex-shrink: 0;
flex-grow: 0;
+ width: 300px;
+ height: 300px;
+ background: rgba(17, 17, 17, 0.8);
}
@media (max-width: 600px) {
@@ -146,10 +149,15 @@ a:focus {
}
}
-.cover__image {
- background: none no-repeat center / cover rgba(17, 17, 17, 0.8);
- width: 300px;
- height: 300px;
+.cover img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ will-change: z-index, opacity;
+ opacity: 1;
+ transition: opacity .5s;
}
.info {
diff --git a/public/now.js b/public/now.js
index 226b214..90b246a 100644
--- a/public/now.js
+++ b/public/now.js
@@ -11,6 +11,8 @@ var fnp = {
mode: '',
bgSwitch: false,
currBg: '',
+ coverSwitch: false,
+ currCover: '',
},
};
@@ -35,11 +37,16 @@ fnp.updateHash = function() {
return;
}
- var cover = response[0].images.extralarge;
- if(cover.length < 1 || cover === this.defaultCoverLfm)
- cover = this.defaultCoverFnp;
+ var coverUrl = response[0].images.extralarge;
+ if(coverUrl.length < 1 || coverUrl === this.defaultCoverLfm)
+ coverUrl = this.defaultCoverFnp;
- this.ui.setInfo(cover, response[0].name, response[0].artist.name, userName, response[0].nowplaying || false);
+ this.ui.setBackground(coverUrl);
+ this.ui.setCover(coverUrl);
+ this.ui.setTitle(response[0].name, response[0].url);
+ this.ui.setArtist(response[0].artist.name, response[0].artist.url);
+ this.ui.setCurrentUser(userName, 'https://www.last.fm/user/' + encodeURIComponent(userName));
+ this.ui.setNowListening(response[0].nowplaying || false);
this.ui.goUser();
}.bind(this));
} else {
@@ -135,16 +142,17 @@ fnp.ui.setBackground = function(bgPath) {
fnp.ui.switchBackground = function(bgPath) {
if(bgPath === this.currBg)
return;
- this.currBg = bgPath;
if(this.bgSwitch) {
setTimeout(this.switchBackground.bind(this, bgPath), 1000);
return;
}
+
this.bgSwitch = true;
+ this.currBg = bgPath;
while(this.eBg.children.length > 2)
- this.eBg.removeChild(eBg.firstChild);
+ this.eBg.removeChild(this.eBg.firstChild);
var newBg = null,
hasNewBg = !!bgPath,
@@ -209,15 +217,84 @@ fnp.ui.setBackgroundFade = function() {
fader();
};
-fnp.ui.setInfo = function(cover, title, artist, user, now) {
- this.setBackground(cover);
- this.eInfoCover.style.backgroundImage = 'url(\'' + (cover || '').toString() + '\')';
+fnp.ui.setCover = function(coverUrl) {
+ this.switchCover(coverUrl);
+};
+fnp.ui.switchCover = function(coverUrl) {
+ if(coverUrl === this.currCover)
+ return;
+
+ if(this.coverSwitch) {
+ setTimeout(this.switchCover.bind(this, coverUrl), 1000);
+ return;
+ }
+
+ this.coverSwitch = true;
+ this.currCover = coverUrl;
+
+ while(this.eInfoCover.children.length > 2)
+ this.eInfoCover.removeChild(this.eInfoCover.firstChild);
+
+ var newCover = null,
+ hasNewCover = !!coverUrl,
+ oldCover = this.eInfoCover.firstChild,
+ hasOldCover = !!oldCover;
+
+ if(hasOldCover)
+ oldCover.style.zIndex = '-1';
+
+ if(hasNewCover) {
+ newCover = document.createElement('img');
+ newCover.alt = newCover.src = coverUrl;
+ newCover.style.opacity = '0';
+ newCover.style.zIndex = '1';
+ newCover.onload = function() {
+ setTimeout(function() {
+ newCover.style.opacity = null;
+ setTimeout(function() {
+ newCover.style.zIndex = null;
+ if(hasOldCover)
+ this.eInfoCover.removeChild(oldCover);
+ this.coverSwitch = false;
+ }.bind(this), 500);
+ }.bind(this), 50);
+ }.bind(this);
+ newCover.onerror = function() {
+ this.eInfoCover.removeChild(newCover);
+ newCover = null;
+ hasNewBg = false;
+ this.coverSwitch = false;
+ }.bind(this);
+ this.eInfoCover.appendChild(newCover);
+ } else if(hasOldCover) {
+ oldCover.style.opacity = '0';
+ setTimeout(function() {
+ this.eInfoCover.removeChild(oldCover);
+ this.coverSwitch = false;
+ }.bind(this), 500);
+ } else {
+ this.coverSwitch = false;
+ }
+};
+fnp.ui.removeCover = function() {
+ this.switchCover('');
+};
+fnp.ui.setTitle = function(title, url) {
this.eInfoTitle.textContent = (title || '').toString();
- this.eInfoArtist.textContent = (artist || '').toString();
- this.eInfoUser.textContent = (user || '').toString();
+ if(url) this.eInfoTitle.href = url.toString();
+};
+fnp.ui.setArtist = function(title, url) {
+ this.eInfoArtist.textContent = (title || '').toString();
+ if(url) this.eInfoArtist.href = url.toString();
+};
+fnp.ui.setCurrentUser = function(title, url) {
+ this.eInfoUser.textContent = (title || '').toString();
+ if(url) this.eInfoUser.href = url.toString();
+};
+fnp.ui.setNowListening = function(state) {
this.eInfoFlags.innerHTML = '';
- if(now) {
+ if(state) {
var nowIcon = document.createElement('span');
nowIcon.className = 'fa fa-music';
nowIcon.title = 'Now playing';