diff --git a/web_server.py b/web_server.py index e62f7ef6..e665ff59 100644 --- a/web_server.py +++ b/web_server.py @@ -1587,6 +1587,91 @@ def get_artists(): ] return jsonify({"artists": mock_artists}) +@app.route('/api/artist//discography', methods=['GET']) +def get_artist_discography(artist_id): + """Get an artist's complete discography (albums and singles)""" + try: + if not spotify_client or not spotify_client.is_authenticated(): + return jsonify({"error": "Spotify not authenticated"}), 401 + + print(f"🎤 Fetching discography for artist: {artist_id}") + + # Get all albums and singles for the artist + albums = spotify_client.get_artist_albums(artist_id, album_type='album,single,appears_on', limit=50) + + if not albums: + return jsonify({ + "albums": [], + "singles": [] + }) + + # Separate albums from singles/EPs + album_list = [] + singles_list = [] + + # Track seen albums to avoid duplicates (especially for "appears_on") + seen_albums = set() + + for album in albums: + # Skip duplicates + if album.id in seen_albums: + continue + seen_albums.add(album.id) + + # Skip compilations and appears_on that aren't the main artist's work + if hasattr(album, 'album_type') and album.album_type == 'appears_on': + # Only include if the artist is the main artist + if hasattr(album, 'artists') and album.artists: + main_artist_id = album.artists[0].id if hasattr(album.artists[0], 'id') else None + if main_artist_id != artist_id: + continue + + album_data = { + "id": album.id, + "name": album.name, + "release_date": album.release_date if hasattr(album, 'release_date') else None, + "album_type": album.album_type if hasattr(album, 'album_type') else 'album', + "image_url": album.image_url if hasattr(album, 'image_url') else None, + "total_tracks": album.total_tracks if hasattr(album, 'total_tracks') else 0, + "external_urls": album.external_urls if hasattr(album, 'external_urls') else {} + } + + # Categorize by album type + if hasattr(album, 'album_type'): + if album.album_type in ['single', 'ep']: + singles_list.append(album_data) + else: # 'album' or 'compilation' + album_list.append(album_data) + else: + # Default to album if no type specified + album_list.append(album_data) + + # Sort by release date (newest first) + def get_release_year(item): + if item['release_date']: + try: + # Handle different date formats (YYYY, YYYY-MM, YYYY-MM-DD) + return int(item['release_date'][:4]) + except (ValueError, IndexError): + return 0 + return 0 + + album_list.sort(key=get_release_year, reverse=True) + singles_list.sort(key=get_release_year, reverse=True) + + print(f"✅ Found {len(album_list)} albums and {len(singles_list)} singles for artist") + + return jsonify({ + "albums": album_list, + "singles": singles_list + }) + + except Exception as e: + print(f"❌ Error fetching artist discography: {e}") + import traceback + traceback.print_exc() + return jsonify({"error": str(e)}), 500 + @app.route('/api/stream/start', methods=['POST']) def stream_start(): """Start streaming a track in the background""" diff --git a/webui/index.html b/webui/index.html index ba9af79d..6d3ba5cb 100644 --- a/webui/index.html +++ b/webui/index.html @@ -528,12 +528,94 @@
-
-

Artists

+ +
+
+
+

🎵 Discover Artists

+

Search for your favorite artists and explore their complete discography

+
+ +
+ +
🔍
+
+ +
+ Start typing to search for artists +
+
-
-
- + + + + + +
diff --git a/webui/static/script.js b/webui/static/script.js index 686fdd6f..a2d6e389 100644 --- a/webui/static/script.js +++ b/webui/static/script.js @@ -47,6 +47,24 @@ let tidalPlaylists = []; let tidalPlaylistStates = {}; // Key: playlist_id, Value: playlist state with phases let tidalPlaylistsLoaded = false; +// --- Artists Page State Management --- +let artistsPageState = { + currentView: 'search', // 'search', 'results', 'detail' + searchQuery: '', + searchResults: [], + selectedArtist: null, + artistDiscography: { + albums: [], + singles: [] + }, + cache: { + searches: {}, // Cache search results by query + discography: {} // Cache discography by artist ID + } +}; +let artistsSearchTimeout = null; +let artistsSearchController = null; + // --- Wishlist Modal Persistence State Management --- const WishlistModalState = { // Track if wishlist modal was visible before page refresh @@ -343,7 +361,7 @@ async function loadPageData(pageId) { break; case 'artists': stopDownloadPolling(); - await loadArtistsData(); + initializeArtistsPage(); break; case 'settings': initializeSettings(); @@ -5183,6 +5201,7 @@ window.selectAlbum = selectAlbum; window.navigateToPage = navigateToPage; window.openKofi = openKofi; window.copyAddress = copyAddress; +window.retryLastSearch = retryLastSearch; window.showVersionInfo = showVersionInfo; window.closeVersionModal = closeVersionModal; window.testConnection = testConnection; @@ -9040,6 +9059,673 @@ async function resetYouTubePlaylist(urlHash) { } } +// ============================================================================ +// ARTISTS PAGE FUNCTIONALITY - ELEGANT SEARCH & DISCOVERY +// ============================================================================ + +/** + * Initialize the artists page when navigated to + */ +function initializeArtistsPage() { + console.log('🎵 Initializing Artists Page'); + + // Get DOM elements + const searchInput = document.getElementById('artists-search-input'); + const headerSearchInput = document.getElementById('artists-header-search-input'); + const searchStatus = document.getElementById('artists-search-status'); + const backButton = document.getElementById('artists-back-button'); + const detailBackButton = document.getElementById('artist-detail-back-button'); + + // Set up event listeners + if (searchInput) { + searchInput.addEventListener('input', handleArtistsSearchInput); + searchInput.addEventListener('keypress', handleArtistsSearchKeypress); + } + + if (headerSearchInput) { + headerSearchInput.addEventListener('input', handleArtistsHeaderSearchInput); + headerSearchInput.addEventListener('keypress', handleArtistsSearchKeypress); + } + + if (backButton) { + backButton.addEventListener('click', () => showArtistsSearchState()); + } + + if (detailBackButton) { + detailBackButton.addEventListener('click', () => showArtistsResultsState()); + } + + // Initialize tabs + initializeArtistTabs(); + + // Reset to search state + showArtistsSearchState(); + console.log('✅ Artists Page initialized successfully'); +} + +/** + * Handle search input with debouncing + */ +function handleArtistsSearchInput(event) { + const query = event.target.value.trim(); + updateArtistsSearchStatus('searching'); + + // Clear existing timeout + if (artistsSearchTimeout) { + clearTimeout(artistsSearchTimeout); + } + + // Cancel any active search + if (artistsSearchController) { + artistsSearchController.abort(); + } + + if (query === '') { + updateArtistsSearchStatus('default'); + return; + } + + // Set up new debounced search + artistsSearchTimeout = setTimeout(() => { + performArtistsSearch(query); + }, 1000); // 1 second debounce +} + +/** + * Handle header search input (already in results state) + */ +function handleArtistsHeaderSearchInput(event) { + const query = event.target.value.trim(); + + // Update main search input to match + const mainInput = document.getElementById('artists-search-input'); + if (mainInput) { + mainInput.value = query; + } + + // Trigger search with same debouncing logic + handleArtistsSearchInput(event); +} + +/** + * Handle Enter key press in search inputs + */ +function handleArtistsSearchKeypress(event) { + if (event.key === 'Enter') { + event.preventDefault(); + const query = event.target.value.trim(); + + if (query && query !== artistsPageState.searchQuery) { + // Clear timeout and search immediately + if (artistsSearchTimeout) { + clearTimeout(artistsSearchTimeout); + } + performArtistsSearch(query); + } + } +} + +/** + * Perform artist search with API call + */ +async function performArtistsSearch(query) { + console.log(`🔍 Searching for artists: "${query}"`); + + // Check cache first + if (artistsPageState.cache.searches[query]) { + console.log('📦 Using cached search results'); + displayArtistsResults(query, artistsPageState.cache.searches[query]); + return; + } + + // Update status + updateArtistsSearchStatus('searching'); + + // Show loading cards immediately if we're in results view + if (artistsPageState.currentView === 'results') { + showSearchLoadingCards(); + } + + try { + // Set up abort controller + artistsSearchController = new AbortController(); + + const response = await fetch('/api/match/search', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + query: query, + context: 'artist' + }), + signal: artistsSearchController.signal + }); + + if (!response.ok) { + throw new Error(`Search failed: ${response.status}`); + } + + const data = await response.json(); + console.log(`✅ Found ${data.results?.length || 0} artists`); + + // Transform the results to flatten the nested artist data + const transformedResults = (data.results || []).map(result => { + // Extract artist data from the nested structure + const artist = result.artist || result; + return { + id: artist.id, + name: artist.name, + image_url: artist.image_url, + genres: artist.genres, + popularity: artist.popularity, + confidence: result.confidence || 0 + }; + }); + + console.log('🔧 Transformed results:', transformedResults); + + // Cache the transformed results + artistsPageState.cache.searches[query] = transformedResults; + + // Display results + displayArtistsResults(query, transformedResults); + + } catch (error) { + if (error.name !== 'AbortError') { + console.error('❌ Artist search failed:', error); + + // Provide specific error messages based on the error type + let errorMessage = 'Search failed. Please try again.'; + if (error.message.includes('401') || error.message.includes('authentication')) { + errorMessage = 'Spotify not authenticated. Please check your API settings.'; + } else if (error.message.includes('network') || error.message.includes('fetch')) { + errorMessage = 'Network error. Please check your connection.'; + } else if (error.message.includes('timeout')) { + errorMessage = 'Search timed out. Please try again.'; + } + + updateArtistsSearchStatus('error', errorMessage); + } + } finally { + artistsSearchController = null; + } +} + +/** + * Display artist search results + */ +function displayArtistsResults(query, results) { + console.log(`📊 Displaying ${results.length} artist results`); + + // Update state + artistsPageState.searchQuery = query; + artistsPageState.searchResults = results; + artistsPageState.currentView = 'results'; + + // Update header search input if different + const headerInput = document.getElementById('artists-header-search-input'); + if (headerInput && headerInput.value !== query) { + headerInput.value = query; + } + + // Show results state + showArtistsResultsState(); + + // Populate results + const container = document.getElementById('artists-cards-container'); + if (!container) return; + + if (results.length === 0) { + container.innerHTML = ` +
+
🔍
+
No artists found
+
Try a different search term
+
+ `; + return; + } + + // Create artist cards + container.innerHTML = results.map(result => createArtistCard(result)).join(''); + + // Add event listeners to cards + container.querySelectorAll('.artist-card').forEach((card, index) => { + card.addEventListener('click', () => selectArtist(results[index])); + }); + + // Add mouse wheel horizontal scrolling + container.addEventListener('wheel', (event) => { + if (event.deltaY !== 0) { + event.preventDefault(); + container.scrollLeft += event.deltaY; + } + }); +} + +/** + * Create HTML for an artist card + */ +function createArtistCard(artist) { + const imageUrl = artist.image_url || ''; + const genres = artist.genres && artist.genres.length > 0 ? + artist.genres.slice(0, 3).join(', ') : 'Various genres'; + const popularity = artist.popularity || 0; + + // Create a fallback gradient if no image is available + const backgroundStyle = imageUrl ? + `background-image: url('${imageUrl}');` : + `background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);`; + + // Format popularity as a percentage for better UX + const popularityText = popularity > 0 ? `${popularity}% Popular` : 'Popularity Unknown'; + + return ` +
+
+
+
+
${escapeHtml(artist.name)}
+
${escapeHtml(genres)}
+
+ 🔥 + ${popularityText} +
+
+
+ `; +} + +/** + * Select an artist and show their discography + */ +async function selectArtist(artist) { + console.log(`🎤 Selected artist: ${artist.name}`); + + // Update state + artistsPageState.selectedArtist = artist; + artistsPageState.currentView = 'detail'; + + // Show detail state + showArtistDetailState(); + + // Update artist info in header + updateArtistDetailHeader(artist); + + // Load discography + await loadArtistDiscography(artist.id); +} + +/** + * Load artist's discography from Spotify + */ +async function loadArtistDiscography(artistId) { + console.log(`💿 Loading discography for artist: ${artistId}`); + + // Check cache first + if (artistsPageState.cache.discography[artistId]) { + console.log('📦 Using cached discography'); + displayArtistDiscography(artistsPageState.cache.discography[artistId]); + return; + } + + try { + // Show loading states + showDiscographyLoading(); + + // Call the real API endpoint + const response = await fetch(`/api/artist/${artistId}/discography`); + + if (!response.ok) { + if (response.status === 401) { + throw new Error('Spotify not authenticated. Please check your API settings.'); + } + throw new Error(`Failed to load discography: ${response.status}`); + } + + const data = await response.json(); + + if (data.error) { + throw new Error(data.error); + } + + const discography = { + albums: data.albums || [], + singles: data.singles || [] + }; + + console.log(`✅ Loaded ${discography.albums.length} albums and ${discography.singles.length} singles`); + + // Cache the results + artistsPageState.cache.discography[artistId] = discography; + artistsPageState.artistDiscography = discography; + + // Display results + displayArtistDiscography(discography); + + } catch (error) { + console.error('❌ Failed to load discography:', error); + showDiscographyError(error.message); + } +} + +/** + * Display artist's discography in tabs + */ +function displayArtistDiscography(discography) { + console.log(`📀 Displaying discography: ${discography.albums?.length || 0} albums, ${discography.singles?.length || 0} singles`); + + // Populate albums + const albumsContainer = document.getElementById('album-cards-container'); + if (albumsContainer) { + if (discography.albums?.length > 0) { + albumsContainer.innerHTML = discography.albums.map(album => createAlbumCard(album)).join(''); + } else { + albumsContainer.innerHTML = ` +
+
💿
+
No albums found
+
+ `; + } + } + + // Populate singles + const singlesContainer = document.getElementById('singles-cards-container'); + if (singlesContainer) { + if (discography.singles?.length > 0) { + singlesContainer.innerHTML = discography.singles.map(single => createAlbumCard(single)).join(''); + } else { + singlesContainer.innerHTML = ` +
+
🎵
+
No singles or EPs found
+
+ `; + } + } +} + +/** + * Create HTML for an album/single card + */ +function createAlbumCard(album) { + const imageUrl = album.image_url || ''; + const year = album.release_date ? new Date(album.release_date).getFullYear() : ''; + const type = album.album_type === 'album' ? 'Album' : + album.album_type === 'single' ? 'Single' : 'EP'; + + // Create a fallback gradient if no image is available + const backgroundStyle = imageUrl ? + `background-image: url('${imageUrl}');` : + `background: linear-gradient(135deg, rgba(29, 185, 84, 0.2) 0%, rgba(24, 156, 71, 0.1) 100%);`; + + return ` +
+
+
+
${escapeHtml(album.name)}
+
${year || 'Unknown'}
+
${type}
+
+
+ `; +} + +/** + * Initialize artist detail tabs + */ +function initializeArtistTabs() { + const tabButtons = document.querySelectorAll('.artist-tab'); + const tabContents = document.querySelectorAll('.tab-content'); + + tabButtons.forEach(button => { + button.addEventListener('click', () => { + const tabName = button.getAttribute('data-tab'); + + // Update button states + tabButtons.forEach(btn => btn.classList.remove('active')); + button.classList.add('active'); + + // Update content states + tabContents.forEach(content => { + content.classList.remove('active'); + if (content.id === `${tabName}-content`) { + content.classList.add('active'); + } + }); + + console.log(`🔄 Switched to ${tabName} tab`); + }); + }); +} + +/** + * State management functions + */ +function showArtistsSearchState() { + console.log('🔄 Showing search state'); + + const searchState = document.getElementById('artists-search-state'); + const resultsState = document.getElementById('artists-results-state'); + const detailState = document.getElementById('artist-detail-state'); + + if (searchState) { + searchState.classList.remove('hidden', 'fade-out'); + } + if (resultsState) { + resultsState.classList.add('hidden'); + resultsState.classList.remove('show'); + } + if (detailState) { + detailState.classList.add('hidden'); + detailState.classList.remove('show'); + } + + artistsPageState.currentView = 'search'; + updateArtistsSearchStatus('default'); +} + +function showArtistsResultsState() { + console.log('🔄 Showing results state'); + + const searchState = document.getElementById('artists-search-state'); + const resultsState = document.getElementById('artists-results-state'); + const detailState = document.getElementById('artist-detail-state'); + + if (searchState) { + searchState.classList.add('fade-out'); + setTimeout(() => searchState.classList.add('hidden'), 200); + } + if (resultsState) { + resultsState.classList.remove('hidden'); + setTimeout(() => resultsState.classList.add('show'), 50); + } + if (detailState) { + detailState.classList.add('hidden'); + detailState.classList.remove('show'); + } + + artistsPageState.currentView = 'results'; +} + +function showArtistDetailState() { + console.log('🔄 Showing detail state'); + + const searchState = document.getElementById('artists-search-state'); + const resultsState = document.getElementById('artists-results-state'); + const detailState = document.getElementById('artist-detail-state'); + + if (searchState) { + searchState.classList.add('hidden', 'fade-out'); + } + if (resultsState) { + resultsState.classList.add('hidden'); + resultsState.classList.remove('show'); + } + if (detailState) { + detailState.classList.remove('hidden'); + setTimeout(() => detailState.classList.add('show'), 50); + } + + artistsPageState.currentView = 'detail'; +} + +/** + * Update search status text and styling + */ +function updateArtistsSearchStatus(status, message = null) { + const statusElement = document.getElementById('artists-search-status'); + if (!statusElement) return; + + // Clear all status classes + statusElement.classList.remove('searching', 'error'); + + switch (status) { + case 'default': + statusElement.textContent = 'Start typing to search for artists'; + break; + case 'searching': + statusElement.classList.add('searching'); + statusElement.textContent = 'Searching for artists...'; + break; + case 'error': + statusElement.classList.add('error'); + statusElement.innerHTML = ` +
${message || 'Search failed. Please try again.'}
+ + `; + break; + } +} + +/** + * Retry the last search query + */ +function retryLastSearch() { + const searchInput = document.getElementById('artists-search-input'); + const headerSearchInput = document.getElementById('artists-header-search-input'); + + // Get the last search query from either input + const query = searchInput?.value?.trim() || headerSearchInput?.value?.trim() || artistsPageState.searchQuery; + + if (query) { + console.log(`🔄 Retrying search for: "${query}"`); + performArtistsSearch(query); + } +} + +/** + * Update artist detail header with artist info + */ +function updateArtistDetailHeader(artist) { + const imageElement = document.getElementById('artist-detail-image'); + const nameElement = document.getElementById('artist-detail-name'); + const genresElement = document.getElementById('artist-detail-genres'); + + if (imageElement && artist.image_url) { + imageElement.style.backgroundImage = `url('${artist.image_url}')`; + } + + if (nameElement) { + nameElement.textContent = artist.name; + } + + if (genresElement) { + const genres = artist.genres?.slice(0, 4).join(' • ') || 'Various genres'; + genresElement.textContent = genres; + } +} + +/** + * Show loading state for discography + */ +function showDiscographyLoading() { + const albumsContainer = document.getElementById('album-cards-container'); + const singlesContainer = document.getElementById('singles-cards-container'); + + const loadingHtml = ` +
+
+
+
Loading...
+
-
+
-
+
+
+ `.repeat(4); + + if (albumsContainer) albumsContainer.innerHTML = loadingHtml; + if (singlesContainer) singlesContainer.innerHTML = loadingHtml; +} + +/** + * Show error state for discography + */ +function showDiscographyError(message = 'Failed to load discography') { + const albumsContainer = document.getElementById('album-cards-container'); + const singlesContainer = document.getElementById('singles-cards-container'); + + const errorHtml = ` +
+
⚠️
+
Failed to load discography
+
${escapeHtml(message)}
+
+ `; + + if (albumsContainer) albumsContainer.innerHTML = errorHtml; + if (singlesContainer) singlesContainer.innerHTML = errorHtml; +} + +/** + * Show loading cards while searching + */ +function showSearchLoadingCards() { + const container = document.getElementById('artists-cards-container'); + if (!container) return; + + const loadingCardHtml = ` +
+
+
+
+
Loading...
+
Fetching data...
+
+ ⏳ + Loading... +
+
+
+ `; + + // Show 6 loading cards + container.innerHTML = loadingCardHtml.repeat(6); +} + +/** + * Utility function to escape HTML + */ +function escapeHtml(text) { + const div = document.createElement('div'); + div.textContent = text; + return div.innerHTML; +} + // --- Global Cleanup on Page Unload --- // Note: Automatic wishlist processing now runs server-side and continues even when browser is closed \ No newline at end of file diff --git a/webui/static/style.css b/webui/static/style.css index 7c30b063..978e9eb4 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -5628,4 +5628,758 @@ body { 0 8px 32px rgba(40, 167, 69, 0.15), 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +/* ============================================================================ */ +/* ARTISTS PAGE STYLES - ELEGANT GLASSMORPHIC DESIGN */ +/* ============================================================================ */ + +/* Artists Search State - Initial centered interface */ +.artists-search-state { + display: flex; + align-items: center; + justify-content: center; + min-height: 70vh; + padding: 40px 20px; + opacity: 1; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); +} + +.artists-search-state.fade-out { + opacity: 0; + transform: translateY(-20px); +} + +.artists-search-container { + max-width: 600px; + width: 100%; + text-align: center; +} + +.artists-welcome-section { + margin-bottom: 40px; +} + +.artists-welcome-title { + font-size: 36px; + font-weight: 700; + color: #ffffff; + margin-bottom: 12px; + font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.artists-welcome-subtitle { + font-size: 16px; + color: rgba(255, 255, 255, 0.7); + font-weight: 400; + line-height: 1.5; + font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.artists-search-input-container { + position: relative; + margin-bottom: 20px; +} + +.artists-search-input { + width: 100%; + padding: 18px 24px 18px 60px; + font-size: 16px; + font-weight: 500; + color: #ffffff; + font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif; + + /* Premium glassmorphic foundation */ + background: linear-gradient(135deg, + rgba(26, 26, 26, 0.9) 0%, + rgba(18, 18, 18, 0.95) 100%); + backdrop-filter: blur(12px) saturate(1.1); + border-radius: 24px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-top: 1px solid rgba(255, 255, 255, 0.15); + + /* Elegant shadow system */ + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.4), + 0 0 0 1px rgba(29, 185, 84, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.08), + inset 0 -1px 0 rgba(0, 0, 0, 0.1); + + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + outline: none; +} + +.artists-search-input:focus { + background: linear-gradient(135deg, + rgba(30, 30, 30, 0.95) 0%, + rgba(22, 22, 22, 1.0) 100%); + border-color: rgba(29, 185, 84, 0.3); + border-top-color: rgba(29, 185, 84, 0.4); + + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.5), + 0 0 0 1px rgba(29, 185, 84, 0.15), + 0 0 20px rgba(29, 185, 84, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.12), + inset 0 -1px 0 rgba(0, 0, 0, 0.15); + + transform: translateY(-1px); +} + +.artists-search-input::placeholder { + color: rgba(255, 255, 255, 0.5); + font-weight: 400; +} + +.artists-search-icon { + position: absolute; + left: 22px; + top: 50%; + transform: translateY(-50%); + font-size: 18px; + color: rgba(255, 255, 255, 0.6); + pointer-events: none; + transition: color 0.3s ease; +} + +.artists-search-input:focus + .artists-search-icon { + color: rgba(29, 185, 84, 0.8); +} + +.artists-search-status { + font-size: 14px; + color: rgba(255, 255, 255, 0.6); + font-weight: 400; + min-height: 20px; + font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif; + transition: all 0.3s ease; +} + +.artists-search-status.searching { + color: rgba(29, 185, 84, 0.8); +} + +.artists-search-status.error { + color: rgba(255, 65, 54, 0.8); +} + +/* Artists Results State */ +.artists-results-state { + opacity: 0; + transform: translateY(20px); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + padding: 20px; +} + +.artists-results-state.show { + opacity: 1; + transform: translateY(0); +} + +.artists-results-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 30px; + gap: 20px; +} + +.artists-back-button { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 20px; + font-size: 14px; + font-weight: 600; + color: rgba(255, 255, 255, 0.8); + + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 16px; + cursor: pointer; + transition: all 0.2s ease; + outline: none; + font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.artists-back-button:hover { + background: rgba(255, 255, 255, 0.12); + color: #ffffff; + transform: translateY(-1px); +} + +.back-icon { + font-size: 16px; +} + +.artists-search-header { + flex: 1; + max-width: 400px; +} + +.artists-header-search-input { + width: 100%; + padding: 12px 20px; + font-size: 14px; + font-weight: 500; + color: #ffffff; + font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif; + + background: rgba(255, 255, 255, 0.08); + backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 16px; + + transition: all 0.2s ease; + outline: none; +} + +.artists-header-search-input:focus { + background: rgba(255, 255, 255, 0.12); + border-color: rgba(29, 185, 84, 0.3); + box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.1); +} + +.artists-header-search-input::placeholder { + color: rgba(255, 255, 255, 0.5); +} + +.artists-results-content { + margin-bottom: 40px; +} + +.artists-results-title { + font-size: 20px; + font-weight: 600; + color: #ffffff; + margin-bottom: 20px; + font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.artists-cards-container { + display: flex; + gap: 20px; + overflow-x: auto; + overflow-y: visible; + padding: 20px; + scroll-behavior: smooth; + + /* Custom scrollbar styling */ + scrollbar-width: thin; + scrollbar-color: rgba(29, 185, 84, 0.6) rgba(255, 255, 255, 0.1); +} + +.artists-cards-container::-webkit-scrollbar { + height: 8px; +} + +.artists-cards-container::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.1); + border-radius: 4px; +} + +.artists-cards-container::-webkit-scrollbar-thumb { + background: rgba(29, 185, 84, 0.6); + border-radius: 4px; + transition: background 0.3s ease; +} + +.artists-cards-container::-webkit-scrollbar-thumb:hover { + background: rgba(29, 185, 84, 0.8); +} + +/* Artist Card Styles with Background Images */ +.artist-card { + position: relative; + width: 280px; + height: 350px; + flex-shrink: 0; + border-radius: 20px; + overflow: hidden; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + + /* Premium glassmorphic foundation */ + background: linear-gradient(135deg, + rgba(26, 26, 26, 0.95) 0%, + rgba(18, 18, 18, 0.98) 100%); + border: 1px solid rgba(255, 255, 255, 0.08); + border-top: 1px solid rgba(255, 255, 255, 0.12); + + /* Elegant shadow system */ + box-shadow: + 0 10px 30px rgba(0, 0, 0, 0.5), + 0 0 0 1px rgba(29, 185, 84, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.06); +} + +.artist-card:hover { + transform: translateY(-8px) scale(1.02); + z-index: 10; + + box-shadow: + 0 20px 50px rgba(0, 0, 0, 0.6), + 0 0 0 1px rgba(29, 185, 84, 0.15), + 0 0 30px rgba(29, 185, 84, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.artist-card-background { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + opacity: 0.6; + transition: all 0.3s ease; +} + +.artist-card:hover .artist-card-background { + opacity: 0.8; + transform: scale(1.05); +} + +.artist-card-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient( + 0deg, + rgba(0, 0, 0, 0.9) 0%, + rgba(0, 0, 0, 0.3) 40%, + rgba(0, 0, 0, 0.1) 70%, + transparent 100% + ); +} + +.artist-card-content { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 30px 24px; + z-index: 2; +} + +.artist-card-name { + font-size: 24px; + font-weight: 700; + color: #ffffff; + margin-bottom: 8px; + line-height: 1.2; + font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.artist-card-genres { + font-size: 14px; + color: rgba(255, 255, 255, 0.8); + font-weight: 500; + margin-bottom: 12px; + line-height: 1.3; + font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.artist-card-popularity { + display: flex; + align-items: center; + gap: 6px; + font-size: 13px; + color: rgba(29, 185, 84, 0.9); + font-weight: 600; + font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.popularity-icon { + font-size: 12px; +} + +/* Artist Card Animation States */ +.artist-card.loading { + animation: artistCardPulse 2s ease-in-out infinite; + pointer-events: none; +} + +.artist-card.loading .artist-card-background { + background: linear-gradient( + 90deg, + rgba(26, 26, 26, 0.8) 0%, + rgba(40, 40, 40, 0.8) 50%, + rgba(26, 26, 26, 0.8) 100% + ) !important; + background-size: 200% 100%; + animation: artistCardShimmer 1.5s ease-in-out infinite; +} + +@keyframes artistCardPulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.7; + } +} + +@keyframes artistCardShimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} + +/* Search loading indicator */ +.artists-search-status.searching::after { + content: ''; + display: inline-block; + width: 12px; + height: 12px; + margin-left: 8px; + border: 2px solid rgba(29, 185, 84, 0.3); + border-radius: 50%; + border-top-color: rgba(29, 185, 84, 0.8); + animation: searchSpinner 0.8s ease-in-out infinite; +} + +@keyframes searchSpinner { + to { + transform: rotate(360deg); + } +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .artists-cards-container { + gap: 16px; + padding: 15px 0 25px 0; + } + + .artist-card { + width: 250px; + height: 300px; + } + + .artist-card-name { + font-size: 20px; + } +} + +/* Artist Detail State */ +.artist-detail-state { + opacity: 0; + transform: translateY(20px); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + padding: 20px; +} + +.artist-detail-state.show { + opacity: 1; + transform: translateY(0); +} + +.artist-detail-header { + display: flex; + align-items: center; + gap: 30px; + margin-bottom: 40px; + padding-bottom: 30px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.artist-detail-back-button { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 20px; + font-size: 14px; + font-weight: 600; + color: rgba(255, 255, 255, 0.8); + + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 16px; + cursor: pointer; + transition: all 0.2s ease; + outline: none; + font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.artist-detail-back-button:hover { + background: rgba(255, 255, 255, 0.12); + color: #ffffff; + transform: translateY(-1px); +} + +.artist-detail-info { + display: flex; + align-items: center; + gap: 24px; + flex: 1; +} + +.artist-detail-image { + width: 80px; + height: 80px; + border-radius: 40px; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + border: 3px solid rgba(29, 185, 84, 0.3); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); + + /* Fallback gradient if no image */ + background-image: linear-gradient(135deg, + rgba(29, 185, 84, 0.3) 0%, + rgba(24, 156, 71, 0.2) 100%); +} + +.artist-detail-name { + font-size: 32px; + font-weight: 700; + color: #ffffff; + margin-bottom: 8px; + line-height: 1.2; + font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.artist-detail-genres { + font-size: 16px; + color: rgba(255, 255, 255, 0.7); + font-weight: 500; + font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.artist-detail-content { + margin-bottom: 40px; +} + +.artist-detail-tabs { + display: flex; + gap: 8px; + margin-bottom: 30px; + padding: 6px; + + background: rgba(255, 255, 255, 0.06); + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.artist-tab { + display: flex; + align-items: center; + gap: 10px; + padding: 14px 24px; + font-size: 14px; + font-weight: 600; + font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif; + + background: transparent; + color: rgba(255, 255, 255, 0.6); + border: none; + border-radius: 16px; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + outline: none; +} + +.artist-tab.active { + background: linear-gradient(135deg, + rgba(29, 185, 84, 0.2) 0%, + rgba(24, 156, 71, 0.15) 100%); + color: rgba(29, 185, 84, 1.0); + box-shadow: + 0 4px 12px rgba(29, 185, 84, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.artist-tab:not(.active):hover { + background: rgba(255, 255, 255, 0.08); + color: rgba(255, 255, 255, 0.8); + transform: translateY(-1px); +} + +.tab-icon { + font-size: 16px; +} + +.artist-detail-discography { + min-height: 400px; +} + +.tab-content { + display: none; + opacity: 0; + transform: translateY(10px); + transition: all 0.3s ease; +} + +.tab-content.active { + display: block; + opacity: 1; + transform: translateY(0); +} + +.album-cards-container, +.singles-cards-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 24px; +} + +/* Album Card Styles */ +.album-card { + position: relative; + background: linear-gradient(135deg, + rgba(26, 26, 26, 0.95) 0%, + rgba(18, 18, 18, 0.98) 100%); + border-radius: 16px; + border: 1px solid rgba(255, 255, 255, 0.08); + overflow: hidden; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + + box-shadow: + 0 8px 24px rgba(0, 0, 0, 0.4), + 0 0 0 1px rgba(29, 185, 84, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.06); +} + +.album-card:hover { + transform: translateY(-6px) scale(1.03); + + box-shadow: + 0 16px 40px rgba(0, 0, 0, 0.5), + 0 0 0 1px rgba(29, 185, 84, 0.15), + 0 0 20px rgba(29, 185, 84, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.album-card-image { + width: 100%; + aspect-ratio: 1; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + position: relative; + + /* Fallback gradient if no image */ + background-image: linear-gradient(135deg, + rgba(29, 185, 84, 0.2) 0%, + rgba(24, 156, 71, 0.1) 100%); +} + +.album-card-image::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient( + 180deg, + transparent 0%, + transparent 60%, + rgba(0, 0, 0, 0.3) 100% + ); + opacity: 0; + transition: opacity 0.3s ease; +} + +.album-card:hover .album-card-image::after { + opacity: 1; +} + +.album-card-content { + padding: 20px; +} + +.album-card-name { + font-size: 16px; + font-weight: 700; + color: #ffffff; + margin-bottom: 6px; + line-height: 1.3; + font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; + + /* Text overflow handling */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.album-card-year { + font-size: 13px; + color: rgba(255, 255, 255, 0.6); + font-weight: 500; + margin-bottom: 8px; + font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.album-card-type { + display: inline-block; + padding: 4px 10px; + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + + background: rgba(29, 185, 84, 0.15); + color: rgba(29, 185, 84, 0.9); + border-radius: 8px; + border: 1px solid rgba(29, 185, 84, 0.2); + font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif; +} + +/* Loading states for album cards */ +.album-card.loading .album-card-image { + background: linear-gradient( + 90deg, + rgba(26, 26, 26, 0.8) 0%, + rgba(40, 40, 40, 0.8) 50%, + rgba(26, 26, 26, 0.8) 100% + ); + background-size: 200% 100%; + animation: albumCardShimmer 1.5s ease-in-out infinite; +} + +@keyframes albumCardShimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} + +/* Responsive adjustments for detail view */ +@media (max-width: 768px) { + .artist-detail-header { + flex-direction: column; + align-items: flex-start; + gap: 20px; + } + + .artist-detail-info { + width: 100%; + } + + .artist-detail-name { + font-size: 24px; + } + + .album-cards-container, + .singles-cards-container { + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + gap: 16px; + } + + .artist-detail-tabs { + overflow-x: auto; + padding-bottom: 5px; + } } \ No newline at end of file