Initial commit: AudiOhm - Alternative Spotify avec streaming YouTube
Backend: - FastAPI avec PostgreSQL et Redis - Authentification JWT complète - API REST pour musique, playlists, recherche - Streaming audio via yt-dlp - SQLAlchemy 2.0 async Frontend: - Flutter avec thème néon cyberpunk - State management Riverpod - Layout adaptatif desktop/mobile - Lecteur audio avec mini-player Infrastructure: - Docker Compose (PostgreSQL + Redis) - Scripts d'installation automatisés - Scripts de build pour exécutables Fichiers ajoutés: - BUILD_CLIENT_*.bat/sh: Scripts de compilation - BUILD_CLIENT_README.md: Documentation compilation - CHECK_FLUTTER.sh: Vérificateur d'environnement - requirements.txt mis à jour pour Python 3.13 - Modèles SQLAlchemy corrigés (metadata -> extra_metadata) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
root
@@ -0,0 +1,211 @@
|
||||
# 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
|
||||
|
||||
```dart
|
||||
// Navigate to artist details
|
||||
Navigator.of(context).push(
|
||||
MaterialPageRoute(
|
||||
builder: (context) => ArtistDetailsPage(
|
||||
artistId: 'artist-id-here',
|
||||
),
|
||||
),
|
||||
);
|
||||
```
|
||||
|
||||
### Provider Access
|
||||
|
||||
```dart
|
||||
// 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`:
|
||||
|
||||
```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`:
|
||||
|
||||
```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)
|
||||
Reference in New Issue
Block a user