Navidrome-Integration, Widgets (Recent + Tag-Statistik)

This commit is contained in:
Hermes (Server)
2026-07-23 22:23:28 +02:00
parent 94a4063070
commit c7828b851c
16 changed files with 1434 additions and 158 deletions
+6 -1
View File
@@ -4,8 +4,9 @@ import '../utils/farb_theme.dart';
class MeloHeader extends StatelessWidget {
final VoidCallback onDownload;
final VoidCallback onSearch;
final VoidCallback? onServer;
const MeloHeader({super.key, required this.onDownload, required this.onSearch});
const MeloHeader({super.key, required this.onDownload, required this.onSearch, this.onServer});
@override
Widget build(BuildContext context) {
@@ -28,6 +29,10 @@ class MeloHeader extends StatelessWidget {
],
),
Row(children: [
if (onServer != null) ...[
_btn(Icons.cloud, onServer!),
const SizedBox(width: 8),
],
_btn(Icons.download, onDownload),
const SizedBox(width: 8),
_btn(Icons.search, onSearch),
+257
View File
@@ -0,0 +1,257 @@
import 'package:flutter/material.dart';
import '../services/navidrome_service.dart';
import '../utils/farb_theme.dart';
/// Navidrome-Browser als Bottom-Sheet.
/// Manuell in home_screen.dart einbaubar.
class NavidromeBrowser extends StatefulWidget {
final dynamic vm;
const NavidromeBrowser({super.key, required this.vm});
@override
State<NavidromeBrowser> createState() => _NavidromeBrowserState();
}
class _NavidromeBrowserState extends State<NavidromeBrowser> {
String? _gewaehltesAlbum;
@override
Widget build(BuildContext context) {
final vm = widget.vm;
return Padding(
padding: const EdgeInsets.fromLTRB(20, 16, 20, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header
Row(
children: [
const Text('📡 Navidrome', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Colors.white)),
const Spacer(),
if (!vm.navidrome.istVerbunden)
_btn(context, 'Verbinden', () => _zeigeLoginDialog(context))
else ...[
Text(vm.navidrome.istVerbunden ? '' : '', style: const TextStyle(fontSize: 14)),
const SizedBox(width: 8),
_btn(context, 'Alben laden', () => vm.ladeNavidromeAlben().then((_) => setState(() {}))),
],
],
),
const SizedBox(height: 12),
// Inhalt
if (!vm.navidrome.istVerbunden)
_platzhalter('Server-URL + Zugangsdaten eingeben')
else if (vm.serverLadt)
const Center(child: Padding(
padding: EdgeInsets.all(20),
child: CircularProgressIndicator(color: MeloTheme.rot, strokeWidth: 2),
))
else if (_gewaehltesAlbum != null)
_albumSongListe(context, _gewaehltesAlbum!)
else if (vm.navidromeAlben.isEmpty)
_platzhalter('"Alben laden" um Musik zu sehen')
else
_albumListe(context, vm.navidromeAlben as List<SubsonicAlbum>),
],
),
);
}
Widget _platzhalter(String text) {
return Expanded(child: Center(
child: Text(text, style: const TextStyle(fontSize: 12, color: MeloTheme.textSekundaer)),
));
}
Widget _albumListe(BuildContext context, List<SubsonicAlbum> alben) {
return Expanded(
child: Column(
children: [
Text('${alben.length} Alben', style: const TextStyle(fontSize: 12, color: MeloTheme.textSekundaer)),
const SizedBox(height: 8),
Expanded(
child: ListView.builder(
itemCount: alben.length,
itemBuilder: (_, i) => GestureDetector(
onTap: () async {
setState(() => _gewaehltesAlbum = alben[i].id);
},
child: Container(
margin: const EdgeInsets.only(bottom: 6),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(10),
),
child: Row(
children: [
Container(
width: 36, height: 36,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: MeloTheme.rot.withValues(alpha: 0.3),
),
child: const Center(child: Text('💿', style: TextStyle(fontSize: 14))),
),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(alben[i].name,
style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: Colors.white)),
Text('${alben[i].songCount} Songs',
style: const TextStyle(fontSize: 10, color: MeloTheme.textSekundaer)),
],
),
),
const Icon(Icons.chevron_right, size: 16, color: MeloTheme.textSekundaer),
],
),
),
),
),
),
],
),
);
}
Widget _albumSongListe(BuildContext context, String albumId) {
return FutureBuilder<List<SubsonicSong>>(
future: widget.vm.ladeAlbumSongs(albumId),
builder: (_, snap) {
if (snap.connectionState != ConnectionState.done) {
return const Expanded(child: Center(
child: CircularProgressIndicator(color: MeloTheme.rot, strokeWidth: 2),
));
}
final songs = snap.data ?? [];
return Expanded(
child: Column(
children: [
Row(
children: [
GestureDetector(
onTap: () => setState(() => _gewaehltesAlbum = null),
child: const Icon(Icons.arrow_back, size: 18, color: MeloTheme.rot),
),
const SizedBox(width: 8),
Text('${songs.length} Songs',
style: const TextStyle(fontSize: 12, color: MeloTheme.textSekundaer)),
],
),
const SizedBox(height: 8),
Expanded(
child: ListView.builder(
itemCount: songs.length,
itemBuilder: (_, i) => _songTile(context, songs[i]),
),
),
],
),
);
},
);
}
Widget _songTile(BuildContext context, SubsonicSong s) {
return Container(
margin: const EdgeInsets.only(bottom: 6),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(10),
),
child: Row(
children: [
Container(
width: 32, height: 32,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: MeloTheme.rot.withValues(alpha: 0.3),
),
child: const Center(child: Text('', style: TextStyle(fontSize: 14))),
),
const SizedBox(width: 8),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(s.titel,
style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: Colors.white),
overflow: TextOverflow.ellipsis),
Text('${s.kuenstler} · ${s.dauerFormatiert}',
style: const TextStyle(fontSize: 10, color: MeloTheme.textSekundaer)),
],
),
),
GestureDetector(
onTap: () => widget.vm.downloadNavidromeSong(s).then((_) => setState(() {})),
child: const Icon(Icons.download, size: 18, color: MeloTheme.rot),
),
],
),
);
}
Widget _btn(BuildContext context, String label, VoidCallback onTap) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
border: Border.all(color: MeloTheme.dunkel2),
borderRadius: BorderRadius.circular(8),
),
child: Text(label, style: const TextStyle(fontSize: 11, color: MeloTheme.rot)),
),
);
}
void _zeigeLoginDialog(BuildContext context) {
final urlCtrl = TextEditingController();
final userCtrl = TextEditingController();
final passCtrl = TextEditingController();
showDialog(
context: context,
builder: (ctx) => AlertDialog(
backgroundColor: MeloTheme.dunkel1,
title: const Text('🌐 Navidrome', style: TextStyle(color: Colors.white, fontSize: 16)),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(controller: urlCtrl, style: const TextStyle(color: Colors.white),
decoration: const InputDecoration(labelText: 'Server-URL', hintText: 'https://musik.baka-net.de',
labelStyle: TextStyle(color: Colors.grey), hintStyle: TextStyle(color: Colors.grey), border: OutlineInputBorder())),
const SizedBox(height: 8),
TextField(controller: userCtrl, style: const TextStyle(color: Colors.white),
decoration: const InputDecoration(labelText: 'Benutzer', labelStyle: TextStyle(color: Colors.grey), border: OutlineInputBorder())),
const SizedBox(height: 8),
TextField(controller: passCtrl, style: const TextStyle(color: Colors.white), obscureText: true,
decoration: const InputDecoration(labelText: 'Passwort', labelStyle: TextStyle(color: Colors.grey), border: OutlineInputBorder())),
],
),
actions: [
TextButton(onPressed: () => Navigator.pop(ctx), child: const Text('Abbrechen')),
TextButton(
onPressed: () {
widget.vm.verbindeNavidrome(urlCtrl.text, userCtrl.text, passCtrl.text);
Navigator.pop(ctx);
widget.vm.ladeNavidromeAlben().then((_) => setState(() {}));
},
child: const Text('Verbinden', style: TextStyle(color: MeloTheme.rot)),
),
],
),
);
}
}
extension on SubsonicSong {
String get dauerFormatiert {
final min = dauerSekunden ~/ 60;
final sek = dauerSekunden % 60;
return '$min:${sek.toString().padLeft(2, '0')}';
}
}
+273
View File
@@ -0,0 +1,273 @@
import 'package:flutter/material.dart';
import '../models/song.dart';
import '../models/playlist.dart';
import '../utils/farb_theme.dart';
/// Bottom-Sheet zum Durchstöbern von Playlists.
class PlaylistSheet extends StatefulWidget {
final dynamic vm;
const PlaylistSheet({super.key, required this.vm});
@override
State<PlaylistSheet> createState() => _PlaylistSheetState();
}
class _PlaylistSheetState extends State<PlaylistSheet> {
List<Playlist> _playlists = [];
bool _ladt = true;
@override
void initState() {
super.initState();
_laden();
}
Future<void> _laden() async {
_ladt = true;
setState(() {});
_playlists = await widget.vm.playlists.allePlaylists();
_ladt = false;
setState(() {});
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(20, 12, 20, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Handle
Center(
child: Container(
width: 40, height: 4,
decoration: BoxDecoration(
color: MeloTheme.dunkel2,
borderRadius: BorderRadius.circular(2),
),
),
),
const SizedBox(height: 12),
// Header
Row(
children: [
const Icon(Icons.queue_music, size: 18, color: Colors.white),
const SizedBox(width: 6),
const Text('Playlists', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.white)),
const Spacer(),
_btn('+ Neu', _neuePlaylist),
],
),
const SizedBox(height: 12),
if (_ladt)
const Expanded(child: Center(child: CircularProgressIndicator(color: MeloTheme.rot, strokeWidth: 2)))
else if (_playlists.isEmpty)
const Expanded(child: Center(child: Text('Noch keine Playlists\nTippe oben auf "+ Neu"',
textAlign: TextAlign.center, style: TextStyle(fontSize: 12, color: MeloTheme.textSekundaer))))
else
Expanded(child: _listView()),
],
),
);
}
Widget _listView() {
return RefreshIndicator(
color: MeloTheme.rot,
onRefresh: _laden,
child: ListView.builder(
itemCount: _playlists.length,
itemBuilder: (_, i) => _playlistTile(_playlists[i]),
),
);
}
Widget _playlistTile(Playlist p) {
return Container(
margin: const EdgeInsets.only(bottom: 6),
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(12),
),
child: ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
leading: Container(
width: 40, height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: MeloTheme.rot.withValues(alpha: 0.3),
),
child: const Center(child: Text('🎵', style: TextStyle(fontSize: 16))),
),
title: Text(p.name, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: Colors.white)),
subtitle: Text('${p.songCount} Songs · ${p.erstelltAm.substring(0, 10)}',
style: const TextStyle(fontSize: 11, color: MeloTheme.textSekundaer)),
trailing: const Icon(Icons.chevron_right, size: 18, color: MeloTheme.textSekundaer),
onTap: () => _playlistOffnen(context, p),
),
);
}
void _playlistOffnen(BuildContext context, Playlist p) async {
final songs = await widget.vm.playlists.songs(p.id!);
if (!context.mounted) return;
showModalBottomSheet(
context: context,
backgroundColor: MeloTheme.schwarz,
isScrollControlled: true,
builder: (_) => SizedBox(
height: MediaQuery.of(context).size.height * 0.6,
child: _PlaylistDetail(p: p, songs: songs, vm: widget.vm, onChanged: _laden),
),
);
}
void _neuePlaylist() {
final ctrl = TextEditingController();
showDialog(
context: context,
builder: (ctx) => AlertDialog(
backgroundColor: MeloTheme.dunkel1,
title: const Text('Neue Playlist', style: TextStyle(color: Colors.white, fontSize: 16)),
content: TextField(
controller: ctrl,
autofocus: true,
style: const TextStyle(color: Colors.white),
decoration: const InputDecoration(
hintText: 'Name...',
hintStyle: TextStyle(color: Colors.grey),
border: OutlineInputBorder(),
),
),
actions: [
TextButton(onPressed: () => Navigator.pop(ctx), child: const Text('Abbrechen')),
TextButton(
onPressed: () async {
if (ctrl.text.trim().isEmpty) return;
await widget.vm.playlists.erstellen(ctrl.text.trim());
if (ctx.mounted) Navigator.pop(ctx);
_laden();
},
child: const Text('Erstellen', style: TextStyle(color: MeloTheme.rot)),
),
],
),
);
}
Widget _btn(String label, VoidCallback onTap) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
border: Border.all(color: MeloTheme.dunkel2),
borderRadius: BorderRadius.circular(8),
),
child: Text(label, style: const TextStyle(fontSize: 11, color: MeloTheme.rot)),
),
);
}
}
/// Detailansicht einer Playlist mit Songs
class _PlaylistDetail extends StatelessWidget {
final Playlist p;
final List<Song> songs;
final dynamic vm;
final VoidCallback onChanged;
const _PlaylistDetail({
required this.p,
required this.songs,
required this.vm,
required this.onChanged,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(20, 12, 20, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Container(
width: 40, height: 4,
decoration: BoxDecoration(
color: MeloTheme.dunkel2,
borderRadius: BorderRadius.circular(2),
),
),
),
const SizedBox(height: 12),
Row(
children: [
GestureDetector(
onTap: () => Navigator.pop(context),
child: const Icon(Icons.arrow_back, size: 20, color: MeloTheme.rot),
),
const SizedBox(width: 8),
Text(p.name, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.white)),
const Spacer(),
Text('${songs.length} Songs', style: const TextStyle(fontSize: 12, color: MeloTheme.textSekundaer)),
],
),
const SizedBox(height: 12),
Expanded(
child: songs.isEmpty
? const Center(child: Text('Playlist ist leer', style: TextStyle(fontSize: 12, color: MeloTheme.textSekundaer)))
: ListView.builder(
itemCount: songs.length,
itemBuilder: (_, i) => _songTile(context, songs[i]),
),
),
],
),
);
}
Widget _songTile(BuildContext context, Song song) {
return Container(
margin: const EdgeInsets.only(bottom: 4),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(10),
),
child: Row(
children: [
Container(
width: 32, height: 32,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: MeloTheme.rot.withValues(alpha: 0.3),
),
child: const Center(child: Text('', style: TextStyle(fontSize: 14))),
),
const SizedBox(width: 8),
Expanded(
child: GestureDetector(
onTap: () { Navigator.pop(context); vm.spieleSong(song); },
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(song.titel, style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: Colors.white), overflow: TextOverflow.ellipsis),
Text(song.kuenstler, style: const TextStyle(fontSize: 10, color: MeloTheme.textSekundaer)),
],
),
),
),
GestureDetector(
onTap: () async {
await vm.playlists.songEntfernen(p.id!, song.id!);
onChanged();
if (context.mounted) Navigator.pop(context);
},
child: const Icon(Icons.remove_circle_outline, size: 18, color: MeloTheme.textSekundaer),
),
],
),
);
}
}
+73
View File
@@ -0,0 +1,73 @@
import 'package:flutter/material.dart';
import '../models/song.dart';
import '../utils/farb_theme.dart';
/// Zeigt die letzten abgespielten Songs als horizontale Liste.
/// Manuell in home_screen.dart einbaubar:
/// RecentWidget(songs: _vm.letzteSongs, onPlay: _vm.spieleSong)
class RecentWidget extends StatelessWidget {
final List<Song> songs;
final void Function(Song) onPlay;
const RecentWidget({super.key, required this.songs, required this.onPlay});
@override
Widget build(BuildContext context) {
if (songs.isEmpty) return const SizedBox.shrink();
return Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('🕐 Zuletzt gehört',
style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: Colors.white70)),
const SizedBox(height: 8),
SizedBox(
height: 52,
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: songs.length,
separatorBuilder: (_, __) => const SizedBox(width: 8),
itemBuilder: (_, i) => GestureDetector(
onTap: () => onPlay(songs[i]),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 28, height: 28,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: MeloTheme.rot.withValues(alpha: 0.3),
),
child: const Center(child: Text('', style: TextStyle(fontSize: 12))),
),
const SizedBox(width: 6),
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(songs[i].titel,
style: const TextStyle(fontSize: 11, fontWeight: FontWeight.w500, color: Colors.white)),
Text(songs[i].kuenstler,
style: const TextStyle(fontSize: 9, color: MeloTheme.textSekundaer)),
],
),
],
),
),
),
),
),
],
),
);
}
}
+10
View File
@@ -9,6 +9,7 @@ class SongTile extends StatelessWidget {
final ValueChanged<Song> onFavoriteToggle;
final ValueChanged<Song> onPlay;
final VoidCallback onMetadataChanged;
final ValueChanged<Song>? onAddToPlaylist;
const SongTile({
super.key,
@@ -51,6 +52,15 @@ class SongTile extends StatelessWidget {
child: Icon(Icons.edit, size: 14, color: MeloTheme.textSekundaer),
),
),
if (onAddToPlaylist != null)
InkWell(
borderRadius: BorderRadius.circular(50),
onTap: () => onAddToPlaylist!(song),
child: Padding(
padding: const EdgeInsets.all(6),
child: const Icon(Icons.playlist_add, size: 14, color: MeloTheme.textSekundaer),
),
),
InkWell(
borderRadius: BorderRadius.circular(50),
onTap: () => onFavoriteToggle(song),
+13 -8
View File
@@ -3,14 +3,14 @@ import '../utils/farb_theme.dart';
class TagLeiste extends StatelessWidget {
final List<Map<String, String>> tags;
final String aktiverTag;
final ValueChanged<String> onTagSelected;
final Set<String> aktiveTags;
final ValueChanged<String> onTagToggled;
const TagLeiste({
super.key,
required this.tags,
required this.aktiverTag,
required this.onTagSelected,
required this.aktiveTags,
required this.onTagToggled,
});
@override
@@ -24,7 +24,11 @@ class TagLeiste extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text('🏷️ Tags', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.white)),
Text('+ Neu', style: TextStyle(fontSize: 12, color: MeloTheme.rot, fontWeight: FontWeight.w500)),
if (aktiveTags.isNotEmpty)
GestureDetector(
onTap: () => onTagToggled('Alle'),
child: Text('löschen', style: TextStyle(fontSize: 11, color: MeloTheme.rot.withValues(alpha: 0.7))),
),
],
),
),
@@ -34,14 +38,15 @@ class TagLeiste extends StatelessWidget {
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 20),
children: tags.map((tag) {
final aktiv = aktiverTag == tag['name'];
final name = tag['name']!;
final aktiv = aktiveTags.contains(name);
return Padding(
padding: const EdgeInsets.only(right: 8),
child: FilterChip(
label: Text('${tag['icon']} ${tag['name']}',
label: Text('${tag['icon']} $name',
style: TextStyle(fontSize: 13, color: aktiv ? Colors.white : MeloTheme.textSekundaer)),
selected: aktiv,
onSelected: (_) => onTagSelected(tag['name']!),
onSelected: (_) => onTagToggled(name),
selectedColor: MeloTheme.rot,
backgroundColor: MeloTheme.dunkel1,
side: BorderSide.none,
+49
View File
@@ -0,0 +1,49 @@
import 'package:flutter/material.dart';
import '../utils/farb_theme.dart';
/// Zeigt wie viele Songs pro Tag existieren.
/// Manuell in home_screen.dart einbaubar:
/// TagStatsWidget(tagCounts: _vm.tagCounts)
class TagStatsWidget extends StatelessWidget {
final Map<String, int> tagCounts;
const TagStatsWidget({super.key, required this.tagCounts});
@override
Widget build(BuildContext context) {
if (tagCounts.isEmpty) return const SizedBox.shrink();
return Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
child: Wrap(
spacing: 6,
runSpacing: 6,
children: tagCounts.entries.map((e) {
final farbe = _tagFarbe(e.key);
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: farbe.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: farbe.withValues(alpha: 0.3)),
),
child: Text('${e.key} ${e.value}',
style: TextStyle(fontSize: 11, color: farbe, fontWeight: FontWeight.w500)),
);
}).toList(),
),
);
}
Color _tagFarbe(String name) {
switch (name) {
case '❤️ Für uns': return const Color(0xFFFF4444);
case 'Nightcore': return const Color(0xFFBB86FC);
case 'Traurig': return const Color(0xFF5C8DFF);
case 'Party': return const Color(0xFFFFB74D);
case 'Mitsingen': return const Color(0xFF69F0AE);
case '2000er': return const Color(0xFFFF80AB);
default: return MeloTheme.rot;
}
}
}