feat: add optional label artwork mode

package/contents/config/main.xml

@@ -38,6 +38,10 @@
             <default><![CDATA[NOW
 PLAYING]]></default>
         </entry>
+        <entry name="useLabelArtwork" type="Bool">
+            <label>Show track image when available</label>
+            <default>false</default>
+        </entry>
         <entry name="backgroundStyle" type="String">
             <label>Background style</label>
             <default>custom</default>

package/contents/ui/Representation.qml

@@ -14,6 +14,7 @@ MouseArea {
     property string configuredLabelVisibilityMode: "auto"
     property string configuredLabelPlacement: "left"
     property string configuredLabelText: "NOW\nPLAYING"
+    property bool configuredUseLabelArtwork: false
     property string configuredBackgroundStyle: "custom"
     property string configuredBackgroundColor: "transparent"
     property int configuredBackgroundRadius: 0
@@ -82,7 +83,7 @@ MouseArea {
     HoverHandler {
         id: rootHoverHandler
 
-        margin: 12
+        margin: 60
     }
 
     Timer {
@@ -143,17 +144,46 @@ MouseArea {
 
                 Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignLeft : Qt.AlignRight
                 Layout.fillWidth: true
-                spacing: mediaControlsMouseArea.effectiveLabelVerticalSpacing
                 visible: mediaControlsMouseArea.nowPlayingLabelsVisible
 
+                Item {
+                    id: labelContent
+
+                    readonly property bool artworkReady: mediaControlsMouseArea.configuredUseLabelArtwork && artworkImage.status === Image.Ready && artworkImage.source.toString().length > 0
+
+                    Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignLeft : Qt.AlignRight
+                    Layout.fillWidth: true
+                    clip: artworkReady
+                    implicitHeight: artworkReady ? mediaControlsMouseArea.labelRailWidth : labelTextColumn.implicitHeight
+
+                    Image {
+                        id: artworkImage
+
+                        anchors.fill: parent
+                        asynchronous: true
+                        cache: true
+                        fillMode: Image.PreserveAspectCrop
+                        source: mediaControlsMouseArea.configuredUseLabelArtwork ? player.artUrl : ""
+                        sourceSize.width: mediaControlsMouseArea.labelRailWidth
+                        sourceSize.height: mediaControlsMouseArea.labelRailWidth
+                        visible: labelContent.artworkReady
+                    }
+
+                    Column {
+                        id: labelTextColumn
+
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        spacing: mediaControlsMouseArea.effectiveLabelVerticalSpacing
+                        visible: !labelContent.artworkReady
+
                         Repeater {
                             model: mediaControlsMouseArea.effectiveLabelLines
 
                             delegate: ShadowedLabel {
                                 required property string modelData
 
-                        Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignLeft : Qt.AlignRight
+                                width: labelTextColumn.width
-                        Layout.fillWidth: true
                                 shadowEnabled: mediaControlsMouseArea.configuredTextShadowEnabled
                                 text: modelData
                                 lineHeight: 0.8
@@ -168,6 +198,10 @@ MouseArea {
 
                     }
 
+                }
+
+            }
+
             RowLayout {
                 id: mediaControls
 

package/contents/ui/configGeneral.qml

@@ -16,6 +16,7 @@ KCM.SimpleKCM {
     property string cfg_labelVisibilityMode
     property string cfg_labelPlacement
     property alias cfg_labelText: labelTextArea.text
+    property alias cfg_useLabelArtwork: useLabelArtworkCheckBox.checked
     property string cfg_backgroundStyle
     property alias cfg_backgroundColor: backgroundColorField.text
     property alias cfg_backgroundRadius: backgroundRadiusSpinBox.value
@@ -67,33 +68,6 @@ KCM.SimpleKCM {
         return options[resolvedIndex].value;
     }
 
-    component SectionHeader: Item {
-        required property string title
-        Kirigami.FormData.isSection: true
-        implicitHeight: sectionLayout.implicitHeight
-
-        ColumnLayout {
-            id: sectionLayout
-            anchors.left: parent.left
-            anchors.right: parent.right
-            spacing: Kirigami.Units.smallSpacing
-
-            QQC2.Label {
-                text: parent.parent.title
-                font.bold: true
-            }
-
-            Rectangle {
-                Layout.fillWidth: true
-                implicitHeight: 1
-                color: Kirigami.Theme.textColor
-                opacity: 0.25
-            }
-
-        }
-
-    }
-
     onCfg_fontFamilyChanged: {
         const index = availableFonts.indexOf(cfg_fontFamily);
         if (index >= 0 && fontFamilyComboBox.currentIndex !== index)
@@ -239,6 +213,13 @@ KCM.SimpleKCM {
             onActivated: configRoot.cfg_labelPlacement = currentValue
         }
 
+        QQC2.CheckBox {
+            id: useLabelArtworkCheckBox
+
+            Kirigami.FormData.label: i18n("Label image:")
+            text: i18n("Show track image when available")
+        }
+
         QQC2.TextArea {
             id: labelTextArea
 
@@ -327,4 +308,33 @@ KCM.SimpleKCM {
         onAccepted: configRoot.cfg_foregroundColor = selectedColor.toString()
     }
 
+    component SectionHeader: Item {
+        required property string title
+
+        Kirigami.FormData.isSection: true
+        implicitHeight: sectionLayout.implicitHeight
+
+        ColumnLayout {
+            id: sectionLayout
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            spacing: Kirigami.Units.smallSpacing
+
+            QQC2.Label {
+                text: parent.parent.title
+                font.bold: true
+            }
+
+            Rectangle {
+                Layout.fillWidth: true
+                implicitHeight: 1
+                color: Kirigami.Theme.textColor
+                opacity: 0.25
+            }
+
+        }
+
+    }
+
 }

package/contents/ui/main.qml

@@ -27,6 +27,8 @@ PlasmoidItem {
     // qmllint disable missing-property
     property string configuredLabelText: plasmoid.configuration.labelText
     // qmllint disable missing-property
+    property bool configuredUseLabelArtwork: plasmoid.configuration.useLabelArtwork
+    // qmllint disable missing-property
     property string configuredBackgroundStyle: plasmoid.configuration.backgroundStyle
     // qmllint disable missing-property
     property string configuredBackgroundColor: plasmoid.configuration.backgroundColor
@@ -81,6 +83,7 @@ PlasmoidItem {
         configuredLabelVisibilityMode: root.configuredLabelVisibilityMode
         configuredLabelPlacement: root.configuredLabelPlacement
         configuredLabelText: root.configuredLabelText
+        configuredUseLabelArtwork: root.configuredUseLabelArtwork
         configuredBackgroundStyle: root.configuredBackgroundStyle
         configuredBackgroundColor: root.configuredBackgroundColor
         configuredBackgroundRadius: root.configuredBackgroundRadius
@@ -107,6 +110,7 @@ PlasmoidItem {
         configuredLabelVisibilityMode: root.configuredLabelVisibilityMode
         configuredLabelPlacement: root.configuredLabelPlacement
         configuredLabelText: root.configuredLabelText
+        configuredUseLabelArtwork: root.configuredUseLabelArtwork
         configuredBackgroundStyle: root.configuredBackgroundStyle
         configuredBackgroundColor: root.configuredBackgroundColor
         configuredBackgroundRadius: root.configuredBackgroundRadius