feat: compact and adaptive playbutton card design

KRTirtho · Mar 11, 2023 · eeb8cab · eeb8cab
1 parent 1bdce9f
commit eeb8cab
Show file tree

Hide file tree

Showing 15 changed files with 391 additions and 573 deletions.
diff --git a/lib/components/album/album_card.dart b/lib/components/album/album_card.dart
@@ -33,11 +33,9 @@ enum AlbumType {
 
 class AlbumCard extends HookConsumerWidget {
   final Album album;
-  final PlaybuttonCardViewType viewType;
   const AlbumCard(
     this.album, {
     Key? key,
-    this.viewType = PlaybuttonCardViewType.square,
   }) : super(key: key);
 
   @override
@@ -65,7 +63,6 @@ class AlbumCard extends HookConsumerWidget {
           album.images,
           placeholder: ImagePlaceholder.collection,
         ),
-        viewType: viewType,
         margin: EdgeInsets.symmetric(horizontal: marginH.toDouble()),
         isPlaying: isPlaylistPlaying,
         isLoading: isPlaylistPlaying && playlist?.isLoading == true,

diff --git a/lib/components/genre/category_card.dart b/lib/components/genre/category_card.dart
@@ -1,12 +1,13 @@
-import 'package:flutter/gestures.dart';
+import 'dart:ui';
+
 import 'package:flutter/material.dart' hide Page;
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 
 import 'package:spotify/spotify.dart';
+import 'package:spotube/components/playlist/playlist_card.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
 import 'package:spotube/components/shared/waypoint.dart';
-import 'package:spotube/components/playlist/playlist_card.dart';
 import 'package:spotube/models/logger.dart';
 import 'package:spotube/services/queries/queries.dart';
 
@@ -27,60 +28,51 @@ class CategoryCard extends HookConsumerWidget {
       category.id!,
     );
 
-    final playlists = playlistQuery.pages
-        .expand(
-          (page) => page.items ?? const Iterable.empty(),
-        )
-        .toList();
-
-    return Column(
-      children: [
-        Padding(
-          padding: const EdgeInsets.all(8.0),
-          child: Row(
-            children: [
-              Text(
-                category.name ?? "Unknown",
-                style: Theme.of(context).textTheme.titleLarge,
-              ),
-            ],
+    if (playlistQuery.hasErrors && !playlistQuery.hasPageData) {
+      return const SizedBox.shrink();
+    }
+    final playlists = playlistQuery.pages.expand(
+      (page) {
+        return page.items?.where((i) => i != null) ?? const Iterable.empty();
+      },
+    ).toList();
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            category.name!,
+            style: Theme.of(context).textTheme.titleLarge,
           ),
-        ),
-        playlistQuery.hasPageError && !playlistQuery.hasPageData
-            ? Text("Something Went Wrong\n${playlistQuery.errors.first}")
-            : SizedBox(
-                height: 245,
-                child: ScrollConfiguration(
-                  behavior: ScrollConfiguration.of(context).copyWith(
-                    dragDevices: {
-                      PointerDeviceKind.touch,
-                      PointerDeviceKind.mouse,
-                    },
-                  ),
-                  child: Scrollbar(
-                    controller: scrollController,
-                    interactive: false,
-                    child: Waypoint(
-                      controller: scrollController,
-                      onTouchEdge: () {
-                        playlistQuery.fetchNext();
-                      },
-                      child: ListView(
-                        scrollDirection: Axis.horizontal,
-                        shrinkWrap: true,
-                        controller: scrollController,
-                        children: [
-                          ...playlists
-                              .map((playlist) => PlaylistCard(playlist)),
-                          if (playlistQuery.hasNextPage)
-                            const ShimmerPlaybuttonCard(count: 1),
-                        ],
-                      ),
-                    ),
-                  ),
+          ScrollConfiguration(
+            behavior: ScrollConfiguration.of(context).copyWith(
+              dragDevices: {
+                PointerDeviceKind.touch,
+                PointerDeviceKind.mouse,
+              },
+            ),
+            child: Waypoint(
+              controller: scrollController,
+              onTouchEdge: playlistQuery.fetchNext,
+              child: SingleChildScrollView(
+                scrollDirection: Axis.horizontal,
+                controller: scrollController,
+                padding: const EdgeInsets.symmetric(vertical: 8.0),
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    ...playlists.map((playlist) => PlaylistCard(playlist)),
+                    if (playlistQuery.hasNextPage)
+                      const ShimmerPlaybuttonCard(count: 1),
+                  ],
                 ),
               ),
-      ],
+            ),
+          ),
+        ],
+      ),
     );
   }
 }
diff --git a/lib/components/library/user_albums.dart b/lib/components/library/user_albums.dart
@@ -6,7 +6,6 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/album/album_card.dart';
-import 'package:spotube/components/shared/playbutton_card.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
 import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
 import 'package:spotube/hooks/use_breakpoint_value.dart';
@@ -28,9 +27,6 @@ class UserAlbums extends HookConsumerWidget {
       sm: 0,
       others: 20,
     );
-    final viewType = MediaQuery.of(context).size.width < 480
-        ? PlaybuttonCardViewType.list
-        : PlaybuttonCardViewType.square;
 
     final searchText = useState('');
 
@@ -82,7 +78,6 @@ class UserAlbums extends HookConsumerWidget {
                   alignment: WrapAlignment.center,
                   children: albums
                       .map((album) => AlbumCard(
-                            viewType: viewType,
                             TypeConversionUtils.simpleAlbum_X_Album(album),
                           ))
                       .toList(),

diff --git a/lib/components/library/user_playlists.dart b/lib/components/library/user_playlists.dart
@@ -7,7 +7,6 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/playlist/playlist_create_dialog.dart';
-import 'package:spotube/components/shared/playbutton_card.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
 import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
 import 'package:spotube/components/playlist/playlist_card.dart';
@@ -28,9 +27,6 @@ class UserPlaylists extends HookConsumerWidget {
       sm: 0,
       others: 20,
     );
-    final viewType = MediaQuery.of(context).size.width < 480
-        ? PlaybuttonCardViewType.list
-        : PlaybuttonCardViewType.square;
     final auth = ref.watch(AuthenticationNotifier.provider);
 
     final playlistsQuery = useQueries.playlist.ofMine(ref);
@@ -81,12 +77,7 @@ class UserPlaylists extends HookConsumerWidget {
 
     final children = [
       const PlaylistCreateDialog(),
-      ...playlists
-          .map((playlist) => PlaylistCard(
-                playlist,
-                viewType: viewType,
-              ))
-          .toList(),
+      ...playlists.map((playlist) => PlaylistCard(playlist)).toList(),
     ];
     return RefreshIndicator(
       onRefresh: playlistsQuery.refresh,

diff --git a/lib/components/playlist/playlist_card.dart b/lib/components/playlist/playlist_card.dart
@@ -13,11 +13,9 @@ import 'package:spotube/utils/type_conversion_utils.dart';
 
 class PlaylistCard extends HookConsumerWidget {
   final PlaylistSimple playlist;
-  final PlaybuttonCardViewType viewType;
   const PlaylistCard(
     this.playlist, {
     Key? key,
-    this.viewType = PlaybuttonCardViewType.square,
   }) : super(key: key);
   @override
   Widget build(BuildContext context, ref) {
@@ -43,9 +41,9 @@ class PlaylistCard extends HookConsumerWidget {
     final spotify = ref.watch(spotifyProvider);
 
     return PlaybuttonCard(
-      viewType: viewType,
       margin: EdgeInsets.symmetric(horizontal: marginH.toDouble()),
       title: playlist.name!,
+      description: playlist.description,
       imageUrl: TypeConversionUtils.image_X_UrlString(
         playlist.images,
         placeholder: ImagePlaceholder.collection,