feat(library): add Artist and Album browsing tabs
- Library screen now has a TabBar (Alle / Künstler / Alben) inside a
DefaultTabController; scan/permission/error banners stay above the
TabBarView so they remain visible regardless of the active sub-tab
- New lib/library/song_grouping.dart: pure, unit-tested functions
groupByArtist/groupByAlbum (null artist/album -> "Unbekannt" /
"Unbekanntes Album", alphabetically sorted) plus albumArtistLabel
("Verschiedene Interpreten" when an album mixes artists)
- New lib/library/artist_list.dart + album_list.dart: StreamBuilder on
MeloDb.watchSongs(), grouped client-side, tapping a row pushes a
SongList screen for that artist/album; album rows show a CoverImage
thumbnail from the first song's coverPath
- Existing "Alle" tab content (recently-added strip, full song list,
empty state) preserved unchanged, moved into _AllSongsTab
Genre browsing is intentionally out of scope: the Songs table has no
genre column and neither scanner extracts genre metadata — needs a
schema migration + scanner work in a future task.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Haiku 4.5
parent
4477370766
commit
58ceb42769
@@ -0,0 +1,69 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../shared/cover.dart';
|
||||
import 'database.dart';
|
||||
import 'song_grouping.dart';
|
||||
import 'song_list.dart';
|
||||
|
||||
/// Bibliotheks-Tab: Album-Übersicht, gruppiert aus [MeloDb.watchSongs].
|
||||
class AlbumListScreen extends StatelessWidget {
|
||||
const AlbumListScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final db = context.read<MeloDb>();
|
||||
return StreamBuilder<List<Song>>(
|
||||
stream: db.watchSongs(),
|
||||
builder: (context, snapshot) {
|
||||
final songs = snapshot.data ?? const [];
|
||||
if (songs.isEmpty) {
|
||||
return const Center(
|
||||
child: Text('Keine Alben', style: TextStyle(color: Colors.white54)),
|
||||
);
|
||||
}
|
||||
final grouped = groupByAlbum(songs);
|
||||
final albums = grouped.keys.toList();
|
||||
return ListView.builder(
|
||||
itemCount: albums.length,
|
||||
itemBuilder: (context, i) {
|
||||
final album = albums[i];
|
||||
final albumSongs = grouped[album]!;
|
||||
final coverPath = albumSongs.first.coverPath;
|
||||
return ListTile(
|
||||
leading: CoverImage(
|
||||
artUri: coverPath != null ? Uri.file(coverPath) : null,
|
||||
size: 48,
|
||||
radius: 6,
|
||||
),
|
||||
title: Text(album, maxLines: 1, overflow: TextOverflow.ellipsis),
|
||||
subtitle: Text('${albumArtistLabel(albumSongs)} · ${albumSongs.length} Songs',
|
||||
maxLines: 1, overflow: TextOverflow.ellipsis),
|
||||
onTap: () => Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (_) => _AlbumSongsScreen(album: album, songs: albumSongs),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Zeigt alle Songs eines Albums.
|
||||
class _AlbumSongsScreen extends StatelessWidget {
|
||||
const _AlbumSongsScreen({required this.album, required this.songs});
|
||||
final String album;
|
||||
final List<Song> songs;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: Text(album)),
|
||||
body: SongList(songs),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import 'database.dart';
|
||||
import 'song_grouping.dart';
|
||||
import 'song_list.dart';
|
||||
|
||||
/// Bibliotheks-Tab: Künstler-Übersicht, gruppiert aus [MeloDb.watchSongs].
|
||||
class ArtistListScreen extends StatelessWidget {
|
||||
const ArtistListScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final db = context.read<MeloDb>();
|
||||
return StreamBuilder<List<Song>>(
|
||||
stream: db.watchSongs(),
|
||||
builder: (context, snapshot) {
|
||||
final songs = snapshot.data ?? const [];
|
||||
if (songs.isEmpty) {
|
||||
return const Center(
|
||||
child: Text('Keine Künstler', style: TextStyle(color: Colors.white54)),
|
||||
);
|
||||
}
|
||||
final grouped = groupByArtist(songs);
|
||||
final artists = grouped.keys.toList();
|
||||
return ListView.builder(
|
||||
itemCount: artists.length,
|
||||
itemBuilder: (context, i) {
|
||||
final artist = artists[i];
|
||||
final artistSongs = grouped[artist]!;
|
||||
return ListTile(
|
||||
title: Text(artist, maxLines: 1, overflow: TextOverflow.ellipsis),
|
||||
subtitle: Text('${artistSongs.length} Songs'),
|
||||
onTap: () => Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (_) => _ArtistSongsScreen(artist: artist, songs: artistSongs),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Zeigt alle Songs eines Künstlers.
|
||||
class _ArtistSongsScreen extends StatelessWidget {
|
||||
const _ArtistSongsScreen({required this.artist, required this.songs});
|
||||
final String artist;
|
||||
final List<Song> songs;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: Text(artist)),
|
||||
body: SongList(songs),
|
||||
);
|
||||
}
|
||||
}
|
||||
+115
-76
@@ -3,103 +3,142 @@ import 'package:provider/provider.dart';
|
||||
|
||||
import '../player/audio_handler.dart';
|
||||
import '../shared/cover.dart';
|
||||
import 'album_list.dart';
|
||||
import 'artist_list.dart';
|
||||
import 'database.dart';
|
||||
import 'library_service.dart';
|
||||
import 'permissions.dart';
|
||||
import 'song_list.dart';
|
||||
import 'song_media.dart';
|
||||
|
||||
/// Bibliotheks-Tab mit drei Unteransichten: alle Songs, Künstler, Alben.
|
||||
/// Scan-Banner/-Fortschritt gelten für alle Unteransichten und liegen daher
|
||||
/// oberhalb der [TabBarView].
|
||||
class LibraryScreen extends StatelessWidget {
|
||||
const LibraryScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final db = context.read<MeloDb>();
|
||||
final lib = context.watch<LibraryService>();
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Bibliothek'),
|
||||
actions: [
|
||||
IconButton(
|
||||
tooltip: addMusicLabel,
|
||||
icon: const Icon(Icons.create_new_folder_outlined),
|
||||
onPressed: lib.scanning ? null : lib.pickFolderAndScan,
|
||||
),
|
||||
IconButton(
|
||||
tooltip: 'Erneut scannen',
|
||||
icon: const Icon(Icons.refresh),
|
||||
onPressed: lib.scanning ? null : lib.rescan,
|
||||
),
|
||||
],
|
||||
),
|
||||
body: Column(
|
||||
children: [
|
||||
if (lib.permissionDenied)
|
||||
MaterialBanner(
|
||||
backgroundColor: Colors.red.shade900,
|
||||
content: const Text('Zugriff auf Musik verweigert. '
|
||||
'Bitte in den Einstellungen erlauben.'),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: openMusicPermissionSettings,
|
||||
child: const Text('Einstellungen'),
|
||||
),
|
||||
],
|
||||
return DefaultTabController(
|
||||
length: 3,
|
||||
child: Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Bibliothek'),
|
||||
actions: [
|
||||
IconButton(
|
||||
tooltip: addMusicLabel,
|
||||
icon: const Icon(Icons.create_new_folder_outlined),
|
||||
onPressed: lib.scanning ? null : lib.pickFolderAndScan,
|
||||
),
|
||||
if (lib.scanError != null)
|
||||
MaterialBanner(
|
||||
backgroundColor: Colors.red.shade900,
|
||||
content: Text(lib.scanError!),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: lib.dismissScanError,
|
||||
child: const Text('Verwerfen'),
|
||||
),
|
||||
],
|
||||
IconButton(
|
||||
tooltip: 'Erneut scannen',
|
||||
icon: const Icon(Icons.refresh),
|
||||
onPressed: lib.scanning ? null : lib.rescan,
|
||||
),
|
||||
if (lib.scanning)
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: Column(
|
||||
children: [
|
||||
const LinearProgressIndicator(),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
'Scanne … ${lib.scanDone}'
|
||||
'${lib.scanTotal > 0 ? ' / ${lib.scanTotal}' : ''}',
|
||||
style: const TextStyle(color: Colors.white54, fontSize: 12),
|
||||
],
|
||||
bottom: const TabBar(
|
||||
tabs: [
|
||||
Tab(text: 'Alle'),
|
||||
Tab(text: 'Künstler'),
|
||||
Tab(text: 'Alben'),
|
||||
],
|
||||
),
|
||||
),
|
||||
body: Column(
|
||||
children: [
|
||||
if (lib.permissionDenied)
|
||||
MaterialBanner(
|
||||
backgroundColor: Colors.red.shade900,
|
||||
content: const Text('Zugriff auf Musik verweigert. '
|
||||
'Bitte in den Einstellungen erlauben.'),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: openMusicPermissionSettings,
|
||||
child: const Text('Einstellungen'),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (lib.scanError != null)
|
||||
MaterialBanner(
|
||||
backgroundColor: Colors.red.shade900,
|
||||
content: Text(lib.scanError!),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: lib.dismissScanError,
|
||||
child: const Text('Verwerfen'),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (lib.scanning)
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: Column(
|
||||
children: [
|
||||
const LinearProgressIndicator(),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
'Scanne … ${lib.scanDone}'
|
||||
'${lib.scanTotal > 0 ? ' / ${lib.scanTotal}' : ''}',
|
||||
style: const TextStyle(color: Colors.white54, fontSize: 12),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const Expanded(
|
||||
child: TabBarView(
|
||||
children: [
|
||||
_AllSongsTab(),
|
||||
ArtistListScreen(),
|
||||
AlbumListScreen(),
|
||||
],
|
||||
),
|
||||
),
|
||||
StreamBuilder<List<Song>>(
|
||||
stream: db.watchRecent(limit: 10),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// "Alle"-Tab: zuletzt hinzugefügt + vollständige Songliste (unverändertes
|
||||
/// Verhalten aus der Zeit vor der Künstler-/Alben-Aufteilung).
|
||||
class _AllSongsTab extends StatelessWidget {
|
||||
const _AllSongsTab();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final db = context.read<MeloDb>();
|
||||
final lib = context.watch<LibraryService>();
|
||||
return Column(
|
||||
children: [
|
||||
StreamBuilder<List<Song>>(
|
||||
stream: db.watchRecent(limit: 10),
|
||||
builder: (context, snapshot) {
|
||||
final recent = snapshot.data ?? const [];
|
||||
if (recent.isEmpty || lib.scanning) return const SizedBox.shrink();
|
||||
return _RecentlyAdded(songs: recent);
|
||||
},
|
||||
),
|
||||
Expanded(
|
||||
child: StreamBuilder<List<Song>>(
|
||||
stream: db.watchSongs(),
|
||||
builder: (context, snapshot) {
|
||||
final recent = snapshot.data ?? const [];
|
||||
if (recent.isEmpty || lib.scanning) return const SizedBox.shrink();
|
||||
return _RecentlyAdded(songs: recent);
|
||||
if (snapshot.hasError) {
|
||||
return Center(
|
||||
child: Text('Fehler: ${snapshot.error}',
|
||||
style: const TextStyle(color: Colors.white54)),
|
||||
);
|
||||
}
|
||||
final songs = snapshot.data ?? const [];
|
||||
if (songs.isEmpty && !lib.scanning) {
|
||||
return const _Empty();
|
||||
}
|
||||
return SongList(songs);
|
||||
},
|
||||
),
|
||||
Expanded(
|
||||
child: StreamBuilder<List<Song>>(
|
||||
stream: db.watchSongs(),
|
||||
builder: (context, snapshot) {
|
||||
if (snapshot.hasError) {
|
||||
return Center(
|
||||
child: Text('Fehler: ${snapshot.error}',
|
||||
style: const TextStyle(color: Colors.white54)),
|
||||
);
|
||||
}
|
||||
final songs = snapshot.data ?? const [];
|
||||
if (songs.isEmpty && !lib.scanning) {
|
||||
return const _Empty();
|
||||
}
|
||||
return SongList(songs);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
import 'database.dart';
|
||||
|
||||
const unbekannterKuenstler = 'Unbekannt';
|
||||
const unbekanntesAlbum = 'Unbekanntes Album';
|
||||
|
||||
/// Gruppiert [songs] nach Künstler (fehlender Künstler → [unbekannterKuenstler]),
|
||||
/// alphabetisch nach Künstlername sortiert.
|
||||
Map<String, List<Song>> groupByArtist(List<Song> songs) {
|
||||
return _groupBy(songs, (s) => s.artist, unbekannterKuenstler);
|
||||
}
|
||||
|
||||
/// Gruppiert [songs] nach Album (fehlendes Album → [unbekanntesAlbum]),
|
||||
/// alphabetisch nach Albumname sortiert.
|
||||
Map<String, List<Song>> groupByAlbum(List<Song> songs) {
|
||||
return _groupBy(songs, (s) => s.album, unbekanntesAlbum);
|
||||
}
|
||||
|
||||
/// Künstler-Beschriftung für ein Album: der gemeinsame Künstler, falls alle
|
||||
/// Songs im Album vom selben Künstler stammen, sonst "Verschiedene Interpreten".
|
||||
String albumArtistLabel(List<Song> songs) {
|
||||
final artists = songs.map((s) => s.artist ?? unbekannterKuenstler).toSet();
|
||||
return artists.length == 1 ? artists.first : 'Verschiedene Interpreten';
|
||||
}
|
||||
|
||||
Map<String, List<Song>> _groupBy(
|
||||
List<Song> songs,
|
||||
String? Function(Song) keyOf,
|
||||
String fallback,
|
||||
) {
|
||||
final grouped = <String, List<Song>>{};
|
||||
for (final song in songs) {
|
||||
final key = keyOf(song) ?? fallback;
|
||||
grouped.putIfAbsent(key, () => []).add(song);
|
||||
}
|
||||
final sortedKeys = grouped.keys.toList()
|
||||
..sort((a, b) => a.toLowerCase().compareTo(b.toLowerCase()));
|
||||
return {for (final key in sortedKeys) key: grouped[key]!};
|
||||
}
|
||||
Reference in New Issue
Block a user