Handle image loading errors

lib/ui/cover_image.dart

@@ -9,12 +9,14 @@ class CoverImage extends StatelessWidget {
   final double? width;
   final double? height;
   final BoxFit? fit;
+  final Icon? icon;
 
   const CoverImage({
     Key? key,
     required this.music,
     this.width,
     this.height,
+    this.icon,
     this.fit,
   }) : super(key: key);
 
@@ -28,8 +30,20 @@ class CoverImage extends StatelessWidget {
       cacheKey: music.coverCacheKey,
       httpHeaders: {"Token": config.apiToken},
       useOldImageOnUrlChange: false,
-      placeholder: (c, s) => const Center(child: CircularProgressIndicator()),
+      progressIndicatorBuilder: (c, s, p) => _loadingWidget(p.progress),
       fit: fit,
+      errorWidget: (c, s, e) => _loadingWidget(null),
     );
   }
+
+  Widget _loadingWidget(double? progress) => Container(
+        color: Colors.black,
+        width: width,
+        height: height,
+        child: Center(
+          child: progress == null
+              ? icon
+              : CircularProgressIndicator(value: progress),
+        ),
+      );
 }

lib/ui/music_player.dart

@@ -1,4 +1,5 @@
 import 'dart:math';
+import 'dart:ui';
 
 import 'package:flutter/material.dart';
 import 'package:music_web_player/api.dart';
@@ -43,6 +44,18 @@ class _MusicPlayerState extends State<MusicPlayer> {
             height: constraints.maxHeight,
             fit: BoxFit.cover,
           ),
+
+          ClipRRect(
+              // Clip it cleanly.
+              child: BackdropFilter(
+            filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
+            child: Container(
+              color: Colors.black.withOpacity(0.3),
+              alignment: Alignment.center,
+              child: Container(),
+            ),
+          )),
+
           _buildFront(),
         ],
       ),