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
2026-05-14 12:27:51 +00:00 · 2021-07-13 09:50:08 +03:00
parent 8db3a341b3
commit 601ee219e7
50 changed files with 2233 additions and 363 deletions
--- a/react/features/reactions/components/native/ReactionsMenuButton.js
+++ b/react/features/reactions/components/native/ReactionsMenuButton.js
@@ -0,0 +1,90 @@
+// @flow
+
+import { type Dispatch } from 'redux';
+
+import { isDialogOpen, openDialog } from '../../../base/dialog';
+import { RAISE_HAND_ENABLED, getFeatureFlag } from '../../../base/flags';
+import { translate } from '../../../base/i18n';
+import { IconRaisedHand } from '../../../base/icons';
+import {
+    getLocalParticipant
+} from '../../../base/participants';
+import { connect } from '../../../base/redux';
+import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
+
+import ReactionMenuDialog from './ReactionMenuDialog';
+
+/**
+ * The type of the React {@code Component} props of {@link ReactionsMenuButton}.
+ */
+type Props = AbstractButtonProps & {
+
+    /**
+     * Whether the participant raised their hand or not.
+     */
+    _raisedHand: boolean,
+
+    /**
+     * Whether or not the reactions menu is open.
+     */
+    _reactionsOpen: boolean,
+
+    /**
+     * The redux {@code dispatch} function.
+     */
+    dispatch: Dispatch<any>
+};
+
+/**
+ * An implementation of a button to raise or lower hand.
+ */
+class ReactionsMenuButton extends AbstractButton<Props, *> {
+    accessibilityLabel = 'toolbar.accessibilityLabel.reactionsMenu';
+    icon = IconRaisedHand;
+    label = 'toolbar.openReactionsMenu';
+    toggledLabel = 'toolbar.closeReactionsMenu';
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @override
+     * @protected
+     * @returns {void}
+     */
+    _handleClick() {
+        this.props.dispatch(openDialog(ReactionMenuDialog));
+    }
+
+    /**
+     * Indicates whether this button is in toggled state or not.
+     *
+     * @override
+     * @protected
+     * @returns {boolean}
+     */
+    _isToggled() {
+        return this.props._raisedHand || this.props._reactionsOpen;
+    }
+}
+
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Object} ownProps - The properties explicitly passed to the component instance.
+ * @private
+ * @returns {Props}
+ */
+function _mapStateToProps(state, ownProps): Object {
+    const _localParticipant = getLocalParticipant(state);
+    const enabled = getFeatureFlag(state, RAISE_HAND_ENABLED, true);
+    const { visible = enabled } = ownProps;
+
+    return {
+        _raisedHand: _localParticipant.raisedHand,
+        _reactionsOpen: isDialogOpen(state, ReactionMenuDialog),
+        visible
+    };
+}
+
+export default translate(connect(_mapStateToProps)(ReactionsMenuButton));