From 147a1ebb8fa9bf573965b60960c52628269dfc9e Mon Sep 17 00:00:00 2001
From: Feichtmeier <frederik.feichtmeier@gmail.com>
Date: Thu, 21 Nov 2024 22:25:32 +0100
Subject: [PATCH] feat: improve mobile tiles and page option buttons with
 bottom sheets

---
 lib/common/view/audio_tile.dart               |  24 ++--
 lib/common/view/audio_tile_bottom_sheet.dart  | 103 ++++++++++--------
 lib/common/view/audio_tile_option_button.dart |  64 +++++++----
 lib/common/view/explore_online_popup.dart     |  38 -------
 .../view/stream_provider_share_button.dart    |   2 +-
 lib/library/library_model.dart                |  14 ++-
 lib/library/library_service.dart              |  28 +++--
 lib/local_audio/view/album_page.dart          |  13 ++-
 lib/local_audio/view/artist_page.dart         |  12 +-
 lib/player/player_model.dart                  |   4 +-
 lib/player/player_service.dart                |   8 +-
 .../view/add_to_playlist_dialog.dart          |   6 +-
 .../view/add_to_playlist_navigator.dart       |  38 ++++---
 .../view/playlst_add_audios_dialog.dart       |   5 +-
 lib/podcasts/view/podcast_audio_tile.dart     |   2 +-
 lib/podcasts/view/podcast_page.dart           |  15 ++-
 needs_translation.json                        |  14 ---
 17 files changed, 221 insertions(+), 169 deletions(-)
 delete mode 100644 lib/common/view/explore_online_popup.dart

diff --git a/lib/common/view/audio_tile.dart b/lib/common/view/audio_tile.dart
index 51f90af48..3560bf81c 100644
--- a/lib/common/view/audio_tile.dart
+++ b/lib/common/view/audio_tile.dart
@@ -56,10 +56,7 @@ class _AudioTileState extends State<AudioTile> {
     final theme = context.theme;
     final l10n = context.l10n;
     final playerModel = di<PlayerModel>();
-    final liked = watchPropertyValue((LibraryModel m) => m.liked(widget.audio));
-    final starred = watchPropertyValue(
-      (LibraryModel m) => m.isStarredStation(widget.audio.uuid),
-    );
+
     final selectedColor = widget.selectedColor ?? theme.contrastyPrimary;
     final color =
         widget.selected && widget.isPlayerPlaying ? selectedColor : null;
@@ -145,7 +142,6 @@ class _AudioTileState extends State<AudioTile> {
       ),
       trailing: _AudioTileTrail(
         hovered: _hovered,
-        liked: liked || starred,
         audio: widget.audio,
         selected: widget.selected,
         isPlayerPlaying: widget.isPlayerPlaying,
@@ -154,6 +150,7 @@ class _AudioTileState extends State<AudioTile> {
         selectedColor: selectedColor,
         showDuration: !isMobile,
         showLikeIcon: !isMobile,
+        alwaysShowOptionButton: isMobile,
       ),
     );
 
@@ -182,10 +179,10 @@ class _AudioTileTrail extends StatelessWidget with WatchItMixin {
     required this.pageId,
     required this.audioPageType,
     required this.hovered,
-    required this.liked,
     required this.selectedColor,
     required this.showLikeIcon,
     required this.showDuration,
+    required this.alwaysShowOptionButton,
   });
 
   final Audio audio;
@@ -194,21 +191,28 @@ class _AudioTileTrail extends StatelessWidget with WatchItMixin {
   final String pageId;
   final AudioPageType audioPageType;
   final bool hovered;
-  final bool liked;
   final Color selectedColor;
   final bool showLikeIcon, showDuration;
+  final bool alwaysShowOptionButton;
 
   @override
   Widget build(BuildContext context) {
+    final liked = watchPropertyValue((LibraryModel m) => m.liked(audio));
+    final starred = watchPropertyValue(
+      (LibraryModel m) => m.isStarredStation(audio.uuid),
+    );
     return Row(
       mainAxisSize: MainAxisSize.min,
       children: [
         Opacity(
-          opacity: hovered || selected ? 1 : 0,
+          opacity: alwaysShowOptionButton || hovered || selected ? 1 : 0,
           child: AudioTileOptionButton(
+            title: Text(audio.title ?? ''),
+            subTitle: Text(audio.artist ?? ''),
             selected: selected && isPlayerPlaying,
             playlistId: pageId,
-            audio: audio,
+            audios: [audio],
+            searchTerm: '${audio.artist ?? ''} - ${audio.title ?? ''}',
             allowRemove: (audioPageType == AudioPageType.playlist ||
                     audioPageType == AudioPageType.likedAudio) &&
                 audio.audioType != AudioType.radio,
@@ -219,7 +223,7 @@ class _AudioTileTrail extends StatelessWidget with WatchItMixin {
         ),
         if (showLikeIcon)
           Opacity(
-            opacity: hovered || selected || liked ? 1 : 0,
+            opacity: hovered || selected || liked || starred ? 1 : 0,
             child: switch (audio.audioType) {
               AudioType.radio => RadioLikeIcon(
                   audio: audio,
diff --git a/lib/common/view/audio_tile_bottom_sheet.dart b/lib/common/view/audio_tile_bottom_sheet.dart
index 007d7af24..2a258e4be 100644
--- a/lib/common/view/audio_tile_bottom_sheet.dart
+++ b/lib/common/view/audio_tile_bottom_sheet.dart
@@ -1,3 +1,5 @@
+import 'package:collection/collection.dart';
+
 import '../../constants.dart';
 import '../../extensions/build_context_x.dart';
 import '../../l10n/l10n.dart';
@@ -7,6 +9,7 @@ import '../../playlists/view/add_to_playlist_dialog.dart';
 import '../data/audio.dart';
 import 'audio_tile_image.dart';
 import 'icons.dart';
+import 'like_all_icon.dart';
 import 'like_icon.dart';
 import 'meta_data_dialog.dart';
 import 'package:flutter/material.dart';
@@ -19,14 +22,20 @@ import 'theme.dart';
 class AudioTileBottomSheet extends StatelessWidget {
   const AudioTileBottomSheet({
     super.key,
-    required this.audio,
     required this.allowRemove,
     required this.playlistId,
+    required this.searchTerm,
+    required this.title,
+    required this.subTitle,
+    required this.audios,
   });
 
-  final Audio audio;
   final bool allowRemove;
   final String playlistId;
+  final String searchTerm;
+  final Widget title;
+  final Widget subTitle;
+  final List<Audio> audios;
 
   @override
   Widget build(BuildContext context) {
@@ -36,7 +45,6 @@ class AudioTileBottomSheet extends StatelessWidget {
       enableDrag: false,
       onClosing: () {},
       builder: (context) {
-        var searchTerm = '${audio.artist ?? ''} - ${audio.title ?? ''}';
         return SizedBox(
           height: 460,
           child: Column(
@@ -47,21 +55,25 @@ class AudioTileBottomSheet extends StatelessWidget {
                   right: 15,
                   top: 5,
                 ),
-                title: Text(audio.title ?? ''),
-                subtitle: Text(audio.artist ?? ''),
-                leading: AudioTileImage(
-                  size: kAudioTrackWidth,
-                  audio: audio,
-                ),
-                trailing: switch (audio.audioType) {
-                  AudioType.radio => RadioLikeIcon(
-                      audio: audio,
-                    ),
-                  AudioType.local => LikeIcon(
-                      audio: audio,
-                    ),
-                  _ => null,
-                },
+                title: title,
+                subtitle: subTitle,
+                leading: audios.isNotEmpty
+                    ? AudioTileImage(
+                        size: kAudioTrackWidth,
+                        audio: audios.first,
+                      )
+                    : null,
+                trailing: audios.isNotEmpty
+                    ? switch (audios.first.audioType) {
+                        AudioType.radio => RadioLikeIcon(
+                            audio: audios.first,
+                          ),
+                        AudioType.local => LikeAllIcon(
+                            audios: audios,
+                          ),
+                        _ => null,
+                      }
+                    : null,
               ),
               const SpacedDivider(
                 bottom: 20,
@@ -77,7 +89,7 @@ class AudioTileBottomSheet extends StatelessWidget {
                     children: space(
                       widthGap: 10,
                       children: [
-                        if (audio.audioType != AudioType.radio)
+                        if (audios.none((e) => e.audioType == AudioType.radio))
                           Column(
                             children: [
                               _Button(
@@ -87,24 +99,24 @@ class AudioTileBottomSheet extends StatelessWidget {
                                   showDialog(
                                     context: context,
                                     builder: (context) =>
-                                        AddToPlaylistDialog(audio: audio),
+                                        AddToPlaylistDialog(audios: audios),
                                   );
                                 },
                               ),
                               _ButtonLabel(label: l10n.addToPlaylist),
                             ],
                           ),
-                        if (audio.audioType != AudioType.radio)
+                        if (audios.none((e) => e.audioType == AudioType.radio))
                           Column(
                             children: [
                               _Button(
                                 onPressed: () {
-                                  di<PlayerModel>().insertIntoQueue(audio);
+                                  di<PlayerModel>().insertIntoQueue(audios);
                                   Navigator.of(context).pop();
                                   showSnackBar(
                                     context: context,
                                     content: Text(
-                                      '${l10n.addedTo} ${l10n.queue}: ${audio.artist} - ${audio.title}',
+                                      '${l10n.addedTo} ${l10n.queue}: $searchTerm',
                                     ),
                                   );
                                 },
@@ -119,10 +131,10 @@ class AudioTileBottomSheet extends StatelessWidget {
                               _Button(
                                 onPressed: () {
                                   playlistId == kLikedAudiosPageId
-                                      ? libraryModel.removeLikedAudio(audio)
-                                      : libraryModel.removeAudioFromPlaylist(
-                                          playlistId,
-                                          audio,
+                                      ? libraryModel.removeLikedAudios(audios)
+                                      : libraryModel.removeAudiosFromPlaylist(
+                                          id: playlistId,
+                                          audios: audios,
                                         );
                                   Navigator.of(context).pop();
                                 },
@@ -134,28 +146,31 @@ class AudioTileBottomSheet extends StatelessWidget {
                               ),
                             ],
                           ),
-                        Column(
-                          children: [
-                            _Button(
-                              onPressed: () {
-                                Navigator.of(context).pop();
-                                showDialog(
-                                  context: context,
-                                  builder: (context) =>
-                                      MetaDataContent.dialog(audio: audio),
-                                );
-                              },
-                              icon: Icon(Iconz.info),
-                            ),
-                            _ButtonLabel(label: l10n.showMetaData),
-                          ],
-                        ),
+                        if (audios.length == 1)
+                          Column(
+                            children: [
+                              _Button(
+                                onPressed: () {
+                                  Navigator.of(context).pop();
+                                  showDialog(
+                                    context: context,
+                                    builder: (context) =>
+                                        MetaDataContent.dialog(
+                                      audio: audios.first,
+                                    ),
+                                  );
+                                },
+                                icon: Icon(Iconz.info),
+                              ),
+                              _ButtonLabel(label: l10n.showMetaData),
+                            ],
+                          ),
                       ].map((e) => Expanded(child: e)).toList(),
                     ),
                   ),
                 ),
               ),
-              if (audio.audioType != AudioType.radio)
+              if (audios.first.audioType != AudioType.radio)
                 Expanded(
                   child: Padding(
                     padding: const EdgeInsets.only(bottom: 20),
diff --git a/lib/common/view/audio_tile_option_button.dart b/lib/common/view/audio_tile_option_button.dart
index 0e4f8b49b..65eeced5c 100644
--- a/lib/common/view/audio_tile_option_button.dart
+++ b/lib/common/view/audio_tile_option_button.dart
@@ -1,3 +1,4 @@
+import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:watch_it/watch_it.dart';
 import 'package:yaru/yaru.dart';
@@ -19,17 +20,24 @@ import 'stream_provider_share_button.dart';
 class AudioTileOptionButton extends StatelessWidget {
   const AudioTileOptionButton({
     super.key,
-    required this.audio,
+    required this.audios,
     required this.playlistId,
     required this.allowRemove,
     required this.selected,
+    required this.searchTerm,
+    required this.title,
+    required this.subTitle,
+    this.icon,
   });
 
   final String playlistId;
-  final Audio audio;
-
+  final List<Audio> audios;
+  final String searchTerm;
   final bool allowRemove;
   final bool selected;
+  final Widget title;
+  final Widget subTitle;
+  final Widget? icon;
 
   @override
   Widget build(BuildContext context) {
@@ -39,9 +47,13 @@ class AudioTileOptionButton extends StatelessWidget {
 
     if (isMobile) {
       return AudioTileBottomSheetButton(
-        audio: audio,
+        audios: audios,
         allowRemove: allowRemove,
         playlistId: playlistId,
+        searchTerm: searchTerm,
+        title: title,
+        subTitle: subTitle,
+        icon: icon,
       );
     }
 
@@ -50,14 +62,14 @@ class AudioTileOptionButton extends StatelessWidget {
       padding: EdgeInsets.zero,
       itemBuilder: (context) {
         return [
-          if (audio.audioType != AudioType.radio)
+          if (audios.none((e) => e.audioType == AudioType.radio))
             PopupMenuItem(
               onTap: () {
-                di<PlayerModel>().insertIntoQueue(audio);
+                di<PlayerModel>().insertIntoQueue(audios);
                 showSnackBar(
                   context: context,
                   content: Text(
-                    '${l10n.addedTo} ${l10n.queue}: ${audio.artist} - ${audio.title}',
+                    '${l10n.addedTo} ${l10n.queue}: $searchTerm',
                   ),
                 );
               },
@@ -69,8 +81,11 @@ class AudioTileOptionButton extends StatelessWidget {
           if (allowRemove)
             PopupMenuItem(
               onTap: () => playlistId == kLikedAudiosPageId
-                  ? libraryModel.removeLikedAudio(audio)
-                  : libraryModel.removeAudioFromPlaylist(playlistId, audio),
+                  ? libraryModel.removeLikedAudios(audios)
+                  : libraryModel.removeAudiosFromPlaylist(
+                      id: playlistId,
+                      audios: audios,
+                    ),
               child: YaruTile(
                 leading: Icon(Iconz.remove),
                 title: Text(
@@ -78,11 +93,11 @@ class AudioTileOptionButton extends StatelessWidget {
                 ),
               ),
             ),
-          if (audio.audioType != AudioType.radio)
+          if (audios.none((e) => e.audioType == AudioType.radio))
             PopupMenuItem(
               onTap: () => showDialog(
                 context: context,
-                builder: (context) => AddToPlaylistDialog(audio: audio),
+                builder: (context) => AddToPlaylistDialog(audios: audios),
               ),
               child: YaruTile(
                 leading: Icon(Iconz.plus),
@@ -94,7 +109,7 @@ class AudioTileOptionButton extends StatelessWidget {
           PopupMenuItem(
             onTap: () => showDialog(
               context: context,
-              builder: (context) => MetaDataContent.dialog(audio: audio),
+              builder: (context) => MetaDataContent.dialog(audio: audios.first),
             ),
             child: YaruTile(
               leading: Icon(Iconz.info),
@@ -103,7 +118,7 @@ class AudioTileOptionButton extends StatelessWidget {
               ),
             ),
           ),
-          if (audio.audioType != AudioType.radio)
+          if (audios.none((e) => e.audioType == AudioType.radio))
             PopupMenuItem(
               enabled: false,
               padding: EdgeInsets.zero,
@@ -116,14 +131,14 @@ class AudioTileOptionButton extends StatelessWidget {
                     iconColor: theme.colorScheme.onSurface,
                     mainAxisSize: MainAxisSize.max,
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    text: '${audio.artist ?? ''} - ${audio.title ?? ''}',
+                    text: searchTerm,
                   ),
                 ),
               ),
             ),
         ];
       },
-      icon: Icon(Iconz.viewMore),
+      icon: icon ?? Icon(Iconz.viewMore),
     );
   }
 }
@@ -131,14 +146,22 @@ class AudioTileOptionButton extends StatelessWidget {
 class AudioTileBottomSheetButton extends StatelessWidget {
   const AudioTileBottomSheetButton({
     super.key,
-    required this.audio,
+    required this.audios,
     required this.allowRemove,
     required this.playlistId,
+    required this.searchTerm,
+    required this.title,
+    required this.subTitle,
+    this.icon,
   });
 
-  final Audio audio;
+  final List<Audio> audios;
+  final String searchTerm;
   final bool allowRemove;
   final String playlistId;
+  final Widget title;
+  final Widget subTitle;
+  final Widget? icon;
 
   @override
   Widget build(BuildContext context) => IconButton(
@@ -146,11 +169,14 @@ class AudioTileBottomSheetButton extends StatelessWidget {
         onPressed: () => showModal(
           context: context,
           content: AudioTileBottomSheet(
-            audio: audio,
+            searchTerm: searchTerm,
+            title: title,
+            subTitle: subTitle,
+            audios: audios,
             allowRemove: allowRemove,
             playlistId: playlistId,
           ),
         ),
-        icon: Icon(Iconz.viewMore),
+        icon: icon ?? Icon(Iconz.viewMore),
       );
 }
diff --git a/lib/common/view/explore_online_popup.dart b/lib/common/view/explore_online_popup.dart
deleted file mode 100644
index ffbacb17c..000000000
--- a/lib/common/view/explore_online_popup.dart
+++ /dev/null
@@ -1,38 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:watch_it/watch_it.dart';
-
-import '../../app/connectivity_model.dart';
-import '../../l10n/l10n.dart';
-import 'icons.dart';
-import 'stream_provider_share_button.dart';
-
-class ExploreOnlinePopup extends StatelessWidget with WatchItMixin {
-  const ExploreOnlinePopup({
-    super.key,
-    required this.text,
-  });
-
-  final String text;
-
-  @override
-  Widget build(BuildContext context) {
-    final isOnline = watchPropertyValue((ConnectivityModel m) => m.isOnline);
-    return PopupMenuButton(
-      enabled: isOnline,
-      tooltip: context.l10n.searchOnline,
-      padding: EdgeInsets.zero,
-      itemBuilder: (c) => [
-        PopupMenuItem(
-          padding: const EdgeInsets.only(left: 5),
-          child: StreamProviderRow(
-            spacing: 5,
-            mainAxisSize: MainAxisSize.min,
-            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-            text: text,
-          ),
-        ),
-      ],
-      icon: Icon(Iconz.explore),
-    );
-  }
-}
diff --git a/lib/common/view/stream_provider_share_button.dart b/lib/common/view/stream_provider_share_button.dart
index 22eff9e75..440a91de0 100644
--- a/lib/common/view/stream_provider_share_button.dart
+++ b/lib/common/view/stream_provider_share_button.dart
@@ -44,7 +44,7 @@ class StreamProviderShareButton extends StatelessWidget {
     final clearedText =
         text?.replaceAll(RegExp(r"[:/?#\[\]@!$&'()*+,;=%]"), ' ') ?? '';
 
-    String address = buildAddress(clearedText);
+    String address = buildAddress(clearedText.trim());
 
     if (tile) {
       return ListTile(
diff --git a/lib/library/library_model.dart b/lib/library/library_model.dart
index 9104b59f0..e8e524c07 100644
--- a/lib/library/library_model.dart
+++ b/lib/library/library_model.dart
@@ -117,10 +117,16 @@ class LibraryModel extends SafeChangeNotifier implements NavigatorObserver {
 
   void updatePlaylistName(String oldName, String newName) =>
       _service.updatePlaylistName(oldName, newName);
-  void addAudioToPlaylist(String playlist, Audio audio) =>
-      _service.addAudioToPlaylist(playlist, audio);
-  void removeAudioFromPlaylist(String playlist, Audio audio) =>
-      _service.removeAudioFromPlaylist(playlist, audio);
+  void addAudiosToPlaylist({
+    required String playlist,
+    required List<Audio> audios,
+  }) =>
+      _service.addAudiosToPlaylist(id: playlist, audios: audios);
+  void removeAudiosFromPlaylist({
+    required String id,
+    required List<Audio> audios,
+  }) =>
+      _service.removeAudiosFromPlaylist(id: id, audios: audios);
   void clearPlaylist(String id) => _service.clearPlaylist(id);
   void moveAudioInPlaylist({
     required int oldIndex,
diff --git a/lib/library/library_service.dart b/lib/library/library_service.dart
index a59591d0f..cdfd5f95a 100644
--- a/lib/library/library_service.dart
+++ b/lib/library/library_service.dart
@@ -265,21 +265,33 @@ class LibraryService {
     }
   }
 
-  void addAudioToPlaylist(String id, Audio audio) {
+  void addAudiosToPlaylist({required String id, required List<Audio> audios}) {
     final playlist = _playlists[id];
-    if (playlist == null || playlist.contains(audio)) return;
-    playlist.add(audio);
+    if (playlist == null) return;
+
+    for (var audio in audios) {
+      if (!playlist.contains(audio)) {
+        playlist.add(audio);
+      }
+    }
     writeAudioMap(_playlists, kPlaylistsFileName)
         .then((_) => _propertiesChangedController.add(true));
   }
 
-  void removeAudioFromPlaylist(String id, Audio audio) {
+  void removeAudiosFromPlaylist({
+    required String id,
+    required List<Audio> audios,
+  }) {
     final playlist = _playlists[id];
-    if (playlist != null && playlist.contains(audio)) {
-      playlist.remove(audio);
-      writeAudioMap(_playlists, kPlaylistsFileName)
-          .then((_) => _propertiesChangedController.add(true));
+    if (playlist == null) return;
+
+    for (var audio in audios) {
+      if (playlist.contains(audio)) {
+        playlist.remove(audio);
+      }
     }
+    writeAudioMap(_playlists, kPlaylistsFileName)
+        .then((_) => _propertiesChangedController.add(true));
   }
 
   void clearPlaylist(String id) {
diff --git a/lib/local_audio/view/album_page.dart b/lib/local_audio/view/album_page.dart
index c985aa181..c3078579a 100644
--- a/lib/local_audio/view/album_page.dart
+++ b/lib/local_audio/view/album_page.dart
@@ -4,9 +4,9 @@ import 'package:watch_it/watch_it.dart';
 
 import '../../common/data/audio.dart';
 import '../../common/view/audio_page_type.dart';
+import '../../common/view/audio_tile_option_button.dart';
 import '../../common/view/avatar_play_button.dart';
 import '../../common/view/cover_background.dart';
-import '../../common/view/explore_online_popup.dart';
 import '../../common/view/icons.dart';
 import '../../common/view/side_bar_fall_back_image.dart';
 import '../../common/view/sliver_audio_page.dart';
@@ -165,8 +165,15 @@ class AlbumPageControlButton extends StatelessWidget {
             },
           ),
           AvatarPlayButton(audios: album, pageId: id),
-          ExploreOnlinePopup(
-            text: '${album.firstOrNull?.artist} - ${album.firstOrNull?.album}',
+          AudioTileOptionButton(
+            audios: album,
+            playlistId: id,
+            allowRemove: false,
+            selected: false,
+            searchTerm:
+                '${album.firstOrNull?.artist} - ${album.firstOrNull?.album}',
+            title: Text('${album.firstOrNull?.artist}'),
+            subTitle: Text('${album.firstOrNull?.album}'),
           ),
         ],
       ),
diff --git a/lib/local_audio/view/artist_page.dart b/lib/local_audio/view/artist_page.dart
index 5ef4850a6..3c6bf51eb 100644
--- a/lib/local_audio/view/artist_page.dart
+++ b/lib/local_audio/view/artist_page.dart
@@ -7,8 +7,8 @@ import '../../common/data/audio.dart';
 import '../../common/view/adaptive_container.dart';
 import '../../common/view/audio_page_header.dart';
 import '../../common/view/audio_page_type.dart';
+import '../../common/view/audio_tile_option_button.dart';
 import '../../common/view/avatar_play_button.dart';
-import '../../common/view/explore_online_popup.dart';
 import '../../common/view/header_bar.dart';
 import '../../common/view/icons.dart';
 import '../../common/view/like_all_icon.dart';
@@ -179,7 +179,15 @@ class _ArtistPageControlPanel extends StatelessWidget with WatchItMixin {
           ),
           AvatarPlayButton(audios: audios, pageId: pageId),
           LikeAllIcon(audios: audios),
-          ExploreOnlinePopup(text: pageId),
+          AudioTileOptionButton(
+            audios: audios,
+            playlistId: pageId,
+            allowRemove: false,
+            selected: false,
+            searchTerm: audios.first.artist ?? '',
+            title: Text(audios.first.artist ?? ''),
+            subTitle: Text(audios.first.genre ?? ''),
+          ),
         ],
       ),
     );
diff --git a/lib/player/player_model.dart b/lib/player/player_model.dart
index 37561d2f5..8065e0351 100644
--- a/lib/player/player_model.dart
+++ b/lib/player/player_model.dart
@@ -82,8 +82,8 @@ class PlayerModel extends SafeChangeNotifier {
 
   Future<void> playNext() async => _playerService.playNext();
 
-  void insertIntoQueue(Audio audio) async =>
-      _playerService.insertIntoQueue(audio);
+  void insertIntoQueue(List<Audio> newAudios) async =>
+      _playerService.insertIntoQueue(newAudios);
 
   void moveAudioInQueue(int oldIndex, int newIndex) async =>
       _playerService.moveAudioInQueue(oldIndex, newIndex);
diff --git a/lib/player/player_service.dart b/lib/player/player_service.dart
index 4540ae747..025e984ee 100644
--- a/lib/player/player_service.dart
+++ b/lib/player/player_service.dart
@@ -325,7 +325,13 @@ class PlayerService {
     await _play();
   }
 
-  void insertIntoQueue(Audio newAudio) {
+  void insertIntoQueue(List<Audio> newAudios) {
+    for (var audio in newAudios.reversed) {
+      _insertAudioIntoQueue(audio);
+    }
+  }
+
+  void _insertAudioIntoQueue(Audio newAudio) {
     if (_queue.audios.isNotEmpty &&
         !_queue.audios.contains(newAudio) &&
         _audio != null) {
diff --git a/lib/playlists/view/add_to_playlist_dialog.dart b/lib/playlists/view/add_to_playlist_dialog.dart
index d2a4e78b9..09ee404ac 100644
--- a/lib/playlists/view/add_to_playlist_dialog.dart
+++ b/lib/playlists/view/add_to_playlist_dialog.dart
@@ -7,9 +7,9 @@ import '../../l10n/l10n.dart';
 import 'add_to_playlist_navigator.dart';
 
 class AddToPlaylistDialog extends StatelessWidget {
-  const AddToPlaylistDialog({super.key, required this.audio});
+  const AddToPlaylistDialog({super.key, required this.audios});
 
-  final Audio audio;
+  final List<Audio> audios;
 
   @override
   Widget build(BuildContext context) => AlertDialog(
@@ -24,7 +24,7 @@ class AddToPlaylistDialog extends StatelessWidget {
         content: SizedBox(
           height: 200,
           width: 400,
-          child: AddToPlaylistNavigator(audio: audio),
+          child: AddToPlaylistNavigator(audios: audios),
         ),
         contentPadding: const EdgeInsets.symmetric(vertical: 20),
       );
diff --git a/lib/playlists/view/add_to_playlist_navigator.dart b/lib/playlists/view/add_to_playlist_navigator.dart
index 7e2a5d9af..b8023fd81 100644
--- a/lib/playlists/view/add_to_playlist_navigator.dart
+++ b/lib/playlists/view/add_to_playlist_navigator.dart
@@ -14,10 +14,10 @@ import 'package:watch_it/watch_it.dart';
 class AddToPlaylistNavigator extends StatelessWidget {
   const AddToPlaylistNavigator({
     super.key,
-    required this.audio,
+    required this.audios,
   });
 
-  final Audio audio;
+  final List<Audio> audios;
 
   @override
   Widget build(BuildContext context) {
@@ -28,8 +28,8 @@ class AddToPlaylistNavigator extends StatelessWidget {
       onGenerateRoute: (settings) {
         return PageRouteBuilder(
           pageBuilder: (_, __, ___) => settings.name == '/new'
-              ? _NewView(audio: audio)
-              : _PlaylistTilesList(audio: audio),
+              ? _NewView(audios: audios)
+              : _PlaylistTilesList(audios: audios),
           transitionDuration: const Duration(milliseconds: 500),
         );
       },
@@ -38,11 +38,9 @@ class AddToPlaylistNavigator extends StatelessWidget {
 }
 
 class _PlaylistTilesList extends StatelessWidget with WatchItMixin {
-  const _PlaylistTilesList({
-    required this.audio,
-  });
+  const _PlaylistTilesList({required this.audios});
 
-  final Audio audio;
+  final List<Audio> audios;
 
   @override
   Widget build(BuildContext context) {
@@ -65,7 +63,7 @@ class _PlaylistTilesList extends StatelessWidget with WatchItMixin {
         title: context.l10n.likedSongs,
         iconData: Iconz.heartFilled,
         libraryModel: di<LibraryModel>(),
-        audio: audio,
+        audios: audios,
       ),
       ...playlistNames.map(
         (playlistId) => Builder(
@@ -73,7 +71,7 @@ class _PlaylistTilesList extends StatelessWidget with WatchItMixin {
             return _PlaylistTile(
               playlistId: playlistId,
               libraryModel: di<LibraryModel>(),
-              audio: audio,
+              audios: audios,
             );
           },
         ),
@@ -93,14 +91,14 @@ class _PlaylistTilesList extends StatelessWidget with WatchItMixin {
 class _PlaylistTile extends StatelessWidget {
   const _PlaylistTile({
     required this.libraryModel,
-    required this.audio,
+    required this.audios,
     required this.playlistId,
     this.title,
     this.iconData,
   });
 
   final LibraryModel libraryModel;
-  final Audio audio;
+  final List<Audio> audios;
   final String playlistId;
   final String? title;
   final IconData? iconData;
@@ -113,7 +111,15 @@ class _PlaylistTile extends StatelessWidget {
     return ListTile(
       contentPadding: padding,
       onTap: () {
-        libraryModel.addAudioToPlaylist(playlistId, audio);
+        if (playlistId == kLikedAudiosPageId) {
+          libraryModel.addLikedAudios(audios);
+        } else {
+          libraryModel.addAudiosToPlaylist(
+            playlist: playlistId,
+            audios: audios,
+          );
+        }
+
         Navigator.of(context, rootNavigator: true).maybePop();
         showAddedToPlaylistSnackBar(
           context: context,
@@ -132,10 +138,10 @@ class _PlaylistTile extends StatelessWidget {
 
 class _NewView extends StatefulWidget {
   const _NewView({
-    required this.audio,
+    required this.audios,
   });
 
-  final Audio audio;
+  final List<Audio> audios;
 
   @override
   State<_NewView> createState() => _NewViewState();
@@ -192,7 +198,7 @@ class _NewViewState extends State<_NewView> {
                       Navigator.of(context).pop();
                       libraryModel.addPlaylist(
                         _controller.text,
-                        [widget.audio],
+                        widget.audios,
                       );
                       showAddedToPlaylistSnackBar(
                         context: context,
diff --git a/lib/playlists/view/playlst_add_audios_dialog.dart b/lib/playlists/view/playlst_add_audios_dialog.dart
index 79557f81c..a9cc72ce8 100644
--- a/lib/playlists/view/playlst_add_audios_dialog.dart
+++ b/lib/playlists/view/playlst_add_audios_dialog.dart
@@ -52,7 +52,10 @@ class _PlaylistAddAudiosDialogState extends State<PlaylistAddAudiosDialog> {
                     audios: audios,
                     onSelected: (value) {
                       if (value == null) return;
-                      libraryModel.addAudioToPlaylist(widget.playlistId, value);
+                      libraryModel.addAudiosToPlaylist(
+                        playlist: widget.playlistId,
+                        audios: [value],
+                      );
                     },
                   ),
           ),
diff --git a/lib/podcasts/view/podcast_audio_tile.dart b/lib/podcasts/view/podcast_audio_tile.dart
index fc862e8ae..91424cdc7 100644
--- a/lib/podcasts/view/podcast_audio_tile.dart
+++ b/lib/podcasts/view/podcast_audio_tile.dart
@@ -123,7 +123,7 @@ class PodcastAudioTile extends StatelessWidget {
                           onPressed: () {
                             final text =
                                 '${audio.title != null ? '${audio.album} - ' : ''}${audio.title ?? ''}';
-                            playerModel.insertIntoQueue(audio);
+                            playerModel.insertIntoQueue([audio]);
                             showSnackBar(
                               context: context,
                               content:
diff --git a/lib/podcasts/view/podcast_page.dart b/lib/podcasts/view/podcast_page.dart
index b09b3b273..9d5053ab2 100644
--- a/lib/podcasts/view/podcast_page.dart
+++ b/lib/podcasts/view/podcast_page.dart
@@ -9,8 +9,8 @@ import '../../common/view/adaptive_container.dart';
 import '../../common/view/audio_filter.dart';
 import '../../common/view/audio_page_header.dart';
 import '../../common/view/audio_page_header_html_description.dart';
+import '../../common/view/audio_tile_option_button.dart';
 import '../../common/view/avatar_play_button.dart';
-import '../../common/view/explore_online_popup.dart';
 import '../../common/view/header_bar.dart';
 import '../../common/view/icons.dart';
 import '../../common/view/safe_network_image.dart';
@@ -177,7 +177,18 @@ class _PodcastPageState extends State<PodcastPage> {
                         ),
                         PodcastRefreshButton(pageId: widget.feedUrl),
                         PodcastReorderButton(feedUrl: widget.feedUrl),
-                        if (!isMobile) ExploreOnlinePopup(text: widget.title),
+                        if (!isMobile)
+                          AudioTileOptionButton(
+                            audios: episodesWithDownloads,
+                            playlistId: widget.feedUrl,
+                            allowRemove: false,
+                            selected: false,
+                            searchTerm: widget.title,
+                            title: Text(widget.title),
+                            subTitle: Text(
+                              episodesWithDownloads.firstOrNull?.artist ?? '',
+                            ),
+                          ),
                       ],
                     ),
                   ),
diff --git a/needs_translation.json b/needs_translation.json
index 8190e2f19..4e00c1369 100644
--- a/needs_translation.json
+++ b/needs_translation.json
@@ -3371,20 +3371,6 @@
     "lastfmSecretEmpty"
   ],
 
-  "zh_CN": [
-    "saveAndAuthorize",
-    "useMoreAnimationsTitle",
-    "useMoreAnimationsDescription",
-    "showPositionDurationTitle",
-    "showPositionDurationDescription",
-    "exposeToLastfmTitle",
-    "exposeToLastfmSubTitle",
-    "lastfmApiKey",
-    "lastfmSecret",
-    "lastfmApiKeyEmpty",
-    "lastfmSecretEmpty"
-  ],
-
   "zh_HK": [
     "local",
     "saveAndAuthorize",