feat: added error page + join endpoint
This commit is contained in:
parent
d9e7b8f0ff
commit
ab9bfa41c9
10 changed files with 184 additions and 71 deletions
|
@ -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}
|
||||
|
|
11
frontend/src/routes/room/[id]/+page.ts
Normal file
11
frontend/src/routes/room/[id]/+page.ts
Normal 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")
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue