diff --git a/web_server.py b/web_server.py index bc0f27cb..be9d7101 100644 --- a/web_server.py +++ b/web_server.py @@ -2687,6 +2687,96 @@ def get_library_artists(): } }), 500 +@app.route('/api/test-artist/') +def test_artist_endpoint(artist_id): + """Simple test endpoint""" + return jsonify({ + "success": True, + "message": f"Test endpoint working for artist ID: {artist_id}" + }) + +@app.route('/api/artist-detail/') +def get_artist_detail(artist_id): + """Get artist detail data""" + try: + print(f"🎵 Getting artist detail for ID: {artist_id}") + + # Get database instance + database = get_database() + + # Get artist discography from database + db_result = database.get_artist_discography(artist_id) + + if not db_result.get('success'): + print(f"❌ Database returned error: {db_result}") + return jsonify({ + "success": False, + "error": db_result.get('error', 'Artist not found') + }), 404 + + artist_info = db_result['artist'] + owned_releases = db_result['owned_releases'] + + print(f"✅ Found artist: {artist_info['name']} with {len(owned_releases['albums'])} albums") + + # Fix artist image URL + print(f"🖼️ Artist image before fix: '{artist_info.get('image_url')}'") + if artist_info.get('image_url'): + artist_info['image_url'] = fix_artist_image_url(artist_info['image_url']) + print(f"🖼️ Artist image after fix: '{artist_info['image_url']}'") + else: + print(f"🖼️ No artist image URL found for {artist_info['name']}") + + # Debug final artist data being sent + print(f"🖼️ Final artist data being sent: {artist_info}") + + # Fix image URLs for all albums + for album in owned_releases['albums']: + if album.get('image_url'): + album['image_url'] = fix_artist_image_url(album['image_url']) + + # Fix image URLs for EPs and singles (currently empty but for future use) + for ep in owned_releases['eps']: + if ep.get('image_url'): + ep['image_url'] = fix_artist_image_url(ep['image_url']) + + for single in owned_releases['singles']: + if single.get('image_url'): + single['image_url'] = fix_artist_image_url(single['image_url']) + + # Get Spotify discography for proper categorization and missing releases + try: + spotify_discography = get_spotify_artist_discography(artist_info['name']) + + if spotify_discography['success']: + print(f"🎵 Spotify discography found - Albums: {len(spotify_discography['albums'])}, EPs: {len(spotify_discography['eps'])}, Singles: {len(spotify_discography['singles'])}") + + # Merge owned and Spotify data for complete picture + merged_discography = merge_discography_data(owned_releases, spotify_discography) + else: + print(f"⚠️ Spotify discography not found: {spotify_discography.get('error', 'Unknown error')}") + # Fall back to our database categorization + merged_discography = owned_releases + except Exception as spotify_error: + print(f"⚠️ Error fetching Spotify data: {spotify_error}") + # Fall back to our database categorization + merged_discography = owned_releases + + return jsonify({ + "success": True, + "artist": artist_info, + "discography": merged_discography + }) + + except Exception as e: + print(f"❌ Error in get_artist_detail: {e}") + import traceback + traceback.print_exc() + return jsonify({ + "success": False, + "error": str(e) + }), 500 + @app.route('/api/library/debug-photos') def debug_library_photos(): """Debug endpoint to check artist photo URLs""" @@ -12210,6 +12300,217 @@ def start_oauth_callback_servers(): print("✅ OAuth callback servers started") +# =============================================== +# Artist Detail Spotify Integration Functions +# =============================================== + +def get_spotify_artist_discography(artist_name): + """Get complete artist discography from Spotify""" + try: + from core.spotify_client import SpotifyClient + + print(f"🎵 Searching Spotify for artist: {artist_name}") + + # Initialize Spotify client + spotify_client = SpotifyClient() + + # Search for the artist + artists = spotify_client.search_artists(artist_name, limit=1) + + if not artists: + return { + 'success': False, + 'error': f'Artist "{artist_name}" not found on Spotify' + } + + artist = artists[0] + spotify_artist_id = artist.id + + print(f"🎵 Found Spotify artist: {artist.name} (ID: {spotify_artist_id})") + + # Get all albums (albums, singles, and compilations) + all_albums = spotify_client.get_artist_albums(spotify_artist_id, album_type='album,single,compilation', limit=50) + + if not all_albums: + return { + 'success': False, + 'error': f'No albums found for artist "{artist_name}"' + } + + print(f"📀 Found {len(all_albums)} releases on Spotify") + + # Categorize releases + albums = [] + eps = [] + singles = [] + + for album in all_albums: + # Use the Album object properties + track_count = album.total_tracks + + release_data = { + 'title': album.name, + 'year': album.release_date[:4] if album.release_date else None, + 'image_url': album.image_url, + 'spotify_id': album.id, + 'owned': False, # Will be updated when merging with owned data + 'track_count': track_count, + 'album_type': album.album_type.lower() + } + + # Categorize based on album type and track count + album_type = album.album_type.lower() + + if album_type == 'single' or track_count <= 3: + singles.append(release_data) + elif album_type == 'compilation' or (track_count <= 8 and track_count > 3): + eps.append(release_data) + else: + albums.append(release_data) + + print(f"📀 Categorized Spotify releases - Albums: {len(albums)}, EPs: {len(eps)}, Singles: {len(singles)}") + + return { + 'success': True, + 'albums': albums, + 'eps': eps, + 'singles': singles, + 'artist_image': artist.image_url if hasattr(artist, 'image_url') else None + } + + except Exception as e: + print(f"❌ Error getting Spotify discography for {artist_name}: {e}") + return { + 'success': False, + 'error': str(e) + } + +def merge_discography_data(owned_releases, spotify_discography): + """Build discography using Spotify as source of truth, checking if we own each release""" + try: + print("🔄 Building discography using Spotify categorization...") + + def normalize_title(title): + """Normalize title for comparison""" + import re + normalized = title.lower().strip() + normalized = re.sub(r'[^\w\s]', '', normalized) + normalized = re.sub(r'\s+', ' ', normalized) + return normalized.strip() + + def normalize_year(year): + """Normalize year to integer for comparison""" + if year is None: + return None + try: + return int(year) + except (ValueError, TypeError): + return None + + # Create a flat map of ALL owned releases (regardless of category) + all_owned = [] + all_owned.extend(owned_releases['albums']) + all_owned.extend(owned_releases['eps']) + all_owned.extend(owned_releases['singles']) + + owned_map = {} + for owned in all_owned: + key = (normalize_title(owned['title']), normalize_year(owned.get('year'))) + if key not in owned_map: + owned_map[key] = [] + owned_map[key].append(owned) + + print(f"📀 Created lookup map for {len(all_owned)} owned releases") + + def build_category(spotify_category, category_name): + """Build cards for a category using Spotify as source of truth""" + cards = [] + print(f"📀 Building {category_name} category with {len(spotify_category)} Spotify releases") + + for spotify_release in spotify_category: + spotify_key = (normalize_title(spotify_release['title']), normalize_year(spotify_release.get('year'))) + + # Debug logging for Bad Hair Day specifically + if 'bad hair day' in spotify_release['title'].lower(): + print(f"🔍 DEBUG: Spotify 'Bad Hair Day' - Title: '{spotify_release['title']}', Year: {spotify_release.get('year')}") + print(f"🔍 DEBUG: Normalized key: {spotify_key}") + print(f"🔍 DEBUG: Available owned keys: {list(owned_map.keys())}") + + # Check if we own this release (exact match first) + owned_release = None + matched_key = None + + if spotify_key in owned_map and owned_map[spotify_key]: + owned_release = owned_map[spotify_key].pop(0).copy() + matched_key = spotify_key + else: + # Fallback: try matching by title only (ignore year) + title_only = normalize_title(spotify_release['title']) + for key, releases in owned_map.items(): + if key[0] == title_only and releases: # key[0] is the normalized title + owned_release = releases.pop(0).copy() + matched_key = key + print(f"🔄 Year mismatch fallback: '{spotify_release['title']}' matched by title only") + break + + if owned_release: + # We own it - use owned data with Spotify enhancements + + # Add Spotify metadata + owned_release['spotify_id'] = spotify_release['spotify_id'] + owned_release['owned'] = True + + # Image priority: owned first, then Spotify fallback + if not owned_release.get('image_url') and spotify_release.get('image_url'): + owned_release['image_url'] = spotify_release['image_url'] + + cards.append(owned_release) + print(f"✅ {category_name}: '{spotify_release['title']}' - OWNED") + + # Remove empty lists from map (use the key that actually matched) + if matched_key and not owned_map[matched_key]: + del owned_map[matched_key] + else: + # We don't own it - create missing card + missing_release = spotify_release.copy() + missing_release['owned'] = False + missing_release['track_completion'] = 0 + cards.append(missing_release) + print(f"❌ {category_name}: '{spotify_release['title']}' - MISSING") + + return cards + + # Build each category using Spotify as the source of truth + albums = build_category(spotify_discography['albums'], 'Albums') + eps = build_category(spotify_discography['eps'], 'EPs') + singles = build_category(spotify_discography['singles'], 'Singles') + + # Report any owned releases that didn't match Spotify (rare) + remaining_owned = sum(len(owned_list) for owned_list in owned_map.values()) + if remaining_owned > 0: + print(f"📀 Note: {remaining_owned} owned releases not found on Spotify (compilations, bootlegs, etc.)") + + print(f"✅ Built discography - Albums: {len(albums)}, EPs: {len(eps)}, Singles: {len(singles)}") + + return { + 'success': True, + 'albums': albums, + 'eps': eps, + 'singles': singles + } + + except Exception as e: + print(f"❌ Error building discography: {e}") + import traceback + traceback.print_exc() + return { + 'success': False, + 'error': str(e), + 'albums': [], + 'eps': [], + 'singles': [] + } + if __name__ == '__main__': # Initialize logging for web server from utils.logging_config import setup_logging diff --git a/webui/index.html b/webui/index.html index 932c5570..f7530def 100644 --- a/webui/index.html +++ b/webui/index.html @@ -588,10 +588,10 @@
-
+
-

Artist Name

-

Genres

+

Artist Name

+

Genres

@@ -729,6 +729,135 @@ + +
+
+ +
+ + +
+
+
+ Artist Image +
🎵
+
+ +
+

Artist Name

+ +
+
+
+ Albums + 0 owned, 0 missing +
+
+
+
+
+ 0% +
+
+ +
+
+ EPs + 0 owned, 0 missing +
+
+
+
+
+ 0% +
+
+ +
+
+ Singles + 0 owned, 0 missing +
+
+
+
+
+ 0% +
+
+
+
+
+
+ +
+ + + + + + + +
+ + +
+ +
+
+

Albums

+
+ 0 owned + 0 missing +
+
+
+ +
+
+ + +
+
+

EPs

+
+ 0 owned + 0 missing +
+
+
+ +
+
+ + +
+
+

Singles

+
+ 0 owned + 0 missing +
+
+
+ +
+
+
+
+
+
+
diff --git a/webui/static/script.js b/webui/static/script.js index 70aeb0ed..8489e0d6 100644 --- a/webui/static/script.js +++ b/webui/static/script.js @@ -346,11 +346,14 @@ function initializeWatchlist() { function navigateToPage(pageId) { if (pageId === currentPage) return; - // Update navigation buttons + // Update navigation buttons (only if there's a nav button for this page) document.querySelectorAll('.nav-button').forEach(btn => { btn.classList.remove('active'); }); - document.querySelector(`[data-page="${pageId}"]`).classList.add('active'); + const navButton = document.querySelector(`[data-page="${pageId}"]`); + if (navButton) { + navButton.classList.add('active'); + } // Update pages document.querySelectorAll('.page').forEach(page => { @@ -405,6 +408,9 @@ async function loadPageData(pageId) { await loadLibraryArtists(); } break; + case 'artist-detail': + // Artist detail page is handled separately by navigateToArtistDetail() + break; case 'settings': initializeSettings(); await loadSettingsData(); @@ -13824,11 +13830,10 @@ function createLibraryArtistCard(artist) { card.appendChild(imageContainer); card.appendChild(info); - // Add click handler (for future functionality) + // Add click handler to navigate to artist detail page card.addEventListener("click", () => { - // TODO: Implement artist detail view - console.log(`Clicked on artist: ${artist.name}`); - showToast(`Artist details coming soon!`, "info"); + console.log(`🎵 Opening artist detail for: ${artist.name} (ID: ${artist.id})`); + navigateToArtistDetail(artist.id, artist.name); }); return card; @@ -13892,3 +13897,475 @@ function showLibraryEmpty(show) { } } } + +// =============================================== +// Artist Detail Page Functions +// =============================================== + +// Artist detail page state +let artistDetailPageState = { + isInitialized: false, + currentArtistId: null, + currentArtistName: null +}; + +function navigateToArtistDetail(artistId, artistName) { + console.log(`🎵 Navigating to artist detail: ${artistName} (ID: ${artistId})`); + + // Store current artist info + artistDetailPageState.currentArtistId = artistId; + artistDetailPageState.currentArtistName = artistName; + + // Navigate to artist detail page + navigateToPage('artist-detail'); + + // Initialize if needed and load data + if (!artistDetailPageState.isInitialized) { + initializeArtistDetailPage(); + } + + // Load artist data + loadArtistDetailData(artistId, artistName); +} + +function initializeArtistDetailPage() { + console.log("🔧 Initializing Artist Detail page..."); + + // Initialize back button + const backBtn = document.getElementById("artist-detail-back-btn"); + if (backBtn) { + backBtn.addEventListener("click", () => { + console.log("🔙 Returning to Library page"); + navigateToPage('library'); + }); + } + + // Initialize retry button + const retryBtn = document.getElementById("artist-detail-retry-btn"); + if (retryBtn) { + retryBtn.addEventListener("click", () => { + if (artistDetailPageState.currentArtistId && artistDetailPageState.currentArtistName) { + loadArtistDetailData(artistDetailPageState.currentArtistId, artistDetailPageState.currentArtistName); + } + }); + } + + artistDetailPageState.isInitialized = true; + console.log("✅ Artist Detail page initialized successfully"); +} + +async function loadArtistDetailData(artistId, artistName) { + console.log(`🔄 Loading artist detail data for: ${artistName} (ID: ${artistId})`); + + // Show loading state + showArtistDetailLoading(true); + showArtistDetailError(false); + showArtistDetailMain(false); + + // Update header with artist name + updateArtistDetailHeader(artistName); + + try { + // Call API to get artist discography data + const response = await fetch(`/api/artist-detail/${artistId}`); + + if (!response.ok) { + throw new Error(`Failed to load artist data: ${response.statusText}`); + } + + const data = await response.json(); + + if (!data.success) { + throw new Error(data.error || 'Failed to load artist data'); + } + + console.log(`✅ Loaded artist detail data:`, data); + + // Hide loading and show main content + showArtistDetailLoading(false); + showArtistDetailMain(true); + + console.log(`🎨 Main content visibility:`, document.getElementById('artist-detail-main')); + console.log(`🎨 Albums section:`, document.getElementById('albums-section')); + + // Populate the page with data + populateArtistDetailPage(data); + + } catch (error) { + console.error(`❌ Error loading artist detail data:`, error); + + // Show error state + showArtistDetailLoading(false); + showArtistDetailError(true, error.message); + + showToast(`Failed to load artist details: ${error.message}`, "error"); + } +} + +function updateArtistDetailHeader(artistName) { + // Update header title + const headerTitle = document.getElementById("artist-detail-name"); + if (headerTitle) { + headerTitle.textContent = artistName; + } + + // Update main artist name + const mainTitle = document.getElementById("artist-info-name"); + if (mainTitle) { + mainTitle.textContent = artistName; + } +} + +function populateArtistDetailPage(data) { + const artist = data.artist; + const discography = data.discography; + + console.log(`🎨 Populating artist detail page for: ${artist.name}`); + console.log(`📀 Discography data:`, discography); + console.log(`📀 Albums:`, discography.albums); + console.log(`📀 EPs:`, discography.eps); + console.log(`📀 Singles:`, discography.singles); + + // Update hero section with image, name, and stats + updateArtistHeroSection(artist, discography); + + // Update genres (if element exists) + updateArtistGenres(artist.genres); + + // Update summary stats (if element exists) + updateArtistSummaryStats(discography); + + // Populate discography sections + populateDiscographySections(discography); +} + +function updateArtistDetailImage(imageUrl, artistName) { + const imageElement = document.getElementById("artist-detail-image"); + const fallbackElement = document.getElementById("artist-image-fallback"); + + if (imageUrl && imageUrl.trim() !== "") { + imageElement.src = imageUrl; + imageElement.alt = artistName; + imageElement.classList.remove("hidden"); + fallbackElement.classList.add("hidden"); + + imageElement.onerror = () => { + console.log(`Failed to load artist image for ${artistName}: ${imageUrl}`); + // Replace with fallback on error + imageElement.classList.add("hidden"); + fallbackElement.classList.remove("hidden"); + }; + + imageElement.onload = () => { + console.log(`Successfully loaded artist image for ${artistName}: ${imageUrl}`); + }; + } else { + console.log(`No image URL for ${artistName}: '${imageUrl}'`); + imageElement.classList.add("hidden"); + fallbackElement.classList.remove("hidden"); + } +} + +function updateArtistGenres(genres) { + const genresContainer = document.getElementById("artist-genres"); + if (!genresContainer) return; + + genresContainer.innerHTML = ""; + + if (genres && genres.length > 0) { + genres.forEach(genre => { + const genreTag = document.createElement("span"); + genreTag.className = "genre-tag"; + genreTag.textContent = genre; + genresContainer.appendChild(genreTag); + }); + } +} + +function updateArtistSummaryStats(discography) { + // Calculate stats + const ownedAlbums = discography.albums.filter(album => album.owned).length; + const missingAlbums = discography.albums.filter(album => !album.owned).length; + const totalAlbums = discography.albums.length; + const completionPercentage = totalAlbums > 0 ? Math.round((ownedAlbums / totalAlbums) * 100) : 0; + + // Update owned albums count + const ownedElement = document.getElementById("owned-albums-count"); + if (ownedElement) { + ownedElement.textContent = ownedAlbums; + } + + // Update missing albums count + const missingElement = document.getElementById("missing-albums-count"); + if (missingElement) { + missingElement.textContent = missingAlbums; + } + + // Update completion percentage + const completionElement = document.getElementById("completion-percentage"); + if (completionElement) { + completionElement.textContent = `${completionPercentage}%`; + } +} + +function updateArtistHeaderStats(albumCount, trackCount) { + // This function is deprecated - now using updateArtistHeroSection + console.log("📊 Using new hero section instead of old header stats"); +} + +function updateArtistHeroSection(artist, discography) { + console.log("🖼️ Updating artist hero section"); + + // Update artist image with detailed debugging + const imageElement = document.getElementById("artist-detail-image"); + const fallbackElement = document.getElementById("artist-detail-image-fallback"); + + console.log(`🖼️ Debug Artist image info:`); + console.log(` - URL: '${artist.image_url}'`); + console.log(` - Type: ${typeof artist.image_url}`); + console.log(` - Full artist object:`, artist); + console.log(` - Image element:`, imageElement); + console.log(` - Fallback element:`, fallbackElement); + + if (artist.image_url && artist.image_url.trim() !== "" && artist.image_url !== "null") { + console.log(`✅ Setting image src to: ${artist.image_url}`); + imageElement.src = artist.image_url; + imageElement.alt = artist.name; + imageElement.style.display = "block"; + if (fallbackElement) { + fallbackElement.style.display = "none"; + } + + imageElement.onload = () => { + console.log(`✅ Successfully loaded artist image: ${artist.image_url}`); + }; + + imageElement.onerror = () => { + console.error(`❌ Failed to load artist image: ${artist.image_url}`); + imageElement.style.display = "none"; + if (fallbackElement) { + fallbackElement.style.display = "flex"; + } + }; + } else { + console.log(`🖼️ No valid image URL - showing fallback for ${artist.name}`); + imageElement.style.display = "none"; + if (fallbackElement) { + fallbackElement.style.display = "flex"; + } + } + + // Update artist name + const nameElement = document.getElementById("artist-detail-name"); + if (nameElement) { + nameElement.textContent = artist.name; + } + + // Calculate and update stats for each category + updateCategoryStats('albums', discography.albums); + updateCategoryStats('eps', discography.eps); + updateCategoryStats('singles', discography.singles); +} + +function updateCategoryStats(category, releases) { + const owned = releases.filter(r => r.owned !== false).length; + const missing = releases.filter(r => r.owned === false).length; + const total = releases.length; + const completion = total > 0 ? Math.round((owned / total) * 100) : 0; + + console.log(`📊 ${category}: ${owned} owned, ${missing} missing, ${completion}% complete`); + + // Update stats text + const statsElement = document.getElementById(`${category}-stats`); + if (statsElement) { + statsElement.textContent = `${owned} owned, ${missing} missing`; + } + + // Update completion bar + const fillElement = document.getElementById(`${category}-completion-fill`); + if (fillElement) { + fillElement.style.width = `${completion}%`; + } + + // Update completion text + const textElement = document.getElementById(`${category}-completion-text`); + if (textElement) { + textElement.textContent = `${completion}%`; + } +} + +function populateDiscographySections(discography) { + // Populate albums + populateReleaseSection('albums', discography.albums); + + // Populate EPs + populateReleaseSection('eps', discography.eps); + + // Populate singles + populateReleaseSection('singles', discography.singles); +} + +function populateReleaseSection(sectionType, releases) { + const gridId = `${sectionType}-grid`; + const ownedCountId = `${sectionType}-owned-count`; + const missingCountId = `${sectionType}-missing-count`; + + const grid = document.getElementById(gridId); + if (!grid) return; + + // Clear existing content + grid.innerHTML = ""; + + // Calculate stats + const ownedCount = releases.filter(release => release.owned).length; + const missingCount = releases.filter(release => !release.owned).length; + + // Update section stats + const ownedElement = document.getElementById(ownedCountId); + const missingElement = document.getElementById(missingCountId); + + if (ownedElement) { + ownedElement.textContent = `${ownedCount} owned`; + } + + if (missingElement) { + missingElement.textContent = `${missingCount} missing`; + } + + // Create release cards + releases.forEach((release, index) => { + console.log(`📀 Creating card ${index + 1} for: ${release.title}`); + const card = createReleaseCard(release); + grid.appendChild(card); + console.log(`📀 Added card to grid:`, card); + }); + + console.log(`📀 Populated ${sectionType} section: ${ownedCount} owned, ${missingCount} missing`); + console.log(`📀 Grid element:`, grid); + console.log(`📀 Grid children count:`, grid.children.length); +} + +function createReleaseCard(release) { + const card = document.createElement("div"); + card.className = `release-card${release.owned ? "" : " missing"}`; + card.setAttribute("data-release-id", release.id || ""); + card.setAttribute("data-spotify-id", release.spotify_id || ""); + + // Create image + const imageContainer = document.createElement("div"); + if (release.image_url && release.image_url.trim() !== "") { + const img = document.createElement("img"); + img.src = release.image_url; + img.alt = release.title; + img.className = "release-image"; + img.onerror = () => { + imageContainer.innerHTML = `
💿
`; + }; + imageContainer.appendChild(img); + } else { + imageContainer.innerHTML = `
💿
`; + } + + // Create title + const title = document.createElement("h4"); + title.className = "release-title"; + title.textContent = release.title; + title.title = release.title; + + // Create year + const year = document.createElement("div"); + year.className = "release-year"; + year.textContent = release.year || "Unknown Year"; + + // Create completion info + const completion = document.createElement("div"); + completion.className = "release-completion"; + + const completionText = document.createElement("span"); + const completionBar = document.createElement("div"); + completionBar.className = "completion-bar"; + + const completionFill = document.createElement("div"); + completionFill.className = "completion-fill"; + + if (release.owned) { + const percentage = release.track_completion || 100; + completionFill.style.width = `${percentage}%`; + + if (percentage === 100) { + completionText.textContent = "Complete"; + completionText.className = "completion-text complete"; + completionFill.className += " complete"; + } else { + completionText.textContent = `${percentage}%`; + completionText.className = "completion-text partial"; + completionFill.className += " partial"; + } + } else { + completionText.textContent = "Missing"; + completionText.className = "completion-text missing"; + completionFill.className += " missing"; + completionFill.style.width = "0%"; + } + + completionBar.appendChild(completionFill); + completion.appendChild(completionText); + completion.appendChild(completionBar); + + // Assemble card + card.appendChild(imageContainer); + card.appendChild(title); + card.appendChild(year); + card.appendChild(completion); + + // Add click handler for future functionality + card.addEventListener("click", () => { + console.log(`Clicked on release: ${release.title} (Owned: ${release.owned})`); + if (release.owned) { + showToast(`Album details coming soon!`, "info"); + } else { + showToast(`Add to download queue coming soon!`, "info"); + } + }); + + return card; +} + +// UI state management functions +function showArtistDetailLoading(show) { + const loadingElement = document.getElementById("artist-detail-loading"); + if (loadingElement) { + if (show) { + loadingElement.classList.remove("hidden"); + } else { + loadingElement.classList.add("hidden"); + } + } +} + +function showArtistDetailError(show, message = "") { + const errorElement = document.getElementById("artist-detail-error"); + const errorMessageElement = document.getElementById("artist-detail-error-message"); + + if (errorElement) { + if (show) { + errorElement.classList.remove("hidden"); + if (errorMessageElement && message) { + errorMessageElement.textContent = message; + } + } else { + errorElement.classList.add("hidden"); + } + } +} + +function showArtistDetailMain(show) { + const mainElement = document.getElementById("artist-detail-main"); + if (mainElement) { + if (show) { + mainElement.classList.remove("hidden"); + } else { + mainElement.classList.add("hidden"); + } + } +} diff --git a/webui/static/style.css b/webui/static/style.css index 391a30ba..973177f0 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -8870,3 +8870,670 @@ body { font-size: 12px; } } + +/* ======================================== + Artist Detail Page Styles + ======================================== */ + +.artist-detail-header { + display: flex; + align-items: center; + gap: 20px; + width: 100%; +} + +.back-btn { + background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%); + backdrop-filter: blur(12px) saturate(1.1); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 12px 20px; + color: #ffffff; + font-family: 'SF Pro Text', -apple-system, sans-serif; + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1); + text-decoration: none; + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; +} + +.back-btn:hover { + background: linear-gradient(135deg, rgba(40, 40, 40, 0.95) 0%, rgba(30, 30, 30, 0.98) 100%); + border-color: rgba(255, 255, 255, 0.15); + transform: translateY(-1px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); +} + +.artist-detail-title { + flex-grow: 1; + min-width: 0; +} + +.artist-detail-title h2 { + font-size: 28px; + font-weight: 700; + color: #ffffff; + margin: 0 0 8px 0; + line-height: 1.2; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.artist-detail-stats { + display: flex; + gap: 16px; + flex-wrap: wrap; +} + +.artist-stat { + color: #b3b3b3; + font-size: 14px; + font-weight: 500; +} + +/* Artist Detail Content */ +.artist-detail-content { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.artist-detail-loading, +.artist-detail-error { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex: 1; + text-align: center; + padding: 40px 20px; +} + +.artist-detail-loading .loading-spinner { + width: 40px; + height: 40px; + border: 3px solid rgba(255, 255, 255, 0.1); + border-top: 3px solid #1db954; + border-radius: 50%; + animation: spin 1s linear infinite; + margin-bottom: 20px; +} + +.artist-detail-error .error-icon { + font-size: 48px; + margin-bottom: 16px; +} + +.artist-detail-error h3 { + color: #ffffff; + font-size: 20px; + margin: 0 0 8px 0; +} + +.artist-detail-error p { + color: #b3b3b3; + margin: 0 0 20px 0; +} + +.retry-btn { + background: linear-gradient(135deg, #1db954 0%, #1ed760 100%); + border: none; + border-radius: 12px; + padding: 12px 24px; + color: #ffffff; + font-family: 'SF Pro Text', -apple-system, sans-serif; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1); +} + +.retry-btn:hover { + background: linear-gradient(135deg, #1ed760 0%, #1db954 100%); + transform: translateY(-1px); + box-shadow: 0 8px 25px rgba(29, 185, 84, 0.3); +} + +/* Artist Info Section */ +.artist-info-section { + display: flex; + gap: 30px; + padding: 30px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 30px; + background: linear-gradient(135deg, rgba(26, 26, 26, 0.3) 0%, rgba(18, 18, 18, 0.5) 100%); + border-radius: 20px; + padding: 32px; + backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.artist-image-container { + position: relative; + flex-shrink: 0; +} + +.artist-detail-image { + width: 200px; + height: 200px; + border-radius: 16px; + object-fit: cover; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.artist-image-fallback { + width: 200px; + height: 200px; + border-radius: 16px; + 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.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 64px; +} + +.artist-info { + flex: 1; + min-width: 0; +} + +.artist-info h1 { + font-size: 48px; + font-weight: 800; + color: #ffffff; + margin: 0 0 12px 0; + line-height: 1.1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.artist-genres { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 24px; +} + +.genre-tag { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 20px; + padding: 6px 14px; + color: #ffffff; + font-size: 12px; + font-weight: 500; + text-transform: capitalize; +} + +.artist-summary-stats { + display: flex; + gap: 40px; + flex-wrap: wrap; +} + +.summary-stat { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.stat-number { + font-size: 32px; + font-weight: 800; + color: #1db954; + line-height: 1; + margin-bottom: 6px; +} + +.stat-label { + font-size: 14px; + color: #b3b3b3; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +/* Discography Sections */ +.discography-sections { + display: flex; + flex-direction: column; + gap: 40px; +} + +.discography-section { + opacity: 1; /* Show immediately instead of animation for now */ +} + +/* Animation keyframes for future use */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.section-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + padding-bottom: 12px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.section-header h3 { + font-size: 24px; + font-weight: 700; + color: #ffffff; + margin: 0; +} + +.section-stats { + display: flex; + gap: 16px; + color: #b3b3b3; + font-size: 14px; + font-weight: 500; +} + +.releases-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: 16px; + padding: 8px 0; +} + +/* Release Cards */ +.release-card { + background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%); + backdrop-filter: blur(12px) saturate(1.1); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + padding: 14px; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + height: 280px; /* Fixed height for consistent layout */ +} + +.release-card:hover { + background: linear-gradient(135deg, rgba(40, 40, 40, 0.95) 0%, rgba(30, 30, 30, 0.98) 100%); + border-color: rgba(255, 255, 255, 0.15); + transform: translateY(-4px); + box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4); +} + +.release-card.missing { + opacity: 0.6; + background: linear-gradient(135deg, rgba(60, 60, 60, 0.3) 0%, rgba(40, 40, 40, 0.5) 100%); + border-color: rgba(255, 255, 255, 0.05); +} + +.release-card.missing:hover { + opacity: 0.8; + background: linear-gradient(135deg, rgba(70, 70, 70, 0.4) 0%, rgba(50, 50, 50, 0.6) 100%); +} + +.release-image { + width: 100%; + aspect-ratio: 1; + border-radius: 12px; + object-fit: cover; + margin-bottom: 12px; + border: 1px solid rgba(255, 255, 255, 0.1); + flex-shrink: 0; +} + +.release-image-fallback { + width: 100%; + aspect-ratio: 1; + border-radius: 12px; + background: linear-gradient(135deg, rgba(60, 60, 60, 0.6) 0%, rgba(40, 40, 40, 0.8) 100%); + border: 1px solid rgba(255, 255, 255, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 28px; + margin-bottom: 12px; + flex-shrink: 0; + color: rgba(255, 255, 255, 0.6); +} + +.release-title { + font-size: 16px; + font-weight: 600; + color: #ffffff; + margin: 0 0 6px 0; + line-height: 1.3; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.release-year { + font-size: 14px; + color: #b3b3b3; + margin: 0 0 8px 0; +} + +.release-completion { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 11px; + margin-top: auto; + padding-top: 8px; + border-top: 1px solid rgba(255, 255, 255, 0.05); +} + +.completion-text { + color: #b3b3b3; +} + +.completion-text.complete { + color: #1db954; + font-weight: 600; +} + +.completion-text.partial { + color: #ffa500; + font-weight: 600; +} + +.completion-text.missing { + color: #ff6b6b; + font-weight: 600; +} + +.completion-bar { + width: 60px; + height: 4px; + background: rgba(255, 255, 255, 0.1); + border-radius: 2px; + overflow: hidden; +} + +.completion-fill { + height: 100%; + border-radius: 2px; + transition: width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); +} + +.completion-fill.complete { + background: linear-gradient(90deg, #1db954, #1ed760); +} + +.completion-fill.partial { + background: linear-gradient(90deg, #ffa500, #ffb347); +} + +.completion-fill.missing { + background: linear-gradient(90deg, #ff6b6b, #ff8e8e); + width: 0%; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .artist-detail-header { + flex-direction: column; + align-items: flex-start; + gap: 16px; + } + + .artist-detail-title h2 { + font-size: 24px; + white-space: normal; + } + + .artist-info-section { + flex-direction: column; + align-items: center; + text-align: center; + gap: 20px; + } + + .artist-detail-image, + .artist-image-fallback { + width: 150px; + height: 150px; + } + + .artist-info h1 { + font-size: 36px; + white-space: normal; + text-align: center; + } + + .artist-summary-stats { + justify-content: center; + gap: 30px; + } + + .section-header { + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + + .releases-grid { + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: 16px; + } + + .release-card { + padding: 12px; + } +} + +/* =============================== + ARTIST HERO SECTION (Modal-inspired design) + =============================== */ + +.artist-hero-section { + background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%); + backdrop-filter: blur(12px) saturate(1.1); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 12px; + margin: 20px 20px 20px 20px; + padding: 20px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); +} + +.artist-hero-content { + display: flex; + align-items: center; + gap: 20px; +} + +.artist-image-container { + position: relative; + flex-shrink: 0; +} + +.artist-image { + width: 100px; + height: 100px; + border-radius: 12px; + object-fit: cover; + border: 2px solid rgba(29, 185, 84, 0.3); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); + display: block; +} + +.artist-image-fallback { + width: 100px; + height: 100px; + border-radius: 12px; + background: linear-gradient(135deg, rgba(29, 185, 84, 0.2) 0%, rgba(30, 215, 96, 0.1) 100%); + border: 2px solid rgba(29, 185, 84, 0.3); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); + display: flex; + align-items: center; + justify-content: center; + font-size: 40px; + color: rgba(255, 255, 255, 0.6); + position: absolute; + top: 0; + left: 0; +} + +.artist-image:not([src=""]):not([src]) + .artist-image-fallback, +.artist-image[src]:not([src=""]) + .artist-image-fallback { + display: none; +} + +.artist-info { + flex: 1; + min-width: 0; +} + +.artist-name { + font-size: 32px; + font-weight: 700; + color: #ffffff; + margin: 0 0 16px 0; + line-height: 1.1; + font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; + letter-spacing: -0.3px; +} + +.collection-overview { + display: flex; + flex-direction: column; + gap: 12px; +} + +.collection-category { + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 8px; + padding: 12px 16px; + transition: all 0.3s ease; +} + +.collection-category:hover { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(29, 185, 84, 0.2); +} + +.category-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; +} + +.category-label { + color: #ffffff; + font-weight: 700; + font-size: 16px; + font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.category-stats { + color: #b3b3b3; + font-size: 14px; + font-weight: 500; + font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.completion-section { + display: flex; + align-items: center; + gap: 16px; +} + +.completion-bar { + flex: 1; + height: 8px; + background: rgba(255, 255, 255, 0.1); + border-radius: 4px; + overflow: hidden; + position: relative; +} + +.completion-fill { + height: 100%; + background: linear-gradient(90deg, #1db954 0%, #1ed760 100%); + transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); + border-radius: 4px; + position: relative; +} + +.completion-fill::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%); + animation: shimmer 2s infinite; +} + +@keyframes shimmer { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(100%); } +} + +.completion-text { + color: #ffffff; + font-size: 16px; + font-weight: 700; + min-width: 45px; + text-align: right; + font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif; +} + +/* Mobile responsiveness */ +@media (max-width: 768px) { + .artist-hero-section { + margin: 15px; + padding: 20px; + } + + .artist-hero-content { + flex-direction: column; + align-items: center; + text-align: center; + gap: 20px; + } + + .artist-image, + .artist-image-fallback { + width: 120px; + height: 120px; + } + + .artist-name { + font-size: 32px; + text-align: center; + } + + .category-header { + flex-direction: column; + align-items: flex-start; + gap: 4px; + margin-bottom: 8px; + } + + .completion-section { + gap: 12px; + } +}