feat(playlists): Playlist-Detailansicht mit Drag&Drop-Umsortieren

PlaylistDetailScreen zeigt die Songs einer Playlist (watchPlaylistSongs), erlaubt Entfernen einzelner Songs und Umsortieren per Drag & Drop (ReorderableListView.builder). Tippen auf einen Song spielt die Playlist ab dieser Stelle. Leer-Zustand mit Hinweistext. Da bestehende position-Werte nach Einfügereihenfolge lückenhaft sein können, schreibt das Umsortieren nicht nur den verschobenen Song um, sondern vergibt für die gesamte Playlist neue lückenlose Positionen (0..N-1): MeloDb.reorderAllPlaylistSongs (in einer Transaktion) + PlaylistService.reorderAll als dünner Wrapper. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-18 17:19:56 +02:00
parent 4b5d77c196
commit 96d9f38a64
4 changed files with 122 additions and 0 deletions
@@ -0,0 +1,81 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import '../library/database.dart';
+import '../library/playlist_service.dart';
+import '../library/song_media.dart';
+import '../player/audio_handler.dart';
+import '../shared/cover.dart';
+
+/// Playlist-Detailansicht: Songs anzeigen, per Drag & Drop umsortieren, entfernen.
+class PlaylistDetailScreen extends StatelessWidget {
+  const PlaylistDetailScreen({super.key, required this.playlist});
+  final Playlist playlist;
+
+  @override
+  Widget build(BuildContext context) {
+    final db = context.read<MeloDb>();
+    final handler = context.read<MeloAudioHandler>();
+    final service = context.read<PlaylistService>();
+    return Scaffold(
+      appBar: AppBar(title: Text(playlist.name)),
+      body: StreamBuilder<List<Song>>(
+        stream: db.watchPlaylistSongs(playlist.id),
+        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) {
+            return const Center(
+              child: Text('Playlist ist leer — füge Songs aus der Bibliothek hinzu',
+                  style: TextStyle(color: Colors.white54)),
+            );
+          }
+          return ReorderableListView.builder(
+            itemCount: songs.length,
+            onReorderItem: (oldIndex, newIndex) {
+              final reordered = List<Song>.from(songs);
+              final moved = reordered.removeAt(oldIndex);
+              reordered.insert(newIndex, moved);
+              service.reorderAll(playlist.id, reordered.map((s) => s.id).toList());
+            },
+            itemBuilder: (context, i) {
+              final s = songs[i];
+              return ListTile(
+                key: ValueKey(s.id),
+                leading: CoverImage(
+                  artUri: s.coverPath != null ? Uri.file(s.coverPath!) : null,
+                  size: 48,
+                  radius: 6,
+                ),
+                title: Text(s.title, maxLines: 1, overflow: TextOverflow.ellipsis),
+                subtitle: Text(s.artist ?? 'Unbekannt',
+                    maxLines: 1, overflow: TextOverflow.ellipsis),
+                trailing: IconButton(
+                  tooltip: 'Aus Playlist entfernen',
+                  icon: const Icon(Icons.remove_circle_outline),
+                  onPressed: () => service.removeSongFromPlaylist(playlist.id, s.id),
+                ),
+                onTap: () async {
+                  try {
+                    await playSongs(handler, songs, i);
+                  } catch (e) {
+                    if (context.mounted) {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        SnackBar(content: Text('Wiedergabe fehlgeschlagen: $e')),
+                      );
+                    }
+                  }
+                },
+              );
+            },
+          );
+        },
+      ),
+    );
+  }
+}