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/pages/MainPage.qml

@@ -29,6 +29,7 @@ import "../Utils.js" as Utils
  * Main page, which simply shows some content of every library, as well as next items.
  */
 Page {
+    /// True if the models on this page already have been loaded and don't necessarily need a refresh
     property bool _modelsLoaded: false
 
     id: page
@@ -192,12 +193,6 @@ Page {
         }
     }
 
-    Label {
-        text: Screen.sizeCategory
-        x: 100
-        y: 100
-    }
-
     Component {
         id: carrouselView
         SilicaListView {
@@ -227,9 +222,7 @@ Page {
                 property string id: model.id
                 title: model.name
                 poster: Utils.itemModelImageUrl(ApiClient.baseUrl, model.id, model.imageTags["primary"], "Primary", {"maxHeight": height})
-                /*model.imageTags["Primary"] ? ApiClient.baseUrl + "/Items/" + model.id
-                                                     + "/Images/Primary?maxHeight=" + height + "&tag=" + model.imageTags["Primary"]
-                                                   : ""*/
+                blurhash: model.imageBlurHashes["primary"][model.imageTags["primary"]]
                 landscape: !Utils.usePortraitCover(collectionType)
                 progress: (typeof model.userData !== "undefined") ? model.userData.playedPercentage / 100 : 0.0
 

sailfish/qml/pages/SettingsPage.qml

@@ -60,7 +60,7 @@ Page {
                     id: loggedInUser
                     apiClient: ApiClient
                 }
-                Image {
+                RemoteImage {
                     id: userIcon
                     width: height
                     anchors {

sailfish/qml/pages/itemdetails/CollectionPage.qml

@@ -61,6 +61,7 @@ BaseDetailPage {
                 id: itemImage
                 anchors.fill: parent
                 source: Utils.itemModelImageUrl(ApiClient.baseUrl, model.id, model.imageTags.primary, "Primary", {"maxWidth": width})
+                blurhash: model.imageBlurHashes.primary[model.imageTags.primary]
                 fallbackColor: Utils.colorFromString(model.name)
                 fillMode: Image.PreserveAspectCrop
                 clip: true

sailfish/qml/pages/itemdetails/MusicAlbumPage.qml

@@ -106,5 +106,6 @@ BaseDetailPage {
         item.duration = Qt.binding(function() { return itemData.runTimeTicks})
         item.songCount = Qt.binding(function() { return itemData.childCount})
         item.listview = Qt.binding(function() { return list})
+        item.blurhash = Qt.binding(function() { return itemData.imageBlurHashes["Primary"][itemData.imageTags["Primary"]]; })
     }
 }

sailfish/qml/pages/itemdetails/PhotoPage.qml

@@ -3,6 +3,8 @@ import Sailfish.Silica 1.0
 
 import nl.netsoj.chris.Jellyfin 1.0
 
+import "../../components"
+
 BaseDetailPage {
     id: pageRoot
     navigationStyle: PageNavigation.Vertical
@@ -17,19 +19,13 @@ BaseDetailPage {
         titleColor: Theme.primaryColor
     }
 
-    Image {
+    RemoteImage {
         id: image
         source: ApiClient.downloadUrl(itemId)
         fillMode: Image.PreserveAspectFit
         anchors.fill: parent
 
-        opacity: status == Image.Ready ? 1.0 : 0.0
-        Behavior on opacity { FadeAnimator {}}
+        blurhash: itemData.imageBlurHashes["Primary"][itemData.imageTags["Primary"]]
+        aspectRatio: itemData.width / itemData.height
     }
-
-    BusyIndicator {
-            running: image.status == Image.Loading
-            size: BusyIndicatorSize.Large
-            anchors.centerIn: parent
-        }
 }