flash/now.flash.moe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Links and fading cover.

Browse source
This commit is contained in:
flash 2021-05-20 22:50:41 +02:00
parent 2a4cd3c3b3
commit d8c217a986
4 changed files with 106 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public/get.php
View file

@ -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"};

8
public/index.html
View file

@ -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>

18
public/now.css
View file

@ -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
View file

@ -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';