v2.48.2 — Queue-UI (Warteschlange-Sheet)
## PlayerService - warteschlange Getter (unveränderliche Kopie) + aktuellerIndex - spieleAlsNaechstes(Song): fügt nach aktuellem Song ein - amEndeHinzufuegen(Song): hängt ans Ende an - verschiebeInWarteschlange(von, nach): Drag-and-Drop mit korrekter Anpassung des aktuellen Index ## WarteschlangeSheet (neu: lib/widgets/warteschlange_sheet.dart) - Bottom-Sheet: aktuelle Warteschlange, aktueller Song rot markiert (▶) - Tipp auf Song → sofort abspielen - ReorderableListView (Bordmittel) zum Umsortieren per Drag - Leer-Zustand + Titel-Zähler ## MiniPlayer - Tipp auf den Miniplayer öffnet die Warteschlange (Bottom-Sheet) Keine neuen Packages, flutter analyze 0 Issues, Tests 4/4
This commit is contained in:
@@ -256,6 +256,51 @@ class PlayerService extends ChangeNotifier {
|
|||||||
notifyListeners();
|
notifyListeners();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ─── Warteschlange (Queue-UI) ───
|
||||||
|
|
||||||
|
/// Unveränderliche Kopie der Warteschlange für die Anzeige.
|
||||||
|
List<Song> get warteschlange => List.unmodifiable(_warteschlange);
|
||||||
|
|
||||||
|
/// Index des aktuell spielenden Songs in der Warteschlange.
|
||||||
|
int get aktuellerIndex => _aktuellerIndex;
|
||||||
|
|
||||||
|
/// Fügt [song] direkt nach dem aktuellen Song ein.
|
||||||
|
void spieleAlsNaechstes(Song song) {
|
||||||
|
if (_aktuellerIndex < 0 || _warteschlange.isEmpty) {
|
||||||
|
_warteschlange.add(song);
|
||||||
|
} else {
|
||||||
|
_warteschlange.insert(_aktuellerIndex + 1, song);
|
||||||
|
}
|
||||||
|
if (_zufallsmodus) _baueShuffleReihenfolge();
|
||||||
|
notifyListeners();
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Hängt [song] ans Ende der Warteschlange an.
|
||||||
|
void amEndeHinzufuegen(Song song) {
|
||||||
|
_warteschlange.add(song);
|
||||||
|
if (_zufallsmodus) _baueShuffleReihenfolge();
|
||||||
|
notifyListeners();
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Verschiebt einen Eintrag in der Warteschlange (Drag-and-Drop).
|
||||||
|
/// Der aktuelle Index wird entsprechend angepasst.
|
||||||
|
void verschiebeInWarteschlange(int von, int nach) {
|
||||||
|
if (von < 0 || von >= _warteschlange.length) return;
|
||||||
|
if (nach < 0 || nach >= _warteschlange.length) return;
|
||||||
|
if (von == nach) return;
|
||||||
|
final song = _warteschlange.removeAt(von);
|
||||||
|
_warteschlange.insert(nach, song);
|
||||||
|
if (_aktuellerIndex == von) {
|
||||||
|
_aktuellerIndex = nach;
|
||||||
|
} else if (von < _aktuellerIndex && nach >= _aktuellerIndex) {
|
||||||
|
_aktuellerIndex -= 1;
|
||||||
|
} else if (von > _aktuellerIndex && nach <= _aktuellerIndex) {
|
||||||
|
_aktuellerIndex += 1;
|
||||||
|
}
|
||||||
|
if (_zufallsmodus) _baueShuffleReihenfolge();
|
||||||
|
notifyListeners();
|
||||||
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void dispose() {
|
void dispose() {
|
||||||
_autoNextSub?.cancel();
|
_autoNextSub?.cancel();
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import 'package:just_audio/just_audio.dart';
|
|||||||
import '../services/player_service.dart';
|
import '../services/player_service.dart';
|
||||||
import '../models/song.dart';
|
import '../models/song.dart';
|
||||||
import '../utils/farb_theme.dart';
|
import '../utils/farb_theme.dart';
|
||||||
|
import 'warteschlange_sheet.dart';
|
||||||
|
|
||||||
class MiniPlayer extends StatefulWidget {
|
class MiniPlayer extends StatefulWidget {
|
||||||
const MiniPlayer({super.key});
|
const MiniPlayer({super.key});
|
||||||
@@ -51,6 +52,16 @@ class _MiniPlayerState extends State<MiniPlayer> {
|
|||||||
if (mounted) setState(() {});
|
if (mounted) setState(() {});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Öffnet die Warteschlange als Bottom-Sheet
|
||||||
|
void _zeigeWarteschlange() {
|
||||||
|
showModalBottomSheet(
|
||||||
|
context: context,
|
||||||
|
isScrollControlled: true,
|
||||||
|
backgroundColor: MeloTheme.dunkel1,
|
||||||
|
builder: (_) => const WarteschlangeSheet(),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void dispose() {
|
void dispose() {
|
||||||
_player.removeListener(_onPlayerChanged);
|
_player.removeListener(_onPlayerChanged);
|
||||||
@@ -69,7 +80,9 @@ class _MiniPlayerState extends State<MiniPlayer> {
|
|||||||
? _position.inSeconds / _dauer.inSeconds : 0.0;
|
? _position.inSeconds / _dauer.inSeconds : 0.0;
|
||||||
final hatCover = song.coverPfad != null && File(song.coverPfad!).existsSync();
|
final hatCover = song.coverPfad != null && File(song.coverPfad!).existsSync();
|
||||||
|
|
||||||
return Container(
|
return GestureDetector(
|
||||||
|
onTap: _zeigeWarteschlange,
|
||||||
|
child: Container(
|
||||||
margin: const EdgeInsets.symmetric(horizontal: 16),
|
margin: const EdgeInsets.symmetric(horizontal: 16),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: const Color(0xFF1A0A0A),
|
color: const Color(0xFF1A0A0A),
|
||||||
@@ -131,6 +144,7 @@ class _MiniPlayerState extends State<MiniPlayer> {
|
|||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,145 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import '../services/player_service.dart';
|
||||||
|
import '../models/song.dart';
|
||||||
|
import '../utils/farb_theme.dart';
|
||||||
|
|
||||||
|
/// Bottom-Sheet mit der aktuellen Warteschlange:
|
||||||
|
/// aktueller Song markiert, Tipp = abspielen, Drag-and-Drop = umsortieren.
|
||||||
|
class WarteschlangeSheet extends StatefulWidget {
|
||||||
|
const WarteschlangeSheet({super.key});
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<WarteschlangeSheet> createState() => _WarteschlangeSheetState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _WarteschlangeSheetState extends State<WarteschlangeSheet> {
|
||||||
|
final PlayerService _player = PlayerService();
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return ListenableBuilder(
|
||||||
|
listenable: _player,
|
||||||
|
builder: (context, _) {
|
||||||
|
final queue = _player.warteschlange;
|
||||||
|
final aktueller = _player.aktuellerIndex;
|
||||||
|
return SafeArea(
|
||||||
|
child: Padding(
|
||||||
|
padding: EdgeInsets.only(
|
||||||
|
bottom: MediaQuery.of(context).viewInsets.bottom,
|
||||||
|
),
|
||||||
|
child: ConstrainedBox(
|
||||||
|
constraints: BoxConstraints(
|
||||||
|
maxHeight: MediaQuery.of(context).size.height * 0.75,
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
// Griff
|
||||||
|
Container(
|
||||||
|
width: 36,
|
||||||
|
height: 4,
|
||||||
|
margin: const EdgeInsets.only(top: 10, bottom: 4),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: MeloTheme.dunkel2,
|
||||||
|
borderRadius: BorderRadius.circular(2),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// Kopfzeile
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.fromLTRB(20, 8, 8, 4),
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
const Icon(Icons.queue_music, size: 18, color: MeloTheme.rot),
|
||||||
|
const SizedBox(width: 8),
|
||||||
|
Text(
|
||||||
|
'Warteschlange',
|
||||||
|
style: const TextStyle(
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: Colors.white,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: 8),
|
||||||
|
Text(
|
||||||
|
'${queue.length} Titel',
|
||||||
|
style: const TextStyle(
|
||||||
|
fontSize: 12,
|
||||||
|
color: MeloTheme.textSekundaer,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const Spacer(),
|
||||||
|
IconButton(
|
||||||
|
icon: const Icon(Icons.close, size: 18, color: MeloTheme.textSekundaer),
|
||||||
|
onPressed: () => Navigator.pop(context),
|
||||||
|
tooltip: 'Schließen',
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const Divider(height: 1, color: MeloTheme.dunkel2),
|
||||||
|
// Liste
|
||||||
|
if (queue.isEmpty)
|
||||||
|
const Expanded(
|
||||||
|
child: Center(
|
||||||
|
child: Text(
|
||||||
|
'Keine Songs in der Warteschlange',
|
||||||
|
style: TextStyle(fontSize: 13, color: MeloTheme.textSekundaer),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
else
|
||||||
|
Flexible(
|
||||||
|
child: ReorderableListView.builder(
|
||||||
|
shrinkWrap: true,
|
||||||
|
padding: const EdgeInsets.fromLTRB(8, 4, 8, 16),
|
||||||
|
itemCount: queue.length,
|
||||||
|
// onReorderItem liefert den newIndex bereits angepasst
|
||||||
|
onReorderItem: (alt, neu) =>
|
||||||
|
_player.verschiebeInWarteschlange(alt, neu),
|
||||||
|
itemBuilder: (_, i) => _eintrag(queue[i], i, aktueller),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _eintrag(Song song, int index, int aktueller) {
|
||||||
|
final istAktuell = index == aktueller;
|
||||||
|
return ListTile(
|
||||||
|
key: ValueKey('$index-${song.id ?? song.titel}'),
|
||||||
|
dense: true,
|
||||||
|
leading: istAktuell
|
||||||
|
? const Icon(Icons.play_arrow, color: MeloTheme.rot, size: 18)
|
||||||
|
: SizedBox(
|
||||||
|
width: 18,
|
||||||
|
child: Text(
|
||||||
|
'${index + 1}',
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
style: const TextStyle(fontSize: 11, color: MeloTheme.textSekundaer),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
title: Text(
|
||||||
|
song.titel,
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: istAktuell ? FontWeight.w700 : FontWeight.w400,
|
||||||
|
color: istAktuell ? MeloTheme.rot : Colors.white,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
subtitle: Text(
|
||||||
|
song.kuenstler,
|
||||||
|
style: const TextStyle(fontSize: 11, color: MeloTheme.textSekundaer),
|
||||||
|
),
|
||||||
|
trailing: Text(
|
||||||
|
song.dauerFormatiert,
|
||||||
|
style: const TextStyle(fontSize: 11, color: MeloTheme.textSekundaer),
|
||||||
|
),
|
||||||
|
onTap: () => _player.spiele(song),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user