Merge pull request #23 from heartfin/22-music-player-album-art-with-a-non-11-aspect-ratio-breaks-the-narrow-header

Code deduplication and bug fix in the album cover

sailfish/qml/components/music/NarrowAlbumCover.qml

@@ -27,21 +27,20 @@ import "../.."
  * Album details for "narrow" devices such as phones in portrait mode.
  */
 Item {
+    id: listHeader
     property ListView listview
-    property real releaseYear
     property alias albumArt: albumArtImage.source
-    property string albumArtist
-    property real duration
-    property int songCount
     property string name
     property alias blurhash : albumArtImage.blurhash
     property bool twoColumns
     property real aspectRatio
-    property string type
+    property string description
+
+    readonly property real smallHeight: albumHeader.height
+    readonly property real smallWidth: smallHeight * aspectRatio
+    readonly property real bigWidth: listHeader.width
+    readonly property real bigHeight: bigWidth / aspectRatio
 
-    readonly property real smallSize: albumHeader.height
-    readonly property real bigSize: listHeader.width / aspectRatio
-    id: listHeader
     width: parent.width
     //spacing: Theme.paddingLarge
 
@@ -49,7 +48,7 @@ Item {
         target: listview
         onVerticalVelocityChanged: {
             if (!listview.draggingVertically && Math.abs(listview.verticalVelocity) < Theme.itemSizeMedium
-                    && listview.contentY < -smallSize) {
+                    && listview.contentY < -smallHeight) {
                 if (listview.verticalVelocity > 0) {
                     listview.cancelFlick()
                     listviewShrinkAnimation.start()
@@ -61,7 +60,7 @@ Item {
         }
         onDraggingVerticallyChanged: {
             if (!listview.draggingVertically && listview.verticalVelocity == 0) {
-                if (-smallSize - listview.contentY > -bigSize - listview.contentY) {
+                if (-smallHeight - listview.contentY > -bigHeight - listview.contentY) {
                     listviewShrinkAnimation.start()
                 } else {
                     listviewGrowAnimation.start()
@@ -73,7 +72,7 @@ Item {
     MouseArea {
         anchors.fill: albumArtImage
         onClicked: {
-            if (listview.contentY < -bigSize + 10) {
+            if (listview.contentY < -bigHeight + 10) {
                 listviewShrinkAnimation.start()
             } else {
                 listviewGrowAnimation.start()
@@ -86,7 +85,7 @@ Item {
         target: listview
         property: "contentY"
         easing.type: Easing.OutCubic
-        to: -smallSize
+        to: -smallHeight
     }
 
     NumberAnimation {
@@ -94,30 +93,14 @@ Item {
         target: listview
         property: "contentY"
         easing.type: Easing.OutCubic
-        to: -bigSize
+        to: -bigHeight
     }
 
     PageHeader {
         id: albumHeader
         width: parent.width - Theme.horizontalPageMargin - height
         title: name
-        //: Short description of the album: %1 -> album artist, %2 -> amount of songs, %3 -> duration, %4 -> release year
-        description: {
-            if (type == "MusicAlbum") {
-                //: Short description of the album: %1 -> album artist, %2 -> amount of songs, %3 -> duration, %4 -> release year
-                qsTr("%1\n%2 songs | %3 | %4")
-                    .arg(albumArtist)
-                    .arg(songCount)
-                    .arg(Utils.ticksToText(duration))
-                    //: Unknown album release year
-                    .arg(releaseYear >= 0 ? releaseYear : qsTr("Unknown year"))
-            } else {
-                qsTr("Playlist\n%1 songs | %2")
-                    .arg(songCount)
-                    .arg(Utils.ticksToText(duration))
-            }
-        }
-
+        description: listHeader.description
     }
 
     RemoteImage {
@@ -126,8 +109,9 @@ Item {
             right: parent.right
             bottom: parent.bottom
         }
+        aspectRatio: listHeader.aspectRatio
         sourceSize.width: listHeader.width
-        sourceSize.height: listHeader.width
+        sourceSize.height: listHeader.width / aspectRatio
         fillMode: Image.PreserveAspectFit
         opacity: 1
         clip: true
@@ -139,24 +123,24 @@ Item {
             when: albumArtImage.status != Image.Null && !twoColumns
             PropertyChanges {
                 target: listview
-                //contentY: -smallSize
-                topMargin: Screen.width - smallSize
+                //contentY: -smallHeight
+                topMargin: bigHeight - smallHeight
                 bottomMargin: listview.contentHeight < listview.height ? listview.height - listview.contentHeight : 0
             }
             PropertyChanges {
                 target: albumArtImage
                 opacity: 1
-                width: height
-                height: smallSize + -(Math.min(listview.contentY + smallSize, 0) / (listview.topMargin)) * (bigSize - smallSize)
+                width: height * aspectRatio
+                height: smallHeight + -(Math.min(listview.contentY + smallHeight , 0) / (listview.topMargin)) * (bigHeight - smallHeight)
             }
             PropertyChanges {
                 target: listHeader
-                height: smallSize
+                height: smallHeight
                 visible: true
             }
             PropertyChanges {
                 target: albumHeader
-                opacity: 1.0 - Math.min(1.0, Math.max(0.0, -Math.min(listview.contentY + smallSize, 0) / (listview.topMargin)))
+                opacity: 1.0 - Math.min(1.0, Math.max(0.0, -Math.min(listview.contentY + smallHeight, 0) / (listview.topMargin)))
                 anchors.rightMargin: Theme.paddingMedium + albumArtImage.width
             }
             AnchorChanges {
@@ -175,7 +159,7 @@ Item {
             }
             PropertyChanges {
                 target: listHeader
-                height: smallSize
+                height: smallHeight
             }
             PropertyChanges {
                 target: albumHeader
@@ -234,7 +218,7 @@ Item {
                 ScriptAction {
                     script: {
                         if (listview.contentY < 10) {
-                            listview.contentY = -smallSize
+                            listview.contentY = -smallHeight
                         }
                     }
                 }
@@ -249,7 +233,7 @@ Item {
                 ScriptAction {
                     script: {
                         if (listview.contentY < 10) {
-                            listview.contentY = -smallSize
+                            listview.contentY = -smallHeight
                         }
                     }
                 }

sailfish/qml/components/music/WideAlbumCover.qml

@@ -30,16 +30,12 @@ import "../.."
 Column {
     id: wideAlbumCover
     property ListView listview
-    property real releaseYear
     property alias albumArt: albumArt.source
-    property string albumArtist
-    property real duration
-    property int songCount
     property string name
     property alias blurhash : albumArt.blurhash
     property bool twoColumns: true
     property real aspectRatio
-    property string type
+    property string description
 
     Item { width:1; height: Theme.paddingLarge }
 
@@ -54,21 +50,6 @@ Column {
         leftMargin: 0
         rightMargin: 0
         title: name
-        description: {
-            if (wideAlbumCover.type == "MusicAlbum") {
-                //: Short description of the album: %1 -> album artist, %2 -> amount of songs, %3 -> duration, %4 -> release year
-                qsTr("%1\n%2 songs | %3 | %4")
-                    .arg(albumArtist)
-                    .arg(songCount)
-                    .arg(Utils.ticksToText(duration))
-                    //: Unknown album release year
-                    .arg(releaseYear >= 0 ? releaseYear : qsTr("Unknown year"))
-            } else {
-                //: Playlist header: %1 -> amount of songs in the playlist, %2 -> Total duration
-                qsTr("Playlist\n%1 songs | %2")
-                    .arg(songCount)
-                    .arg(Utils.ticksToText(duration))
-            }
-        }
+        description: wideAlbumCover.description
     }
 }

sailfish/qml/pages/itemdetails/MusicAlbumPage.qml

@@ -33,12 +33,27 @@ BaseDetailPage {
 
     property bool _collectionModelLoaded: false
     readonly property bool _twoColumns: albumPageRoot.width / Theme.pixelRatio >= 800
+    readonly property string _description: {
+        if (itemData.type === "MusicAlbum") {
+            //: Short description of the album: %1 -> album artist, %2 -> amount of songs, %3 -> duration, %4 -> release year
+            qsTr("%1\n%2 songs | %3 | %4")
+                .arg(itemData.albumArtist)
+                .arg(itemData.childCount)
+                .arg(Utils.ticksToText(itemData.runTimeTicks))
+                //: Unknown album release year
+                .arg(itemData.productionYear >= 0 ? itemData.productionYear : qsTr("Unknown year"))
+        } else {
+            qsTr("Playlist\n%1 songs | %2")
+                .arg(itemData.childCount)
+                .arg(Utils.ticksToText(itemData.runTimeTicks))
+        }
+    }
 
     J.ItemModel {
         id: collectionModel
         loader: J.UserItemsLoader {
             apiClient: appWindow.apiClient
-            sortBy: itemData.type === "MusicAlbum" ? "ParentIndexNumber,IndexNumber,SortName" : undefined
+            sortBy: itemData.type === "MusicAlbum" ? "ParentIndexNumber,IndexNumber,SortName" : ""
             fields: [J.ItemFields.ItemCounts, J.ItemFields.PrimaryImageAspectRatio]
             parentId: itemData.jellyfinId
             autoReload: itemData.jellyfinId.length > 0
@@ -70,7 +85,7 @@ BaseDetailPage {
                 onLoaded: bindAlbum(item)
             }
             section {
-                property: itemData.type === "MusicAlbum" ? "parentIndexNumber" : undefined
+                property: itemData.type === "MusicAlbum" ? "parentIndexNumber" : ""
                 delegate: SectionHeader {
                     text: qsTr("Disc %1").arg(section)
                 }
@@ -91,14 +106,10 @@ BaseDetailPage {
     function bindAlbum(item) {
         item.albumArt = Qt.binding(function(){ return Utils.itemImageUrl(apiClient.baseUrl, itemData, "Primary", {"maxWidth": parent.width})})
         item.name = Qt.binding(function(){ return itemData.name})
-        item.releaseYear = Qt.binding(function() { return itemData.productionYear})
-        item.albumArtist = Qt.binding(function() { return itemData.albumArtist})
-        item.duration = Qt.binding(function() { return itemData.runTimeTicks})
-        item.songCount = Qt.binding(function() { return itemData.childCount})
         item.listview = Qt.binding(function() { return list})
         item.aspectRatio = Qt.binding(function() { return itemData.primaryImageAspectRatio})
         item.blurhash = Qt.binding(function() { return itemData.imageBlurHashes["Primary"][itemData.imageTags["Primary"]]; })
         item.twoColumns = Qt.binding(function() { return _twoColumns })
-        item.type = Qt.binding(function() { return itemData.type})
+        item.description = Qt.binding(function() { return _description })
     }
 }