fix: playbutton card play state not changing

refactor(player_controls): move stop playback button to queue sheet

lib/components/album/album_card.dart

@@ -24,7 +24,8 @@ class AlbumCard extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, ref) {
     final playlist = ref.watch(PlaylistQueueNotifier.provider);
-    final playing = useStream(PlaylistQueueNotifier.playing).data ?? false;
+    final playing = useStream(PlaylistQueueNotifier.playing).data ??
+        PlaylistQueueNotifier.isPlaying;
     final playlistNotifier = ref.watch(PlaylistQueueNotifier.notifier);
     final queryBowl = QueryBowl.of(context);
     final query = queryBowl.getQuery<List<TrackSimple>, SpotifyApi>(
@@ -33,6 +34,9 @@ class AlbumCard extends HookConsumerWidget {
     bool isPlaylistPlaying = playlistNotifier.isPlayingPlaylist(tracks.value);
     final int marginH =
         useBreakpointValue(sm: 10, md: 15, lg: 20, xl: 20, xxl: 20);
+
+    final updating = useState(false);
+
     return PlaybuttonCard(
         imageUrl: TypeConversionUtils.image_X_UrlString(
           album.images,
@@ -49,6 +53,8 @@ class AlbumCard extends HookConsumerWidget {
           ServiceUtils.navigate(context, "/album/${album.id}", extra: album);
         },
         onPlaybuttonPressed: () async {
+          updating.value = true;
+          try {
             if (isPlaylistPlaying && playing) {
               return playlistNotifier.pause();
             } else if (isPlaylistPlaying && !playing) {
@@ -56,16 +62,21 @@ class AlbumCard extends HookConsumerWidget {
             }
 
             await playlistNotifier.loadAndPlay(album.tracks
-                  ?.map(
-                      (e) => TypeConversionUtils.simpleTrack_X_Track(e, album))
+                    ?.map((e) =>
+                        TypeConversionUtils.simpleTrack_X_Track(e, album))
                     .toList() ??
                 []);
+          } finally {
+            updating.value = false;
+          }
         },
         onAddToQueuePressed: () async {
           if (isPlaylistPlaying) {
             return;
           }
 
+          updating.value = true;
+          try {
             final fetchedTracks =
                 await queryBowl.fetchQuery<List<TrackSimple>, SpotifyApi>(
               Queries.album.tracksOf(album.id!),
@@ -86,6 +97,9 @@ class AlbumCard extends HookConsumerWidget {
                 content: Text("Added ${album.tracks?.length} tracks to queue"),
               ),
             );
+          } finally {
+            updating.value = false;
+          }
         });
   }
 }

lib/components/player/player_controls.dart

@@ -38,7 +38,8 @@ class PlayerControls extends HookConsumerWidget {
         []);
     final playlist = ref.watch(PlaylistQueueNotifier.provider);
     final playlistNotifier = ref.watch(PlaylistQueueNotifier.notifier);
-    final playing = useStream(PlaylistQueueNotifier.playing).data ?? false;
+    final playing = useStream(PlaylistQueueNotifier.playing).data ??
+        PlaylistQueueNotifier.isPlaying;
 
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
@@ -89,6 +90,7 @@ class PlayerControls extends HookConsumerWidget {
                     return null;
                   }, [progressStatic]);
 
+                  // this is a hack to fix duration not being updated
                   useEffect(() {
                     WidgetsBinding.instance.addPostFrameCallback((_) async {
                       if (positionSnapshot.hasData &&
@@ -200,14 +202,6 @@ class PlayerControls extends HookConsumerWidget {
                     ),
                     onPressed: playlistNotifier.next,
                   ),
-                  PlatformIconButton(
-                    tooltip: "Stop playback",
-                    icon: Icon(
-                      SpotubeIcons.stop,
-                      color: iconColor,
-                    ),
-                    onPressed: playlist != null ? playlistNotifier.stop : null,
-                  ),
                   PlatformIconButton(
                     tooltip: playlist?.isLooping != true
                         ? "Loop Track"

lib/components/player/player_overlay.dart

@@ -27,7 +27,8 @@ class PlayerOverlay extends HookConsumerWidget {
       PlaylistQueueNotifier.provider.select((s) => s != null),
     );
     final playlistNotifier = ref.watch(PlaylistQueueNotifier.notifier);
-    final playing = useStream(PlaylistQueueNotifier.playing).data ?? false;
+    final playing = useStream(PlaylistQueueNotifier.playing).data ??
+        PlaylistQueueNotifier.isPlaying;
 
     return GestureDetector(
       onVerticalDragEnd: (details) {

lib/components/player/player_queue.dart

@@ -5,6 +5,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:platform_ui/platform_ui.dart';
 import 'package:scroll_to_index/scroll_to_index.dart';
+import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/fallbacks/not_found.dart';
 import 'package:spotube/components/shared/track_table/track_tile.dart';
 import 'package:spotube/hooks/use_auto_scroll_controller.dart';
@@ -76,7 +77,33 @@ class PlayerQueue extends HookConsumerWidget {
                 borderRadius: BorderRadius.circular(20),
               ),
             ),
-            PlatformText.subheading("Queue"),
+            PlatformAppBar(
+              title:
+                  PlatformText.subheading("${tracks.length} tracks in Queue"),
+              backgroundColor: Colors.transparent,
+              automaticallyImplyLeading: false,
+              actions: [
+                PlatformFilledButton(
+                  style: ButtonStyle(
+                    backgroundColor: MaterialStatePropertyAll(
+                        PlatformTheme.of(context)
+                            .scaffoldBackgroundColor
+                            ?.withOpacity(0.5)),
+                  ),
+                  child: Row(
+                    children: const [
+                      Icon(SpotubeIcons.playlistRemove),
+                      SizedBox(width: 5),
+                      PlatformText("Clear All"),
+                    ],
+                  ),
+                  onPressed: () {
+                    playlistNotifier.stop();
+                    Navigator.of(context).pop();
+                  },
+                ),
+              ],
+            ),
             const SizedBox(height: 10),
             Flexible(
               child: ListView.builder(

lib/components/playlist/playlist_card.dart

@@ -24,7 +24,8 @@ class PlaylistCard extends HookConsumerWidget {
   Widget build(BuildContext context, ref) {
     final playlistQueue = ref.watch(PlaylistQueueNotifier.provider);
     final playlistNotifier = ref.watch(PlaylistQueueNotifier.notifier);
-    final playing = useStream(PlaylistQueueNotifier.playing).data ?? false;
+    final playing = useStream(PlaylistQueueNotifier.playing).data ??
+        PlaylistQueueNotifier.isPlaying;
     final queryBowl = QueryBowl.of(context);
     final query = queryBowl.getQuery<List<Track>, SpotifyApi>(
       Queries.playlist.tracksOf(playlist.id!).queryKey,
@@ -34,6 +35,9 @@ class PlaylistCard extends HookConsumerWidget {
 
     final int marginH =
         useBreakpointValue(sm: 10, md: 15, lg: 20, xl: 20, xxl: 20);
+
+    final updating = useState(false);
+
     return PlaybuttonCard(
       viewType: viewType,
       margin: EdgeInsets.symmetric(horizontal: marginH.toDouble()),
@@ -43,7 +47,8 @@ class PlaylistCard extends HookConsumerWidget {
         placeholder: ImagePlaceholder.collection,
       ),
       isPlaying: isPlaylistPlaying && playing,
-      isLoading: isPlaylistPlaying && playlistQueue?.isLoading == true,
+      isLoading: (isPlaylistPlaying && playlistQueue?.isLoading == true) ||
+          updating.value,
       onTap: () {
         ServiceUtils.navigate(
           context,
@@ -52,6 +57,8 @@ class PlaylistCard extends HookConsumerWidget {
         );
       },
       onPlaybuttonPressed: () async {
+        try {
+          updating.value = true;
           if (isPlaylistPlaying && playing) {
             return playlistNotifier.pause();
           } else if (isPlaylistPlaying && !playing) {
@@ -69,8 +76,13 @@ class PlaylistCard extends HookConsumerWidget {
 
           await playlistNotifier.loadAndPlay(fetchedTracks);
           tracks.value = fetchedTracks;
+        } finally {
+          updating.value = false;
+        }
       },
       onAddToQueuePressed: () async {
+        updating.value = true;
+        try {
           if (isPlaylistPlaying) return;
           List<Track> fetchedTracks = await queryBowl.fetchQuery(
                 key: ValueKey(const Uuid().v4()),
@@ -88,6 +100,9 @@ class PlaylistCard extends HookConsumerWidget {
               content: Text("Added ${fetchedTracks.length} tracks to queue"),
             ),
           );
+        } finally {
+          updating.value = false;
+        }
       },
     );
   }

lib/components/shared/playbutton_card.dart

@@ -104,7 +104,7 @@ class PlaybuttonCard extends HookWidget {
                     ),
             );
             final addToQueueButton = PlatformIconButton(
-              onPressed: onAddToQueuePressed,
+              onPressed: isLoading ? null : onAddToQueuePressed,
               backgroundColor:
                   PlatformTheme.of(context).secondaryBackgroundColor,
               hoverColor: PlatformTheme.of(context)