feat: wire album Play, Shuffle, and Add to Queue buttons

- Add onPlayAll, onShuffleAll, onAddToQueue props to AlbumDetailView
- Implement handlePlayAllAlbum to play album from first track
- Implement handleShuffleAlbum to enable shuffle and play
- Implement handleAddAlbumToQueue to append album to existing queue
This commit is contained in:
vicrodh committed 2026-01-09 09:56:18 -06:00
1 parent b5c853d945
commit 740a3a64fe
2 files changed
+58 -3

No files matched your search

@@ -31,9 +31,12 @@
onBack: () => void;
onArtistClick?: () => void;
onTrackPlay?: (track: Track) => void;
onPlayAll?: () => void;
onShuffleAll?: () => void;
onAddToQueue?: () => void;
}
let { album, onBack, onArtistClick, onTrackPlay }: Props = $props();
let { album, onBack, onArtistClick, onTrackPlay, onPlayAll, onShuffleAll, onAddToQueue }: Props = $props();
let currentTrack = $state<number | null>(null);
let isFavorite = $state(false);
@@ -71,11 +74,12 @@
style="background-color: {playBtnHovered ? 'var(--accent-hover)' : 'var(--accent-primary)'}"
onmouseenter={() => (playBtnHovered = true)}
onmouseleave={() => (playBtnHovered = false)}
onclick={onPlayAll}
>
<Play size={18} fill="white" color="white" />
<span>Play</span>
</button>
<button class="secondary-btn">
<button class="secondary-btn" onclick={onShuffleAll}>
<Shuffle size={18} />
<span>Shuffle</span>
</button>
@@ -86,7 +90,7 @@
fill={isFavorite ? 'var(--accent-primary)' : 'none'}
/>
</button>
<button class="icon-btn">
<button class="icon-btn" onclick={onAddToQueue}>
<Plus size={20} color="white" />
</button>
<button class="icon-btn">
+51
View File
@@ -541,6 +541,54 @@
}
}
// Play all tracks from album (starting from first track)
async function handlePlayAllAlbum() {
if (!selectedAlbum?.tracks?.length) return;
const firstTrack = selectedAlbum.tracks[0];
await handleAlbumTrackPlay(firstTrack);
}
// Shuffle play all tracks from album
async function handleShuffleAlbum() {
if (!selectedAlbum?.tracks?.length) return;
// Set shuffle mode first
try {
await invoke('set_shuffle', { enabled: true });
isShuffle = true;
} catch (err) {
console.error('Failed to enable shuffle:', err);
}
// Then play from first track (queue will be shuffled)
await handlePlayAllAlbum();
showToast('Shuffle play enabled', 'info');
}
// Add all album tracks to existing queue
async function handleAddAlbumToQueue() {
if (!selectedAlbum?.tracks?.length) return;
const artwork = selectedAlbum.artwork || '';
const queueTracks: BackendQueueTrack[] = selectedAlbum.tracks.map(t => ({
id: t.id,
title: t.title,
artist: t.artist || selectedAlbum?.artist || 'Unknown Artist',
album: selectedAlbum?.title || '',
duration_secs: t.durationSeconds,
artwork_url: artwork || null
}));
try {
await invoke('add_tracks_to_queue', { tracks: queueTracks });
await syncQueueState();
showToast(`Added ${queueTracks.length} tracks to queue`, 'success');
} catch (err) {
console.error('Failed to add to queue:', err);
showToast('Failed to add to queue', 'error');
}
}
// Toast Functions
function showToast(message: string, type: 'success' | 'error' | 'info' = 'info') {
toast = { message, type };
@@ -730,6 +778,9 @@
album={selectedAlbum}
onBack={goBack}
onTrackPlay={handleAlbumTrackPlay}
onPlayAll={handlePlayAllAlbum}
onShuffleAll={handleShuffleAlbum}
onAddToQueue={handleAddAlbumToQueue}
/>
{:else if activeView === 'library'}
<div class="placeholder-view">