Added settings, logout and improved error states

qml/components/IconListItem.qml

@@ -0,0 +1,27 @@
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+
+BackgroundItem {
+    property alias text: label.text
+    property alias iconSource: icon.source
+    HighlightImage {
+        id: icon
+        anchors {
+            top: parent.top
+            topMargin: Theme.paddingMedium
+            left: parent.left
+            leftMargin: Theme.horizontalPageMargin
+            bottom: parent.bottom
+            bottomMargin: Theme.paddingMedium
+        }
+    }
+
+    Label {
+        id: label
+        anchors {
+            left: icon.right
+            leftMargin: Theme.paddingMedium
+            verticalCenter: parent.verticalCenter
+        }
+    }
+}

qml/components/RemoteImage.qml

@@ -7,6 +7,7 @@ import Sailfish.Silica 1.0
 HighlightImage {
 	property string fallbackImage
 	property bool usingFallbackImage
+    asynchronous: true
 	
 	BusyIndicator {
 		anchors.centerIn: parent

qml/harbour-sailfin.qml

@@ -13,6 +13,14 @@ ApplicationWindow {
     property bool _hasInitialized: false
     // The global mediaPlayer instance
     readonly property MediaPlayer mediaPlayer: _mediaPlayer
+    property url backgroundSource
+    onBackgroundSourceChanged: {
+        if (backgroundSource) {
+            appWindow._overlayBackgroundSource.backgroundItem.source = backgroundSource
+        } else {
+            appWindow._overlayBackgroundSource.backgroundItem.source = Theme.backgroundImage
+        }
+    }
     // Data of the currently selected item. For use on the cover.
     property var itemData
 	

qml/pages/DetailPage.qml

@@ -21,7 +21,7 @@ Page {
     readonly property string _logo: itemData.ImageTags.Logo
     readonly property var _backdropImages: itemData.BackdropImageTags
     readonly property var _parentBackdropImages: itemData.ParentBackdropImageTags
-    readonly property string parentId: itemData.ParentId
+    readonly property string parentId: itemData.ParentId || ""
 
     on_BackdropImagesChanged: updateBackdrop()
     on_ParentBackdropImagesChanged: updateBackdrop()
@@ -30,10 +30,13 @@ Page {
         if (_backdropImages && _backdropImages.length > 0) {
             var rand = Math.floor(Math.random() * (_backdropImages.length - 0.001))
             console.log("Random: ", rand)
-            backdrop.source = ApiClient.baseUrl + "/Items/" + itemId + "/Images/Backdrop/" + rand + "?tag=" + _backdropImages[rand] + "&maxHeight" + height
+            //backdrop.source = ApiClient.baseUrl + "/Items/" + itemId + "/Images/Backdrop/" + rand + "?tag=" + _backdropImages[rand] + "&maxHeight" + height
+            appWindow.backgroundSource = ApiClient.baseUrl + "/Items/" + itemId + "/Images/Backdrop/" + rand + "?tag=" + _backdropImages[rand] + "&maxHeight" + height
         } else if (_parentBackdropImages && _parentBackdropImages.length > 0) {
             console.log(parentId)
-            backdrop.source = ApiClient.baseUrl + "/Items/" + itemData.ParentBackdropItemId + "/Images/Backdrop/0?tag=" + _parentBackdropImages[0]
+            //backdrop.source = ApiClient.baseUrl + "/Items/" + itemData.ParentBackdropItemId + "/Images/Backdrop/0?tag=" + _parentBackdropImages[0]
+            appWindow.backgroundSource = ApiClient.baseUrl + "/Items/" + itemData.ParentBackdropItemId + "/Images/Backdrop/0?tag=" + _parentBackdropImages[0]
+            Theme.backgroundGlowColor
         }
     }
 
@@ -53,7 +56,7 @@ Page {
             width: parent.width
 
             PageHeader {
-                title: itemData.Name
+                title: itemData.Name || qsTr("Loading")
                 visible: !_hasLogo
             }
 
@@ -67,7 +70,7 @@ Page {
                     anchors {
                         horizontalCenter: parent.horizontalCenter
                     }
-                    source: _hasLogo ? ApiClient.baseUrl + "/Items/" + itemId + "/Images/Logo?tag=" + _logo : undefined
+                    source: _hasLogo ? ApiClient.baseUrl + "/Items/" + itemId + "/Images/Logo?tag=" + _logo : ""
                 }
                 Item {
                     width: 1
@@ -95,6 +98,8 @@ Page {
                         return Qt.resolvedUrl("../components/itemdetails/SeasonDetails.qml")
                     case "Episode":
                         return Qt.resolvedUrl("../components/itemdetails/EpisodeDetails.qml")
+                    case undefined:
+                        return ""
                     default:
                         return Qt.resolvedUrl("../components/itemdetails/UnsupportedDetails.qml")
                     }
@@ -114,7 +119,7 @@ Page {
 
     onItemIdChanged: {
         itemData = {}
-        if (itemId.length > 0) {
+        if (itemId.length && PageStatus.Active) {
             pageRoot._loading = true
             ApiClient.fetchItem(itemId)
         }
@@ -125,8 +130,11 @@ Page {
             backdrop.clear()
             //appWindow.itemData = ({})
         }
-        if (status == PageStatus.Active && itemData) {
-            appWindow.itemData = itemData
+        if (status == PageStatus.Active) {
+            if (itemId) {
+                ApiClient.fetchItem(itemId)
+            }
+
         }
     }
 

qml/pages/MainPage.qml

@@ -16,15 +16,20 @@ Page {
     id: page
     allowedOrientations: Orientation.All
 
+    ViewPlaceholder {
+
+    }
+
     SilicaFlickable {
         anchors.fill: parent
 
         // PullDownMenu and PushUpMenu must be declared in SilicaFlickable, SilicaListView or SilicaGridView
         PullDownMenu {
             MenuItem {
-                text: qsTr("About")
-                onClicked: pageStack.push(Qt.resolvedUrl("AboutPage.qml"))
+                text: qsTr("Settings")
+                onClicked: pageStack.push(Qt.resolvedUrl("SettingsPage.qml"))
             }
+            busy: mediaLibraryModel.status == ApiModel.Loading
         }
 
         // Tell SilicaFlickable the height of its content.
@@ -60,7 +65,7 @@ Page {
                 MoreSection {
                     text: model.name
                     busy: userItemModel.status != ApiModel.Ready
-                    property string collectionType: model.collectionType
+                    property string collectionType: model.collectionType || ""
 
                     onHeaderClicked: pageStack.push(Qt.resolvedUrl("DetailPage.qml"), {"itemId": model.id})
 
@@ -117,30 +122,49 @@ Page {
                     }
                 }
             }
+            Column {
+                width: parent.width
+                visible: mediaLibraryModel.status == ApiModel.Error
+                PageHeader {
+                    title: qsTr("Network error")
+                    //clickable: false
+                }
+
+                PlainLabel {
+                    text: qsTr("An error has occurred. Please try again.")
+                }
+                Item { width: 1; height: Theme.paddingLarge }
+                Button {
+                    text: qsTr("Retry")
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    onClicked: loadModels(true)
+                }
+                Item { width: 1; height: Theme.paddingLarge }
+            }
         }
     }
 
     onStatusChanged: {
         if (status == PageStatus.Active) {
             appWindow.itemData = null
-            if (!_modelsLoaded && ApiClient.authenticated) loadModels()
+            loadModels(false)
         }
     }
 
     Connections {
         target: ApiClient
-        onAuthenticatedChanged: {
-            if (authenticated /*&& !_modelsLoaded*/) loadModels();
-        }
+        onAuthenticatedChanged: loadModels(false)
     }
 
-    Component.onCompleted: {
-        if (ApiClient.authenticated && _modelsLoaded) {
-            loadModels();
+
+    /**
+     * Loads models if not laoded. Set force to true to reload models
+     * even if loaded.
+     */
+    function loadModels(force) {
+        if (force || (ApiClient.authenticated && !_modelsLoaded)) {
+            _modelsLoaded = true;
+            mediaLibraryModel.reload()
         }
-    }
-    function loadModels() {
-        _modelsLoaded = true;
-        mediaLibraryModel.reload()
 	}
 }

qml/pages/SettingsPage.qml

@@ -0,0 +1,75 @@
+import QtQuick 2.6
+import Sailfish.Silica 1.0
+
+import nl.netsoj.chris.Jellyfin 1.0
+
+import "../components"
+
+Page {
+    id: settingsPage
+
+    SilicaFlickable {
+        anchors.fill: parent
+        contentHeight: content.height
+
+        Column {
+            id: content
+            width: parent.width
+
+            RemorsePopup {
+                id: remorse
+            }
+
+            PageHeader {
+                //: Header of Settings page
+                title: qsTr("Settings")
+            }
+
+
+            SectionHeader {
+                text: qsTr("Session")
+            }
+
+            PlainLabel {
+                text: qsTr("Server")
+            }
+
+            PlainLabel {
+                text: ApiClient.baseUrl
+                color: Theme.secondaryHighlightColor
+            }
+
+            Item { width: 1; height: Theme.paddingMedium; }
+
+            PlainLabel {
+                text: qsTr("User id")
+            }
+
+            PlainLabel {
+                text: ApiClient.userId
+                color: Theme.secondaryHighlightColor
+            }
+
+            Item { width: 1; height: Theme.paddingLarge; }
+
+            ButtonLayout {
+                Button {
+                    text: qsTr("Log out")
+                    onClicked: remorse.execute(qsTr("Logging out"), ApiClient.deleteSession)
+                }
+            }
+
+            SectionHeader {
+                //: Other settings
+                text: qsTr("Other")
+            }
+
+            IconListItem {
+                text: qsTr("About Sailfin")
+                iconSource: "image://theme/icon-m-about"
+                onClicked: pageStack.push(Qt.resolvedUrl("AboutPage.qml"))
+            }
+        }
+    }
+
+}