Add BlurHash placeholders at several places

* [ui] Added: Blurry previews of images before they are loaded

Also fixes a bug where ApiModel would remove items that already started
with a lowecase letter or didn't start with a letter at all.

sailfish/qml/components/LibraryItemDelegate.qml

@@ -28,6 +28,7 @@ BackgroundItem {
     id: root
     property alias poster: posterImage.source
     property alias title: titleText.text
+    property alias blurhash: posterImage.blurhash
     property bool landscape: false
     property real progress: 0.0
 

sailfish/qml/components/RemoteImage.qml

@@ -20,17 +20,34 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 import QtQuick 2.6
 import Sailfish.Silica 1.0
 
+import nl.netsoj.chris.blurhash 1.0
+
 /**
  * An image for "remote" images (loaded over e.g. http), with a spinner and a fallback image
  */
 SilicaItem {
+    id: root
     property string fallbackImage
     property bool usingFallbackImage
     property color fallbackColor: Theme.highlightColor
 
-    property alias source: realImage.source
+    property var __parentPage : null
+    property bool alreadyLoaded: false
+
+    onSourceChanged: alreadyLoaded = false
+
+    /**
+     * BlurHash that is used as placeholder
+     */
+    property string blurhash: ""
+    /**
+     *
+     */
+    property real aspectRatio: 1.0
+    property string source: ""
     property alias sourceSize: realImage.sourceSize
-    property alias fillMode: realImage.fillMode
+    property var fillMode: Image.Stretch
+    property alias status: realImage.status
     implicitHeight: realImage.implicitHeight
     implicitWidth: realImage.implicitWidth
 
@@ -38,6 +55,14 @@ SilicaItem {
         id: realImage
         anchors.fill: parent
         asynchronous: true
+        fillMode: root.fillMode
+        opacity: 1
+        source: alreadyLoaded || [PageStatus.Active, PageStatus.Deactivating].indexOf(__parentPage.status) >= 0 ? root.source : ""
+        onStatusChanged: {
+            if (status == Image.Ready) {
+                alreadyLoaded = true
+            }
+        }
     }
 	
     Rectangle {
@@ -47,7 +72,17 @@ SilicaItem {
             GradientStop { position: 0.0; color: fallbackColor; }
             GradientStop { position: 1.0; color: Theme.highlightDimmerFromColor(fallbackColor, Theme.colorScheme); }
         }
-        visible: realImage.status === Image.Error || realImage.status === Image.Null || realImage.status === Image.Loading
+        opacity: 0
+    }
+
+    Image {
+        id: blurhashImage
+        anchors.fill: parent
+        fillMode: root.fillMode
+        sourceSize.height: 32
+        sourceSize.width: 32 * aspectRatio
+        source: "image://blurhash/" + encodeURIComponent(blurhash)
+        opacity: 0
     }
 
     Rectangle {
@@ -65,7 +100,60 @@ SilicaItem {
     HighlightImage {
 		id: fallbackImageItem
 		anchors.centerIn: parent
-        visible: realImage.status === Image.Error || realImage.status === Image.Null
-		source: fallbackImage ? fallbackImage : "image://theme/icon-m-question"
+        visible: realImage.status === Image.Error || (realImage.status === Image.Null && blurhash.length === 0)
+        source: fallbackImage ? fallbackImage : "image://theme/icon-m-question"
 	}
+
+    Text {
+        id: name
+        text: state
+        color: Qt.red
+    }
+    onStateChanged: console.log("New state: " + state + ", blurhash: '" + blurhash + "'")
+    states: [
+        State {
+            name: "fallback"
+            when: (blurhash.length === 0) && (realImage.status === Image.Error || realImage.status === Image.Null || realImage.status === Image.Loading)
+            PropertyChanges {
+                target: fallbackBackground
+                opacity: 1
+            }
+        },
+        State {
+            name: "blurhash"
+            when: blurhash.length > 0 && (realImage.status === Image.Error || realImage.status === Image.Null || realImage.status === Image.Loading)
+            PropertyChanges {
+                target: blurhashImage
+                opacity: 1
+            }
+        },
+        State {
+            name: "loaded"
+            when: realImage.status === Image.Ready
+            PropertyChanges {
+                target: realImage
+                //opacity: 1
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: "*"
+            to: "*"
+            FadeAnimation {}
+        }
+    ]
+
+    Component.onCompleted: {
+        var item = parent;
+        while (item != null) {
+            if ("__silica_page" in item) {
+                __parentPage = item
+                console.log("Found parent " + item)
+                break;
+            }
+            item = item.parent
+        }
+    }
 }

sailfish/qml/components/music/NarrowAlbumCover.qml

@@ -34,6 +34,7 @@ Item {
     property real duration
     property int songCount
     property string name
+    property alias blurhash : albumArt.blurhash
 
 
     property string stateIfArt: "largeArt"

sailfish/qml/components/music/WideAlbumCover.qml

@@ -35,6 +35,7 @@ Column {
     property real duration
     property int songCount
     property string name
+    property alias blurhash : albumArt.blurhash
 
     Item { width:1; height: Theme.paddingLarge }