media controls: use multieffect instead of qt5 graphical effects

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

@@ -3,8 +3,8 @@ import "root:/modules/common/widgets"
 import "root:/services"
 import "root:/modules/common/functions/string_utils.js" as StringUtils
 import "root:/modules/common/functions/color_utils.js" as ColorUtils
-import Qt5Compat.GraphicalEffects
 import QtQuick
+import QtQuick.Effects
 import QtQuick.Layouts
 import QtQuick.Controls
 import Quickshell
@@ -91,7 +91,7 @@ Item { // Player instance
         property color colLayer1: ColorUtils.mix(Appearance.colors.colLayer1, artDominantColor, 0.5)
         property color colOnLayer0: ColorUtils.mix(Appearance.colors.colOnLayer0, artDominantColor, 0.5)
         property color colOnLayer1: ColorUtils.mix(Appearance.colors.colOnLayer1, artDominantColor, 0.5)
-        property color colSubtext: ColorUtils.mix(Appearance.colors.colOnLayer1, artDominantColor, 0.1)
+        property color colSubtext: ColorUtils.mix(Appearance.colors.colOnLayer1, artDominantColor, 0.5)
         property color colPrimary: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.m3colors.m3primary, artDominantColor), artDominantColor, 0.5)
         property color colPrimaryHover: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.colors.colPrimaryHover, artDominantColor), artDominantColor, 0.3)
         property color colPrimaryActive: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.colors.colPrimaryActive, artDominantColor), artDominantColor, 0.3)
@@ -103,39 +103,49 @@ Item { // Player instance
 
     }
 
-    Item {
+    ClippingRectangle { // Background
         id: background
         anchors.fill: parent
         anchors.margins: Appearance.sizes.elevationMargin
+        color: blendedColors.colLayer0
+        radius: root.popupRounding
 
-        FastBlur {
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            source: background
+            anchors.fill: background
+            shadowEnabled: true
+            shadowColor: Appearance.colors.colShadow
+            shadowVerticalOffset: 1
+            shadowBlur: 0.5
+        }
+
+        Image {
+            id: blurredArt
             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: 100 // Increase for more blur
+            visible: true
+            source: playerController.artUrl
+            sourceSize.width: background.width
+            sourceSize.height: background.height
+            fillMode: Image.PreserveAspectCrop
+            cache: false
+            antialiasing: true
+            asynchronous: true
+
             layer.enabled: true
-            layer.effect: OpacityMask {
-                maskSource: Rectangle {
-                    width: background.width
-                    height: background.height
-                    radius: root.popupRounding
-                }
+            layer.effect: MultiEffect {
+                source: blurredArt
+                anchors.fill: blurredArt
+                saturation: 0.2
+                blurEnabled: true
+                blurMax: 100
+                blur: 1
             }
-            layer.smooth: true
 
             Rectangle {
                 anchors.fill: parent
                 color: ColorUtils.transparentize(blendedColors.colLayer0, 0.25)
+                radius: root.popupRounding
             }
         }
 
@@ -144,7 +154,7 @@ Item { // Player instance
             anchors.margins: root.contentPadding
             spacing: 15
 
-            Rectangle { // Art backgrounmd
+            ClippingRectangle { // Art backgrounmd
                 Layout.fillHeight: true
                 implicitWidth: height
                 radius: root.artRounding
@@ -165,15 +175,6 @@ Item { // Player instance
                     height: size
                     sourceSize.width: size
                     sourceSize.height: size
-
-                    layer.enabled: true
-                    layer.effect: OpacityMask {
-                        maskSource: Rectangle {
-                            width: mediaArt.size
-                            height: mediaArt.size
-                            radius: root.artRounding
-                        }
-                    }
                 }
             }
 
@@ -278,14 +279,4 @@ Item { // Player instance
             }
         }
     }
-
-    DropShadow {
-        anchors.fill: background
-        source: background
-        horizontalOffset: 0
-        verticalOffset: 2
-        radius: Appearance.sizes.elevationMargin
-        samples: Appearance.sizes.elevationMargin * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs
-        color: Appearance.colors.colShadow
-    }
 }