diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx index c0975b1..6170b9f 100644 --- a/src/app/molecules/message/Message.jsx +++ b/src/app/molecules/message/Message.jsx @@ -3,6 +3,7 @@ import React, { useState, useEffect, useCallback, useRef } from 'react'; import PropTypes from 'prop-types'; import './Message.scss'; +import { getShortcodeToCustomEmoji } from '../../organisms/emoji-board/custom-emoji'; import { twemojify } from '../../../util/twemojify'; import initMatrix from '../../../client/initMatrix'; @@ -301,12 +302,12 @@ function genReactionMsg(userIds, reaction) { return ( <> {userIds.map((userId, index) => ( - <> + {twemojify(getUsername(userId))} {index === userIds.length - 1 ? ' and ' : ', '} - + ))} {' reacted with '} {twemojify(reaction, { className: 'react-emoji' })} @@ -315,8 +316,14 @@ function genReactionMsg(userIds, reaction) { } function MessageReaction({ - reaction, count, users, isActive, onClick, + shortcodeToEmoji, reaction, count, users, isActive, onClick, }) { + const customEmojiMatch = reaction.match(/^:(\S+):$/); + let customEmojiUrl = null; + if (customEmojiMatch) { + const customEmoji = shortcodeToEmoji.get(customEmojiMatch[1]); + customEmojiUrl = initMatrix.matrixClient.mxcUrlToHttp(customEmoji?.mxc); + } return ( - { twemojify(reaction, { className: 'react-emoji' }) } + { + customEmojiUrl + ? {reaction} + : twemojify(reaction, { className: 'react-emoji' }) + } {count} ); } MessageReaction.propTypes = { + shortcodeToEmoji: PropTypes.shape({}).isRequired, reaction: PropTypes.node.isRequired, count: PropTypes.number.isRequired, users: PropTypes.arrayOf(PropTypes.string).isRequired, @@ -346,6 +358,7 @@ function MessageReactionGroup({ roomTimeline, mEvent }) { const eventId = mEvent.getId(); const mx = initMatrix.matrixClient; const reactions = {}; + const shortcodeToEmoji = getShortcodeToCustomEmoji(roomTimeline.room); const eventReactions = reactionTimeline.get(eventId); const addReaction = (key, count, senderId, isActive) => { @@ -392,6 +405,7 @@ function MessageReactionGroup({ roomTimeline, mEvent }) { Object.keys(reactions).map((key) => ( pack.getEmojis()) + .forEach((emoji) => { + allEmoji.set(emoji.shortcode, emoji); + }); + + return allEmoji; +} + // Produces a special list of emoji specifically for auto-completion // // This list contains each emoji once, with all emoji being deduplicated by shortcode. @@ -167,5 +179,7 @@ function getEmojiForCompletion(room) { } export { - getUserImagePack, getShortcodeToEmoji, getRelevantPacks, getEmojiForCompletion, + getUserImagePack, + getShortcodeToEmoji, getShortcodeToCustomEmoji, + getRelevantPacks, getEmojiForCompletion, };