Navidrome-Integration, Widgets (Recent + Tag-Statistik)
This commit is contained in:
@@ -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),
|
||||
|
||||
@@ -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')}';
|
||||
}
|
||||
}
|
||||
@@ -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),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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)),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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),
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user