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(); const [songLoading, setSongLoading] = useState(false); + const [spotifyId, setSpotifyId] = useState(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 (
+
+
+

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