Files
Melo/lib/player/queue_screen.dart
Hermes (Server)andClaude Opus 5 bc861f6087 UI-Politur: Kontrast, Abstaende, Typografie, Bewegung
Kein Redesign — Schwarz/Rot, 4 Tabs und Lieder/Kategorie bleiben. Grundlage
sind die Design-Skills: ui-ux-pro-max (Barrierefreiheit, Touch, Typografie,
Bewegung), ui-design/mobile-android (Material 3) und die Token-Disziplin
aus Hue.

Behobene Maengel (messbar, nicht Geschmack):
- Text in Colors.white38 an 17 Stellen = 3,4:1 Kontrast, WCAG verlangt
  4,5:1. Ersetzt durch drei benannte Stufen (text1 15,9:1 / text2 8,8:1 /
  text3 4,9:1). theme_kontrast_test.dart rechnet die Verhaeltnisse bei
  jedem Lauf nach, statt sie zu behaupten.
- SubTabs waren ~38 dp hoch (Material 3 verlangt 48), ohne Ripple und ohne
  Uebergang. Jetzt 48 dp, InkWell, AnimatedContainer, und die Auswahl wird
  Vorlesehilfen als Zustand gemeldet (Semantics.selected).
- mini_player.dart: Expanded UM eine feste Hoehe herum — zwei
  widerspruechliche Angaben. Entschaerft.
- Emoji in Bedienelementen der Einstellungen (jeweils neben einem echten
  Icon) entfernt.

Neu in shared/theme.dart: MeloSpace (8er-Raster), MeloRadius, MeloMotion,
Farbrollen text1/2/3 + border + hairline, minTouchTarget, vollstaendiges
textTheme (7 Stufen) und Themes fuer Listen, Sheets, Snackbars,
Fortschritt, Trenner.

318 Tests gruen (23 neue, 1 uebersprungen), flutter analyze ohne Befund.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FpPu4nuKjKKeX1RpdDeX81
2026-08-21 12:40:25 +02:00

138 lines
5.3 KiB
Dart

import 'package:audio_service/audio_service.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../shared/cover.dart';
import '../shared/theme.dart';
import 'audio_handler.dart';
/// Warteschlangen-Ansicht: aktuelle Queue anzeigen, zu einem Titel springen,
/// Titel entfernen oder per Drag & Drop umsortieren.
///
/// Der `MeloAudioHandler` bietet keine Live-Queue-Mutation (kein
/// `removeQueueItem`/`moveQueueItem`), daher wird die Queue clientseitig neu
/// berechnet und per `loadPlaylist` neu geladen.
class QueueScreen extends StatelessWidget {
const QueueScreen({super.key});
@override
Widget build(BuildContext context) {
final handler = context.read<MeloAudioHandler>();
return Scaffold(
appBar: AppBar(title: const Text('Warteschlange')),
body: StreamBuilder<List<MediaItem>>(
stream: handler.queue,
builder: (context, queueSnap) {
final queue = queueSnap.data ?? const <MediaItem>[];
if (queue.isEmpty) {
return const Center(
child: Text('Warteschlange ist leer',
style: TextStyle(color: MeloTheme.text2)),
);
}
return StreamBuilder<MediaItem?>(
stream: handler.mediaItem,
builder: (context, currentSnap) {
final currentId = currentSnap.data?.id;
return ReorderableListView.builder(
itemCount: queue.length,
onReorderItem: (oldIndex, newIndex) =>
_reorder(handler, oldIndex, newIndex),
itemBuilder: (context, i) {
final item = queue[i];
final playing = item.id == currentId;
return ListTile(
key: ValueKey(item.id),
leading: CoverImage(artUri: item.artUri, size: 48, radius: 6),
title: Text(
item.title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: playing
? const TextStyle(
color: MeloTheme.red, fontWeight: FontWeight.bold)
: null,
),
subtitle: Text(item.artist ?? 'Unbekannt',
maxLines: 1, overflow: TextOverflow.ellipsis),
trailing: IconButton(
tooltip: 'Aus Warteschlange entfernen',
icon: const Icon(Icons.close),
onPressed: () => _remove(handler, i),
),
onTap: () => handler.skipToQueueItem(i),
);
},
);
},
);
},
),
);
}
Future<void> _remove(MeloAudioHandler handler, int index) async {
final queue = handler.queue.valueOrNull ?? const <MediaItem>[];
if (index < 0 || index >= queue.length) return;
final playingId = handler.mediaItem.valueOrNull?.id;
final position = await handler.positionStream.first;
final newQueue = removeFromQueue(queue, index);
if (newQueue.isEmpty) {
await handler.stop();
return;
}
final fallbackIndex = index.clamp(0, newQueue.length - 1);
final newIndex = newPlayingIndex(newQueue, playingId, fallbackIndex);
await handler.loadPlaylist(newQueue, startIndex: newIndex);
if (newQueue[newIndex].id == playingId) {
await handler.seek(position);
}
}
Future<void> _reorder(
MeloAudioHandler handler, int oldIndex, int newIndex) async {
final queue = handler.queue.valueOrNull ?? const <MediaItem>[];
if (queue.isEmpty) return;
final playingId = handler.mediaItem.valueOrNull?.id;
final position = await handler.positionStream.first;
final newQueue = reorderQueue(queue, oldIndex, newIndex);
final fallbackIndex = newIndex.clamp(0, newQueue.length - 1);
final newPlayIndex = newPlayingIndex(newQueue, playingId, fallbackIndex);
await handler.loadPlaylist(newQueue, startIndex: newPlayIndex);
if (newQueue[newPlayIndex].id == playingId) {
await handler.seek(position);
}
}
}
// === Reine Queue-Logik (ohne AudioHandler testbar) ===
/// Entfernt den Titel an [removeIndex] aus [queue].
List<MediaItem> removeFromQueue(List<MediaItem> queue, int removeIndex) {
return List<MediaItem>.from(queue)..removeAt(removeIndex);
}
/// Verschiebt den Titel von [oldIndex] nach [newIndex]. `newIndex` ist bereits
/// um das entfernte Element bereinigt (siehe `ReorderableListView.onReorderItem`).
List<MediaItem> reorderQueue(List<MediaItem> queue, int oldIndex, int newIndex) {
final result = List<MediaItem>.from(queue);
final moved = result.removeAt(oldIndex);
result.insert(newIndex, moved);
return result;
}
/// Ermittelt den Index des zuvor abgespielten Titels ([playingId]) in
/// [newQueue]. Ist er nicht mehr vorhanden, wird auf [fallbackIndex]
/// zurückgefallen (z.B. der Titel, der jetzt an seiner alten Position steht).
int newPlayingIndex(
List<MediaItem> newQueue, String? playingId, int fallbackIndex) {
if (newQueue.isEmpty) return 0;
if (playingId != null) {
final idx = newQueue.indexWhere((item) => item.id == playingId);
if (idx != -1) return idx;
}
return fallbackIndex.clamp(0, newQueue.length - 1);
}