background: add visualiser

Also dashboard.visualiserBars -> services.visualiserBars

4 files changed, 157 insertions, 4 deletions

diff --git a/modules/background/Background.qml b/modules/background/Background.qml
index 3da8bf9..bdba570 100644
--- a/modules/background/Background.qml
+++ b/modules/background/Background.qml
@@ -1,4 +1,8 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
 import qs.components.containers
+import qs.services
 import qs.config
 import Quickshell
 import Quickshell.Wayland
@@ -27,7 +31,34 @@ Loader {
             anchors.left: true
             anchors.right: true
 
-            Wallpaper {}
+            Wallpaper {
+                id: wallpaper
+            }
+
+            Loader {
+                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
+                anchors.bottomMargin: -offset
+                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 {
                 anchors.right: parent.right
diff --git a/modules/background/Visualiser.qml b/modules/background/Visualiser.qml
new file mode 100644
index 0000000..6dd0a12
--- /dev/null
+++ b/modules/background/Visualiser.qml
@@ -0,0 +1,120 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.components.misc
+import qs.services
+import qs.config
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Effects
+
+Item {
+    id: root
+
+    required property ShellScreen screen
+    required property Wallpaper wallpaper
+
+    Ref {
+        service: Cava
+    }
+
+    MultiEffect {
+        anchors.fill: parent
+        source: root.wallpaper
+        maskSource: wrapper
+        maskEnabled: true
+        blurEnabled: true
+        blur: 1
+        blurMax: 32
+        autoPaddingEnabled: false
+    }
+
+    Item {
+        id: wrapper
+
+        anchors.fill: parent
+        layer.enabled: true
+
+        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 {}
+            Side {
+                isRight: true
+            }
+
+            Behavior on anchors.leftMargin {
+                Anim {}
+            }
+        }
+    }
+
+    component Side: Repeater {
+        id: side
+
+        property bool isRight
+
+        model: Config.services.visualiserBars
+
+        ClippingRectangle {
+            id: bar
+
+            required property int modelData
+            property real value: Math.max(1, Math.min(100, Cava.values[side.isRight ? modelData : side.count - modelData - 1])) / 100
+
+            clip: true
+
+            x: modelData * ((content.width * 0.4) / Config.services.visualiserBars) + (side.isRight ? content.width * 0.6 : 0)
+            implicitWidth: (content.width * 0.4) / Config.services.visualiserBars - Appearance.spacing.small * Config.background.visualiser.spacing
+
+            y: content.height - height
+            implicitHeight: bar.value * content.height * 0.4
+
+            color: "transparent"
+            topLeftRadius: Appearance.rounding.small * Config.background.visualiser.rounding
+            topRightRadius: Appearance.rounding.small * Config.background.visualiser.rounding
+
+            Rectangle {
+                topLeftRadius: parent.topLeftRadius
+                topRightRadius: parent.topRightRadius
+
+                gradient: Gradient {
+                    orientation: Gradient.Vertical
+
+                    GradientStop {
+                        position: 0
+                        color: Qt.alpha(Colours.palette.m3primary, 0.7)
+
+                        Behavior on color {
+                            CAnim {}
+                        }
+                    }
+                    GradientStop {
+                        position: 1
+                        color: Qt.alpha(Colours.palette.m3inversePrimary, 0.7)
+
+                        Behavior on color {
+                            CAnim {}
+                        }
+                    }
+                }
+
+                anchors.left: parent.left
+                anchors.right: parent.right
+                y: parent.height - height
+                implicitHeight: content.height * 0.4
+            }
+
+            Behavior on value {
+                Anim {
+                    duration: Appearance.anim.durations.small
+                }
+            }
+        }
+    }
+}
diff --git a/modules/dashboard/Media.qml b/modules/dashboard/Media.qml
index 9e61094..d2699a2 100644
--- a/modules/dashboard/Media.qml
+++ b/modules/dashboard/Media.qml
@@ -79,7 +79,7 @@ Item {
         id: visualiserBars
 
         model: Array.from({
-            length: Config.dashboard.visualiserBars
+            length: Config.services.visualiserBars
         }, (_, i) => i)
 
         ShapePath {
@@ -88,13 +88,13 @@ Item {
             required property int modelData
             readonly property int value: Math.max(1, Math.min(100, Cava.values[modelData]))
 
-            readonly property real angle: modelData * 2 * Math.PI / Config.dashboard.visualiserBars
+            readonly property real angle: modelData * 2 * Math.PI / Config.services.visualiserBars
             readonly property real magnitude: value / 100 * Config.dashboard.sizes.mediaVisualiserSize
             readonly property real cos: Math.cos(angle)
             readonly property real sin: Math.sin(angle)
 
             capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
-            strokeWidth: 360 / Config.dashboard.visualiserBars - Appearance.spacing.small / 4
+            strokeWidth: 360 / Config.services.visualiserBars - Appearance.spacing.small / 4
             strokeColor: Colours.palette.m3primary
 
             startX: visualiser.centerX + (visualiser.innerX + strokeWidth / 2) * cos
diff --git a/modules/drawers/Drawers.qml b/modules/drawers/Drawers.qml
index b40eabe..648e280 100644
--- a/modules/drawers/Drawers.qml
+++ b/modules/drawers/Drawers.qml
@@ -139,6 +139,8 @@ Variants {
                     screen: scope.modelData
                     visibilities: visibilities
                     popouts: panels.popouts
+
+                    Component.onCompleted: Visibilities.bars.set(scope.modelData, this)
                 }
             }
         }