Merge remote-tracking branch 'refs/remotes/origin/main'

backend/src/app.py

@@ -1,9 +1,9 @@
+import uuid
+from dataclasses import asdict
 import dotenv
 from flask import Flask, Response, jsonify, request
 from flask_cors import CORS
-from flask_socketio import SocketIO, emit
+from flask_socketio import SocketIO, join_room, leave_room
-import uuid
-from dataclasses import asdict
 
 from .state import State
 from .connect import get_connection
@@ -12,16 +12,16 @@ from .song import Song, init_db, get_song_by_title_artist, add_song_in_db, get_s
 from .song_fetch import lastfm_query_search, yt_get_audio_url, yt_search_song
 from .qrcode_gen import generate_qr
 
-from typing import Any
 
 dotenv.load_dotenv()
 
 
 app = Flask(__name__)
 app.config["SECRET_KEY"] = "your_secret_key"
-socketio = SocketIO(app)
+socketio = SocketIO(app, cors_allowed_origins="*", path="/ws")
 CORS(app)
 
+
 db_conn = get_connection()
 state = State(app, socketio, db_conn.cursor())
 init_db(state.db)
@@ -46,15 +46,28 @@ def error(msg: str, status: int = 400) -> Response:
     return res
 
 
-def ws_broadcast(event: str, *, room_id: int | None = None, data: Any) -> None:
+@socketio.on("connect")
-    final = {}
+def handle_connection():
+    print("somebody connected to socket.io", flush=True)
 
-    if room_id is not None:
-        final["room_id"] = room_id
 
-    final["data"] = data
+@socketio.on("disconnect")
+def handle_disconnection():
+    print("somebody disconnected from socket.io", flush=True)
 
-    emit(event, final, broadcast=True, namespace="/")
+
+@socketio.on("join_room")
+def on_join(data):
+    room = data["id"]
+    join_room(room)
+    print(f"somebody joined {room=}", flush=True)
+
+
+@socketio.on("leave_room")
+def on_leave(data):
+    room = data["id"]
+    leave_room(room)
+    print(f"somebody left {room=}", flush=True)
 
 
 @app.get("/api/join")
@@ -98,10 +111,11 @@ def queue_next():
     if room.playing_idx >= len(room.playing):
         ## queue ended
 
-        room.renew_queue()
+        # room.renew_queue()
-        emit("update_songs", {"songs": [1, 2, 3]}, broadcast=True, namespace="/")
+        data = {"success": True, "ended": True, "index": room.playing_idx, "queue": room.playing}
+        state.socketio.emit("new_queue", data, to=str(room.id))
 
-        return {"success": True, "ended": True, "index": room.playing_idx, "queue": room.playing}
+        return data
 
     return {"success": True, "ended": False, "index": room.playing_idx}
 
@@ -188,6 +202,7 @@ def add_song():
     ## add the song in the room if does not exists
     if song.uuid not in room.songs:
         room.songs[song.uuid] = (song, 1)  # start with one vote
+        socketio.emit("new_song", {"song": song, "user_score": 1}, to=str(room.id))
 
     return {"success": True, "song": song}
 
@@ -219,6 +234,7 @@ def post_song_vote():
 
     ## update the song
     room.songs[song_id] = (song_info[0], song_info[1] + int(request.args["increment"]))
+    socketio.emit("new_vote", {"song": song_info[0], "user_score": song_info[1]})
 
     return {"success": True}
 

frontend/package-lock.json

@@ -8,6 +8,7 @@
 			"name": "frontend",
 			"version": "0.0.1",
 			"dependencies": {
+				"socket.io-client": "^4.8.1",
 				"zod": "^4.0.14"
 			},
 			"devDependencies": {
@@ -820,6 +821,12 @@
 				"win32"
 			]
 		},
+		"node_modules/@socket.io/component-emitter": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+			"integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+			"license": "MIT"
+		},
 		"node_modules/@sveltejs/acorn-typescript": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
@@ -1203,6 +1210,18 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@types/node": {
+			"version": "24.1.0",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.1.0.tgz",
+			"integrity": "sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"undici-types": "~7.8.0"
+			}
+		},
 		"node_modules/acorn": {
 			"version": "8.15.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -1327,6 +1346,45 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/engine.io-client": {
+			"version": "6.6.3",
+			"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.3.tgz",
+			"integrity": "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==",
+			"license": "MIT",
+			"dependencies": {
+				"@socket.io/component-emitter": "~3.1.0",
+				"debug": "~4.3.1",
+				"engine.io-parser": "~5.2.1",
+				"ws": "~8.17.1",
+				"xmlhttprequest-ssl": "~2.1.1"
+			}
+		},
+		"node_modules/engine.io-client/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/engine.io-parser": {
+			"version": "5.2.3",
+			"resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+			"integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
 		"node_modules/enhanced-resolve": {
 			"version": "5.18.2",
 			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
@@ -1786,7 +1844,6 @@
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
 			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/nanoid": {
@@ -2060,6 +2117,68 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/socket.io-client": {
+			"version": "4.8.1",
+			"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
+			"integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@socket.io/component-emitter": "~3.1.0",
+				"debug": "~4.3.2",
+				"engine.io-client": "~6.6.1",
+				"socket.io-parser": "~4.2.4"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/socket.io-client/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/socket.io-parser": {
+			"version": "4.2.4",
+			"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+			"integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+			"license": "MIT",
+			"dependencies": {
+				"@socket.io/component-emitter": "~3.1.0",
+				"debug": "~4.3.1"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/socket.io-parser/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/source-map-js": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -2196,6 +2315,15 @@
 				"node": ">=14.17"
 			}
 		},
+		"node_modules/undici-types": {
+			"version": "7.8.0",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz",
+			"integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"peer": true
+		},
 		"node_modules/vite": {
 			"version": "7.0.6",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-7.0.6.tgz",
@@ -2291,6 +2419,35 @@
 				}
 			}
 		},
+		"node_modules/ws": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+			"integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/xmlhttprequest-ssl": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+			"integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
 		"node_modules/yallist": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",

frontend/package.json

@@ -28,6 +28,7 @@
 		"vite": "^7.0.4"
 	},
 	"dependencies": {
-		"zod": "^4.0.14"
+		"zod": "^4.0.14",
+		"socket.io-client": "^4.8.1"
 	}
 }

frontend/src/lib/components/Error.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-    let { code, message } = $props()
+    import type { FetchError } from "$lib/types"
+
+    let { returnError }: { returnError: FetchError } = $props()
 </script>
 
 <div class="flex h-screen w-full flex-col items-center justify-center">
-    <h1 class="p-2 text-xl">Error {code}</h1>
+    <h1 class="p-2 text-xl">Error {returnError.code}</h1>
-    <p>{message}</p>
+    <p>{returnError.message}</p>
 </div>

frontend/src/lib/components/QueueSlider.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
     import { type Song, createEmptySong } from "$lib/types"
 
-    let { songs, playing } = $props()
+    let { queueSongs, playingIndex } = $props()
 
     let displaySongs = $derived<Song[]>([
-        playing > 0 && playing < songs.length ? songs[playing - 1] : createEmptySong(),
+        playingIndex > 0 ? queueSongs[playingIndex - 1] : createEmptySong(),
-        songs[playing],
+        queueSongs[playingIndex],
-        playing == songs.length - 1 ? createEmptySong() : songs[playing + 1],
+        playingIndex == queueSongs.length - 1 ? createEmptySong() : queueSongs[playingIndex + 1],
     ])
 </script>
 

frontend/src/lib/types.ts

@@ -35,3 +35,8 @@ export const parseSuggestion = async function (sugg: any): Promise<Suggestion> {
     let resp = await SuggestionSchema.parseAsync(sugg)
     return resp
 }
+
+export type FetchError = {
+    code: number
+    message: string
+}

frontend/src/lib/util.ts

@@ -0,0 +1 @@
+export type FetchError = { code: number, message: string }

frontend/src/lib/utils.ts

@@ -0,0 +1,69 @@
+import { parseSong, parseSuggestion, type FetchError, type Song, type Suggestion } from "./types"
+
+export const joinRoom = async function (roomId: string): Promise<[FetchError | null, string]> {
+    let resp = await fetch("/api/join?room=" + roomId)
+
+    if (resp.status != 200) {
+        return [{ code: 400, message: "Cannot join the room" }, ""]
+    }
+
+    return [null, "test"]
+}
+
+export const getSuggestions = async function (roomId: string): Promise<[FetchError | null, Suggestion[]]> {
+    let resp = await fetch("/api/room/suggestions?room=" + roomId)
+
+    if (resp.status != 200) {
+        return [{ code: 400, message: "Failed to retrieve suggestions" }, []]
+    }
+
+    let json = await resp.json()
+    let suggestions: Suggestion[] = []
+
+    json["songs"].forEach(async (i: any) => {
+        suggestions.push(await parseSuggestion(i))
+    })
+
+    suggestions = suggestions.sort((a, b) => {
+        return a.upvote - b.upvote
+    })
+
+    return [null, suggestions]
+}
+
+export const getQueueSongs = async function (roomId: string): Promise<[FetchError | null, Song[], number]> {
+    let resp = await fetch("/api/queue?room=" + roomId)
+    if (resp.status != 200) {
+        return [{ code: 400, message: "Failed to load queue songs" }, [], 0]
+    }
+
+    let json = await resp.json()
+    let songs: Song[] = []
+
+    json["queue"].forEach(async (i: any) => {
+        songs.push(await parseSong(i))
+    })
+
+    let playingId = json["index"]
+
+    return [null, songs, playingId]
+}
+
+export const triggerPlayNext = async function (roomId: string): Promise<[FetchError | null, Song[], number]> {
+    let resp = await fetch("/api/queue/next?room=" + roomId, { method: "POST" })
+
+    if (resp.status != 200) {
+        return [{ code: 400, message: "Failed to trigger next song playback" }, [], 0]
+    }
+
+    let json = await resp.json()
+
+    let songs: Song[] = []
+
+    if (json["ended"]) {
+        json["queue"].forEach(async (i: any) => {
+            songs.push(await parseSong(i))
+        })
+    }
+    return [null, songs, json["index"]]
+}

frontend/src/routes/admin/[id]/+page.svelte

@@ -1,37 +1,43 @@
 <script lang="ts">
     import QueueSlider from "$lib/components/QueueSlider.svelte"
+    import { type Song } from "$lib/types"
+    import { onMount } from "svelte"
+    import type { FetchError } from "$lib/types"
+    import { getQueueSongs, triggerPlayNext } from "$lib/utils.js"
 
-    let songs = $state([
+    let { data } = $props()
-        {
-            name: "Cisco PT - Cantarex",
-            image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
-            points: 0,
-        },
-        {
-            name: "Io e i miei banchi - Paul Ham",
-            image: "https://i.prcdn.co/img?regionKey=RbtvKb5E1Cv4j1VWm2uGrw%3D%3D",
-            points: 0,
-        },
-        {
-            name: "Ragatthi - Bersatetthi",
-            image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
-            points: 0,
-        },
-        {
-            name: "Quarta",
-            image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
-            points: 0,
-        },
-        {
-            name: "Quinta",
-            image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
-            points: 0,
-        },
-    ])
 
-    let playing = $state(1)
+    let queueSongs = $state<Song[]>([])
+    let playingIndex = $state<number>()
+    let returnError = $state<FetchError | null>()
+
+    onMount(async () => {
+        let songs, index
+        ;[returnError, songs, index] = await getQueueSongs(data.roomId)
+
+        queueSongs = songs
+
+        playingIndex = index
+    })
+
+    $effect(() => {
+        $inspect(queueSongs)
+    })
+
+    async function playNext() {
+        let songs, index
+        ;[returnError, songs, index] = await triggerPlayNext(data.roomId)
+
+        if (returnError) return
+
+        if (songs.length != 0) queueSongs = songs
+        playingIndex = index
+    }
 </script>
 
+{returnError}
+
 <div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
-    <QueueSlider {songs} {playing} />
+    <QueueSlider {queueSongs} {playingIndex} />
+    <button onclick={playNext}>Next</button>
 </div>

frontend/src/routes/admin/[id]/+page.ts

@@ -0,0 +1,11 @@
+import { error } from "@sveltejs/kit"
+import type { PageLoad } from "../../room/[id]/$types"
+
+export const load: PageLoad = function ({ params }) {
+    if (params.id) {
+        return {
+            roomId: params.id,
+        }
+    }
+    error(400, "Please provide a room id")
+}

frontend/src/routes/room/[id]/+page.svelte

@@ -2,71 +2,56 @@
     import QueueSlider from "$lib/components/QueueSlider.svelte"
     import SuggestionInput from "$lib/components/SuggestionInput.svelte"
     import Error from "$lib/components/Error.svelte"
-    import { parseSong, parseSuggestion, type Suggestion, type Song } from "$lib/types.js"
+    import { type Suggestion, type Song } from "$lib/types.js"
     import { onMount } from "svelte"
     import SuggestionList from "$lib/components/SuggestionList.svelte"
+    import { getQueueSongs, getSuggestions, joinRoom } from "$lib/utils.js"
+    import type { FetchError } from "$lib/types.js"
+    import { io } from "socket.io-client"
 
     let { data } = $props()
 
-    let songs = $state<Song[]>([])
+    let queueSongs = $state<Song[]>([])
-    let playing = $state(0)
+    let playingIndex = $state(0)
 
     let suggestions = $state<Suggestion[]>([])
 
-    let error = $state({ code: 0, message: "" })
+    let returnError = $state<FetchError | null>()
+
+    let wsUrl = ""
 
     onMount(async () => {
         // Join the room
-        let resp = await fetch("/api/join?room=" + data.roomId)
 
-        if (resp.status != 200) {
+        let sugg, queue, index
-            error = { code: 400, message: "Failed to join the room. Maybe wrong code or location?" }
+        ;[returnError, wsUrl] = await joinRoom(data.roomId)
+        if (returnError) {
             return
         }
 
+        ;[returnError, sugg] = await getSuggestions(data.roomId)
+        if (returnError) return
+
         // Setup websocket connection
-
+        let socket = io("/", { path: "/ws" })
-        // Get room suggestions
+        await socket.emitWithAck("join_room", { id: data.roomId })
-
+        ;[returnError, queue, index] = await getQueueSongs(data.roomId)
-        resp = await fetch("/api/room/suggestions?room=" + data.roomId)
+        if (returnError) {
-
-        if (resp.status != 200) {
-            error = { code: 500, message: "Failed to retrive suggestions" }
             return
         }
 
-        let json = await resp.json()
+        queueSongs = queue
-
+        suggestions = sugg
-        json["songs"].forEach(async (i: any) => {
+        playingIndex = index
-            suggestions.push(await parseSuggestion(i))
-        })
-
-        suggestions = suggestions.sort((a, b) => {
-            return a.upvote - b.upvote
-        })
-
-        // Get the room queue
-
-        resp = await fetch("/api/queue?room=" + data.roomId)
-        if (resp.status != 200) {
-            error = { code: 404, message: "Room not found" }
-            return
-        }
-        json = await resp.json()
-
-        json["queue"].forEach(async (i: any) => {
-            songs.push(await parseSong(i))
-        })
-        console.log(songs)
     })
 </script>
 
 <!-- Check if the room exists -->
-{#if error.code != 0}
+{#if returnError}
-    <Error code={error.code} message={error.message} />
+    <Error {returnError} />
 {:else}
     <div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
-        <QueueSlider {songs} {playing} />
+        <QueueSlider {queueSongs} {playingIndex} />
         <div class="w-full py-6 lg:w-[30vw]">
             <SuggestionInput roomId={data.roomId} />
         </div>

frontend/src/routes/room/[id]/+page.ts

@@ -1,5 +1,7 @@
 import { error, type Load, type ServerLoad } from "@sveltejs/kit"
 import type { PageLoad } from "./$types"
+import type { FetchError } from "$lib/util"
+import { parseSuggestion, type Suggestion } from "$lib/types"
 
 export const load: PageLoad = async ({ params }) => {
     if (params.id) {

frontend/src/routes/zesty/wsio/+page.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import { io } from "socket.io-client"
+    const socket = io("/", { path: "/ws" })
+    socket.on("connect", () => {
+        console.log("successfully connected to socket.io server")
+        socket.emit("join_room", { id: "gang" })
+    })
+</script>

frontend/vite.config.ts

@@ -10,6 +10,11 @@ export default defineConfig({
                 target: "http://backend:5000",
                 changeOrigin: false,
                 secure: false
+            },
+            '/ws': {
+                target: "http://backend:5000",
+                changeOrigin: false,
+                secure: false
             }
         }
     }