From 4a178ee227ef778e74f0b483cc227e6f18f3314c Mon Sep 17 00:00:00 2001 From: Henk Kalkwater Date: Sat, 23 Jul 2022 01:52:26 +0200 Subject: [PATCH] Add better playlist view I reused the AlbumDetailPage for playlists, as both are very similar. If they end up being too different, I might want to look into splitting them up, but for now it will do. --- sailfish/qml/Utils.js | 1 + .../qml/components/music/NarrowAlbumCover.qml | 23 +++++++++++----- .../qml/components/music/WideAlbumCover.qml | 26 ++++++++++++++----- .../qml/pages/itemdetails/MusicAlbumPage.qml | 7 ++--- 4 files changed, 41 insertions(+), 16 deletions(-) diff --git a/sailfish/qml/Utils.js b/sailfish/qml/Utils.js index ded24b0..5be3e26 100644 --- a/sailfish/qml/Utils.js +++ b/sailfish/qml/Utils.js @@ -89,6 +89,7 @@ function getPageUrl(mediaType, itemType, isFolder) { case "episode": return Qt.resolvedUrl("pages/itemdetails/EpisodePage.qml") case "musicalbum": + case "playlist": return Qt.resolvedUrl("pages/itemdetails/MusicAlbumPage.qml") case "photo": return Qt.resolvedUrl("pages/itemdetails/PhotoPage.qml") diff --git a/sailfish/qml/components/music/NarrowAlbumCover.qml b/sailfish/qml/components/music/NarrowAlbumCover.qml index 4b854b2..3b72f51 100644 --- a/sailfish/qml/components/music/NarrowAlbumCover.qml +++ b/sailfish/qml/components/music/NarrowAlbumCover.qml @@ -37,6 +37,7 @@ Item { property alias blurhash : albumArtImage.blurhash property bool twoColumns property real aspectRatio + property string type readonly property real smallSize: albumHeader.height readonly property real bigSize: listHeader.width / aspectRatio @@ -101,12 +102,22 @@ Item { 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: 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")) + 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 { diff --git a/sailfish/qml/components/music/WideAlbumCover.qml b/sailfish/qml/components/music/WideAlbumCover.qml index 54f2036..0ba5611 100644 --- a/sailfish/qml/components/music/WideAlbumCover.qml +++ b/sailfish/qml/components/music/WideAlbumCover.qml @@ -28,6 +28,7 @@ import "../.." */ Column { + id: wideAlbumCover property ListView listview property real releaseYear property alias albumArt: albumArt.source @@ -37,6 +38,8 @@ Column { property string name property alias blurhash : albumArt.blurhash property bool twoColumns: true + property real aspectRatio + property string type Item { width:1; height: Theme.paddingLarge } @@ -51,12 +54,21 @@ Column { leftMargin: 0 rightMargin: 0 title: name - //: Short description of the album: %1 -> album artist, %2 -> amount of songs, %3 -> duration, %4 -> release year - description: 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")) + 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)) + } + } } } diff --git a/sailfish/qml/pages/itemdetails/MusicAlbumPage.qml b/sailfish/qml/pages/itemdetails/MusicAlbumPage.qml index a44bec7..bdf8ea1 100644 --- a/sailfish/qml/pages/itemdetails/MusicAlbumPage.qml +++ b/sailfish/qml/pages/itemdetails/MusicAlbumPage.qml @@ -38,7 +38,7 @@ BaseDetailPage { id: collectionModel loader: J.UserItemsLoader { apiClient: appWindow.apiClient - sortBy: "SortName" + sortBy: itemData.type === "MusicAlbum" ? "ParentIndexNumber,IndexNumber,SortName" : undefined fields: [J.ItemFields.ItemCounts, J.ItemFields.PrimaryImageAspectRatio] parentId: itemData.jellyfinId autoReload: itemData.jellyfinId.length > 0 @@ -70,7 +70,7 @@ BaseDetailPage { onLoaded: bindAlbum(item) } section { - property: "parentIndexNumber" + property: itemData.type === "MusicAlbum" ? "parentIndexNumber" : undefined delegate: SectionHeader { text: qsTr("Disc %1").arg(section) } @@ -80,7 +80,7 @@ BaseDetailPage { name: model.name artists: model.artists duration: model.runTimeTicks - indexNumber: model.indexNumber + indexNumber: itemData.type === "MusicAlbum" ? model.indexNumber : index + 1 onClicked: window.playbackManager.playItemInList(collectionModel, model.index) } @@ -99,5 +99,6 @@ BaseDetailPage { 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}) } }