background: fix visualiser blur + allow disable

Fixes #807

README.md

@@ -306,6 +306,7 @@ default, you must create it manually.
         },
         "enabled": true,
         "visualiser": {
+            "blur": false,
             "enabled": false,
             "autoHide": true,
             "rounding": 1,

config/BackgroundConfig.qml

@@ -12,6 +12,7 @@ JsonObject {
     component Visualiser: JsonObject {
         property bool enabled: false
         property bool autoHide: true
+        property bool blur: false
         property real rounding: 1
         property real spacing: 1
     }

modules/background/Background.qml

@@ -35,29 +35,10 @@ Loader {
                 id: wallpaper
             }
 
-            Loader {
+            Visualiser {
-                readonly property bool shouldBeActive: Config.background.visualiser.enabled && (!Config.background.visualiser.autoHide || Hypr.monitorFor(win.modelData).activeWorkspace.toplevels.values.every(t => t.lastIpcObject.floating)) ? 1 : 0
-                property real offset: shouldBeActive ? 0 : win.modelData.height * 0.2
-
                 anchors.fill: parent
-                anchors.topMargin: offset
+                screen: win.modelData
-                anchors.bottomMargin: -offset
+                wallpaper: wallpaper
-                opacity: shouldBeActive ? 1 : 0
-                active: opacity > 0
-                asynchronous: true
-
-                sourceComponent: Visualiser {
-                    screen: win.modelData
-                    wallpaper: wallpaper
-                }
-
-                Behavior on offset {
-                    Anim {}
-                }
-
-                Behavior on opacity {
-                    Anim {}
-                }
             }
 
             Loader {

modules/background/Visualiser.qml

@@ -15,19 +15,24 @@ Item {
     required property ShellScreen screen
     required property Wallpaper wallpaper
 
-    ServiceRef {
+    readonly property bool shouldBeActive: Config.background.visualiser.enabled && (!Config.background.visualiser.autoHide || Hypr.monitorFor(screen).activeWorkspace.toplevels.values.every(t => t.lastIpcObject.floating))
-        service: Audio.cava
+    property real offset: shouldBeActive ? 0 : screen.height * 0.2
-    }
 
-    MultiEffect {
+    opacity: shouldBeActive ? 1 : 0
+
+    Loader {
         anchors.fill: parent
-        source: root.wallpaper
+        active: root.opacity > 0 && Config.background.visualiser.blur
-        maskSource: wrapper
+
-        maskEnabled: true
+        sourceComponent: MultiEffect {
-        blurEnabled: true
+            source: root.wallpaper
-        blur: 1
+            maskSource: wrapper
-        blurMax: 32
+            maskEnabled: true
-        autoPaddingEnabled: false
+            blurEnabled: true
+            blur: 1
+            blurMax: 32
+            autoPaddingEnabled: false
+        }
     }
 
     Item {
@@ -36,27 +41,53 @@ Item {
         anchors.fill: parent
         layer.enabled: true
 
-        Item {
+        Loader {
-            id: content
-
             anchors.fill: parent
-            anchors.margins: Config.border.thickness
+            anchors.topMargin: root.offset
-            anchors.leftMargin: Visibilities.bars.get(root.screen).exclusiveZone + Appearance.spacing.small * Config.background.visualiser.spacing
+            anchors.bottomMargin: -root.offset
 
-            Side {}
+            active: root.opacity > 0
-            Side {
-                isRight: true
-            }
 
-            Behavior on anchors.leftMargin {
+            sourceComponent: Item {
-                Anim {}
+                ServiceRef {
+                    service: Audio.cava
+                }
+
+                Item {
+                    id: content
+
+                    anchors.fill: parent
+                    anchors.margins: Config.border.thickness
+                    anchors.leftMargin: Visibilities.bars.get(root.screen).exclusiveZone + Appearance.spacing.small * Config.background.visualiser.spacing
+
+                    Side {
+                        content: content
+                    }
+                    Side {
+                        content: content
+                        isRight: true
+                    }
+
+                    Behavior on anchors.leftMargin {
+                        Anim {}
+                    }
+                }
             }
         }
     }
 
+    Behavior on offset {
+        Anim {}
+    }
+
+    Behavior on opacity {
+        Anim {}
+    }
+
     component Side: Repeater {
         id: side
 
+        required property Item content
         property bool isRight
 
         model: Config.services.visualiserBars
@@ -69,11 +100,11 @@ Item {
 
             clip: true
 
-            x: modelData * ((content.width * 0.4) / Config.services.visualiserBars) + (side.isRight ? content.width * 0.6 : 0)
+            x: modelData * ((side.content.width * 0.4) / Config.services.visualiserBars) + (side.isRight ? side.content.width * 0.6 : 0)
-            implicitWidth: (content.width * 0.4) / Config.services.visualiserBars - Appearance.spacing.small * Config.background.visualiser.spacing
+            implicitWidth: (side.content.width * 0.4) / Config.services.visualiserBars - Appearance.spacing.small * Config.background.visualiser.spacing
 
-            y: content.height - height
+            y: side.content.height - height
-            implicitHeight: bar.value * content.height * 0.4
+            implicitHeight: bar.value * side.content.height * 0.4
 
             color: "transparent"
             topLeftRadius: Appearance.rounding.small * Config.background.visualiser.rounding
@@ -107,7 +138,7 @@ Item {
                 anchors.left: parent.left
                 anchors.right: parent.right
                 y: parent.height - height
-                implicitHeight: content.height * 0.4
+                implicitHeight: side.content.height * 0.4
             }
 
             Behavior on value {