add lastfm now playing
This commit is contained in:
Penelope Gwen
parent
fa5d17e730
commit
be9ea3eeec
2 changed files with 159 additions and 0 deletions
77
style/css/lastfm-nowplaying.css
Normal file
77
style/css/lastfm-nowplaying.css
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
/*.now-playing {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0px;
|
||||
top: calc(50vh - (min(20vw, calc(100vh - 30px)) / 2, 400px));
|
||||
z-index: 1001;
|
||||
}*/
|
||||
|
||||
a.now-playing {
|
||||
opacity: 1;
|
||||
border: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
/*a.now-playing:hover img {
|
||||
transform: scale(1.02) translateX(-0.2vw) perspective(500px) rotate3d(0, -1, 0.01, 6deg);
|
||||
}*/
|
||||
|
||||
.now-playing .np-metadata > span {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.01em;
|
||||
font-weight: 500;
|
||||
line-height: 180%;
|
||||
}
|
||||
|
||||
.now-playing .np-metadata {
|
||||
margin: auto 1vw auto;
|
||||
height: fit-content;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-out;
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
.now-playing.loaded .np-metadata {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.now-playing img {
|
||||
/* opacity: 0;
|
||||
transform: scale(0.97) translateX(10px) perspective(500px);*/
|
||||
display: block;
|
||||
margin: auto 0;
|
||||
border-radius: 8px;
|
||||
width: 25%;
|
||||
box-shadow: 0 0 25px rgba(0,0,0,0.2);
|
||||
|
||||
transition: all 1s cubic-bezier(0.13, 0.95, 0, 1), transform 2s cubic-bezier(0.13, 0.95, 0, 1);
|
||||
}
|
||||
|
||||
.now-playing.loaded img {
|
||||
opacity: 1;
|
||||
/* transform: perspective(500px) rotate3d(0, -1, 0, 4deg);*/
|
||||
}
|
||||
|
||||
.now-playing .np-metadata .np-heading {
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
opacity: 0.5;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.11em;
|
||||
}
|
||||
|
||||
.now-playing .np-metadata .np-roon {
|
||||
width: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.now-playing .np-metadata .breather {
|
||||
margin-right: 8px;
|
||||
display: inline-block;
|
||||
animation: pulsate 5s linear 0s infinite;
|
||||
}
|
||||
@keyframes pulsate {
|
||||
0% { transform: scale(0.2, 0.2) rotate(0deg); opacity: 0.0; }
|
||||
50% { transform: scale(1, 1) rotate(50deg); opacity: 1; }
|
||||
80% { transform: scale(1.8, 1.8) rotate(80deg); opacity: 0.2; }
|
||||
100% { transform: scale(4, 4) rotate(100deg); opacity: 0; }
|
||||
}
|
||||
82
style/js/lastfm-nowplaying.js
Normal file
82
style/js/lastfm-nowplaying.js
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
/* ********************************************************************** */
|
||||
/* OLD SCHOOL CURRENT PLAYING STUFF */
|
||||
|
||||
var LFM_API = "https://ws.audioscrobbler.com/2.0/";
|
||||
var LFM_KEY = "f6b9c4007f2969e672a18e11aa883392"; // Get one at https://secure.last.fm/login?next=/api/account/create
|
||||
var LFM_USER = "pogmommy";
|
||||
|
||||
function getNowPlaying() {
|
||||
var recentTracksUrl =
|
||||
LFM_API+"?method=user.getrecenttracks&user="+LFM_USER+"&api_key="+LFM_KEY+"+&format=json&limit=1";
|
||||
|
||||
if (window.XMLHttpRequest) {
|
||||
httpRequest = new XMLHttpRequest();
|
||||
} else if (window.ActiveXObject) {
|
||||
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
|
||||
}
|
||||
httpRequest.onreadystatechange = function() {
|
||||
if (httpRequest.readyState === XMLHttpRequest.DONE) {
|
||||
if (httpRequest.status === 200) {
|
||||
// All set
|
||||
var response = JSON.parse(httpRequest.responseText);
|
||||
console.log(response);
|
||||
var currentTrack = response.recenttracks.track[0];
|
||||
|
||||
// Check if it's the same, if not then rerender
|
||||
if (!window.nowPlaying || window.nowPlaying.mbid != currentTrack.mbid) {
|
||||
window.nowPlaying = currentTrack;
|
||||
renderNowPlaying(currentTrack);
|
||||
}
|
||||
setTimeout(getNowPlaying, 60*1000);
|
||||
} else {
|
||||
console.log('There was a problem with the last.fm request.');
|
||||
}
|
||||
}
|
||||
};
|
||||
httpRequest.open('GET', recentTracksUrl, true);
|
||||
httpRequest.send();
|
||||
}
|
||||
|
||||
|
||||
var nowPlayingNode = null;
|
||||
var nowPlayingBorder = null;
|
||||
|
||||
function renderNowPlaying(track) {
|
||||
console.log(track);
|
||||
if (nowPlayingBorder) {
|
||||
nowPlayingBorder.remove();
|
||||
}
|
||||
if (nowPlayingNode) {
|
||||
nowPlayingNode.remove();
|
||||
}
|
||||
nowPlayingBorder = document.createElement("hr");
|
||||
nowPlayingNode = document.createElement("a");
|
||||
nowPlayingNode.setAttribute("class", "flexrow now-playing");
|
||||
|
||||
var imageurl = track.image.slice(-1)[0]["#text"];
|
||||
var nowPlayingImage = document.createElement("img");
|
||||
nowPlayingImage.setAttribute("src", imageurl);
|
||||
nowPlayingNode.appendChild(nowPlayingImage);
|
||||
|
||||
// Add more stuff to the display
|
||||
|
||||
var currently = track["@attr"] && track["@attr"].nowplaying == "true";
|
||||
|
||||
var metadata = document.createElement("div");
|
||||
metadata.setAttribute("class", "np-metadata");
|
||||
metadata.innerHTML =
|
||||
"<span class=\"sidebar-caption np-heading\">" + (currently ? "<span class=\"breather\">◉</span> Now Playing" : "Latest Track") + "</span>" +
|
||||
"<span class=\"sidebar-caption np-title\"><strong>"+track.name+"</strong></span>" +
|
||||
"<span class=\"sidebar-caption np-artist\">"+track.artist["#text"]+"</span>";
|
||||
nowPlayingNode.appendChild(metadata);
|
||||
|
||||
nowPlayingNode.setAttribute("href", track.url);
|
||||
|
||||
//document.body.appendChild(nowPlayingNode);
|
||||
document.getElementById("nowplaying-placeholder").appendChild(nowPlayingBorder)
|
||||
document.getElementById("nowplaying-placeholder").appendChild(nowPlayingNode);
|
||||
|
||||
setTimeout(function() {
|
||||
nowPlayingNode.setAttribute("class", "flexrow now-playing loaded");
|
||||
}, 100);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue