Links and fading cover.
This commit is contained in:
parent
2a4cd3c3b3
commit
d8c217a986
4 changed files with 106 additions and 22 deletions
|
@ -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"};
|
||||
|
|
|
@ -31,12 +31,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="container__user hidden" id="user">
|
||||
<div class="cover">
|
||||
<div class="cover__image" id="np_cover"></div>
|
||||
</div>
|
||||
<div class="cover" id="np_cover"></div>
|
||||
<div class="info">
|
||||
<div class="info__title" id="np_title"></div>
|
||||
<div class="info__artist" id="np_artist"></div>
|
||||
<a class="info__title" id="np_title" target="_blank" rel="noopener"></a>
|
||||
<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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
101
public/now.js
101
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';
|
||||
|
|
Loading…
Reference in a new issue