More wallpaper effects + per-monitor auto cycling

Widgets/DankAlbumArt.qml

@@ -159,8 +159,8 @@ Item {
 
         imageSource: artUrl || lastValidArtUrl || ""
         fallbackIcon: "album"
-        borderColor: Theme.primary
-        borderWidth: 2
+        border.color: Theme.primary
+        border.width: 2
 
         onImageSourceChanged: {
             if (imageSource && imageStatus !== Image.Error) {

Widgets/DankCircularImage.qml

@@ -1,92 +1,84 @@
 import QtQuick
+import QtQuick.Effects
 import Quickshell
 import qs.Common
 import qs.Widgets
 
-Item {
+Rectangle {
     id: root
 
     property string imageSource: ""
     property string fallbackIcon: "notifications"
     property string fallbackText: ""
     property bool hasImage: imageSource !== ""
-    property alias imageStatus: sourceImage.status
-    property color borderColor: "transparent"
-    property real borderWidth: 0
-    property real imageOpacity: 1.0
+    property alias imageStatus: internalImage.status
 
-    width: 64
-    height: 64
+    radius: width / 2
+    color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
+    border.color: "transparent"
+    border.width: 0
 
-    Rectangle {
-        id: background
+    Image {
+        id: internalImage
         anchors.fill: parent
-        color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
-        radius: width * 0.5
+        anchors.margins: 2
+        asynchronous: true
+        fillMode: Image.PreserveAspectCrop
+        smooth: true
+        mipmap: true
+        cache: true
+        visible: false
+        source: root.imageSource
 
-        Image {
-            id: sourceImage
-            anchors.fill: parent
-            anchors.margins: 2
-            source: root.imageSource
-            visible: false
-            fillMode: Image.PreserveAspectCrop
-            smooth: true
-            mipmap: true
-            asynchronous: true
-            antialiasing: true
-            cache: true
-
-            Component.onCompleted: {
-                sourceSize.width = 128
-                sourceSize.height = 128
-            }
+        Component.onCompleted: {
+            sourceSize.width = 128
+            sourceSize.height = 128
         }
+    }
 
-        ShaderEffect {
-            anchors.fill: parent
-            anchors.margins: 2
-            visible: sourceImage.status === Image.Ready && root.imageSource !== ""
+    MultiEffect {
+        anchors.fill: parent
+        anchors.margins: 2
+        source: internalImage
+        maskEnabled: true
+        maskSource: circularMask
+        visible: internalImage.status === Image.Ready && root.imageSource !== ""
+        maskThresholdMin: 0.5
+        maskSpreadAtMin: 1
+    }
 
-            property var source: ShaderEffectSource {
-                sourceItem: sourceImage
-                hideSource: true
-                live: true
-                recursive: false
-                format: ShaderEffectSource.RGBA
-            }
-
-            property real imageOpacity: root.imageOpacity
-
-            fragmentShader: Qt.resolvedUrl("../Shaders/qsb/circled_image.frag.qsb")
-            supportsAtlasTextures: false
-            blending: true
-        }
-
-        DankIcon {
-            anchors.centerIn: parent
-            name: root.fallbackIcon
-            size: parent.width * 0.5
-            color: Theme.surfaceVariantText
-            visible: sourceImage.status !== Image.Ready && root.imageSource === "" && root.fallbackIcon !== ""
-        }
-
-        StyledText {
-            anchors.centerIn: parent
-            visible: root.imageSource === "" && root.fallbackIcon === "" && root.fallbackText !== ""
-            text: root.fallbackText
-            font.pixelSize: Math.max(12, parent.width * 0.36)
-            font.weight: Font.Bold
-            color: Theme.primaryText
-        }
+    Item {
+        id: circularMask
+        width: parent.width - 4
+        height: parent.height - 4
+        anchors.centerIn: parent
+        layer.enabled: true
+        layer.smooth: true
+        visible: false
 
         Rectangle {
             anchors.fill: parent
             radius: width / 2
-            color: "transparent"
-            border.color: root.borderColor !== "transparent" ? root.borderColor : Theme.popupBackground()
-            border.width: root.hasImage && sourceImage.status === Image.Ready ? (root.borderWidth > 0 ? root.borderWidth : 3) : 0
+            color: "black"
             antialiasing: true
         }
     }
+
+    DankIcon {
+        anchors.centerIn: parent
+        name: root.fallbackIcon
+        size: parent.width * 0.5
+        color: Theme.surfaceVariantText
+        visible: internalImage.status !== Image.Ready && root.imageSource === "" && root.fallbackIcon !== ""
+    }
+
+
+    StyledText {
+        anchors.centerIn: parent
+        visible: root.imageSource === "" && root.fallbackIcon === "" && root.fallbackText !== ""
+        text: root.fallbackText
+        font.pixelSize: Math.max(12, parent.width * 0.36)
+        font.weight: Font.Bold
+        color: Theme.primaryText
+    }
 }