Links and fading cover.

public/get.php

@@ -106,6 +106,7 @@ switch($format) {
                 $track->artist = new stdClass;
                 $track->artist->name = $recentTrack->artist?->{"#text"} ?? '';
                 $track->artist->mbid = $recentTrack->artist?->mbid ?? '';
+                $track->artist->url = explode('/_/', $track->url, 2)[0];
 
                 $track->album = new stdClass;
                 $track->album->name = $recentTrack->album?->{"#text"};

public/index.html

@@ -31,12 +31,10 @@
                 </div>
             </div>
             <div class="container__user hidden" id="user">
-                <div class="cover">
+                <div class="cover" id="np_cover"></div>
-                    <div class="cover__image" id="np_cover"></div>
-                </div>
                 <div class="info">
-                    <div class="info__title" id="np_title"></div>
+                    <a class="info__title" id="np_title" target="_blank" rel="noopener"></a>
-                    <div class="info__artist" id="np_artist"></div>
+                    <a class="info__artist" id="np_artist" target="_blank" rel="noopener"></a>
                     <div class="info__flags" id="np_flags"></div>
                     <div class="info__user">
                         <div class="info__user-back" id="np_back">Back</div>

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 {
+.cover img {
-    background: none no-repeat center / cover rgba(17, 17, 17, 0.8);
+    position: absolute;
-    width: 300px;
+    top: 0;
-    height: 300px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    will-change: z-index, opacity;
+    opacity: 1;
+    transition: opacity .5s;
 }
 
 .info {

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;
+            var coverUrl = response[0].images.extralarge;
-            if(cover.length < 1 || cover === this.defaultCoverLfm)
+            if(coverUrl.length < 1 || coverUrl === this.defaultCoverLfm)
-                cover = this.defaultCoverFnp;
+                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) {
+fnp.ui.setCover = function(coverUrl) {
-    this.setBackground(cover);
+    this.switchCover(coverUrl);
-    this.eInfoCover.style.backgroundImage = 'url(\'' + (cover || '').toString() + '\')';
+};
+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();
+    if(url) this.eInfoTitle.href = url.toString();
-    this.eInfoUser.textContent = (user || '').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';