feat: added error page + join endpoint

frontend/package-lock.json

@@ -7,6 +7,9 @@
 		"": {
 			"name": "frontend",
 			"version": "0.0.1",
+			"dependencies": {
+				"zod": "^4.0.14"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^6.0.0",
 				"@sveltejs/kit": "^2.22.0",
@@ -2304,6 +2307,15 @@
 			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
 			"dev": true,
 			"license": "MIT"
+		},
+		"node_modules/zod": {
+			"version": "4.0.14",
+			"resolved": "https://registry.npmjs.org/zod/-/zod-4.0.14.tgz",
+			"integrity": "sha512-nGFJTnJN6cM2v9kXL+SOBq3AtjQby3Mv5ySGFof5UGRHrRioSJ5iG680cYNjE/yWk671nROcpPj4hAS8nyLhSw==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/colinhacks"
+			}
 		}
 	}
 }

frontend/package.json

@@ -26,5 +26,8 @@
 		"tailwindcss": "^4.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^7.0.4"
+	},
+	"dependencies": {
+		"zod": "^4.0.14"
 	}
 }

frontend/src/app.css

@@ -1 +1,15 @@
 @import 'tailwindcss';
+
+@keyframes spin-slower {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.spin-slower {
+    animation: spin-slower 15s linear infinite;
+}

frontend/src/lib/components/Error.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    let { code, message } = $props()
+</script>
+
+<div class="flex h-screen w-full flex-col items-center justify-center">
+    <h1 class="p-2 text-xl">Error {code}</h1>
+    <p>{message}</p>
+</div>

frontend/src/lib/components/QueueSlider.svelte

@@ -1,30 +1,38 @@
 <script lang="ts">
+    import { type Song, createEmptySong } from "$lib/types"
+
     let { songs, playing } = $props()
 
-    let displaySongs = $derived([
+    let displaySongs = $derived<Song[]>([
-        playing > 0 && playing < songs.length ? songs[playing - 1] : { name: "", image: "" },
+        playing > 0 && playing < songs.length ? songs[playing - 1] : createEmptySong(),
         songs[playing],
-        playing == songs.length - 1 ? { name: "", image: "" } : songs[playing + 1],
+        playing == songs.length - 1 ? createEmptySong() : songs[playing + 1],
     ])
 </script>
 
 <div class="relative flex w-full justify-center overflow-hidden">
     <div class="flex w-fit flex-row gap-4">
         {#each displaySongs as song, i}
-            {#if song.name != ""}
+            {#if song?.title && song.title != ""}
                 <div class={`relative flex flex-col items-center transition-all duration-300 ${i === 1 ? "z-10" : "z-0 scale-85 opacity-50"}`}>
-                    <img
+                    <div
-                        class="h-[60vw] max-h-[250px] w-[60vw]
+                        class={`flex h-[60vw] max-h-[250px] w-[60vw] max-w-[250px] items-center justify-center ${i === 1 ? "spin-slower rounded-full border-2 border-black" : "rounded"} object-cover`}
-                   max-w-[250px] rounded object-cover transition-all duration-300"
+                    >
-                        src={song.image}
-                        alt="Song cover"
-                    />
                         {#if i === 1}
-                        <h1 class="mt-2">{song.name}</h1>
+                            <div class="absolute z-20 h-16 w-16 rounded-full border-2 border-black bg-white"></div>
+                        {/if}
+                        <img class={`h-full overflow-hidden ${i === 1 ? "rounded-full" : "rounded"}`} src={song.image_id} alt="Song cover" />
+                    </div>
+                    {#if i === 1}
+                        <h1 class="mt-2">{song.title} - {song.artist}</h1>
                     {/if}
                 </div>
             {:else}
-                <div class="h-[60vw] max-h-[250px] w-[60vw] max-w-[250px]"></div>
+                <div class="flex h-[60vw] max-h-[250px] w-[60vw] max-w-[250px] items-center justify-center">
+                    {#if i === 1}
+                        <p>No song in queue</p>
+                    {/if}
+                </div>
             {/if}
         {/each}
     </div>

frontend/src/lib/types.ts

@@ -1,9 +1,27 @@
-import * as z from "zod"
+import { z } from "zod"
 
 export const SongSchema = z.object({
-    name: z.string(),
+    uuid: z.string(),
-    image: z.string(),
+    title: z.string(),
-    points: z.number().optional().default(0),
+    artist: z.string(),
+    tags: z.array(z.string()),
+    image_id: z.string(),
+    youtube_id: z.number().optional().default(0),
 })
-
 export type Song = z.infer<typeof SongSchema>
+
+export const parseSong = async function (song: any): Promise<Song> {
+    let resp = await SongSchema.parseAsync(song)
+    return resp
+}
+
+export const createEmptySong = function (): Song {
+    return {
+        uuid: "-1",
+        title: "",
+        artist: "",
+        tags: [""],
+        image_id: "",
+        youtube_id: 0,
+    }
+}

frontend/src/routes/+page.svelte

@@ -1,21 +1,12 @@
 <script lang="ts">
-    import { onMount } from "svelte"
-
-    let pos = $state()
-
-    function onGPS(t: GeolocationPosition) {
-        pos = t.coords
-    }
-
-    function failGPS(t: GeolocationPositionError) {
-        console.log(t)
-    }
-
-    onMount(() => {
-        navigator.geolocation.getCurrentPosition(onGPS, failGPS)
-    })
 </script>
 
-<div class="flex h-full w-full items-center justify-center">
+<div class="flex h-full w-full items-center justify-center p-4">
-    <div></div>
+    <div class="w-1/2">
+        <h1>Scan your nearby rooms</h1>
+        <a href="/room/123">Room Test</a>
+    </div>
+    <div>
+        <h1>Create your room</h1>
+    </div>
 </div>

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import QueueSlider from "$lib/components/QueueSlider.svelte"
+
+    let songs = $state([
+        {
+            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)
+</script>
+
+<div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
+    <QueueSlider {songs} {playing} />
+</div>

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

@@ -1,45 +1,56 @@
 <script lang="ts">
     import QueueSlider from "$lib/components/QueueSlider.svelte"
     import SuggestionInput from "$lib/components/SuggestionInput.svelte"
-    import SuggestionList from "$lib/components/SuggestionList.svelte"
+    import Error from "$lib/components/Error.svelte"
+    import { parseSong, type Song } from "$lib/types.js"
+    import { onMount } from "svelte"
 
-    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 songs = $state<Song[]>([])
+    let playing = $state(0)
+
+    let error = $state({ code: 0, message: "" })
+
+    onMount(async () => {
+        // Join the room
+        let resp = await fetch("/api/join?room=" + data.roomId)
+
+        if (resp.status != 200) {
+            error = { code: 400, message: "Failed to join the room. Maybe wrong code or location?" }
+            return
+        }
+
+        // Setup websocket connection
+
+        // Get the room queue
+
+        resp = await fetch("/api/queue?room=" + data.roomId)
+        if (resp.status != 200) {
+            error = { code: 404, message: "Room not found" }
+            return
+        }
+        let json = await resp.json()
+
+        json["queue"].forEach(async (i: any) => {
+            songs.push(await parseSong(i))
+        })
+
+        // Get room suggestions
+    })
 </script>
 
-<div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
+<!-- Check if the room exists -->
+{#if error.code != 0}
+    <Error code={error.code} message={error.message} />
+{:else}
+    <div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
         <QueueSlider {songs} {playing} />
         <div class="w-full py-6 lg:w-[30vw]">
             <SuggestionInput />
         </div>
         <div class="w-full py-6 lg:w-[30vw]">
-        <SuggestionList suggestions={songs} />
+            <!-- <SuggestionList suggestions={songs} /> -->
         </div>
-</div>
+    </div>
+{/if}

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

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