Improve: Improved mini player

(swipe up to expand)
gokadzev · Dec 17, 2023 · 4ffd42d · 4ffd42d
1 parent 8bbe81a
commit 4ffd42d
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 74 deletions.
diff --git a/fastlane/metadata/android/en-US/changelogs/74.txt b/fastlane/metadata/android/en-US/changelogs/74.txt
@@ -0,0 +1,10 @@
+Bug fixes
+
+
+
+
+Enhancements
+
+- Improved mini player (swipe up to expand)
+- Update Portuguese translation
+- Made various quality and performance improvements for app stability and speed
diff --git a/lib/widgets/mini_player.dart b/lib/widgets/mini_player.dart
@@ -5,59 +5,54 @@ import 'package:flutter/material.dart';
 import 'package:musify/main.dart';
 import 'package:musify/screens/now_playing_page.dart';
 import 'package:musify/style/app_themes.dart';
+import 'package:musify/widgets/marque.dart';
 import 'package:musify/widgets/no_artwork_cube.dart';
 
-class MiniPlayer extends StatelessWidget {
+class MiniPlayer extends StatefulWidget {
   MiniPlayer({required this.metadata});
   final MediaItem metadata;
 
+  @override
+  _MiniPlayerState createState() => _MiniPlayerState();
+}
+
+class _MiniPlayerState extends State<MiniPlayer> {
   @override
   Widget build(BuildContext context) {
-    return Container(
-      height: 75,
-      decoration: BoxDecoration(
-        color: colorScheme.onSecondary,
-        borderRadius: const BorderRadius.only(
-          topLeft: Radius.circular(18),
-          topRight: Radius.circular(18),
-        ),
-      ),
-      child: Row(
-        children: <Widget>[
-          _buildExpandButton(context),
-          _buildArtwork(),
-          _buildMetadata(),
-          const Spacer(),
-          StreamBuilder<PlaybackState>(
-            stream: audioHandler.playbackState,
-            builder: (context, snapshot) {
-              return Padding(
-                padding: const EdgeInsets.only(right: 8),
-                child: _buildPlaybackIconButton(snapshot.data),
-              );
-            },
+    return GestureDetector(
+      onVerticalDragUpdate: (details) {
+        if (details.primaryDelta! < 0) {
+          Navigator.push(
+            context,
+            MaterialPageRoute(
+              builder: (context) => const NowPlayingPage(),
+            ),
+          );
+        }
+      },
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 12),
+        height: 75,
+        decoration: BoxDecoration(
+          color: colorScheme.onSecondary,
+          borderRadius: const BorderRadius.only(
+            topLeft: Radius.circular(18),
+            topRight: Radius.circular(18),
           ),
-        ],
-      ),
-    );
-  }
-
-  Widget _buildExpandButton(BuildContext context) {
-    return IconButton(
-      padding: const EdgeInsets.symmetric(horizontal: 15),
-      icon: Icon(
-        FluentIcons.arrow_up_24_filled,
-        size: 22,
-        color: Theme.of(context).colorScheme.primary,
+        ),
+        child: Row(
+          children: <Widget>[
+            _buildArtwork(),
+            _buildMetadata(),
+            StreamBuilder<PlaybackState>(
+              stream: audioHandler.playbackState,
+              builder: (context, snapshot) {
+                return _buildPlaybackIconButton(snapshot.data);
+              },
+            ),
+          ],
+        ),
       ),
-      onPressed: () {
-        Navigator.push(
-          context,
-          MaterialPageRoute(
-            builder: (context) => const NowPlayingPage(),
-          ),
-        );
-      },
     );
   }
 
@@ -67,7 +62,7 @@ class MiniPlayer extends StatelessWidget {
       child: ClipRRect(
         borderRadius: BorderRadius.circular(8),
         child: CachedNetworkImage(
-          imageUrl: metadata.artUri.toString(),
+          imageUrl: widget.metadata.artUri.toString(),
           fit: BoxFit.cover,
           width: 55,
           height: 55,
@@ -80,34 +75,37 @@ class MiniPlayer extends StatelessWidget {
   }
 
   Widget _buildMetadata() {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: <Widget>[
-        Text(
-          _truncateText(metadata.title, 15),
-          style: TextStyle(
-            color: colorScheme.primary,
-            fontSize: 17,
-            fontWeight: FontWeight.w600,
-          ),
+    return Flexible(
+      child: Padding(
+        padding: const EdgeInsets.only(right: 8),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            MarqueeWidget(
+              child: Text(
+                widget.metadata.title,
+                style: TextStyle(
+                  color: colorScheme.primary,
+                  fontSize: 17,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+            ),
+            MarqueeWidget(
+              child: Text(
+                widget.metadata.artist.toString(),
+                style: TextStyle(
+                  color: colorScheme.primary,
+                  fontSize: 15,
+                ),
+              ),
+            ),
+          ],
         ),
-        Text(
-          _truncateText(metadata.artist.toString(), 15),
-          style: TextStyle(
-            color: colorScheme.primary,
-            fontSize: 15,
-          ),
-        ),
-      ],
+      ),
     );
   }
-
-  String _truncateText(String text, int maxLength) {
-    return text.length > maxLength
-        ? '${text.substring(0, maxLength)}...'
-        : text;
-  }
 }
 
 Widget _buildPlaybackIconButton(PlaybackState? playerState) {
@@ -132,10 +130,13 @@ Widget _buildPlaybackIconButton(PlaybackState? playerState) {
     onPressed = () => audioHandler.seek(Duration.zero);
   }
 
-  return IconButton(
-    icon: Icon(icon, color: colorScheme.primary),
-    iconSize: 45,
-    onPressed: onPressed,
+  return InkWell(
+    onTap: onPressed,
     splashColor: Colors.transparent,
+    child: Icon(
+      icon,
+      color: colorScheme.primary,
+      size: 40,
+    ),
   );
 }