refactor(emoji-picker): update emoji-mart to latest version

bigbluebutton-html5/imports/ui/components/actions-bar/styles.js

@@ -101,28 +101,13 @@ const ReactionsDropdown = styled.div`
 `;
 
 const Wrapper = styled.div`
-  .emoji-mart-bar {
+  overflow: hidden;
-    display: none;
+  padding: 5px;
-  }
+  text-align: center;
-  .emoji-mart-search {
+  max-height: 270px;
-    display: none;
+  width: 270px;
-  }
+  em-emoji {
-  .emoji-mart-category[aria-label="Frequently Used"] {
+    cursor: pointer;
-    display: none;
-  }
-  .emoji-mart-category-label{
-    display: none;
-  }
-  .emoji-mart{
-    border: none;
-  }
-  @media(min-width: 600px) {
-    .emoji-mart-scroll{
-      overflow:hidden;
-      padding: 0;
-      height: 270px;
-      width: 280px;
-    }
   }
 `;
 

bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx

@@ -249,7 +249,7 @@ class MessageForm extends PureComponent {
       stopUserTyping,
     } = this.props;
     const { message } = this.state;
-    let msg = message.trim();
+    const msg = message.trim();
 
     if (msg.length < minMessageLength) return;
 
@@ -289,8 +289,6 @@ class MessageForm extends PureComponent {
         <Styled.EmojiPickerWrapper>
           <Styled.EmojiPicker
             onEmojiSelect={(emojiObject) => this.handleEmojiSelect(emojiObject)}
-            showPreview={false}
-            showSkinTones={false}
           />
         </Styled.EmojiPickerWrapper>
       );

bigbluebutton-html5/imports/ui/components/chat/message-form/styles.js

@@ -109,21 +109,11 @@ const EmojiButton = styled(Button)`
 `;
 
 const EmojiPickerWrapper = styled.div`
-  .emoji-mart {
+  em-emoji-picker {
-    max-width: 100% !important;
+    width: 100%;
-  }
+    max-height: 300px;
-  .emoji-mart-anchor {
-    cursor: pointer;
-  }
-  .emoji-mart-emoji {
-    cursor: pointer !important;
-  }
-  .emoji-mart-category-list {
-    span {
-      cursor: pointer !important;
-      display: inline-block !important;
-    }
   }
+  padding-bottom: 5px;
 `;
 
 const EmojiPicker = styled(EmojiPickerComponent)``;

bigbluebutton-html5/imports/ui/components/emoji-picker/component.jsx

@@ -1,26 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
-import { Picker } from 'emoji-mart';
+import data from '@emoji-mart/data';
-import 'emoji-mart/css/emoji-mart.css';
+import Picker from '@emoji-mart/react';
 
 const DISABLE_EMOJIS = Meteor.settings.public.chat.disableEmojis;
-const FREQUENT_SORT_ON_CLICK = Meteor.settings.public.chat.emojiPicker.frequentEmojiSortOnClick;
 
 const propTypes = {
   intl: PropTypes.shape({
     formatMessage: PropTypes.func.isRequired,
   }).isRequired,
   onEmojiSelect: PropTypes.func.isRequired,
-  style: PropTypes.shape({}),
-  showPreview: PropTypes.bool,
-  showSkinTones: PropTypes.bool,
-};
-
-const defaultProps = {
-  style: null,
-  showPreview: true,
-  showSkinTones: true,
 };
 
 const emojisToExclude = [
@@ -31,8 +21,6 @@ const EmojiPicker = (props) => {
   const {
     intl,
     onEmojiSelect,
-    showPreview,
-    showSkinTones,
   } = props;
 
   const i18n = {
@@ -65,23 +53,19 @@ const EmojiPicker = (props) => {
 
   return (
     <Picker
-      emoji=""
+      data={data}
-      onSelect={(emojiObject, event) => onEmojiSelect(emojiObject, event)}
+      onEmojiSelect={(emojiObject, event) => onEmojiSelect(emojiObject, event)}
-      enableFrequentEmojiSort={FREQUENT_SORT_ON_CLICK}
-      native
-      title=""
       emojiSize={24}
-      emojiTooltip
       i18n={i18n}
-      showPreview={showPreview}
+      previewPosition="none"
-      showSkinTones={showSkinTones}
+      skinTonePosition="none"
-      useButton
+      theme="light"
-      emojisToShowFilter={(emoji) => !emojisToExclude.includes(emoji.unified)}
+      dynamicWidth
+      exceptEmojis={emojisToExclude}
     />
   );
 };
 
 EmojiPicker.propTypes = propTypes;
-EmojiPicker.defaultProps = defaultProps;
 
 export default injectIntl(EmojiPicker);

bigbluebutton-html5/imports/ui/components/emoji-picker/reactions-picker/component.jsx

@@ -1,71 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl } from 'react-intl';
+import data from '@emoji-mart/data';
-import { Picker } from 'emoji-mart';
+import { init } from 'emoji-mart';
-import 'emoji-mart/css/emoji-mart.css';
 
 const propTypes = {
-  intl: PropTypes.shape({
-    formatMessage: PropTypes.func.isRequired,
-  }).isRequired,
   onEmojiSelect: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
 };
 
-const emojisToExclude = [
+const emojisToInclude = [
   // reactions
-  '1F605', '1F61C', '1F604', '1F609', '1F602', '1F92A',
+  '😄', '😅', '😂', '😉', '😍', '😜',
-  '1F634', '1F62C', '1F633', '1F60D', '02665', '1F499',
+  '🤪', '🤨', '😒', '🙄', '😬', '😔',
-  '1F615', '1F61F', '1F928', '1F644', '1F612', '1F621',
+  '😴', '😕', '😟', '😯', '😳', '😰',
-  '1F614', '1F625', '1F62D', '1F62F', '1F631', '1F630',
+  '😥', '😭', '😱', '😡', '💀', '💩',
-  '1F44F', '1F44C', '1F44D', '1F44E', '1F4AA', '1F44A',
+  '🤡', '👌', '👍', '👎', '👊', '👏',
-  '1F64C', '1F64F', '1F440', '1F4A9', '1F921', '1F480',
+  '🙌', '🙏', '💪', '👀', '❤️', '💙',
 ];
 
-const inlineStyle = {
-  margin: '.5rem 0',
-  alignSelf: 'center',
-  width: '100%',
-};
-
 const ReactionsPicker = (props) => {
   const {
-    intl,
     onEmojiSelect,
-    style,
   } = props;
 
-  const i18n = {
+  init({ data });
-    notfound: intl.formatMessage({ id: 'app.emojiPicker.notFound' }),
-    clear: intl.formatMessage({ id: 'app.emojiPicker.clear' }),
-    skintext: intl.formatMessage({ id: 'app.emojiPicker.skintext' }),
-    categories: {
-      reactions: intl.formatMessage({ id: 'app.emojiPicker.categories.reactions' }),
-    },
-    categorieslabel: intl.formatMessage({ id: 'app.emojiPicker.categories.label' }),
-  };
 
   return (
-    <Picker
+    <>
-      onSelect={(emojiObject, event) => onEmojiSelect(emojiObject, event)}
+      {emojisToInclude.map((native) => (
-      native
+        <em-emoji
-      emoji=""
+          key={native}
-      title=""
+          native={native}
-      emojiSize={30}
+          size="30"
-      emojiTooltip
+          onClick={() => onEmojiSelect({ native })}
-      style={Object.assign(inlineStyle, style)}
-      i18n={i18n}
-      showPreview={false}
-      showSkinTones={false}
-      emojisToShowFilter={(emoji) => emojisToExclude.includes(emoji.unified)}
         />
-
+      ))}
+    </>
   );
 };
 
 ReactionsPicker.propTypes = propTypes;
 ReactionsPicker.defaultProps = defaultProps;
 
-export default injectIntl(ReactionsPicker);
+export default ReactionsPicker;

bigbluebutton-html5/package.json

@@ -31,6 +31,8 @@
   "dependencies": {
     "@babel/runtime": "^7.17.9",
     "@browser-bunyan/server-stream": "^1.8.0",
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
     "@emotion/react": "^11.10.8",
     "@emotion/styled": "^11.10.8",
     "@jitsi/sdp-interop": "0.1.14",
@@ -45,7 +47,7 @@
     "browser-bunyan": "^1.8.0",
     "classnames": "^2.2.6",
     "darkreader": "^4.9.46",
-    "emoji-mart": "^3.0.1",
+    "emoji-mart": "^5.5.2",
     "eventemitter2": "~6.4.6",
     "fastdom": "^1.0.10",
     "fibers": "^4.0.2",

bigbluebutton-html5/private/config/settings.yml

@@ -597,8 +597,7 @@ public:
     autoConvertEmoji: true
     emojiPicker:
       enable: false
-      frequentEmojiSortOnClick: false
+    # e.g.: disableEmojis: ['grin','laughing']
-    # e.g.: disableEmojis: ['1F595','1F922']
     disableEmojis: []
   userReaction:
     enabled: true