fix: Use native unicode emojis [WPB-5790] (#16333)

wireapp · Dec 7, 2023 · 1e91445 · 1e91445
1 parent 9684e05
commit 1e91445
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 76 deletions.
diff --git a/...tions/MessageReactions/EmojiImg.styles.ts → ...ions/MessageReactions/EmojiChar.styles.ts b/...tions/MessageReactions/EmojiImg.styles.ts → ...ions/MessageReactions/EmojiChar.styles.ts
diff --git a/...sageActions/MessageReactions/EmojiImg.tsx → ...ageActions/MessageReactions/EmojiChar.tsx b/...sageActions/MessageReactions/EmojiImg.tsx → ...ageActions/MessageReactions/EmojiChar.tsx
@@ -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};
diff --git a/...nents/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/EmojiPicker.tsx b/...nents/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/EmojiPicker.tsx
@@ -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;
@@ -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()}
             />

diff --git a/...ponents/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/EmojiPill.tsx b/...ponents/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/EmojiPill.tsx
@@ -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,
@@ -52,7 +51,7 @@ export interface EmojiPillProps {
   hasUserReacted: boolean;
 }
 
-const EmojiPill: FC<EmojiPillProps> = ({
+export const EmojiPill: FC<EmojiPillProps> = ({
   emoji,
   emojiUnicode,
   emojiCount,
@@ -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;
 
@@ -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}>
@@ -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};
diff --git a/...gesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts b/...gesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts
@@ -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'};
@@ -117,7 +117,3 @@ export const getReactionsButtonCSS = (isActive?: boolean, isDisabled?: boolean):
     },
   };
 };
-
-export const actionMenuEmojiSize = {
-  width: '16px',
-};
diff --git a/.../MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.tsx b/.../MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.tsx
@@ -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 {
@@ -172,6 +169,7 @@ const MessageReactions: FC<MessageReactionsProps> = ({
     [handleEmojiKeyDown, handleKeyDown],
   );
 
+  const emojiSize = 15;
   return (
     <>
       <button
@@ -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={{
@@ -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={{

diff --git a/src/script/components/MessagesList/Message/ContentMessage/MessageActions/ReplyButton.tsx b/src/script/components/MessagesList/Message/ContentMessage/MessageActions/ReplyButton.tsx
@@ -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;

diff --git a/src/script/page/RightSidebar/MessageDetails/MessageDetails.tsx b/src/script/page/RightSidebar/MessageDetails/MessageDetails.tsx
@@ -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,
@@ -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';
 
@@ -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>

diff --git a/src/script/util/ReactionUtil.ts b/src/script/util/ReactionUtil.ts
@@ -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