From 21f1c4ce52221da713eb5a7a8e4e972b605b01d1 Mon Sep 17 00:00:00 2001
From: Pascal Precht <445106+PascalPrecht@users.noreply.github.com>
Date: Thu, 8 Sep 2022 15:35:32 +0200
Subject: [PATCH] feat(StatusMessage): add support for `messageAttachments`

Prior to this commit, a `StatusMessage` can hold only a single
`messageImage`.

There will be scenarios where messages can have multiple attachments.
This is the case when importing messages from discord.
Hence, this commit introduces a new `messageAttachments` property which
is a whitespace separated list of attachment URLs (very analogous to the
already existing `linkUrls` property).

For now, we can safely assume these URLs will resolve to image content.
In future versions however, we might want to support additional content
types to handle any byte stream.
We will then change `messageAttachments` from `string` to a list model
that holds `attachment`s where we also have access to its `contentType`.
This will allow us to decide at runtime which component should be used
to view/play the attachment.
---
 src/StatusQ/Components/StatusMessage.qml | 40 ++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/src/StatusQ/Components/StatusMessage.qml b/src/StatusQ/Components/StatusMessage.qml
index 1122132f..bb1b6e68 100644
--- a/src/StatusQ/Components/StatusMessage.qml
+++ b/src/StatusQ/Components/StatusMessage.qml
@@ -37,6 +37,7 @@ Rectangle {
     property string errorLoadingImageText: ""
     property string audioMessageInfoText: ""
     property string pinnedMsgInfoText: ""
+    property string messageAttachments: ""
     property var reactionIcons: [
         Emoji.iconSource("❤"),
         Emoji.iconSource("👍"),
@@ -101,6 +102,20 @@ Rectangle {
         messageFoundAnimation.start();
     }
 
+    onMessageAttachmentsChanged: {
+        root.prepareAttachmentsModel()
+    }
+
+    function prepareAttachmentsModel() {
+        attachmentsModel.clear()
+        if (!root.messageAttachments) {
+            return
+        }
+        root.messageAttachments.split(" ").forEach(source => {
+            attachmentsModel.append({source})
+        })
+    }
+
     implicitWidth: messageLayout.implicitWidth
                    + messageLayout.anchors.leftMargin
                    + messageLayout.anchors.rightMargin
@@ -316,6 +331,24 @@ Rectangle {
                         shapeType: root.messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
                     }
                 }
+
+                Loader {
+                    active: !!root.messageAttachments && !editMode
+                    visible: active
+                    sourceComponent: Column {
+                        spacing: 4
+                        Layout.fillWidth: true
+                        Repeater {
+                            model: attachmentsModel
+                            delegate: StatusImageMessage {
+                                source: model.source
+                                onClicked: root.imageClicked(image, mouse, imageSource)
+                                shapeType: root.messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
+                            }
+                        }
+                    }
+                }
+
                 Loader {
                     active: root.messageDetails.contentType === StatusMessage.ContentType.Sticker && !editMode
                     visible: active
@@ -406,4 +439,11 @@ Rectangle {
         anchors.topMargin: -8
         visible: hoverHandler.hovered && !root.hideQuickActions
     }
+
+    ListModel {
+        id: attachmentsModel
+        Component.onCompleted: {
+            root.prepareAttachmentsModel()
+        }
+    }
 }