feat(reactions): port new reactions and fix emojiRain

bigbluebutton-html5/imports/ui/components/actions-bar/reactions-button/component.jsx

@@ -4,11 +4,14 @@ import PropTypes from 'prop-types';
 import BBBMenu from '/imports/ui/components/common/menu/component';
 import UserReactionService from '/imports/ui/components/user-reaction/service';
 import UserListService from '/imports/ui/components/user-list/service';
-import { Emoji } from 'emoji-mart';
 import { convertRemToPixels } from '/imports/utils/dom-utils';
+import data from '@emoji-mart/data';
+import { init } from 'emoji-mart';
 
 import Styled from './styles';
 
+const REACTIONS = Meteor.settings.public.userReaction.reactions;
+
 const ReactionsButton = (props) => {
   const {
     intl,
@@ -20,6 +23,9 @@ const ReactionsButton = (props) => {
     autoCloseReactionsBar,
   } = props;
 
+  // initialize emoji-mart data, need for the new version
+  init({ data });
+
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
 
   const intlMessages = defineMessages({
@@ -74,73 +80,50 @@ const ReactionsButton = (props) => {
   };
 
   const emojiProps = {
-    native: true,
     size: convertRemToPixels(1.5),
     padding: '4px',
   };
 
-  const reactions = [
-    {
-      id: 'smiley',
-      native: '😃',
-    },
-    {
-      id: 'neutral_face',
-      native: '😐',
-    },
-    {
-      id: 'slightly_frowning_face',
-      native: '🙁',
-    },
-    {
-      id: '+1',
-      native: '👍',
-    },
-    {
-      id: '-1',
-      native: '👎',
-    },
-    {
-      id: 'clap',
-      native: '👏',
-    },
-  ];
+  const handReaction = {
+    id: 'hand',
+    native: '✋',
+  };
 
   let actions = [];
 
-  reactions.forEach(({ id, native }) => {
+  REACTIONS.forEach(({ id, native }) => {
     actions.push({
-      label: <Styled.ButtonWrapper active={currentUserReaction === native}><Emoji key={id} emoji={{ id }} {...emojiProps} /></Styled.ButtonWrapper>,
+      label: <Styled.ButtonWrapper active={currentUserReaction === native}><em-emoji key={native} native={native} {...emojiProps} /></Styled.ButtonWrapper>,
       key: id,
       onClick: () => handleReactionSelect(native),
       customStyles: actionCustomStyles,
     });
   });
 
   actions.push({
-    label: <Styled.RaiseHandButtonWrapper isMobile={isMobile} data-test={raiseHand ? 'lowerHandBtn' : 'raiseHandBtn'} active={raiseHand}><Emoji key="hand" emoji={{ id: 'hand' }} {...emojiProps} />{RaiseHandButtonLabel()}</Styled.RaiseHandButtonWrapper>,
+    label: <Styled.RaiseHandButtonWrapper isMobile={isMobile} data-test={raiseHand ? 'lowerHandBtn' : 'raiseHandBtn'} active={raiseHand}><em-emoji key={handReaction.id} native={handReaction.native} emoji={{ id: handReaction.id }} {...emojiProps} />{RaiseHandButtonLabel()}</Styled.RaiseHandButtonWrapper>,
     key: 'hand',
     onClick: () => handleRaiseHandButtonClick(),
     customStyles: {...actionCustomStyles, width: 'auto'},
   });
 
   const icon = !raiseHand && currentUserReaction === 'none' ? 'hand' : null;
-  const currentUserReactionEmoji = reactions.find(({ native }) => native === currentUserReaction);
+  const currentUserReactionEmoji = REACTIONS.find(({ native }) => native === currentUserReaction);
 
   let customIcon = null;
 
   if (raiseHand) {
-    customIcon = <Emoji key="hand" emoji={{ id: 'hand' }} {...emojiProps} />;
+    customIcon = <em-emoji key={handReaction.id} native={handReaction.native} emoji={handReaction} {...emojiProps} />;
   } else {
     if (!icon) {
-      customIcon = <Emoji key={currentUserReactionEmoji?.id} emoji={{ id: currentUserReactionEmoji?.id }} {...emojiProps} />;
+      customIcon = <em-emoji key={currentUserReactionEmoji?.id} native={currentUserReactionEmoji?.native} emoji={{ id: currentUserReactionEmoji?.id }} {...emojiProps} />;
     }
   }
 
   return (
     <BBBMenu
       trigger={(
-        <Styled.ReactionsDropdown>
+        <Styled.ReactionsDropdown id="interactionsButton">
           <Styled.RaiseHandButton
             data-test="reactionsButton"
             icon={icon}

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;
+  margin: 0.2em 0.2em 0.2em 0.2em;
+  text-align: center;
+  max-height: 270px;
+  width: 270px;
+  em-emoji {
+    cursor: pointer;
   }
 `;
 

bigbluebutton-html5/imports/ui/components/app/component.jsx

@@ -29,6 +29,7 @@ import WebcamContainer from '../webcam/container';
 import PresentationAreaContainer from '../presentation/presentation-area/container';
 import ScreenshareContainer from '../screenshare/container';
 import ExternalVideoContainer from '../external-video-player/container';
+import EmojiRainContainer from '../emoji-rain/container';
 import Styled from './styles';
 import { DEVICE_TYPE, ACTIONS, SMALL_VIEWPORT_BREAKPOINT, PANELS } from '../layout/enums';
 import {
@@ -660,6 +661,7 @@ class App extends Component {
           <PadsSessionsContainer />
           <WakeLockContainer />
           {this.renderActionsBar()}
+          <EmojiRainContainer />
           {customStyleUrl ? <link rel="stylesheet" type="text/css" href={customStyleUrl} /> : null}
           {customStyle ? <link rel="stylesheet" type="text/css" href={`data:text/css;charset=UTF-8,${encodeURIComponent(customStyle)}`} /> : null}
           {isRandomUserSelectModalOpen ? <RandomUserSelectContainer

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

@@ -251,7 +251,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;
 
@@ -291,8 +291,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 {
-    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)``;

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 (
     <Picker
-      emoji=""
-      onSelect={(emojiObject, event) => 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);

bigbluebutton-html5/imports/ui/components/emoji-picker/reactions-picker/styles.js

@@ -0,0 +1,35 @@
+import styled, { css } from 'styled-components';
+
+const EmojiWrapper = styled.span`
+  padding-top: 0.9em;
+  padding-bottom: 0.1em;
+  ${({ selected }) => !selected && css`
+    :hover {
+      border-radius:100%;
+      outline-color: transparent;
+      outline-style:solid;
+      box-shadow: 0 0 0 0.25em #eee;
+      background-color: #eee;
+      opacity: 0.75;
+    }
+  `}
+  ${({ selected }) => selected && css`
+    em-emoji {
+      cursor: not-allowed;
+    }
+  `}
+  ${({ selected, emoji }) => selected && selected !== emoji && css`
+    opacity: 0.75;
+  `}
+  ${({ selected, emoji }) => selected && selected === emoji && css`
+    border-radius:100%;
+    outline-color: transparent;
+    outline-style:solid;
+    box-shadow: 0 0 0 0.25em #eee;
+    background-color: #eee;
+  `}
+`;
+
+export default {
+  EmojiWrapper,
+};