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

@@ -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")

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")
+        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 {

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
+        description: {
+            if (wideAlbumCover.type == "MusicAlbum") {
                 //: 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")
+                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))
+            }
+        }
     }
 }

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