feat(raised-hand) Change raisedHand to a timestamp instead of boole… (#10167)

- this was needed for sorting the raised hand participants in participants pane in
the order they raised their hand also for participants joining late

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

@@ -10,7 +10,7 @@ import {
 } from '../../../analytics';
 import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n';
-import { getLocalParticipant, participantUpdated } from '../../../base/participants';
+import { getLocalParticipant, hasRaisedHand, raiseHand } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 import { dockToolbox } from '../../../toolbox/actions.web';
 import { addReactionToBuffer } from '../../actions.any';
@@ -123,22 +123,9 @@ class ReactionsMenu extends Component<Props> {
      * @returns {void}
      */
     _doToggleRaiseHand() {
-        const { _localParticipantID, _raisedHand } = this.props;
-        const newRaisedStatus = !_raisedHand;
+        const { _raisedHand } = this.props;
 
-        this.props.dispatch(participantUpdated({
-            // XXX Only the local participant is allowed to update without
-            // stating the JitsiConference instance (i.e. participant property
-            // `conference` for a remote participant) because the local
-            // participant is uniquely identified by the very fact that there is
-            // only one local participant.
-
-            id: _localParticipantID,
-            local: true,
-            raisedHand: newRaisedStatus
-        }));
-
-        APP.API.notifyRaiseHandUpdated(_localParticipantID, newRaisedStatus);
+        this.props.dispatch(raiseHand(!_raisedHand));
     }
 
     /**
@@ -221,7 +208,7 @@ function mapStateToProps(state) {
     return {
         _localParticipantID: localParticipant.id,
         _isMobile: isMobileBrowser(),
-        _raisedHand: localParticipant.raisedHand
+        _raisedHand: hasRaisedHand(localParticipant)
     };
 }
 

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

@@ -5,7 +5,7 @@ import React from 'react';
 import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n';
 import { IconArrowUp, IconRaisedHand } from '../../../base/icons';
-import { getLocalParticipant } from '../../../base/participants';
+import { getLocalParticipant, hasRaisedHand } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 import { ToolboxButtonWithIcon } from '../../../base/toolbox/components';
 import ToolbarButton from '../../../toolbox/components/web/ToolbarButton';
@@ -138,7 +138,7 @@ function mapStateToProps(state) {
         isOpen: getReactionsMenuVisibility(state),
         isMobile: isMobileBrowser(),
         reactionsQueue: getReactionsQueue(state),
-        raisedHand: localParticipant?.raisedHand
+        raisedHand: hasRaisedHand(localParticipant)
     };
 }