DankCircularImage for album art and update audio input slider

Modules/ControlCenter/Details/AudioInputDetail.qml

@@ -33,11 +33,8 @@ Rectangle {
         }
     }
     
-    DankSlider {
+    Row {
         id: volumeSlider
-
-        readonly property real actualVolumePercent: AudioService.source && AudioService.source.audio ? Math.round(AudioService.source.audio.volume * 100) : 0
-
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: headerRow.bottom
@@ -45,36 +42,63 @@ Rectangle {
         anchors.rightMargin: Theme.spacingM
         anchors.topMargin: Theme.spacingXS
         height: 35
-        value: AudioService.source && AudioService.source.audio ? Math.min(100, Math.round(AudioService.source.audio.volume * 100)) : 0
+        spacing: 0
-        minimum: 0
-        maximum: 100
-        leftIcon: {
-            if (!AudioService.source || !AudioService.source.audio) return "mic_off"
-            let muted = AudioService.source.audio.muted
-            return muted ? "mic_off" : "mic"
-        }
-        rightIcon: "volume_up"
-        enabled: AudioService.source && AudioService.source.audio
-        unit: "%"
-        showValue: true
-        valueOverride: actualVolumePercent
-        visible: AudioService.source && AudioService.source.audio
-        thumbOutlineColor: Theme.surfaceContainer
 
-        onSliderValueChanged: function(newValue) {
+        Rectangle {
-            if (AudioService.source && AudioService.source.audio) {
+            width: Theme.iconSize + Theme.spacingS * 2
-                AudioService.source.audio.volume = newValue / 100
+            height: Theme.iconSize + Theme.spacingS * 2
+            anchors.verticalCenter: parent.verticalCenter
+            radius: (Theme.iconSize + Theme.spacingS * 2) / 2
+            color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+
+            Behavior on color {
+                ColorAnimation { duration: Theme.shortDuration }
+            }
+
+            MouseArea {
+                id: iconArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    if (AudioService.source && AudioService.source.audio) {
+                        AudioService.source.audio.muted = !AudioService.source.audio.muted
+                    }
+                }
+            }
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: {
+                    if (!AudioService.source || !AudioService.source.audio) return "mic_off"
+                    let muted = AudioService.source.audio.muted
+                    return muted ? "mic_off" : "mic"
+                }
+                size: Theme.iconSize
+                color: AudioService.source && AudioService.source.audio && !AudioService.source.audio.muted && AudioService.source.audio.volume > 0 ? Theme.primary : Theme.surfaceText
             }
         }
-        
+
-        MouseArea {
+        DankSlider {
-            anchors.left: parent.left
+            readonly property real actualVolumePercent: AudioService.source && AudioService.source.audio ? Math.round(AudioService.source.audio.volume * 100) : 0
+
             anchors.verticalCenter: parent.verticalCenter
-            width: Theme.iconSize + Theme.spacingS * 2
+            width: parent.width - (Theme.iconSize + Theme.spacingS * 2)
-            height: parent.height
+            enabled: AudioService.source && AudioService.source.audio
-            onClicked: {
+            minimum: 0
+            maximum: 100
+            value: AudioService.source && AudioService.source.audio ? Math.min(100, Math.round(AudioService.source.audio.volume * 100)) : 0
+            showValue: true
+            unit: "%"
+            valueOverride: actualVolumePercent
+            thumbOutlineColor: Theme.surfaceVariant
+
+            onSliderValueChanged: function(newValue) {
                 if (AudioService.source && AudioService.source.audio) {
-                    AudioService.source.audio.muted = !AudioService.source.audio.muted
+                    AudioService.source.audio.volume = newValue / 100
+                    if (newValue > 0 && AudioService.source.audio.muted) {
+                        AudioService.source.audio.muted = false
+                    }
                 }
             }
         }

Widgets/DankAlbumArt.qml

@@ -11,7 +11,7 @@ Item {
     property MprisPlayer activePlayer
     property string artUrl: (activePlayer?.trackArtUrl) || ""
     property string lastValidArtUrl: ""
-    property alias albumArtStatus: albumArt.status
+    property alias albumArtStatus: albumArt.imageStatus
     property real albumSize: Math.min(width, height) * 0.88
     property bool showAnimation: true
     property real animationScale: 1.0
@@ -150,71 +150,22 @@ Item {
         }
     }
 
-    Rectangle {
+    DankCircularImage {
+        id: albumArt
         width: albumSize
-        height: width
+        height: albumSize
-        radius: width / 2
-        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
-        border.color: Theme.primary
-        border.width: 2
         anchors.centerIn: parent
         z: 1
 
-        Image {
+        imageSource: artUrl || lastValidArtUrl || ""
-            id: albumArt
+        fallbackIcon: "album"
-            source: artUrl || lastValidArtUrl || ""
+        borderColor: Theme.primary
-            anchors.fill: parent
+        borderWidth: 2
-            anchors.margins: 2
+
-            fillMode: Image.PreserveAspectCrop
+        onImageSourceChanged: {
-            smooth: true
+            if (imageSource && imageStatus !== Image.Error) {
-            mipmap: true
+                lastValidArtUrl = imageSource
-            cache: true
-            asynchronous: true
-            visible: false
-            onStatusChanged: {
-                if (status === Image.Error) {
-                    console.warn("Failed to load album art:", source)
-                    source = ""
-                    if (activePlayer?.trackArtUrl === source) {
-                        root.lastValidArtUrl = ""
-                    }
-                }
             }
         }
-
-        MultiEffect {
-            anchors.fill: parent
-            anchors.margins: 2
-            source: albumArt
-            maskEnabled: true
-            maskSource: circularMask
-            visible: albumArt.status === Image.Ready
-            maskThresholdMin: 0.5
-            maskSpreadAtMin: 1
-        }
-
-        Item {
-            id: circularMask
-            width: parent.width - 4
-            height: parent.height - 4
-            layer.enabled: true
-            layer.smooth: true
-            visible: false
-
-            Rectangle {
-                anchors.fill: parent
-                radius: width / 2
-                color: "black"
-                antialiasing: true
-            }
-        }
-
-        DankIcon {
-            anchors.centerIn: parent
-            name: "album"
-            size: parent.width * 0.3
-            color: Theme.surfaceVariantText
-            visible: albumArt.status !== Image.Ready
-        }
     }
 }