From 419fde1a10dc25e5895e6e3a660e1bef4cb6a6a5 Mon Sep 17 00:00:00 2001
From: Mat12143 <skymatt12@gmail.com>
Date: Sat, 2 Aug 2025 05:16:37 +0200
Subject: [PATCH] fix: websockets and vite

---
 .../src/lib/components/SuggestionList.svelte  |  8 +++----
 frontend/src/routes/admin/[id]/+page.svelte   |  1 -
 frontend/src/routes/room/[id]/+page.svelte    |  2 +-
 frontend/vite.config.ts                       | 23 ++++++++++---------
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/frontend/src/lib/components/SuggestionList.svelte b/frontend/src/lib/components/SuggestionList.svelte
index 9c3d650..285d242 100644
--- a/frontend/src/lib/components/SuggestionList.svelte
+++ b/frontend/src/lib/components/SuggestionList.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { Suggestion } from "$lib/types"
 
-    let { suggestions, roomId }: { suggestions: Suggestion[]; roomId: string } = $props()
+    let { suggestions = $bindable(), roomId }: { suggestions: Suggestion[]; roomId: string } = $props()
 
     async function vote(idx: number, amount: number, songId: string) {
         suggestions[idx].upvote += amount
@@ -15,7 +15,7 @@
     {/if}
 
     {#each suggestions as sug, idx}
-        <div class="shadow-md hover:bg-indigo-400 duration-100 bg-indigo-500 flex h-[80px] w-full flex-row gap-2 rounded border-2 border-indigo-600 p-2">
+        <div class="flex h-[80px] w-full flex-row gap-2 rounded border-2 border-indigo-600 bg-indigo-500 p-2 shadow-md duration-100 hover:bg-indigo-400">
             <div class="flex w-3/4 flex-row gap-2">
                 <img class="w-[60px] min-w-[60px] rounded" src={`https://lastfm.freetls.fastly.net/i/u/174s/${sug.image_id}.png`} alt="Song cover" />
                 <div class="text-white">
@@ -30,9 +30,9 @@
                         vote(idx, 1, sug.uuid)
                     }}>👍</button
                 >
-                <p class="text-white font-semibold">{sug.upvote}</p>
+                <p class="font-semibold text-white">{sug.upvote}</p>
                 <button
-                    class="hover:scale-150 duration-100"
+                    class="duration-100 hover:scale-150"
                     onclick={() => {
                         vote(idx, -1, sug.uuid)
                     }}><div class="rotate-180">👍</div></button
diff --git a/frontend/src/routes/admin/[id]/+page.svelte b/frontend/src/routes/admin/[id]/+page.svelte
index 23f2214..9bcb9b4 100644
--- a/frontend/src/routes/admin/[id]/+page.svelte
+++ b/frontend/src/routes/admin/[id]/+page.svelte
@@ -17,7 +17,6 @@
         ;[returnError, songs, index] = await getQueueSongs(data.roomId)
 
         queueSongs = songs
-
         playingIndex = index
     })
 
diff --git a/frontend/src/routes/room/[id]/+page.svelte b/frontend/src/routes/room/[id]/+page.svelte
index 9d2c1ea..f838193 100644
--- a/frontend/src/routes/room/[id]/+page.svelte
+++ b/frontend/src/routes/room/[id]/+page.svelte
@@ -22,7 +22,6 @@
 
     onMount(async () => {
         // Join the room
-        socket = io("/", { path: "/ws", transports: ["websocket"] })
 
         let sugg, queue, index
         ;[returnError] = await joinRoom(data.roomId)
@@ -42,6 +41,7 @@
         playingIndex = index
 
         // Setup websocket connection
+        socket = io("/", { path: "/ws", transports: ["websocket"] })
         await socket.emitWithAck("join_room", { id: data.roomId })
 
         socket.on("queue_update", async (d) => {
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 3548199..09f1019 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,21 +1,22 @@
-import tailwindcss from '@tailwindcss/vite';
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import tailwindcss from "@tailwindcss/vite"
+import { sveltekit } from "@sveltejs/kit/vite"
+import { defineConfig } from "vite"
 
 export default defineConfig({
     plugins: [tailwindcss(), sveltekit()],
     server: {
         proxy: {
-            '/api': {
+            "/api": {
                 target: "http://backend:5000",
                 changeOrigin: false,
-                secure: false
+                secure: false,
             },
-            '/ws': {
+            "/ws": {
                 target: "http://backend:5000",
                 changeOrigin: false,
-                secure: false
-            }
-        }
-    }
-});
+                secure: false,
+                ws: true,
+            },
+        },
+    },
+})