Render image data in reactions

src/HtmlUtils.tsx

@@ -102,7 +102,7 @@ function mightContainEmoji(str: string): boolean {
  */
 export function unicodeToShortcode(char: string): string {
     const shortcodes = getEmojiFromUnicode(char)?.shortcodes;
-    return shortcodes?.length ? `:${shortcodes[0]}:` : '';
+    return shortcodes?.length ? `:${shortcodes[0]}:` : char;
 }
 
 export function processHtmlForSending(html: string): string {

src/components/views/messages/MImageBody.tsx

@@ -139,7 +139,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         }
     };
 
-    private isGif = (): boolean => {
+    protected isGif = (): boolean => {
         const content = this.props.mxEvent.getContent();
         return content.info?.mimetype === "image/gif";
     };

src/components/views/messages/ReactionImage.tsx

@@ -0,0 +1,64 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import MImageBody from './MImageBody';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { BLURHASH_FIELD } from "../../../ContentMessages";
+import { IMediaEventContent } from '../../../customisations/models/IMediaEventContent';
+import SettingsStore from '../../../settings/SettingsStore';
+
+const FORCED_IMAGE_HEIGHT = 20;
+
+@replaceableComponent("views.messages.ReactionImage")
+export default class ReactionImage extends MImageBody {
+    public onClick = (ev: React.MouseEvent): void => {
+        ev.preventDefault();
+    };
+
+    protected wrapImage(contentUrl: string, children: JSX.Element): JSX.Element {
+        return children;
+    }
+
+    protected getPlaceholder(width: number, height: number): JSX.Element {
+        if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
+        return <img src={require("../../../../res/img/icons-show-stickers.svg")} width="14" height="20" />;
+    }
+
+    // Tooltip to show on mouse over
+    protected getTooltip(): JSX.Element {
+        return null;
+    }
+
+    // Don't show "Download this_file.png ..."
+    protected getFileBody() {
+        return null;
+    }
+
+    render() {
+        const contentUrl = this.getContentUrl();
+        const content = this.props.mxEvent.getContent<IMediaEventContent>();
+        let thumbUrl;
+        if (this.props.forExport || (this.isGif() && SettingsStore.getValue("autoplayGifs"))) {
+            thumbUrl = contentUrl;
+        } else {
+            thumbUrl = this.getThumbUrl();
+        }
+        const thumbnail = this.messageContent(contentUrl, thumbUrl, content, FORCED_IMAGE_HEIGHT);
+        return thumbnail;
+    }
+}

src/components/views/messages/ReactionsRowButton.tsx

@@ -25,6 +25,8 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import ReactionsRowButtonTooltip from "./ReactionsRowButtonTooltip";
 import AccessibleButton from "../elements/AccessibleButton";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import ReactionImage from "./ReactionImage";
+import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 
 interface IProps {
     // The event we're displaying reactions for
@@ -49,12 +51,26 @@ interface IState {
 @replaceableComponent("views.messages.ReactionsRowButton")
 export default class ReactionsRowButton extends React.PureComponent<IProps, IState> {
     static contextType = MatrixClientContext;
+    private mediaHelper: MediaEventHelper;
+    private mediaEligible: boolean;
+    private mediaEvent: MatrixEvent;
 
     state = {
         tooltipRendered: false,
         tooltipVisible: false,
     };
 
+    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
+        super(props);
+        const mediaEvents = [...props.reactionEvents].filter(event => MediaEventHelper.isEligible(event));
+        if (mediaEvents.length > 0) {
+            this.mediaEligible = true;
+            // assume that reactors aren't sending different contents with the same key
+            this.mediaEvent = mediaEvents[0];
+            this.mediaHelper = new MediaEventHelper(this.mediaEvent);
+        }
+    }
+
     onClick = () => {
         const { mxEvent, myReactionEvent, content } = this.props;
         if (myReactionEvent) {
@@ -64,6 +80,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
             );
         } else {
             this.context.sendEvent(mxEvent.getRoomId(), "m.reaction", {
+                ...(this.mediaEligible ? this.mediaEvent.getContent() : {}),
                 "m.relates_to": {
                     "rel_type": "m.annotation",
                     "event_id": mxEvent.getId(),
@@ -92,6 +109,18 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
     render() {
         const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props;
 
+        let actualContent: JSX.Element = <>{ content }</>;
+        if (this.mediaEligible) {
+            actualContent = <ReactionImage
+                mxEvent={this.mediaEvent}
+                highlights={undefined}
+                highlightLink={undefined}
+                onHeightChanged={() => { }}
+                onMessageAllowed={undefined}
+                permalinkCreator={undefined}
+                mediaEventHelper={this.mediaHelper} />;
+        }
+
         const classes = classNames({
             mx_ReactionsRowButton: true,
             mx_ReactionsRowButton_selected: !!myReactionEvent,
@@ -133,7 +162,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
             onMouseLeave={this.onMouseLeave}
         >
             <span className="mx_ReactionsRowButton_content" aria-hidden="true">
-                { content }
+                { actualContent }
             </span>
             <span className="mx_ReactionsRowButton_count" aria-hidden="true">
                 { count }

src/utils/MediaEventHelper.ts

@@ -105,7 +105,7 @@ export class MediaEventHelper implements IDestroyable {
         if (!event) return false;
         if (event.isRedacted()) return false;
         if (event.getType() === EventType.Sticker) return true;
-        if (event.getType() !== EventType.RoomMessage) return false;
+        if (event.getType() !== EventType.RoomMessage && event.getType() !== EventType.Reaction) return false;
 
         const content = event.getContent();
         const mediaMsgTypes: string[] = [