Skip to content

Commit

Permalink
fix: Use native unicode emojis [WPB-5790] (#16333)
Browse files Browse the repository at this point in the history
  • Loading branch information
@atomrc
atomrc committed Dec 7, 2023
1 parent 9684e05 commit 1e91445
Show file tree
Hide file tree
Showing 9 changed files with 26 additions and 76 deletions.
0 ...tions/MessageReactions/EmojiImg.styles.ts → ...ions/MessageReactions/EmojiChar.styles.ts
View file
File renamed without changes.
30 changes: 10 additions & 20 deletions ...sageActions/MessageReactions/EmojiImg.tsx → ...ageActions/MessageReactions/EmojiChar.tsx
View file
Expand Up @@ -21,28 +21,18 @@ import {FC} from 'react';

import {CSSObject} from '@emotion/react';

import {messageReactionEmoji, reactionImgSize} from './EmojiImg.styles';

export interface EmojiImgProps {
emojiUrl: string;
emojiName: string;
emojiImgSize?: CSSObject;
emoji: string;
size?: number;
styles?: CSSObject;
}

const EmojiImg: FC<EmojiImgProps> = ({emojiUrl, styles, emojiName, emojiImgSize = reactionImgSize}) => {
return (
<>
<img
alt={emojiName}
aria-hidden={true}
css={{...emojiImgSize, ...messageReactionEmoji, ...styles}}
draggable="false"
loading="eager"
src={emojiUrl}
/>
</>
);
export const EmojiChar: FC<EmojiImgProps> = ({emoji: unicode, size, styles}) => {
const fontSize = size ? `${size}px` : 'var(--font-size-medium)';
const style = {
':after': {
content: `'${unicode}'`,
},
};
return <span aria-hidden={true} css={{fontSize, ...style, ...styles}}></span>;
};

export {EmojiImg};
6 changes: 2 additions & 4 deletions ...nents/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/EmojiPicker.tsx
View file
Expand Up @@ -19,13 +19,12 @@

import {useState, useEffect, useRef, FC, RefObject} from 'react';

import EmojiPicker, {EmojiClickData, SkinTones} from 'emoji-picker-react';
import EmojiPicker, {EmojiClickData, EmojiStyle, SkinTones} from 'emoji-picker-react';
import {createPortal} from 'react-dom';

import {useClickOutside} from 'src/script/hooks/useClickOutside';
import {isEnterKey, isEscapeKey} from 'Util/KeyboardUtil';
import {t} from 'Util/LocalizerUtil';
import {getEmojiUrl} from 'Util/ReactionUtil';

interface EmojiPickerContainerProps {
posX: number;
Expand Down Expand Up @@ -124,9 +123,8 @@ const EmojiPickerContainer: FC<EmojiPickerContainerProps> = ({
data-uie-name="emoji-picker-dialog"
>
<EmojiPicker
emojiStyle={EmojiStyle.NATIVE}
onEmojiClick={onEmojiClick}
getEmojiUrl={getEmojiUrl}
lazyLoadEmojis={true}
searchPlaceHolder={t('accessibility.emojiPickerSearchPlaceholder')}
defaultSkinTone={getSkinTone()}
/>
Expand Down
25 changes: 4 additions & 21 deletions ...ponents/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/EmojiPill.tsx
View file
Expand Up @@ -25,9 +25,8 @@ import {useMessageFocusedTabIndex} from 'Components/MessagesList/Message/util';
import {getEmojiTitleFromEmojiUnicode} from 'Util/EmojiUtil';
import {isTabKey} from 'Util/KeyboardUtil';
import {t} from 'Util/LocalizerUtil';
import {getEmojiUrl} from 'Util/ReactionUtil';

import {EmojiImg} from './EmojiImg';
import {EmojiChar} from './EmojiChar';
import {
getReactionsButtonCSS,
messageReactionButton,
Expand All @@ -52,7 +51,7 @@ export interface EmojiPillProps {
hasUserReacted: boolean;
}

const EmojiPill: FC<EmojiPillProps> = ({
export const EmojiPill: FC<EmojiPillProps> = ({
emoji,
emojiUnicode,
emojiCount,
Expand All @@ -67,7 +66,6 @@ const EmojiPill: FC<EmojiPillProps> = ({
}) => {
const messageFocusedTabIndex = useMessageFocusedTabIndex(isMessageFocused);
const [isOpen, setTooltipVisibility] = useState(false);
const emojiUrl = getEmojiUrl(emojiUnicode);
const emojiName = getEmojiTitleFromEmojiUnicode(emojiUnicode);
const isActive = hasUserReacted && !isRemovedFromConversation;

Expand All @@ -83,14 +81,7 @@ const EmojiPill: FC<EmojiPillProps> = ({
<Tooltip
body={
<div css={messageReactionButtonTooltip}>
<EmojiImg
emojiImgSize={{
width: '1.2rem',
}}
styles={messageReactionButtonTooltipImage}
emojiUrl={emojiUrl}
emojiName={emojiName}
/>
<EmojiChar styles={messageReactionButtonTooltipImage} emoji={emoji} />
<p css={messageReactionButtonTooltipText}>
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
<span onClick={onTooltipReactionCountClick} css={messageReactionButtonTooltipTextLink}>
Expand Down Expand Up @@ -131,18 +122,10 @@ const EmojiPill: FC<EmojiPillProps> = ({
}
}}
>
<EmojiImg
emojiUrl={emojiUrl}
emojiName={emojiName}
emojiImgSize={{
width: 'var(--font-size-medium)',
}}
/>
<EmojiChar emoji={emoji} />
<span css={messageReactionCount(isActive)}>{emojiCount}</span>
</button>
</Tooltip>
</div>
);
};

export {EmojiPill};
6 changes: 1 addition & 5 deletions ...gesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts
View file
Expand Up @@ -60,7 +60,7 @@ export const messageReactionButton: CSSObject = {
};

export const messageReactionButtonTooltip: CSSObject = {display: 'flex', maxWidth: 130, whiteSpace: 'break-spaces'};
export const messageReactionButtonTooltipImage: CSSObject = {marginRight: 8};
export const messageReactionButtonTooltipImage: CSSObject = {marginRight: 8, lineHeight: '2.5em'};
export const messageReactionDetailsMargin: CSSObject = {marginRight: '0.4rem'};
export const reactionsCountAlignment: CSSObject = {display: 'flex', alignItems: 'center'};
export const messageReactionButtonTooltipText: CSSObject = {fontSize: '0.7rem'};
Expand Down Expand Up @@ -117,7 +117,3 @@ export const getReactionsButtonCSS = (isActive?: boolean, isDisabled?: boolean):
},
};
};

export const actionMenuEmojiSize = {
width: '16px',
};
20 changes: 5 additions & 15 deletions .../MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.tsx
View file
Expand Up @@ -23,19 +23,16 @@ import {ContentMessage} from 'src/script/entity/message/ContentMessage';
import {KEY} from 'Util/KeyboardUtil';
import {t} from 'Util/LocalizerUtil';

import {EmojiImg} from './EmojiImg';
import {reactionImgSize} from './EmojiImg.styles';
import {EmojiChar} from './EmojiChar';
import {reactionImgSize} from './EmojiChar.styles';
import {EmojiPickerContainer} from './EmojiPicker';
import {actionMenuEmojiSize} from './MessageReactions.styles';

import {MessageActionsId} from '../MessageActions';
import {useMessageActionsState} from '../MessageActions.state';
import {messageActionsMenuButton, getActionsMenuCSS, getIconCSS} from '../MessageActions.styles';

const thumbsUpEmoji = '👍';
const likeEmoji = '❤️';
const thumbsUpEmojiUrl = '/image/emojis/img-apple-64/1f44d.png';
const likeEmojiUrl = '/image/emojis/img-apple-64/2764-fe0f.png';
const INITIAL_CLIENT_X_POS = 0;
const INITIAL_CLIENT_Y_POS = 0;
export interface MessageReactionsProps {
Expand Down Expand Up @@ -172,6 +169,7 @@ const MessageReactions: FC<MessageReactionsProps> = ({
[handleEmojiKeyDown, handleKeyDown],
);

const emojiSize = 15;
return (
<>
<button
Expand All @@ -188,11 +186,7 @@ const MessageReactions: FC<MessageReactionsProps> = ({
onClick={handleMsgActionClick}
onKeyDown={handleMsgActionKeyDown}
>
<EmojiImg
emojiUrl={thumbsUpEmojiUrl}
emojiName={t('accessibility.messageActionsMenuThumbsUp')}
emojiImgSize={actionMenuEmojiSize}
/>
<EmojiChar emoji={thumbsUpEmoji} size={emojiSize} />
</button>
<button
css={{
Expand All @@ -208,11 +202,7 @@ const MessageReactions: FC<MessageReactionsProps> = ({
onClick={handleMsgActionClick}
onKeyDown={handleMsgActionKeyDown}
>
<EmojiImg
emojiUrl={likeEmojiUrl}
emojiName={t('accessibility.messageActionsMenuLike')}
emojiImgSize={actionMenuEmojiSize}
/>
<EmojiChar emoji={likeEmoji} size={emojiSize} />
</button>
<button
css={{
Expand Down
2 changes: 1 addition & 1 deletion src/script/components/MessagesList/Message/ContentMessage/MessageActions/ReplyButton.tsx
View file
Expand Up @@ -23,7 +23,7 @@ import {Icon} from 'Components/Icon';
import {t} from 'Util/LocalizerUtil';

import {getActionsMenuCSS, getIconCSS, messageActionsMenuButton} from './MessageActions.styles';
import {reactionImgSize} from './MessageReactions/EmojiImg.styles';
import {reactionImgSize} from './MessageReactions/EmojiChar.styles';

export interface ReplyButtonProps {
actionId: string;
Expand Down
7 changes: 3 additions & 4 deletions src/script/page/RightSidebar/MessageDetails/MessageDetails.tsx
View file
Expand Up @@ -27,7 +27,7 @@ import {WebAppEvents} from '@wireapp/webapp-events';

import {FadingScrollbar} from 'Components/FadingScrollbar';
import {Icon} from 'Components/Icon';
import {EmojiImg} from 'Components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/EmojiImg';
import {EmojiChar} from 'Components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/EmojiChar';
import {
messageReactionDetailsMargin,
reactionsCountAlignment,
Expand All @@ -36,7 +36,7 @@ import {UserSearchableList} from 'Components/UserSearchableList';
import {useKoSubscribableChildren} from 'Util/ComponentUtil';
import {getEmojiTitleFromEmojiUnicode, getEmojiUnicode} from 'Util/EmojiUtil';
import {t} from 'Util/LocalizerUtil';
import {getEmojiUrl, groupByReactionUsers} from 'Util/ReactionUtil';
import {groupByReactionUsers} from 'Util/ReactionUtil';
import {capitalizeFirstChar} from 'Util/StringUtil';
import {formatLocale} from 'Util/TimeUtil';

Expand Down Expand Up @@ -279,14 +279,13 @@ const MessageDetails: FC<MessageDetailsProps> = ({
Array.from(reactionUsers).map(reactions => {
const [reactionKey, users] = reactions;
const emojiUnicode = getEmojiUnicode(reactionKey);
const emojiUrl = getEmojiUrl(emojiUnicode);
const emojiName = getEmojiTitleFromEmojiUnicode(emojiUnicode);
const capitalizedEmojiName = capitalizeFirstChar(emojiName);
const emojiCount = users.length;
return (
<Fragment key={reactionKey}>
<div css={panelContentTitleStyles} className="font-weight-bold">
<EmojiImg emojiUrl={emojiUrl} emojiName={emojiName} styles={messageReactionDetailsMargin} />
<EmojiChar emoji={reactionKey} styles={messageReactionDetailsMargin} />
<span css={messageReactionDetailsMargin}>{capitalizedEmojiName}</span>
<span css={reactionsCountAlignment}>({emojiCount})</span>
</div>
Expand Down
6 changes: 0 additions & 6 deletions src/script/util/ReactionUtil.ts
View file
Expand Up @@ -38,12 +38,6 @@ export function groupByReactionUsers(reactions: Reactions): ReactionsGroupedByUs

return reactionsGroupedByUser;
}

// Maps to the static server emojis url
export function getEmojiUrl(unicode: string) {
return `/image/emojis/img-apple-64/${unicode}.png`;
}

/**
*
* @param reactionsList This is an array of tuples, each tuple consists of two elements a
Expand Down

0 comments on commit 1e91445

Please sign in to comment.