chris/harbour-sailfin
chris/harbour-sailfin
1
0
Fork 0
mirror of https://github.com/HenkKalkwater/harbour-sailfin.git synced 2025-09-05 10:12:46 +00:00
Code Issues Releases Wiki Activity

Added MusicAlbumPage

Browse source 
- [UI]: Added specialized view for music albums

- Prepared RemoteImageView for fading in image when loaded
This commit is contained in:
Chris Josten 2020-10-26 22:29:07 +01:00
parent a29ab3dff4
commit 040aeb1a40
10 changed files with 330 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,230 @@
import QtQuick 2.0
import QtQuick 2.6
import Sailfish.Silica 1.0
Item {
import nl.netsoj.chris.Jellyfin 1.0
import "../../components"
import "../.."
BaseDetailPage {
readonly property int _songIndexWidth: 100
property string _albumArtistText: itemData.albumArtist
UserItemModel {
id: collectionModel
apiClient: ApiClient
sortBy: ["SortName"]
fields: ["ItemCounts","PrimaryImageAspectRatio","BasicSyncInfo","CanDelete","MediaSourceCount"]
parentId: itemData.jellyfinId
onParentIdChanged: reload()
}
SilicaListView {
id: list
anchors.fill: parent
model: collectionModel
header: Item {
property string stateIfArt: "largeArt"
property alias albumArt: albumArt
id: listHeader
width: parent.width
//spacing: Theme.paddingLarge
state: albumArt.source != "" ? stateIfArt : "noArt"
MouseArea {
anchors.fill: parent
onClicked: {
if (listHeader.stateIfArt == "largeArt") {
listHeader.stateIfArt = "details"
} else {
listHeader.stateIfArt = "largeArt"
}
}
}
RemoteImage {
id: albumArt
anchors {
top: parent.top
right: parent.right
}
source: Utils.itemImageUrl(ApiClient.baseUrl, itemData, "Primary", {"maxWidth": parent.width})
sourceSize.width: listHeader.width
sourceSize.height: listHeader.width
fillMode: Image.PreserveAspectFit
opacity: 1
clip: true
}
PageHeader {
id: albumHeader
width: parent.width - Theme.horizontalPageMargin - height
title: itemData.name
description: qsTr("%1\n%2 songs | %3 | %4")
.arg(_albumArtistText)
.arg(itemData.childCount)
.arg(Utils.ticksToText(itemData.runTimeTicks))
.arg(itemData.productionYear > 0 ? itemData.productionYear : qsTr("Unknown year"))
}
states: [
State {
name: "largeArt"
PropertyChanges {
target: albumArt
width: parent.width
height: width
}
PropertyChanges {
target: listHeader
height: width
}
PropertyChanges {
target: albumHeader
opacity: 0
}
PropertyChanges {
target: list
contentY: -list.width
}
AnchorChanges {
target: albumHeader
anchors.left: undefined
anchors.right: albumArt.left
}
},
State {
name: "details"
PropertyChanges {
target: albumArt
width: height
height: albumHeader.height
}
PropertyChanges {
target: listHeader
height: albumHeader.height
}
PropertyChanges {
target: albumHeader
opacity: 1
}
PropertyChanges {
target: list
contentY: -albumHeader.height
}
AnchorChanges {
target: albumHeader
anchors.left: undefined
anchors.right: albumArt.left
}
},
State {
name: "noArt"
extend: "details"
PropertyChanges {
target: albumArt
opacity: 0
}
PropertyChanges {
target: albumHeader
width: parent.width - Theme.horizontalPageMargin * 2
}
AnchorChanges {
target: albumHeader
anchors.left: parent.left
anchors.right: parent.right
}
}
]
transitions: Transition {
OpacityAnimator { target: albumHeader}
OpacityAnimator { target: albumArt}
NumberAnimation {
properties: "width,height,contentY"
//velocity: 1600
duration: 300
easing.type: Easing.OutQuad
}
AnchorAnimation {}
}
}
section {
property: "parentIndexNumber"
delegate: SectionHeader {
text: qsTr("Disc %1").arg(section)
}
}
delegate: ListItem {
contentHeight: songName.height + songArtists.height + 2 * Theme.paddingMedium
width: parent.width
Label {
id: songIndex
anchors {
top: parent.top
topMargin: Theme.paddingMedium
left: parent.left
leftMargin: Theme.horizontalPageMargin
}
text: model.indexNumber
horizontalAlignment: Text.AlignRight
font.pixelSize: Theme.fontSizeExtraLarge
width: _songIndexWidth
}
Label {
id: songName
anchors {
left: songIndex.right
leftMargin: Theme.paddingLarge
top: parent.top
topMargin: Theme.paddingMedium
right: duration.left
rightMargin: Theme.paddingLarge
}
text: model.name
font.pixelSize: Theme.fontSizeMedium
truncationMode: TruncationMode.Fade
}
Label {
id: songArtists
anchors {
top: songName.bottom
left: songIndex.right
leftMargin: Theme.paddingLarge
right: parent.right
rightMargin: Theme.horizontalPageMargin
}
text: model.artists.join(", ")
font.pixelSize: Theme.fontSizeSmall
truncationMode: TruncationMode.Fade
color: highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
}
Label {
id: duration
anchors {
right: parent.right
rightMargin: Theme.horizontalPageMargin
baseline: songName.baseline
}
width: contentWidth
text: Utils.ticksToText(model.runTimeTicks)
font.pixelSize: Theme.fontSizeSmall
color: highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
}
}
VerticalScrollDecorator {}
}
Connections {
target: itemData
onAlbumArtistsChanged: {
console.log(itemData.albumArtists)
_albumArtistText = ""
for (var i = 0; i < itemData.albumArtists.length; i++) {
_albumArtistText += itemData.albumArtists[i]["name"]
}
}
}
}