Better narrow cover

sailfish/qml/components/RemoteImage.qml

@@ -32,9 +32,10 @@ SilicaItem {
     property color fallbackColor: Theme.highlightColor
 
     property var __parentPage : null
-    property bool alreadyLoaded: false
+    property bool _alreadyLoaded: false
+    readonly property bool _shouldLoad: _alreadyLoaded || __parentPage && [PageStatus.Active, PageStatus.Deactivating].indexOf(__parentPage.status) >= 0
 
-    onSourceChanged: alreadyLoaded = false
+    onSourceChanged: _alreadyLoaded = false
 
     /**
      * BlurHash that is used as placeholder
@@ -47,7 +48,11 @@ SilicaItem {
     property string source: ""
     property alias sourceSize: realImage.sourceSize
     property var fillMode: Image.Stretch
-    property alias status: realImage.status
+    property int status: {
+        if (!source) return Image.Null
+        if (realImage.status == Image.Null && !_shouldLoad) return Image.Loading
+        return realImage.status
+    }
     implicitHeight: realImage.implicitHeight
     implicitWidth: realImage.implicitWidth
 
@@ -57,10 +62,10 @@ SilicaItem {
         asynchronous: true
         fillMode: root.fillMode
         opacity: 1
-        source: alreadyLoaded || __parentPage && [PageStatus.Active, PageStatus.Deactivating].indexOf(__parentPage.status) >= 0 ? root.source : ""
+        source:  _shouldLoad ? root.source : ""
         onStatusChanged: {
             if (status == Image.Ready) {
-                alreadyLoaded = true
+                _alreadyLoaded = true
             }
         }
     }
@@ -141,7 +146,7 @@ SilicaItem {
 
     Component.onCompleted: {
         var item = parent;
-        while (item != null) {
+        while (item !== null) {
             if ("__silica_page" in item) {
                 __parentPage = item
                 break;

sailfish/qml/components/music/NarrowAlbumCover.qml

@@ -29,42 +29,47 @@ import "../.."
 Item {
     property ListView listview
     property real releaseYear
-    property alias albumArt: albumArt.source
+    property alias albumArt: albumArtImage.source
     property string albumArtist
     property real duration
     property int songCount
     property string name
-    property alias blurhash : albumArt.blurhash
+    property alias blurhash : albumArtImage.blurhash
+    property bool twoColumns
 
-
+    readonly property real smallSize: albumHeader.height
-    property string stateIfArt: "largeArt"
+    readonly property real bigSize: listHeader.width
-    property alias _albumArt: albumArt
     id: listHeader
     width: parent.width
     //spacing: Theme.paddingLarge
-    state: _albumArt.source != "" ? stateIfArt : "noArt"
+
     MouseArea {
-        anchors.fill: parent
+        anchors.fill: albumArtImage
         onClicked: {
-            if (listHeader.stateIfArt == "largeArt") {
+            if (listview.contentY < -bigSize + 10) {
-                listHeader.stateIfArt = "details"
+                listviewShrinkAnimation.start()
             } else {
-                listHeader.stateIfArt = "largeArt"
+                listviewGrowAnimation.start()
             }
         }
     }
-    RemoteImage {
+
-        id: albumArt
+    NumberAnimation {
-        anchors {
+        id: listviewShrinkAnimation
-            top: parent.top
+        target: listview
-            right: parent.right
+        property: "contentY"
-        }
+        easing.type: Easing.OutCubic
-        sourceSize.width: listHeader.width
+        to: -smallSize
-        sourceSize.height: listHeader.width
-        fillMode: Image.PreserveAspectFit
-        opacity: 1
-        clip: true
     }
+
+    NumberAnimation {
+        id: listviewGrowAnimation
+        target: listview
+        property: "contentY"
+        easing.type: Easing.OutCubic
+        to: -bigSize
+    }
+
     PageHeader {
         id: albumHeader
         width: parent.width - Theme.horizontalPageMargin - height
@@ -78,79 +83,140 @@ Item {
             .arg(releaseYear >= 0 ? releaseYear : qsTr("Unknown year"))
     }
 
+    RemoteImage {
+        id: albumArtImage
+        anchors {
+            right: parent.right
+            bottom: parent.bottom
+        }
+        sourceSize.width: listHeader.width
+        sourceSize.height: listHeader.width
+        fillMode: Image.PreserveAspectFit
+        opacity: 1
+        clip: true
+    }
+
     states: [
         State {
-            name: "largeArt"
+            name: "art"
-            PropertyChanges {
+            when: albumArtImage.status != Image.Null && !twoColumns
-                target: _albumArt
-                width: parent.width
-                height: width
-            }
-            PropertyChanges {
-                target: listHeader
-                height: width
-            }
-            PropertyChanges {
-                target: albumHeader
-                opacity: 0
-            }
             PropertyChanges {
                 target: listview
-                contentY: -listview.width
+                //contentY: -smallSize
-            }
+                topMargin: Screen.width - smallSize
-            AnchorChanges {
+                bottomMargin: listview.contentHeight < listview.height ? listview.height - listview.contentHeight : 0
-                target: albumHeader
-                anchors.left: undefined
-                anchors.right: _albumArt.left
-            }
-        },
-        State {
-            name: "details"
-            PropertyChanges {
-                target: _albumArt
-                width: height
-                height: albumHeader.height
             }
             PropertyChanges {
-                target: listHeader
+                target: albumArtImage
-                height: albumHeader.height
-            }
-            PropertyChanges {
-                target: albumHeader
                 opacity: 1
+                width: height
+                height: smallSize + -(Math.min(listview.contentY + smallSize, 0) / (listview.topMargin)) * (bigSize - smallSize)
             }
             PropertyChanges {
-                target: listview
+                target: listHeader
-                contentY: -albumHeader.height
+                height: smallSize
+                visible: true
+            }
+            PropertyChanges {
+                target: albumHeader
+                opacity: 1.0 - Math.min(1.0, Math.max(0.0, -Math.min(listview.contentY + smallSize, 0) / (listview.topMargin)))
+                anchors.rightMargin: Theme.paddingMedium + albumArtImage.width
             }
             AnchorChanges {
                 target: albumHeader
+                anchors.top: albumArtImage.top
                 anchors.left: undefined
-                anchors.right: _albumArt.left
+                anchors.right: parent.right
             }
         },
         State {
             name: "noArt"
-            extend: "details"
+            when: albumArtImage.status == Image.Null && !twoColumns
             PropertyChanges {
-                target: _albumArt
+                target: albumArtImage
                 opacity: 0
             }
+            PropertyChanges {
+                target: listHeader
+                height: smallSize
+            }
             PropertyChanges {
                 target: albumHeader
                 width: parent.width - Theme.horizontalPageMargin * 2
+                opacity: 1
             }
             AnchorChanges {
                 target: albumHeader
+                anchors.top: parent.top
                 anchors.left: parent.left
                 anchors.right: parent.right
             }
+
+        },
+        State {
+            name: "hidden"
+            when: twoColumns
+            PropertyChanges {
+                target: listview
+                topMargin: 0
+            }
+
+            PropertyChanges {
+                target: listHeader
+                height: 0
+                visible: false
+            }
         }
     ]
     transitions: [
-        Transition {
+        /*Transition {
             from: "noArt"
             // No transitions from "noArt", otherwise the layout animates every load
+        },*/
+        Transition {
+            from: "hidden"
+            SequentialAnimation {
+                PauseAnimation {
+                    duration: 50
+                }
+                ScriptAction {
+                    script: {
+                        if (listview.contentY < 10) {
+                            listviewShrinkAnimation.start()
+                        }
+                    }
+                }
+            }
+        },
+        Transition {
+            to: "noArt"
+            SequentialAnimation {
+                PauseAnimation {
+                    duration: 10
+                }
+                ScriptAction {
+                    script: {
+                        if (listview.contentY < 10) {
+                            listview.contentY = -smallSize
+                        }
+                    }
+                }
+            }
+        },
+        Transition {
+            to: "art"
+            SequentialAnimation {
+                PauseAnimation {
+                    duration: 10
+                }
+                ScriptAction {
+                    script: {
+                        if (listview.contentY < 10) {
+                            listview.contentY = -smallSize
+                        }
+                    }
+                }
+            }
         },
         Transition {
             OpacityAnimator { target: albumHeader}

sailfish/qml/components/music/WideAlbumCover.qml

@@ -36,6 +36,7 @@ Column {
     property int songCount
     property string name
     property alias blurhash : albumArt.blurhash
+    property bool twoColumns: true
 
     Item { width:1; height: Theme.paddingLarge }
 

sailfish/qml/pages/itemdetails/MusicAlbumPage.qml

@@ -32,6 +32,8 @@ BaseDetailPage {
     property string _albumArtistText: itemData.albumArtist
     width: 800 * Theme.pixelRatio
 
+    readonly property bool _twoColumns: albumPageRoot.width / Theme.pixelRatio >= 800
+
     UserItemModel {
         id: collectionModel
         apiClient: ApiClient
@@ -46,7 +48,7 @@ BaseDetailPage {
         Item {height: 1; width: Theme.horizontalPageMargin; visible: wideAlbumCover.visible; }
         Loader {
             id: wideAlbumCover
-            visible: albumPageRoot.width / Theme.pixelRatio >= 800
+            visible: _twoColumns
             Layout.minimumWidth: 1000 / Theme.pixelRatio
             Layout.fillHeight: true
             source: visible
@@ -61,9 +63,7 @@ BaseDetailPage {
             model: collectionModel
             header: Loader {
                 width: parent.width
-                height: item ? item.height : 0
+                source: "../../components/music/NarrowAlbumCover.qml"
-                source: albumPageRoot.width / Theme.pixelRatio < 800
-                        ? "../../components/music/NarrowAlbumCover.qml" : ""
                 onLoaded: bindAlbum(item)
             }
             section {
@@ -83,10 +83,6 @@ BaseDetailPage {
         }
     }
 
-    Label {
-        text: "%1; %2".arg(Theme.pixelRatio).arg(stateIfArt)
-    }
-
     Connections {
         target: itemData
         onAlbumArtistsChanged: {
@@ -107,5 +103,6 @@ BaseDetailPage {
         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"]]; })
+        item.twoColumns = Qt.binding(function() { return _twoColumns })
     }
 }