player screen improved adaptive layout

jmshrv · Jan 27, 2024 · d68e5e2 · d68e5e2
1 parent f0cdfdc
commit d68e5e2
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 237 deletions.
diff --git a/lib/components/PlayerScreen/artist_chip.dart b/lib/components/PlayerScreen/artist_chip.dart
@@ -34,6 +34,7 @@ class ArtistChips extends StatelessWidget {
         child: Wrap(
           spacing: 4.0,
           runSpacing: 4.0,
+          crossAxisAlignment: WrapCrossAlignment.center,
           children: List.generate(baseItem?.artistItems?.length ?? 0, (index) {
             final currentArtist = baseItem!.artistItems![index];
 

diff --git a/lib/components/PlayerScreen/control_area.dart b/lib/components/PlayerScreen/control_area.dart
@@ -9,20 +9,17 @@ class ControlArea extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const Padding(
-      padding: EdgeInsets.only(left: 20.0, right: 20.0, bottom: 8.0),
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          SongAudioFeatures(),
-          Padding(
-            padding: EdgeInsets.symmetric(horizontal: 16),
-            child: ProgressSlider(),
-          ),
-          Padding(padding: EdgeInsets.symmetric(vertical: 2)),
-          PlayerButtons(),
-        ],
-      ),
+    return const Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        SongAudioFeatures(),
+        Padding(
+          padding: EdgeInsets.symmetric(horizontal: 16),
+          child: ProgressSlider(),
+        ),
+        Padding(padding: EdgeInsets.symmetric(vertical: 2)),
+        PlayerButtons(),
+      ],
     );
   }
 }
diff --git a/lib/components/PlayerScreen/finamp_back_button_icon.dart b/lib/components/PlayerScreen/finamp_back_button_icon.dart
diff --git a/lib/components/PlayerScreen/progress_slider.dart b/lib/components/PlayerScreen/progress_slider.dart
@@ -76,25 +76,28 @@ class _ProgressSliderState extends State<ProgressSlider> {
               return Column(
                 mainAxisSize: MainAxisSize.min,
                 children: [
-                  Stack(
-                    children: [
-                      // Slider displaying buffer status.
-                      if (widget.showBuffer)
-                        _BufferSlider(
-                          mediaItem: snapshot.data?.mediaItem,
+                  SizedBox(
+                    height: 32.0,
+                    child: Stack(
+                      children: [
+                        // Slider displaying buffer status.
+                        if (widget.showBuffer)
+                          _BufferSlider(
+                            mediaItem: snapshot.data?.mediaItem,
+                            playbackState: snapshot.data!.playbackState,
+                          ),
+                        // Slider displaying playback progress.
+                        _PlaybackProgressSlider(
+                          allowSeeking: widget.allowSeeking,
                           playbackState: snapshot.data!.playbackState,
+                          position: snapshot.data!.position,
+                          mediaItem: snapshot.data!.mediaItem,
+                          onDrag: (value) => setState(() {
+                            _dragValue = value;
+                          }),
                         ),
-                      // Slider displaying playback progress.
-                      _PlaybackProgressSlider(
-                        allowSeeking: widget.allowSeeking,
-                        playbackState: snapshot.data!.playbackState,
-                        position: snapshot.data!.position,
-                        mediaItem: snapshot.data!.mediaItem,
-                        onDrag: (value) => setState(() {
-                          _dragValue = value;
-                        }),
-                      ),
-                    ],
+                      ],
+                    ),
                   ),
                   if (widget.showDuration)
                     _ProgressSliderDuration(
@@ -189,15 +192,13 @@ class _ProgressSliderDuration extends StatelessWidget {
           printDuration(
             Duration(microseconds: position.inMicroseconds),
           ),
-          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                color: Theme.of(context).textTheme.bodySmall?.color,
+          style: Theme.of(context).textTheme.bodySmall?.copyWith(
                 height: 0.5, // reduce line height
               ),
         ),
         Text(
           printDuration(itemDuration),
-          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                color: Theme.of(context).textTheme.bodySmall?.color,
+          style: Theme.of(context).textTheme.bodySmall?.copyWith(
                 height: 0.5, // reduce line height
               ),
         ),

diff --git a/lib/components/PlayerScreen/song_info.dart b/lib/components/PlayerScreen/song_info.dart
@@ -1,14 +1,9 @@
 import 'package:finamp/models/finamp_models.dart';
 import 'package:finamp/services/queue_service.dart';
-import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:get_it/get_it.dart';
 
-import '../../models/jellyfin_models.dart' as jellyfin_models;
-import '../../screens/artist_screen.dart';
 import '../../services/current_album_image_provider.dart';
-import '../../services/finamp_settings_helper.dart';
 import '../../services/jellyfin_api_helper.dart';
 import '../../services/music_player_background_task.dart';
 import 'song_name_content.dart';
@@ -41,68 +36,22 @@ class _SongInfoState extends State<SongInfo> {
         }
 
         final currentTrack = snapshot.data!.currentTrack!;
-        final mediaItem = currentTrack.item;
-        final songBaseItemDto =
-            (mediaItem.extras?.containsKey("itemJson") ?? false)
-                ? jellyfin_models.BaseItemDto.fromJson(
-                    mediaItem.extras!["itemJson"])
-                : null;
 
-        List<TextSpan> separatedArtistTextSpans = [];
         final secondaryTextColour =
             Theme.of(context).textTheme.bodyMedium?.color?.withOpacity(0.8);
-        final artistTextStyle = TextStyle(
-          color: secondaryTextColour,
-          fontSize: 14,
-          height: 17.5 / 14,
-          fontWeight: FontWeight.w300,
-        );
-
-        if (songBaseItemDto?.artistItems?.isEmpty ?? true) {
-          separatedArtistTextSpans = [
-            TextSpan(
-              text: AppLocalizations.of(context)!.unknownArtist,
-              style: artistTextStyle,
-            )
-          ];
-        } else {
-          songBaseItemDto!.artistItems
-              ?.map((e) => TextSpan(
-                  text: e.name,
-                  style: TextStyle(color: secondaryTextColour),
-                  recognizer: TapGestureRecognizer()
-                    ..onTap = () {
-                      // Offline artists aren't implemented yet so we return if
-                      // offline
-                      if (FinampSettingsHelper.finampSettings.isOffline) {
-                        return;
-                      }
-
-                      jellyfinApiHelper.getItemById(e.id).then((artist) =>
-                          Navigator.of(context).popAndPushNamed(
-                              ArtistScreen.routeName,
-                              arguments: artist));
-                    }))
-              .forEach((artistTextSpan) {
-            separatedArtistTextSpans.add(artistTextSpan);
-            separatedArtistTextSpans.add(TextSpan(
-              text: ", ",
-              style: artistTextStyle,
-            ));
-          });
-          separatedArtistTextSpans.removeLast();
-        }
 
         return Column(
           crossAxisAlignment: CrossAxisAlignment.center,
-          mainAxisAlignment: MainAxisAlignment.start,
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            _PlayerScreenAlbumImage(queueItem: currentTrack),
-            SongNameContent(
-              currentTrack: currentTrack,
-              separatedArtistTextSpans: separatedArtistTextSpans,
-              secondaryTextColour: secondaryTextColour,
-            )
+            Flexible(flex: 2, child: _PlayerScreenAlbumImage(queueItem: currentTrack)),
+            Flexible(
+              flex: 1,
+              child: SongNameContent(
+                currentTrack: currentTrack,
+                secondaryTextColour: secondaryTextColour,
+              ),
+            ),
           ],
         );
       },
@@ -111,7 +60,7 @@ class _SongInfoState extends State<SongInfo> {
 }
 
 class _PlayerScreenAlbumImage extends StatelessWidget {
-  _PlayerScreenAlbumImage({
+  const _PlayerScreenAlbumImage({
     Key? key,
     required this.queueItem,
   }) : super(key: key);
@@ -132,8 +81,8 @@ class _PlayerScreenAlbumImage extends StatelessWidget {
       ),
       alignment: Alignment.center,
       constraints: const BoxConstraints(
-        maxHeight: 300,
-        maxWidth: 300,
+        // maxHeight: 300,
+        // maxWidth: 380,
         // minHeight: 300,
         // minWidth: 300,
       ),