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 03:12:42 +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/ReactionMenuDialog.js
+++ b/react/features/reactions/components/native/ReactionMenuDialog.js
@@ -0,0 +1,143 @@
+// @flow
+
+import React, { PureComponent } from 'react';
+import { SafeAreaView, TouchableWithoutFeedback, View } from 'react-native';
+
+import { ColorSchemeRegistry } from '../../../base/color-scheme';
+import { hideDialog, isDialogOpen } from '../../../base/dialog';
+import { getParticipantCount } from '../../../base/participants';
+import { connect } from '../../../base/redux';
+import type { StyleType } from '../../../base/styles';
+
+import ReactionMenu from './ReactionMenu';
+
+/**
+ * The type of the React {@code Component} props of {@link ReactionMenuDialog}.
+ */
+type Props = {
+
+    /**
+     * The color-schemed stylesheet of the feature.
+     */
+    _styles: StyleType,
+
+    /**
+     * True if the dialog is currently visible, false otherwise.
+     */
+    _isOpen: boolean,
+
+    /**
+     * The width of the screen.
+     */
+    _width: number,
+
+    /**
+    * The height of the screen.
+    */
+    _height: number,
+
+    /**
+     * Number of conference participants.
+     */
+    _participantCount: number,
+
+    /**
+     * Used for hiding the dialog when the selection was completed.
+     */
+    dispatch: Function
+};
+
+/**
+ * The exported React {@code Component}. We need it to execute
+ * {@link hideDialog}.
+ *
+ * XXX It does not break our coding style rule to not utilize globals for state,
+ * because it is merely another name for {@code export}'s {@code default}.
+ */
+let ReactionMenu_; // eslint-disable-line prefer-const
+
+/**
+ * Implements a React {@code Component} with some extra actions in addition to
+ * those in the toolbar.
+ */
+class ReactionMenuDialog extends PureComponent<Props> {
+    /**
+     * Initializes a new {@code ReactionMenuDialog} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        // Bind event handlers so they are only bound once per instance.
+        this._onCancel = this._onCancel.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const { _styles, _width, _height, _participantCount } = this.props;
+
+        return (
+            <SafeAreaView style = { _styles }>
+                <TouchableWithoutFeedback
+                    onPress = { this._onCancel }>
+                    <View style = { _styles }>
+                        <View
+                            style = {{
+                                left: (_width - 360) / 2,
+                                top: _height - (_participantCount > 1 ? 144 : 80) - 80
+                            }}>
+                            <ReactionMenu
+                                onCancel = { this._onCancel }
+                                overflowMenu = { false } />
+                        </View>
+                    </View>
+                </TouchableWithoutFeedback>
+            </SafeAreaView>
+        );
+    }
+
+    _onCancel: () => boolean;
+
+    /**
+     * Hides this {@code ReactionMenuDialog}.
+     *
+     * @private
+     * @returns {boolean}
+     */
+    _onCancel() {
+        if (this.props._isOpen) {
+            this.props.dispatch(hideDialog(ReactionMenu_));
+
+            return true;
+        }
+
+        return false;
+    }
+}
+
+/**
+ * Function that maps parts of Redux state tree into component props.
+ *
+ * @param {Object} state - Redux state.
+ * @private
+ * @returns {Props}
+ */
+function _mapStateToProps(state) {
+    return {
+        _isOpen: isDialogOpen(state, ReactionMenu_),
+        _styles: ColorSchemeRegistry.get(state, 'Toolbox').reactionDialog,
+        _width: state['features/base/responsive-ui'].clientWidth,
+        _height: state['features/base/responsive-ui'].clientHeight,
+        _participantCount: getParticipantCount(state)
+    };
+}
+
+ReactionMenu_ = connect(_mapStateToProps)(ReactionMenuDialog);
+
+export default ReactionMenu_;