From fa9ae89b5bdf214d56b1d102cfa20b3c90f0f148 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 18:24:44 +0100
Subject: [PATCH] Don't show info if no event
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/elements/ImageView.js | 36 +++++++++++++++-------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index cd104cce37..c00b62ecc8 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -245,6 +245,30 @@ export default class ImageView extends React.Component {
 
         const event = this.props.mxEvent;
 
+        let info;
+        if (event) {
+            info = (
+                <div className="mx_ImageView_info_wrapper">
+                    <MemberAvatar
+                        member={event.sender}
+                        width={32} height={32}
+                        viewUserOnClick={true}
+                    />
+                    <div className="mx_ImageView_info">
+                        { event.sender ? event.sender.name : event.getSender() }
+                        { metadata }
+                    </div>
+                </div>
+            );
+        } else {
+            // If there is no event - we're viewing an avatar, we set
+            // an empty div here, since the panel uses space-between
+            // and we want the same placement of elements
+            info = (
+                <div></div>
+            );
+        }
+
         return (
             <FocusLock
                 returnFocus={true}
@@ -257,17 +281,7 @@ export default class ImageView extends React.Component {
             >
                 <div className="mx_ImageView_content">
                     <div className="mx_ImageView_panel" onClick={this.onPanelClick}>
-                        <div className="mx_ImageView_info_wrapper">
-                            <MemberAvatar
-                                member={event.sender}
-                                width={32} height={32}
-                                viewUserOnClick={true}
-                            />
-                            <div className="mx_ImageView_info">
-                                { event.sender ? event.sender.name : event.getSender() }
-                                { metadata }
-                            </div>
-                        </div>
+                        {info}
                         <div className="mx_ImageView_toolbar">
                             <div className="mx_ImageView_toolbar_buttons">
                                 <AccessibleTooltipButton