spotify player

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"