feat: fallback to panel icon if cover image doesn't load

1. Wait for a short time (500ms) after the Image status change 2. If the image didn't load and fallback is enabled show the icon 3. If the image didn't load and fallback is disabled hide PanelIcon instead of leaving the empty space closes: #148
ccatterina · Nov 16, 2024 · 577582a · 577582a
1 parent 00f9049
commit 577582a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/contents/ui/PanelIcon.qml b/src/contents/ui/PanelIcon.qml
@@ -16,19 +16,30 @@ Item {
     property var imageRadius: null
     property var icon: null
     property real size: Kirigami.Units.iconSizes.medium
+    property bool imageReady: false
+    property bool fallbackToIconWhenImageNotAvailable: false
+    visible: type === PanelIcon.Type.Icon || imageReady || (fallbackToIconWhenImageNotAvailable && !imageReady)
 
     Layout.preferredHeight: size
     Layout.preferredWidth: size
 
     Kirigami.Icon {
-        visible: type === PanelIcon.Type.Icon
+        visible: type === PanelIcon.Type.Icon || (fallbackToIconWhenImageNotAvailable && !imageReady)
         id: iconComponent
         source: root.icon
         implicitHeight: root.size
         implicitWidth: root.size
         color: Kirigami.Theme.textColor
     }
 
+    Timer {
+        id: imageStatusTimer
+        interval: 500
+        onTriggered: {
+            imageReady = imageComponent.status === Image.Ready
+        }
+    }
+
     Image {
         visible: type === PanelIcon.Type.Image
         width: root.size
@@ -37,6 +48,9 @@ Item {
         anchors.fill: parent
         source: root.imageUrl
         fillMode: Image.PreserveAspectFit
+        onStatusChanged: {
+            imageStatusTimer.restart()
+        }
 
         // enables round corners while the radius is set
         // ref: https://stackoverflow.com/questions/6090740/image-rounded-corners-in-qml

diff --git a/src/contents/ui/main.qml b/src/contents/ui/main.qml
@@ -112,13 +112,11 @@ PlasmoidItem {
                 icon: plasmoid.configuration.panelIcon
                 imageUrl: player.artUrl
                 imageRadius: plasmoid.configuration.albumCoverRadius
+                fallbackToIconWhenImageNotAvailable: plasmoid.configuration.fallbackToIconWhenArtNotAvailable
                 type: {
                     if (!plasmoid.configuration.useAlbumCoverAsPanelIcon) {
                         return PanelIcon.Type.Icon;
                     }
-                    if (plasmoid.configuration.fallbackToIconWhenArtNotAvailable && !player.artUrl) {
-                        return PanelIcon.Type.Icon;
-                    }
                     return PanelIcon.Type.Image;
                 }
                 Layout.alignment : Qt.AlignVCenter | Qt.AlignHCenter