Enhanced search: separate albums from singles/EPs and improve UX
Split the enhanced search dropdown into distinct Albums and Singles & EPs sections using the album_type field. Changed the zero-tracks error from a cryptic red error toast to a clear warning message. Fixed the loading text to show the actual music source name instead of hardcoded "Spotify".
This commit is contained in:
parent
ff4d3adab5
commit
40be502a98
3 changed files with 43 additions and 6 deletions
|
|
@ -3718,7 +3718,8 @@ def enhanced_search():
|
|||
"artist": artist_name,
|
||||
"image_url": album.image_url,
|
||||
"release_date": album.release_date,
|
||||
"total_tracks": album.total_tracks
|
||||
"total_tracks": album.total_tracks,
|
||||
"album_type": album.album_type
|
||||
})
|
||||
|
||||
# Search for tracks
|
||||
|
|
|
|||
|
|
@ -1431,7 +1431,7 @@
|
|||
<!-- Loading State -->
|
||||
<div id="enhanced-loading" class="enhanced-loading hidden">
|
||||
<div class="spinner"></div>
|
||||
<p>Searching across Spotify and your library...</p>
|
||||
<p id="enhanced-loading-text">Searching across Spotify and your library...</p>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
|
|
@ -1480,6 +1480,16 @@
|
|||
<div class="enh-compact-list" id="enh-albums-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- Singles & EPs -->
|
||||
<div id="enh-singles-section" class="enh-dropdown-section hidden">
|
||||
<div class="enh-section-header">
|
||||
<span class="enh-section-icon">🎶</span>
|
||||
<h4 class="enh-section-title">Singles & EPs</h4>
|
||||
<span class="enh-section-count" id="enh-singles-count">0</span>
|
||||
</div>
|
||||
<div class="enh-compact-list" id="enh-singles-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- Tracks -->
|
||||
<div id="enh-tracks-section" class="enh-dropdown-section hidden">
|
||||
<div class="enh-section-header">
|
||||
|
|
|
|||
|
|
@ -2612,8 +2612,12 @@ function initializeSearchModeToggle() {
|
|||
async function performEnhancedSearch(query) {
|
||||
console.log('Enhanced search:', query);
|
||||
|
||||
// Show loading state
|
||||
// Show loading state with correct source name
|
||||
showDropdown();
|
||||
const loadingText = document.getElementById('enhanced-loading-text');
|
||||
if (loadingText) {
|
||||
loadingText.textContent = `Searching across ${currentMusicSourceName} and your library...`;
|
||||
}
|
||||
loadingState.classList.remove('hidden');
|
||||
emptyState.classList.add('hidden');
|
||||
resultsContainer.classList.add('hidden');
|
||||
|
|
@ -2711,12 +2715,17 @@ function initializeSearchModeToggle() {
|
|||
})
|
||||
);
|
||||
|
||||
// Split albums from singles/EPs (albums is the catch-all for unknown types)
|
||||
const allAlbums = data.spotify_albums || [];
|
||||
const singlesAndEPs = allAlbums.filter(a => a.album_type === 'single' || a.album_type === 'ep');
|
||||
const albums = allAlbums.filter(a => a.album_type !== 'single' && a.album_type !== 'ep');
|
||||
|
||||
// Render Albums
|
||||
renderCompactSection(
|
||||
'enh-albums-section',
|
||||
'enh-albums-list',
|
||||
'enh-albums-count',
|
||||
data.spotify_albums || [],
|
||||
albums,
|
||||
(album) => ({
|
||||
image: album.image_url,
|
||||
placeholder: '💿',
|
||||
|
|
@ -2726,6 +2735,21 @@ function initializeSearchModeToggle() {
|
|||
})
|
||||
);
|
||||
|
||||
// Render Singles & EPs
|
||||
renderCompactSection(
|
||||
'enh-singles-section',
|
||||
'enh-singles-list',
|
||||
'enh-singles-count',
|
||||
singlesAndEPs,
|
||||
(album) => ({
|
||||
image: album.image_url,
|
||||
placeholder: '🎶',
|
||||
name: album.name,
|
||||
meta: `${album.artist} • ${album.release_date ? album.release_date.substring(0, 4) : 'N/A'}`,
|
||||
onClick: () => handleEnhancedSearchAlbumClick(album)
|
||||
})
|
||||
);
|
||||
|
||||
// Render Tracks
|
||||
renderCompactSection(
|
||||
'enh-tracks-section',
|
||||
|
|
@ -2825,7 +2849,7 @@ function initializeSearchModeToggle() {
|
|||
|
||||
// Determine type based on section ID
|
||||
const isArtist = sectionId.includes('artists');
|
||||
const isAlbum = sectionId.includes('albums');
|
||||
const isAlbum = sectionId.includes('albums') || sectionId.includes('singles');
|
||||
const isTrack = sectionId.includes('tracks');
|
||||
|
||||
// Add appropriate grid class to list
|
||||
|
|
@ -2939,7 +2963,9 @@ function initializeSearchModeToggle() {
|
|||
const albumData = await response.json();
|
||||
|
||||
if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
|
||||
throw new Error('No tracks found for this album');
|
||||
hideLoadingOverlay();
|
||||
showToast(`No tracks available for "${album.name}". This release may have been delisted or is not available in your region.`, 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`✅ Loaded ${albumData.tracks.length} tracks for ${albumData.name}`);
|
||||
|
|
|
|||
Loading…
Reference in a new issue