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