Add rough Sailfish 4.0 page background implementation

core/include/JellyfinQt/jellyfinitem.h

@@ -311,6 +311,8 @@ public:
     // the properties and generate a class based on that.
     // Doing that in C++ would be more difficult and I dislike qmake. Does it even support running programs at compile time?
     // But here I am, using ctrl-C++
+
+    // Please keep the order of the properties the same as in the file linked above.
     Q_PROPERTY(QString name MEMBER m_name NOTIFY nameChanged)
     Q_PROPERTY(QString originalTitle MEMBER m_originalTitle NOTIFY originalTitleChanged)
     Q_PROPERTY(QString serverId MEMBER m_serverId NOTIFY serverIdChanged)
@@ -347,6 +349,8 @@ public:
     Q_PROPERTY(int indexNumberEnd READ indexNumberEnd WRITE setIndexNumberEnd NOTIFY indexNumberEndChanged)
     Q_PROPERTY(bool isFolder READ isFolder WRITE setIsFolder NOTIFY isFolderChanged)
     Q_PROPERTY(QString type MEMBER m_type NOTIFY typeChanged)
+    Q_PROPERTY(QString parentBackdropItemId MEMBER m_parentBackdropItemId NOTIFY parentBackdropItemIdChanged)
+    Q_PROPERTY(QStringList parentBackdropImageTags MEMBER m_parentBackdropImageTags NOTIFY parentBackdropImageTagsChanged)
     Q_PROPERTY(UserData *userData MEMBER m_userData NOTIFY userDataChanged)
     Q_PROPERTY(int recursiveItemCount READ recursiveItemCount WRITE setRecursiveItemCount NOTIFY recursiveItemCountChanged)
     Q_PROPERTY(int childCount READ childCount WRITE setChildCount NOTIFY childCountChanged)
@@ -361,6 +365,7 @@ public:
     // Why is this a QJsonObject? Well, because I couldn't be bothered to implement the deserialisations of
     // a QHash at the moment.
     Q_PROPERTY(QJsonObject imageTags MEMBER m_imageTags NOTIFY imageTagsChanged)
+    Q_PROPERTY(QStringList backdropImageTags MEMBER m_backdropImageTags NOTIFY backdropImageTagsChanged)
     Q_PROPERTY(QJsonObject imageBlurHashes MEMBER m_imageBlurHashes NOTIFY imageBlurHashesChanged)
     Q_PROPERTY(int width MEMBER m_width NOTIFY widthChanged)
     Q_PROPERTY(int height MEMBER m_height NOTIFY heightChanged)
@@ -441,6 +446,8 @@ signals:
     void indexNumberEndChanged(int newIndexNumberEnd);
     void isFolderChanged(bool newIsFolder);
     void typeChanged(const QString &newType);
+    void parentBackdropItemIdChanged();
+    void parentBackdropImageTagsChanged();
     void userDataChanged(UserData *newUserData);
     void recursiveItemCountChanged(int newRecursiveItemCount);
     void childCountChanged(int newChildCount);
@@ -451,6 +458,7 @@ signals:
     void mediaStreamsChanged(/*const QList<MediaStream *> &newMediaStreams*/);
     void artistsChanged(const QStringList &newArtists);
     void imageTagsChanged();
+    void backdropImageTagsChanged();
     void imageBlurHashesChanged();
     void widthChanged(int newWidth);
     void heightChanged(int newHeight);
@@ -496,6 +504,8 @@ protected:
     std::optional<int> m_indexNumberEnd = std::nullopt;
     std::optional<bool> m_isFolder = std::nullopt;
     QString m_type;
+    QString m_parentBackdropItemId;
+    QStringList m_parentBackdropImageTags;
     UserData *m_userData = nullptr;
     std::optional<int> m_recursiveItemCount = std::nullopt;
     std::optional<int> m_childCount = std::nullopt;
@@ -508,6 +518,7 @@ protected:
     QVariantList m_mediaStreams;
     QStringList m_artists;
     QJsonObject m_imageTags;
+    QStringList m_backdropImageTags;
     QJsonObject m_imageBlurHashes;
     int m_width;
     int m_height;

sailfish/qml/components/GlassyBackground.qml

@@ -1,71 +0,0 @@
-/*
-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
-*/
-
-/*
-File taken and adapted from hutspot. Licensed under the MIT license.
-Copyright (c) 2019 sailfish-spotify contributors
-View ../licenses/MIT.txt for the full license.
-*/
-import QtQuick 2.6
-import Sailfish.Silica 1.0
-import QtGraphicalEffects 1.0
-
-/**
- * A silica-like background for displaying backdrops.
- */
-Rectangle {
-    property alias source: backgroundImage.source
-    property alias sourceSize: backgroundImage.sourceSize
-    property real dimmedOpacity: Theme.opacityFaint
-    readonly property alias status: backgroundImage.status
-    color: Theme.colorScheme == Theme.DarkOnLight ? "#fff" : "#000"
-    z: -1
-    opacity: status == Image.Ready ? 1.0 : 0.0
-    Behavior on opacity { FadeAnimator {} }
-
-    Image {
-        id: backgroundImage
-        cache: true
-        smooth: false
-        asynchronous: true
-        fillMode: Image.PreserveAspectCrop
-        anchors.fill: parent
-        visible: false
-    }
-
-    FastBlur {
-        cached: true
-        anchors.fill: backgroundImage
-        source: backgroundImage
-        opacity: dimmedOpacity
-        radius: 100
-    }
-
-    Image {
-        anchors.fill: parent
-        fillMode:  Image.Tile
-        source: "image://theme/graphic-shader-texture"
-        opacity: 0.1
-        visible: parent.visible
-    }
-
-    function clear() {
-        //source = ""
-    }
-}

sailfish/qml/pages/itemdetails/BaseDetailPage.qml

@@ -18,10 +18,12 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 */
 import QtQuick 2.6
 import Sailfish.Silica 1.0
+import Sailfish.Silica.Background 1.0
 
 import nl.netsoj.chris.Jellyfin 1.0
 
 import "../../components"
+import "../.."
 
 /**
  * This page displays details about a film, show, season, episode, and so on.
@@ -37,31 +39,46 @@ Page {
     //property var itemData: ({})
     property bool _loading: jItem.status === "Loading"
     readonly property bool hasLogo: (typeof itemData.ImageTags !== "undefined") && (typeof itemData.ImageTags["Logo"] !== "undefined")
-    readonly property var _backdropImages: itemData.BackdropImageTags
+    readonly property var _backdropImages: itemData.backdropImageTags
-    readonly property var _parentBackdropImages: itemData.ParentBackdropImageTags
+    readonly property var _parentBackdropImages: itemData.parentBackdropImageTags
+    property string _chosenBackdropImage: ""
     readonly property string parentId: itemData.ParentId || ""
-    property alias backdrop: backdrop
 
     on_BackdropImagesChanged: updateBackdrop()
     on_ParentBackdropImagesChanged: updateBackdrop()
 
     function updateBackdrop() {
-        return;
+        if (itemData.backdropImageTags.length > 0) {
-        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
+            _chosenBackdropImage = ApiClient.baseUrl + "/Items/" + itemId + "/Images/Backdrop/" + rand + "?tag=" + _backdropImages[rand] + "&maxHeight" + height
-        } else if (_parentBackdropImages && _parentBackdropImages.length > 0) {
+            //_chosenBackdropImage = Utils.itemImageUrl(ApiClient.baseUrl, itemData, "Backdrop/" + rand)
-            console.log(parentId)
+        } else if (itemData.parentBackdropImageTags.length > 0) {
-            backdrop.source = ApiClient.baseUrl + "/Items/" + itemData.ParentBackdropItemId + "/Images/Backdrop/0?tag=" + _parentBackdropImages[0]
+            _chosenBackdropImage = ApiClient.baseUrl + "/Items/" + itemData.parentBackdropItemId + "/Images/Backdrop/0?tag=" + _parentBackdropImages[0]
         }
     }
 
 
     allowedOrientations: Orientation.All
-    GlassyBackground {
+    background: _chosenBackdropImage ? backdropBackground : null
+
+    Component {
+        id: backdropBackground
+        ThemeBackground {
+            sourceItem: backdrop
+            backgroundMaterial: Materials.blur
+        }
+    }
+
+    ThemeWallpaper {
         id: backdrop
-        anchors.fill: parent
+        source: _chosenBackdropImage
+        visible: false
+    }
+
+    Text {
+        color: "red"
+        text: _chosenBackdropImage || "No backdrop"
     }
 
     PageBusyIndicator {
@@ -104,7 +121,6 @@ Page {
 
     onStatusChanged: {
         if (status == PageStatus.Deactivating) {
-            backdrop.clear()
             //appWindow.itemData = ({})
         }
         if (status == PageStatus.Active) {