83 lines
2.4 KiB
Svelte
83 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { Play } from 'lucide-svelte';
|
|
import type { Playlist } from '$lib/api/types';
|
|
import { user } from '$lib/auth/store.svelte';
|
|
import { getPlaylist } from '$lib/api/playlists';
|
|
import { playQueue } from '$lib/player/store.svelte';
|
|
|
|
let { playlist }: { playlist: Playlist } = $props();
|
|
|
|
const isOwn = $derived(user.value?.id === playlist.user_id);
|
|
|
|
let starting = $state(false);
|
|
|
|
async function onPlayClick(e: MouseEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (starting) return;
|
|
starting = true;
|
|
try {
|
|
const detail = await getPlaylist(playlist.id);
|
|
if (detail.tracks.length > 0) {
|
|
playQueue(detail.tracks, 0);
|
|
}
|
|
} finally {
|
|
starting = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="card relative">
|
|
<a
|
|
href={`/playlists/${playlist.id}`}
|
|
class="group flex w-full flex-col items-start gap-2 rounded-md p-2 text-left hover:bg-surface-hover"
|
|
>
|
|
<div class="art-wrap relative aspect-square w-full overflow-hidden rounded-md bg-surface-hover">
|
|
{#if playlist.cover_url}
|
|
<img
|
|
src={playlist.cover_url}
|
|
alt=""
|
|
class="h-full w-full object-cover transition-transform group-hover:scale-105"
|
|
/>
|
|
{:else}
|
|
<div class="flex h-full w-full items-center justify-center text-text-muted">
|
|
<span class="text-xs">No tracks yet</span>
|
|
</div>
|
|
{/if}
|
|
<button
|
|
type="button"
|
|
aria-label={`Play ${playlist.name}`}
|
|
onclick={onPlayClick}
|
|
disabled={starting || playlist.track_count === 0}
|
|
class="play-overlay absolute inset-0 m-auto flex h-12 w-12 items-center justify-center rounded-full disabled:opacity-50"
|
|
>
|
|
<Play size={24} strokeWidth={1.5} fill="currentColor" class="ml-0.5" />
|
|
</button>
|
|
</div>
|
|
<div class="w-full min-w-0">
|
|
<div class="truncate text-sm font-medium text-text-primary">{playlist.name}</div>
|
|
<div class="truncate text-xs text-text-muted">
|
|
{playlist.track_count} {playlist.track_count === 1 ? 'track' : 'tracks'}
|
|
{#if !isOwn}
|
|
· by {playlist.owner_username}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<style>
|
|
.play-overlay {
|
|
background: var(--fs-accent);
|
|
color: var(--fs-parchment);
|
|
opacity: 0;
|
|
transition: opacity 150ms ease;
|
|
}
|
|
@media (hover: hover) {
|
|
.card:hover .play-overlay { opacity: 1; }
|
|
}
|
|
@media (hover: none) {
|
|
.play-overlay { opacity: 1; }
|
|
}
|
|
</style>
|