feat(reactions) Added Reactions (#9465)

* Created desktop reactions menu

Moved raise hand functionality to reactions menu

* Added reactions to chat

* Added animations

* Added reactions to the web mobile version

Redesigned the overflow menu. Added the reactions menu and reactions animations

* Make toolbar visible on animation start

* Bug fix

* Cleanup

* Fixed overflow menu desktop

* Revert mobile menu changes

* Removed unused CSS

* Fixed iOS safari issue

* Fixed overflow issue on mobile

* Added keyboard shortcuts for reactions

* Disabled double tap zoom on reaction buttons

* Refactored actions

* Updated option symbol for keyboard shortcuts

* Actions refactor

* Refactor

* Fixed linting errors

* Updated BottomSheet

* Added reactions on native

* Code cleanup

* Code review refactor

* Color fix

* Hide reactions on one participant

* Removed console log

* Lang fix

* Update schortcuts

react/features/toolbox/components/web/OverflowMenuButton.js

@@ -7,6 +7,9 @@ import { createToolbarEvent, sendAnalytics } from '../../../analytics';
 import { translate } from '../../../base/i18n';
 import { IconHorizontalPoints } from '../../../base/icons';
 import { connect } from '../../../base/redux';
+import { ReactionEmoji, ReactionsMenu } from '../../../reactions/components';
+import { type ReactionEmojiProps } from '../../../reactions/constants';
+import { getReactionsQueue } from '../../../reactions/functions.any';
 
 import Drawer from './Drawer';
 import DrawerPortal from './DrawerPortal';
@@ -45,7 +48,17 @@ type Props = {
     /**
      * Invoked to obtain translated strings.
      */
-    t: Function
+    t: Function,
+
+    /**
+     * The array of reactions to be displayed.
+     */
+    reactionsQueue: Array<ReactionEmojiProps>,
+
+    /**
+     * Whether or not to display the reactions in the mobile menu.
+     */
+    showMobileReactions: boolean
 };
 
 /**
@@ -93,7 +106,7 @@ class OverflowMenuButton extends Component<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { children, isOpen, overflowDrawer } = this.props;
+        const { children, isOpen, overflowDrawer, reactionsQueue, showMobileReactions } = this.props;
 
         return (
             <div className = 'toolbox-button-wth-dialog'>
@@ -103,11 +116,18 @@ class OverflowMenuButton extends Component<Props> {
                             {this._renderToolbarButton()}
                             <DrawerPortal>
                                 <Drawer
-                                    canExpand = { true }
                                     isOpen = { isOpen }
                                     onClose = { this._onCloseDialog }>
                                     {children}
+                                    {showMobileReactions && <ReactionsMenu overflowMenu = { true } />}
                                 </Drawer>
+                                {showMobileReactions && <div className = 'reactions-animations-container'>
+                                    {reactionsQueue.map(({ reaction, uid }, index) => (<ReactionEmoji
+                                        index = { index }
+                                        key = { uid }
+                                        reaction = { reaction }
+                                        uid = { uid } />))}
+                                </div>}
                             </DrawerPortal>
                         </>
                     ) : (
@@ -188,7 +208,8 @@ function mapStateToProps(state) {
     const { overflowDrawer } = state['features/toolbox'];
 
     return {
-        overflowDrawer
+        overflowDrawer,
+        reactionsQueue: getReactionsQueue(state)
     };
 }