diff --git a/style/css/lastfm-nowplaying.css b/style/css/lastfm-nowplaying.css new file mode 100644 index 0000000..fb2e295 --- /dev/null +++ b/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; } +} diff --git a/style/js/lastfm-nowplaying.js b/style/js/lastfm-nowplaying.js new file mode 100644 index 0000000..cbd7bbe --- /dev/null +++ b/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 = + "" + (currently ? " Now Playing" : "Latest Track") + "" + + ""+track.name+"" + + ""+track.artist["#text"]+""; + 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); +}