From 564f2d47b42f7a1370182c5a80d188301348079c Mon Sep 17 00:00:00 2001
From: Mark Hoekveen <mark@hoekveen.net>
Date: Sun, 17 Aug 2025 18:03:50 +0200
Subject: [PATCH 1/3] spotify player

---
 frontend/src/app/lobby/page.tsx         | 27 +++++++++++++++++++
 frontend/src/app/style.css              |  5 ++++
 frontend/src/contexts/SpotifyIframe.tsx | 35 +++++++++++++++++++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 frontend/src/contexts/SpotifyIframe.tsx

diff --git a/frontend/src/app/lobby/page.tsx b/frontend/src/app/lobby/page.tsx
index 7189fbe..90af87a 100644
--- a/frontend/src/app/lobby/page.tsx
+++ b/frontend/src/app/lobby/page.tsx
@@ -7,6 +7,7 @@ import { useAuth } from "react-oidc-context";
 import { useSession } from "muzak/contexts/SessionContext";
 import { getUser, api, Track } from "muzak/data/fetcher";
 import getSessionId from "muzak/data/session";
+import { useSpotifyIframe } from "muzak/contexts/SpotifyIframe";
 
 const nunito = Nunito({
   weight: "900",
@@ -24,8 +25,10 @@ export default function Lobby() {
   const [sessionState, setSessionState] = useState("lobby");
   const [currentSong, setCurrentSong] = useState<Track>();
   const [songLoading, setSongLoading] = useState(false);
+  const [spotifyId, setSpotifyId] = useState<string | null>(null);
   const auth = useAuth();
   const user = getUser();
+  const controller = useSpotifyIframe();
 
   // Main message handler and dispatcher
   function onMessage(e) {
@@ -165,6 +168,7 @@ export default function Lobby() {
     } else {
       nextTrack();
     }
+    setSpotifyId(session?.current_track);
     setSongLoading(false);
   }
 
@@ -178,9 +182,26 @@ export default function Lobby() {
     );
   }
 
+  // Spotify Player stuff
+  useEffect(() => {
+    if (controller) {
+      console.log("Loaded track:", spotifyId);
+      controller.loadUri(`spotify:track:${spotifyId}`);
+      controller.play();
+    } else {
+      console.log("Spotify player not initialized");
+    }
+  }, [controller, spotifyId]);
+  async function playTrack() {
+    controller.play();
+  }
+
   if (sessionState == "lobby") {
     return (
       <main className="relative flex min-h-screen flex-col items-center justify-between p-24">
+        <div className="absolute top-[-1000px]">
+          <div id="splayer"></div>
+        </div>
         <div>
           <h1
             className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
@@ -253,6 +274,12 @@ export default function Lobby() {
           </div>
 
           <div className="flex flex-1 flex-row items-center justify-end gap-4">
+            <button
+              className="w-30 rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
+              onClick={playTrack}
+            >
+              PLAY
+            </button>
             <Link
               href="/pause"
               className="w-30 rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
diff --git a/frontend/src/app/style.css b/frontend/src/app/style.css
index 9dbb716..02827fa 100644
--- a/frontend/src/app/style.css
+++ b/frontend/src/app/style.css
@@ -41,3 +41,8 @@
 .text-outline-small {
   -webkit-text-stroke: 1px black;
 }
+
+iframe {
+  position: absolute;
+  top: -1000px;
+}
diff --git a/frontend/src/contexts/SpotifyIframe.tsx b/frontend/src/contexts/SpotifyIframe.tsx
new file mode 100644
index 0000000..25fae8e
--- /dev/null
+++ b/frontend/src/contexts/SpotifyIframe.tsx
@@ -0,0 +1,35 @@
+"use client";
+import { useEffect, useState } from "react";
+export const useSpotifyIframe = () => {
+  const [controller, setController] = useState(null);
+  const elementId = "splayer";
+  useEffect(() => {
+    const script = document.createElement("script");
+    const spotifyScriptUrl = "https://open.spotify.com/embed/iframe-api/v1";
+    const spotifyScriptElementId = "spotify-iframe-api";
+    script.id = spotifyScriptElementId;
+    script.setAttribute("id", spotifyScriptElementId);
+    script.src = spotifyScriptUrl;
+    document.body.appendChild(script);
+
+    script.onload = () => {
+      window.onSpotifyIframeApiReady = (IFrameAPI) => {
+        const element = document.getElementById(elementId);
+        const options = {
+          width: 400,
+          height: 400,
+        };
+        const callback = (EmbedController) => {
+          setController(EmbedController);
+        };
+        IFrameAPI.createController(element, options, callback);
+      };
+    };
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return controller;
+};

From cfb6b2609b47a12cd5bafd196f45ae54c5351e06 Mon Sep 17 00:00:00 2001
From: Mark Hoekveen <mark@hoekveen.net>
Date: Sun, 17 Aug 2025 20:25:47 +0200
Subject: [PATCH 2/3] ignores logs

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 79e9c33..c3fd7ae 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ wallpapers/
 frontend/node_modules/
 frontend/.next/
 frontend/src/data/types.ts
+backend/session_*.log

From bd71bce450fcf120bbd5abbfc8c649174df0796b Mon Sep 17 00:00:00 2001
From: Mark Hoekveen <mark@hoekveen.net>
Date: Sun, 17 Aug 2025 20:28:19 +0200
Subject: [PATCH 3/3] fixes compilation

---
 frontend/src/contexts/SpotifyIframe.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/contexts/SpotifyIframe.tsx b/frontend/src/contexts/SpotifyIframe.tsx
index 25fae8e..3b3b83a 100644
--- a/frontend/src/contexts/SpotifyIframe.tsx
+++ b/frontend/src/contexts/SpotifyIframe.tsx
@@ -13,7 +13,7 @@ export const useSpotifyIframe = () => {
     document.body.appendChild(script);
 
     script.onload = () => {
-      window.onSpotifyIframeApiReady = (IFrameAPI) => {
+      (window as any).onSpotifyIframeApiReady = (IFrameAPI) => {
         const element = document.getElementById(elementId);
         const options = {
           width: 400,