feat: refactoring api logic

This commit is contained in:
Mat12143 2025-08-02 03:54:26 +02:00
parent 1383c0fbed
commit 44e0d9f44c
7 changed files with 150 additions and 74 deletions

View file

@ -1,37 +1,43 @@
<script lang="ts">
import QueueSlider from "$lib/components/QueueSlider.svelte"
import { type Song } from "$lib/types"
import { onMount } from "svelte"
import type { FetchError } from "$lib/types"
import { getQueueSongs, triggerPlayNext } from "$lib/utils.js"
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 queueSongs = $state<Song[]>([])
let playingIndex = $state<number>()
let returnError = $state<FetchError | null>()
onMount(async () => {
let songs, index
;[returnError, songs, index] = await getQueueSongs(data.roomId)
queueSongs = songs
playingIndex = index
})
$effect(() => {
$inspect(queueSongs)
})
async function playNext() {
let songs, index
;[returnError, songs, index] = await triggerPlayNext(data.roomId)
if (returnError) return
if (songs.length != 0) queueSongs = songs
playingIndex = index
}
</script>
{returnError}
<div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
<QueueSlider {songs} {playing} />
<QueueSlider {queueSongs} {playingIndex} />
<button onclick={playNext}>Next</button>
</div>

View file

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