player.min.html

<table id=player style=background-color:#111;color:#fff;font-family:Helvetica,Arial;font-size:5vmin;border-radius:10px;filter:opacity(.8);width:100%;height:100%><tr height=100%><td width=20% align=center> <img id=player-album-art style=margin:1em;max-height:50vmin;border-radius:10px></td><td width=80%><div style="margin:1em 1em 1em 0"><div id=player-song style=font-size:2em></div><div id=player-artist style=font-size:1.3em;margin-bottom:1em></div> <a id=player-song-link href="" target=_blank style="color:#fff;text-decoration:none;border:1px solid #fff;border-radius:10px;padding:.2em;margin-right:.2em"> 🎵 Song </a> <a id=player-artist-link href="" target=_blank style="color:#fff;text-decoration:none;border:1px solid #fff;border-radius:10px;padding:.2em;margin-right:.2em"> 🧑‍🎤 Artist</a> <a id=player-album-link href="" target=_blank style="color:#fff;text-decoration:none;border:1px solid #fff;border-radius:10px;padding:.2em;margin-right:.2em"> 💽 Album</a> <a id=player-mp3-link href="" target=_blank style="color:#fff;text-decoration:none;border:1px solid #fff;border-radius:10px;padding:.2em;margin-right:.2em"> 📻 MP3</a><div id=player-status style="margin:2em 0 1em 0"></div><div id=player-time style=position:relative;float:right;top:-2em;font-weight:700></div><div id=player-progress-back style="border:.15em solid #eee;height:1em;border-radius:10px"><div id=player-progress style="background-color:#eee;border:.1em solid transparent;height:.75em;border-radius:10px;transition:width .2s"></div></div><div style=float:right;font-size:.9em> 👾 <a href=https://github.com/Naushikha/Spotify-Widget target=_blank style=color:#fff>Spotify-Widget</a> by <a href=https://naushikha.com target=_blank style=color:#fff>Naushikha</a> 💀</div></div></td></tr><div id=player-background class=background style="left:0;right:0;top:0;bottom:0;z-index:-10;background-position:center center;background-size:100%;filter:blur(2em);position:absolute;transition:background-image .5s ease-in"></div></table><script>var songData,progressSeconds,totalSeconds,progressInterval,serviceHost="https://spotify.naush.workers.dev",spotifyUser="Naushikha";function updatePlayer(){fetch(`${serviceHost}/get-now-playing`).then(e=>e.json()).then(e=>{if(e.hasOwnProperty("ERROR"))return document.getElementById("player-song").innerHTML=`${spotifyUser} isn't playing anything.`,void(document.getElementById("player-artist").innerHTML="  ");songData=e,document.getElementById("player-song").innerHTML=e.item.name,document.getElementById("player-artist").innerHTML=e.item.artists[0].name,document.getElementById("player-status").innerHTML=e.is_playing?`▶️ ${spotifyUser}'s now playing...`:`⏸ ${spotifyUser} has paused.`,document.getElementById("player-album-art").setAttribute("src",e.item.album.images[1].url),document.getElementById("player-progress").setAttribute("style",document.getElementById("player-progress").getAttribute("style")+`width: ${100*e.progress_ms/e.item.duration_ms}%`),document.getElementById("player-background").style.backgroundImage=`url(${e.item.album.images[1].url})`,document.getElementById("player-song-link").setAttribute("href",e.item.external_urls.spotify),document.getElementById("player-artist-link").setAttribute("href",e.item.artists[0].external_urls.spotify),document.getElementById("player-album-link").setAttribute("href",e.item.album.external_urls.spotify),document.getElementById("player-mp3-link").setAttribute("href",e.item.preview_url),null==e.item.preview_url&&document.getElementById("player-mp3-link").setAttribute("style","display: none;"),progressSeconds=Math.ceil(songData.progress_ms/1e3),totalSeconds=Math.ceil(songData.item.duration_ms/1e3),songData.is_playing?progressInterval=setInterval(setProgress,1e3):setProgress(),document.getElementById("player").clientWidth<410&&(document.getElementById("player-song-link").style.display="none",document.getElementById("player-artist-link").style.display="none",document.getElementById("player-album-link").style.display="none",document.getElementById("player-mp3-link").style.display="none",document.getElementById("player-time").style.display="none")})}function setProgress(){if(progressSeconds>totalSeconds)return clearInterval(progressInterval),void updatePlayer();++progressSeconds;var e=pad(parseInt(totalSeconds/60))+":"+pad(totalSeconds%60),t=pad(parseInt(progressSeconds/60))+":"+pad(progressSeconds%60);document.getElementById("player-time").innerHTML=t+" / "+e,document.getElementById("player-progress").style.width=`${100*progressSeconds/totalSeconds}%`}function pad(e){var t=e+"";return t.length<2?"0"+t:t}updatePlayer();</script>