Fix/improve image sizes

TODO.md

@@ -1,10 +1,9 @@
 - Media
   - Uploading progress bar (+local echo)
   - Directly create cache files for our uploads before actually uploading
-  - Fix image sizes
-    - Image loading progress bar
   - Downloading
     - Bottom/top bar
+  - Image loading progress bar
   - Verify things work with chat.privacytools.io (subdomain weirdness)
 
   - Support m.file thumbnails
@@ -34,6 +33,7 @@
   - When qml syntax highlighting supports ES6 string interpolation, use that
 
 - Fixes
+  - Code not colored in room subtitle
   - In the "Leave me" room, "join > Hi > left" aren't combined
   - Event delegates changing height don't scroll the list
   - When selecting text and scrolling up, selection stops working after a while

src/python/matrix_client.py

@@ -14,7 +14,7 @@ from functools import partial
 from pathlib import Path
 from types import ModuleType
 from typing import (
-    Any, BinaryIO, DefaultDict, Dict, Optional, Set, Tuple, Type, Union
+    Any, BinaryIO, DefaultDict, Dict, Optional, Set, Tuple, Type, Union,
 )
 from uuid import uuid4
 

src/qml/Base/HMxcImage.qml

@@ -42,7 +42,7 @@ HImage {
         if (! image) return  // if it was destroyed
 
         if (! image.mxc.startsWith("mxc://")) {
-            source = mxc
+            if (source != mxc) source = mxc
             show = image.visible
             return
         }
@@ -54,7 +54,7 @@ HImage {
         py.callClientCoro(
             clientUserId, "media_cache." + method, args, path => {
                 if (! image) return
-                image.cachedPath = path
+                if (image.cachedPath != path) image.cachedPath = path
                 show = image.visible
             }
         )

src/qml/Chat/Timeline/EventContent.qml

@@ -156,15 +156,18 @@ HRowLayout {
                 Layout.leftMargin: pureMedia ? 0 : contentLabel.leftPadding
                 Layout.rightMargin: pureMedia ? 0 : contentLabel.rightPadding
 
-                Layout.minimumWidth:
-                    type === EventDelegate.Media.Image ?
-                    (singleMediaInfo.media_width ||
-                     (item ? item.loadingLabel.implicitWidth : -1)) : -1
+                Layout.preferredWidth: item ? item.width : -1
+                Layout.preferredHeight: item ? item.height : -1
 
-                Layout.minimumHeight:
-                    type === EventDelegate.Media.Image ?
-                    (singleMediaInfo.media_height ||
-                     (item ? item.loadingLabel.implicitHeight : -1)) : -1
+                // Layout.minimumWidth:
+                //     type === EventDelegate.Media.Image ?
+                //     (singleMediaInfo.media_width ||
+                //      (item ? item.loadingLabel.implicitWidth : -1)) : -1
+
+                // Layout.minimumHeight:
+                //     type === EventDelegate.Media.Image ?
+                //     (singleMediaInfo.media_height ||
+                //      (item ? item.loadingLabel.implicitHeight : -1)) : -1
 
                 // Layout.minimumWidth:
                 //     type === EventDelegate.Media.File ?
@@ -179,8 +182,8 @@ HRowLayout {
 
                 //     -1
 
-                Layout.maximumWidth: messageBodyWidth
-                Layout.maximumHeight: eventList.height / 2
+                // Layout.maximumWidth: messageBodyWidth
+                // Layout.maximumHeight: eventList.height / 2
             }
         }
     }

src/qml/Chat/Timeline/EventImage.qml

@@ -4,9 +4,9 @@ import "../../utils.js" as Utils
 
 HMxcImage {
     id: image
+    width: fitSize.width
+    height: fitSize.height
     horizontalAlignment: Image.AlignLeft
-    sourceSize.width: 640  // FIXME
-    sourceSize.height: 480  // FIXME
     animated: loader.singleMediaInfo.media_mime === "image/gif" ||
               Utils.urlExtension(loader.mediaUrl) === "gif"
     clientUserId: chatPage.userId
@@ -23,6 +23,27 @@ HMxcImage {
     readonly property bool isEncrypted: ! Utils.isEmptyObject(cryptDict)
     readonly property string openUrl: isEncrypted ? cachedPath : image.httpUrl
 
+    readonly property size fitSize: Utils.fitSize(
+        // Minimum display size
+        192,
+        192,
+
+        // Real size
+        loader.singleMediaInfo.thumbnail_width ||
+        loader.singleMediaInfo.media_width ||
+        implicitWidth ||
+        800,
+
+        loader.singleMediaInfo.thumbnail_height ||
+        loader.singleMediaInfo.media_height ||
+        implicitHeight ||
+        600,
+
+        // Maximum display size
+        Math.min(eventList.height / 3, eventContent.messageBodyWidth),
+        eventList.height / 3,
+    )
+
 
     TapHandler {
         onTapped: if (! image.animated) Qt.openUrlExternally(openUrl)

src/qml/utils.js

@@ -155,12 +155,13 @@ function filterModelSource(source, filter_text, property="filter_string") {
 }
 
 
-function fitSize(width, height, max) {
+function fitSize(minWidth, minHeight, width, height, maxWidth, maxHeight) {
     if (width >= height) {
-        let new_width = Math.min(width, max)
+        let new_width = Math.max(Math.min(width, maxWidth), minWidth)
         return Qt.size(new_width, height / (width / new_width))
     }
-    let new_height = Math.min(height, max)
+
+    let new_height = Math.max(Math.min(height, maxHeight), minHeight)
     return Qt.size(width / (height / new_height), new_height)
 }