Render image data in reactions

Many messaging services such as Slack and Discord allow for custom
images for reacts, rather than only standard emoji. Currently Element
will only show the plain text of the reaction key.

This PR updates element to render the media content from reaction
events. This does not add a way for users to add custom reactions yet.

This can be useful in the case of bots and bridges, which will be able
to immediately use this functinality.  A picker for Element users will
be added in the future.

Author: AndrewRyanChama

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[] = [