AudiOhm/frontend/ARTIST_DETAILS_IMPLEMENTATION.md

Artist Details Page - Implementation Guide

Overview

Complete Artist Details Page for Spotify Le 2 with neon cyberpunk theme, featuring adaptive layouts for mobile and desktop.

Files Created

1. Provider

• frontend/lib/presentation/providers/artist_provider.dart
  • ArtistState - Contains artist data, tracks, albums, and loading states
  • ArtistNotifier - Manages artist data fetching and state
  • artistProvider - Riverpod StateNotifierProvider
  • artistDataProvider - Family provider for specific artist IDs

2. API Endpoints Added

• frontend/lib/core/constants/api_constants.dart

  • Added /music/artists and /music/albums endpoints

• frontend/lib/infrastructure/datasources/remote/music_api_service.dart

  • getArtist(String artistId) - Fetch artist details
  • getArtistTopTracks(String artistId) - Fetch artist's top tracks
  • getArtistAlbums(String artistId) - Fetch artist's albums
  • getAlbum(String albumId) - Fetch album details
  • getAlbumTracks(String albumId) - Fetch album tracks

3. Widgets

• frontend/lib/presentation/widgets/artist/artist_track_tile.dart

  • Displays track with number, title, duration, and play count
  • Animated playing indicator for currently playing track
  • Add to queue button
  • Neon glow effect for active track

• frontend/lib/presentation/widgets/artist/artist_album_card.dart

  • Displays album art, title, release year, and track count
  • Gradient border with violet accent
  • Horizontal scrollable layout

4. Pages

• frontend/lib/presentation/pages/artist/artist_details_page.dart

  • Adaptive entry point (mobile/desktop)

• frontend/lib/presentation/pages/artist/artist_mobile_page.dart

  • Vertical scrolling layout
  • Hero image with gradient overlay
  • Play All button
  • Popular tracks section
  • Horizontal scrolling albums
  • Related tracks section

• frontend/lib/presentation/pages/artist/artist_desktop_page.dart

  • Two-column layout
  • Larger hero image (220x220)
  • Play All button
  • Popular tracks in left column
  • Albums and related tracks in right column

Features

Visual Design

• Neon Cyberpunk Theme: Cyan, violet, and rose accent colors
• Hero Header: Large artist image with gradient overlay
• Glow Effects: Neon glow on active/hovered elements
• Smooth Animations: Playing indicator, hover states
• Genre Tags: Styled badges for artist genres

Functionality

• Load All Data: Fetches artist, tracks, albums, and recommendations in parallel
• Play All: Plays all tracks from the artist
• Play Track: Plays specific track and sets queue
• Add to Queue: Add individual tracks to queue
• Error Handling: Loading states, error messages, retry functionality
• Responsive Layout: Adapts between mobile (<800px) and desktop (>=800px)

Performance

• Parallel Loading: All artist data fetched simultaneously
• State Management: Efficient Riverpod state handling
• Lazy Loading: Related tracks loaded on demand
• Cached Images: Uses cached_network_image for album art

Usage Example

Navigation

// Navigate to artist details
Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => ArtistDetailsPage(
      artistId: 'artist-id-here',
    ),
  ),
);

Provider Access

// Watch artist state
final artistState = ref.watch(artistProvider);

// Access artist data
final artist = artistState.artist;
final topTracks = artistState.topTracks;
final albums = artistState.albums;

// Load artist data
ref.read(artistProvider.notifier).loadAllArtistData('artist-id');

// Load specific data
ref.read(artistProvider.notifier).loadArtist('artist-id');
ref.read(artistProvider.notifier).loadTopTracks('artist-id');
ref.read(artistProvider.notifier).loadAlbums('artist-id');

Integration with Search

Update search_desktop_page.dart or search_mobile_page.dart:

void _showArtistDetails(Artist artist) {
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => ArtistDetailsPage(
        artistId: artist.id,
      ),
    ),
  );
}

API Requirements

The backend API should support these endpoints:

GET /api/v1/music/artists/{id}
Response: {
  "id": "string",
  "name": "string",
  "image_url": "string?",
  "bio": "string?",
  "genres": ["string"],
  "popularity": int,
  ...
}

GET /api/v1/music/artists/{id}/tracks?limit=10
Response: [
  {
    "id": "string",
    "title": "string",
    "duration": int?,
    "image_url": "string?",
    "play_count": int?,
    ...
  }
]

GET /api/v1/music/artists/{id}/albums?limit=20
Response: [
  {
    "id": "string",
    "title": "string",
    "release_date": "string?",
    "image_url": "string?",
    "total_tracks": int,
    ...
  }
]

Theme Integration

The page uses these theme colors from AppColors:

• AppColors.primary - Main background (#0A0E27)
• AppColors.surface - Card background (#1A1F3A)
• AppColors.cyan - Primary accent (#00F0FF)
• AppColors.violet - Secondary accent (#BF00FF)
• AppColors.rose - Tertiary accent (#FF006E)
• AppColors.onBackground - Primary text (#E0E6FF)
• AppColors.onSurface - Secondary text (#B0B8D4)
• AppColors.muted - Muted text (#6A7294)

Dependencies

Ensure these packages are in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.3.6
  cached_network_image: ^3.2.3
  equatable: ^2.0.5
  dio: ^5.3.2

Future Enhancements

• Biography section with expandable text
• Artist followers count
• Similar artists section
• Concert/tour dates
• Social media links
• Playlists featuring this artist
• Share functionality
• Follow/unfollow artist
• Track duration sorting
• Album filtering by type (single, EP, album)