jitsi_app_c0/react/features/invite/components/InfoDialogButton.web.js

/* global interfaceConfig */

import InlineDialog from '@atlaskit/inline-dialog';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';

import { createToolbarEvent, sendAnalytics } from '../../analytics';
import { translate } from '../../base/i18n';
import { getParticipantCount } from '../../base/participants';
import {
    ToolbarButton,
    ToolbarButtonV2,
    TOOLTIP_TO_POPUP_POSITION
} from '../../toolbox';

import { updateDialInNumbers } from '../actions';

import { InfoDialog } from './info-dialog';

/**
 * A configuration object to describe how {@code ToolbarButton} should render
 * the button.
 *
 * @type {object}
 */
const DEFAULT_BUTTON_CONFIGURATION = {
    buttonName: 'info',
    classNames: [ 'button', 'icon-info' ],
    enabled: true,
    id: 'toolbar_button_info',
    tooltipKey: 'info.tooltip'
};

/**
 * The amount of time, in milliseconds, to wait until automatically showing
 * the {@code InfoDialog}. This is essentially a hack as automatic showing
 * should happen in a lonely call and some time is needed to populate
 * participants already in the call.
 */
const INFO_DIALOG_AUTO_SHOW_TIMEOUT = 1500;

/**
 * A React Component for displaying a button which opens a dialog with
 * information about the conference and with ways to invite people.
 *
 * @extends Component
 */
class InfoDialogButton extends Component {
    /**
     * {@code InfoDialogButton} component's property types.
     *
     * @static
     */
    static propTypes = {

        /**
         * Phone numbers for dialing into the conference.
         */
        _dialInNumbers: PropTypes.oneOfType([
            PropTypes.object,
            PropTypes.array
        ]),

        /**
         * Whether or not the {@code InfoDialog} should display automatically
         * after {@link INFO_DIALOG_AUTO_SHOW_TIMEOUT}.
         */
        _disableAutoShow: PropTypes.bool,

        /**
         * The number of real participants in the call. If in a lonely call,
         * the {@code InfoDialog} will be automatically shown.
         */
        _participantCount: PropTypes.number,

        /**
         * Whether or not the toolbox, in which this component exists, are
         * visible.
         */
        _toolboxVisible: PropTypes.bool,

        /**
         * Invoked to toggle display of the info dialog
         */
        dispatch: PropTypes.func,

        /**
         * Invoked to obtain translated strings.
         */
        t: PropTypes.func,

        /**
         * From which side tooltips should display. Will be re-used for
         * displaying the inline dialog for video quality adjustment.
         */
        tooltipPosition: PropTypes.string
    };

    /**
     * Initializes new {@code ToolbarButtonWithDialog} instance.
     *
     * @param {Object} props - The read-only properties with which the new
     * instance is to be initialized.
     */
    constructor(props) {
        super(props);

        /**
         * The timeout to automatically show the {@code InfoDialog} if it has
         * not been shown yet in a lonely call.
         *
         * @type {timeoutID}
         */
        this._autoShowTimeout = null;


        this.state = {
            /**
             * Whether or not {@code InfoDialog} should be visible.
             */
            showDialog: false
        };

        // Bind event handlers so they are only bound once for every instance.
        this._onDialogClose = this._onDialogClose.bind(this);
        this._onDialogToggle = this._onDialogToggle.bind(this);
    }

    /**
     * Set a timeout to automatically hide the {@code InfoDialog}.
     *
     * @inheritdoc
     */
    componentDidMount() {
        this._autoShowTimeout = setTimeout(() => {
            this._maybeAutoShowDialog();
        }, INFO_DIALOG_AUTO_SHOW_TIMEOUT);

        if (!this.props._dialInNumbers) {
            this.props.dispatch(updateDialInNumbers());
        }
    }

    /**
     * Update the visibility of the {@code InfoDialog}.
     *
     * @inheritdoc
     */
    componentWillReceiveProps(nextProps) {
        // Ensure the dialog is closed when the toolbox becomes hidden.
        if (this.state.showDialog && !nextProps._toolboxVisible) {
            this._onDialogClose();
        }
    }

    /**
     * Clear the timeout to automatically show the {@code InfoDialog}.
     *
     * @inheritdoc
     */
    componentWillUnmount() {
        clearTimeout(this._autoShowTimeout);
    }

    /**
     * Implements React's {@link Component#render()}.
     *
     * @inheritdoc
     * @returns {ReactElement}
     */
    render() {
        return interfaceConfig._USE_NEW_TOOLBOX
            ? this._renderNewToolbarButton()
            : this._renderOldToolbarButton();
    }

    /**
     * Callback invoked after a timeout to trigger display of the
     * {@code InfoDialog} if certain conditions are met.
     *
     * @private
     * @returns {void}
     */
    _maybeAutoShowDialog() {
        if (this.props._participantCount < 2 && !this.props._disableAutoShow) {
            this.setState({ showDialog: true });
        }
    }

    /**
     * Hides {@code InfoDialog}.
     *
     * @private
     * @returns {void}
     */
    _onDialogClose() {
        this.setState({ showDialog: false });
    }

    /**
     * Toggles the display of {@code InfoDialog}.
     *
     * @private
     * @returns {void}
     */
    _onDialogToggle() {
        sendAnalytics(createToolbarEvent('info'));

        this.setState({ showDialog: !this.state.showDialog });
    }

    /**
     * Renders a React Element for the {@code InfoDialog} using legacy
     * {@code ToolbarButton}.
     *
     * @private
     * @returns {ReactElement}
     */
    _renderOldToolbarButton() {
        const { tooltipPosition } = this.props;
        const { showDialog } = this.state;

        const buttonConfiguration = {
            ...DEFAULT_BUTTON_CONFIGURATION,
            classNames: [
                ...DEFAULT_BUTTON_CONFIGURATION.classNames,
                showDialog ? 'toggled button-active' : ''
            ]
        };

        return (
            <InlineDialog
                content = { <InfoDialog onClose = { this._onDialogClose } /> }
                isOpen = { showDialog }
                onClose = { this._onDialogClose }
                position = { TOOLTIP_TO_POPUP_POSITION[tooltipPosition] }>
                <ToolbarButton
                    button = { buttonConfiguration }
                    onClick = { this._onDialogToggle }
                    tooltipPosition = { tooltipPosition } />
            </InlineDialog>
        );
    }

    /**
     * Renders a React Element for the {@code InfoDialog} using the newer
     * {@code ToolbarButtonV2}.
     *
     * @private
     * @returns {ReactElement}
     */
    _renderNewToolbarButton() {
        const { t } = this.props;
        const { showDialog } = this.state;
        const iconClass = `icon-info ${showDialog ? 'toggled' : ''}`;

        return (
            <div className = 'toolbox-button-wth-dialog'>
                <InlineDialog
                    content = {
                        <InfoDialog onClose = { this._onDialogClose } /> }
                    isOpen = { showDialog }
                    onClose = { this._onDialogClose }
                    position = { 'top right' }>
                    <ToolbarButtonV2
                        accessibilityLabel = 'Info'
                        iconName = { iconClass }
                        onClick = { this._onDialogToggle }
                        tooltip = { t('info.tooltip') } />
                </InlineDialog>
            </div>
        );
    }
}

/**
 * Maps (parts of) the Redux state to the associated {@code InfoDialogButton}
 * component's props.
 *
 * @param {Object} state - The Redux state.
 * @private
 * @returns {{
 *     _dialInNumbers: Array,
 *     _disableAutoShow: bolean,
 *     _participantCount: number,
 *     _toolboxVisible: boolean
 * }}
 */
function _mapStateToProps(state) {
    return {
        _dialInNumbers: state['features/invite'].numbers,
        _disableAutoShow: state['features/base/config'].iAmRecorder,
        _participantCount:
            getParticipantCount(state['features/base/participants']),
        _toolboxVisible: state['features/toolbox'].visible
    };
}

export default translate(connect(_mapStateToProps)(InfoDialogButton));