betere sessies lol lmao even

frontend/src/app/lobby/page.tsx

@@ -1,10 +1,12 @@
 "use client";
 import { useState, useEffect } from "react";
 import { Markazi_Text, Nunito } from "next/font/google";
-import users from "muzak/data/users.json";
 import Image from "next/image";
 import Link from "next/link";
+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";
 
 const nunito = Nunito({
   weight: "900",
@@ -17,34 +19,37 @@ export default function Lobby() {
   const [userList, setUserList] = useState<any[]>([]);
   const [sessionSocket, setSessionSocket] = useState<WebSocket | null>(null);
   const { sessionId, setSessionId } = useSession();
+  const [sessionState, setSessionState] = useState("lobby");
+  const [currentSong, setCurrentSong] = useState<Track>();
+  const [songLoading, setSongLoading] = useState(false);
+  const auth = useAuth();
+  const user = getUser();
 
+  // Main message handler and dispatcher
   function onMessage(e) {
-    setTimeout(() => {
-      console.log(e);
-      let data = JSON.parse(e.data);
-      for (let key in data) {
-        if (key === "joined") {
-          addUser(data[key]);
-        }
+    console.log(e);
+    let data = JSON.parse(e.data);
+    for (let key in data) {
+      if (key === "joined") {
+        addUser(data[key]);
+      } else if (key == "track") {
+        getTrack();
       }
-      console.log(data);
-    }, 1000);
+    }
+    console.log(data);
   }
 
+  // Setup session
   useEffect(() => {
-    console.log("session: ", sessionId);
-    let socket;
-    if (sessionId && !sessionSocket) {
+    //console.log("session: ", sessionId);
+    let socket: WebSocket | null;
+    if (sessionId) {
       socket = new WebSocket(
         `${process.env.NEXT_PUBLIC_WS_HOST}/voting/session/${sessionId}/`,
       );
       socket.onmessage = onMessage;
-      if (!sessionSocket) {
-        setSessionSocket(socket);
-        console.log("session made: ", sessionId);
-      } else {
-        socket.close();
-      }
+      setSessionSocket(socket);
+      // console.log("session made: ", sessionId);
     }
     return () => {
       if (socket) {
@@ -52,6 +57,21 @@ export default function Lobby() {
       }
     };
   }, [sessionId]);
+  async function setSession() {
+    const id = await getSessionId();
+    setSessionId(id);
+    console.log("Session ID:", id);
+  }
+  useEffect(() => {
+    if (!auth.isLoading && !auth.error && auth.isAuthenticated) {
+      setSession();
+    }
+  }, [auth]);
+
+  function startSession() {
+    setSessionState("voting");
+    getTrack();
+  }
 
   function addUser(userName: string) {
     console.log(userList);
@@ -59,7 +79,7 @@ export default function Lobby() {
       return;
     }
     const newUser = {
-      id: userList.length + 1,
+      id: userName,
       name: userName,
       avatar: `https://i.pravatar.cc/150?img=${userList.length + 1}`,
       host: userList.length === 0,
@@ -68,79 +88,209 @@ export default function Lobby() {
     setUserList(newUserList);
   }
 
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div>
-        <h1
-          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
-        >
-          LOBBY
-        </h1>
-      </div>
+  async function getTrack() {
+    setSongLoading(true);
+    const { data: session } = await api.sessions.get({ session_id: sessionId });
+    const trackId = session?.current_track;
+    if (trackId) {
+      const { data: track } = await api.tracks.detail({ id: trackId });
+      console.log(session);
+      console.log(track);
+      setCurrentSong(track);
+    } else {
+      nextTrack();
+    }
+    setSongLoading(false);
+  }
 
-      <div className="flex min-h-[532px] min-w-[500px] flex-col items-center justify-start gap-4 rounded-md bg-blue-950/80 p-8">
-        <div className="flex w-full flex-row items-center justify-between px-1">
-          <div className="text-3xl font-bold text-yellow-500">
-            Players: {userList.length}
-          </div>
-          <Link
-            href="/voting"
-            className="rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
+  async function nextTrack() {
+    setSongLoading(true);
+    sessionSocket.send(
+      JSON.stringify({
+        action: "next",
+        token: user.access_token,
+      }),
+    );
+  }
+
+  if (sessionState == "lobby") {
+    return (
+      <main className="flex min-h-screen flex-col items-center justify-between p-24">
+        <div>
+          <h1
+            className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
           >
-            START
-          </Link>
+            LOBBY
+          </h1>
         </div>
 
-        {userList.length === 0 ? (
-          <div className="mt-31 min-w-52 text-3xl font-semibold text-white drop-shadow-sm drop-shadow-gray-900">
-            Waiting for players...
+        <div className="flex min-h-[532px] min-w-[500px] flex-col items-center justify-start gap-4 rounded-md bg-blue-950/80 p-8">
+          <div className="flex w-full flex-row items-center justify-between px-1">
+            <div className="text-3xl font-bold text-yellow-500">
+              Players: {userList.length}
+            </div>
+            <button
+              onClick={startSession}
+              className="rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
+            >
+              START!
+            </button>
           </div>
-        ) : (
-          <div className="grid min-w-52 grid-flow-row grid-cols-2 items-start justify-start gap-4">
-            {userList.map((user) => (
-              <div
-                key={user.id}
-                className="flex min-w-32 items-center gap-x-4 rounded-l-[40px] rounded-r-lg border-2 bg-orange-400/90 p-2"
-              >
-                <img
-                  src={user.avatar}
-                  alt={user.name}
-                  className="h-16 w-16 rounded-full bg-gray-300"
-                />
-                <span className="text-2xl font-semibold text-white">
-                  {user.name}
-                </span>
-                {user.host && (
-                  <div className="rounded-full bg-blue-950 p-[5px]">
-                    <Image
-                      src="/crown.png"
-                      width={24}
-                      height={24}
-                      alt="Crown image"
-                      className="p-[1px]"
-                    />
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
 
-      <div className="mt-4 flex items-center justify-between gap-4">
-        <button
-          className="rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
-          onClick={() => deleteUserFromParty()}
-        >
-          del
-        </button>
-        <button
-          className="rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
-          onClick={() => addUserToParty()}
-        >
-          add
-        </button>
-      </div>
-    </main>
-  );
+          {userList.length === 0 ? (
+            <div className="mt-31 min-w-52 text-3xl font-semibold text-white drop-shadow-sm drop-shadow-gray-900">
+              Waiting for players...
+            </div>
+          ) : (
+            <div className="grid min-w-52 grid-flow-row grid-cols-2 items-start justify-start gap-4">
+              {userList.map((user) => (
+                <div
+                  key={user.id}
+                  className="flex min-w-32 items-center gap-x-4 rounded-l-[40px] rounded-r-lg border-2 bg-orange-400/90 p-2"
+                >
+                  <img
+                    src={user.avatar}
+                    alt={user.name}
+                    className="h-16 w-16 rounded-full bg-gray-300"
+                  />
+                  <span className="text-2xl font-semibold text-white">
+                    {user.name}
+                  </span>
+                  {user.host && (
+                    <div className="rounded-full bg-blue-950 p-[5px]">
+                      <Image
+                        src="/crown.png"
+                        width={24}
+                        height={24}
+                        alt="Crown image"
+                        className="p-[1px]"
+                      />
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </main>
+    );
+  } else if (sessionState == "voting") {
+    return (
+      <main className="flex min-h-screen flex-col items-center justify-between gap-4 p-24">
+        <div className="flex w-full items-start justify-between text-center">
+          <div className="flex-1"></div>
+          <div className="flex flex-1 items-center justify-center">
+            <div className="flex h-[170px] w-[170px] items-center justify-center rounded-full border-2 bg-orange-400">
+              <div className="text-5xl text-white drop-shadow-sm drop-shadow-black">
+                <button onClick={getTrack}>30</button>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-1 flex-row items-center justify-end gap-4">
+            <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"
+            >
+              PAUSE
+            </Link>
+            <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={nextTrack}
+            >
+              NEXT
+            </button>
+          </div>
+        </div>
+
+        <div className="flex flex-col items-center justify-center">
+          <div className="flex flex-row items-center justify-center gap-x-32">
+            <div className="grid min-w-52 grid-flow-row grid-cols-3 items-start justify-start gap-4 rounded bg-blue-950/80 p-4">
+              {userList.map((user) => (
+                <div
+                  key={user.id}
+                  className="flex h-[120px] w-[120px] flex-col items-center justify-center p-4"
+                >
+                  <img
+                    src={user.avatar}
+                    alt={user.name}
+                    width={75}
+                    height={75}
+                  />
+                  <div className="mt-1 min-w-[90px] rounded-3xl px-3 text-center text-3xl font-semibold text-white">
+                    {user.name}
+                  </div>
+                </div>
+              ))}{" "}
+            </div>
+            {!songLoading && currentSong ? (
+              <div className="rounded-md bg-black p-2">
+                <Image
+                  src={currentSong.album_cover}
+                  alt={currentSong.name}
+                  width={500}
+                  height={500}
+                />
+              </div>
+            ) : (
+              <div className="rounded-md bg-black p-2">
+                <Image
+                  src="/meowl.png"
+                  alt="Loading.."
+                  width={500}
+                  height={500}
+                />
+              </div>
+            )}
+            <div className="grid min-w-52 grid-flow-row grid-cols-3 items-start justify-start gap-4 rounded bg-blue-950/80 p-4">
+              {userList.map((user) => (
+                <div
+                  key={user.id}
+                  className="flex h-[120px] w-[120px] flex-col items-center justify-center p-4"
+                >
+                  <img
+                    src={user.avatar}
+                    alt={user.name}
+                    width={75}
+                    height={75}
+                  />
+                  <div className="mt-1 min-w-[90px] rounded-3xl px-3 text-center text-3xl font-semibold text-white">
+                    {user.name}
+                  </div>
+                </div>
+              ))}{" "}
+            </div>
+          </div>
+          {!songLoading && currentSong && (
+            <div className="flex flex-col items-center justify-start">
+              <h2
+                className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
+              >
+                {currentSong.artist}
+              </h2>
+              <h2
+                className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
+              >
+                {currentSong.name}
+              </h2>
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-row items-start justify-start gap-10 rounded bg-blue-950/80 p-4">
+          {userList.map((user) => (
+            <div
+              key={user.id}
+              className="flex h-[100px] w-[100px] flex-col items-center justify-center p-4"
+            >
+              <img src={user.avatar} alt={user.name} width={75} height={75} />
+              <div className="mt-1 min-w-[90px] rounded-3xl px-3 text-center text-3xl font-semibold text-white">
+                {user.name}
+              </div>
+            </div>
+          ))}
+        </div>
+      </main>
+    );
+  }
 }

frontend/src/app/mobile-voting/page.tsx

@@ -52,6 +52,20 @@ export default function MobileVoting() {
     );
   }
 
+  // Main message handler and dispatcher
+  function onMessage(e) {
+    console.log(e);
+    let data = JSON.parse(e.data);
+    for (let key in data) {
+      if (key == "track") {
+        setYesHighlight(false);
+        setNoHighlight(false);
+      }
+    }
+    console.log(data);
+    //}, 1000);
+  }
+
   // Initialize WebSocket connection when sessionId changes
   useEffect(() => {
     if (sessionId) {
@@ -59,6 +73,7 @@ export default function MobileVoting() {
       const socket = new WebSocket(
         `${process.env.NEXT_PUBLIC_WS_HOST}/voting/session/${sessionId}/`,
       );
+      socket.onmessage = onMessage;
       setSessionSocket(socket);
       //setTimeout(() => connect(), 2000);
     }