feat: Implement playlist selection screen with dynamic loading, error handling, and interactive playlist cards.

This commit is contained in:
Michael committed 2026-03-26 20:39:36 +01:00
1 parent 887b44b29d
commit d3f6d3a65e
1 file changed
+96 -92
@@ -21,6 +21,7 @@ class PlaylistSelectionScreen extends ConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final currentUser = ref.watch(authProvider).currentUser; final currentUser = ref.watch(authProvider).currentUser;
final playlistsAsync = ref.watch(playlistsProvider); final playlistsAsync = ref.watch(playlistsProvider);
final scrollController = ScrollController();
return Scaffold( return Scaffold(
extendBodyBehindAppBar: true, extendBodyBehindAppBar: true,
@@ -37,8 +38,8 @@ class PlaylistSelectionScreen extends ConsumerWidget {
actions: [ actions: [
if (currentUser?.isAdmin ?? false) if (currentUser?.isAdmin ?? false)
IconButton( IconButton(
icon: icon: const Icon(Icons.admin_panel_settings,
const Icon(Icons.admin_panel_settings, color: AppColors.textSecondary), color: AppColors.textSecondary),
onPressed: () => context.go('/admin'), onPressed: () => context.go('/admin'),
tooltip: 'Admin Panel', tooltip: 'Admin Panel',
), ),
@@ -109,101 +110,104 @@ class PlaylistSelectionScreen extends ConsumerWidget {
), ),
), ),
), ),
// Content // Content - Explicitly filled to provide bounded constraints
playlistsAsync.when( Positioned.fill(
loading: () => const Center( child: playlistsAsync.when(
child: CircularProgressIndicator(color: AppColors.primary), loading: () => const Center(
), child: CircularProgressIndicator(color: AppColors.primary),
error: (error, stack) => Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.error_outline,
size: 64, color: AppColors.error),
const SizedBox(height: 16),
Text(
'Error loading playlists',
style: GoogleFonts.outfit(
fontSize: 18,
color: AppColors.textSecondary,
),
),
const SizedBox(height: 8),
ElevatedButton(
onPressed: () => ref.refresh(playlistsProvider),
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.primary,
foregroundColor: AppColors.textPrimary,
),
child: Text('Retry', style: GoogleFonts.inter()),
),
],
), ),
), error: (error, stack) => Center(
data: (playlists) { child: Column(
if (playlists.isEmpty) { mainAxisAlignment: MainAxisAlignment.center,
return Center( children: [
child: Column( const Icon(Icons.error_outline,
mainAxisAlignment: MainAxisAlignment.center, size: 64, color: AppColors.error),
children: [ const SizedBox(height: 16),
const Icon( Text(
Icons.playlist_remove, 'Error loading playlists',
size: 64, style: GoogleFonts.outfit(
color: Colors.white24, fontSize: 18,
color: AppColors.textSecondary,
), ),
const SizedBox(height: 16), ),
Text( const SizedBox(height: 8),
'No playlists available', ElevatedButton(
style: GoogleFonts.outfit( onPressed: () => ref.refresh(playlistsProvider),
fontSize: 18, style: ElevatedButton.styleFrom(
color: Colors.white60, backgroundColor: AppColors.primary,
), foregroundColor: AppColors.textPrimary,
), ),
const SizedBox(height: 8), child: Text('Retry', style: GoogleFonts.inter()),
Text( ),
currentUser?.isAdmin ?? false ],
? 'Add playlists in Admin Panel'
: 'Contact administrator',
style: GoogleFonts.inter(
fontSize: 14,
color: Colors.white38,
),
),
],
),
);
}
return GridView.builder(
padding: const EdgeInsets.fromLTRB(
48,
100,
48,
48,
), // More padding for cinematic feel
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount:
MediaQuery.of(context).size.width > 1200 ? 4 : 3,
crossAxisSpacing: 32,
mainAxisSpacing: 32,
childAspectRatio: 1.4,
), ),
itemCount: playlists.length, ),
itemBuilder: (context, index) { data: (playlists) {
final playlist = playlists[index]; if (playlists.isEmpty) {
return _PlaylistCard( return Center(
playlist: playlist, child: Column(
onTap: () { mainAxisAlignment: MainAxisAlignment.center,
// Update current selected playlist provider first children: [
ref.read(selectedPlaylistProvider.notifier).state = const Icon(
playlist; Icons.playlist_remove,
// Then navigate to dashboard size: 64,
context.go('/dashboard'); color: Colors.white24,
}, ),
const SizedBox(height: 16),
Text(
'No playlists available',
style: GoogleFonts.outfit(
fontSize: 18,
color: Colors.white60,
),
),
const SizedBox(height: 8),
Text(
currentUser?.isAdmin ?? false
? 'Add playlists in Admin Panel'
: 'Contact administrator',
style: GoogleFonts.inter(
fontSize: 14,
color: Colors.white38,
),
),
],
),
); );
}, }
);
}, // GridView needs a controller in some Flutter Web environments
// to avoid NaN scroll offset issues during initial layout
return GridView.builder(
controller: scrollController,
padding: const EdgeInsets.fromLTRB(
48,
120, // Increased top padding for AppBar
48,
48,
),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount:
MediaQuery.of(context).size.width > 1200 ? 4 : 3,
crossAxisSpacing: 32,
mainAxisSpacing: 32,
childAspectRatio: 1.4,
),
itemCount: playlists.length,
itemBuilder: (context, index) {
final playlist = playlists[index];
return _PlaylistCard(
playlist: playlist,
onTap: () {
ref.read(selectedPlaylistProvider.notifier).state =
playlist;
context.go('/dashboard');
},
);
},
);
},
),
), ),
], ],
), ),