From ac3c7790d4781ab5af77d5150c21915ceadd1be4 Mon Sep 17 00:00:00 2001 From: AtilaU19 Date: Mon, 16 Oct 2023 14:17:11 -0300 Subject: [PATCH] refactor(emoji-picker): update emoji-mart to latest version --- .../ui/components/actions-bar/styles.js | 29 ++------ .../chat/message-form/component.jsx | 4 +- .../ui/components/chat/message-form/styles.js | 18 ++--- .../ui/components/emoji-picker/component.jsx | 34 +++------- .../reactions-picker/component.jsx | 66 ++++++------------- bigbluebutton-html5/package.json | 4 +- .../private/config/settings.yml | 3 +- 7 files changed, 46 insertions(+), 112 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/styles.js b/bigbluebutton-html5/imports/ui/components/actions-bar/styles.js index 5691c23702..30d42e0c31 100644 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/styles.js +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/styles.js @@ -101,28 +101,13 @@ const ReactionsDropdown = styled.div` `; const Wrapper = styled.div` - .emoji-mart-bar { - display: none; - } - .emoji-mart-search { - display: none; - } - .emoji-mart-category[aria-label="Frequently Used"] { - 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; - } + overflow: hidden; + padding: 5px; + text-align: center; + max-height: 270px; + width: 270px; + em-emoji { + cursor: pointer; } `; diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx index 178d10de2f..21da509dae 100755 --- a/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx +++ b/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 { this.handleEmojiSelect(emojiObject)} - showPreview={false} - showSkinTones={false} /> ); diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.js b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.js index 343552b51c..d8d91d50b9 100644 --- a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.js +++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.js @@ -109,21 +109,11 @@ const EmojiButton = styled(Button)` `; const EmojiPickerWrapper = styled.div` - .emoji-mart { - max-width: 100% !important; - } - .emoji-mart-anchor { - cursor: pointer; - } - .emoji-mart-emoji { - cursor: pointer !important; - } - .emoji-mart-category-list { - span { - cursor: pointer !important; - display: inline-block !important; - } + em-emoji-picker { + width: 100%; + max-height: 300px; } + padding-bottom: 5px; `; const EmojiPicker = styled(EmojiPickerComponent)``; diff --git a/bigbluebutton-html5/imports/ui/components/emoji-picker/component.jsx b/bigbluebutton-html5/imports/ui/components/emoji-picker/component.jsx index 2c630fbda2..0b3b015db4 100644 --- a/bigbluebutton-html5/imports/ui/components/emoji-picker/component.jsx +++ b/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 'emoji-mart/css/emoji-mart.css'; +import data from '@emoji-mart/data'; +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 ( onEmojiSelect(emojiObject, event)} - enableFrequentEmojiSort={FREQUENT_SORT_ON_CLICK} - native - title="" + data={data} + onEmojiSelect={(emojiObject, event) => onEmojiSelect(emojiObject, event)} emojiSize={24} - emojiTooltip i18n={i18n} - showPreview={showPreview} - showSkinTones={showSkinTones} - useButton - emojisToShowFilter={(emoji) => !emojisToExclude.includes(emoji.unified)} + previewPosition="none" + skinTonePosition="none" + theme="light" + dynamicWidth + exceptEmojis={emojisToExclude} /> ); }; EmojiPicker.propTypes = propTypes; -EmojiPicker.defaultProps = defaultProps; export default injectIntl(EmojiPicker); diff --git a/bigbluebutton-html5/imports/ui/components/emoji-picker/reactions-picker/component.jsx b/bigbluebutton-html5/imports/ui/components/emoji-picker/reactions-picker/component.jsx index 01731e7ee4..dfa6ab616d 100644 --- a/bigbluebutton-html5/imports/ui/components/emoji-picker/reactions-picker/component.jsx +++ b/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 { Picker } from 'emoji-mart'; -import 'emoji-mart/css/emoji-mart.css'; +import data from '@emoji-mart/data'; +import { init } from 'emoji-mart'; 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 = { - 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' }), - }; + init({ data }); return ( - onEmojiSelect(emojiObject, event)} - native - emoji="" - title="" - emojiSize={30} - emojiTooltip - style={Object.assign(inlineStyle, style)} - i18n={i18n} - showPreview={false} - showSkinTones={false} - emojisToShowFilter={(emoji) => emojisToExclude.includes(emoji.unified)} - /> - + <> + {emojisToInclude.map((native) => ( + onEmojiSelect({ native })} + /> + ))} + ); }; ReactionsPicker.propTypes = propTypes; ReactionsPicker.defaultProps = defaultProps; -export default injectIntl(ReactionsPicker); +export default ReactionsPicker; diff --git a/bigbluebutton-html5/package.json b/bigbluebutton-html5/package.json index fe779c1fa5..c188f1eaaf 100644 --- a/bigbluebutton-html5/package.json +++ b/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", diff --git a/bigbluebutton-html5/private/config/settings.yml b/bigbluebutton-html5/private/config/settings.yml index 1f2fd1bae4..983fbad872 100755 --- a/bigbluebutton-html5/private/config/settings.yml +++ b/bigbluebutton-html5/private/config/settings.yml @@ -597,8 +597,7 @@ public: autoConvertEmoji: true emojiPicker: enable: false - frequentEmojiSortOnClick: false - # e.g.: disableEmojis: ['1F595','1F922'] + # e.g.: disableEmojis: ['grin','laughing'] disableEmojis: [] userReaction: enabled: true