chris/harbour-sailfin
chris/harbour-sailfin
1
0
Fork 0
mirror of https://github.com/HenkKalkwater/harbour-sailfin.git synced 2024-05-05 14:02:43 +00:00
Code Issues Releases Wiki Activity

Better narrow cover

Browse source
This commit is contained in:
Chris Josten 2021-01-17 21:11:55 +01:00
parent 5bdc8ee83d
commit 3389a11508
4 changed files with 143 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
sailfish/qml/components/RemoteImage.qml
View file

@ -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;

186
sailfish/qml/components/music/NarrowAlbumCover.qml
View file

@ -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
property string stateIfArt: "largeArt"
property alias _albumArt: albumArt
readonly property real smallSize: albumHeader.height
readonly property real bigSize: listHeader.width
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") {
listHeader.stateIfArt = "details"
if (listview.contentY < -bigSize + 10) {
listviewShrinkAnimation.start()
} else {
listHeader.stateIfArt = "largeArt"
listviewGrowAnimation.start()
}
}
}
RemoteImage {
id: albumArt
anchors {
top: parent.top
right: parent.right
}
sourceSize.width: listHeader.width
sourceSize.height: listHeader.width
fillMode: Image.PreserveAspectFit
opacity: 1
clip: true
NumberAnimation {
id: listviewShrinkAnimation
target: listview
property: "contentY"
easing.type: Easing.OutCubic
to: -smallSize
}
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"
PropertyChanges {
target: _albumArt
width: parent.width
height: width
}
PropertyChanges {
target: listHeader
height: width
}
PropertyChanges {
target: albumHeader
opacity: 0
}
name: "art"
when: albumArtImage.status != Image.Null && !twoColumns
PropertyChanges {
target: listview
contentY: -listview.width
}
AnchorChanges {
target: albumHeader
anchors.left: undefined
anchors.right: _albumArt.left
}
},
State {
name: "details"
PropertyChanges {
target: _albumArt
width: height
height: albumHeader.height
//contentY: -smallSize
topMargin: Screen.width - smallSize
bottomMargin: listview.contentHeight < listview.height ? listview.height - listview.contentHeight : 0
}
PropertyChanges {
target: listHeader
height: albumHeader.height
}
PropertyChanges {
target: albumHeader
target: albumArtImage
opacity: 1
width: height
height: smallSize + -(Math.min(listview.contentY + smallSize, 0) / (listview.topMargin)) * (bigSize - smallSize)
}
PropertyChanges {
target: listview
contentY: -albumHeader.height
target: listHeader
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}

1
sailfish/qml/components/music/WideAlbumCover.qml
View file

@ -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 }

13
sailfish/qml/pages/itemdetails/MusicAlbumPage.qml
View file

@ -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: albumPageRoot.width / Theme.pixelRatio < 800
? "../../components/music/NarrowAlbumCover.qml" : ""
source: "../../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 })
}
}