feat: enable animated gifs but stop them on click and out of focus

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml

@@ -137,6 +137,9 @@ Item {
             ImageMessage {
                 color: Style.current.transparent
                 chatHorizontalPadding: 0
+                onClicked: {
+                    chatTextItem.clickMessage(false, false, true, image)
+                }
             }
         }
     }

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageLoader.qml

@@ -8,7 +8,9 @@ Item {
     property int imageWidth: 350
     property bool isCurrentUser: false
     property url source
-    signal clicked(string source)
+    property bool playing: true
+    property bool isAnimated: !!source && source.toString().endsWith('.gif')
+    signal clicked(var image)
 
     id: imageContainer
     width: loadingImage.visible ? loadingImage.width : imageMessage.width
@@ -34,11 +36,23 @@ Item {
         }
     }
 
-    Image {
+    Connections {
+        target: applicationWindow
+        onActiveChanged: {
+            if (applicationWindow.active === false) {
+                imageMessage.playing = false
+            } else {
+                imageMessage.playing = Qt.binding(function () {return imageContainer.playing})
+            }
+        }
+    }
+
+    AnimatedImage {
         id: imageMessage
         width: sourceSize.width > imageWidth ? imageWidth : sourceSize.width
         fillMode: Image.PreserveAspectFit
         source: imageContainer.source
+        playing: imageContainer.playing
         onStatusChanged: {
             if (imageMessage.status === Image.Error) {
                 loadingImage.hasError = true
@@ -88,7 +102,13 @@ Item {
             cursorShape: Qt.PointingHandCursor
             anchors.fill: parent
             onClicked: {
-                imageContainer.clicked(imageContainer.source)
+                if (imageContainer.isAnimated) {
+                    // FIXME the ListView completely removes Items that scroll out of view
+                    // so when we scroll backto the image, it gets reloaded and playing is reset
+                    imageContainer.playing = !imageContainer.playing
+                    return
+                }
+                imageContainer.clicked(imageMessage)
             }
         }
     }

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageMessage.qml

@@ -5,7 +5,7 @@ Rectangle {
     property int chatVerticalPadding: 12
     property int chatHorizontalPadding: 12
     property bool isCurrentUser: bool
-    signal clicked(string source)
+    signal clicked(var image)
 
     id: imageChatBox
     height: {
@@ -47,7 +47,7 @@ Rectangle {
             source: modelData
             isCurrentUser: imageChatBox.isCurrentUser
             onClicked: {
-                imageChatBox.clicked(source)
+                imageChatBox.clicked(image)
             }
         }
     }

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml

@@ -12,8 +12,6 @@ MouseArea {
             return;
         }
         if (mouse.button & Qt.LeftButton) {                
-            if (isImage && !isSticker)
-                clickMessage(false, false, isImage, image);
             return;
         }
     }

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml

@@ -221,7 +221,7 @@ Item {
         ImageMessage {
             isCurrentUser: messageItem.isCurrentUser
             onClicked: {
-              chatTextItem.clickMessage(false, false, true, source)
+                chatTextItem.clickMessage(false, false, true, image)
             }
         }
     }

ui/shared/status/StatusImageModal.qml

@@ -22,17 +22,17 @@ Popup {
     padding: 0
 
     function setPopupData(image) {
-        messageImage.source = image;
+        messageImage.source = image.source;
+        const maxHeight = applicationWindow.height - 80
+        const maxWidth = applicationWindow.width - 80
 
-        let maxHeight = applicationWindow.height - 80
-        let maxWidth = applicationWindow.width - 80
 
-        if (messageImage.sourceSize.width >= maxWidth || messageImage.sourceSize.height >= maxHeight) {
+        if (image.sourceSize.width >= maxWidth || image.sourceSize.height >= maxHeight) {
             this.width = maxWidth
             this.height = maxHeight
         } else {
-            this.width = messageImage.sourceSize.width
+            this.width = image.sourceSize.width
-            this.height = messageImage.sourceSize.height
+            this.height = image.sourceSize.height
         }
     }