bvandeusen
a3c0aed63e
Same pattern as album + artist detail. PlaylistDetailScreen accepts optional Playlist seed via go_router extra. While playlistDetailProvider is still resolving, render the header (description if any + track count) plus a "loading tracks…" inline spinner instead of an opaque full-screen CircularProgressIndicator. The body fills in when tracks arrive via drift watch re-emit. Routing reads s.extra as Playlist. PlaylistCard + PlaylistsListScreen pass the playlist via extra. Surfaces with no seed available (deep links etc.) fall back to the original full- screen spinner. Track row rendering already uses ListView.builder so visible row count was never the bottleneck — the wait was for the detail fetch itself. Header-on-tap is the win that makes the screen feel snappy.
80 lines
2.9 KiB
Dart
80 lines
2.9 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
|
|
import '../../models/playlist.dart';
|
|
import '../../shared/widgets/server_image.dart';
|
|
import '../../theme/theme_extension.dart';
|
|
|
|
/// Mirrors the web PlaylistCard. ~176dp wide, square cover (~144dp),
|
|
/// name + optional system-variant badge below. Tap pushes
|
|
/// `/playlists/{id}`.
|
|
class PlaylistCard extends StatelessWidget {
|
|
const PlaylistCard({super.key, required this.playlist});
|
|
|
|
final Playlist playlist;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final fs = Theme.of(context).extension<FabledSwordTheme>()!;
|
|
return SizedBox(
|
|
width: 176,
|
|
child: Material(
|
|
color: Colors.transparent,
|
|
child: InkWell(
|
|
onTap: () =>
|
|
context.push('/playlists/${playlist.id}', extra: playlist),
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(6),
|
|
child: Container(
|
|
width: 144,
|
|
height: 144,
|
|
color: fs.slate,
|
|
// coverUrl is deterministic per playlist (see
|
|
// CachedPlaylistAdapter.toRef). When the server's
|
|
// collage isn't built yet, ServerImage's
|
|
// errorBuilder shows the queue_music icon over the
|
|
// slate background.
|
|
child: playlist.coverUrl.isEmpty
|
|
? Icon(Icons.queue_music, color: fs.ash, size: 56)
|
|
: ServerImage(
|
|
url: playlist.coverUrl,
|
|
fit: BoxFit.cover,
|
|
fallback:
|
|
Icon(Icons.queue_music, color: fs.ash, size: 56),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
playlist.name,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(color: fs.parchment, fontSize: 14),
|
|
),
|
|
if (playlist.isSystem)
|
|
Padding(
|
|
padding: const EdgeInsets.only(top: 2),
|
|
child: Container(
|
|
padding:
|
|
const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
|
decoration: BoxDecoration(
|
|
color: fs.iron,
|
|
borderRadius: BorderRadius.circular(4),
|
|
),
|
|
child: Text(
|
|
playlist.systemVariant!.replaceAll('_', ' '),
|
|
style: TextStyle(color: fs.accent, fontSize: 11),
|
|
),
|
|
),
|
|
),
|
|
]),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|