jiti-meet/react/features/toolbox/components/native/Toolbox.js

167 lines
4.8 KiB
JavaScript
Raw Normal View History

// @flow
2019-11-06 16:44:03 +00:00
import React, { PureComponent } from 'react';
import { View } from 'react-native';
import { ColorSchemeRegistry } from '../../../base/color-scheme';
import { CHAT_ENABLED, getFeatureFlag } from '../../../base/flags';
import { Container } from '../../../base/react';
2019-03-21 16:38:29 +00:00
import { connect } from '../../../base/redux';
import { StyleType } from '../../../base/styles';
import { ChatButton } from '../../../chat';
import { InfoDialogButton } from '../../../invite';
2019-01-30 17:19:40 +00:00
import { isToolboxVisible } from '../../functions';
import AudioMuteButton from '../AudioMuteButton';
import HangupButton from '../HangupButton';
2019-01-30 17:19:40 +00:00
import OverflowMenuButton from './OverflowMenuButton';
import styles from './styles';
import VideoMuteButton from '../VideoMuteButton';
/**
* The type of {@link Toolbox}'s React {@code Component} props.
*/
type Props = {
/**
* Whether the chat feature has been enabled. The meeting info button will be displayed in its place when disabled.
*/
_chatEnabled: boolean,
/**
* The color-schemed stylesheet of the feature.
*/
_styles: StyleType,
/**
* The indicator which determines whether the toolbox is visible.
*/
_visible: boolean,
/**
* The redux {@code dispatch} function.
*/
dispatch: Function
};
/**
* Implements the conference toolbox on React Native.
*/
2019-11-06 16:44:03 +00:00
class Toolbox extends PureComponent<Props> {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
return (
<Container
style = { styles.toolbox }
2018-05-18 19:35:58 +00:00
visible = { this.props._visible }>
{ this._renderToolbar() }
</Container>
);
}
2018-05-16 21:49:03 +00:00
/**
* Constructs the toggled style of the chat button. This cannot be done by
* simple style inheritance due to the size calculation done in this
* component.
*
* @param {Object} baseStyle - The base style that was originally
* calculated.
* @returns {Object | Array}
*/
_getChatButtonToggledStyle(baseStyle) {
const { _styles } = this.props;
if (Array.isArray(baseStyle.style)) {
return {
...baseStyle,
style: [
...baseStyle.style,
_styles.chatButtonOverride.toggled
]
};
}
return {
...baseStyle,
style: [
baseStyle.style,
_styles.chatButtonOverride.toggled
]
};
}
2018-05-18 19:35:58 +00:00
/**
* Renders the toolbar. In order to avoid a weird visual effect in which the
* toolbar is (visually) rendered and then visibly changes its size, it is
* rendered only after we've figured out the width available to the toolbar.
*
* @returns {React$Node}
*/
_renderToolbar() {
const { _chatEnabled, _styles } = this.props;
const { buttonStyles, buttonStylesBorderless, hangupButtonStyles, toggledButtonStyles } = _styles;
2018-05-18 19:35:58 +00:00
return (
<View
pointerEvents = 'box-none'
style = { styles.toolbar }>
{
_chatEnabled
&& <ChatButton
2019-07-12 08:32:47 +00:00
styles = { buttonStylesBorderless }
toggledStyles = {
this._getChatButtonToggledStyle(toggledButtonStyles)
} />
}
{
!_chatEnabled
&& <InfoDialogButton
styles = { buttonStyles }
toggledStyles = { toggledButtonStyles } />
}
2018-05-18 19:35:58 +00:00
<AudioMuteButton
styles = { buttonStyles }
toggledStyles = { toggledButtonStyles } />
<HangupButton
2019-07-12 08:32:47 +00:00
styles = { hangupButtonStyles } />
2018-05-18 19:35:58 +00:00
<VideoMuteButton
styles = { buttonStyles }
toggledStyles = { toggledButtonStyles } />
<OverflowMenuButton
2019-07-12 08:32:47 +00:00
styles = { buttonStylesBorderless }
2018-05-18 19:35:58 +00:00
toggledStyles = { toggledButtonStyles } />
</View>
);
}
}
2017-02-16 23:02:40 +00:00
/**
* Maps parts of the redux state to {@link Toolbox} (React {@code Component})
* props.
2017-02-16 23:02:40 +00:00
*
* @param {Object} state - The redux state of which parts are to be mapped to
* {@code Toolbox} props.
2018-05-11 02:10:26 +00:00
* @private
2017-02-16 23:02:40 +00:00
* @returns {{
* _chatEnabled: boolean,
* _styles: StyleType,
* _visible: boolean
2017-02-16 23:02:40 +00:00
* }}
*/
function _mapStateToProps(state: Object): Object {
2017-02-16 23:02:40 +00:00
return {
_chatEnabled: getFeatureFlag(state, CHAT_ENABLED, true),
_styles: ColorSchemeRegistry.get(state, 'Toolbox'),
2019-01-30 17:19:40 +00:00
_visible: isToolboxVisible(state)
2017-02-16 23:02:40 +00:00
};
}
export default connect(_mapStateToProps)(Toolbox);