Add a progress slider to mpris remote in app

Summary:
The progress slider can be mooved to seek through the song and
will display song length and current position on sides.

Reviewers: #kde_connect, nicolasfella

Reviewed By: #kde_connect, nicolasfella

Subscribers: nicolasfella, kdeconnect

Tags: #kde_connect

Differential Revision: https://phabricator.kde.org/D17417

app/qml/mpris.qml

@@ -28,10 +28,17 @@ Kirigami.Page
     id: root
     property QtObject pluginInterface
     property bool muted: false
+    property bool updatePositionSlider: true
     property int volumeUnmuted
     property var volume: pluginInterface.volume
+    property var lastPosition: pluginInterface.position
+    property date lastPositionTime: new Date()
     title: i18n("Multimedia Controls")
 
+    onLastPositionChanged: {
+        lastPositionTime = new Date();
+    }
+
     onVolumeChanged: {
         if (muted && volume != 0) {
             toggleMute()
@@ -52,12 +59,30 @@ Kirigami.Page
         }
     }
 
-    function toggleMute() {
+    function toggleMute()
+    {
         muted = !muted
         root.pluginInterface.volume = muted ? 0 : volumeUnmuted
         muteButton.icon.name = muted ? "audio-volume-muted" : soundState(root.pluginInterface.volume)
     }
 
+    function msToTime(currentTime, totalTime)
+    {
+        if (totalTime.getHours() == 2) {
+            // Skip a day ahead as Date type's minimum is 1am on the 1st of January and can't go lower
+            currentTime.setDate(2)
+            currentTime.setHours(currentTime.getHours() - 1)
+            return currentTime.toLocaleTimeString(Qt.locale(),"hh:mm:ss")
+        } else {
+            return currentTime.toLocaleTimeString(Qt.locale(),"mm:ss")
+        }
+    }
+
+    Connections {
+        target: root.pluginInterface
+        onNowPlayingChanged: positionSlider.value = lastPosition
+    }
+
     Label {
         id: noPlayersText
         text: i18n("No players available")
@@ -130,6 +155,36 @@ Kirigami.Page
                 onClicked: root.pluginInterface.sendAction("Next")
             }
         }
+        RowLayout {
+            Layout.fillWidth: true
+            Label {
+                text: msToTime(new Date(positionSlider.value), new Date(root.pluginInterface.length))
+            }
+            Slider {
+                id: positionSlider
+                to: root.pluginInterface.length
+                Layout.fillWidth: true
+                Timer {
+                    id: positionUpdateTimer
+                    interval: 1000
+                    repeat: true
+                    running: updatePositionSlider && root.pluginInterface.isPlaying
+
+                    onTriggered: positionSlider.value = lastPosition + (new Date().getTime() - lastPositionTime.getTime())
+                }
+                onPressedChanged: {
+                    if (pressed) {
+                        updatePositionSlider = false
+                    } else {
+                        updatePositionSlider = true
+                        root.pluginInterface.position = value
+                    }
+                }
+            }
+            Label {
+                text: msToTime(new Date(root.pluginInterface.length), new Date(root.pluginInterface.length))
+            }
+        }
         RowLayout {
             Layout.fillWidth: true
             Button {