From e46c2ab60d88516ff45abcd9e0cc95285e64f7db Mon Sep 17 00:00:00 2001
From: afterlifepro <vielle.dev@proton.me>
Date: Fri, 25 Jul 2025 17:09:57 +0100
Subject: [PATCH] Update now playing in place

---
 src/components/playing/NowPlaying.astro | 32 ++++---------------------
 1 file changed, 5 insertions(+), 27 deletions(-)

diff --git a/src/components/playing/NowPlaying.astro b/src/components/playing/NowPlaying.astro
index 4993650..4230529 100644
--- a/src/components/playing/NowPlaying.astro
+++ b/src/components/playing/NowPlaying.astro
@@ -185,40 +185,21 @@ const track = await spotifyNowPlaying().catch((err) => {
 
 <script>
   import {
-    type SpotifyError,
     type nowPlaying,
     isNowPlaying,
-    isSpotifyError,
-    type SpotifyErrorInit,
   } from "./spotify/client";
 
   const nowPlayingEl = document.getElementById("now-playing");
   if (!nowPlayingEl) throw new Error("Could not find #now-playing");
+  const art = nowPlayingEl.querySelector(".art")
+  if (!art || !(art instanceof HTMLImageElement)) throw new Error("Could not find #now-playing img.art");
 
   const renderNowPlaying = (playing: Exclude<nowPlaying, null>) => {
-    nowPlayingEl.innerHTML = `
-      Now playing:
-      <img
-        src=${
-          playing.album.images.sort(
-            (a, b) => b.width + b.height - (a.width + a.height),
-          )[0].url
-        }
-        alt=""
-      />
-      ${playing.name} by ${playing.artists.map((x) => x.name).join(",")}`;
+    art.src = playing.album.images[0].url
   };
 
   const renderSilent = () => {
-    nowPlayingEl.innerHTML = "Nothing is playing :(";
-  };
-
-  const renderError = (err: SpotifyError | SpotifyErrorInit) => {
-    nowPlayingEl.innerHTML = `
-      Error occurred ${err.code} - ${err.human} <br />
-      <code style="word-wrap: break-word;">
-        ${JSON.stringify(err.details)}
-      </code>`;
+    art.src = "https://undefined/"
   };
 
   const events = new EventSource("/now-playing-sse");
@@ -232,10 +213,7 @@ const track = await spotifyNowPlaying().catch((err) => {
     if (isNowPlaying(playing) && playing !== null)
       return renderNowPlaying(playing);
 
-    // check if its an error
-    if (isSpotifyError(playing)) return renderError(playing);
-
-    // server sent strange response
+    // server sent strange/error response
     console.error("Unexpected value sent from server:", playing)
     // continue as normal as the previous value WAS ok
   });
-- 
2.54.0