jiti-meet/react/features/conference/components/Conference.native.js

516 lines
15 KiB
JavaScript
Raw Normal View History

// @flow
import React, { Component } from 'react';
// eslint-disable-next-line react-native/split-platform-components
import { BackAndroid, BackHandler, StatusBar, View } from 'react-native';
import { connect as reactReduxConnect } from 'react-redux';
import { appNavigate } from '../../app';
2016-12-12 00:29:13 +00:00
import { connect, disconnect } from '../../base/connection';
2017-03-07 03:34:51 +00:00
import { DialogContainer } from '../../base/dialog';
2018-06-26 22:56:22 +00:00
import { CalleeInfoContainer } from '../../invite';
import { getParticipantCount } from '../../base/participants';
import { Container, LoadingIndicator, TintedView } from '../../base/react';
import { TestConnectionInfo } from '../../base/testing';
import { createDesiredLocalTracks } from '../../base/tracks';
2018-02-12 15:53:23 +00:00
import { ConferenceNotification } from '../../calendar-sync';
import { Filmstrip } from '../../filmstrip';
2017-01-17 14:44:50 +00:00
import { LargeVideo } from '../../large-video';
2018-06-14 09:14:32 +00:00
import { NotificationsContainer } from '../../notifications';
2017-04-01 05:52:40 +00:00
import { setToolboxVisible, Toolbox } from '../../toolbox';
import styles from './styles';
/**
* The type of the React {@code Component} props of {@link Conference}.
*/
type Props = {
2017-11-13 15:54:04 +00:00
/**
2017-11-13 15:54:04 +00:00
* The indicator which determines that we are still connecting to the
* conference which includes establishing the XMPP connection and then
* joining the room. If truthy, then an activity/loading indicator will
* be rendered.
*
2017-11-13 15:54:04 +00:00
* @private
*/
2017-11-13 15:54:04 +00:00
_connecting: boolean,
/**
* Current conference's full URL.
*
* @private
*/
_locationURL: URL,
2017-11-13 15:54:04 +00:00
/**
* The handler which dispatches the (redux) action connect.
*
* @private
*/
_onConnect: Function,
2017-02-16 23:02:40 +00:00
2017-11-13 15:54:04 +00:00
/**
* The handler which dispatches the (redux) action disconnect.
*
* @private
*/
_onDisconnect: Function,
2017-02-16 23:02:40 +00:00
2017-11-13 15:54:04 +00:00
/**
* Handles a hardware button press for back navigation. Leaves the
* associated {@code Conference}.
*
* @private
* @returns {boolean} As the associated conference is unconditionally
* left and exiting the app while it renders a {@code Conference} is
* undesired, {@code true} is always returned.
*/
_onHardwareBackPress: Function,
/**
2018-05-18 13:19:25 +00:00
* The number of participants in the conference.
*
* @private
*/
_participantCount: number,
/**
* The indicator which determines whether the UI is reduced (to accommodate
* smaller display areas).
*
* @private
*/
_reducedUI: boolean,
/**
* The current conference room name.
*
* @private
*/
_room: string,
2017-11-13 15:54:04 +00:00
/**
* The handler which dispatches the (redux) action setToolboxVisible to
* show/hide the Toolbox.
*
* @private
*/
_setToolboxVisible: Function,
2017-02-16 23:02:40 +00:00
2017-11-13 15:54:04 +00:00
/**
* The indicator which determines whether the Toolbox is visible.
*
* @private
*/
_toolboxVisible: boolean,
/**
* The indicator which determines whether the Toolbox is always visible.
*
* @private
*/
_toolboxAlwaysVisible: boolean
2017-11-13 15:54:04 +00:00
};
2017-11-13 15:54:04 +00:00
/**
* The conference page of the mobile (i.e. React Native) application.
*/
class Conference extends Component<Props> {
_backHandler: ?BackHandler;
/**
* Initializes a new Conference instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props) {
super(props);
// Bind event handlers so they are only bound once per instance.
this._onClick = this._onClick.bind(this);
this._onHardwareBackPress = this._onHardwareBackPress.bind(this);
}
/**
* Implements {@link Component#componentDidMount()}. Invoked immediately
* after this component is mounted.
*
2017-01-03 21:09:52 +00:00
* @inheritdoc
2017-11-03 20:14:38 +00:00
* @returns {void}
*/
componentDidMount() {
// Set handling any hardware button presses for back navigation up.
const backHandler = BackHandler || BackAndroid;
if (backHandler) {
this._backHandler = backHandler;
backHandler.addEventListener(
'hardwareBackPress',
this._onHardwareBackPress);
}
2018-05-18 19:35:58 +00:00
// Show the toolbox if we are the only participant; otherwise, the whole
// UI looks too unpopulated the LargeVideo visible.
const { _participantCount, _setToolboxVisible } = this.props;
2018-05-18 13:19:25 +00:00
_participantCount === 1 && _setToolboxVisible(true);
}
/**
* Implements {@link Component#componentWillMount()}. Invoked immediately
* before mounting occurs. Connects the conference described by the redux
* store/state.
*
* @inheritdoc
* @returns {void}
*/
componentWillMount() {
2017-02-16 23:02:40 +00:00
this.props._onConnect();
}
/**
* Notifies this mounted React {@code Component} that it will receive new
* props. Check if we need to show / hide the toolbox based on the
* participant count.
*
* @inheritdoc
* @param {Props} nextProps - The read-only React {@code Component} props
* that this instance will receive.
* @returns {void}
*/
componentWillReceiveProps(nextProps: Props) {
2018-05-18 13:19:25 +00:00
const {
_locationURL: oldLocationURL,
2018-05-18 13:19:25 +00:00
_participantCount: oldParticipantCount,
_room: oldRoom,
2018-05-18 13:19:25 +00:00
_setToolboxVisible
} = this.props;
const {
_locationURL: newLocationURL,
_participantCount: newParticipantCount,
_room: newRoom
} = nextProps;
// If the location URL changes we need to reconnect.
2018-07-12 03:57:44 +00:00
oldLocationURL !== newLocationURL && this.props._onDisconnect();
// Start the connection process when there is a (valid) room.
2018-07-12 03:57:44 +00:00
oldRoom !== newRoom && newRoom && this.props._onConnect();
2018-05-18 13:19:25 +00:00
if (oldParticipantCount === 1) {
newParticipantCount > 1 && _setToolboxVisible(false);
} else if (oldParticipantCount > 1) {
newParticipantCount === 1 && _setToolboxVisible(true);
}
}
/**
* Implements {@link Component#componentWillUnmount()}. Invoked immediately
* before this component is unmounted and destroyed. Disconnects the
* conference described by the redux store/state.
*
* @inheritdoc
* @returns {void}
*/
componentWillUnmount() {
// Tear handling any hardware button presses for back navigation down.
const backHandler = this._backHandler;
if (backHandler) {
this._backHandler = undefined;
backHandler.removeEventListener(
'hardwareBackPress',
this._onHardwareBackPress);
}
2017-02-16 23:02:40 +00:00
this.props._onDisconnect();
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
return (
<Container style = { styles.conference }>
2018-02-02 14:50:16 +00:00
<StatusBar
barStyle = 'light-content'
2018-02-02 14:50:16 +00:00
hidden = { true }
translucent = { true } />
{/*
* The LargeVideo is the lowermost stacking layer.
*/}
<LargeVideo onPress = { this._onClick } />
2016-12-12 01:02:50 +00:00
{/*
* If there is a ringing call, show the callee's info.
*/
this.props._reducedUI || <CalleeInfoContainer />
}
{/*
* The activity/loading indicator goes above everything, except
* the toolbox/toolbars and the dialogs.
*/
this.props._connecting
&& <TintedView>
<LoadingIndicator />
</TintedView>
}
<View
pointerEvents = 'box-none'
style = { styles.toolboxAndFilmstripContainer }>
{/*
2017-11-07 14:28:08 +00:00
* The Toolbox is in a stacking layer bellow the Filmstrip.
*/}
<Toolbox />
{/*
2017-11-07 14:28:08 +00:00
* The Filmstrip is in a stacking layer above the
* LargeVideo. The LargeVideo and the Filmstrip form what
* the Web/React app calls "videospace". Presumably, the
* name and grouping stem from the fact that these two
* React Components depict the videos of the conference's
* participants.
*/}
<Filmstrip />
</View>
<TestConnectionInfo />
{
this._renderConferenceNotification()
}
2018-02-12 15:53:23 +00:00
2018-06-14 09:14:32 +00:00
<NotificationsContainer />
{/*
* The dialogs are in the topmost stacking layers.
*/
this.props._reducedUI || <DialogContainer />
}
</Container>
);
}
_onClick: () => void;
/**
2017-04-01 05:52:40 +00:00
* Changes the value of the toolboxVisible state, thus allowing us to switch
* between Toolbox and Filmstrip and change their visibility.
*
* @private
* @returns {void}
*/
_onClick() {
if (this.props._toolboxAlwaysVisible) {
return;
}
2017-04-01 05:52:40 +00:00
const toolboxVisible = !this.props._toolboxVisible;
2017-04-01 05:52:40 +00:00
this.props._setToolboxVisible(toolboxVisible);
}
2016-12-12 01:02:50 +00:00
_onHardwareBackPress: () => boolean;
/**
* Handles a hardware button press for back navigation.
*
* @returns {boolean} If the hardware button press for back navigation was
* handled by this {@code Conference}, then {@code true}; otherwise,
* {@code false}.
*/
_onHardwareBackPress() {
return this._backHandler && this.props._onHardwareBackPress();
}
/**
* Renders the conference notification badge if the feature is enabled.
*
* Note: If the calendar feature is disabled on a platform, then we don't
* have its components exported so an undefined check is necessary.
*
* @private
* @returns {React$Node}
*/
_renderConferenceNotification() {
2018-07-12 03:57:44 +00:00
return ConferenceNotification ? <ConferenceNotification /> : undefined;
}
2016-12-12 01:02:50 +00:00
}
2017-02-16 23:02:40 +00:00
/**
* Maps dispatching of some action to React component props.
*
* @param {Function} dispatch - Redux action dispatcher.
* @private
* @returns {{
* _onConnect: Function,
* _onDisconnect: Function,
2018-07-12 03:57:44 +00:00
* _onHardwareBackPress: Function,
2017-04-01 05:52:40 +00:00
* _setToolboxVisible: Function
2017-02-16 23:02:40 +00:00
* }}
*/
function _mapDispatchToProps(dispatch) {
return {
/**
* Dispatches actions to create the desired local tracks and for
* connecting to the conference.
2017-02-16 23:02:40 +00:00
*
* @returns {void}
2017-02-16 23:02:40 +00:00
* @private
*/
_onConnect() {
dispatch(createDesiredLocalTracks());
dispatch(connect());
2017-02-16 23:02:40 +00:00
},
/**
* Dispatches an action disconnecting from the conference.
*
* @returns {void}
2017-02-16 23:02:40 +00:00
* @private
*/
_onDisconnect() {
dispatch(disconnect());
2017-02-16 23:02:40 +00:00
},
/**
* Handles a hardware button press for back navigation. Leaves the
* associated {@code Conference}.
*
* @returns {boolean} As the associated conference is unconditionally
* left and exiting the app while it renders a {@code Conference} is
* undesired, {@code true} is always returned.
*/
_onHardwareBackPress() {
dispatch(appNavigate(undefined));
return true;
},
/**
* Dispatches an action changing the visibility of the Toolbox.
2017-02-16 23:02:40 +00:00
*
2017-04-01 05:52:40 +00:00
* @param {boolean} visible - True to show the Toolbox or false to hide
* it.
* @returns {void}
2017-02-16 23:02:40 +00:00
* @private
*/
_setToolboxVisible(visible) {
dispatch(setToolboxVisible(visible));
2017-02-16 23:02:40 +00:00
}
};
}
/**
* Maps (parts of) the redux state to the associated {@code Conference}'s props.
2017-02-16 23:02:40 +00:00
*
* @param {Object} state - The redux state.
2017-02-16 23:02:40 +00:00
* @private
* @returns {{
* _connecting: boolean,
* _locationURL: URL,
2018-05-18 13:19:25 +00:00
* _participantCount: number,
* _reducedUI: boolean,
* _room: string,
* _toolboxVisible: boolean,
* _toolboxAlwaysVisible: boolean
2017-02-16 23:02:40 +00:00
* }}
*/
function _mapStateToProps(state) {
const { connecting, connection, locationURL }
= state['features/base/connection'];
const {
conference,
joining,
leaving,
room
} = state['features/base/conference'];
const { reducedUI } = state['features/base/responsive-ui'];
const { alwaysVisible, visible } = state['features/toolbox'];
// XXX There is a window of time between the successful establishment of the
// XMPP connection and the subsequent commencement of joining the MUC during
// which the app does not appear to be doing anything according to the redux
// state. In order to not toggle the _connecting props during the window of
// time in question, define _connecting as follows:
// - the XMPP connection is connecting, or
// - the XMPP connection is connected and the conference is joining, or
// - the XMPP connection is connected and we have no conference yet, nor we
// are leaving one.
const connecting_
= connecting || (connection && (joining || (!conference && !leaving)));
2017-02-16 23:02:40 +00:00
return {
/**
* The indicator which determines that we are still connecting to the
* conference which includes establishing the XMPP connection and then
* joining the room. If truthy, then an activity/loading indicator will
* be rendered.
*
* @private
* @type {boolean}
*/
_connecting: Boolean(connecting_),
/**
* Current conference's full URL.
*
* @private
* @type {URL}
*/
_locationURL: locationURL,
/**
2018-05-18 13:19:25 +00:00
* The number of participants in the conference.
*
* @private
* @type {number}
*/
_participantCount: getParticipantCount(state),
/**
* The indicator which determines whether the UI is reduced (to
* accommodate smaller display areas).
*
* @private
* @type {boolean}
*/
_reducedUI: reducedUI,
/**
* The current conference room name.
*
* @private
* @type {string}
*/
_room: room,
2017-02-16 23:02:40 +00:00
/**
2017-04-01 05:52:40 +00:00
* The indicator which determines whether the Toolbox is visible.
2017-02-16 23:02:40 +00:00
*
* @private
* @type {boolean}
*/
_toolboxVisible: visible,
/**
* The indicator which determines whether the Toolbox is always visible.
*
* @private
* @type {boolean}
*/
_toolboxAlwaysVisible: alwaysVisible
2017-02-16 23:02:40 +00:00
};
}
// $FlowFixMe
2017-02-16 23:02:40 +00:00
export default reactReduxConnect(_mapStateToProps, _mapDispatchToProps)(
2017-06-15 00:40:51 +00:00
Conference);