132 lines
3.5 KiB
Svelte
132 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
import { MoreVertical, Heart, HeartOff, ListMusic, Plus, Disc3 } from 'lucide-svelte';
|
|
import { goto } from '$app/navigation';
|
|
import { useQueryClient } from '@tanstack/svelte-query';
|
|
import { createLikedIdsQuery, likeEntity, unlikeEntity } from '$lib/api/likes';
|
|
import { listAlbumTracks } from '$lib/api/albums';
|
|
import { enqueueTracks } from '$lib/player/store.svelte';
|
|
import AddToPlaylistMenu from './AddToPlaylistMenu.svelte';
|
|
import TrackMenuItem from './TrackMenuItem.svelte';
|
|
import TrackMenuDivider from './TrackMenuDivider.svelte';
|
|
import type { TrackRef } from '$lib/api/types';
|
|
|
|
let {
|
|
albumId,
|
|
albumTitle,
|
|
artistId,
|
|
artistName,
|
|
tracks,
|
|
direction = 'down'
|
|
}: {
|
|
albumId: string;
|
|
albumTitle: string;
|
|
artistId: string;
|
|
artistName: string;
|
|
tracks?: TrackRef[];
|
|
direction?: 'up' | 'down';
|
|
} = $props();
|
|
|
|
let menuOpen = $state(false);
|
|
let addOpen = $state(false);
|
|
let cachedTracks: TrackRef[] | null = $state(tracks ?? null);
|
|
|
|
const queryClient = useQueryClient();
|
|
const likedQ = $derived(createLikedIdsQuery());
|
|
const liked = $derived.by(() => {
|
|
const data = $likedQ?.data;
|
|
if (!data) return false;
|
|
return data.album_ids.includes(albumId);
|
|
});
|
|
|
|
function toggleMenu(e: MouseEvent) {
|
|
e.stopPropagation();
|
|
menuOpen = !menuOpen;
|
|
}
|
|
|
|
function closeAll() {
|
|
menuOpen = false;
|
|
addOpen = false;
|
|
}
|
|
|
|
async function ensureTracks(): Promise<TrackRef[]> {
|
|
if (cachedTracks) return cachedTracks;
|
|
const fetched = await listAlbumTracks(albumId);
|
|
cachedTracks = fetched;
|
|
return fetched;
|
|
}
|
|
|
|
async function onAddToQueue() {
|
|
const ts = await ensureTracks();
|
|
enqueueTracks(ts);
|
|
closeAll();
|
|
}
|
|
|
|
async function onOpenAddToPlaylist() {
|
|
await ensureTracks();
|
|
menuOpen = false;
|
|
addOpen = true;
|
|
}
|
|
|
|
async function onToggleLike() {
|
|
closeAll();
|
|
if (liked) {
|
|
await unlikeEntity(queryClient, 'album', albumId);
|
|
} else {
|
|
await likeEntity(queryClient, 'album', albumId);
|
|
}
|
|
}
|
|
|
|
function onGoToArtist() {
|
|
closeAll();
|
|
goto(`/artists/${artistId}`);
|
|
}
|
|
|
|
function onKeydown(e: KeyboardEvent) {
|
|
if (!menuOpen && !addOpen) return;
|
|
if (e.key === 'Escape') {
|
|
e.preventDefault();
|
|
closeAll();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:window onclick={() => { menuOpen = false; addOpen = false; }} onkeydown={onKeydown} />
|
|
|
|
<div class="relative inline-block">
|
|
<button
|
|
type="button"
|
|
aria-label={`Album actions for ${albumTitle}`}
|
|
aria-haspopup="menu"
|
|
aria-expanded={menuOpen}
|
|
onclick={toggleMenu}
|
|
class="rounded p-1 text-text-muted hover:text-text-primary"
|
|
>
|
|
<MoreVertical size={16} strokeWidth={1} />
|
|
</button>
|
|
|
|
{#if menuOpen}
|
|
<div
|
|
role="menu"
|
|
tabindex="-1"
|
|
class="absolute right-0 z-20 w-56 rounded-md border border-border bg-surface p-1 shadow-lg
|
|
{direction === 'up' ? 'bottom-full mb-1' : 'top-full mt-1'}"
|
|
onclick={(e) => e.stopPropagation()}
|
|
>
|
|
<TrackMenuItem
|
|
icon={liked ? HeartOff : Heart}
|
|
label={liked ? 'Unlike album' : 'Like album'}
|
|
onclick={onToggleLike}
|
|
/>
|
|
<TrackMenuDivider />
|
|
<TrackMenuItem icon={Plus} label="Add to queue" onclick={onAddToQueue} />
|
|
<TrackMenuItem icon={ListMusic} label="Add to playlist…" onclick={onOpenAddToPlaylist} />
|
|
<TrackMenuDivider />
|
|
<TrackMenuItem icon={Disc3} label="Go to artist" onclick={onGoToArtist} />
|
|
</div>
|
|
{/if}
|
|
|
|
{#if addOpen && cachedTracks}
|
|
<AddToPlaylistMenu tracks={cachedTracks} onClose={closeAll} />
|
|
{/if}
|
|
</div>
|