mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 15:25:46 +00:00
feat(albums): add 'Enqueue' option to album cover, context menu and multi-select toolbar (closes #253) (#256)
Per bcorporaal's request in #253: making a queue from multiple albums required either replacing the queue (Play) or going into each album detail page first. Three new entry points cover the common workflows: 1. Hover button on the album cover next to Play. Both buttons share the same accent style and size so the secondary action is just as readable as the primary — first attempt with a darker pill was hard to see and unbalanced the hover. 2. Context-menu entry "Enqueue Album" between "Open Album" and "Go to Artist". The i18n key already existed (was used by the album-song sub-context); just wiring up the action. 3. Multi-select toolbar in Albums.tsx: new "Enqueue (N)" button placed before "Add Offline" so power users selecting several albums no longer have to right-click. Plus a context-menu entry "Enqueue N Albums" for the same flow when a multi-album right-click happens anywhere else. All multi-album fetches use Promise.all(getAlbum(...)) — Navidrome handles parallel requests instantly (per memory note from PR #246). i18n: 4 new keys per locale (3 with pluralisation: contextMenu.enqueueAlbums, albums.enqueueSelected, albums.enqueueQueued). Co-authored-by: Psychotoxical <dev@psysonic.app> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
committed by
GitHub
parent
f7a721b7b1
commit
2318f9e07a
+22
-1
@@ -4,6 +4,7 @@ import GenreFilterBar from '../components/GenreFilterBar';
|
||||
import YearFilterButton from '../components/YearFilterButton';
|
||||
import SortDropdown from '../components/SortDropdown';
|
||||
import { getAlbumList, getAlbumsByGenre, getAlbum, SubsonicAlbum, buildDownloadUrl } from '../api/subsonic';
|
||||
import { songToTrack } from '../store/playerStore';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
import { useOfflineStore } from '../store/offlineStore';
|
||||
@@ -13,7 +14,7 @@ import { invoke } from '@tauri-apps/api/core';
|
||||
import { join } from '@tauri-apps/api/path';
|
||||
import { showToast } from '../utils/toast';
|
||||
import { useZipDownloadStore } from '../store/zipDownloadStore';
|
||||
import { CheckSquare2, Download, HardDriveDownload, ListMusic, Disc3 } from 'lucide-react';
|
||||
import { CheckSquare2, Download, HardDriveDownload, ListMusic, Disc3, ListPlus } from 'lucide-react';
|
||||
|
||||
type SortType = 'alphabeticalByName' | 'alphabeticalByArtist';
|
||||
type CompFilter = 'all' | 'only' | 'hide';
|
||||
@@ -79,6 +80,22 @@ export default function Albums() {
|
||||
|
||||
const selectedAlbums = visibleAlbums.filter(a => selectedIds.has(a.id));
|
||||
const openContextMenu = usePlayerStore(state => state.openContextMenu);
|
||||
const enqueue = usePlayerStore(state => state.enqueue);
|
||||
|
||||
const handleEnqueueSelected = async () => {
|
||||
if (selectedAlbums.length === 0) return;
|
||||
try {
|
||||
// Parallel — Navidrome handles concurrent getAlbum requests fine.
|
||||
const results = await Promise.all(selectedAlbums.map(a => getAlbum(a.id).catch(() => null)));
|
||||
const tracks = results.flatMap(r => r ? r.songs.map(songToTrack) : []);
|
||||
if (tracks.length > 0) {
|
||||
enqueue(tracks);
|
||||
showToast(t('albums.enqueueQueued', { count: selectedAlbums.length }), 2500, 'info');
|
||||
}
|
||||
} finally {
|
||||
clearSelection();
|
||||
}
|
||||
};
|
||||
|
||||
const cycleCompFilter = () => {
|
||||
setCompFilter(v => v === 'all' ? 'only' : v === 'only' ? 'hide' : 'all');
|
||||
@@ -210,6 +227,10 @@ export default function Albums() {
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
|
||||
{selectionMode && selectedIds.size > 0 ? (
|
||||
<>
|
||||
<button className="btn btn-surface albums-selection-action-btn" onClick={handleEnqueueSelected}>
|
||||
<ListPlus size={15} />
|
||||
{t('albums.enqueueSelected', { count: selectedIds.size })}
|
||||
</button>
|
||||
<button className="btn btn-surface albums-selection-action-btn" onClick={handleAddOffline}>
|
||||
<HardDriveDownload size={15} />
|
||||
{t('albums.addOffline')}
|
||||
|
||||
Reference in New Issue
Block a user