mpris menu: proper album art with gradient fade

This commit is contained in:
Damocles 2026-04-12 17:57:45 +02:00
parent 66dc628752
commit a69507980b

View file

@ -9,23 +9,35 @@ M.PopupPanel {
required property MprisPlayer player
// Album art placeholder (or real art if available)
Rectangle {
// Album art
Item {
width: menuWindow.panelWidth
height: 80
height: _artImg.status === Image.Ready ? 140 : 60
clip: true
Rectangle {
anchors.fill: parent
color: M.Theme.base02
radius: M.Theme.radius
}
Image {
id: _artImg
anchors.fill: parent
source: menuWindow.player?.trackArtUrl ?? ""
fillMode: Image.PreserveAspectCrop
visible: status === Image.Ready
}
// Round top corners to match panel
layer.enabled: true
layer.effect: Item {
// simple clip the panel background behind handles the rounding
// Gradient fade at the bottom so art blends into the panel
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
height: 40
visible: _artImg.visible
gradient: Gradient {
GradientStop { position: 0; color: "transparent" }
GradientStop { position: 1; color: M.Theme.base01 }
}
}
@ -36,7 +48,7 @@ M.PopupPanel {
color: M.Theme.base04
font.pixelSize: 28
font.family: M.Theme.iconFontFamily
visible: !menuWindow.player?.trackArtUrl
visible: _artImg.status !== Image.Ready
}
}