invisible bitbar plugin to be used with plash to generate desktop background's from the artwork of Spotify's currently playing

index.html

<img id="artwork" style="height:90vmin;width:90vmin;top:calc(50% - 45vmin);left:calc(50% - 45vmin);border-style:solid;border-width:5px;border-color:black;" src="./artwork.jpeg"/>
<img id="background" style="/*display:none;*/z-index:-1;height:calc(100vmax + 3rem);width:calc(100vmax + 3rem);top:calc(50% - 50vmax - 1.5rem);left:calc(50% - 50vmax - 1.5rem);filter:blur(2rem)" src="./artwork.jpeg">
<style>img{
  position:fixed;
}</style>
<script>
  const img = document.getElementById('artwork');
  const bg = document.getElementById('background');
  window.setInterval(()=>{
    img.src=bg.src=`artwork.jpeg?time=${Date.now()}`
  },10*1000)
</script>

plashify.10s.sh

#!/bin/bash

function nowplayingartwork(){
osascript -l JavaScript<<'END'
const spotify = Application('spotify')
if(spotify.running()){
  try{
    const { artworkUrl } = spotify.currentTrack
    artworkUrl()
  }
  catch(e){'💚';e}
}
else '💚'
END
}
function nowplaying(){
  np=$(nowplayingartwork)
  image="$dir/plashify/artwork.jpeg"
  url="$dir/plashify/url"
  touch "$image"
  touch "$url"
  if [[ $np ]];then
    if [ $(head -1 "$url") != $np ];then
      echo "$np" > "$url"
      curl "$np" -s --output "$image"
    fi
  fi
  
}
dir=$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )
# echo "$dir"

nowplaying

Plash no longer needs to reload the whole page (getting rid of terrible flickering), with a set timeout to reload our image

For extra dumb-ness, make the artwork look like a vinyl record (and for bonus points, animate it spin)

<img
  id="artwork"
  style="height:30vmin;width:30vmin;top:calc(50% - 50vmin);left:calc(50% - 47.5vmin);border-style:solid;border-width:35vmin;border-color:black;border-radius:50%"
  src="./artwork.jpeg"
/>