chat-view: fix data transfer image size reload loops

Changing the source size property of the QML Image component causes
a reload using the new source dimensions. The image loading process
was triggering reloading that was not recognized as a binding loop.

This commit also corrects the image sizing algorithm to prefer and
restrict height, which prevents images that are too tall from
taking up too much vertical space in the chat list view.

GitLab: #857
Change-Id: I049b1bb8ea4d23a753e7b54de884d9c1eafdf83c

src/app/commoncomponents/DataTransferMessageDelegate.qml

@@ -331,23 +331,30 @@ Loader {
                             id: img
 
                             anchors.right: isOutgoing ? parent.right : undefined
-                            property real minSize: 192
-                            property real maxSize: 256
                             cache: true
-                            fillMode: Image.PreserveAspectCrop
+                            fillMode: Image.PreserveAspectFit
                             mipmap: true
                             antialiasing: true
                             autoTransform: true
                             asynchronous: true
-                            sourceSize.width: width
-                            sourceSize.height: height
-                            source: "file:///" + Body
-                            property real aspectRatio: implicitWidth / implicitHeight
-                            property real adjustedWidth: Math.min(maxSize,
-                                                                  Math.max(minSize,
-                                                                           innerContent.width - senderMargin))
-                            width: adjustedWidth
-                            height: Math.ceil(adjustedWidth / aspectRatio)
+                            source: Body !== undefined ? "file:///" + Body : ''
+
+                            // The sourceSize represents the maximum source dimensions.
+                            // This should not be a dynamic binding, as property changes
+                            // (resizing the chat view) here will trigger a reload of the image.
+                            sourceSize: Qt.size(256, 256)
+
+                            // Now we setup bindings for the destination image component size.
+                            // This based on the width available (width of the chat view), and
+                            // a restriction on the height.
+                            readonly property real aspectRatio: paintedWidth / paintedHeight
+                            readonly property real idealWidth: innerContent.width - senderMargin
+                            onStatusChanged: {
+                                if (status == Image.Ready && aspectRatio) {
+                                    height = Qt.binding(() => JamiQmlUtils.clamp(idealWidth / aspectRatio, 64, 256))
+                                    width = Qt.binding(() => height * aspectRatio)
+                                }
+                            }
 
                             Rectangle {
                                 color: JamiTheme.previewImageBackgroundColor

src/app/constant/JamiQmlUtils.qml

@@ -76,4 +76,8 @@ Item {
 
         return Qt.size(globalTextMetrics.contentWidth, globalTextMetrics.contentHeight)
     }
+
+    function clamp(val, min, max) {
+        return Math.min(Math.max(val, min), max)
+    }
 }