From 1ec25434671485e13dcbe09ef9963a65020a8c72 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Sun, 10 May 2020 11:56:05 +0200
Subject: [PATCH] fix image aspect ratio when scaling, again

also when image hasn't loaded yet to prevent scroll position jumps
---
 src/ui/web/css/timeline.css                   | 19 ++++++++++++++++---
 src/ui/web/session/room/timeline/ImageView.js | 18 ++++++++++++++++--
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/ui/web/css/timeline.css b/src/ui/web/css/timeline.css
index 2a96ff07..5fd00343 100644
--- a/src/ui/web/css/timeline.css
+++ b/src/ui/web/css/timeline.css
@@ -27,10 +27,23 @@
     font-weight: bold;
 }
 
-.message-container img {
-    max-width: 100%;
-    height: 100%;
+.message-container a {
     display: block;
+    position: relative;
+    max-width: 100%;
+    /* width and padding-top set inline to maintain aspect ratio,
+    replace with css aspect-ratio once supported */
+}
+
+.message-container img {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
 }
 
 .TextMessageView {
diff --git a/src/ui/web/session/room/timeline/ImageView.js b/src/ui/web/session/room/timeline/ImageView.js
index 55c57d62..441b1f95 100644
--- a/src/ui/web/session/room/timeline/ImageView.js
+++ b/src/ui/web/session/room/timeline/ImageView.js
@@ -2,12 +2,26 @@ import {TemplateView} from "../../../general/TemplateView.js";
 
 export class ImageView extends TemplateView {
     render(t, vm) {
+        // replace with css aspect-ratio once supported
+        const heightRatioPercent = (vm.thumbnailHeight / vm.thumbnailWidth) * 100;
+        const image = t.img({
+            src: vm.thumbnailUrl,
+            width: vm.thumbnailWidth,
+            height: vm.thumbnailHeight,
+            loading: "lazy",
+            alt: vm.label,
+        });
+        const linkContainer = t.a({
+            href: vm.url,
+            target: "_blank",
+            style: `padding-top: ${heightRatioPercent}%; width: ${vm.thumbnailWidth}px;`
+        }, image);
+
         return t.li(
             {className: {"TextMessageView": true, own: vm.isOwn, pending: vm.isPending}},
             t.div({className: "message-container"}, [
                 t.div({className: "sender"}, vm => vm.isContinuation ? "" : vm.sender),
-                t.div(t.a({href: vm.url, target: "_blank"},
-                    t.img({src: vm.thumbnailUrl, width: vm.thumbnailWidth, height: vm.thumbnailHeight, loading: "lazy", alt: vm.label}))),
+                t.div(linkContainer),
                 t.p(t.time(vm.date + " " + vm.time)),
             ])
         );