AN attempt to get covers to work again

Covers should now work when at least the playbackManager is playing.
Covers based on the currently displayed item on the page does not work
yet.

The CoverPage has been revamped to use 1 model and 1 PathView to animate
the items for cleaner code.

sailfish/qml/cover/CoverPage.qml

@@ -26,149 +26,115 @@ import "../Utils.js" as Utils
 
 CoverBackground {
     id: cover
-    Label {
-        id: label
-        anchors.centerIn: parent
-        text: qsTr("Sailfin")
-    }
-    property int rowCount: 8
+    readonly property int rowCount: 8
+    readonly property real rowOffset: ((rowCount - 1) * 0.5)
+    readonly property real rowHeight: height / 2
+    readonly property real bottomOffset: width - rowHeight
+    readonly property bool onMainScreen: appWindow.itemData === null
+    readonly property bool itemId: appWindow.itemData.jellyfinId || appWindow.pageStack.currentPage.itemId
+    readonly property bool hasParent: !appWindow.itemData !== null && appWindow.itemData.jellyfinId.length !== 0
 
     J.ItemModel {
-        id: randomItems1
-        /*loader: J.UserItemsLoader {
+        id: randomItems
+        loader: J.UserItemsLoader {
+            id: randomItemsLoader
             apiClient: appWindow.apiClient
-            limit: cover.rowCount
-            imageTypes: ["Primary"]
-            sortBy: ["IsFavoriteOrLiked", "Random"]
-            recursive: true
-            parentId: appWindow.collectionId
+            limit: cover.rowCount * 2
+            imageTypes: [J.ImageType.Primary]
+            sortBy: "IsFavoriteOrLiked,Random"
+            recursive: false
+            parentId: hasParent ? itemId : ""
             autoReload:  false
-        }*/
-        //Component.onCompleted: reload()
+            onParentIdChanged: {
+                if (parentId.length > 0) reload()
             }
+        }
+    }
+    PathView {
+        id: pathView
+        model: randomItems
+        path: Path {
+            startX: -rowHeight * rowOffset
+            startY: rowHeight * 0.5
 
-    J.ItemModel {
-        id: randomItems2
-        /*loader: J.UserItemsLoader {
-            apiClient: appWindow.apiClient
-            limit: cover.rowCount
-            imageTypes: ["Primary"]
-            sortBy: ["IsFavoriteOrLiked", "Random"]
-            recursive: true
-            parentId: appWindow.collectionId
-            autoReload: false
-        }*/
-        //Component.onCompleted: reload()
+            PathLine {
+                x: rowHeight * rowOffset
+                y: rowHeight * 0.5
             }
-
-    Row {
-        id: row1
-        property bool movingRight: true
-        property int moveCount: 0
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        transform: [
-            Translate {
-                x: -row1.height// + (row1.width - row1.height) / 2;
-            },
-            Translate {
-                id: row1Translate;
-                Behavior on x { NumberAnimation { duration: 500; easing.type: Easing.InOutQuad }}
+            PathPercent {
+                value: 0.5
             }
-        ]
-        height: parent.height / 2
-        width: parent.width
-        Repeater {
-            model: randomItems1
-            RemoteImage {
-                clip: true
-                height: row1.height
+            PathLine {
+                x: rowHeight * rowOffset + bottomOffset
+                y: rowHeight * 1.5
+            }
+            PathPercent {
+                value: 0.5
+            }
+            PathLine {
+                x: -rowHeight * rowOffset + bottomOffset
+                y: rowHeight * 1.5
+            }
+            PathPercent {
+                value: 1
+            }
+            PathLine {
+                x: -rowHeight * rowOffset
+                y: rowHeight * 0.5
+            }
+        }
+        delegate: RemoteImage {
+                height: rowHeight
                 width: height
-                source: model.id ? Utils.itemModelImageUrl(appWindow.apiClient.baseUrl, model.id, model.imageTags.primary, "Primary", {"maxHeight": row1.height})
+                source: model.jellyfinId
+                            ? Utils.itemModelImageUrl(appWindow.apiClient.baseUrl, model.jellyfinId, model.imageTags["Primary"], "Primary", {"maxHeight": row1.height})
+                            : ""
+                blurhash: model.jellyfinId
+                            ? model.imageBlurHashes["Primary"][model.imageTags["Primary"]]
                             : ""
                 fillMode: Image.PreserveAspectCrop
             }
     }
 
-        function move() {
-            if (movingRight) {
-                row1Translate.x -= row1.height
-                moveCount++;
-            } else {
-                row1Translate.x += row1.height
-                moveCount--;
-            }
-            if (moveCount == 0) movingRight = true;
-            if (moveCount == rowCount - 3) movingRight = false;
-        }
+     Rectangle {
+        anchors.fill: parent
+        color: Theme.rgba(Theme.overlayBackgroundColor, Theme.opacityHigh)
     }
 
-    Row {
-        id: row2
-        property bool movingRight: false
-        property int moveCount: rowCount - 3
-        anchors.bottom: parent.bottom
-
-        anchors.left: parent.left
-        anchors.right: parent.right
-        transform: [
-            Translate {
-                x: -row2.height * (rowCount - 2) + (row2.width - row2.height);
-            },
-            Translate {
-                id: row2Translate;
-                Behavior on x { NumberAnimation { duration: 500; easing.type: Easing.InOutQuad }}
-            }
-        ]
-        height: parent.height / 2
+    Column {
+        anchors.centerIn: parent
         width: parent.width
-        Repeater {
-            model: randomItems2
-            RemoteImage {
-                clip: true
-                height: row2.height
-                width: height
-                source: Utils.itemModelImageUrl(appWindow.apiClient.baseUrl, model.id, model.imageTags.primary, "Primary", {"maxHeight": row1.height})
-                fillMode: Image.PreserveAspectCrop
-            }
+        Image {
+            anchors.horizontalCenter: parent.horizontalCenter
+            source: Qt.resolvedUrl("../icon.png")
+            width: parent.width / 3
+            height: width
         }
 
-        function move() {
-            if (movingRight) {
-                row2Translate.x -= row1.height
-                moveCount++;
-            } else {
-                row2Translate.x += row1.height
-                moveCount--;
-            }
-            if (moveCount == 0) movingRight = true;
-            if (moveCount == rowCount - 3) movingRight = false;
+        Label {
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: qsTr("Sailfin")
+            font.bold: true
         }
     }
 
     Connections {
-        target: appWindow
-        onCollectionIdChanged: {
-            randomItems1.parentId = collectionId
-            randomItems2.parentId = collectionId
-            randomItems1.reload()
-            randomItems2.reload()
+        target: appWindow.pageStack
+        onCurrentPageChanged: {
+            console.log("Reloading cover collection")
+            /*randomItems1Loader.parentId = Qt.binding(function() { return  onMainScreen ? "" : appWindow.itemData.jellyfinId; })
+            randomItems2Loader.parentId = Qt.binding(function() { return  onMainScreen ? "" : appWindow.itemData.jellyfinId; })*/
+            //randomItems1.reload()
+            //randomItems2.reload()
         }
     }
 
     Timer {
-        property bool odd: false
         running: true
         interval: 5000
         repeat: true
         onTriggered: {
-            if (odd) {
-                row1.move()
-            } else {
-                row2.move()
-            }
-            odd = !odd
+            pathView.incrementCurrentIndex()
         }
     }
 

sailfish/qml/cover/PosterCover.qml

@@ -20,16 +20,17 @@ 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.Jellyfin 1.0
+import nl.netsoj.chris.Jellyfin 1.0 as J
 
 import "../components"
 import ".."
 
 CoverBackground {
-    property JellyfinItem mData: appWindow.itemData
+    // Due QTBUG-10822, declarartions such as `property J.Item foo` are not possible.
+    property var mData: appWindow.itemData
     RemoteImage {
         anchors.fill: parent
-        source: mData == null ? "" : Utils.itemImageUrl(ApiClient.baseUrl, mData, "Primary", {"maxWidth": parent.width})
+        source: mData === null ? "" : Utils.itemImageUrl(appWindow.apiClient.baseUrl, mData, "Primary", {"maxWidth": parent.width})
         fillMode: Image.PreserveAspectCrop
         onSourceChanged: console.log(source)
     }

sailfish/qml/cover/VideoCover.qml

@@ -26,8 +26,7 @@ import nl.netsoj.chris.Jellyfin 1.0
 import "../components"
 
 PosterCover {
-    readonly property MediaPlayer player: appWindow.mediaPlayer
-    property var mData: appWindow.itemData
+    readonly property var player: appWindow.playbackManager
 
     // Wanted to display the currently running move on here, but it's hard :/
     /*Rectangle {

sailfish/qml/harbour-sailfin.qml

@@ -38,9 +38,7 @@ ApplicationWindow {
     readonly property ApiClient apiClient: _apiClient
 
     // Due QTBUG-10822, declarartions such as `property J.Item foo` are not possible.
-    property var itemData
-    // Id of the collection currently browsing. For use on the cover.
-    property string collectionId
+    property var itemData: pageStack.currentPage.itemData
 
     // Bad way to implement settings, but it'll do for now.
     property bool showDebugInfo: true
@@ -68,19 +66,17 @@ ApplicationWindow {
             }
         }
     }
-    cover: CoverBackground {CoverPlaceholder { icon.source: "icon.png"; text: "Sailfin"}}
-    /*{
+    //cover: CoverBackground {CoverPlaceholder { icon.source: "icon.png"; text: "Sailfin"}}
+    cover: {
         // Disabled due to buggy Loader behaviour
         if ([MediaPlayer.NoMedia, MediaPlayer.InvalidMedia, MediaPlayer.UnknownStatus].indexOf(_playbackManager.mediaStatus) >= 0) {
-            if (itemData) {
-                return Qt.resolvedUrl("cover/PosterCover.qml")
+            return Qt.resolvedUrl("cover/CoverPage.qml")
+        } else if (playbackManager.hasVideo){
+            return Qt.resolvedUrl("cover/VideoCover.qml")
         } else {
             return Qt.resolvedUrl("cover/CoverPage.qml")
         }
-        } else if (playbackManager.hasVideo){
-            return Qt.resolvedUrl("cover/VideoCover.qml")
     }
-    }*/
 
     Notification {
         id: errorNotification
@@ -100,6 +96,17 @@ ApplicationWindow {
         autoOpen: true
     }
 
+    Connections {
+        target: pageStack
+        onCurrentPageChanged: {
+            if ("itemData" in pageStack.currentPage) {
+                appWindow.itemData =  pageStack.currentPage.itemData
+            } else {
+                appWindow.itemData = null
+            }
+        }
+    }
+
     // Keep the sytem alive while playing media
     KeepAlive {
         enabled: playbackManager.playbackState === MediaPlayer.PlayingState

sailfish/qml/pages/MainPage.qml

@@ -138,7 +138,7 @@ Page {
                             }
                         }
                         Connections {
-                            target: mediaLibraryModel
+                            target: mediaLibraryLoader
                             onReady: userItemModel.reload()
                         }
                     }

sailfish/qml/pages/itemdetails/BaseDetailPage.qml

@@ -103,7 +103,7 @@ Page {
         if (status === PageStatus.Active) {
             console.log("Page ready, ItemID: ", itemId, ", UserID: ", apiClient.userId)
             jItemLoader.autoReload = true
-            appWindow.itemData = jItemLoader.data
+            //appWindow.itemData = jItemLoader.data
         }
     }
 }