Further improve ImageDelegate and show audio duration on supported

homeservers.

imports/Spectral/Component/Timeline/AudioDelegate.qml

@@ -68,10 +68,45 @@ RowLayout {
             source: currentRoom.urlToMxcUrl(content.url)
         }
 
-        contentItem: Label {
+        contentItem: RowLayout {
-            text: content.info.duration || audio.duration || "Unknown audio"
+            ToolButton {
+                contentItem: MaterialIcon {
+                    icon: audio.playbackState == Audio.PlayingState ? "\ue034" : "\ue405"
+                }
 
-            color: !sentByMe ? "white" : MPalette.foreground
+                onClicked: {
+                    if (audio.playbackState == Audio.PlayingState) {
+                        audio.stop()
+                    } else {
+                        audio.play()
+                    }
+                }
+            }
+
+            ColumnLayout {
+                Label {
+                    Layout.fillWidth: true
+
+                    text: display
+                    color: MPalette.foreground
+                    wrapMode: Label.Wrap
+                    font.pixelSize: 18
+                    font.weight: Font.Medium
+                    font.capitalization: Font.AllUppercase
+                }
+
+                Label {
+                    readonly property int duration: content.info.duration || audio.duration || 0
+
+                    Layout.fillWidth: true
+
+                    visible: duration
+
+                    text: humanSize(duration)
+                    color: MPalette.lighter
+                    wrapMode: Label.Wrap
+                }
+            }
         }
 
         background: AutoRectangle {
@@ -79,7 +114,7 @@ RowLayout {
 
             id: bubbleBackground
 
-            color: sentByMe ? MPalette.background : author.color
+            color: MPalette.background
             radius: 18
 
             topLeftVisible: !sentByMe && (bubbleShape == 3 || bubbleShape == 2)
@@ -97,12 +132,40 @@ RowLayout {
 
                 id: messageMouseArea
 
-                onPrimaryClicked: {
+                onSecondaryClicked: {
-                    if (audio.playbackState === Audio.PlayingState) {
+                    var contextMenu = fileDelegateContextMenu.createObject(ApplicationWindow.overlay)
-                        audio.stop()
+                    contextMenu.viewSource.connect(function() {
-                    } else {
+                        messageSourceDialog.createObject(ApplicationWindow.overlay, {"sourceText": toolTip}).open()
-                        audio.play()
+                    })
-                    }
+                    contextMenu.downloadAndOpen.connect(downloadAndOpen)
+                    contextMenu.saveFileAs.connect(saveFileAs)
+                    contextMenu.reply.connect(function() {
+                        roomPanelInput.replyModel = Object.assign({}, model)
+                        roomPanelInput.isReply = true
+                        roomPanelInput.focus()
+                    })
+                    contextMenu.redact.connect(function() {
+                        currentRoom.redactEvent(eventId)
+                    })
+                    contextMenu.popup()
+                }
+
+                Component {
+                    id: messageSourceDialog
+
+                    MessageSourceDialog {}
+                }
+
+                Component {
+                    id: openFolderDialog
+
+                    OpenFolderDialog {}
+                }
+
+                Component {
+                    id: fileDelegateContextMenu
+
+                    FileDelegateContextMenu {}
                 }
             }
         }
@@ -135,4 +198,19 @@ RowLayout {
         if (Qt.openUrlExternally(progressInfo.localPath)) return;
         if (Qt.openUrlExternally(progressInfo.localDir)) return;
     }
+
+    function humanSize(duration)
+    {
+        if (!duration)
+            return qsTr("Unknown", "Unknown duration")
+        if (duration < 1000)
+            return qsTr("An instant")
+        duration = Math.round(duration / 100) / 10
+        if (duration < 60)
+            return qsTr("%1 sec.").arg(duration)
+        duration = Math.round(duration / 6) / 10
+        if (duration < 60)
+            return qsTr("%1 min.").arg(duration)
+        return qsTr("%1 hrs.").arg(Math.round(duration / 6) / 10)
+    }
 }

imports/Spectral/Component/Timeline/DownloadableContent.qml

@@ -1,38 +0,0 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.12
-import QtQuick.Controls.Material 2.12
-import Qt.labs.platform 1.0
-
-Item {
-    property bool openOnFinished: false
-    readonly property bool downloaded: progressInfo && progressInfo.completed
-
-    Rectangle {
-        z: -2
-        height: parent.height
-        width: progressInfo.active && !progressInfo.completed ? progressInfo.progress / progressInfo.total * parent.width : 0
-
-        color: Material.accent
-        opacity: 0.4
-    }
-
-    onDownloadedChanged: if (downloaded && openOnFinished) openSavedFile()
-
-    function saveFileAs() { currentRoom.saveFileAs(eventId) }
-
-    function downloadAndOpen()
-    {
-        if (downloaded) openSavedFile()
-        else
-        {
-            openOnFinished = true
-            currentRoom.downloadFile(eventId, StandardPaths.writableLocation(StandardPaths.CacheLocation) + "/" + eventId.replace(":", "_") + (message || ".tmp"))
-        }
-    }
-
-    function openSavedFile()
-    {
-        if (Qt.openUrlExternally(progressInfo.localPath)) return;
-        if (Qt.openUrlExternally(progressInfo.localDir)) return;
-    }
-}

imports/Spectral/Component/Timeline/FileDelegate.qml

@@ -80,6 +80,7 @@ RowLayout {
                     Layout.fillWidth: true
 
                     text: display
+                    color: MPalette.foreground
                     wrapMode: Label.Wrap
                     font.pixelSize: 18
                     font.weight: Font.Medium

imports/Spectral/Component/Timeline/ImageDelegate.qml

@@ -35,7 +35,7 @@ RowLayout {
         }
     }
 
-    Avatar {
+    Avatar {        
         Layout.preferredWidth: 36
         Layout.preferredHeight: 36
         Layout.alignment: Qt.AlignBottom
@@ -67,28 +67,24 @@ RowLayout {
         visible: !(sentByMe || avatarVisible)
     }
 
-    BusyIndicator {
-        Layout.preferredWidth: 64
-        Layout.preferredHeight: 64
-
-        visible: img.status == Image.Loading
-    }
-
     Image {
-        property int maxWidth: messageListView.width - (!sentByMe ? 36 + root.spacing : 0) - 48
+        readonly property bool isThumbnail: !(content.info.thumbnail_info == null || content.thumbnailMediaId == null)
+        readonly property var info: isThumbnail ? content.info.thumbnail_info : content.info
+        readonly property string mediaId: isThumbnail ? content.thumbnailMediaId : content.mediaId
+        readonly 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.preferredWidth: info.w > maxWidth ? maxWidth : info.w
-        Layout.preferredHeight: content.info.w > maxWidth ? (content.info.h / content.info.w * maxWidth) : content.info.h
+        Layout.preferredHeight: info.w > maxWidth ? (info.h / info.w * maxWidth) : info.h
 
         id: img
 
-        source: "image://mxc/" + content.mediaId
+        source: "image://mxc/" + mediaId
 
-        sourceSize.width: 720
+        sourceSize.width: info.w
-        sourceSize.height: 720
+        sourceSize.height: info.h
 
         fillMode: Image.PreserveAspectCrop
 

imports/Spectral/Component/Timeline/VideoDelegate.qml

@@ -73,7 +73,7 @@ RowLayout {
     }
 
     Video {
-        property int maxWidth: messageListView.width - (!sentByMe ? 36 + root.spacing : 0) - 48
+        readonly property int maxWidth: messageListView.width - (!sentByMe ? 36 + root.spacing : 0) - 48
 
         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
@@ -99,19 +99,19 @@ RowLayout {
         }
 
         Image {
+            readonly property bool isThumbnail: !(content.info.thumbnail_info == null || content.thumbnailMediaId == null)
+            readonly property var info: isThumbnail ? content.info.thumbnail_info : content.info
+
             anchors.fill: parent
 
-            visible: content.info && content.info.thumbnail_info && vid.playbackState != MediaPlayer.PlayingState
+            visible: isThumbnail && vid.playbackState != MediaPlayer.PlayingState
 
-            source: "image://mxc/" + (content.info && content.info.thumbnail_info ?
+            source: "image://mxc/" + (isThumbnail ? content.thumbnailMediaId : "")
-                                          content.thumbnailMediaId : "")
 
-            sourceSize.width: 720
+            sourceSize.width: info.w
-            sourceSize.height: 720
+            sourceSize.height: info.h
 
             fillMode: Image.PreserveAspectCrop
-
-            Component.onCompleted: console.log(source)
         }
 
         Label {

res.qrc

@@ -4,7 +4,6 @@
         <file>qml/main.qml</file>
         <file>imports/Spectral/Component/Emoji/EmojiPicker.qml</file>
         <file>imports/Spectral/Component/Emoji/qmldir</file>
-        <file>imports/Spectral/Component/Timeline/DownloadableContent.qml</file>
         <file>imports/Spectral/Component/Timeline/MessageDelegate.qml</file>
         <file>imports/Spectral/Component/Timeline/qmldir</file>
         <file>imports/Spectral/Component/Timeline/StateDelegate.qml</file>