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

feat: added error page + join endpoint

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,30 +1,38 @@
<script lang="ts">
import { type Song, createEmptySong } from "$lib/types"
let { songs, playing } = $props()
let displaySongs = $derived([
playing > 0 && playing < songs.length ? songs[playing - 1] : { name: "", image: "" },
let displaySongs = $derived<Song[]>([
playing > 0 && playing < songs.length ? songs[playing - 1] : createEmptySong(),
songs[playing],
playing == songs.length - 1 ? { name: "", image: "" } : songs[playing + 1],
playing == songs.length - 1 ? createEmptySong() : songs[playing + 1],
])
</script>
<div class="relative flex w-full justify-center overflow-hidden">
<div class="flex w-fit flex-row gap-4">
{#each displaySongs as song, i}
{#if song.name != ""}
{#if song?.title && song.title != ""}
<div class={`relative flex flex-col items-center transition-all duration-300 ${i === 1 ? "z-10" : "z-0 scale-85 opacity-50"}`}>
<img
class="h-[60vw] max-h-[250px] w-[60vw]
max-w-[250px] rounded object-cover transition-all duration-300"
src={song.image}
alt="Song cover"
/>
<div
class={`flex h-[60vw] max-h-[250px] w-[60vw] max-w-[250px] items-center justify-center ${i === 1 ? "spin-slower rounded-full border-2 border-black" : "rounded"} object-cover`}
>
{#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" />
</div>
{#if i === 1}
<h1 class="mt-2">{song.name}</h1>
<h1 class="mt-2">{song.title} - {song.artist}</h1>
{/if}
</div>
{:else}
<div class="h-[60vw] max-h-[250px] w-[60vw] max-w-[250px]"></div>
<div class="flex h-[60vw] max-h-[250px] w-[60vw] max-w-[250px] items-center justify-center">
{#if i === 1}
<p>No song in queue</p>
{/if}
</div>
{/if}
{/each}
</div>