team-1/frontend/src/lib/components/QueueSlider.svelte

<script lang="ts">
    import { type Song, createEmptySong } from "$lib/types"

    let { queueSongs, playingIndex } = $props()

    let displaySongs = $derived<Song[]>([
        playingIndex > 0 ? queueSongs[playingIndex - 1] : createEmptySong(),
        queueSongs[playingIndex],
        playingIndex == queueSongs.length - 1 ? createEmptySong() : queueSongs[playingIndex + 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?.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"}`}>
                    <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={`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>
                    {/if}
                </div>
            {:else}
                <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>
</div>