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"

frontend/src/app/style.css

@@ -41,3 +41,8 @@
 .text-outline-small {
   -webkit-text-stroke: 1px black;
 }
+
+iframe {
+  position: absolute;
+  top: -1000px;
+}

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;
+};