Mitigate images without background (#375)

Author: Feichtmeier

lib/src/player/bottom_player_image.dart

@@ -1,8 +1,11 @@
+import 'package:flutter/material.dart';
+import 'package:media_kit_video/media_kit_video.dart';
+
 import '../../build_context_x.dart';
 import '../../common.dart';
+import '../../constants.dart';
 import '../../data.dart';
-import 'package:flutter/material.dart';
-import 'package:media_kit_video/media_kit_video.dart';
+import '../../theme_data_x.dart';
 
 class BottomPlayerImage extends StatelessWidget {
   const BottomPlayerImage({
@@ -66,7 +69,8 @@ class BottomPlayerImage extends StatelessWidget {
           ),
         );
       } else if (audio?.imageUrl != null || audio?.albumArtUrl != null) {
-        return SizedBox(
+        return Container(
+          color: theme.isLight ? kCardColorLight : kCardColorDark,
           height: size,
           width: size,
           child: SafeNetworkImage(
@@ -77,7 +81,7 @@ class BottomPlayerImage extends StatelessWidget {
             ),
             url: audio?.imageUrl ?? audio?.albumArtUrl,
             filterQuality: FilterQuality.medium,
-            fit: BoxFit.cover,
+            fit: BoxFit.scaleDown,
           ),
         );
       } else {

lib/src/player/full_height_player_image.dart

@@ -4,6 +4,7 @@ import '../../build_context_x.dart';
 import '../../common.dart';
 import '../../constants.dart';
 import '../../data.dart';
+import '../../theme_data_x.dart';
 
 class FullHeightPlayerImage extends StatelessWidget {
   const FullHeightPlayerImage({
@@ -45,17 +46,22 @@ class FullHeightPlayerImage extends StatelessWidget {
           color: theme.hintColor,
         );
       } else if (audio?.imageUrl != null || audio?.albumArtUrl != null) {
-        image = SafeNetworkImage(
-          url: audio?.imageUrl ?? audio?.albumArtUrl,
-          filterQuality: FilterQuality.medium,
-          fit: BoxFit.cover,
-          fallBackIcon: Icon(
-            iconData,
-            size: fullHeightPlayerImageSize * 0.7,
-            color: theme.hintColor,
-          ),
+        image = Container(
           height: size.width,
           width: size.width,
+          color: theme.isLight ? kCardColorLight : kCardColorDark,
+          child: SafeNetworkImage(
+            url: audio?.imageUrl ?? audio?.albumArtUrl,
+            filterQuality: FilterQuality.medium,
+            fit: BoxFit.scaleDown,
+            fallBackIcon: Icon(
+              iconData,
+              size: fullHeightPlayerImageSize * 0.7,
+              color: theme.hintColor,
+            ),
+            height: size.width,
+            width: size.width,
+          ),
         );
       } else {
         image = Icon(

lib/src/player/player_track.dart

@@ -22,7 +22,6 @@ class PlayerTrack extends StatelessWidget {
     final position = context.select((PlayerModel m) => m.position);
     final setPosition = playerModel.setPosition;
     final duration = context.select((PlayerModel m) => m.duration);
-    final color = context.select((PlayerModel m) => m.color);
     final seek = playerModel.seek;
 
     bool sliderActive = duration != null &&
@@ -42,15 +41,9 @@ class PlayerTrack extends StatelessWidget {
         minThumbSeparation: 0,
         trackShape: superNarrow ? const RectangularSliderTrackShape() : null,
         trackHeight: superNarrow ? 4 : 2,
-        inactiveTrackColor: color != null
-            ? theme.colorScheme.onSurface.withOpacity(0.35)
-            : theme.colorScheme.primary.withOpacity(0.5),
-        activeTrackColor: color != null
-            ? theme.colorScheme.onSurface.withOpacity(0.8)
-            : theme.colorScheme.primary,
-        overlayColor: color != null
-            ? theme.colorScheme.onSurface
-            : theme.colorScheme.primary,
+        inactiveTrackColor: theme.colorScheme.onSurface.withOpacity(0.35),
+        activeTrackColor: theme.colorScheme.onSurface.withOpacity(0.8),
+        overlayColor: theme.colorScheme.onSurface,
         overlayShape: RoundSliderThumbShape(
           elevation: 3,
           enabledThumbRadius: superNarrow ? 0 : 5.0,

lib/src/radio/radio_page.dart

@@ -289,11 +289,11 @@ class RadioFallBackIcon extends StatelessWidget {
             getAlphabetColor(
               station?.title ?? station?.album ?? '',
               fallBackColor,
-            ).scale(lightness: light ? 0 : -0.4),
+            ).scale(lightness: light ? 0 : -0.4, saturation: -0.5),
             getAlphabetColor(
               station?.title ?? station?.album ?? '',
               fallBackColor,
-            ).scale(lightness: light ? -0.1 : -0.2),
+            ).scale(lightness: light ? -0.1 : -0.2, saturation: -0.5),
           ],
         ),
       ),

lib/src/radio/station_page.dart

@@ -48,7 +48,8 @@ class StationPage extends StatelessWidget {
           );
     return ClipRRect(
       borderRadius: BorderRadius.circular(5),
-      child: SizedBox(
+      child: Container(
+        color: context.t.isLight ? kCardColorLight : kCardColorDark,
         height: sideBarImageSize,
         width: sideBarImageSize,
         child: SafeNetworkImage(

lib/src/settings/about_tile.dart

@@ -47,7 +47,7 @@ class AboutTile extends StatelessWidget {
             return SizedBox(
               height: 400,
               width: 300,
-              child: MarkdownBody(
+              child: Markdown(
                 data: 'Contributors:\n ${snapshot.data!}',
                 onTapLink: (text, href, title) =>
                     href != null ? launchUrl(Uri.parse(href)) : null,

lib/src/theme.dart

@@ -148,5 +148,6 @@ const alphabetColors = {
 };
 
 Color getAlphabetColor(String text, [Color fallBackColor = Colors.black]) {
-  return alphabetColors[text[0].toUpperCase()] ?? fallBackColor;
+  final letter = text.isEmpty ? null : text[0];
+  return alphabetColors[letter] ?? fallBackColor;
 }