feat(reaction-sounds) Added sounds for reactions (#9775)

* Added sounds for reactions

* Updated reactions list

* Added reactions to sound settings

* Added support for multiple sounds

* Added feature flag for sounds

* Updated sound settings

Moved reactions toggle at the top of the list

* Added disable reaction sounds notification

* Added reaction button zoom for burst intensity

* Fixed raise hand sound

* Fixed register sounds for reactions

* Changed boo emoji

* Updated sounds

* Fixed lint errors

* Fixed reaction sounds file names

* Fix raise hand sound

Play sound only on raise hand not on lower hand

* Fixed types for sound constants

* Fixed type for raise hand sound constant

react/features/reactions/components/web/ReactionsMenu.js

@@ -11,10 +11,11 @@ import {
 import { translate } from '../../../base/i18n';
 import { getLocalParticipant, getParticipantCount, participantUpdated } from '../../../base/participants';
 import { connect } from '../../../base/redux';
+import { playSound } from '../../../base/sounds';
 import { dockToolbox } from '../../../toolbox/actions.web';
 import { addReactionToBuffer } from '../../actions.any';
 import { toggleReactionsMenuVisibility } from '../../actions.web';
-import { REACTIONS } from '../../constants';
+import { RAISE_HAND_SOUND_ID, REACTIONS } from '../../constants';
 
 import ReactionButton from './ReactionButton';
 
@@ -53,7 +54,12 @@ type Props = {
     /**
      * Whether or not it's displayed in the overflow menu.
      */
-    overflowMenu: boolean
+    overflowMenu: boolean,
+
+    /**
+     * Whether or not reaction sounds are enabled.
+     */
+    _reactionSounds: boolean
 };
 
 declare var APP: Object;
@@ -106,11 +112,16 @@ class ReactionsMenu extends Component<Props> {
      * @returns {void}
      */
     _onToolbarToggleRaiseHand() {
+        const { dispatch, _raisedHand, _reactionSounds } = this.props;
+
         sendAnalytics(createToolbarEvent(
             'raise.hand',
-            { enable: !this.props._raisedHand }));
+            { enable: !_raisedHand }));
         this._doToggleRaiseHand();
-        this.props.dispatch(toggleReactionsMenuVisibility());
+        dispatch(toggleReactionsMenuVisibility());
+        if (_reactionSounds && _raisedHand) {
+            dispatch(playSound(RAISE_HAND_SOUND_ID));
+        }
     }
 
     /**
@@ -212,11 +223,13 @@ class ReactionsMenu extends Component<Props> {
  */
 function mapStateToProps(state) {
     const localParticipant = getLocalParticipant(state);
+    const { soundsReactions } = state['features/base/settings'];
 
     return {
         _localParticipantID: localParticipant.id,
         _raisedHand: localParticipant.raisedHand,
-        _participantCount: getParticipantCount(state)
+        _participantCount: getParticipantCount(state),
+        _reactionSounds: soundsReactions
     };
 }