Add blurred artwork to player if available

src/components/Player.astro

@@ -34,30 +34,43 @@ const initialQueue = await Promise.all(
     };
   })
 );
+
+const playerArtworkBlur = "10px";
+const playerArtworkOpacity = 0.4;
 ---
 
 <div
   id="player"
   class:list={[
-    "fixed right-0 bottom-0 left-0 z-100 bg-black shadow-lg/75 md:right-3 md:bottom-3 md:left-3 md:rounded",
+    "fixed right-0 bottom-0 left-0 z-100 overflow-hidden bg-black shadow-lg/75 md:right-3 md:bottom-3 md:left-3 md:rounded",
     height
   ]}
   transition:persist=""
   transition:name="player"
   transition:animate="none"
 >
+  <div
+    id="player:artwork:background"
+    class="absolute top-0 right-0 bottom-0 left-0 -z-90"
+  >
+  </div>
   <div
     id="player:time:progress"
-    class="relative top-0 right-0 left-0 m-0 h-2 w-full rounded-t bg-gray-900 p-0 hover:cursor-pointer"
+    class="relative top-0 right-0 left-0 m-0 h-2 w-full rounded-t p-0 hover:cursor-pointer"
   >
+    <div
+      id="player:time:progress:background"
+      class="absolute top-0 left-0 m-0 h-full w-full bg-gray-900 p-0 opacity-50"
+    >
+    </div>
     <div
       id="player:time:progress:buffered"
-      class="absolute top-0 left-0 m-0 h-full bg-gray-700 p-0"
+      class="absolute top-0 left-0 m-0 h-full bg-gray-700 p-0 opacity-50"
     >
     </div>
     <div
       id="player:time:progress:played"
-      class="from-primary to-primary-50 absolute top-0 left-0 m-0 h-full bg-gradient-to-r p-0"
+      class="from-primary to-primary-50 absolute top-0 left-0 m-0 h-full bg-gradient-to-r p-0 opacity-100"
     >
     </div>
   </div>
@@ -95,7 +108,10 @@ const initialQueue = await Promise.all(
 <div class:list={[height, "bg-gray-900"]}></div>
 
 <script is:inline src="/js/howler.min.js"></script>
-<script is:inline define:vars={{ initialQueue }}>
+<script
+  is:inline
+  define:vars={{ initialQueue, playerArtworkBlur, playerArtworkOpacity }}
+>
   /**
    * Player class containing the state of our playlist and where we are in it.
    * Includes all methods for playing, skipping, updating the display, etc.
@@ -126,6 +142,9 @@ const initialQueue = await Promise.all(
           bar: document.getElementById("player:time:progress"),
           buffered: document.getElementById("player:time:progress:buffered"),
           played: document.getElementById("player:time:progress:played")
+        },
+        artwork: {
+          background: document.getElementById("player:artwork:background")
         }
       };
 
@@ -137,6 +156,18 @@ const initialQueue = await Promise.all(
         Math.round(playlist[this.index].duration)
       );
 
+      if (playlist[this.index].metadata.artwork) {
+        this.UI.artwork.background.style.backgroundImage = `url('${playlist[this.index].metadata.artwork.src}')`;
+        this.UI.artwork.background.style.backgroundSize = "cover";
+        this.UI.artwork.background.style.backgroundPosition = "center";
+        this.UI.artwork.background.style.filter = `blur(${playerArtworkBlur})`;
+        this.UI.artwork.background.style.opacity = playerArtworkOpacity;
+      } else {
+        this.UI.artwork.background.style.backgroundImage = "";
+        this.UI.artwork.background.style.filter = "";
+        this.UI.artwork.background.style.opacity = "0";
+      }
+
       this.UI.controls.play.addEventListener("click", function () {
         window.player.play();
       });
@@ -218,6 +249,18 @@ const initialQueue = await Promise.all(
       );
       this.UI.progress.buffered.style.width = "0%";
 
+      if (data.metadata.artwork) {
+        this.UI.artwork.background.style.backgroundImage = `url('${data.metadata.artwork.src}')`;
+        this.UI.artwork.background.style.backgroundSize = "cover";
+        this.UI.artwork.background.style.backgroundPosition = "center";
+        this.UI.artwork.background.style.filter = `blur(${playerArtworkBlur})`;
+        this.UI.artwork.background.style.opacity = playerArtworkOpacity;
+      } else {
+        this.UI.artwork.background.style.backgroundImage = "";
+        this.UI.artwork.background.style.filter = "";
+        this.UI.artwork.background.style.opacity = "0";
+      }
+
       // Keep track of the index we are currently playing.
       this.index = index;
     }