Add progress bar to audio messages

resources/qml/delegates/AudioMessage.qml

@@ -1,96 +1,138 @@
 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
+			}
+		}
 
-		spacing: 15
+		RowLayout {
+			width: parent.width
 
-		Rectangle {
+			spacing: 15
-			id: button
-			color: colors.light
-			radius: 22
-			height: 44
-			width: 44
-			Image {
-				id: img
-				anchors.centerIn: parent
 
-				source: "qrc:/icons/icons/ui/arrow-pointing-down.png"
+			Rectangle {
-				fillMode: Image.Pad
+				id: button
+				color: colors.light
+				radius: 22
+				height: 44
+				width: 44
+				Image {
+					id: img
+					anchors.centerIn: parent
 
-			}
+					source: "qrc:/icons/icons/ui/arrow-pointing-down.png"
-			MouseArea {
+					fillMode: Image.Pad
-				anchors.fill: parent
+
-				onClicked: {
+				}
-					switch (button.state) {
+				MouseArea {
-						case "": timelineManager.cacheMedia(eventData.url, eventData.mimetype); break;
+					anchors.fill: parent
-						case "stopped":
+					onClicked: {
-							audio.play(); console.log("play");
+						switch (button.state) {
+							case "": timelineManager.cacheMedia(eventData.url, eventData.mimetype); break;
+							case "stopped":
+							media.play(); console.log("play");
 							button.state = "playing"
 							break
-						case "playing":
+							case "playing":
-							audio.pause(); console.log("pause");
+							media.pause(); console.log("pause");
 							button.state = "stopped"
 							break
+						}
 					}
+					cursorShape: Qt.PointingHandCursor
+				}
+				MediaPlayer {
+					id: media
+					onError: console.log(errorString)
+					onStatusChanged: if(status == MediaPlayer.Loaded) progress.updatePositionTexts()
 				}
-				cursorShape: Qt.PointingHandCursor
-			}
-			MediaPlayer {
-				id: audio
-				onError: console.log(errorString)
-			}
 
-			Connections {
+				Connections {
-				target: timelineManager
+					target: timelineManager
-				onMediaCached: {
+					onMediaCached: {
-					if (mxcUrl == eventData.url) {
+						if (mxcUrl == eventData.url) {
-						audio.source = "file://" + cacheUrl
+							media.source = "file://" + cacheUrl
-						button.state = "stopped"
+							button.state = "stopped"
-						console.log("media loaded: " + mxcUrl + " at " + cacheUrl)
+							console.log("media loaded: " + mxcUrl + " at " + cacheUrl)
+						}
+						console.log("media cached: " + mxcUrl + " at " + cacheUrl)
 					}
-					console.log("media cached: " + mxcUrl + " at " + cacheUrl)
 				}
+
+				states: [
+					State {
+						name: "stopped"
+						PropertyChanges { target: img; source: "qrc:/icons/icons/ui/play-sign.png" }
+					},
+					State {
+						name: "playing"
+						PropertyChanges { target: img; source: "qrc:/icons/icons/ui/pause-symbol.png" }
+					}
+				]
 			}
+			ColumnLayout {
+				id: col
 
-			states: [
+				Text {
-				State {
+					Layout.fillWidth: true
-					name: "stopped"
+					text: eventData.body
-					PropertyChanges { target: img; source: "qrc:/icons/icons/ui/play-sign.png" }
+					textFormat: Text.PlainText
-				},
+					elide: Text.ElideRight
-				State {
+					color: colors.text
-					name: "playing"
+				}
-					PropertyChanges { target: img; source: "qrc:/icons/icons/ui/pause-symbol.png" }
+				Text {
+					Layout.fillWidth: true
+					text: eventData.filesize
+					textFormat: Text.PlainText
+					elide: Text.ElideRight
+					color: colors.text
 				}
-			]
-		}
-		ColumnLayout {
-			id: col
-
-			Text {
-				Layout.fillWidth: true
-				text: eventData.body
-				textFormat: Text.PlainText
-				elide: Text.ElideRight
-				color: colors.text
-			}
-			Text {
-				Layout.fillWidth: true
-				text: eventData.filesize
-				textFormat: Text.PlainText
-				elide: Text.ElideRight
-				color: colors.text
 			}
 		}
 	}