Show cover art in the Quick Settings media row

shell/plugins/panels/quick-settings/MediaRow.qml

@@ -8,15 +8,53 @@ Item {
   property string title: ""
   property string artist: ""
   property string status: "Stopped"
+  property string artUrl: ""
   readonly property bool playing: root.status === "Playing"
+  readonly property bool hasArt: root.artUrl.length > 0 && thumbnailImage.status !== Image.Error
   signal controlRequested(string action)
 
   visible: root.title.length > 0 && root.title !== "No Media"
-  implicitHeight: visible ? Math.max(info.implicitHeight, controls.implicitHeight) : 0
+  implicitHeight: visible ? Math.max(thumbnail.height, info.implicitHeight, controls.implicitHeight) : 0
+
+  Rectangle {
+    id: thumbnail
+    anchors.left: parent.left
+    anchors.verticalCenter: parent.verticalCenter
+    width: Style.spaceReal(48)
+    height: width
+    radius: Style.cardRadius
+    color: Util.alpha(Color.background, Style.cardFillAlpha)
+    border.width: Style.cardBorderWidth
+    border.color: Util.alpha(Color.blue, Style.cardBorderAlpha)
+    clip: true
+
+    Image {
+      id: thumbnailImage
+      anchors.fill: parent
+      anchors.margins: Style.cardBorderWidth
+      source: root.artUrl
+      visible: root.hasArt
+      fillMode: Image.PreserveAspectCrop
+      asynchronous: true
+      cache: true
+      sourceSize.width: Math.round(parent.width * 2)
+      sourceSize.height: Math.round(parent.height * 2)
+    }
+
+    Text {
+      anchors.centerIn: parent
+      visible: !root.hasArt || thumbnailImage.status !== Image.Ready
+      text: ""
+      color: Util.alpha(Color.foreground, 0.6)
+      font.family: Style.font.family
+      font.pixelSize: Style.font.title
+    }
+  }
 
   Column {
     id: info
-    anchors.left: parent.left
+    anchors.left: thumbnail.right
+    anchors.leftMargin: Style.spaceReal(12)
     anchors.right: controls.left
     anchors.rightMargin: Style.spaceReal(12)
     anchors.verticalCenter: parent.verticalCenter

shell/plugins/panels/quick-settings/QuickSettings.qml

@@ -196,7 +196,7 @@ Item {
     id: mediaValue
     polling: root.soundVisible
     intervalMs: 1000
-    command: "playerctl metadata -f '{{title}}|||{{artist}}|||{{status}}' 2>/dev/null || echo 'No Media||||||Stopped'"
+    command: "playerctl metadata -f '{{title}}|||{{artist}}|||{{status}}|||{{mpris:artUrl}}' 2>/dev/null || echo 'No Media||||||Stopped|||'"
   }
 
   PolledText {

shell/plugins/panels/quick-settings/SoundTab.qml

@@ -44,6 +44,7 @@ Column {
     title: root.mediaParts.length > 0 ? root.mediaParts[0] : ""
     artist: root.mediaParts.length > 1 ? root.mediaParts[1] : ""
     status: root.mediaParts.length > 2 ? root.mediaParts[2] : "Stopped"
+    artUrl: root.mediaParts.length > 3 ? root.mediaParts[3] : ""
     onControlRequested: function(action) { root.mediaControlRequested(action) }
   }