From 5aa2c7dc5cc1ce7f4fd5de1cb430e8de3b82cd24 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 30 Oct 2020 22:52:54 +0100
Subject: [PATCH] dom changes for timeline image view

---
 .../web/ui/session/room/timeline/ImageView.js | 33 ++++++++-----------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/platform/web/ui/session/room/timeline/ImageView.js b/src/platform/web/ui/session/room/timeline/ImageView.js
index 90355fe6..b16ea834 100644
--- a/src/platform/web/ui/session/room/timeline/ImageView.js
+++ b/src/platform/web/ui/session/room/timeline/ImageView.js
@@ -19,27 +19,20 @@ import {renderMessage} from "./common.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({
-            className: "picture",
-            src: vm => vm.thumbnailUrl,
-            width: vm.thumbnailWidth,
-            height: vm.thumbnailHeight,
-            loading: "lazy",
-            alt: vm => vm.label,
-            title: vm => vm.label,
-        });
-        const linkContainer = t.a({
-            href: vm.lightboxUrl,
-            style: `padding-top: ${heightRatioPercent}%; width: ${vm.thumbnailWidth}px;`
-        }, [
-            image,
-            t.if(vm => vm.error, t.createTemplate((t, vm) => t.p({className: "error"}, vm.error)))
-        ]);
-
         return renderMessage(t, vm,
-            [t.div(linkContainer), t.p(t.time(vm.date + " " + vm.time))]
+            t.div([
+                t.a({href: vm.lightboxUrl, className: "picture"}, [
+                    t.img({
+                        src: vm => vm.thumbnailUrl,
+                        loading: "lazy",
+                        alt: vm => vm.label,
+                        title: vm => vm.label,
+                        style: vm => `max-width: ${vm.thumbnailWidth}px; max-height: ${vm.thumbnailHeight}px;`
+                    }),
+                    t.time(vm.date + " " + vm.time)
+                ]),
+                t.if(vm => vm.error, t.createTemplate((t, vm) => t.p({className: "error"}, vm.error)))
+            ])
         );
     }
 }