Add simple audio message widget

3 files changed, 118 insertions, 19 deletions

diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml
index c4750ddf..c25e6543 100644
--- a/resources/qml/TimelineView.qml
+++ b/resources/qml/TimelineView.qml
@@ -113,6 +113,7 @@ Rectangle {
 					case MtxEvent.ImageMessage: return "delegates/ImageMessage.qml"
 					case MtxEvent.FileMessage: return "delegates/FileMessage.qml"
 					//case MtxEvent.VideoMessage: return "delegates/VideoMessage.qml"
+					case MtxEvent.AudioMessage: return "delegates/AudioMessage.qml"
 					case MtxEvent.Redacted: return "delegates/Redacted.qml"
 					default: return "delegates/placeholder.qml"
 				}
diff --git a/resources/qml/delegates/AudioMessage.qml b/resources/qml/delegates/AudioMessage.qml
new file mode 100644
index 00000000..f36d22b9
--- /dev/null
+++ b/resources/qml/delegates/AudioMessage.qml
@@ -0,0 +1,98 @@
+import QtQuick 2.6
+import QtQuick.Layouts 1.6
+import QtMultimedia 5.12
+
+Rectangle {
+	radius: 10
+	color: colors.dark
+	height: row.height + 24
+	width: parent.width
+
+	RowLayout {
+		id: row
+
+		anchors.centerIn: parent
+		width: parent.width - 24
+
+		spacing: 15
+
+		Rectangle {
+			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"
+				fillMode: Image.Pad
+
+			}
+			MouseArea {
+				anchors.fill: parent
+				onClicked: {
+					switch (button.state) {
+						case "": timelineManager.cacheMedia(eventData.url, eventData.mimetype); break;
+						case "stopped":
+							audio.play(); console.log("play");
+							button.state = "playing"
+							break
+						case "playing":
+							audio.pause(); console.log("pause");
+							button.state = "stopped"
+							break
+					}
+				}
+				cursorShape: Qt.PointingHandCursor
+			}
+			MediaPlayer {
+				id: audio
+				onError: console.log(errorString)
+			}
+
+			Connections {
+				target: timelineManager
+				onMediaCached: {
+					if (mxcUrl == eventData.url) {
+						audio.source = "file://" + cacheUrl
+						button.state = "stopped"
+						console.log("media loaded: " + 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
+
+			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
+			}
+		}
+	}
+}
+
diff --git a/resources/qml/delegates/FileMessage.qml b/resources/qml/delegates/FileMessage.qml
index 3099acaa..27cd6403 100644
--- a/resources/qml/delegates/FileMessage.qml
+++ b/resources/qml/delegates/FileMessage.qml
@@ -1,19 +1,22 @@
 import QtQuick 2.6
+import QtQuick.Layouts 1.6
 
-Row {
 Rectangle {
 	radius: 10
 	color: colors.dark
-	height: row.height
-	width: row.width
+	height: row.height + 24
+	width: parent.width
 
-	Row {
+	RowLayout {
 		id: row
 
+		anchors.centerIn: parent
+		width: parent.width - 24
+
 		spacing: 15
-		padding: 12
 
 		Rectangle {
+			id: button
 			color: colors.light
 			radius: 22
 			height: 44
@@ -32,26 +35,23 @@ Rectangle {
 				cursorShape: Qt.PointingHandCursor
 			}
 		}
-		Column {
-			TextEdit {
+		ColumnLayout {
+			id: col
+
+			Text {
+				Layout.fillWidth: true
 				text: eventData.body
-				textFormat: TextEdit.PlainText
-				readOnly: true
-				wrapMode: Text.Wrap
-				selectByMouse: true
+				textFormat: Text.PlainText
+				elide: Text.ElideRight
 				color: colors.text
 			}
-			TextEdit {
+			Text {
+				Layout.fillWidth: true
 				text: eventData.filesize
-				textFormat: TextEdit.PlainText
-				readOnly: true
-				wrapMode: Text.Wrap
-				selectByMouse: true
+				textFormat: Text.PlainText
+				elide: Text.ElideRight
 				color: colors.text
 			}
 		}
 	}
 }
-Rectangle {
-}
-}