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/ReactionButton.js

@@ -28,12 +28,28 @@ type Props = AbstractToolbarButtonProps & {
     label?: string
 };
 
+/**
+ * The type of the React {@code Component} state of {@link ReactionButton}.
+ */
+type State = {
+
+    /**
+     * Used to determine zoom level on reaction burst.
+     */
+    increaseLevel: number,
+
+    /**
+     * Timeout ID to reset reaction burst.
+     */
+    increaseTimeout: TimeoutID | null
+}
+
 /**
  * Represents a button in the reactions menu.
  *
  * @extends AbstractToolbarButton
  */
-class ReactionButton extends AbstractToolbarButton<Props> {
+class ReactionButton extends AbstractToolbarButton<Props, State> {
     /**
      * Default values for {@code ReactionButton} component's properties.
      *
@@ -52,10 +68,18 @@ class ReactionButton extends AbstractToolbarButton<Props> {
         super(props);
 
         this._onKeyDown = this._onKeyDown.bind(this);
+        this._onClickHandler = this._onClickHandler.bind(this);
+
+        this.state = {
+            increaseLevel: 0,
+            increaseTimeout: null
+        };
     }
 
     _onKeyDown: (Object) => void;
 
+    _onClickHandler: () => void;
+
     /**
      * Handles 'Enter' key on the button to trigger onClick for accessibility.
      * We should be handling Space onKeyUp but it conflicts with PTT.
@@ -78,6 +102,28 @@ class ReactionButton extends AbstractToolbarButton<Props> {
         }
     }
 
+    /**
+     * Handles reaction button click.
+     *
+     * @returns {void}
+     */
+    _onClickHandler() {
+        this.props.onClick();
+        clearTimeout(this.state.increaseTimeout);
+        const timeout = setTimeout(() => {
+            this.setState({
+                increaseLevel: 0
+            });
+        }, 500);
+
+        this.setState(state => {
+            return {
+                increaseLevel: state.increaseLevel + 1,
+                increaseTimeout: timeout
+            };
+        });
+    }
+
     /**
      * Renders the button of this {@code ReactionButton}.
      *
@@ -92,7 +138,7 @@ class ReactionButton extends AbstractToolbarButton<Props> {
                 aria-label = { this.props.accessibilityLabel }
                 aria-pressed = { this.props.toggled }
                 className = 'toolbox-button'
-                onClick = { this.props.onClick }
+                onClick = { this._onClickHandler }
                 onKeyDown = { this._onKeyDown }
                 role = 'button'
                 tabIndex = { 0 }>
@@ -113,10 +159,13 @@ class ReactionButton extends AbstractToolbarButton<Props> {
      * @inheritdoc
      */
     _renderIcon() {
+        const { toggled, icon, label } = this.props;
+        const { increaseLevel } = this.state;
+
         return (
-            <div className = { `toolbox-icon ${this.props.toggled ? 'toggled' : ''}` }>
-                <span className = 'emoji'>{this.props.icon}</span>
-                {this.props.label && <span className = 'text'>{this.props.label}</span>}
+            <div className = { `toolbox-icon ${toggled ? 'toggled' : ''}` }>
+                <span className = { `emoji increase-${increaseLevel > 12 ? 12 : increaseLevel}` }>{icon}</span>
+                {label && <span className = 'text'>{label}</span>}
             </div>
         );
     }