Add AudioDelegate.

Fix ImageDelegate in timeline.
Improve VideoDelegate.

imports/Spectral/Component/Timeline/AudioDelegate.qml

@@ -0,0 +1,138 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls.Material 2.12
+import QtGraphicalEffects 1.0
+import Qt.labs.platform 1.0 as Platform
+import QtMultimedia 5.12
+
+import Spectral 0.1
+import Spectral.Setting 0.1
+
+import Spectral.Component 2.0
+import Spectral.Dialog 2.0
+import Spectral.Menu.Timeline 2.0
+import Spectral.Font 0.1
+import Spectral.Effect 2.0
+
+RowLayout {
+    readonly property bool avatarVisible: !sentByMe && showAuthor
+    readonly property bool sentByMe: author === currentRoom.localUser
+
+    id: root
+
+    spacing: 4
+
+    z: -5
+
+    Avatar {
+        Layout.preferredWidth: 36
+        Layout.preferredHeight: 36
+        Layout.alignment: Qt.AlignBottom
+
+        visible: avatarVisible
+        hint: author.displayName
+        source: author.avatarMediaId
+        color: author.color
+
+        Component {
+            id: userDetailDialog
+
+            UserDetailDialog {}
+        }
+
+        RippleEffect {
+            anchors.fill: parent
+
+            circular: true
+
+            onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": author}).open()
+        }
+    }
+
+    Item {
+        Layout.preferredWidth: 36
+        Layout.preferredHeight: 36
+
+        visible: !(sentByMe || avatarVisible)
+    }
+
+    Control {
+        Layout.maximumWidth: messageListView.width - (!sentByMe ? 36 + root.spacing : 0) - 48
+
+        padding: 12
+
+        Audio {
+            id: audio
+
+            source: currentRoom.urlToMxcUrl(content.url)
+        }
+
+        contentItem: Label {
+            text: content.info.duration || audio.duration || "Unknown audio"
+
+            color: !sentByMe ? "white" : MPalette.foreground
+        }
+
+        background: AutoRectangle {
+            readonly property int minorRadius: 8
+
+            id: bubbleBackground
+
+            color: sentByMe ? MPalette.background : author.color
+            radius: 18
+
+            topLeftVisible: !sentByMe && (bubbleShape == 3 || bubbleShape == 2)
+            topRightVisible: sentByMe && (bubbleShape == 3 || bubbleShape == 2)
+            bottomLeftVisible: !sentByMe && (bubbleShape == 1 || bubbleShape == 2)
+            bottomRightVisible: sentByMe && (bubbleShape == 1 || bubbleShape == 2)
+
+            topLeftRadius: minorRadius
+            topRightRadius: minorRadius
+            bottomLeftRadius: minorRadius
+            bottomRightRadius: minorRadius
+
+            AutoMouseArea {
+                anchors.fill: parent
+
+                id: messageMouseArea
+
+                onPrimaryClicked: {
+                    if (audio.playbackState === Audio.PlayingState) {
+                        audio.stop()
+                    } else {
+                        audio.play()
+                    }
+                }
+            }
+        }
+    }
+
+    function saveFileAs() {
+        var folderDialog = openFolderDialog.createObject(ApplicationWindow.overlay)
+
+        folderDialog.chosen.connect(function(path) {
+            if (!path) return
+
+            currentRoom.downloadFile(eventId, path + "/" + currentRoom.fileNameToDownload(eventId))
+        })
+
+        folderDialog.open()
+    }
+
+    function downloadAndOpen()
+    {
+        if (downloaded) openSavedFile()
+        else
+        {
+            openOnFinished = true
+            currentRoom.downloadFile(eventId, Platform.StandardPaths.writableLocation(Platform.StandardPaths.CacheLocation) + "/" + eventId.replace(":", "_").replace("/", "_").replace("+", "_") + currentRoom.fileNameToDownload(eventId))
+        }
+    }
+
+    function openSavedFile()
+    {
+        if (Qt.openUrlExternally(progressInfo.localPath)) return;
+        if (Qt.openUrlExternally(progressInfo.localDir)) return;
+    }
+}

imports/Spectral/Component/Timeline/FileDelegate.qml

@@ -54,7 +54,7 @@ RowLayout {
         }
     }
 
-    Label {
+    Item {
         Layout.preferredWidth: 36
         Layout.preferredHeight: 36
 

imports/Spectral/Component/Timeline/ImageDelegate.qml

@@ -60,7 +60,7 @@ RowLayout {
         }
     }
 
-    Label {
+    Item {
         Layout.preferredWidth: 36
         Layout.preferredHeight: 36
 
@@ -75,15 +75,17 @@ RowLayout {
     }
 
     Image {
-        Layout.maximumWidth: messageListView.width - (!sentByMe ? 36 + root.spacing : 0) - 48
+        property int maxWidth: messageListView.width - (!sentByMe ? 36 + root.spacing : 0) - 48
+
         Layout.minimumWidth: 256
         Layout.minimumHeight: 64
 
+        Layout.preferredWidth: content.info.w > maxWidth ? maxWidth : content.info.w
+        Layout.preferredHeight: content.info.w > maxWidth ? (content.info.h / content.info.w * maxWidth) : content.info.h
+
         id: img
 
-        source: "image://mxc/" +
+        source: "image://mxc/" + content.mediaId
-                (content.info && content.info.thumbnail_info ?
-                     content.thumbnailMediaId : content.mediaId)
 
         sourceSize.width: 720
         sourceSize.height: 720

imports/Spectral/Component/Timeline/VideoDelegate.qml

@@ -65,7 +65,7 @@ RowLayout {
         }
     }
 
-    Label {
+    Item {
         Layout.preferredWidth: 36
         Layout.preferredHeight: 36
 
@@ -73,18 +73,22 @@ RowLayout {
     }
 
     Video {
-        Layout.fillWidth: true
+        property int maxWidth: messageListView.width - (!sentByMe ? 36 + root.spacing : 0) - 48
-        Layout.preferredHeight: width
+
+        Layout.preferredWidth: content.info.w > maxWidth ? maxWidth : content.info.w
+        Layout.preferredHeight: content.info.w > maxWidth ? (content.info.h / content.info.w * maxWidth) : content.info.h
 
         id: vid
 
-        source: progressInfo.localPath
+        source: progressInfo.completed ? progressInfo.localPath : ""
 
         loops: MediaPlayer.Infinite
         autoPlay: true
 
         fillMode: VideoOutput.PreserveAspectFit
 
+        onErrorChanged: console.log("Video playback error: " + errorString)
+
         layer.enabled: true
         layer.effect: OpacityMask {
             maskSource: Rectangle {
@@ -94,6 +98,22 @@ RowLayout {
             }
         }
 
+        Image {
+            anchors.fill: parent
+
+            visible: content.info && content.info.thumbnail_info && vid.playbackState != MediaPlayer.PlayingState
+
+            source: "image://mxc/" + (content.info && content.info.thumbnail_info ?
+                                          content.thumbnailMediaId : "")
+
+            sourceSize.width: 720
+            sourceSize.height: 720
+
+            fillMode: Image.PreserveAspectCrop
+
+            Component.onCompleted: console.log(source)
+        }
+
         Label {
             anchors.centerIn: parent
 

imports/Spectral/Component/Timeline/qmldir

@@ -6,3 +6,4 @@ ImageDelegate 2.0 ImageDelegate.qml
 FileDelegate 2.0 FileDelegate.qml
 VideoDelegate 2.0 VideoDelegate.qml
 ReactionDelegate 2.0 ReactionDelegate.qml
+AudioDelegate 2.0 AudioDelegate.qml

imports/Spectral/Panel/RoomPanel.qml

@@ -392,6 +392,33 @@ Item {
                         }
                     }
 
+                    DelegateChoice {
+                        roleValue: "audio"
+                        delegate: ColumnLayout {
+                            width: messageListView.width
+
+                            SectionDelegate {
+                                Layout.alignment: Qt.AlignHCenter
+                                Layout.maximumWidth: parent.width
+
+                                visible: showSection
+                            }
+
+                            AudioDelegate {
+                                Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
+                            }
+
+                            Rectangle {
+                                Layout.fillWidth: true
+                                Layout.preferredHeight: 2
+
+                                visible: readMarker
+
+                                color: MPalette.primary
+                            }
+                        }
+                    }
+
                     DelegateChoice {
                         roleValue: "video"
                         delegate: ColumnLayout {

res.qrc

@@ -58,5 +58,6 @@
         <file>imports/Spectral/Component/Timeline/VideoDelegate.qml</file>
         <file>imports/Spectral/Component/AutoRectangle.qml</file>
         <file>imports/Spectral/Component/Timeline/ReactionDelegate.qml</file>
+        <file>imports/Spectral/Component/Timeline/AudioDelegate.qml</file>
     </qresource>
 </RCC>