feat(artist): modularize page and add wikipedia section

KRTirtho · Nov 22, 2023 · 2a69886 · 2a69886
1 parent 4511a0b
commit 2a69886
Show file tree

Hide file tree

Showing 13 changed files with 693 additions and 455 deletions.
diff --git a/lib/collections/spotube_icons.dart b/lib/collections/spotube_icons.dart
@@ -107,4 +107,5 @@ abstract class SpotubeIcons {
   static const eye = FeatherIcons.eye;
   static const noEye = FeatherIcons.eyeOff;
   static const normalize = FeatherIcons.barChart2;
+  static const wikipedia = SimpleIcons.wikipedia;
 }
diff --git a/lib/components/library/user_playlists.dart b/lib/components/library/user_playlists.dart
@@ -14,6 +14,7 @@ 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';
 import 'package:spotube/components/shared/waypoint.dart';
+import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
@@ -120,31 +121,33 @@ class UserPlaylists extends HookConsumerWidget {
               const SliverToBoxAdapter(
                 child: SizedBox(height: 10),
               ),
-              SliverGrid.builder(
-                itemCount: playlists.length + 1,
-                gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
-                  maxCrossAxisExtent: 200,
-                  mainAxisExtent: DesktopTools.platform.isMobile ? 225 : 250,
-                  crossAxisSpacing: 8,
-                  mainAxisSpacing: 8,
-                ),
-                itemBuilder: (context, index) {
-                  if (index == playlists.length) {
-                    if (!playlistsQuery.hasNextPage) {
-                      return const SizedBox.shrink();
-                    }
+              SliverLayoutBuilder(builder: (context, constrains) {
+                return SliverGrid.builder(
+                  itemCount: playlists.length + 1,
+                  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+                    maxCrossAxisExtent: 200,
+                    mainAxisExtent: constrains.smAndDown ? 225 : 250,
+                    crossAxisSpacing: 8,
+                    mainAxisSpacing: 8,
+                  ),
+                  itemBuilder: (context, index) {
+                    if (index == playlists.length) {
+                      if (!playlistsQuery.hasNextPage) {
+                        return const SizedBox.shrink();
+                      }
 
-                    return Waypoint(
-                      controller: controller,
-                      isGrid: true,
-                      onTouchEdge: playlistsQuery.fetchNext,
-                      child: const ShimmerPlaybuttonCard(count: 1),
-                    );
-                  }
+                      return Waypoint(
+                        controller: controller,
+                        isGrid: true,
+                        onTouchEdge: playlistsQuery.fetchNext,
+                        child: const ShimmerPlaybuttonCard(count: 1),
+                      );
+                    }
 
-                  return PlaylistCard(playlists[index]);
-                },
-              )
+                    return PlaylistCard(playlists[index]);
+                  },
+                );
+              })
             ],
           ),
         ),

diff --git a/lib/extensions/color.dart b/lib/extensions/color.dart
@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+extension ColorAlterer on Color {
+  Color darken(double amount) {
+    assert(amount >= 0 && amount <= 1);
+    final hsl = HSLColor.fromColor(this);
+    final hslDark = hsl.withLightness((hsl.lightness - amount).clamp(0.0, 1.0));
+    return hslDark.toColor();
+  }
+
+  Color lighten(double amount) {
+    assert(amount >= 0 && amount <= 1);
+    final hsl = HSLColor.fromColor(this);
+    final hslLight =
+        hsl.withLightness((hsl.lightness + amount).clamp(0.0, 1.0));
+    return hslLight.toColor();
+  }
+
+  bool isLight() {
+    final luminance = computeLuminance();
+    return luminance > 0.5;
+  }
+
+  bool isDark() {
+    final luminance = computeLuminance();
+    return luminance <= 0.5;
+  }
+}
diff --git a/lib/extensions/constrains.dart b/lib/extensions/constrains.dart
@@ -1,3 +1,4 @@
+import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 
 // ignore: constant_identifier_names
@@ -9,6 +10,29 @@ const Breakpoints = (
   xl: 1280.0,
 );
 
+extension SliverBreakpoints on SliverConstraints {
+  bool get isXs => crossAxisExtent <= Breakpoints.xs;
+  bool get isSm =>
+      crossAxisExtent > Breakpoints.xs && crossAxisExtent <= Breakpoints.sm;
+  bool get isMd =>
+      crossAxisExtent > Breakpoints.sm && crossAxisExtent <= Breakpoints.md;
+  bool get isLg =>
+      crossAxisExtent > Breakpoints.md && crossAxisExtent <= Breakpoints.lg;
+  bool get isXl =>
+      crossAxisExtent > Breakpoints.lg && crossAxisExtent <= Breakpoints.xl;
+  bool get is2Xl => crossAxisExtent > Breakpoints.xl;
+
+  bool get smAndUp => isSm || isMd || isLg || isXl || is2Xl;
+  bool get mdAndUp => isMd || isLg || isXl || is2Xl;
+  bool get lgAndUp => isLg || isXl || is2Xl;
+  bool get xlAndUp => isXl || is2Xl;
+
+  bool get smAndDown => isXs || isSm;
+  bool get mdAndDown => isXs || isSm || isMd;
+  bool get lgAndDown => isXs || isSm || isMd || isLg;
+  bool get xlAndDown => isXs || isSm || isMd || isLg || isXl;
+}
+
 extension ContainerBreakpoints on BoxConstraints {
   bool get isXs => biggest.width <= Breakpoints.xs;
   bool get isSm =>