Give fallback images random background colours

[UI] Added: if an image cannot be loaded, it will have a random background colour.

qml/Utils.js

@@ -83,3 +83,15 @@ function getPageUrl(mediaType, itemType) {
         }
     }
 }
+
+/**
+ * Generates a "nice" color based on a string by "hashing" it.
+ */
+function colorFromString(string) {
+    var hash = 0;
+    for (var i = 0; i < string.length; i++) {
+        hash += string.charCodeAt(i);
+    }
+    hash = (hash % 16) / 16;
+    return Qt.hsva(hash, 1.0, 1.0, 1.0);
+}

qml/components/LibraryItemDelegate.qml

@@ -44,6 +44,7 @@ BackgroundItem {
             bottom: parent.bottom
         }
         fillMode: Image.PreserveAspectCrop
+        fallbackColor: Utils.colorFromString(title)
     }
 
     /*Rectangle {

qml/components/RemoteImage.qml

@@ -26,23 +26,24 @@ import Sailfish.Silica 1.0
 HighlightImage {
 	property string fallbackImage
 	property bool usingFallbackImage
+    property color fallbackColor: Theme.highlightColor
     asynchronous: true
 	
-	BusyIndicator {
-		anchors.centerIn: parent
-		running: parent.status == Image.Loading
-	}
-
     Rectangle {
         id: fallbackBackground
         anchors.fill: parent
         gradient: Gradient {
-            GradientStop { position: 0.0; color: Theme.highlightColor; }
+            GradientStop { position: 0.0; color: fallbackColor; }
-            GradientStop { position: 1.0; color: Theme.highlightDimmerColor; }
+            GradientStop { position: 1.0; color: Theme.highlightDimmerFromColor(fallbackColor, Theme.colorScheme); }
         }
-        visible: parent.status == Image.Error || parent.status == Image.Null
+        visible: parent.status == Image.Error || parent.status == Image.Null || parent.status == Image.Loading
     }
-	
+
+    BusyIndicator {
+        anchors.centerIn: parent
+        running: parent.status == Image.Loading
+    }
+
     HighlightImage {
 		id: fallbackImageItem
 		anchors.centerIn: parent

qml/pages/itemdetails/CollectionPage.qml

@@ -59,6 +59,7 @@ BaseDetailPage {
                 id: itemImage
                 anchors.fill: parent
                 source: Utils.itemModelImageUrl(ApiClient.baseUrl, model.id, model.imageTags["Primary"], "Primary", {"maxWidth": width})
+                fallbackColor: Utils.colorFromString(model.name)
                 fillMode: Image.PreserveAspectCrop
                 clip: true
             }
@@ -68,7 +69,7 @@ BaseDetailPage {
                     bottom: parent.bottom
                     right: parent.right
                 }
-                height: itemName.height + Theme.paddingSmall * 2
+                height: itemName.height + Theme.paddingMedium * 2
                 visible: itemImage.status !== Image.Null
             }
             Label {
@@ -86,15 +87,7 @@ BaseDetailPage {
                 horizontalAlignment: Text.AlignLeft
                 font.pixelSize: Theme.fontSizeSmall
             }
-            onClicked: {
+            onClicked: pageStack.push(Utils.getPageUrl(model.mediaType, model.type), {"itemId": model.id})
-                switch(model.type) {
-                case "Folder":
-                    pageStack.push(Qt.resolvedUrl("CollectionPage.qml"), {"itemId": model.id})
-                    break;
-                default:
-                    pageStack.push(Utils.getPageUrl(model.mediaType, model.type), {"itemId": model.id})
-                }
-            }
         }
 
         ViewPlaceholder {