💄 Optimize UX

lib/screens/explore.dart

@@ -85,15 +85,6 @@ class _ExploreScreenState extends State<ExploreScreen> {
         ),
         body: CustomScrollView(
           slivers: [
-            if (_newReleasesPlaylist?.isNotEmpty ?? false)
-              SliverToBoxAdapter(
-                child: PlaylistSection(
-                  isLoading: _isLoading['newReleases']!,
-                  title: 'New Releases',
-                  list: _newReleasesPlaylist,
-                ),
-              ),
-            if (_newReleasesPlaylist?.isNotEmpty ?? false) const SliverGap(16),
             if (_recentlyPlaylist?.isNotEmpty ?? false)
               SliverToBoxAdapter(
                 child: PlaylistSection(
@@ -103,6 +94,15 @@ class _ExploreScreenState extends State<ExploreScreen> {
                 ),
               ),
             if (_recentlyPlaylist?.isNotEmpty ?? false) const SliverGap(16),
+            if (_newReleasesPlaylist?.isNotEmpty ?? false)
+              SliverToBoxAdapter(
+                child: PlaylistSection(
+                  isLoading: _isLoading['newReleases']!,
+                  title: 'New Releases',
+                  list: _newReleasesPlaylist,
+                ),
+              ),
+            if (_newReleasesPlaylist?.isNotEmpty ?? false) const SliverGap(16),
             SliverList.builder(
               itemCount: _forYouView?.length ?? 0,
               itemBuilder: (context, idx) {

lib/screens/player/mini.dart

@@ -2,8 +2,11 @@ import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:go_router/go_router.dart';
 import 'package:rhythm_box/platform.dart';
+import 'package:rhythm_box/screens/player/queue.dart';
+import 'package:rhythm_box/screens/player/siblings.dart';
 import 'package:rhythm_box/widgets/lyrics/synced_lyrics.dart';
 import 'package:rhythm_box/widgets/player/bottom_player.dart';
+import 'package:rhythm_box/widgets/player/devices.dart';
 import 'package:window_manager/window_manager.dart';
 
 class MiniPlayerScreen extends StatefulWidget {
@@ -94,6 +97,46 @@ class _MiniPlayerScreenState extends State<MiniPlayerScreen> {
                       onPressed: () => _exitMiniPlayer(),
                     ),
                     const Spacer(),
+                    IconButton(
+                      icon: const Icon(Icons.speaker, size: 18),
+                      onPressed: () {
+                        showModalBottomSheet(
+                          useRootNavigator: true,
+                          context: context,
+                          builder: (context) => const PlayerDevicePopup(),
+                        );
+                      },
+                    ),
+                    IconButton(
+                      icon: const Icon(Icons.merge),
+                      onPressed: () {
+                        showModalBottomSheet(
+                          useRootNavigator: true,
+                          isScrollControlled: true,
+                          context: context,
+                          builder: (context) => const SiblingTracksPopup(),
+                        ).then((_) {
+                          if (mounted) {
+                            setState(() {});
+                          }
+                        });
+                      },
+                    ),
+                    IconButton(
+                      icon: const Icon(Icons.queue_music),
+                      onPressed: () {
+                        showModalBottomSheet(
+                          useRootNavigator: true,
+                          isScrollControlled: true,
+                          context: context,
+                          builder: (context) => const PlayerQueuePopup(),
+                        ).then((_) {
+                          if (mounted) {
+                            setState(() {});
+                          }
+                        });
+                      },
+                    ),
                     IconButton(
                       icon: _isHoverMode
                           ? const Icon(Icons.touch_app)

lib/screens/player/view.dart

@@ -139,6 +139,9 @@ class _PlayerScreenState extends State<PlayerScreen> {
                           if (_playback.state.value.activeTrack != null &&
                               _auth.auth.value != null)
                             TrackHeartButton(
+                              key: ValueKey(
+                                _playback.state.value.activeTrack!.id!,
+                              ),
                               trackId: _playback.state.value.activeTrack!.id!,
                             ),
                         ],
@@ -178,7 +181,9 @@ class _PlayerScreenState extends State<PlayerScreen> {
                               },
                               onChangeEnd: (value) {
                                 audioPlayer.seek(
-                                    Duration(milliseconds: value.toInt()));
+                                  Duration(milliseconds: value.toInt()),
+                                );
+                                setState(() => _draggingValue = null);
                               },
                             ),
                           ),

lib/widgets/player/bottom_player.dart

@@ -113,7 +113,7 @@ class _BottomPlayerState extends State<BottomPlayer>
                 duration: const Duration(milliseconds: 1000),
                 builder: (context, value, _) => LinearProgressIndicator(
                   minHeight: 3,
-                  value: _isFetchingActiveTrack ? null : null,
+                  value: _isFetchingActiveTrack ? null : value,
                 ),
               ),
               Row(

pubspec.yaml

@@ -1,5 +1,5 @@
 name: rhythm_box
-description: "A new Flutter project."
+description: Yet another Spotify third-party client.
 # The following line prevents the package from being accidentally published to
 # pub.dev using `flutter pub publish`. This is preferred for private packages.
 publish_to: 'none' # Remove this line if you wish to publish to pub.dev

web/index.html

@@ -29,6 +29,9 @@
 
   <title>RhythmBox</title>
   <link rel="manifest" href="manifest.json">
+  
+  
+  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
   <style id="splash-screen-style">
     html {
       height: 100%
@@ -100,7 +103,6 @@
       document.body.style.background = "transparent";
     }
   </script>
-  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
 </head>
 <body>
   <picture id="splash">
@@ -108,6 +110,7 @@
       <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x" media="(prefers-color-scheme: dark)">
       <img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="">
   </picture>
+  
   <script src="flutter_bootstrap.js" async=""></script>