Update info

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

res/css/views/elements/_ImageView.scss

@@ -91,6 +91,8 @@ limitations under the License.
 .mx_ImageView_info {
     padding-left: 12px;
     pointer-events: all;
+    display: flex;
+    flex-direction: column;
 }
 
 .mx_ImageView_button {
@@ -142,8 +144,3 @@ limitations under the License.
         background-color: none;
     }
 }
-
-.mx_ImageView_metadata {
-    font-size: $font-15px;
-    opacity: 0.5;
-}

src/components/views/elements/ImageView.js

@@ -18,7 +18,6 @@ limitations under the License.
 import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {formatDate} from '../../../DateUtils';
 import { _t } from '../../../languageHandler';
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
 import Modal from "../../../Modal";
@@ -29,6 +28,8 @@ import MemberAvatar from "../avatars/MemberAvatar";
 import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import MessageContextMenu from "../context_menus/MessageContextMenu";
 import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu';
+import MessageTimestamp from "../messages/MessageTimestamp";
+import SenderProfile from '../messages/SenderProfile';
 
 export default class ImageView extends React.Component {
     static propTypes = {
@@ -240,22 +241,6 @@ export default class ImageView extends React.Component {
     render() {
         const showEventMeta = !!this.props.mxEvent;
 
-        let metadata;
-        if (showEventMeta) {
-            // Figure out the sender, defaulting to mxid
-            let sender = this.props.mxEvent.getSender();
-            const cli = MatrixClientPeg.get();
-            const room = cli.getRoom(this.props.mxEvent.getRoomId());
-            if (room) {
-                const member = room.getMember(sender);
-                if (member) sender = member.name;
-            }
-
-            metadata = (<div className="mx_ImageView_metadata">
-                { formatDate(new Date(this.props.mxEvent.getTs())) }
-            </div>);
-        }
-
         const rotationDegrees = this.state.rotation + "deg";
         const zoomPercentage = this.state.zoom/100;
         const translatePixelsX = this.state.translationX + "px";
@@ -271,20 +256,28 @@ export default class ImageView extends React.Component {
                         rotate(${rotationDegrees})`,
         };
 
-        const event = this.props.mxEvent;
-
         let info;
-        if (event) {
+        if (showEventMeta) {
+            const mxEvent = this.props.mxEvent;
+
+            const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
+            const messageTimestamp = (
+                <MessageTimestamp showTwelveHour={false} ts={mxEvent.getTs()} />
+            );
+            const avatar = (
+                <MemberAvatar
+                    member={mxEvent.sender}
+                    width={32} height={32}
+                    viewUserOnClick={true}
+                />
+            );
+
             info = (
                 <div className="mx_ImageView_info_wrapper">
-                    <MemberAvatar
+                    {avatar}
-                        member={event.sender}
-                        width={32} height={32}
-                        viewUserOnClick={true}
-                    />
                     <div className="mx_ImageView_info">
-                        { event.sender ? event.sender.name : event.getSender() }
+                        {senderName}
-                        { metadata }
+                        {messageTimestamp}
                     </div>
                 </div>
             );