Download & Heart Actions added for PlayerView

lib/components/Player/Player.dart

@@ -5,6 +5,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:just_audio/just_audio.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:spotify/spotify.dart' hide Image;
+import 'package:spotube/components/Player/PlayerActions.dart';
 import 'package:spotube/components/Player/PlayerOverlay.dart';
 import 'package:spotube/components/Player/PlayerTrackDetails.dart';
 import 'package:spotube/components/Shared/DownloadTrackButton.dart';
@@ -141,40 +142,7 @@ class Player extends HookConsumerWidget {
                       },
                     ),
                   ),
-                  Row(
+                  const PlayerActions()
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    children: [
-                      DownloadTrackButton(
-                        track: playback.currentTrack,
-                      ),
-                      Consumer(builder: (context, ref, widget) {
-                        SpotifyApi spotifyApi = ref.watch(spotifyProvider);
-                        return FutureBuilder<bool>(
-                            future: playback.currentTrack?.id != null
-                                ? spotifyApi.tracks.me
-                                    .containsOne(playback.currentTrack!.id!)
-                                : Future.value(false),
-                            initialData: false,
-                            builder: (context, snapshot) {
-                              bool isLiked = snapshot.data ?? false;
-                              return IconButton(
-                                  icon: Icon(
-                                    !isLiked
-                                        ? Icons.favorite_outline_rounded
-                                        : Icons.favorite_rounded,
-                                    color: isLiked ? Colors.green : null,
-                                  ),
-                                  onPressed: () {
-                                    if (!isLiked &&
-                                        playback.currentTrack?.id != null) {
-                                      spotifyApi.tracks.me
-                                          .saveOne(playback.currentTrack!.id!);
-                                    }
-                                  });
-                            });
-                      }),
-                    ],
-                  ),
                 ],
               ),
             )

lib/components/Player/PlayerActions.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/components/Shared/DownloadTrackButton.dart';
+import 'package:spotube/provider/Playback.dart';
+import 'package:spotube/provider/SpotifyDI.dart';
+
+class PlayerActions extends HookConsumerWidget {
+  final MainAxisAlignment mainAxisAlignment;
+  const PlayerActions({
+    this.mainAxisAlignment = MainAxisAlignment.center,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final SpotifyApi spotifyApi = ref.watch(spotifyProvider);
+    final Playback playback = ref.watch(playbackProvider);
+    return Row(
+      mainAxisAlignment: mainAxisAlignment,
+      children: [
+        DownloadTrackButton(
+          track: playback.currentTrack,
+        ),
+        FutureBuilder<bool>(
+            future: playback.currentTrack?.id != null
+                ? spotifyApi.tracks.me.containsOne(playback.currentTrack!.id!)
+                : Future.value(false),
+            initialData: false,
+            builder: (context, snapshot) {
+              bool isLiked = snapshot.data ?? false;
+              return IconButton(
+                  icon: Icon(
+                    !isLiked
+                        ? Icons.favorite_outline_rounded
+                        : Icons.favorite_rounded,
+                    color: isLiked ? Colors.green : null,
+                  ),
+                  onPressed: () {
+                    if (!isLiked && playback.currentTrack?.id != null) {
+                      spotifyApi.tracks.me.saveOne(playback.currentTrack!.id!);
+                    }
+                  });
+            }),
+      ],
+    );
+  }
+}

lib/components/Player/PlayerOverlay.dart

@@ -50,14 +50,17 @@ class PlayerOverlay extends HookConsumerWidget {
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
               Expanded(
-                child: GestureDetector(
+                child: MouseRegion(
-                  onTap: () => GoRouter.of(context).push(
+                  cursor: SystemMouseCursors.click,
-                    "/player",
+                  child: GestureDetector(
-                    extra: paletteColor,
+                    onTap: () => GoRouter.of(context).push(
-                  ),
+                      "/player",
-                  child: PlayerTrackDetails(
+                      extra: paletteColor,
-                    albumArt: albumArt,
+                    ),
-                    color: paletteColor.bodyTextColor,
+                    child: PlayerTrackDetails(
+                      albumArt: albumArt,
+                      color: paletteColor.bodyTextColor,
+                    ),
                   ),
                 ),
               ),

lib/components/Player/PlayerView.dart

@@ -4,6 +4,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:palette_generator/palette_generator.dart';
+import 'package:spotube/components/Player/PlayerActions.dart';
 import 'package:spotube/components/Player/PlayerControls.dart';
 import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
 import 'package:spotube/helpers/artists-to-clickable-artists.dart';
@@ -49,7 +50,7 @@ class PlayerView extends HookConsumerWidget {
         ),
         backgroundColor: paletteColor.color,
         body: Column(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          // mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
             Padding(
               padding: const EdgeInsets.all(10),
@@ -73,6 +74,7 @@ class PlayerView extends HookConsumerWidget {
                 ],
               ),
             ),
+            const Spacer(),
             HookBuilder(builder: (context) {
               final ticker = useSingleTickerProvider();
               final controller = useAnimationController(
@@ -91,6 +93,10 @@ class PlayerView extends HookConsumerWidget {
                 ),
               );
             }),
+            const Spacer(),
+            const PlayerActions(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            ),
             PlayerControls(iconColor: paletteColor.bodyTextColor),
           ],
         ),