Add progress bar to audio messages

resources/qml/delegates/AudioMessage.qml

@@ -1,18 +1,58 @@
 import QtQuick 2.6
 import QtQuick.Layouts 1.6
-import QtMultimedia 5.12
+import QtQuick.Controls 2.5
+import QtMultimedia 5.6
 
 Rectangle {
 	radius: 10
 	color: colors.dark
-	height: row.height + 24
+	height: content.height + 24
 	width: parent.width
 
-	RowLayout {
+	ColumnLayout { 
-		id: row
+		id: content
-
-		anchors.centerIn: parent
 		width: parent.width - 24
+		anchors.centerIn: parent
+
+		RowLayout {
+			Text {
+				id: positionText
+				text: "--:--:--"
+				color: colors.text
+			}
+			Slider {
+				Layout.fillWidth: true
+				id: progress
+				value: media.position
+				from: 0
+				to: media.duration
+
+				onMoved: media.seek(value)
+				//indeterminate: true
+				function updatePositionTexts() {
+					function formatTime(date) {
+						var hh = date.getUTCHours();
+						var mm = date.getUTCMinutes();
+						var ss = date.getSeconds();
+						if (hh < 10) {hh = "0"+hh;}
+						if (mm < 10) {mm = "0"+mm;}
+						if (ss < 10) {ss = "0"+ss;}
+						return hh+":"+mm+":"+ss;
+					}
+					positionText.text = formatTime(new Date(media.position))
+					durationText.text = formatTime(new Date(media.duration))
+				}
+				onValueChanged: updatePositionTexts()
+			}
+			Text {
+				id: durationText
+				text: "--:--:--"
+				color: colors.text
+			}
+		}
+
+		RowLayout {
+			width: parent.width
 
 			spacing: 15
 
@@ -36,11 +76,11 @@ Rectangle {
 						switch (button.state) {
 							case "": timelineManager.cacheMedia(eventData.url, eventData.mimetype); break;
 							case "stopped":
-							audio.play(); console.log("play");
+							media.play(); console.log("play");
 							button.state = "playing"
 							break
 							case "playing":
-							audio.pause(); console.log("pause");
+							media.pause(); console.log("pause");
 							button.state = "stopped"
 							break
 						}
@@ -48,15 +88,16 @@ Rectangle {
 					cursorShape: Qt.PointingHandCursor
 				}
 				MediaPlayer {
-				id: audio
+					id: media
 					onError: console.log(errorString)
+					onStatusChanged: if(status == MediaPlayer.Loaded) progress.updatePositionTexts()
 				}
 
 				Connections {
 					target: timelineManager
 					onMediaCached: {
 						if (mxcUrl == eventData.url) {
-						audio.source = "file://" + cacheUrl
+							media.source = "file://" + cacheUrl
 							button.state = "stopped"
 							console.log("media loaded: " + mxcUrl + " at " + cacheUrl)
 						}
@@ -94,5 +135,6 @@ Rectangle {
 				}
 			}
 		}
+	}
 }