feat: add radio favorites functionality and UI components (#101)

* feat: add radio favorites functionality and UI components

* feat: refactor radio favorites list UI and add playing state indication

* feat: update PlayerTrackInfo to display title for remote media

* feat: update media item creation to use MediaItem constructor for better clarity

* feat: enhance PlayerManager to use fallback media art and title for remote sources; update PlayerFullView layout for better responsiveness

Author: Feichtmeier

lib/common/view/safe_network_image.dart

@@ -25,6 +25,7 @@ class SafeNetworkImage extends StatelessWidget {
     this.httpHeaders,
     this.errorListener,
     this.onImageLoaded,
+    this.placeholder,
   });
 
   final String? url;
@@ -37,6 +38,7 @@ class SafeNetworkImage extends StatelessWidget {
   final Map<String, String>? httpHeaders;
   final void Function(Object)? errorListener;
   final Function(ImageProvider imageProvider)? onImageLoaded;
+  final Widget Function(BuildContext, String)? placeholder;
 
   @override
   Widget build(BuildContext context) {
@@ -77,6 +79,7 @@ class SafeNetworkImage extends StatelessWidget {
         httpHeaders: httpHeaders,
         cacheManager: Platforms.isLinux ? XdgCacheManager() : null,
         imageUrl: url!,
+        placeholder: placeholder,
         imageBuilder: (context, imageProvider) {
           onImageLoaded?.call(imageProvider);
           return Image(

lib/common/view/ui_constants.dart

@@ -39,3 +39,5 @@ var playerButtonStyle = IconButton.styleFrom(
   foregroundColor: Colors.white,
   backgroundColor: Colors.transparent,
 );
+
+const kDefaultTileLeadingDimension = 40.0;

lib/extensions/media_x.dart

@@ -16,6 +16,9 @@ extension MediaX on Media {
   static final _audioMetadataCache = <String, AudioMetadata?>{};
   static final _audioAlbumArtUriCache = <String, Uri?>{};
   static final _uuidToMediaCache = <String, Media>{};
+  static Media? getMediaByUuid(String uuid) => _uuidToMediaCache[uuid];
+  static void addToCache(Media media) =>
+      _uuidToMediaCache[media.stationId] = media;
   static final _mediaToStationCache = <Media, Station>{};
 
   static Media fromStation(Station station) {
@@ -56,19 +59,30 @@ extension MediaX on Media {
   }
 
   String get artist =>
-      (isLocal ? _localMetadata?.artist : _mediaToStationCache[this]?.name) ??
+      (isLocal
+          ? _localMetadata?.artist
+          : '${_mediaToStationCache[this]?.bitrate ?? 0} kbps') ??
       'Unknown Artist';
 
-  String get album =>
+  String get album => _localMetadata?.album ?? 'Unknown Album';
+
+  String get genre =>
       (isLocal
-          ? _localMetadata?.album
-          : _mediaToStationCache[this]?.tags ?? '') ??
-      'Unknown Album';
+          ? _localMetadata?.genres.join(', ')
+          : _mediaToStationCache[this]?.tags) ??
+      'Unknown Genre';
+
+  String? get remoteTagsFull =>
+      isLocal ? null : genre.split(',').map((e) => e.trim()).join(', ');
+
+  String? getRemoteTags(int count) => isLocal
+      ? null
+      : genre.split(',').map((e) => e.trim()).take(count).join(', ');
 
   String get title =>
       (isLocal && _localMetadata?.title != null
           ? _localMetadata?.title
-          : _mediaToStationCache[this]?.language) ??
+          : _mediaToStationCache[this]?.name.toString()) ??
       basenameWithoutExtension(uri.toString());
 
   Duration? get duration => _localMetadata?.duration;

lib/l10n/app_en.arb

@@ -3155,5 +3155,11 @@
   "favoriteRemoved": "Favorite removed",
   "@favoriteRemoved": {},
   "notSupportedByServer": "Not supported by server",
-  "@notSupportedByServer": {}
+  "@notSupportedByServer": {},
+  "radioStation": "Radio station",
+  "@radioStation": {},
+  "radioStations": "Radio stations",
+  "@radioStations": {},
+  "noRadioBrowserConnected": "No Radio Browser connected",
+  "@noRadioBrowserConnected": {}
 }

lib/l10n/app_localizations.dart

@@ -4323,6 +4323,24 @@ abstract class AppLocalizations {
   /// In en, this message translates to:
   /// **'Not supported by server'**
   String get notSupportedByServer;
+
+  /// No description provided for @radioStation.
+  ///
+  /// In en, this message translates to:
+  /// **'Radio station'**
+  String get radioStation;
+
+  /// No description provided for @radioStations.
+  ///
+  /// In en, this message translates to:
+  /// **'Radio stations'**
+  String get radioStations;
+
+  /// No description provided for @noRadioBrowserConnected.
+  ///
+  /// In en, this message translates to:
+  /// **'No Radio Browser connected'**
+  String get noRadioBrowserConnected;
 }
 
 class _AppLocalizationsDelegate

lib/l10n/app_localizations_de.dart

@@ -2468,4 +2468,13 @@ class AppLocalizationsDe extends AppLocalizations {
 
   @override
   String get notSupportedByServer => 'Not supported by server';
+
+  @override
+  String get radioStation => 'Radio station';
+
+  @override
+  String get radioStations => 'Radio stations';
+
+  @override
+  String get noRadioBrowserConnected => 'No Radio Browser connected';
 }

lib/l10n/app_localizations_en.dart

@@ -2468,4 +2468,13 @@ class AppLocalizationsEn extends AppLocalizations {
 
   @override
   String get notSupportedByServer => 'Not supported by server';
+
+  @override
+  String get radioStation => 'Radio station';
+
+  @override
+  String get radioStations => 'Radio stations';
+
+  @override
+  String get noRadioBrowserConnected => 'No Radio Browser connected';
 }

lib/l10n/app_localizations_sv.dart

@@ -2482,4 +2482,13 @@ class AppLocalizationsSv extends AppLocalizations {
 
   @override
   String get notSupportedByServer => 'Not supported by server';
+
+  @override
+  String get radioStation => 'Radio station';
+
+  @override
+  String get radioStations => 'Radio stations';
+
+  @override
+  String get noRadioBrowserConnected => 'No Radio Browser connected';
 }

lib/player/player_manager.dart

@@ -46,13 +46,20 @@ class PlayerManager extends BaseAudioHandler with SeekHandler {
     String? remoteSourceArtUrl,
     String? remoteSourceTitle,
   }) {
+    String? remoteMediaFallbackArt;
+    String? remoteMediaFallbackTitle;
+
+    if (currentMedia != null && !currentMedia!.isLocal) {
+      remoteMediaFallbackArt = mediaItem.value?.artUri?.toString();
+      remoteMediaFallbackTitle = mediaItem.value?.title;
+    }
     playerViewState.value = playerViewState.value.copyWith(
       fullMode: fullMode,
       showPlayerExplorer: showPlayerExplorer,
       explorerIndex: explorerIndex,
       color: color,
-      remoteSourceArtUrl: remoteSourceArtUrl,
-      remoteSourceTitle: remoteSourceTitle,
+      remoteSourceArtUrl: remoteSourceArtUrl ?? remoteMediaFallbackArt,
+      remoteSourceTitle: remoteSourceTitle ?? remoteMediaFallbackTitle,
     );
   }
 
@@ -152,7 +159,10 @@ class PlayerManager extends BaseAudioHandler with SeekHandler {
     bool play = true,
   }) async {
     if (mediaList.isEmpty) return;
-    updateViewMode(remoteSourceArtUrl: mediaList.firstOrNull?.remoteAlbumArt);
+    updateViewMode(
+      remoteSourceArtUrl: mediaList.firstOrNull?.remoteAlbumArt,
+      remoteSourceTitle: mediaList.firstOrNull?.title,
+    );
     await _player.open(Playlist(mediaList, index: index));
   }
 

lib/player/view/player_album_art.dart

@@ -43,13 +43,7 @@ class PlayerAlbumArt extends StatelessWidget {
       return SizedBox(
         width: dim,
         height: dim,
-        child: PlayerRemoteSourceImage(
-          height: dim,
-          width: dim,
-          fit: fit,
-          fallBackIcon: const Icon(YaruIcons.music_note),
-          errorIcon: const Icon(YaruIcons.music_note),
-        ),
+        child: PlayerRemoteSourceImage(height: dim, width: dim, fit: fit),
       );
     }
 
@@ -63,41 +57,52 @@ class PlayerRemoteSourceImage extends StatelessWidget with WatchItMixin {
     required this.height,
     required this.width,
     required this.fit,
-    required this.fallBackIcon,
-    required this.errorIcon,
   });
 
   final double height;
   final double width;
   final BoxFit? fit;
-  final Widget fallBackIcon;
-  final Widget errorIcon;
 
   @override
   Widget build(BuildContext context) {
-    final theme = context.theme;
-
     final remoteSourceArtUrl = watchValue(
       (PlayerManager p) =>
           p.playerViewState.select((e) => e.remoteSourceArtUrl),
     );
 
-    return Container(
-      color: theme.cardColor.scale(
-        lightness: theme.colorScheme.isLight ? -0.15 : 0.3,
+    final color = watchValue(
+      (PlayerManager p) => p.playerViewState.select((e) => e.color),
+    );
+
+    return SafeNetworkImage(
+      placeholder: (context, url) => Center(
+        child: SizedBox(
+          width: width * 0.3,
+          height: width * 0.3,
+          child: CircularProgressIndicator(
+            color: color?.withValues(alpha: 0.5),
+            valueColor: AlwaysStoppedAnimation<Color>(
+              color ?? getPlayerIconColor(context.theme),
+            ),
+          ),
+        ),
+      ),
+      onImageLoaded: di<PlayerManager>().setRemoteColorFromImageProvider,
+      url: remoteSourceArtUrl,
+      filterQuality: FilterQuality.medium,
+      fit: fit ?? BoxFit.scaleDown,
+      fallBackIcon: Icon(
+        YaruIcons.music_note,
+        size: width * 0.8,
+        color: color ?? getPlayerIconColor(context.theme),
+      ),
+      errorIcon: Icon(
+        YaruIcons.music_note,
+        size: width * 0.8,
+        color: color ?? getPlayerIconColor(context.theme),
       ),
       height: height,
       width: width,
-      child: SafeNetworkImage(
-        onImageLoaded: di<PlayerManager>().setRemoteColorFromImageProvider,
-        url: remoteSourceArtUrl,
-        filterQuality: FilterQuality.medium,
-        fit: fit ?? BoxFit.scaleDown,
-        fallBackIcon: fallBackIcon,
-        errorIcon: errorIcon,
-        height: height,
-        width: width,
-      ),
     );
   }
 }