Re add the javascript update logic

src/components/home/playing/NowPlaying.astro

···
     }
   }
 </style>
+<script>
+  /***********
+   * IMPORTS *
+   ***********/
+
+  import { isNowPlaying, type nowPlaying } from "./spotify/client";
+
+  /*************
+   * FUNCTIONS *
+   *************/
+
+  // utility
+  function elIs<T extends typeof Element>(
+    el: Element | null,
+    is: T,
+    name?: string,
+  ): T["prototype"] {
+    if (!(el instanceof is))
+      throw new Error(
+        (name ? name : "Node") +
+          " did not match type " +
+          is.name +
+          ".\nFound type " +
+          el,
+      );
+    return el;
+  }
+
+  function querySelector<T extends typeof Element>(
+    parent: Element,
+    selector: string,
+    is: T,
+  ): T["prototype"];
+  function querySelector<T extends typeof Element>(
+    selector: string,
+    is: T,
+  ): T["prototype"];
+  function querySelector<T extends typeof Element>(
+    el: Element | null,
+    is: T,
+    name?: string,
+  ): T["prototype"];
+  function querySelector<T extends typeof Element>(
+    arg1: Element | string | null,
+    arg2: T | string,
+    arg3?: T | string,
+  ): T["prototype"] {
+    const element =
+      arg1 instanceof Element && typeof arg2 === "string"
+        ? arg1.querySelector(arg2)
+        : typeof arg1 === "string"
+          ? document.querySelector(arg1)
+          : arg1;
+
+    const is = typeof arg2 !== "string" ? arg2 : arg3;
+    if (!is || typeof is === "string")
+      throw new Error("parameter is: invalid value: " + is);
+
+    const name =
+      typeof arg3 === "string"
+        ? arg3
+        : typeof arg2 === "string"
+          ? arg2
+          : typeof arg1 === "string"
+            ? arg1
+            : undefined;
+
+    return elIs<T>(element, is, name);
+  }
+
+  function querySelectorAll<T extends typeof Element>(
+    parent: Element,
+    selector: string,
+    is: T,
+  ): NodeListOf<T["prototype"]>;
+  function querySelectorAll<T extends typeof Element>(
+    selector: string,
+    is: T,
+  ): NodeListOf<T["prototype"]>;
+  function querySelectorAll<T extends typeof Element>(
+    el: NodeListOf<Element>,
+    is: T,
+    name?: string,
+  ): NodeListOf<T["prototype"]>;
+  function querySelectorAll<T extends typeof Element>(
+    arg1: Element | string | NodeListOf<Element>,
+    arg2: T | string,
+    arg3?: T | string,
+  ): NodeListOf<T["prototype"]> {
+    const nodeList =
+      typeof arg1 === "string"
+        ? document.querySelectorAll(arg1)
+        : arg1 instanceof NodeList
+          ? arg1
+          : arg1.querySelectorAll(
+              typeof arg2 === "string" ? arg2 : (undefined as never),
+            );
+
+    const is = typeof arg2 !== "string" ? arg2 : arg3;
+    if (!is || typeof is === "string")
+      throw new Error("parameter is: invalid value: " + is);
+
+    const name =
+      typeof arg3 === "string"
+        ? arg3
+        : typeof arg2 === "string"
+          ? arg2
+          : typeof arg1 === "string"
+            ? arg1
+            : undefined;
+
+    nodeList.forEach((el) => elIs(el, is, name));
+
+    return nodeList;
+  }
+
+  /*************************
+   * HTMLNowPlayingElement *
+   *************************/
+
+  class HTMLNowPlayingElement extends HTMLElement {
+    // load elements and throw if wrong type
+    elements = {
+      title: querySelector(this, "[slot=title]", HTMLAnchorElement),
+      album: querySelector(this, "[slot=album]", HTMLSpanElement),
+      artists: querySelector(this, "[slot=artists]", HTMLSpanElement),
+      art: querySelector(this, "[slot=art]", HTMLImageElement),
+    };
+
+    updateMetadata(playing: Exclude<nowPlaying, null>) {
+      // title can be updated without distrupting focus
+      this.elements.title.innerText = playing.name;
+      this.elements.title.href = playing.href;
+
+      // same for album
+      this.elements.album.innerText = playing.album;
+
+      // same for art
+      this.elements.art.src = playing.art;
+
+      const artistLen = this.elements.artists.children.length;
+
+      // artists is more complex, as focus needs to be maintained.
+      const replaceArtists = playing.artists.slice(0, artistLen);
+      // slice uses array.length if end is >= array.length
+      // so we need to padd it out
+      replaceArtists.push(
+        ...new Array(artistLen - replaceArtists.length).fill(undefined),
+      );
+      const addArtists = playing.artists.slice(artistLen);
+
+      let lastValidArtist = elIs(
+        this.elements.artists.children[0],
+        HTMLElement,
+        "artist",
+      );
+      replaceArtists.forEach((artist, i) => {
+        // if this index exists in both arrays, update in place
+        // this respects focus and shouldnt cause issues
+        const el = elIs(this.elements.artists.children[i], HTMLAnchorElement);
+        if (artist) {
+          el.innerHTML = artist.name;
+          el.href = artist.href;
+          // update last valid for moving focus too if needed
+          lastValidArtist = el;
+        }
+
+        // if index exists in old array but not new array
+        if (!artist) {
+          if (document.activeElement === el) lastValidArtist.focus();
+          // essentially destroy it
+          el.remove();
+        }
+      });
+
+      // this is safe to stick direct in DOM
+      // this is when the new artist count > old artist count
+      this.elements.artists.append(
+        ...addArtists.map((artist) => {
+          const a = document.createElement("a");
+
+          a.innerText = artist.name;
+          a.href = artist.href;
+
+          return a;
+        }),
+      );
+
+      // remove the inline display value/render as we are handling it via inline styles now
+      this.style.removeProperty("display");
+      delete this.dataset.render;
+    }
+
+    nothingPlaying() {
+      // dont let it show up if nothing is playing
+      this.style.setProperty("display", "none");
+    }
+  }
+  customElements.define("now-playing", HTMLNowPlayingElement);
+
+  /************
+   * ELEMENTS *
+   ************/
+
+  const elements = {
+    spinner: Array.from(querySelectorAll(".player .spinner", HTMLDivElement)),
+    recordArt: querySelector(".record .art", HTMLImageElement),
+    nowPlaying: querySelector("now-playing", HTMLNowPlayingElement),
+    player: querySelector(".player", HTMLElement),
+  };
+
+  if (elements.spinner.length !== 2)
+    throw new Error("Must have 2 `.spinner` elements!");
+
+  /**************
+   * ANIMATIONS *
+   **************/
+
+  // delete css animations since we r going to use our own
+  elements.spinner.forEach((el) =>
+    el.getAnimations().forEach((anim) => anim.cancel()),
+  );
+
+  const playHeadAnimation = [
+    {
+      rotate: "0deg",
+    },
+    {
+      rotate: "25deg",
+      offset: 0.05,
+    },
+    {
+      rotate: "45deg",
+      offset: 0.7,
+    },
+    {
+      rotate: "45deg",
+      offset: 0.75,
+    },
+    {
+      rotate: "0deg",
+      offset: 0.8,
+    },
+  ];
+
+  // start state is infered
+  const goToStartAnimation = [{ rotate: "0deg" }];
+
+  const animations = elements.spinner.map((el) =>
+    el.animate(playHeadAnimation, {
+      duration: 30 * 1000,
+      fill: "forwards",
+      iterations: Infinity,
+    }),
+  );
+
+  if (elements.player.dataset.playing === "false") {
+    // dont play animations
+    animations.forEach((anim) => anim.pause());
+  }
+
+  /************
+   * LISTENER *
+   ************/
+
+  let prev: nowPlaying = null;
+
+  const ev = new EventSource("/now-playing-sse");
+
+  // close event source safely
+  window.addEventListener("beforeunload", () => ev.close());
+
+  let i = -1;
+  ev.addEventListener("playing", (event) => {
+    i++;
+    const data = (() => {
+      try {
+        return JSON.parse(event.data);
+      } catch (e) {
+        return e;
+      }
+    })();
+    if (!isNowPlaying(data))
+      return console.warn("Unexpected package from server:", data, event.data);
+
+    // data is valid nowPlayingData
+    try {
+      if (
+        !(
+          // first call so assume prev is in an invalid state (which it is)
+          (
+            i === 0 ||
+            // if both are null, quit since re-rendering is pointless
+            data == prev ||
+            // now if both are valid play items, so check the ID for equality
+            (data !== null && prev !== null && data.id === prev.id)
+          )
+        )
+      ) {
+        // there is now a difference between the previous setting and the new setting
+        // so it is worth updating the UI
+
+        // spinner head animation:
+        // 1. pause current animation.
+        animations.forEach((anim) => anim.pause());
+        elements.spinner.forEach((el) =>
+          // 2. send the playback head to the start
+          el
+            .animate(goToStartAnimation, {
+              duration: 2.5 * 1000,
+              easing: "ease-in-out",
+            })
+            // 3. when the playback head is at the start
+            .finished.then(async () => {
+              // 4. update the record art
+              elements.recordArt.src = data
+                ? data?.art
+                : "https://undefined";
+
+              // 5. update popup
+              if (data) elements.nowPlaying.updateMetadata(data);
+              else elements.nowPlaying.nothingPlaying();
+
+              // 6. reset the position of the infinite animation
+              animations.forEach((anim) => (anim.currentTime = 0));
+
+              // 7. if new track is not null then, after 2s
+              if (data)
+                setTimeout(() => {
+                  // 8. resume the infinite animation
+                  animations.forEach((anim) => anim.play());
+                }, 2000);
+
+              // 9. make sure the record is in the right state (playing or paused)
+              elements.player.dataset.playing = data ? "true" : "false";
+            }),
+        );
+      }
+    } finally {
+      prev = data;
+    }
+  });
+</script>