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

63 lines
1.9 KiB
Svelte
Raw Normal View History

2025-08-01 22:17:26 +02:00
<script lang="ts">
import QueueSlider from "$lib/components/QueueSlider.svelte"
import SuggestionInput from "$lib/components/SuggestionInput.svelte"
2025-08-02 00:52:13 +02:00
import Error from "$lib/components/Error.svelte"
2025-08-02 03:54:26 +02:00
import { type Suggestion, type Song } from "$lib/types.js"
2025-08-02 00:52:13 +02:00
import { onMount } from "svelte"
2025-08-02 02:12:41 +02:00
import SuggestionList from "$lib/components/SuggestionList.svelte"
2025-08-02 03:54:26 +02:00
import { getQueueSongs, getSuggestions, joinRoom } from "$lib/utils.js"
import type { FetchError } from "$lib/types.js"
2025-08-02 03:00:28 +02:00
import { io } from "socket.io-client"
2025-08-02 00:52:13 +02:00
let { data } = $props()
2025-08-02 03:54:26 +02:00
let queueSongs = $state<Song[]>([])
let playingIndex = $state(0)
2025-08-02 00:52:13 +02:00
2025-08-02 02:12:41 +02:00
let suggestions = $state<Suggestion[]>([])
2025-08-02 03:54:26 +02:00
let returnError = $state<FetchError | null>()
let wsUrl = ""
2025-08-02 00:52:13 +02:00
onMount(async () => {
// Join the room
2025-08-02 03:54:26 +02:00
let sugg, queue, index
;[returnError, wsUrl] = await joinRoom(data.roomId)
if (returnError) {
2025-08-02 00:52:13 +02:00
return
}
2025-08-02 03:54:26 +02:00
;[returnError, sugg] = await getSuggestions(data.roomId)
2025-08-02 03:56:01 +02:00
if (returnError) return
2025-08-02 02:12:41 +02:00
2025-08-02 00:52:13 +02:00
// Setup websocket connection
2025-08-02 03:00:28 +02:00
let socket = io("/", { path: "/ws" })
await socket.emitWithAck("join_room", { id: data.roomId })
2025-08-02 03:54:26 +02:00
;[returnError, queue, index] = await getQueueSongs(data.roomId)
if (returnError) {
2025-08-02 00:52:13 +02:00
return
}
2025-08-02 03:54:26 +02:00
queueSongs = queue
suggestions = sugg
playingIndex = index
2025-08-02 00:52:13 +02:00
})
2025-08-01 22:17:26 +02:00
</script>
2025-08-02 00:52:13 +02:00
<!-- Check if the room exists -->
2025-08-02 03:54:26 +02:00
{#if returnError}
<Error {returnError} />
2025-08-02 00:52:13 +02:00
{:else}
<div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
2025-08-02 03:54:26 +02:00
<QueueSlider {queueSongs} {playingIndex} />
2025-08-02 00:52:13 +02:00
<div class="w-full py-6 lg:w-[30vw]">
2025-08-02 02:12:41 +02:00
<SuggestionInput roomId={data.roomId} />
2025-08-02 00:52:13 +02:00
</div>
<div class="w-full py-6 lg:w-[30vw]">
2025-08-02 02:12:41 +02:00
<SuggestionList {suggestions} roomId={data.roomId} />
2025-08-02 00:52:13 +02:00
</div>
2025-08-01 22:17:26 +02:00
</div>
2025-08-02 00:52:13 +02:00
{/if}