fix(player-overlay): flickering when a track is changed or navigated to another page

lib/components/Album/AlbumView.dart

@@ -5,6 +5,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Shared/HeartButton.dart';
 import 'package:spotube/components/Shared/TrackCollectionView.dart';
+import 'package:spotube/hooks/useBreakpoints.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 import 'package:spotube/models/CurrentPlaylist.dart';
 import 'package:spotube/provider/Auth.dart';
@@ -52,6 +53,8 @@ class AlbumView extends HookConsumerWidget {
         () => TypeConversionUtils.image_X_UrlString(album.images),
         [album.images]);
 
+    final breakpoint = useBreakpoints();
+
     return TrackCollectionView(
       id: album.id!,
       isPlaying:
@@ -61,6 +64,7 @@ class AlbumView extends HookConsumerWidget {
       tracksSnapshot: tracksSnapshot,
       album: album,
       routePath: "/album/${album.id}",
+      bottomSpace: breakpoint.isLessThanOrEqualTo(Breakpoints.md),
       onPlay: ([track]) {
         if (tracksSnapshot.asData?.value != null) {
           playPlaylist(

lib/components/Player/PlayerControls.dart

@@ -20,11 +20,9 @@ class PlayerControls extends HookConsumerWidget {
   Widget build(BuildContext context, ref) {
     final Playback playback = ref.watch(playbackProvider);
 
-    final onNext = useNextTrack(playback);
+    final onNext = useNextTrack(ref);
-
+    final onPrevious = usePreviousTrack(ref);
-    final onPrevious = usePreviousTrack(playback);
+    final _playOrPause = useTogglePlayPause(ref);
-
-    final _playOrPause = useTogglePlayPause(playback);
 
     final duration = playback.currentDuration;
 

lib/components/Player/PlayerOverlay.dart

@@ -6,7 +6,6 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotube/components/Player/PlayerTrackDetails.dart';
 import 'package:spotube/hooks/playback.dart';
 import 'package:spotube/hooks/useBreakpoints.dart';
-import 'package:spotube/hooks/useIsCurrentRoute.dart';
 import 'package:spotube/hooks/usePaletteColor.dart';
 import 'package:spotube/provider/Playback.dart';
 
@@ -21,24 +20,24 @@ class PlayerOverlay extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, ref) {
     final breakpoint = useBreakpoints();
-    final isCurrentRoute = useIsCurrentRoute("/");
     final paletteColor = usePaletteColor(albumArt, ref);
-    final playback = ref.watch(playbackProvider);
 
-    if (isCurrentRoute == false) {
+    var isHome = GoRouter.of(context).location == "/";
-      return Container();
+    final isAllowedPage = ["/playlist/", "/album/"].any(
-    }
+      (el) => GoRouter.of(context).location.startsWith(el),
+    );
 
-    final onNext = useNextTrack(playback);
+    final onNext = useNextTrack(ref);
+    final onPrevious = usePreviousTrack(ref);
+    final _playOrPause = useTogglePlayPause(ref);
 
-    final onPrevious = usePreviousTrack(playback);
+    if (!isHome && !isAllowedPage) return Container();
 
-    final _playOrPause = useTogglePlayPause(playback);
+    return AnimatedPositioned(
-
+      duration: const Duration(milliseconds: 2500),
-    return Positioned(
+      right: (breakpoint.isMd && !isAllowedPage ? 10 : 5),
-      right: (breakpoint.isMd ? 10 : 5),
+      left: (breakpoint.isSm || isAllowedPage ? 5 : 90),
-      left: (breakpoint.isSm ? 5 : 80),
+      bottom: (breakpoint.isSm && !isAllowedPage ? 63 : 10),
-      bottom: (breakpoint.isSm ? 63 : 10),
       child: GestureDetector(
         onVerticalDragEnd: (details) {
           int sensitivity = 8;
@@ -88,14 +87,18 @@ class PlayerOverlay extends HookConsumerWidget {
                             onPressed: () {
                               onPrevious();
                             }),
-                        IconButton(
+                        Consumer(
+                          builder: (context, ref, _) {
+                            return IconButton(
                               icon: Icon(
-                            playback.isPlaying
+                                ref.read(playbackProvider).isPlaying
                                     ? Icons.pause_rounded
                                     : Icons.play_arrow_rounded,
                               ),
                               color: paletteColor.bodyTextColor,
                               onPressed: _playOrPause,
+                            );
+                          },
                         ),
                         IconButton(
                           icon: const Icon(Icons.skip_next_rounded),

lib/components/Playlist/PlaylistView.dart

@@ -5,6 +5,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotube/components/Shared/HeartButton.dart';
 import 'package:spotube/components/Shared/TrackCollectionView.dart';
+import 'package:spotube/hooks/useBreakpoints.dart';
 import 'package:spotube/hooks/usePaletteColor.dart';
 import 'package:spotube/models/CurrentPlaylist.dart';
 import 'package:spotube/models/Logger.dart';
@@ -51,6 +52,8 @@ class PlaylistView extends HookConsumerWidget {
     final isPlaylistPlaying =
         playback.playlist?.id != null && playback.playlist?.id == playlist.id;
 
+    final breakpoint = useBreakpoints();
+
     final meSnapshot = ref.watch(currentUserQuery);
     final tracksSnapshot = ref.watch(playlistTracksQuery(playlist.id!));
 
@@ -81,6 +84,7 @@ class PlaylistView extends HookConsumerWidget {
           );
         }
       },
+      bottomSpace: breakpoint.isLessThanOrEqualTo(Breakpoints.md),
       showShare: playlist.id != "user-liked-tracks",
       routePath: "/playlist/${playlist.id}",
       onShare: () {

lib/components/Shared/TrackCollectionView.dart

@@ -28,6 +28,7 @@ class TrackCollectionView extends HookConsumerWidget {
 
   final bool showShare;
   final bool isOwned;
+  final bool bottomSpace;
 
   final String routePath;
   TrackCollectionView({
@@ -44,6 +45,7 @@ class TrackCollectionView extends HookConsumerWidget {
     this.description,
     this.showShare = true,
     this.isOwned = false,
+    this.bottomSpace = false,
     Key? key,
   }) : super(key: key);
 
@@ -233,6 +235,7 @@ class TrackCollectionView extends HookConsumerWidget {
                     onTrackPlayButtonPressed: onPlay,
                     playlistId: id,
                     userPlaylist: isOwned,
+                    bottomSpace: bottomSpace,
                   );
                 },
                 error: (error, _) =>

lib/components/Shared/TracksTableView.dart

@@ -16,6 +16,7 @@ class TracksTableView extends HookConsumerWidget {
   final List<Track> tracks;
   final bool userPlaylist;
   final String? playlistId;
+  final bool bottomSpace;
 
   final Widget? heading;
   const TracksTableView(
@@ -25,6 +26,7 @@ class TracksTableView extends HookConsumerWidget {
     this.userPlaylist = false,
     this.playlistId,
     this.heading,
+    this.bottomSpace = false,
   }) : super(key: key);
 
   @override
@@ -47,7 +49,8 @@ class TracksTableView extends HookConsumerWidget {
     );
 
     return SliverList(
-      delegate: SliverChildListDelegate([
+      delegate: SliverChildListDelegate(
+        [
           if (heading != null) heading!,
           Row(
             children: [
@@ -195,8 +198,10 @@ class TracksTableView extends HookConsumerWidget {
                 },
               ),
             );
-        }).toList()
+          }).toList(),
-      ]),
+          if (bottomSpace) const SizedBox(height: 70),
+        ],
+      ),
     );
   }
 }

lib/hooks/playback.dart

@@ -1,12 +1,14 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/models/Logger.dart';
 import 'package:spotube/provider/Playback.dart';
 
 final logger = getLogger("PlaybackHook");
 
-Future<void> Function() useNextTrack(Playback playback) {
+Future<void> Function() useNextTrack(WidgetRef ref) {
   return () async {
     try {
+      final playback = ref.read(playbackProvider);
       await playback.player.pause();
       await playback.player.seek(Duration.zero);
       playback.seekForward();
@@ -16,9 +18,10 @@ Future<void> Function() useNextTrack(Playback playback) {
   };
 }
 
-Future<void> Function() usePreviousTrack(Playback playback) {
+Future<void> Function() usePreviousTrack(WidgetRef ref) {
   return () async {
     try {
+      final playback = ref.read(playbackProvider);
       await playback.player.pause();
       await playback.player.seek(Duration.zero);
       playback.seekBackward();
@@ -28,9 +31,10 @@ Future<void> Function() usePreviousTrack(Playback playback) {
   };
 }
 
-Future<void> Function([dynamic]) useTogglePlayPause(Playback playback) {
+Future<void> Function([dynamic]) useTogglePlayPause(WidgetRef ref) {
   return ([key]) async {
     try {
+      final playback = ref.read(playbackProvider);
       if (playback.track == null) {
         return;
       } else if (playback.track != null &&