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