chore: nowplaying interactivity

src/components/blocks/NowPlaying.astro

@@ -1,24 +0,0 @@
----
-import { fetchNowPlaying } from "@utils/data/nowPlaying.js";
-
-const isProduction = import.meta.env.MODE === "production";
-const nowPlayingData = await fetchNowPlaying();
----
-
-<span class="loading client-side" id="now-playing-content" set:html={nowPlayingData.content}></span>
-<noscript>
-  <p>{nowPlayingData.content}</p>
-</noscript>
-
-{isProduction && (<script type="module" is:inline>
-  async function updateNowPlaying() {
-    const response = await fetch("/api/now-playing");
-    if (response.ok) {
-      const data = await response.json();
-      document.getElementById("now-playing-content").innerHTML = data.content;
-    }
-  }
-
-  setInterval(updateNowPlaying, 180000);
-  updateNowPlaying();
-</script>)}

src/components/blocks/NowPlaying.jsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+
+export default function NowPlaying({ staticContent }) {
+  const [nowPlaying, setNowPlaying] = useState(staticContent);
+
+  useEffect(() => {
+    if (import.meta.env.MODE !== "production") return;
+
+    async function fetchNowPlaying() {
+      try {
+        const response = await fetch("/api/now-playing");
+        if (response.ok) {
+          const data = await response.json();
+          setNowPlaying(data.content);
+        } else {
+          setNowPlaying("Nothing playing.");
+        }
+      } catch (error) {
+        console.error("Error fetching now playing:", error);
+        setNowPlaying("Unable to fetch data.");
+      }
+    }
+
+    fetchNowPlaying();
+    const interval = setInterval(fetchNowPlaying, 180000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <span className="now-playing">
+      <span dangerouslySetInnerHTML={{ __html: nowPlaying }} />
+    </span>
+  );
+}

src/components/home/Intro.astro

@@ -1,10 +1,20 @@
 ---
-import NowPlaying from "@components/blocks/NowPlaying.astro";
+import NowPlaying from "@components/blocks/NowPlaying.jsx";
+import { fetchNowPlaying } from "@utils/data/nowPlaying.js";
 
 const { intro } = Astro.props;
+
+let nowPlayingStaticContent = "Nothing playing.";
+
+if (import.meta.env.MODE === "development") {
+  const nowPlayingData = await fetchNowPlaying();
+  nowPlayingStaticContent = nowPlayingData.content;
+}
 ---
 
 <article class="intro">
   <div set:html={intro} />
-  <p class="music"><NowPlaying /></p>
+  <p class="music">
+    <NowPlaying staticContent={nowPlayingStaticContent} client:load />
+  </p>
 </article>