fix(performance): always running marquee text causes high GPU usage #175

and UserArtist overflow on smaller displays
KRTirtho · Aug 18, 2022 · a23ce61 · a23ce61
1 parent e48b67c
commit a23ce61
Show file tree

Hide file tree

Showing 7 changed files with 232 additions and 188 deletions.
diff --git a/lib/components/Artist/ArtistCard.dart b/lib/components/Artist/ArtistCard.dart
@@ -2,6 +2,7 @@ import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:spotify/spotify.dart';
+import 'package:spotube/components/Shared/HoverBuilder.dart';
 import 'package:spotube/components/Shared/SpotubeMarqueeText.dart';
 
 class ArtistCard extends StatelessWidget {
@@ -15,52 +16,57 @@ class ArtistCard extends StatelessWidget {
             false)
         ? artist.images!.first.url!
         : "https://avatars.dicebear.com/api/open-peeps/${artist.id}.png?b=%231ed760&r=50&flip=1&translateX=3&translateY=-6");
-    return InkWell(
-      onTap: () {
-        GoRouter.of(context).push("/artist/${artist.id}");
-      },
-      borderRadius: BorderRadius.circular(10),
-      child: Ink(
-        width: 200,
-        decoration: BoxDecoration(
-          color: Theme.of(context).backgroundColor,
-          borderRadius: BorderRadius.circular(8),
-          boxShadow: [
-            BoxShadow(
-                blurRadius: 10,
-                offset: const Offset(0, 3),
-                spreadRadius: 5,
-                color: Theme.of(context).shadowColor)
-          ],
-        ),
-        child: Padding(
-          padding: const EdgeInsets.all(15),
-          child: Column(
-            children: [
-              CircleAvatar(
-                maxRadius: 80,
-                minRadius: 20,
-                backgroundImage: backgroundImage,
+    return SizedBox(
+      height: 240,
+      width: 200,
+      child: InkWell(
+        onTap: () {
+          GoRouter.of(context).push("/artist/${artist.id}");
+        },
+        borderRadius: BorderRadius.circular(10),
+        child: HoverBuilder(builder: (context, isHovering) {
+          return Ink(
+            width: 200,
+            decoration: BoxDecoration(
+              color: Theme.of(context).backgroundColor,
+              borderRadius: BorderRadius.circular(8),
+              boxShadow: [
+                BoxShadow(
+                    blurRadius: 10,
+                    offset: const Offset(0, 3),
+                    spreadRadius: 5,
+                    color: Theme.of(context).shadowColor)
+              ],
+            ),
+            child: Padding(
+              padding: const EdgeInsets.all(15),
+              child: Column(
+                children: [
+                  CircleAvatar(
+                    maxRadius: 80,
+                    minRadius: 20,
+                    backgroundImage: backgroundImage,
+                  ),
+                  SizedBox(
+                    height: 20,
+                    child: SpotubeMarqueeText(
+                      text: artist.name!,
+                      style: Theme.of(context).textTheme.bodyLarge!.copyWith(
+                            fontWeight: FontWeight.bold,
+                          ),
+                      minStartLength: 15,
+                      isHovering: isHovering,
+                    ),
+                  ),
+                  Text(
+                    "Artist",
+                    style: Theme.of(context).textTheme.subtitle1,
+                  )
+                ],
               ),
-              SizedBox(
-                height: 30,
-                child: artist.name!.length > 15
-                    ? SpotubeMarqueeText(
-                        text: artist.name!,
-                        style: Theme.of(context).textTheme.headline5!,
-                      )
-                    : Text(
-                        artist.name!,
-                        style: Theme.of(context).textTheme.headline5,
-                      ),
-              ),
-              Text(
-                "Artist",
-                style: Theme.of(context).textTheme.subtitle1,
-              )
-            ],
-          ),
-        ),
+            ),
+          );
+        }),
       ),
     );
   }

diff --git a/lib/components/Library/UserArtists.dart b/lib/components/Library/UserArtists.dart
@@ -31,8 +31,8 @@ class UserArtists extends HookConsumerWidget {
 
     return PagedGridView(
       gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
-        maxCrossAxisExtent: 250,
-        childAspectRatio: 9 / 11,
+        maxCrossAxisExtent: 200,
+        mainAxisExtent: 250,
         crossAxisSpacing: 20,
         mainAxisSpacing: 20,
       ),

diff --git a/lib/components/Lyrics/SyncedLyrics.dart b/lib/components/Lyrics/SyncedLyrics.dart
@@ -157,17 +157,12 @@ class SyncedLyrics extends HookConsumerWidget {
                             child: Stack(
                               children: [
                                 Center(
-                                  child: playback.track?.name != null &&
-                                          playback.track!.name!.length > 29
-                                      ? SpotubeMarqueeText(
-                                          text: playback.track?.name ??
-                                              "Not Playing",
-                                          style: headlineTextStyle,
-                                        )
-                                      : Text(
-                                          playback.track?.name ?? "Not Playing",
-                                          style: headlineTextStyle,
-                                        ),
+                                  child: SpotubeMarqueeText(
+                                    text: playback.track?.name ?? "Not Playing",
+                                    style: headlineTextStyle,
+                                    minStartLength: 29,
+                                    isHovering: true,
+                                  ),
                                 ),
                                 Positioned.fill(
                                   child: Align(

diff --git a/lib/components/Player/PlayerView.dart b/lib/components/Player/PlayerView.dart
@@ -82,22 +82,16 @@ class PlayerView extends HookConsumerWidget {
                       children: [
                         SizedBox(
                           height: 30,
-                          child: currentTrack?.name != null &&
-                                  currentTrack!.name!.length > 29
-                              ? SpotubeMarqueeText(
-                                  text: currentTrack.name ?? "Not playing",
-                                  style: Theme.of(context)
-                                      .textTheme
-                                      .headline5
-                                      ?.copyWith(
-                                        fontWeight: FontWeight.bold,
-                                        color: paletteColor.titleTextColor,
-                                      ),
-                                )
-                              : Text(
-                                  currentTrack?.name ?? "Not Playing",
-                                  style: Theme.of(context).textTheme.headline5,
-                                ),
+                          child: SpotubeMarqueeText(
+                            text: currentTrack?.name ?? "Not playing",
+                            style:
+                                Theme.of(context).textTheme.headline5?.copyWith(
+                                      fontWeight: FontWeight.bold,
+                                      color: paletteColor.titleTextColor,
+                                    ),
+                            isHovering: true,
+                            minStartLength: 29,
+                          ),
                         ),
                         TypeConversionUtils.artists_X_ClickableArtists(
                           currentTrack?.artists ?? [],

diff --git a/lib/components/Shared/HoverBuilder.dart b/lib/components/Shared/HoverBuilder.dart
@@ -0,0 +1,25 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+class HoverBuilder extends HookWidget {
+  final Widget Function(BuildContext context, bool isHovering) builder;
+  const HoverBuilder({
+    required this.builder,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final hovering = useState(false);
+
+    return MouseRegion(
+      onEnter: (_) {
+        if (!hovering.value) hovering.value = true;
+      },
+      onExit: (_) {
+        if (hovering.value) hovering.value = false;
+      },
+      child: builder(context, hovering.value),
+    );
+  }
+}