From 985a65154ad66edaefc8a7b8aa013fd169072f7c Mon Sep 17 00:00:00 2001 From: Henk Kalkwater Date: Sat, 23 Jul 2022 20:01:23 +0200 Subject: [PATCH] Code deduplication and bug fix Deduplicated code in the NarrowAlbumCover and WideAlbumCover. Additionally, this fixes a bug where the NarrowAlbumCover would behave wrongly with album covers with an aspect ratio not equal to 1.0. Resolves #22 --- .../qml/components/music/NarrowAlbumCover.qml | 64 +++++++------------ .../qml/components/music/WideAlbumCover.qml | 23 +------ .../qml/pages/itemdetails/MusicAlbumPage.qml | 25 ++++++-- 3 files changed, 44 insertions(+), 68 deletions(-) diff --git a/sailfish/qml/components/music/NarrowAlbumCover.qml b/sailfish/qml/components/music/NarrowAlbumCover.qml index 3b72f51..99ac4b5 100644 --- a/sailfish/qml/components/music/NarrowAlbumCover.qml +++ b/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 } } } diff --git a/sailfish/qml/components/music/WideAlbumCover.qml b/sailfish/qml/components/music/WideAlbumCover.qml index 0ba5611..4d53490 100644 --- a/sailfish/qml/components/music/WideAlbumCover.qml +++ b/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 } } diff --git a/sailfish/qml/pages/itemdetails/MusicAlbumPage.qml b/sailfish/qml/pages/itemdetails/MusicAlbumPage.qml index bdf8ea1..1827c64 100644 --- a/sailfish/qml/pages/itemdetails/MusicAlbumPage.qml +++ b/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 }) } }