PlayerOverlay works as expected

imageToUrlString uses uuid instead of DateTime.now()
seperated parts of Player for reuse accross different sizes of screen's specific widgets
integrating go_router to follow declarative route approach

lib/components/Album/AlbumCard.dart

@@ -33,7 +33,10 @@ class AlbumCard extends HookConsumerWidget {
           "Album • ${artistsToString<ArtistSimple>(album.artists ?? [])}",
       onTap: () {
         Navigator.of(context).push(SpotubePageRoute(
-          child: AlbumView(album),
+          child: AlbumView(
+            album,
+            key: Key("album-${album.id}"),
+          ),
         ));
       },
       onPlaybuttonPressed: () async {

lib/components/Artist/ArtistCard.dart

@@ -18,7 +18,10 @@ class ArtistCard extends StatelessWidget {
     return InkWell(
       onTap: () {
         Navigator.of(context).push(SpotubePageRoute(
-          child: ArtistProfile(artist.id!),
+          child: ArtistProfile(
+            artist.id!,
+            key: Key("artist-${artist.id}"),
+          ),
         ));
       },
       borderRadius: BorderRadius.circular(10),

lib/components/Artist/ArtistProfile.dart

@@ -247,6 +247,7 @@ class ArtistProfile extends HookConsumerWidget {
                           child: ArtistAlbumView(
                             artistId,
                             snapshot.data?.name ?? "KRTX",
+                            key: Key("artist-album-$artistId"),
                           ),
                         ));
                       },

lib/components/Home/Home.dart

@@ -168,7 +168,7 @@ class Home extends HookConsumerWidget {
                     Expanded(child: MoveWindow()),
                     if (!Platform.isMacOS) const TitleBarActionButtons(),
                   ],
-                )),
+                ))
               ],
             ),
           ),

lib/components/Home/Sidebar.dart

@@ -31,7 +31,9 @@ class Sidebar extends HookConsumerWidget {
 
   static void goToSettings(BuildContext context) {
     Navigator.of(context).push(SpotubePageRoute(
-      child: const Settings(),
+      child: const Settings(
+        key: Key("settings"),
+      ),
     ));
   }
 

lib/components/Lyrics.dart

@@ -70,7 +70,9 @@ class Lyrics extends HookConsumerWidget {
             ElevatedButton(
                 onPressed: () {
                   Navigator.of(context).push(SpotubePageRoute(
-                    child: const Settings(),
+                    child: const Settings(
+                      key: Key("settings"),
+                    ),
                   ));
                 },
                 child: const Text("Add Access Token"))

lib/components/Player/Player.dart

@@ -4,13 +4,17 @@ import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:just_audio/just_audio.dart';
+import 'package:palette_generator/palette_generator.dart';
 import 'package:shared_preferences/shared_preferences.dart';
-import 'package:spotify/spotify.dart';
+import 'package:spotify/spotify.dart' hide Image;
+import 'package:spotube/components/Player/PlayerOverlay.dart';
+import 'package:spotube/components/Player/PlayerTrackDetails.dart';
 import 'package:spotube/components/Shared/DownloadTrackButton.dart';
 import 'package:spotube/components/Player/PlayerControls.dart';
 import 'package:spotube/helpers/artists-to-clickable-artists.dart';
 import 'package:spotube/helpers/image-to-url-string.dart';
 import 'package:spotube/helpers/search-youtube.dart';
+import 'package:spotube/hooks/useBreakpoints.dart';
 import 'package:spotube/models/LocalStorageKeys.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:flutter/material.dart';
@@ -19,15 +23,17 @@ import 'package:youtube_explode_dart/youtube_explode_dart.dart';
 
 class Player extends HookConsumerWidget {
   const Player({Key? key}) : super(key: key);
-
   @override
   Widget build(BuildContext context, ref) {
+    Playback playback = ref.watch(playbackProvider);
     final _isPlaying = useState(false);
     final _shuffled = useState(false);
     final _volume = useState(0.0);
     final _duration = useState<Duration?>(null);
     final _currentTrackId = useState<String?>(null);
 
+    final breakpoint = useBreakpoints();
+
     final AudioPlayer player = useMemoized(() => AudioPlayer(), []);
     final YoutubeExplode youtube = useMemoized(() => YoutubeExplode(), []);
     final Future<SharedPreferences> future =
@@ -92,6 +98,7 @@ class Player extends HookConsumerWidget {
           print(stack);
         }
       });
+
       return () {
         playingStreamListener.cancel();
         durationStreamListener.cancel();
@@ -106,9 +113,11 @@ class Player extends HookConsumerWidget {
         _volume.value = localStorage.data?.getDouble(LocalStorageKeys.volume) ??
             player.volume;
       }
+      return null;
     }, [localStorage.data]);
 
-    var _playTrack = useCallback((Track currentTrack, Playback playback) async {
+    final _playTrack =
+        useCallback((Track currentTrack, Playback playback) async {
       try {
         if (currentTrack.id != _currentTrackId.value) {
           Uri? parsedUri = Uri.tryParse(currentTrack.uri ?? "");
@@ -140,6 +149,13 @@ class Player extends HookConsumerWidget {
       }
     }, [player, _currentTrackId, _duration]);
 
+    useEffect(() {
+      if (playback.currentPlaylist != null && playback.currentTrack != null) {
+        _playTrack(playback.currentTrack!, playback);
+      }
+      return null;
+    }, [playback.currentPlaylist, playback.currentTrack]);
+
     var _onNext = useCallback(() async {
       try {
         await player.pause();
@@ -162,17 +178,7 @@ class Player extends HookConsumerWidget {
       }
     }, [player]);
 
-    return Container(
+    String albumArt = useMemoized(
-      color: Theme.of(context).backgroundColor,
-      child: HookConsumer(
-        builder: (context, ref, widget) {
-          Playback playback = ref.watch(playbackProvider);
-          if (playback.currentPlaylist != null &&
-              playback.currentTrack != null) {
-            _playTrack(playback.currentTrack!, playback);
-          }
-
-          String? albumArt = useMemoized(
       () => imageToUrlString(
         playback.currentTrack?.album?.images,
         index: (playback.currentTrack?.album?.images?.length ?? 1) - 1,
@@ -180,44 +186,21 @@ class Player extends HookConsumerWidget {
       [playback.currentTrack?.album?.images],
     );
 
-          return Material(
+    final entryRef = useRef<OverlayEntry?>(null);
-            type: MaterialType.transparency,
+
-            child: Row(
+    disposeOverlay() {
-              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+      try {
-              children: [
+        entryRef.value?.remove();
-                if (albumArt != null)
+        entryRef.value = null;
-                  CachedNetworkImage(
+      } catch (e, stack) {
-                    imageUrl: albumArt,
+        if (e is! AssertionError) {
-                    maxHeightDiskCache: 50,
+          print("[Player.useEffect.cleanup] $e");
-                    maxWidthDiskCache: 50,
+          print(stack);
-                    placeholder: (context, url) {
+        }
-                      return Container(
+      }
-                        height: 50,
+    }
-                        width: 50,
+
-                        color: Colors.green[400],
+    final controls = PlayerControls(
-                      );
-                    },
-                  ),
-                //  title of the currently playing track
-                Flexible(
-                  flex: 1,
-                  child: Column(
-                    children: [
-                      Text(
-                        playback.currentTrack?.name ?? "Not playing",
-                        style: const TextStyle(fontWeight: FontWeight.bold),
-                      ),
-                      artistsToClickableArtists(
-                        playback.currentTrack?.artists ?? [],
-                        mainAxisAlignment: MainAxisAlignment.center,
-                      )
-                    ],
-                  ),
-                ),
-                // controls
-                Flexible(
-                  flex: 3,
-                  child: PlayerControls(
       positionStream: player.positionStream,
       isPlaying: _isPlaying.value,
       duration: _duration.value ?? Duration.zero,
@@ -249,8 +232,9 @@ class Player extends HookConsumerWidget {
         }
       },
       onShuffle: () async {
-                      if (playback.currentTrack == null ||
+        if (playback.currentTrack == null || playback.currentPlaylist == null) {
-                          playback.currentPlaylist == null) return;
+          return;
+        }
         try {
           if (!_shuffled.value) {
             playback.currentPlaylist!.shuffle();
@@ -278,7 +262,50 @@ class Player extends HookConsumerWidget {
           print(stack);
         }
       },
+    );
+
+    useEffect(() {
+      // clearing the overlay-entry as passing the already available
+      // entry will result in splashing while resizing the window
+      if (entryRef.value != null) disposeOverlay();
+      if (breakpoint.isLessThanOrEqualTo(Breakpoints.md)) {
+        entryRef.value = OverlayEntry(
+          opaque: false,
+          builder: (context) => PlayerOverlay(
+            controls: controls,
+            albumArt: albumArt,
           ),
+        );
+        // I can't believe useEffect doesn't run Post Frame aka
+        // after rendering/painting the UI
+        // `My disappointment is immeasurable and my day is ruined` XD
+        WidgetsBinding.instance?.addPostFrameCallback((time) {
+          Overlay.of(context)?.insert(entryRef.value!);
+        });
+      }
+      return () {
+        disposeOverlay();
+      };
+    }, [breakpoint]);
+
+    // returning an empty non spacious Container as the overlay will take
+    // place in the global overlay stack aka [_entries]
+    if (breakpoint.isLessThanOrEqualTo(Breakpoints.md)) {
+      return Container();
+    }
+
+    return Container(
+      color: Theme.of(context).backgroundColor,
+      child: Material(
+        type: MaterialType.transparency,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: [
+            Expanded(child: PlayerTrackDetails(albumArt: albumArt)),
+            // controls
+            Flexible(
+              flex: 3,
+              child: controls,
             ),
             // add to saved tracks
             Expanded(
@@ -334,8 +361,8 @@ class Player extends HookConsumerWidget {
                                   onPressed: () {
                                     if (!isLiked &&
                                         playback.currentTrack?.id != null) {
-                                          spotifyApi.tracks.me.saveOne(
+                                      spotifyApi.tracks.me
-                                              playback.currentTrack!.id!);
+                                          .saveOne(playback.currentTrack!.id!);
                                     }
                                   });
                             });
@@ -347,8 +374,6 @@ class Player extends HookConsumerWidget {
             )
           ],
         ),
-          );
-        },
       ),
     );
   }

lib/components/Player/PlayerControls.dart

@@ -5,6 +5,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:hotkey_manager/hotkey_manager.dart';
 import 'package:spotube/helpers/zero-pad-num-str.dart';
+import 'package:spotube/hooks/useBreakpoints.dart';
 import 'package:spotube/models/GlobalKeyActions.dart';
 import 'package:spotube/provider/UserPreferences.dart';
 
@@ -77,6 +78,47 @@ class PlayerControls extends HookConsumerWidget {
       };
     });
 
+    final breakpoint = useBreakpoints();
+
+    Widget controlButtons = Material(
+      type: MaterialType.transparency,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: [
+          if (breakpoint.isMoreThan(Breakpoints.md))
+            IconButton(
+                icon: const Icon(Icons.shuffle_rounded),
+                color: shuffled ? Theme.of(context).primaryColor : null,
+                onPressed: () {
+                  onShuffle?.call();
+                }),
+          IconButton(
+              icon: const Icon(Icons.skip_previous_rounded),
+              onPressed: () {
+                onPrevious?.call();
+              }),
+          IconButton(
+            icon: Icon(
+              isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded,
+            ),
+            onPressed: () => _playOrPause(null),
+          ),
+          IconButton(
+              icon: const Icon(Icons.skip_next_rounded),
+              onPressed: () => onNext?.call()),
+          if (breakpoint.isMoreThan(Breakpoints.md))
+            IconButton(
+              icon: const Icon(Icons.stop_rounded),
+              onPressed: () => onStop?.call(),
+            )
+        ],
+      ),
+    );
+
+    if (breakpoint.isLessThanOrEqualTo(Breakpoints.md)) {
+      return controlButtons;
+    }
+
     return Container(
         constraints: const BoxConstraints(maxWidth: 700),
         child: Column(
@@ -119,37 +161,8 @@ class PlayerControls extends HookConsumerWidget {
                     ],
                   );
                 }),
-          Row(
+            controlButtons,
-            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-            children: [
-              IconButton(
-                  icon: const Icon(Icons.shuffle_rounded),
-                  color: shuffled ? Theme.of(context).primaryColor : null,
-                  onPressed: () {
-                    onShuffle?.call();
-                  }),
-              IconButton(
-                  icon: const Icon(Icons.skip_previous_rounded),
-                  onPressed: () {
-                    onPrevious?.call();
-                  }),
-              IconButton(
-                icon: Icon(
-                  isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded,
-                ),
-                onPressed: () => _playOrPause(null),
-              ),
-              IconButton(
-                  icon: const Icon(Icons.skip_next_rounded),
-                  onPressed: () => onNext?.call()),
-              IconButton(
-                icon: const Icon(Icons.stop_rounded),
-                onPressed: () => onStop?.call(),
-              )
           ],
-          )
+        ));
-        ],
-      ),
-    );
   }
 }

lib/components/Player/PlayerOverlay.dart

@@ -0,0 +1,55 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:palette_generator/palette_generator.dart';
+import 'package:spotube/components/Player/PlayerTrackDetails.dart';
+import 'package:spotube/hooks/useBreakpoints.dart';
+
+class PlayerOverlay extends HookWidget {
+  final Widget controls;
+  final String albumArt;
+  const PlayerOverlay({
+    required this.controls,
+    required this.albumArt,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final breakpoint = useBreakpoints();
+
+    return Positioned(
+      right: (breakpoint.isMd ? 10 : 5),
+      left: (breakpoint.isSm ? 5 : 80),
+      bottom: (breakpoint.isSm ? 63 : 10),
+      child: FutureBuilder<PaletteGenerator>(
+          future: PaletteGenerator.fromImageProvider(
+            CachedNetworkImageProvider(
+              albumArt,
+              cacheKey: albumArt,
+              maxHeight: 50,
+              maxWidth: 50,
+            ),
+          ),
+          builder: (context, snapshot) {
+            return Container(
+              width: MediaQuery.of(context).size.width,
+              height: 50,
+              decoration: BoxDecoration(
+                color: snapshot.hasData
+                    ? snapshot.data!.colors.first
+                    : Colors.blueGrey[200],
+                borderRadius: BorderRadius.circular(5),
+              ),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  PlayerTrackDetails(albumArt: albumArt),
+                  controls,
+                ],
+              ),
+            );
+          }),
+    );
+  }
+}

lib/components/Player/PlayerTrackDetails.dart

@@ -0,0 +1,71 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotube/helpers/artists-to-clickable-artists.dart';
+import 'package:spotube/hooks/useBreakpoints.dart';
+import 'package:spotube/provider/Playback.dart';
+
+class PlayerTrackDetails extends HookConsumerWidget {
+  final String? albumArt;
+  const PlayerTrackDetails({Key? key, this.albumArt}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final breakpoint = useBreakpoints();
+    final playback = ref.watch(playbackProvider);
+
+    return Row(
+      children: [
+        if (albumArt != null)
+          Padding(
+            padding: EdgeInsets.all(
+                breakpoint.isLessThanOrEqualTo(Breakpoints.md) ? 5.0 : 0),
+            child: CachedNetworkImage(
+              imageUrl: albumArt!,
+              maxHeightDiskCache: 50,
+              maxWidthDiskCache: 50,
+              cacheKey: albumArt,
+              placeholder: (context, url) {
+                return Container(
+                  height: 50,
+                  width: 50,
+                  color: Colors.green[400],
+                );
+              },
+            ),
+          ),
+        if (breakpoint.isLessThanOrEqualTo(Breakpoints.md)) ...[
+          const SizedBox(width: 10),
+          Text(
+            playback.currentTrack?.name ?? "Not playing",
+            overflow: TextOverflow.ellipsis,
+            style: Theme.of(context)
+                .textTheme
+                .bodyText1
+                ?.copyWith(fontWeight: FontWeight.bold),
+          ),
+        ],
+        //  title of the currently playing track
+        if (breakpoint.isMoreThan(Breakpoints.md))
+          Flexible(
+            flex: 1,
+            child: Column(
+              children: [
+                Text(
+                  playback.currentTrack?.name ?? "Not playing",
+                  style: Theme.of(context)
+                      .textTheme
+                      .bodyText1
+                      ?.copyWith(fontWeight: FontWeight.bold),
+                ),
+                artistsToClickableArtists(
+                  playback.currentTrack?.artists ?? [],
+                  mainAxisAlignment: MainAxisAlignment.center,
+                )
+              ],
+            ),
+          ),
+      ],
+    );
+  }
+}

lib/components/Playlist/PlaylistCard.dart

@@ -26,9 +26,14 @@ class PlaylistCard extends HookConsumerWidget {
       imageUrl: playlist.images![0].url!,
       isPlaying: isPlaylistPlaying,
       onTap: () {
-        Navigator.of(context).push(SpotubePageRoute(
+        Navigator.of(context).push(
-          child: PlaylistView(playlist),
+          SpotubePageRoute(
-        ));
+            child: PlaylistView(
+              playlist,
+              key: Key("playlist-${playlist.id}"),
+            ),
+          ),
+        );
       },
       onPlaybuttonPressed: () async {
         if (isPlaylistPlaying) return;

lib/components/Shared/SpotubePageRoute.dart

@@ -5,7 +5,7 @@ class SpotubePageRoute extends PageRouteBuilder {
   SpotubePageRoute({required this.child})
       : super(
             pageBuilder: (context, animation, secondaryAnimation) => child,
-        );
+            settings: RouteSettings(name: child.key.toString()));
 
   @override
   Widget buildTransitions(BuildContext context, Animation<double> animation,

lib/helpers/image-to-url-string.dart

@@ -1,7 +1,9 @@
 import 'package:spotify/spotify.dart';
+import 'package:uuid/uuid.dart' show Uuid;
 
+const uuid = Uuid();
 String imageToUrlString(List<Image>? images, {int index = 0}) {
   return images != null && images.isNotEmpty
       ? images[0].url!
-      : "https://avatars.dicebear.com/api/croodles-neutral/${DateTime.now().toString()}.png";
+      : "https://avatars.dicebear.com/api/croodles-neutral/${uuid.v4()}.png";
 }

pubspec.lock

@@ -226,6 +226,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.1.0"
+  go_router:
+    dependency: "direct main"
+    description:
+      name: go_router
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.4"
   hooks_riverpod:
     dependency: "direct main"
     description:
@@ -331,6 +338,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.1"
+  logging:
+    dependency: transitive
+    description:
+      name: logging
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.2"
   matcher:
     dependency: transitive
     description:
@@ -380,6 +394,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.2"
+  palette_generator:
+    dependency: "direct main"
+    description:
+      name: palette_generator
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.3.3"
   path:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -52,6 +52,8 @@ dependencies:
   flutter_riverpod: ^1.0.3
   flutter_hooks: ^0.18.2+1
   hooks_riverpod: ^1.0.3
+  go_router: ^3.0.4
+  palette_generator: ^0.3.3
 
 dev_dependencies:
   flutter_test: