1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-06 05:25:41 -05:00

DankCircularImage for album art and update audio input slider

This commit is contained in:
bbedward
2025-09-22 15:49:10 -04:00
parent 62b7b30754
commit d15ee0c29b
2 changed files with 65 additions and 90 deletions

View File

@@ -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
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
spacing: 0
onSliderValueChanged: function(newValue) {
if (AudioService.source && AudioService.source.audio) {
AudioService.source.audio.volume = newValue / 100
Rectangle {
width: Theme.iconSize + Theme.spacingS * 2
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 {
anchors.left: parent.left
DankSlider {
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
height: parent.height
onClicked: {
width: parent.width - (Theme.iconSize + Theme.spacingS * 2)
enabled: AudioService.source && AudioService.source.audio
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
}
}
}
}

View File

@@ -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
radius: width / 2
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
border.color: Theme.primary
border.width: 2
height: albumSize
anchors.centerIn: parent
z: 1
Image {
id: albumArt
source: artUrl || lastValidArtUrl || ""
anchors.fill: parent
anchors.margins: 2
fillMode: Image.PreserveAspectCrop
smooth: true
mipmap: true
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 = ""
}
}
imageSource: artUrl || lastValidArtUrl || ""
fallbackIcon: "album"
borderColor: Theme.primary
borderWidth: 2
onImageSourceChanged: {
if (imageSource && imageStatus !== Image.Error) {
lastValidArtUrl = imageSource
}
}
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
}
}
}