From 8f3b863ef9f2c3a961584e6f34b5e80bd2809b58 Mon Sep 17 00:00:00 2001
From: Feichtmeier <frederik.feichtmeier@gmail.com>
Date: Thu, 3 Aug 2023 03:06:06 +0200
Subject: [PATCH] Redesign podcast page

---
 lib/app/common/audio_page.dart           |   3 +
 lib/app/common/audio_page_body.dart      |  72 ++++--
 lib/app/common/audio_page_header.dart    |   1 +
 lib/app/common/audio_tile.dart           |   4 +-
 lib/app/library_model.dart               |   8 +
 lib/app/podcasts/podcast_audio_tile.dart | 304 +++++++++++++++++++++++
 lib/app/podcasts/podcast_page.dart       |   2 +
 lib/service/library_service.dart         |  13 +
 lib/service/podcast_service.dart         |   4 +-
 9 files changed, 387 insertions(+), 24 deletions(-)
 create mode 100644 lib/app/podcasts/podcast_audio_tile.dart

diff --git a/lib/app/common/audio_page.dart b/lib/app/common/audio_page.dart
index 3a8f3e524..1a093c277 100644
--- a/lib/app/common/audio_page.dart
+++ b/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(
diff --git a/lib/app/common/audio_page_body.dart b/lib/app/common/audio_page_body.dart
index bb436d57e..50993d7e2 100644
--- a/lib/app/common/audio_page_body.dart
+++ b/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,8 @@ class _AudioPageBodyState extends State<AudioPageBody> {
   @override
   Widget build(BuildContext context) {
     final isPlaying = context.select((PlayerModel m) => m.isPlaying);
+    final position = context.select((PlayerModel m) => m.position);
+
     final playerModel = context.read<PlayerModel>();
     final startPlaylist = playerModel.startPlaylist;
 
@@ -203,30 +208,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 +260,27 @@ class _AudioPageBodyState extends State<AudioPageBody> {
                   addPlaylist: addPlaylist,
                 );
 
+                if (audio.audioType == AudioType.podcast) {
+                  return PodcastAudioTile(
+                    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: audioSelected ? position : null,
+                  );
+                }
+
                 return AudioTile(
                   titleFlex: widget.titleFlex,
                   artistFlex: widget.artistFlex,
diff --git a/lib/app/common/audio_page_header.dart b/lib/app/common/audio_page_header.dart
index bc3c339d4..c1b6db7f7 100644
--- a/lib/app/common/audio_page_header.dart
+++ b/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,
diff --git a/lib/app/common/audio_tile.dart b/lib/app/common/audio_tile.dart
index bfe76872a..802716b37 100644
--- a/lib/app/common/audio_tile.dart
+++ b/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;
   }
 }
diff --git a/lib/app/library_model.dart b/lib/app/library_model.dart
index b24c09b28..9f58a416f 100644
--- a/lib/app/library_model.dart
+++ b/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);
 }
diff --git a/lib/app/podcasts/podcast_audio_tile.dart b/lib/app/podcasts/podcast_audio_tile.dart
new file mode 100644
index 000000000..62e44a67b
--- /dev/null
+++ b/lib/app/podcasts/podcast_audio_tile.dart
@@ -0,0 +1,304 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_html/flutter_html.dart';
+import 'package:intl/intl.dart';
+import 'package:musicpod/data/audio.dart';
+import 'package:musicpod/utils.dart';
+import 'package:url_launcher/url_launcher.dart';
+import 'package:yaru_icons/yaru_icons.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
+class PodcastAudioTile extends StatelessWidget {
+  const PodcastAudioTile({
+    super.key,
+    required this.audio,
+    required this.isPlayerPlaying,
+    required this.selected,
+    required this.pause,
+    required this.resume,
+    required this.startPlaylist,
+    required this.play,
+    required this.lastPosition,
+  });
+
+  final Audio audio;
+  final bool isPlayerPlaying;
+  final bool selected;
+  final void Function() pause;
+  final Future<void> Function() resume;
+  final void Function()? startPlaylist;
+  final Future<void> Function() play;
+  final Duration? lastPosition;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final textStyle = TextStyle(
+      color: selected ? theme.colorScheme.onSurface : theme.hintColor,
+      fontWeight: selected ? FontWeight.w500 : FontWeight.normal,
+    );
+    return YaruExpandable(
+      gapHeight: 0,
+      header: Padding(
+        padding: const EdgeInsets.only(
+          top: 15,
+          bottom: 10,
+          right: 8,
+          left: 8,
+        ),
+        child: Text(
+          audio.title ?? 'unknown',
+          style: textStyle,
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+        ),
+      ),
+      collapsedChild: _Bottom(
+        isPlayerPlaying: isPlayerPlaying,
+        selected: selected,
+        pause: pause,
+        resume: resume,
+        startPlaylist: startPlaylist,
+        play: play,
+        audio: audio,
+        theme: theme,
+        lastPosition: lastPosition,
+        maxLines: 2,
+      ),
+      child: _Bottom(
+        isPlayerPlaying: isPlayerPlaying,
+        selected: selected,
+        pause: pause,
+        resume: resume,
+        startPlaylist: startPlaylist,
+        play: play,
+        audio: audio,
+        theme: theme,
+        lastPosition: lastPosition,
+        maxLines: 10,
+      ),
+    );
+  }
+}
+
+class _Bottom extends StatelessWidget {
+  const _Bottom({
+    required this.isPlayerPlaying,
+    required this.selected,
+    required this.pause,
+    required this.resume,
+    required this.startPlaylist,
+    required this.play,
+    required this.audio,
+    required this.theme,
+    required this.lastPosition,
+    this.maxLines,
+  });
+
+  final bool isPlayerPlaying;
+  final bool selected;
+  final void Function() pause;
+  final Future<void> Function() resume;
+  final void Function()? startPlaylist;
+  final Future<void> Function() play;
+  final Audio audio;
+  final ThemeData theme;
+  final Duration? lastPosition;
+  final int? maxLines;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Row(
+              children: [
+                const SizedBox(
+                  width: 4,
+                ),
+                CircleAvatar(
+                  child: YaruIconButton(
+                    icon: (isPlayerPlaying && selected)
+                        ? const Icon(YaruIcons.media_pause)
+                        : const Icon(YaruIcons.media_play),
+                    onPressed: () {
+                      if (isPlayerPlaying && selected) {
+                        pause();
+                      } else {
+                        if (selected) {
+                          resume();
+                        } else {
+                          if (startPlaylist != null) {
+                            startPlaylist!();
+                          } else {
+                            play();
+                          }
+                        }
+                      }
+                    },
+                  ),
+                ),
+                const SizedBox(
+                  width: 10,
+                ),
+                if (audio.year != null)
+                  Text(
+                    DateFormat.MMMEd(
+                      WidgetsBinding
+                          .instance.platformDispatcher.locale.countryCode,
+                    ).format(DateTime.fromMillisecondsSinceEpoch(audio.year!)),
+                    style: theme.textTheme.labelMedium?.copyWith(
+                      fontWeight: FontWeight.w100,
+                      color: theme.hintColor,
+                    ),
+                  ),
+                if (audio.durationMs != null)
+                  Padding(
+                    padding: const EdgeInsets.only(left: 15),
+                    child: Text(
+                      formatTime(
+                        Duration(milliseconds: audio.durationMs!.toInt()),
+                      ),
+                      style: theme.textTheme.labelMedium?.copyWith(
+                        fontWeight: FontWeight.w100,
+                        color: theme.hintColor,
+                      ),
+                    ),
+                  ),
+                SizedBox(
+                  width: 150,
+                  child: Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 10),
+                    child: RepaintBoundary(
+                      child: _AudioProgress(
+                        lastPosition: lastPosition,
+                        duration: audio.durationMs == null
+                            ? null
+                            : Duration(milliseconds: audio.durationMs!.toInt()),
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+            Row(
+              children: [
+                YaruIconButton(
+                  onPressed: audio.website == null
+                      ? null
+                      : () => ScaffoldMessenger.of(context).showSnackBar(
+                            SnackBar(
+                              behavior: SnackBarBehavior.floating,
+                              content: TextButton(
+                                child: Text(
+                                  'Copied to clipboard: ${audio.website}',
+                                ),
+                                onPressed: () =>
+                                    launchUrl(Uri.parse(audio.website!)),
+                              ),
+                            ),
+                          ),
+                  icon: Icon(
+                    YaruIcons.share,
+                    color: selected ? null : theme.hintColor,
+                  ),
+                ),
+                const YaruIconButton(
+                  icon: Icon(YaruIcons.download),
+                  //TODO: implement download
+                  onPressed: null,
+                ),
+              ],
+            ),
+          ],
+        ),
+        Padding(
+          padding: const EdgeInsets.only(left: 8, right: 8, top: 8, bottom: 16),
+          child: _Description(
+            description: audio.description,
+            maxLines: maxLines,
+          ),
+        )
+      ],
+    );
+  }
+}
+
+class _Description extends StatelessWidget {
+  const _Description({
+    required this.description,
+    this.maxLines,
+  });
+
+  final String? description;
+  final int? maxLines;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return Html(
+      data: description,
+      onAnchorTap: (url, attributes, element) {
+        if (url == null) return;
+        launchUrl(Uri.parse(url));
+      },
+      style: {
+        'img': Style(display: Display.none),
+        'html': Style(
+          margin: Margins.zero,
+          padding: HtmlPaddings.zero,
+          textAlign: TextAlign.start,
+        ),
+        'body': Style(
+          margin: Margins.zero,
+          padding: HtmlPaddings.only(top: 5),
+          color: theme.hintColor,
+          textOverflow: TextOverflow.ellipsis,
+          maxLines: maxLines,
+          textAlign: TextAlign.start,
+        )
+      },
+    );
+  }
+}
+
+class _AudioProgress extends StatelessWidget {
+  const _AudioProgress({
+    this.lastPosition,
+    this.duration,
+  });
+
+  final Duration? lastPosition;
+  final Duration? duration;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    bool sliderActive = duration != null &&
+        lastPosition != null &&
+        duration!.inSeconds > lastPosition!.inSeconds;
+    return SliderTheme(
+      data: theme.sliderTheme.copyWith(
+        thumbColor: Colors.white,
+        thumbShape: const RoundSliderThumbShape(
+          elevation: 0,
+          enabledThumbRadius: 0,
+          disabledThumbRadius: 0,
+        ),
+        trackHeight: 1,
+        overlayShape: const RoundSliderThumbShape(
+          elevation: 0,
+          enabledThumbRadius: 0,
+          disabledThumbRadius: 0,
+        ),
+      ),
+      child: Slider(
+        min: 0,
+        max: sliderActive ? duration!.inSeconds.toDouble() : 1.0,
+        value: sliderActive ? lastPosition!.inSeconds.toDouble() : 0,
+        onChanged: (value) {},
+      ),
+    );
+  }
+}
diff --git a/lib/app/podcasts/podcast_page.dart b/lib/app/podcasts/podcast_page.dart
index a0b865ab9..d18c2267b 100644
--- a/lib/app/podcasts/podcast_page.dart
+++ b/lib/app/podcasts/podcast_page.dart
@@ -83,6 +83,7 @@ class PodcastPage extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     return AudioPage(
+      showAudioTileHeader: false,
       titleFlex: 8,
       albumFlex: 3,
       artistFlex: 4,
@@ -109,6 +110,7 @@ class PodcastPage extends StatelessWidget {
             ),
       pageLabel: context.l10n.podcast,
       pageTitle: pageId,
+      pageSubtile: audios?.firstOrNull?.artist,
       audios: audios,
       pageId: pageId,
       showTrack: false,
diff --git a/lib/service/library_service.dart b/lib/service/library_service.dart
index c4fa9cfc0..024e213fb 100644
--- a/lib/service/library_service.dart
+++ b/lib/service/library_service.dart
@@ -8,6 +8,18 @@ import 'package:musicpod/data/audio.dart';
 import 'package:musicpod/utils.dart';
 
 class LibraryService {
+  //
+  // last positions
+  //
+  final Map<String, Duration> _lastPositions = {};
+  final _lastPositionsController = StreamController<bool>.broadcast();
+  Stream<bool> get lastPositionsChanged => _lastPositionsController.stream;
+  void addLastPosition(String guid, Duration lastPosition) {
+    _lastPositions.putIfAbsent(guid, () => lastPosition);
+  }
+
+  Duration? getLastPosition(String guid) => _lastPositions[guid];
+
   //
   // Liked Audios
   //
@@ -223,6 +235,7 @@ class LibraryService {
     await _likedAudiosController.close();
     await _playlistsController.close();
     await _starredStationsController.close();
+    await _lastPositionsController.close();
   }
 }
 
diff --git a/lib/service/podcast_service.dart b/lib/service/podcast_service.dart
index 9dbfa5455..a1267ea46 100644
--- a/lib/service/podcast_service.dart
+++ b/lib/service/podcast_service.dart
@@ -107,7 +107,9 @@ Audio _createAudio(Episode episode, Podcast? podcast) {
     title: episode.title,
     album: podcast?.title,
     artist: podcast?.copyright,
-    description: podcast?.description,
+    durationMs: episode.duration?.inMilliseconds.toDouble(),
+    year: episode.publicationDate?.millisecondsSinceEpoch,
+    description: episode.description,
     website: podcast?.url,
   );
 }