2018-02-19 22:52:21 +00:00
|
|
|
// @flow
|
|
|
|
|
2017-02-16 23:02:40 +00:00
|
|
|
import React, { Component } from 'react';
|
2016-10-05 14:36:59 +00:00
|
|
|
import { View } from 'react-native';
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
|
|
|
|
import { Container } from '../../base/react';
|
2018-02-06 18:14:05 +00:00
|
|
|
import {
|
|
|
|
isNarrowAspectRatio,
|
|
|
|
makeAspectRatioAware
|
|
|
|
} from '../../base/responsive-ui';
|
2018-04-13 13:03:12 +00:00
|
|
|
import { ColorPalette } from '../../base/styles';
|
2018-04-18 14:34:40 +00:00
|
|
|
|
|
|
|
import styles from './styles';
|
2016-10-05 14:36:59 +00:00
|
|
|
|
2017-02-16 23:02:40 +00:00
|
|
|
import {
|
2018-04-18 14:34:40 +00:00
|
|
|
AudioMuteButton,
|
|
|
|
AudioOnlyButton,
|
|
|
|
AudioRouteButton,
|
|
|
|
HangupButton,
|
|
|
|
PictureInPictureButton,
|
|
|
|
RoomLockButton,
|
|
|
|
InviteButton,
|
|
|
|
ToggleCameraButton,
|
|
|
|
VideoMuteButton
|
|
|
|
} from './buttons';
|
2017-10-24 08:40:39 +00:00
|
|
|
|
2018-04-18 14:34:40 +00:00
|
|
|
/**
|
|
|
|
* Styles for the hangup button.
|
|
|
|
*/
|
|
|
|
const hangupButtonStyles = {
|
|
|
|
iconStyle: styles.whitePrimaryToolbarButtonIcon,
|
|
|
|
style: styles.hangup,
|
|
|
|
underlayColor: ColorPalette.buttonUnderlay
|
|
|
|
};
|
2016-10-05 14:36:59 +00:00
|
|
|
|
2018-04-18 14:34:40 +00:00
|
|
|
/**
|
|
|
|
* Styles for buttons in the primary toolbar.
|
|
|
|
*/
|
|
|
|
const primaryToolbarButtonStyles = {
|
|
|
|
iconStyle: styles.primaryToolbarButtonIcon,
|
|
|
|
style: styles.primaryToolbarButton
|
|
|
|
};
|
2018-03-07 00:28:19 +00:00
|
|
|
|
2016-10-05 14:36:59 +00:00
|
|
|
/**
|
2018-04-18 14:34:40 +00:00
|
|
|
* Styles for buttons in the primary toolbar.
|
2016-10-05 14:36:59 +00:00
|
|
|
*/
|
2018-04-18 14:34:40 +00:00
|
|
|
const primaryToolbarToggledButtonStyles = {
|
|
|
|
iconStyle: styles.whitePrimaryToolbarButtonIcon,
|
|
|
|
style: styles.whitePrimaryToolbarButton
|
|
|
|
};
|
2018-02-19 22:52:21 +00:00
|
|
|
|
2018-04-18 14:34:40 +00:00
|
|
|
/**
|
|
|
|
* Styles for buttons in the secondary toolbar.
|
|
|
|
*/
|
|
|
|
const secondaryToolbarButtonStyles = {
|
|
|
|
iconStyle: styles.secondaryToolbarButtonIcon,
|
|
|
|
style: styles.secondaryToolbarButton,
|
|
|
|
underlayColor: 'transparent'
|
|
|
|
};
|
2017-07-03 07:06:33 +00:00
|
|
|
|
2018-04-18 14:34:40 +00:00
|
|
|
/**
|
|
|
|
* The type of {@link Toolbox}'s React {@code Component} props.
|
|
|
|
*/
|
|
|
|
type Props = {
|
2018-02-06 10:41:23 +00:00
|
|
|
|
2018-02-19 22:52:21 +00:00
|
|
|
/**
|
|
|
|
* The indicator which determines whether the toolbox is enabled.
|
|
|
|
*/
|
|
|
|
_enabled: boolean,
|
2016-10-05 14:36:59 +00:00
|
|
|
|
2018-02-19 22:52:21 +00:00
|
|
|
/**
|
|
|
|
* Flag showing whether toolbar is visible.
|
|
|
|
*/
|
2018-04-18 14:34:40 +00:00
|
|
|
_visible: boolean
|
2018-02-19 22:52:21 +00:00
|
|
|
};
|
2017-08-04 21:06:42 +00:00
|
|
|
|
2018-02-19 22:52:21 +00:00
|
|
|
/**
|
|
|
|
* Implements the conference toolbox on React Native.
|
|
|
|
*/
|
|
|
|
class Toolbox extends Component<Props> {
|
2016-10-05 14:36:59 +00:00
|
|
|
/**
|
|
|
|
* Implements React's {@link Component#render()}.
|
|
|
|
*
|
|
|
|
* @inheritdoc
|
|
|
|
* @returns {ReactElement}
|
|
|
|
*/
|
|
|
|
render() {
|
2018-02-06 10:41:23 +00:00
|
|
|
if (!this.props._enabled) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2017-11-07 14:28:08 +00:00
|
|
|
const toolboxStyle
|
|
|
|
= isNarrowAspectRatio(this)
|
|
|
|
? styles.toolboxNarrow
|
|
|
|
: styles.toolboxWide;
|
|
|
|
|
2016-12-11 23:39:31 +00:00
|
|
|
return (
|
|
|
|
<Container
|
2017-11-07 14:28:08 +00:00
|
|
|
style = { toolboxStyle }
|
2017-10-19 18:19:32 +00:00
|
|
|
visible = { this.props._visible } >
|
2017-10-19 18:29:34 +00:00
|
|
|
{ this._renderToolbars() }
|
2016-12-11 23:39:31 +00:00
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Renders the toolbar which contains the primary buttons such as hangup,
|
|
|
|
* audio and video mute.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @returns {ReactElement}
|
|
|
|
*/
|
|
|
|
_renderPrimaryToolbar() {
|
2016-10-05 14:36:59 +00:00
|
|
|
return (
|
2017-11-07 23:26:23 +00:00
|
|
|
<View
|
|
|
|
key = 'primaryToolbar'
|
2018-04-05 19:46:31 +00:00
|
|
|
pointerEvents = 'box-none'
|
2017-11-07 23:26:23 +00:00
|
|
|
style = { styles.primaryToolbar }>
|
2018-04-18 14:34:40 +00:00
|
|
|
<AudioMuteButton
|
|
|
|
styles = { primaryToolbarButtonStyles }
|
|
|
|
toggledStyles = { primaryToolbarToggledButtonStyles } />
|
2018-04-13 13:03:12 +00:00
|
|
|
<HangupButton styles = { hangupButtonStyles } />
|
2018-04-18 14:34:40 +00:00
|
|
|
<VideoMuteButton
|
|
|
|
styles = { primaryToolbarButtonStyles }
|
|
|
|
toggledStyles = { primaryToolbarToggledButtonStyles } />
|
2016-12-11 23:39:31 +00:00
|
|
|
</View>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Renders the toolbar which contains the secondary buttons such as toggle
|
|
|
|
* camera facing mode.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @returns {ReactElement}
|
|
|
|
*/
|
|
|
|
_renderSecondaryToolbar() {
|
|
|
|
return (
|
2017-11-07 23:26:23 +00:00
|
|
|
<View
|
|
|
|
key = 'secondaryToolbar'
|
2018-04-05 19:46:31 +00:00
|
|
|
pointerEvents = 'box-none'
|
2017-11-07 23:26:23 +00:00
|
|
|
style = { styles.secondaryToolbar }>
|
2018-04-18 14:34:40 +00:00
|
|
|
<AudioRouteButton styles = { secondaryToolbarButtonStyles } />
|
|
|
|
<ToggleCameraButton styles = { secondaryToolbarButtonStyles } />
|
|
|
|
<AudioOnlyButton styles = { secondaryToolbarButtonStyles } />
|
|
|
|
<RoomLockButton styles = { secondaryToolbarButtonStyles } />
|
|
|
|
<InviteButton styles = { secondaryToolbarButtonStyles } />
|
|
|
|
<PictureInPictureButton
|
|
|
|
styles = { secondaryToolbarButtonStyles } />
|
2016-12-11 23:39:31 +00:00
|
|
|
</View>
|
2016-10-05 14:36:59 +00:00
|
|
|
);
|
|
|
|
}
|
2017-10-19 18:29:34 +00:00
|
|
|
|
|
|
|
/**
|
2017-11-07 14:28:08 +00:00
|
|
|
* Renders the primary and the secondary toolbars.
|
2017-10-19 18:29:34 +00:00
|
|
|
*
|
|
|
|
* @private
|
2017-11-07 14:28:08 +00:00
|
|
|
* @returns {[ReactElement, ReactElement]}
|
2017-10-19 18:29:34 +00:00
|
|
|
*/
|
|
|
|
_renderToolbars() {
|
2017-11-07 14:28:08 +00:00
|
|
|
return [
|
|
|
|
this._renderSecondaryToolbar(),
|
|
|
|
this._renderPrimaryToolbar()
|
|
|
|
];
|
2017-10-19 18:29:34 +00:00
|
|
|
}
|
2016-10-05 14:36:59 +00:00
|
|
|
}
|
|
|
|
|
2017-02-16 23:02:40 +00:00
|
|
|
/**
|
2018-04-18 14:34:40 +00:00
|
|
|
* Maps parts of the redux state to {@link Toolbox} (React {@code Component})
|
2018-02-19 22:52:21 +00:00
|
|
|
* props.
|
2017-02-16 23:02:40 +00:00
|
|
|
*
|
2018-04-18 14:34:40 +00:00
|
|
|
* @param {Object} state - The redux state of which parts are to be mapped to
|
|
|
|
* {@code Toolbox} props.
|
|
|
|
* @protected
|
2017-02-16 23:02:40 +00:00
|
|
|
* @returns {{
|
2018-02-19 22:52:21 +00:00
|
|
|
* _enabled: boolean,
|
2018-04-18 14:34:40 +00:00
|
|
|
* _visible: boolean
|
2017-02-16 23:02:40 +00:00
|
|
|
* }}
|
|
|
|
*/
|
2018-04-18 14:34:40 +00:00
|
|
|
function _mapStateToProps(state: Object): Object {
|
|
|
|
const { enabled, visible } = state['features/toolbox'];
|
2017-02-16 23:02:40 +00:00
|
|
|
|
|
|
|
return {
|
2018-02-06 10:41:23 +00:00
|
|
|
/**
|
2018-02-12 17:49:45 +00:00
|
|
|
* The indicator which determines whether the toolbox is enabled.
|
2018-02-06 10:41:23 +00:00
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @type {boolean}
|
|
|
|
*/
|
|
|
|
_enabled: enabled,
|
|
|
|
|
2017-02-16 23:02:40 +00:00
|
|
|
/**
|
2018-04-18 14:34:40 +00:00
|
|
|
* Flag showing whether toolbox is visible.
|
2017-02-16 23:02:40 +00:00
|
|
|
*
|
|
|
|
* @protected
|
|
|
|
* @type {boolean}
|
|
|
|
*/
|
2018-04-18 14:34:40 +00:00
|
|
|
_visible: visible
|
2017-02-16 23:02:40 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2018-04-18 14:34:40 +00:00
|
|
|
export default connect(_mapStateToProps)(makeAspectRatioAware(Toolbox));
|