Implement playlist model and UI

sailfish/qml/components/PlayQueue.qml

@@ -1,16 +1,34 @@
 import QtQuick 2.6
 import Sailfish.Silica 1.0
 
-import nl.netsoj.chris.Jellyfin 1.0
+import nl.netsoj.chris.Jellyfin 1.0 as J
 
 import "music"
 
 SilicaListView {
-    header: SectionHeader { text: qsTr("Play queue") }
+    //header: PageHeader { title: qsTr("Play queue") }
+    section.property: "section"
+    section.delegate: SectionHeader {
+        text: {
+            switch(section) {
+            case J.NowPlayingSection.Queue:
+                //: Now playing page queue section header
+                return qsTr("Queue")
+            case J.NowPlayingSection.NowPlaying:
+                //: Now playing page playlist section header
+                return qsTr("Playlist")
+            default:
+                return qsTr("Unknown section")
+            }
+        }
+    }
     delegate: SongDelegate {
         artists: model.artists
         name: model.name
         width: parent.width
-        indexNumber: ListView.index
+        indexNumber: index + 1
+        duration: model.runTimeTicks
+        playing: model.playing
     }
+    clip: true
 }

sailfish/qml/components/music/SongDelegate.qml

@@ -27,6 +27,7 @@ ListItem {
     property real duration
     property string name
     property int indexNumber
+    property bool playing
 
     contentHeight: songName.height + songArtists.height + 2 * Theme.paddingMedium
     width: parent.width
@@ -49,6 +50,7 @@ ListItem {
         horizontalAlignment: Text.AlignRight
         font.pixelSize: Theme.fontSizeExtraLarge
         width: indexMetrics.width
+        highlighted: playing
     }
 
     Label {
@@ -64,6 +66,7 @@ ListItem {
         text: name
         font.pixelSize: Theme.fontSizeMedium
         truncationMode: TruncationMode.Fade
+        highlighted: down || playing
     }
     Label {
         id: songArtists
@@ -78,6 +81,7 @@ ListItem {
         font.pixelSize: Theme.fontSizeSmall
         truncationMode: TruncationMode.Fade
         color: highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
+        highlighted: down || playing
     }
 
     Label {
@@ -91,5 +95,6 @@ ListItem {
         text: Utils.ticksToText(songDelegateRoot.duration)
         font.pixelSize: Theme.fontSizeSmall
         color: highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
+        highlighted: down || playing
     }
 }

sailfish/qml/harbour-sailfin.qml

@@ -50,7 +50,7 @@ ApplicationWindow {
     ApiClient {
         id: _apiClient
         objectName: "Test"
-        supportedCommands: [J.GeneralCommandType.Play, J.GeneralCommandType.DisplayContent, J.GeneralCommandType.DisplayMessage]
+        supportedCommands: [GeneralCommandType.Play, GeneralCommandType.DisplayContent, GeneralCommandType.DisplayMessage]
     }
 
     initialPage: Component {