add lastfm now playing

style/css/lastfm-nowplaying.css

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

style/js/lastfm-nowplaying.js

@@ -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);
+}