Restructured the way item "details" are loaded

Previously, Items were displayed in one page, named DetailPage.qml.
This page then would load a qml component, based on the page type. It
also contained some components common for each detail page, like
displaying the name of the item. This construction had as downside that
modifying the page properties, adding a pulley menu or basing the page
around a SilicaListview was not possible. So I already had created some
other pages.

The new construction uses a base page, named BaseDetailPage which does
set some common properties and handle the loading of the items, so that
that part does not have to be duplicated. Displaying the name of an item
was a very trivial thing to do, so duplicating that part across files
was not a problem. Anyway, the rest of the pages are now seperate, but
all have BaseDetailsPage as the root, so they can use the common
functionality by that page. Those subpages now can be based around
GridViews, Carrousels, have pully menus and so on. To determine to which
page to go to, based on the content type, a function named getPageUrl
has been added to Utils.js, which takes a content type as argument and
gives the page url back.

qml/pages/itemdetails/BaseDetailPage.qml

@@ -0,0 +1,106 @@
+/*
+Sailfin: a Jellyfin client written using Qt
+Copyright (C) 2020 Chris Josten
+
+This library is free software; you can redistribute it and/or
+modify it under the terms of the GNU Lesser General Public
+License as published by the Free Software Foundation; either
+version 2.1 of the License, or (at your option) any later version.
+
+This library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public
+License along with this library; if not, write to the Free Software
+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 "../../components"
+
+/**
+ * This page displays details about a film, show, season, episode, and so on.
+ *
+ * It contains the common functionality for all items. Additional components are
+ * loaded in for every specific type of items, from ../components/itemdetails.
+ */
+Page {
+    id: pageRoot
+    property string itemId: ""
+    property var itemData: ({})
+    property bool _loading: true
+    readonly property bool hasLogo: (typeof itemData.ImageTags !== "undefined") && (typeof itemData.ImageTags["Logo"] !== "undefined")
+    readonly property var _backdropImages: itemData.BackdropImageTags
+    readonly property var _parentBackdropImages: itemData.ParentBackdropImageTags
+    readonly property string parentId: itemData.ParentId || ""
+    property alias backdrop: backdrop
+
+    on_BackdropImagesChanged: updateBackdrop()
+    on_ParentBackdropImagesChanged: updateBackdrop()
+
+    function updateBackdrop() {
+        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
+        } else if (_parentBackdropImages && _parentBackdropImages.length > 0) {
+            console.log(parentId)
+            backdrop.source = ApiClient.baseUrl + "/Items/" + itemData.ParentBackdropItemId + "/Images/Backdrop/0?tag=" + _parentBackdropImages[0]
+        }
+    }
+
+
+    allowedOrientations: Orientation.All
+    GlassyBackground {
+        id: backdrop
+        anchors.fill: parent
+    }
+
+    PageBusyIndicator {
+        running: pageRoot._loading
+    }
+
+    onItemIdChanged: {
+        itemData = {}
+        if (itemId.length && PageStatus.Active) {
+            pageRoot._loading = true
+            ApiClient.fetchItem(itemId)
+        }
+    }
+
+    onStatusChanged: {
+        if (status == PageStatus.Deactivating) {
+            backdrop.clear()
+            //appWindow.itemData = ({})
+        }
+        if (status == PageStatus.Active) {
+            if (itemId) {
+                ApiClient.fetchItem(itemId)
+            }
+
+        }
+    }
+
+    Connections {
+        target: ApiClient
+        onItemFetched: {
+            if (itemId === pageRoot.itemId) {
+                //console.log(JSON.stringify(result))
+                pageRoot.itemData = result
+                pageRoot._loading = false
+                if (status == PageStatus.Active) {
+                    if (itemData.Type === "CollectionFolder") {
+                        appWindow.collectionId = itemData.Id
+                    } else {
+                        appWindow.itemData = result
+                    }
+                }
+            }
+        }
+    }
+}

qml/pages/itemdetails/CollectionPage.qml

@@ -0,0 +1,152 @@
+/*
+Sailfin: a Jellyfin client written using Qt
+Copyright (C) 2020 Chris Josten
+
+This library is free software; you can redistribute it and/or
+modify it under the terms of the GNU Lesser General Public
+License as published by the Free Software Foundation; either
+version 2.1 of the License, or (at your option) any later version.
+
+This library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public
+License along with this library; if not, write to the Free Software
+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 "../.."
+import "../../components"
+
+BaseDetailPage {
+    id: pageRoot
+
+    UserItemModel {
+        id: collectionModel
+        apiClient: ApiClient
+        parentId: itemData.Id || ""
+        sortBy: ["SortName"]
+        onParentIdChanged: reload()
+    }
+
+    SilicaGridView {
+        id: gridView
+        anchors.fill: parent
+        model: collectionModel
+        cellWidth: Constants.libraryDelegateWidth
+        cellHeight: Utils.usePortraitCover(itemData.CollectionType) ? Constants.libraryDelegatePosterHeight
+                                                                    : Constants.libraryDelegateHeight
+        header: PageHeader {
+            title: itemData.Name || qsTr("Loading")
+        }
+        PullDownMenu {
+            id: downMenu
+            MenuItem {
+                //: Menu item for selecting the sort order of a collection
+                text: qsTr("Sort by")
+                onClicked: pageStack.push(sortPageComponent)
+            }
+            busy: collectionModel.status == ApiModel.Loading
+        }
+        delegate: GridItem {
+            RemoteImage {
+                id: itemImage
+                anchors.fill: parent
+                source: Utils.itemModelImageUrl(ApiClient.baseUrl, model.id, model.imageTags["Primary"], "Primary", {"maxWidth": width})
+                fillMode: Image.PreserveAspectCrop
+                clip: true
+            }
+            Rectangle {
+                anchors {
+                    left: parent.left
+                    bottom: parent.bottom
+                    right: parent.right
+                }
+                height: itemName.height + Theme.paddingSmall * 2
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: "transparent" }
+                    GradientStop { position: 1.0; color: Theme.highlightDimmerColor }
+                }
+                visible: itemImage.status !== Image.Null
+            }
+            Label {
+                id: itemName
+                anchors {
+                    left: parent.left
+                    leftMargin: Theme.paddingMedium
+                    right: parent.right
+                    rightMargin: Theme.paddingMedium
+                    bottom: parent.bottom
+                    bottomMargin: Theme.paddingSmall
+                }
+                text: model.name
+                truncationMode: TruncationMode.Fade
+                horizontalAlignment: Text.AlignLeft
+                font.pixelSize: Theme.fontSizeSmall
+            }
+            onClicked: {
+                switch(model.type) {
+                case "Folder":
+                    pageStack.push(Qt.resolvedUrl("CollectionPage.qml"), {"itemId": model.id})
+                    break;
+                default:
+                    pageStack.push(Utils.getPageUrl(model.type), {"itemId": model.id})
+                }
+            }
+        }
+
+        ViewPlaceholder {
+            enabled: gridView.count == 0 && !pageRoot._loading
+            text: qsTr("Empty collection")
+            hintText: qsTr("Add some items to this collection!")
+        }
+
+        VerticalScrollDecorator {}
+    }
+
+    Component {
+        id: sortPageComponent
+        Page {
+            id: sortPage
+
+            ListModel {
+                id: sortOptions
+                ListElement { name: qsTr("Name"); value: "SortName"; }
+                ListElement { name: qsTr("Play count"); value: "PlayCount"; }
+                ListElement { name: qsTr("Date added"); value: "DateCreated"; }
+            }
+
+            SilicaListView {
+                anchors.fill: parent
+                model: sortOptions
+                header: PageHeader {
+                    title: qsTr("Sort by")
+                }
+                delegate: ListItem {
+                    Label {
+                        anchors {
+                            left: parent.left
+                            leftMargin: Theme.horizontalPageMargin
+                            right: parent.right
+                            rightMargin: Theme.horizontalPageMargin
+                            verticalCenter: parent.verticalCenter
+                        }
+                        text: model.name
+                    }
+                    onClicked: {
+                        collectionModel.sortBy = [model.value]
+                        collectionModel.reload()
+                        pageStack.pop()
+                    }
+                }
+            }
+        }
+    }
+
+}

qml/pages/itemdetails/EpisodePage.qml

@@ -0,0 +1,75 @@
+/*
+Sailfin: a Jellyfin client written using Qt
+Copyright (C) 2020 Chris Josten
+
+This library is free software; you can redistribute it and/or
+modify it under the terms of the GNU Lesser General Public
+License as published by the Free Software Foundation; either
+version 2.1 of the License, or (at your option) any later version.
+
+This library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public
+License along with this library; if not, write to the Free Software
+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 "../../components"
+import "../../"
+
+BaseDetailPage {
+    SilicaFlickable {
+        anchors.fill: parent
+        contentHeight: content.height
+        Column {
+            id: content
+            width: parent.width
+
+            PageHeader {
+                title: itemData.Name
+                description: {
+                    if (typeof itemData.IndexNumberEnd !== "undefined") {
+                        qsTr("Episode %1–%2 | %3").arg(itemData.IndexNumber)
+                        .arg(itemData.IndexNumberEnd)
+                        .arg(itemData.SeasonName)
+                    } else {
+                        qsTr("Episode %1 | %2").arg(itemData.IndexNumber).arg(itemData.SeasonName)
+                    }
+                }
+            }
+
+            PlayToolbar {
+                imageSource: Utils.itemImageUrl(ApiClient.baseUrl, itemData, "Primary", {"maxWidth": parent.width})
+                imageAspectRatio: itemData.PrimaryImageAspectRatio
+                onPlayPressed: pageStack.push(Qt.resolvedUrl("../VideoPage.qml"),
+                                              {"itemId": itemId, "itemData": itemData, "audioTrack": trackSelector.audioTrack,
+                                                  "subtitleTrack": trackSelector.subtitleTrack })
+                width: parent.width
+            }
+
+            VideoTrackSelector {
+                id: trackSelector
+                width: parent.width
+                tracks: itemData.MediaStreams
+            }
+
+            SectionHeader {
+                text: qsTr("Overview")
+            }
+
+            PlainLabel {
+                id: overviewText
+                text: itemData.Overview
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.secondaryHighlightColor
+            }
+        }
+    }
+}

qml/pages/itemdetails/FilmPage.qml

@@ -0,0 +1,70 @@
+/*
+Sailfin: a Jellyfin client written using Qt
+Copyright (C) 2020 Chris Josten
+
+This library is free software; you can redistribute it and/or
+modify it under the terms of the GNU Lesser General Public
+License as published by the Free Software Foundation; either
+version 2.1 of the License, or (at your option) any later version.
+
+This library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public
+License along with this library; if not, write to the Free Software
+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 "../../components"
+import "../.."
+
+BaseDetailPage {
+    SilicaFlickable {
+        anchors.fill: parent
+        contentHeight: content.height
+
+        Column {
+            id: content
+            width: parent.width
+            spacing: Theme.paddingMedium
+
+            PageHeader {
+                title: itemData.Name
+                description: qsTr("Released: %1 — Run time: %2").arg(itemData.ProductionYear).arg(Utils.ticksToText(itemData.RunTimeTicks))
+            }
+
+            PlayToolbar {
+                width: parent.width
+                imageSource: Utils.itemImageUrl(ApiClient.baseUrl, itemData, "Primary", {"maxWidth": parent.width})
+                imageAspectRatio: 1.66666 //itemData.PrimaryImageAspectRatio
+                onPlayPressed: pageStack.push(Qt.resolvedUrl("../../pages/VideoPage.qml"),
+                                              {"itemId": itemId, "itemData": itemData, "audioTrack": trackSelector.audioTrack,
+                                                  "subtitleTrack": trackSelector.subtitleTrack })
+            }
+
+            VideoTrackSelector {
+                id: trackSelector
+                width: parent.width
+                tracks: itemData.MediaStreams
+            }
+
+            SectionHeader {
+                text: qsTr("Overview")
+            }
+
+            PlainLabel {
+                id: overviewText
+                text: itemData.Overview
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.secondaryHighlightColor
+            }
+        }
+    }
+}

qml/pages/itemdetails/MusicAlbumPage.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.0
+
+Item {
+
+}

qml/pages/itemdetails/SeasonPage.qml

@@ -0,0 +1,137 @@
+/*
+Sailfin: a Jellyfin client written using Qt
+Copyright (C) 2020 Chris Josten
+
+This library is free software; you can redistribute it and/or
+modify it under the terms of the GNU Lesser General Public
+License as published by the Free Software Foundation; either
+version 2.1 of the License, or (at your option) any later version.
+
+This library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public
+License along with this library; if not, write to the Free Software
+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 "../.."
+import "../../components"
+import ".."
+
+BaseDetailPage {
+    SilicaFlickable {
+        anchors.fill: parent
+        contentHeight: content.height
+
+        Column {
+            id: content
+            width: parent.width
+
+            PageHeader {
+                title: itemData.Name
+                description: itemData.SeriesName
+            }
+
+            ShowEpisodesModel {
+                id: episodeModel
+                apiClient: ApiClient
+                show: itemData.SeriesId
+                seasonId: itemData.Id
+                fields: ["Overview"]
+            }
+
+            ColumnView {
+                model: episodeModel
+                itemHeight: Constants.libraryDelegateHeight
+                delegate: BackgroundItem {
+                    height: Constants.libraryDelegateHeight
+                    RemoteImage {
+                        id: episodeImage
+                        anchors {
+                            top: parent.top
+                            left: parent.left
+                            bottom: parent.bottom
+                        }
+                        width: Constants.libraryDelegateWidth
+                        height: Constants.libraryDelegateHeight
+                        source: Utils.itemModelImageUrl(ApiClient.baseUrl, model.id, model.imageTags["Primary"], "Primary", {"maxHeight": height})
+                        fillMode: Image.PreserveAspectCrop
+                        clip: true
+
+                        // Makes the progress bar stand out more
+                        Shim {
+                            anchors {
+                                left: parent.left
+                                bottom: parent.bottom
+                                right: parent.right
+                            }
+                            height: parent.height / 3
+                            shimColor: Theme.overlayBackgroundColor
+                            shimOpacity: Theme.opacityOverlay
+                            //width: model.userData.PlayedPercentage * parent.width / 100
+                            visible: episodeProgress.width > 0 // It doesn't look nice when it's visible on every image
+                        }
+
+                        Rectangle {
+                            id: episodeProgress
+                            anchors {
+                                left: parent.left
+                                bottom: parent.bottom
+                            }
+                            height: Theme.paddingMedium
+                            width: model.userData.PlayedPercentage * parent.width / 100
+                            color: Theme.highlightColor
+                        }
+                    }
+
+                    Label {
+                        id: episodeTitle
+                        anchors {
+                            left: episodeImage.right
+                            leftMargin: Theme.paddingLarge
+                            top: parent.top
+                            right: parent.right
+                            rightMargin: Theme.horizontalPageMargin
+                        }
+                        text: model.name
+                        truncationMode: TruncationMode.Fade
+                        horizontalAlignment: Text.AlignLeft
+                    }
+
+                    Label {
+                        id: episodeOverview
+                        anchors {
+                            left: episodeImage.right
+                            leftMargin: Theme.paddingLarge
+                            right: parent.right
+                            rightMargin: Theme.horizontalPageMargin
+                            top: episodeTitle.bottom
+                            bottom: parent.bottom
+                        }
+                        color: highlighted ? Theme.secondaryHighlightColor: Theme.secondaryColor
+                        font.pixelSize: Theme.fontSizeExtraSmall
+                        //: No overview/summary text of an episode available
+                        text: model.overview || qsTr("No overview available")
+                        wrapMode: Text.WordWrap
+                        elide: Text.ElideRight
+                    }
+                    onClicked: pageStack.push(Utils.getPageUrl(model.type), {"itemId": model.id})
+                }
+            }
+
+        }
+    }
+    onItemDataChanged: {
+        console.log(JSON.stringify(itemData))
+        episodeModel.show = itemData.SeriesId
+        episodeModel.seasonId = itemData.Id
+        episodeModel.reload()
+    }
+}

qml/pages/itemdetails/SeriesPage.qml

@@ -0,0 +1,93 @@
+/*
+Sailfin: a Jellyfin client written using Qt
+Copyright (C) 2020 Chris Josten
+
+This library is free software; you can redistribute it and/or
+modify it under the terms of the GNU Lesser General Public
+License as published by the Free Software Foundation; either
+version 2.1 of the License, or (at your option) any later version.
+
+This library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public
+License along with this library; if not, write to the Free Software
+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 "../../components"
+import "../.."
+
+BaseDetailPage {
+    SilicaFlickable {
+        anchors.fill: parent
+        contentHeight: content.height
+
+        Column {
+            id: content
+            width: parent.width
+
+            PageHeader {
+                id: header
+                title: itemData.Name
+                visible: !hasLogo
+            }
+
+            Item {
+                visible: hasLogo
+                width: parent.width
+                height: Math.max(logoImage.height, header.height) + 2 * Theme.paddingLarge
+                RemoteImage {
+                    id: logoImage
+                    anchors.centerIn: parent
+                    source: Utils.itemImageUrl(ApiClient.baseUrl, itemData, "Logo")
+                }
+            }
+
+            PlainLabel {
+                id: overviewText
+                text: itemData.Overview
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.secondaryHighlightColor
+            }
+
+            SectionHeader {
+                //: Seasons of a (TV) show
+                text: qsTr("Seasons")
+            }
+
+            ShowSeasonsModel {
+                id: showSeasonsModel
+                apiClient: ApiClient
+                show: itemData.Id
+            }
+
+            SilicaListView {
+                model: showSeasonsModel
+                clip: true
+                width: parent.width
+                height: Screen.width / 2
+                orientation: ListView.Horizontal
+                spacing: Theme.paddingLarge
+                leftMargin: Theme.horizontalPageMargin
+                rightMargin: Theme.horizontalPageMargin
+                delegate: LibraryItemDelegate {
+                    poster: Utils.itemModelImageUrl(ApiClient.baseUrl, model.id, model.imageTags["Primary"], "Primary", {"maxHeight": height})
+                    title: model.name
+                    onClicked: pageStack.push(Utils.getPageUrl(model.type), {"itemId": model.id})
+                }
+            }
+
+        }
+    }
+    onItemDataChanged: {
+        showSeasonsModel.show = itemData.Id
+        showSeasonsModel.reload()
+    }
+}

qml/pages/itemdetails/UnsupportedPage.qml

@@ -0,0 +1,36 @@
+/*
+Sailfin: a Jellyfin client written using Qt
+Copyright (C) 2020 Chris Josten
+
+This library is free software; you can redistribute it and/or
+modify it under the terms of the GNU Lesser General Public
+License as published by the Free Software Foundation; either
+version 2.1 of the License, or (at your option) any later version.
+
+This library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public
+License along with this library; if not, write to the Free Software
+Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
+*/
+
+import QtQuick 2.6
+import Sailfish.Silica 1.0
+
+BaseDetailPage {
+    SilicaFlickable {
+        anchors.fill: parent
+        PageHeader {
+            title: itemData.Name
+        }
+        ViewPlaceholder {
+
+            enabled: true
+            text: qsTr("Item type (%1) unsupported").arg(itemData.Type)
+            hintText: qsTr("This is still an alpha version :)")
+        }
+    }
+}