Redesign podcast page (#113)

* Redesign podcast page

* Improve layout

* improve padding

* Track progress only in the tile too reduce CPU usage

* remove flex parameters

lib/app/common/audio_page.dart

@@ -38,6 +38,7 @@ class AudioPage extends StatelessWidget {
     this.titleFlex = 5,
     this.artistFlex = 5,
     this.albumFlex = 4,
+    this.showAudioTileHeader = true,
   });
 
   final Set<Audio>? audios;
@@ -57,6 +58,7 @@ class AudioPage extends StatelessWidget {
 
   final Widget? image;
   final bool? showAudioPageHeader;
+  final bool showAudioTileHeader;
   final AudioFilter audioFilter;
   final String? noResultMessage;
   final String? titleLabel, artistLabel, albumLabel;
@@ -98,6 +100,7 @@ class AudioPage extends StatelessWidget {
       pageTitle: pageTitle,
       pageTitleWidget: pageTitleWidget,
       showAudioPageHeader: showAudioPageHeader,
+      showAudioTileHeader: showAudioTileHeader,
     );
 
     return YaruDetailPage(

lib/app/common/audio_page_body.dart

@@ -9,6 +9,7 @@ import 'package:musicpod/app/common/audio_tile_header.dart';
 import 'package:musicpod/app/common/like_button.dart';
 import 'package:musicpod/app/library_model.dart';
 import 'package:musicpod/app/player/player_model.dart';
+import 'package:musicpod/app/podcasts/podcast_audio_tile.dart';
 import 'package:musicpod/data/audio.dart';
 import 'package:musicpod/l10n/l10n.dart';
 import 'package:musicpod/utils.dart';
@@ -42,6 +43,7 @@ class AudioPageBody extends StatefulWidget {
     this.titleFlex = 5,
     this.artistFlex = 5,
     this.albumFlex = 4,
+    this.showAudioTileHeader = true,
   });
 
   final Set<Audio>? audios;
@@ -59,6 +61,7 @@ class AudioPageBody extends StatefulWidget {
   final bool showTrack;
   final Widget? image;
   final bool? showAudioPageHeader;
+  final bool showAudioTileHeader;
   final AudioFilter audioFilter;
   final String? noResultMessage;
   final String? titleLabel, artistLabel, albumLabel;
@@ -99,6 +102,7 @@ class _AudioPageBodyState extends State<AudioPageBody> {
   @override
   Widget build(BuildContext context) {
     final isPlaying = context.select((PlayerModel m) => m.isPlaying);
+
     final playerModel = context.read<PlayerModel>();
     final startPlaylist = playerModel.startPlaylist;
 
@@ -203,30 +207,32 @@ class _AudioPageBodyState extends State<AudioPageBody> {
                 : EdgeInsets.zero,
             child: audioControlPanel,
           ),
-          Padding(
-            padding: const EdgeInsets.only(
-              left: 20,
-              right: 20,
+          if (widget.showAudioTileHeader)
+            Padding(
+              padding: const EdgeInsets.only(
+                left: 20,
+                right: 20,
+              ),
+              child: AudioTileHeader(
+                titleFlex: widget.titleFlex,
+                artistFlex: widget.artistFlex,
+                albumFlex: widget.albumFlex,
+                titleLabel: widget.titleLabel,
+                artistLabel: widget.artistLabel,
+                albumLabel: widget.albumLabel,
+                showTrack: widget.showTrack,
+                audioFilter: AudioFilter.title,
+                onAudioFilterSelected: widget.sort == false
+                    ? null
+                    : (audioFilter) => setState(() {
+                          _filter = audioFilter;
+                        }),
+              ),
             ),
-            child: AudioTileHeader(
-              titleFlex: widget.titleFlex,
-              artistFlex: widget.artistFlex,
-              albumFlex: widget.albumFlex,
-              titleLabel: widget.titleLabel,
-              artistLabel: widget.artistLabel,
-              albumLabel: widget.albumLabel,
-              showTrack: widget.showTrack,
-              audioFilter: AudioFilter.title,
-              onAudioFilterSelected: widget.sort == false
-                  ? null
-                  : (audioFilter) => setState(() {
-                        _filter = audioFilter;
-                      }),
+          if (widget.showAudioTileHeader)
+            const Divider(
+              height: 0,
             ),
-          ),
-          const Divider(
-            height: 0,
-          ),
           Padding(
             padding: const EdgeInsets.only(left: 20, right: 20, bottom: 20),
             child: Column(
@@ -253,6 +259,28 @@ class _AudioPageBodyState extends State<AudioPageBody> {
                   addPlaylist: addPlaylist,
                 );
 
+                if (audio.audioType == AudioType.podcast) {
+                  return PodcastAudioTile(
+                    isExpanded: audioSelected,
+                    audio: audio,
+                    isPlayerPlaying: isPlaying,
+                    selected: audioSelected,
+                    pause: pause,
+                    resume: resume,
+                    startPlaylist: widget.audios == null
+                        ? null
+                        : () => startPlaylist(
+                              widget.audios!.skip(index).toSet(),
+                              queueName ??
+                                  audio.artist ??
+                                  audio.album ??
+                                  widget.audios.toString(),
+                            ),
+                    play: play,
+                    lastPosition: null,
+                  );
+                }
+
                 return AudioTile(
                   titleFlex: widget.titleFlex,
                   artistFlex: widget.artistFlex,

lib/app/common/audio_page_header.dart

@@ -100,6 +100,7 @@ class AudioPageHeader extends StatelessWidget {
                                 launchUrl(Uri.parse(url));
                               },
                               style: {
+                                'img': Style(display: Display.none),
                                 'html': Style(
                                   margin: Margins.zero,
                                   padding: HtmlPaddings.zero,

lib/app/common/audio_tile.dart

@@ -45,7 +45,7 @@ class AudioTile extends StatelessWidget {
       fontWeight: selected ? FontWeight.w500 : FontWeight.normal,
     );
 
-    return ListTile(
+    final listTile = ListTile(
       contentPadding: const EdgeInsets.only(left: 8, right: 4),
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(kYaruButtonRadius),
@@ -112,5 +112,7 @@ class AudioTile extends StatelessWidget {
       ),
       trailing: likeIcon,
     );
+
+    return listTile;
   }
 }

lib/app/library_model.dart

@@ -15,6 +15,7 @@ class LibraryModel extends SafeChangeNotifier {
   StreamSubscription<bool>? _podcastsSub;
   StreamSubscription<bool>? _stationsSub;
   StreamSubscription<int?>? _localAudioIndexSub;
+  StreamSubscription<bool>? _lastPositionsSub;
 
   bool ready = false;
 
@@ -32,6 +33,8 @@ class LibraryModel extends SafeChangeNotifier {
         _service.podcastsChanged.listen((event) => notifyListeners());
     _stationsSub =
         _service.starredStationsChanged.listen((event) => notifyListeners());
+    _lastPositionsSub =
+        _service.lastPositionsChanged.listen((_) => notifyListeners());
 
     ready = true;
     notifyListeners();
@@ -45,6 +48,7 @@ class LibraryModel extends SafeChangeNotifier {
     _albumsSub?.cancel();
     _podcastsSub?.cancel();
     _stationsSub?.cancel();
+    _lastPositionsSub?.cancel();
 
     super.dispose();
   }
@@ -187,4 +191,8 @@ class LibraryModel extends SafeChangeNotifier {
     if (value == null || value == _service.localAudioIndex) return;
     _service.setLocalAudioIndex(value);
   }
+
+  Duration? getLastPosition(String guid) => _service.getLastPosition(guid);
+  void addLastPosition(String guid, Duration lastPosition) =>
+      _service.addLastPosition(guid, lastPosition);
 }