39 lines
1.8 KiB
Svelte
39 lines
1.8 KiB
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>
|