From 644c841a3989a8cba4f0f010f5558830da2d1141 Mon Sep 17 00:00:00 2001
From: Andreas Traczyk <andreas.traczyk@savoirfairelinux.com>
Date: Thu, 20 Oct 2022 13:10:25 -0400
Subject: [PATCH] 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
---
.../DataTransferMessageDelegate.qml | 31 ++++++++++++-------
src/app/constant/JamiQmlUtils.qml | 4 +++
2 files changed, 23 insertions(+), 12 deletions(-)
diff --git a/src/app/commoncomponents/DataTransferMessageDelegate.qml b/src/app/commoncomponents/DataTransferMessageDelegate.qml
index 56ba7607d..b3a5b2acb 100644
--- a/src/app/commoncomponents/DataTransferMessageDelegate.qml
+++ b/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
diff --git a/src/app/constant/JamiQmlUtils.qml b/src/app/constant/JamiQmlUtils.qml
index 2eaa6b8c6..9b6128379 100644
--- a/src/app/constant/JamiQmlUtils.qml
+++ b/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)
+ }
}
--
GitLab