feat(player): replace bg blur with gradient, proper fg color and alig…

…n title and artist name
KRTirtho · Apr 6, 2023 · 159f03e · 159f03e
1 parent 36396b7
commit 159f03e
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 135 deletions.
diff --git a/lib/components/player/player_controls.dart b/lib/components/player/player_controls.dart
@@ -11,10 +11,10 @@ import 'package:spotube/provider/playlist_queue_provider.dart';
 import 'package:spotube/utils/primitive_utils.dart';
 
 class PlayerControls extends HookConsumerWidget {
-  final Color? iconColor;
+  final Color? color;
 
   PlayerControls({
-    this.iconColor,
+    this.color,
     Key? key,
   }) : super(key: key);
 
@@ -109,21 +109,24 @@ class PlayerControls extends HookConsumerWidget {
                               ),
                             );
                           },
-                          activeColor: iconColor,
+                          activeColor: color,
+                          inactiveColor: color?.withOpacity(0.15),
                         ),
                       ),
                       Padding(
                         padding: const EdgeInsets.symmetric(
                           horizontal: 8.0,
                         ),
-                        child: Row(
-                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                          children: [
-                            Text(
-                              "$currentMinutes:$currentSeconds",
-                            ),
-                            Text("$totalMinutes:$totalSeconds"),
-                          ],
+                        child: DefaultTextStyle(
+                          style:
+                              theme.textTheme.bodySmall!.copyWith(color: color),
+                          child: Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                            children: [
+                              Text("$currentMinutes:$currentSeconds"),
+                              Text("$totalMinutes:$totalSeconds"),
+                            ],
+                          ),
                         ),
                       ),
                     ],
@@ -157,7 +160,7 @@ class PlayerControls extends HookConsumerWidget {
                     tooltip: "Previous track",
                     icon: Icon(
                       SpotubeIcons.skipBack,
-                      color: iconColor,
+                      color: color,
                     ),
                     onPressed: playlistNotifier.previous,
                   ),
@@ -171,7 +174,7 @@ class PlayerControls extends HookConsumerWidget {
                           )
                         : Icon(
                             playing ? SpotubeIcons.pause : SpotubeIcons.play,
-                            color: iconColor,
+                            color: color,
                           ),
                     onPressed: Actions.handler<PlayPauseIntent>(
                       context,
@@ -182,7 +185,7 @@ class PlayerControls extends HookConsumerWidget {
                     tooltip: "Next track",
                     icon: Icon(
                       SpotubeIcons.skipForward,
-                      color: iconColor,
+                      color: color,
                     ),
                     onPressed: playlistNotifier.next,
                   ),

diff --git a/lib/components/shared/heart_button.dart b/lib/components/shared/heart_button.dart
@@ -144,10 +144,7 @@ class PlaylistHeartButton extends HookConsumerWidget {
             ),
         [playlist.images]);
 
-    final color = usePaletteGenerator(
-      context,
-      titleImage,
-    ).dominantColor;
+    final color = usePaletteGenerator(titleImage).dominantColor;
 
     if (me.isLoading || !me.hasData) {
       return const CircularProgressIndicator();

diff --git a/lib/components/shared/page_window_title_bar.dart b/lib/components/shared/page_window_title_bar.dart
@@ -68,7 +68,7 @@ class _PageWindowTitleBarState extends State<PageWindowTitleBar> {
         automaticallyImplyLeading: widget.automaticallyImplyLeading,
         actions: [
           ...?widget.actions,
-          const WindowTitleBarButtons(),
+          WindowTitleBarButtons(foregroundColor: widget.foregroundColor),
         ],
         backgroundColor: widget.backgroundColor,
         foregroundColor: widget.foregroundColor,
@@ -86,7 +86,11 @@ class _PageWindowTitleBarState extends State<PageWindowTitleBar> {
 }
 
 class WindowTitleBarButtons extends HookWidget {
-  const WindowTitleBarButtons({Key? key}) : super(key: key);
+  final Color? foregroundColor;
+  const WindowTitleBarButtons({
+    Key? key,
+    this.foregroundColor,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -110,7 +114,7 @@ class WindowTitleBarButtons extends HookWidget {
       final theme = Theme.of(context);
       final colors = WindowButtonColors(
         normal: Colors.transparent,
-        iconNormal: theme.colorScheme.onBackground,
+        iconNormal: foregroundColor ?? theme.colorScheme.onBackground,
         mouseOver: theme.colorScheme.onBackground.withOpacity(0.1),
         mouseDown: theme.colorScheme.onBackground.withOpacity(0.2),
         iconMouseOver: theme.colorScheme.onBackground,
@@ -119,7 +123,7 @@ class WindowTitleBarButtons extends HookWidget {
 
       final closeColors = WindowButtonColors(
         normal: Colors.transparent,
-        iconNormal: theme.colorScheme.onBackground,
+        iconNormal: foregroundColor ?? theme.colorScheme.onBackground,
         mouseOver: Colors.red,
         mouseDown: Colors.red[800]!,
         iconMouseOver: Colors.white,

diff --git a/lib/components/shared/track_table/track_collection_view.dart b/lib/components/shared/track_table/track_collection_view.dart
@@ -66,10 +66,7 @@ class TrackCollectionView<T> extends HookConsumerWidget {
   Widget build(BuildContext context, ref) {
     final theme = Theme.of(context);
     final auth = ref.watch(AuthenticationNotifier.provider);
-    final color = usePaletteGenerator(
-      context,
-      titleImage,
-    ).dominantColor;
+    final color = usePaletteGenerator(titleImage).dominantColor;
 
     final List<Widget> buttons = [
       if (showShare)

diff --git a/lib/hooks/use_palette_color.dart b/lib/hooks/use_palette_color.dart
@@ -12,6 +12,7 @@ final _paletteColorState = StateProvider<PaletteColor>(
 
 PaletteColor usePaletteColor(String imageUrl, WidgetRef ref) {
   final context = useContext();
+  final theme = Theme.of(context);
   final paletteColor = ref.watch(_paletteColorState);
   final mounted = useIsMounted();
 
@@ -25,7 +26,7 @@ PaletteColor usePaletteColor(String imageUrl, WidgetRef ref) {
         ),
       );
       if (!mounted()) return;
-      final color = Theme.of(context).brightness == Brightness.light
+      final color = theme.brightness == Brightness.light
           ? palette.lightMutedColor ?? palette.lightVibrantColor
           : palette.darkMutedColor ?? palette.darkVibrantColor;
       if (color != null) {
@@ -38,10 +39,7 @@ PaletteColor usePaletteColor(String imageUrl, WidgetRef ref) {
   return paletteColor;
 }
 
-PaletteGenerator usePaletteGenerator(
-  BuildContext context,
-  String imageUrl,
-) {
+PaletteGenerator usePaletteGenerator(String imageUrl) {
   final palette = useState(PaletteGenerator.fromColors([]));
   final mounted = useIsMounted();