feat: added error page + join endpoint

This commit is contained in:
Mat12143 2025-08-02 00:52:13 +02:00
parent d9e7b8f0ff
commit ab9bfa41c9
10 changed files with 184 additions and 71 deletions

View file

@ -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([
{
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 { data } = $props()
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">
<QueueSlider {songs} {playing} />
<div class="w-full py-6 lg:w-[30vw]">
<SuggestionInput />
<!-- 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} /> -->
</div>
</div>
<div class="w-full py-6 lg:w-[30vw]">
<SuggestionList suggestions={songs} />
</div>
</div>
{/if}

View file

@ -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")
}