media controls: use blurred cover art for bg

.config/quickshell/modules/mediaControls/PlayerControl.qml

@@ -103,28 +103,39 @@ Item { // Player instance
 
     }
 
-    Rectangle {
+    Item {
         id: background
         anchors.fill: parent
         anchors.margins: Appearance.sizes.elevationMargin
-        color: blendedColors.colLayer0
-        radius: root.popupRounding
 
-        LinearGradient {
+        FastBlur {
             anchors.fill: parent
+            source: Image {
+                id: blurredArt
+                anchors.fill: parent
+                visible: false
+                source: playerController.artUrl
+                sourceSize.width: parent.width
+                sourceSize.height: parent.height
+                fillMode: Image.PreserveAspectCrop
+                cache: false
+                antialiasing: true
+                asynchronous: true
+            }
+            radius: 128 // Increase for more blur
             layer.enabled: true
             layer.effect: OpacityMask {
                 maskSource: Rectangle {
-                    width: background.width
+                    width: blurredArt.width
-                    height: background.height
+                    height: blurredArt.height
                     radius: root.popupRounding
                 }
             }
-            start: Qt.point(0, 0)
+            layer.smooth: true
-            end: Qt.point(background.width, background.height)
+
-            gradient: Gradient {
+            Rectangle {
-                GradientStop { position: 0.0; color: ColorUtils.transparentize(artDominantColor, 0.6) }
+                anchors.fill: parent
-                GradientStop { position: 0.4; color: ColorUtils.transparentize(artDominantColor, 0.8) }
+                color: ColorUtils.transparentize(blendedColors.colLayer0, 0.25)
             }
         }