jankboard/client/src/lib/Apps/MusicBrowser/Song.svelte

56 lines
1.5 KiB
Svelte
Raw Normal View History

2024-02-21 23:36:24 -08:00
<script lang="ts">
import { musicStore } from '../../stores/musicStore'
export let song: SongData
export let slug: string
let { title, artist, coverImg } = song
const handlePlay = () => {
2024-02-22 17:16:25 -08:00
musicStore.play(slug)
2024-02-21 23:36:24 -08:00
}
const handleQueueNext = () => {
musicStore.queueNext(slug)
}
const handleQueueLast = () => {
musicStore.push(slug)
}
2024-02-21 23:59:30 -08:00
$: nowPlaying = slug === $musicStore.queue[$musicStore.currentIndex]
2024-02-21 23:36:24 -08:00
</script>
<div
class="flex gap-1 flex-col rounded-lg p-4 bg-slate-800 backdrop-blur-xl shadow-md w-60 flex-grow basis-1/5"
>
<img src={coverImg} alt="album cover" class="shadow-md rounded-lg w-full" />
<p class="mt-2 text-2xl font-medium">{title}</p>
<p class="text-xl text-slate-400">{artist}</p>
<div class="flex justify-center">
<div class="my-auto flex gap-4">
2024-02-21 23:59:30 -08:00
<button
class="mt-2 hover:brightness-75"
on:click={!nowPlaying ? handlePlay : () => {}}
>
2024-02-21 23:36:24 -08:00
<span class="material-symbols-outlined icon fill">play_arrow</span>
</button>
<button class="mt-2 hover:brightness-75" on:click={handleQueueNext}>
<span class="material-symbols-outlined icon fill">next_plan</span>
</button>
<button class="mt-2 hover:brightness-75" on:click={handleQueueLast}>
<span class="material-symbols-outlined icon">queue_music</span>
</button>
</div>
</div>
</div>
<style lang="postcss">
.icon {
font-size: 28px;
}
.fill {
font-variation-settings: 'FILL' 1;
}
</style>