import { withStyles } from '@material-ui/styles'; import clsx from 'clsx'; import React, { Component } from 'react'; import { bindActionCreators } from 'redux'; import { createReactionMenuEvent, createToolbarEvent, sendAnalytics // @ts-ignore } from '../../../analytics'; import { IStore } from '../../../app/types'; // @ts-ignore import { isMobileBrowser } from '../../../base/environment/utils'; // @ts-ignore import { translate } from '../../../base/i18n'; // @ts-ignore import { getLocalParticipant, hasRaisedHand, raiseHand } from '../../../base/participants'; // @ts-ignore import { connect } from '../../../base/redux'; // @ts-ignore import { GifsMenu, GifsMenuButton } from '../../../gifs/components'; // @ts-ignore import { isGifEnabled, isGifsMenuOpen } from '../../../gifs/functions'; // @ts-ignore import { dockToolbox } from '../../../toolbox/actions.web'; import { addReactionToBuffer } from '../../actions.any'; import { toggleReactionsMenuVisibility } from '../../actions.web'; import { REACTIONS, REACTIONS_MENU_HEIGHT } from '../../constants'; // @ts-ignore import ReactionButton from './ReactionButton'; interface Classes { overflow: string } type Props = { /** * Docks the toolbox. */ _dockToolbox: Function, /** * Whether or not the GIF feature is enabled. */ _isGifEnabled: boolean, /** * Whether or not the GIF menu is visible. */ _isGifMenuVisible: boolean, /** * Whether or not it's a mobile browser. */ _isMobile: boolean, /** * The ID of the local participant. */ _localParticipantID: String, /** * Whether or not the local participant's hand is raised. */ _raisedHand: boolean, /** * An object containing the CSS classes. */ classes: Classes, /** * The Redux Dispatch function. */ dispatch: Function, /** * Whether or not it's displayed in the overflow menu. */ overflowMenu: boolean, /** * Used for translation. */ t: Function }; declare var APP: Object; const styles = (theme: any) => { return { overflow: { width: 'auto', paddingBottom: 'max(env(safe-area-inset-bottom, 0), 16px)', backgroundColor: theme.palette.ui01, boxShadow: 'none', borderRadius: 0, position: 'relative', boxSizing: 'border-box', height: `${REACTIONS_MENU_HEIGHT}px` } }; }; /** * Implements the reactions menu. * * @returns {ReactElement} */ class ReactionsMenu extends Component { /** * Initializes a new {@code ReactionsMenu} instance. * * @param {Props} props - The read-only React {@code Component} props with * which the new instance is to be initialized. */ constructor(props: Props) { super(props); this._onToolbarToggleRaiseHand = this._onToolbarToggleRaiseHand.bind(this); this._getReactionButtons = this._getReactionButtons.bind(this); } /** * Implements React Component's componentDidMount. * * @inheritdoc */ componentDidMount() { this.props._dockToolbox(true); } /** * Implements React Component's componentWillUnmount. * * @inheritdoc */ componentWillUnmount() { this.props._dockToolbox(false); } /** * Creates an analytics toolbar event and dispatches an action for toggling * raise hand. * * @returns {void} */ _onToolbarToggleRaiseHand() { const { dispatch, _raisedHand } = this.props; sendAnalytics(createToolbarEvent( 'raise.hand', { enable: !_raisedHand })); this._doToggleRaiseHand(); dispatch(toggleReactionsMenuVisibility()); } /** * Dispatches an action to toggle the local participant's raised hand state. * * @private * @returns {void} */ _doToggleRaiseHand() { const { _raisedHand } = this.props; this.props.dispatch(raiseHand(!_raisedHand)); } /** * Returns the emoji reaction buttons. * * @returns {Array} */ _getReactionButtons() { const { t, dispatch } = this.props; let modifierKey = 'Alt'; if (window.navigator?.platform) { if (window.navigator.platform.indexOf('Mac') !== -1) { modifierKey = '⌥'; } } return Object.keys(REACTIONS).map(key => { /** * Sends reaction message. * * @returns {void} */ function doSendReaction() { dispatch(addReactionToBuffer(key)); sendAnalytics(createReactionMenuEvent(key)); } // @ts-ignore return (); }); } /** * Implements React's {@link Component#render}. * * @inheritdoc */ render() { const { _raisedHand, t, overflowMenu, _isMobile, classes, _isGifMenuVisible, _isGifEnabled } = this.props; return (
{_isGifEnabled && _isGifMenuVisible && }
{ this._getReactionButtons() } {_isGifEnabled && }
{_isMobile && (
{/* @ts-ignore */}
)}
); } } /** * Function that maps parts of Redux state tree into component props. * * @param {Object} state - Redux state. * @returns {Object} */ function mapStateToProps(state: any) { const localParticipant = getLocalParticipant(state); return { _localParticipantID: localParticipant.id, _isMobile: isMobileBrowser(), _isGifEnabled: isGifEnabled(state), _isGifMenuVisible: isGifsMenuOpen(state), _raisedHand: hasRaisedHand(localParticipant) }; } /** * Function that maps parts of Redux actions into component props. * * @param {Object} dispatch - Redux dispatch. * @returns {Object} */ function mapDispatchToProps(dispatch: IStore['dispatch']) { return { dispatch, ...bindActionCreators( { _dockToolbox: dockToolbox // @ts-ignore }, dispatch) }; } export default translate(connect( mapStateToProps, mapDispatchToProps // @ts-ignore )(withStyles(styles)(ReactionsMenu)));