mirror of
https://github.com/HenkKalkwater/harbour-sailfin.git
synced 2024-11-22 01:05:17 +00:00
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
This commit is contained in:
parent
4a178ee227
commit
985a65154a
|
@ -27,21 +27,20 @@ import "../.."
|
||||||
* Album details for "narrow" devices such as phones in portrait mode.
|
* Album details for "narrow" devices such as phones in portrait mode.
|
||||||
*/
|
*/
|
||||||
Item {
|
Item {
|
||||||
|
id: listHeader
|
||||||
property ListView listview
|
property ListView listview
|
||||||
property real releaseYear
|
|
||||||
property alias albumArt: albumArtImage.source
|
property alias albumArt: albumArtImage.source
|
||||||
property string albumArtist
|
|
||||||
property real duration
|
|
||||||
property int songCount
|
|
||||||
property string name
|
property string name
|
||||||
property alias blurhash : albumArtImage.blurhash
|
property alias blurhash : albumArtImage.blurhash
|
||||||
property bool twoColumns
|
property bool twoColumns
|
||||||
property real aspectRatio
|
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
|
width: parent.width
|
||||||
//spacing: Theme.paddingLarge
|
//spacing: Theme.paddingLarge
|
||||||
|
|
||||||
|
@ -49,7 +48,7 @@ Item {
|
||||||
target: listview
|
target: listview
|
||||||
onVerticalVelocityChanged: {
|
onVerticalVelocityChanged: {
|
||||||
if (!listview.draggingVertically && Math.abs(listview.verticalVelocity) < Theme.itemSizeMedium
|
if (!listview.draggingVertically && Math.abs(listview.verticalVelocity) < Theme.itemSizeMedium
|
||||||
&& listview.contentY < -smallSize) {
|
&& listview.contentY < -smallHeight) {
|
||||||
if (listview.verticalVelocity > 0) {
|
if (listview.verticalVelocity > 0) {
|
||||||
listview.cancelFlick()
|
listview.cancelFlick()
|
||||||
listviewShrinkAnimation.start()
|
listviewShrinkAnimation.start()
|
||||||
|
@ -61,7 +60,7 @@ Item {
|
||||||
}
|
}
|
||||||
onDraggingVerticallyChanged: {
|
onDraggingVerticallyChanged: {
|
||||||
if (!listview.draggingVertically && listview.verticalVelocity == 0) {
|
if (!listview.draggingVertically && listview.verticalVelocity == 0) {
|
||||||
if (-smallSize - listview.contentY > -bigSize - listview.contentY) {
|
if (-smallHeight - listview.contentY > -bigHeight - listview.contentY) {
|
||||||
listviewShrinkAnimation.start()
|
listviewShrinkAnimation.start()
|
||||||
} else {
|
} else {
|
||||||
listviewGrowAnimation.start()
|
listviewGrowAnimation.start()
|
||||||
|
@ -73,7 +72,7 @@ Item {
|
||||||
MouseArea {
|
MouseArea {
|
||||||
anchors.fill: albumArtImage
|
anchors.fill: albumArtImage
|
||||||
onClicked: {
|
onClicked: {
|
||||||
if (listview.contentY < -bigSize + 10) {
|
if (listview.contentY < -bigHeight + 10) {
|
||||||
listviewShrinkAnimation.start()
|
listviewShrinkAnimation.start()
|
||||||
} else {
|
} else {
|
||||||
listviewGrowAnimation.start()
|
listviewGrowAnimation.start()
|
||||||
|
@ -86,7 +85,7 @@ Item {
|
||||||
target: listview
|
target: listview
|
||||||
property: "contentY"
|
property: "contentY"
|
||||||
easing.type: Easing.OutCubic
|
easing.type: Easing.OutCubic
|
||||||
to: -smallSize
|
to: -smallHeight
|
||||||
}
|
}
|
||||||
|
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
|
@ -94,30 +93,14 @@ Item {
|
||||||
target: listview
|
target: listview
|
||||||
property: "contentY"
|
property: "contentY"
|
||||||
easing.type: Easing.OutCubic
|
easing.type: Easing.OutCubic
|
||||||
to: -bigSize
|
to: -bigHeight
|
||||||
}
|
}
|
||||||
|
|
||||||
PageHeader {
|
PageHeader {
|
||||||
id: albumHeader
|
id: albumHeader
|
||||||
width: parent.width - Theme.horizontalPageMargin - height
|
width: parent.width - Theme.horizontalPageMargin - height
|
||||||
title: name
|
title: name
|
||||||
//: Short description of the album: %1 -> album artist, %2 -> amount of songs, %3 -> duration, %4 -> release year
|
description: listHeader.description
|
||||||
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))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
RemoteImage {
|
RemoteImage {
|
||||||
|
@ -126,8 +109,9 @@ Item {
|
||||||
right: parent.right
|
right: parent.right
|
||||||
bottom: parent.bottom
|
bottom: parent.bottom
|
||||||
}
|
}
|
||||||
|
aspectRatio: listHeader.aspectRatio
|
||||||
sourceSize.width: listHeader.width
|
sourceSize.width: listHeader.width
|
||||||
sourceSize.height: listHeader.width
|
sourceSize.height: listHeader.width / aspectRatio
|
||||||
fillMode: Image.PreserveAspectFit
|
fillMode: Image.PreserveAspectFit
|
||||||
opacity: 1
|
opacity: 1
|
||||||
clip: true
|
clip: true
|
||||||
|
@ -139,24 +123,24 @@ Item {
|
||||||
when: albumArtImage.status != Image.Null && !twoColumns
|
when: albumArtImage.status != Image.Null && !twoColumns
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: listview
|
target: listview
|
||||||
//contentY: -smallSize
|
//contentY: -smallHeight
|
||||||
topMargin: Screen.width - smallSize
|
topMargin: bigHeight - smallHeight
|
||||||
bottomMargin: listview.contentHeight < listview.height ? listview.height - listview.contentHeight : 0
|
bottomMargin: listview.contentHeight < listview.height ? listview.height - listview.contentHeight : 0
|
||||||
}
|
}
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: albumArtImage
|
target: albumArtImage
|
||||||
opacity: 1
|
opacity: 1
|
||||||
width: height
|
width: height * aspectRatio
|
||||||
height: smallSize + -(Math.min(listview.contentY + smallSize, 0) / (listview.topMargin)) * (bigSize - smallSize)
|
height: smallHeight + -(Math.min(listview.contentY + smallHeight , 0) / (listview.topMargin)) * (bigHeight - smallHeight)
|
||||||
}
|
}
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: listHeader
|
target: listHeader
|
||||||
height: smallSize
|
height: smallHeight
|
||||||
visible: true
|
visible: true
|
||||||
}
|
}
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: albumHeader
|
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
|
anchors.rightMargin: Theme.paddingMedium + albumArtImage.width
|
||||||
}
|
}
|
||||||
AnchorChanges {
|
AnchorChanges {
|
||||||
|
@ -175,7 +159,7 @@ Item {
|
||||||
}
|
}
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: listHeader
|
target: listHeader
|
||||||
height: smallSize
|
height: smallHeight
|
||||||
}
|
}
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: albumHeader
|
target: albumHeader
|
||||||
|
@ -234,7 +218,7 @@ Item {
|
||||||
ScriptAction {
|
ScriptAction {
|
||||||
script: {
|
script: {
|
||||||
if (listview.contentY < 10) {
|
if (listview.contentY < 10) {
|
||||||
listview.contentY = -smallSize
|
listview.contentY = -smallHeight
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -249,7 +233,7 @@ Item {
|
||||||
ScriptAction {
|
ScriptAction {
|
||||||
script: {
|
script: {
|
||||||
if (listview.contentY < 10) {
|
if (listview.contentY < 10) {
|
||||||
listview.contentY = -smallSize
|
listview.contentY = -smallHeight
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,16 +30,12 @@ import "../.."
|
||||||
Column {
|
Column {
|
||||||
id: wideAlbumCover
|
id: wideAlbumCover
|
||||||
property ListView listview
|
property ListView listview
|
||||||
property real releaseYear
|
|
||||||
property alias albumArt: albumArt.source
|
property alias albumArt: albumArt.source
|
||||||
property string albumArtist
|
|
||||||
property real duration
|
|
||||||
property int songCount
|
|
||||||
property string name
|
property string name
|
||||||
property alias blurhash : albumArt.blurhash
|
property alias blurhash : albumArt.blurhash
|
||||||
property bool twoColumns: true
|
property bool twoColumns: true
|
||||||
property real aspectRatio
|
property real aspectRatio
|
||||||
property string type
|
property string description
|
||||||
|
|
||||||
Item { width:1; height: Theme.paddingLarge }
|
Item { width:1; height: Theme.paddingLarge }
|
||||||
|
|
||||||
|
@ -54,21 +50,6 @@ Column {
|
||||||
leftMargin: 0
|
leftMargin: 0
|
||||||
rightMargin: 0
|
rightMargin: 0
|
||||||
title: name
|
title: name
|
||||||
description: {
|
description: wideAlbumCover.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))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,12 +33,27 @@ BaseDetailPage {
|
||||||
|
|
||||||
property bool _collectionModelLoaded: false
|
property bool _collectionModelLoaded: false
|
||||||
readonly property bool _twoColumns: albumPageRoot.width / Theme.pixelRatio >= 800
|
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 {
|
J.ItemModel {
|
||||||
id: collectionModel
|
id: collectionModel
|
||||||
loader: J.UserItemsLoader {
|
loader: J.UserItemsLoader {
|
||||||
apiClient: appWindow.apiClient
|
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]
|
fields: [J.ItemFields.ItemCounts, J.ItemFields.PrimaryImageAspectRatio]
|
||||||
parentId: itemData.jellyfinId
|
parentId: itemData.jellyfinId
|
||||||
autoReload: itemData.jellyfinId.length > 0
|
autoReload: itemData.jellyfinId.length > 0
|
||||||
|
@ -70,7 +85,7 @@ BaseDetailPage {
|
||||||
onLoaded: bindAlbum(item)
|
onLoaded: bindAlbum(item)
|
||||||
}
|
}
|
||||||
section {
|
section {
|
||||||
property: itemData.type === "MusicAlbum" ? "parentIndexNumber" : undefined
|
property: itemData.type === "MusicAlbum" ? "parentIndexNumber" : ""
|
||||||
delegate: SectionHeader {
|
delegate: SectionHeader {
|
||||||
text: qsTr("Disc %1").arg(section)
|
text: qsTr("Disc %1").arg(section)
|
||||||
}
|
}
|
||||||
|
@ -91,14 +106,10 @@ BaseDetailPage {
|
||||||
function bindAlbum(item) {
|
function bindAlbum(item) {
|
||||||
item.albumArt = Qt.binding(function(){ return Utils.itemImageUrl(apiClient.baseUrl, itemData, "Primary", {"maxWidth": parent.width})})
|
item.albumArt = Qt.binding(function(){ return Utils.itemImageUrl(apiClient.baseUrl, itemData, "Primary", {"maxWidth": parent.width})})
|
||||||
item.name = Qt.binding(function(){ return itemData.name})
|
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.listview = Qt.binding(function() { return list})
|
||||||
item.aspectRatio = Qt.binding(function() { return itemData.primaryImageAspectRatio})
|
item.aspectRatio = Qt.binding(function() { return itemData.primaryImageAspectRatio})
|
||||||
item.blurhash = Qt.binding(function() { return itemData.imageBlurHashes["Primary"][itemData.imageTags["Primary"]]; })
|
item.blurhash = Qt.binding(function() { return itemData.imageBlurHashes["Primary"][itemData.imageTags["Primary"]]; })
|
||||||
item.twoColumns = Qt.binding(function() { return _twoColumns })
|
item.twoColumns = Qt.binding(function() { return _twoColumns })
|
||||||
item.type = Qt.binding(function() { return itemData.type})
|
item.description = Qt.binding(function() { return _description })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue