betere sessies lol lmao even

backend/playlist/migrations/0027_alter_session_seed_alter_vote_unique_together.py

@@ -0,0 +1,24 @@
+# Generated by Django 5.2.4 on 2025-08-15 19:14
+
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("playlist", "0026_alter_session_players_connected_alter_session_seed"),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="session",
+            name="seed",
+            field=models.IntegerField(default=406213),
+        ),
+        migrations.AlterUniqueTogether(
+            name="vote",
+            unique_together={("user", "track", "session")},
+        ),
+    ]

backend/voting/consumers.py

@@ -6,6 +6,7 @@ from django.contrib.auth.models import User
 from muzak.auth import get_user_from_token
 from channels.db import database_sync_to_async
 from playlist.models import Session, Track, Vote
+import random
 
 
 class SessionConsumer(WebsocketConsumer):
@@ -27,6 +28,9 @@ class SessionConsumer(WebsocketConsumer):
 	# Receive message from WebSocket
 	def receive(self, text_data):
 		user = self.scope["user"] # Waarschijnlijk altijd AnonymousUser
+		print(self.scope)
+		sessionId = self.scope["url_route"].get("kwargs", {}).get("session_id", None)
+		print()
 
 		text_data_json = json.loads(text_data)
 
@@ -35,12 +39,9 @@ class SessionConsumer(WebsocketConsumer):
 		if token:
 			user = get_user_from_token(token, log=True)
 		print(user)
-
+		session = Session.objects.get(session_id=sessionId)
 
 		action = text_data_json.get("action", None)
-		#:w
-		# sessionId = text_data_json.get("sessionId", None)
-		#session = Session.objects.get(id=sessionId)
 		if action == "message":
 			message = text_data_json["message"]
 			# Send message to room group
@@ -52,26 +53,44 @@ class SessionConsumer(WebsocketConsumer):
 			async_to_sync(self.channel_layer.group_send)(
 				self.session_name, {"type": "announce", "user": str(user)}
 			)
-		# if action == "vote":
+		if action == "vote":
-		# 	points = text_data_json.get("points", None)
+			points = text_data_json.get("points", None)
-		# 	track = session.current_track;
+			track = session.current_track;
-		# 	try:
+			try:
-		# 		vote = Vote.objects.get(user=user, track=track, session=session)
+				vote = Vote.objects.get(user=user, track=track, session=session)
-		# 		vote.points = points
+				vote.points = points
-		# 		vote.save()
+				vote.save()
-		# 	except Vote.DoesNotExist:
+			except Vote.DoesNotExist:
-		# 		vote = Vote.objects.create(user=user, track=track, points=points, session=session)
+				vote = Vote.objects.create(user=user, track=track, points=points, session=session)
-		# 		vote.save()
+				vote.save()
 		if action == "pause":
 			pass
 		if action == "next":
-			pass
+			random.seed(session.seed)
+			tracks = Track.objects.order_by("?")
+			next = False
+			if session.current_track:
+				for track in tracks:
+					if next:
+						session.current_track = track
+						break
+					if session.current_track == track:
+						next = True
+			else:
+				session.current_track = tracks.first()
+			session.save()
+			async_to_sync(self.channel_layer.group_send)(
+				self.session_name, {"type": "announce.track"}
+			)
 
 
 	def announce(self, event):
 		user = event["user"]
 		self.send(text_data=json.dumps({"joined": user}))
 
+	def announce_track(self, event):
+		self.send(text_data=json.dumps({"track": {}}))
+
 
 	# Receive message from room group
 	def chat_message(self, event):

backend/voting/urls.py

@@ -6,4 +6,5 @@ urlpatterns = [
     path("", views.index, name="index"),
     path("session/<str:session_id>/test", views.session, name="session"),
     path("session/", views.SessionListView.as_view(), name="api-session-list"),
+    path("session/<str:session_id>/", views.SessionDetailView.as_view(), name="api-session-detail"),
 ]

backend/voting/views.py

@@ -22,3 +22,12 @@ class SessionListView(APIView):
         else:
             sessions = Session.objects.filter(voting_open=True)
         return Response(SessionSerializer(sessions, many=True).data)
+
+@extend_schema(
+    responses={200: SessionSerializer()},
+    description="Gets session details."
+)
+class SessionDetailView(APIView):
+	def get(self, request, session_id):
+		session = Session.objects.get(session_id=session_id)
+		return Response(SessionSerializer(session).data)

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]);
+      } else if (key == "track") {
+        getTrack();
       }
     }
     console.log(data);
-    }, 1000);
   }
 
+  // Setup session
   useEffect(() => {
-    console.log("session: ", sessionId);
+    //console.log("session: ", sessionId);
-    let socket;
+    let socket: WebSocket | null;
-    if (sessionId && !sessionSocket) {
+    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);
+      // console.log("session made: ", sessionId);
-      } else {
-        socket.close();
-      }
     }
     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,6 +88,32 @@ export default function Lobby() {
     setUserList(newUserList);
   }
 
+  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);
+  }
+
+  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>
@@ -83,12 +129,12 @@ export default function Lobby() {
             <div className="text-3xl font-bold text-yellow-500">
               Players: {userList.length}
             </div>
-          <Link
+            <button
-            href="/voting"
+              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
+              START!
-          </Link>
+            </button>
           </div>
 
           {userList.length === 0 ? (
@@ -126,21 +172,125 @@ export default function Lobby() {
             </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="mt-4 flex items-center justify-between gap-4">
+          <div className="flex flex-1 flex-row items-center justify-end gap-4">
-        <button
+            <Link
-          className="rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+              href="/pause"
-          onClick={() => deleteUserFromParty()}
+              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"
             >
-          del
+              PAUSE
-        </button>
+            </Link>
             <button
-          className="rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+              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={() => addUserToParty()}
+              onClick={nextTrack}
             >
-          add
+              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);
     }

frontend/src/data/fetcher.ts

@@ -5,6 +5,7 @@ import { oidcConfig } from "muzak/config/auth";
 import { User } from "oidc-client-ts";
 
 export function getUser() {
+  if (typeof window !== "undefined") {
     let oidcStorage = window?.sessionStorage.getItem(
       `oidc.user:${oidcConfig.authority}:${oidcConfig.client_id}`,
     );
@@ -13,6 +14,7 @@ export function getUser() {
     }
     return User.fromStorageString(oidcStorage);
   }
+}
 
 const fetcher = Fetcher.for<paths>();
 const BASE_URL = process.env.NEXT_PUBLIC_BACKEND_HOST!;
@@ -84,6 +86,7 @@ export const api = {
     me: fetcher.path("/api/profile/me").method("get").create(),
   },
   sessions: {
+    get: fetcher.path("/voting/session/{session_id}/").method("get").create(),
     list: fetcher.path("/voting/session/").method("get").create(),
   },
 };