fix(player-overlay): flickering when a track is changed or navigated …

…to another page
KRTirtho · Aug 14, 2022 · e48b67c · e48b67c
1 parent 2818ed5
commit e48b67c
Show file tree

Hide file tree

Showing 7 changed files with 183 additions and 162 deletions.
diff --git a/lib/components/Album/AlbumView.dart b/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(

diff --git a/lib/components/Player/PlayerControls.dart b/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 onPrevious = usePreviousTrack(playback);
-
-    final _playOrPause = useTogglePlayPause(playback);
+    final onNext = useNextTrack(ref);
+    final onPrevious = usePreviousTrack(ref);
+    final _playOrPause = useTogglePlayPause(ref);
 
     final duration = playback.currentDuration;
 

diff --git a/lib/components/Player/PlayerOverlay.dart b/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) {
-      return Container();
-    }
-
-    final onNext = useNextTrack(playback);
+    var isHome = GoRouter.of(context).location == "/";
+    final isAllowedPage = ["/playlist/", "/album/"].any(
+      (el) => GoRouter.of(context).location.startsWith(el),
+    );
 
-    final onPrevious = usePreviousTrack(playback);
+    final onNext = useNextTrack(ref);
+    final onPrevious = usePreviousTrack(ref);
+    final _playOrPause = useTogglePlayPause(ref);
 
-    final _playOrPause = useTogglePlayPause(playback);
+    if (!isHome && !isAllowedPage) return Container();
 
-    return Positioned(
-      right: (breakpoint.isMd ? 10 : 5),
-      left: (breakpoint.isSm ? 5 : 80),
-      bottom: (breakpoint.isSm ? 63 : 10),
+    return AnimatedPositioned(
+      duration: const Duration(milliseconds: 2500),
+      right: (breakpoint.isMd && !isAllowedPage ? 10 : 5),
+      left: (breakpoint.isSm || isAllowedPage ? 5 : 90),
+      bottom: (breakpoint.isSm && !isAllowedPage ? 63 : 10),
       child: GestureDetector(
         onVerticalDragEnd: (details) {
           int sensitivity = 8;
@@ -88,14 +87,18 @@ class PlayerOverlay extends HookConsumerWidget {
                             onPressed: () {
                               onPrevious();
                             }),
-                        IconButton(
-                          icon: Icon(
-                            playback.isPlaying
-                                ? Icons.pause_rounded
-                                : Icons.play_arrow_rounded,
-                          ),
-                          color: paletteColor.bodyTextColor,
-                          onPressed: _playOrPause,
+                        Consumer(
+                          builder: (context, ref, _) {
+                            return IconButton(
+                              icon: Icon(
+                                ref.read(playbackProvider).isPlaying
+                                    ? Icons.pause_rounded
+                                    : Icons.play_arrow_rounded,
+                              ),
+                              color: paletteColor.bodyTextColor,
+                              onPressed: _playOrPause,
+                            );
+                          },
                         ),
                         IconButton(
                           icon: const Icon(Icons.skip_next_rounded),

diff --git a/lib/components/Playlist/PlaylistView.dart b/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: () {

diff --git a/lib/components/Shared/TrackCollectionView.dart b/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, _) =>