From 649b87ac1121aee88c189d3e04d5ccc052c3ea8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 20:14:12 +0100
Subject: [PATCH] Make permalink clickable
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 | 27 +++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index cbe5b0592f..073b9dddbd 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -30,6 +30,8 @@ import MessageContextMenu from "../context_menus/MessageContextMenu";
 import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu';
 import MessageTimestamp from "../messages/MessageTimestamp";
 import SettingsStore from "../../../settings/SettingsStore";
+import {formatTime} from "../../../DateUtils";
+import dis from '../../../dispatcher/dispatcher';
 
 export default class ImageView extends React.Component {
     static propTypes = {
@@ -187,6 +189,18 @@ export default class ImageView extends React.Component {
         });
     }
 
+    onPermalinkClicked = e => {
+        // This allows the permalink to be opened in a new tab/window or copied as
+        // matrix.to, but also for it to enable routing within Element when clicked.
+        e.preventDefault();
+        dis.dispatch({
+            action: 'view_room',
+            event_id: this.props.mxEvent.getId(),
+            highlighted: true,
+            room_id: this.props.mxEvent.getRoomId(),
+        });
+    };
+
     onStartMoving = ev => {
         ev.stopPropagation();
         ev.preventDefault();
@@ -260,10 +274,21 @@ export default class ImageView extends React.Component {
         if (showEventMeta) {
             const mxEvent = this.props.mxEvent;
             const showTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
+            let permalink = "#";
+            if (this.props.permalinkCreator) {
+                permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
+            }
 
             const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
             const messageTimestamp = (
-                <MessageTimestamp showTwelveHour={showTwelveHour} ts={mxEvent.getTs()} />
+                <a
+                    href={permalink}
+                    onClick={this.onPermalinkClicked}
+                    aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
+                >
+                    <MessageTimestamp showTwelveHour={showTwelveHour} ts={mxEvent.getTs()} />
+                </a>
+
             );
             const avatar = (
                 <MemberAvatar