2025-summer/team-1
12
Fork 0
Code Issues Pull requests Projects Releases Activity

feat: implemented api

Browse source
This commit is contained in:
Mat12143 2025-08-02 02:12:41 +02:00
parent aa25c6075b
commit 1383c0fbed
6 changed files with 65 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/lib/components/QueueSlider.svelte
View file

@ -21,7 +21,7 @@
{#if i === 1}
<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" />
<img class={`h-full overflow-hidden ${i === 1 ? "rounded-full" : "rounded"}`} src={`https://lastfm.freetls.fastly.net/i/u/174s/${song.image_id}.png`} alt="Song cover" />
</div>
{#if i === 1}
<h1 class="mt-2">{song.title} - {song.artist}</h1>

12
frontend/src/lib/components/SuggestionInput.svelte
View file

@ -1,7 +1,15 @@
<script lang="ts">
let { roomId } = $props()
let input = $state("")
async function sendSong() {
let resp = await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
input = ""
}
</script>
<div class="flex h-full w-full flex-row items-center gap-2 rounded border-2 border-black p-4">
<input type="text" placeholder="Song & Artist" class="h-full w-3/4 rounded" />
<button class="w-1/4 rounded">Send</button>
<input type="text" placeholder="Song & Artist" class="h-full w-3/4 rounded" bind:value={input} />
<button class="w-1/4 rounded" onclick={sendSong}>Send</button>
</div>

29
frontend/src/lib/components/SuggestionList.svelte
View file

@ -1,32 +1,31 @@
<script lang="ts">
import type { Song } from "$lib/types"
let { suggestions }: { suggestions: Song[] } = $props()
import type { Suggestion } from "$lib/types"
let reactiveSugg = $derived(
[...suggestions].sort((a, b) => {
return b.points - a.points
})
)
let { suggestions, roomId }: { suggestions: Suggestion[]; roomId: string } = $props()
async function vote(amount: number, songId: string) {
await fetch(`/api/song/voting?room=${roomId}&song=${songId}&increment=${amount}`, { method: "POST" })
}
</script>
<div class="flex h-full w-full flex-col items-center gap-2 overflow-y-auto">
{#each reactiveSugg as sug}
{#each suggestions as sug}
<div class="flex h-[80px] w-full flex-row gap-2 rounded border-2 border-black p-2">
<div class="flex w-3/4 flex-row gap-2">
<img class="w-[60px] min-w-[60px] rounded" src={sug.image} alt="Song cover" />
<h1>{sug.name}</h1>
<img class="w-[60px] min-w-[60px] rounded" src={`https://lastfm.freetls.fastly.net/i/u/174s/${sug.image_id}.png`} alt="Song cover" />
<h1>{sug.title} - {sug.artist}</h1>
</div>
<div class="flex w-1/4 flex-row items-center justify-center gap-2">
<button
onclick={() => {
sug.points += 1
}}>🔥</button
vote(1, sug.uuid)
}}>+1</button
>
<p>{sug.points}</p>
<p>{sug.upvote}</p>
<button
onclick={() => {
sug.points--
}}>💩</button
vote(-1, sug.uuid)
}}>-1</button
>
</div>
</div>

14
frontend/src/lib/types.ts
View file

@ -1,12 +1,12 @@
import { z } from "zod"
export const SongSchema = z.object({
const SongSchema = z.object({
uuid: z.string(),
title: z.string(),
artist: z.string(),
tags: z.array(z.string()),
image_id: z.string(),
youtube_id: z.number().optional().default(0),
youtube_id: z.string(),
})
export type Song = z.infer<typeof SongSchema>
@ -25,3 +25,13 @@ export const createEmptySong = function (): Song {
youtube_id: 0,
}
}
const SuggestionSchema = SongSchema.extend({
upvote: z.number(),
})
export type Suggestion = z.infer<typeof SuggestionSchema>
export const parseSuggestion = async function (sugg: any): Promise<Suggestion> {
let resp = await SuggestionSchema.parseAsync(sugg)
return resp
}

6
frontend/src/routes/+page.svelte
View file

@ -2,11 +2,7 @@
</script>
<div class="flex h-full w-full items-center justify-center p-4">
<div class="w-1/2">
<div class="">
<h1>Scan your nearby rooms</h1>
<a href="/room/123">Room Test</a>
</div>
<div>
<h1>Create your room</h1>
</div>
</div>

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

@ -2,14 +2,17 @@
import QueueSlider from "$lib/components/QueueSlider.svelte"
import SuggestionInput from "$lib/components/SuggestionInput.svelte"
import Error from "$lib/components/Error.svelte"
import { parseSong, type Song } from "$lib/types.js"
import { parseSong, parseSuggestion, type Suggestion, type Song } from "$lib/types.js"
import { onMount } from "svelte"
import SuggestionList from "$lib/components/SuggestionList.svelte"
let { data } = $props()
let songs = $state<Song[]>([])
let playing = $state(0)
let suggestions = $state<Suggestion[]>([])
let error = $state({ code: 0, message: "" })
onMount(async () => {
@ -23,6 +26,25 @@
// Setup websocket connection
// Get room suggestions
resp = await fetch("/api/room/suggestions?room=" + data.roomId)
if (resp.status != 200) {
error = { code: 500, message: "Failed to retrive suggestions" }
return
}
let json = await resp.json()
json["songs"].forEach(async (i: any) => {
suggestions.push(await parseSuggestion(i))
})
suggestions = suggestions.sort((a, b) => {
return a.upvote - b.upvote
})
// Get the room queue
resp = await fetch("/api/queue?room=" + data.roomId)
@ -30,13 +52,12 @@
error = { code: 404, message: "Room not found" }
return
}
let json = await resp.json()
json = await resp.json()
json["queue"].forEach(async (i: any) => {
songs.push(await parseSong(i))
})
// Get room suggestions
console.log(songs)
})
</script>
@ -47,10 +68,10 @@
<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 />
<SuggestionInput roomId={data.roomId} />
</div>
<div class="w-full py-6 lg:w-[30vw]">
<!-- <SuggestionList suggestions={songs} /> -->
<SuggestionList {suggestions} roomId={data.roomId} />
</div>
</div>
{/if}