2017-11-17 19:06:47 +00:00
|
|
|
// @flow
|
|
|
|
|
2016-10-05 14:36:59 +00:00
|
|
|
import React, { Component } from 'react';
|
2017-09-25 17:26:15 +00:00
|
|
|
|
|
|
|
// eslint-disable-next-line react-native/split-platform-components
|
2018-02-02 14:48:43 +00:00
|
|
|
import { BackAndroid, BackHandler, StatusBar, View } from 'react-native';
|
2016-10-05 14:36:59 +00:00
|
|
|
import { connect as reactReduxConnect } from 'react-redux';
|
|
|
|
|
2017-09-25 17:26:15 +00:00
|
|
|
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';
|
2018-05-22 22:41:53 +00:00
|
|
|
import { getParticipantCount } from '../../base/participants';
|
2017-12-14 15:04:35 +00:00
|
|
|
import { Container, LoadingIndicator, TintedView } from '../../base/react';
|
2018-04-17 19:50:23 +00:00
|
|
|
import { TestConnectionInfo } from '../../base/testing';
|
2017-08-17 13:50:49 +00:00
|
|
|
import { createDesiredLocalTracks } from '../../base/tracks';
|
2018-02-12 15:53:23 +00:00
|
|
|
import { ConferenceNotification } from '../../calendar-sync';
|
2017-04-10 17:59:44 +00:00
|
|
|
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';
|
2016-10-05 14:36:59 +00:00
|
|
|
|
2017-06-10 22:50:42 +00:00
|
|
|
import styles from './styles';
|
2016-10-05 14:36:59 +00:00
|
|
|
|
|
|
|
/**
|
2017-11-17 19:06:47 +00:00
|
|
|
* The type of the React {@code Component} props of {@link Conference}.
|
2016-10-05 14:36:59 +00:00
|
|
|
*/
|
2017-11-17 19:06:47 +00:00
|
|
|
type Props = {
|
2017-11-13 15:54:04 +00:00
|
|
|
|
2016-12-01 01:52:39 +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.
|
2016-12-01 01:52:39 +00:00
|
|
|
*
|
2017-11-13 15:54:04 +00:00
|
|
|
* @private
|
2016-12-01 01:52:39 +00:00
|
|
|
*/
|
2017-11-13 15:54:04 +00:00
|
|
|
_connecting: boolean,
|
2017-09-14 10:18:47 +00:00
|
|
|
|
core: refactor routing
Unfortunately, as the Jitsi Meet development evolved the routing mechanism
became more complex and thre logic ended up spread across multiple parts of the
codebase, which made it hard to follow and extend.
This change aims to fix that by rewriting the routing logic and centralizing it
in (pretty much) a single place, with no implicit inter-dependencies.
In order to arrive there, however, some extra changes were needed, which were
not caught early enough and are thus part of this change:
- JitsiMeetJS initialization is now synchronous: there is nothing async about
it, and the only async requirement (Temasys support) was lifted. See [0].
- WebRTC support can be detected early: building on top of the above, WebRTC
support can now be detected immediately, so take advantage of this to simplify
how we handle unsupported browsers. See [0].
The new router takes decissions based on the Redux state at the time of
invocation. A route can be represented by either a component or a URl reference,
with the latter taking precedence. On mobile, obviously, there is no concept of
URL reference so routing is based solely on components.
[0]: https://github.com/jitsi/lib-jitsi-meet/pull/779
2018-06-29 07:58:31 +00:00
|
|
|
/**
|
|
|
|
* 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,
|
2017-09-25 17:26:15 +00:00
|
|
|
|
2018-05-17 13:23:11 +00:00
|
|
|
/**
|
2018-05-18 13:19:25 +00:00
|
|
|
* The number of participants in the conference.
|
2018-05-17 13:23:11 +00:00
|
|
|
*
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
_participantCount: number,
|
|
|
|
|
2018-02-02 13:41:30 +00:00
|
|
|
/**
|
2018-02-13 19:14:06 +00:00
|
|
|
* The indicator which determines whether the UI is reduced (to accommodate
|
|
|
|
* smaller display areas).
|
2018-02-02 13:41:30 +00:00
|
|
|
*
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
_reducedUI: boolean,
|
|
|
|
|
core: refactor routing
Unfortunately, as the Jitsi Meet development evolved the routing mechanism
became more complex and thre logic ended up spread across multiple parts of the
codebase, which made it hard to follow and extend.
This change aims to fix that by rewriting the routing logic and centralizing it
in (pretty much) a single place, with no implicit inter-dependencies.
In order to arrive there, however, some extra changes were needed, which were
not caught early enough and are thus part of this change:
- JitsiMeetJS initialization is now synchronous: there is nothing async about
it, and the only async requirement (Temasys support) was lifted. See [0].
- WebRTC support can be detected early: building on top of the above, WebRTC
support can now be detected immediately, so take advantage of this to simplify
how we handle unsupported browsers. See [0].
The new router takes decissions based on the Redux state at the time of
invocation. A route can be represented by either a component or a URl reference,
with the latter taking precedence. On mobile, obviously, there is no concept of
URL reference so routing is based solely on components.
[0]: https://github.com/jitsi/lib-jitsi-meet/pull/779
2018-06-29 07:58:31 +00:00
|
|
|
/**
|
|
|
|
* 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
|
|
|
|
*/
|
2018-04-16 15:06:11 +00:00
|
|
|
_toolboxVisible: boolean,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The indicator which determines whether the Toolbox is always visible.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
_toolboxAlwaysVisible: boolean
|
2017-11-13 15:54:04 +00:00
|
|
|
};
|
2016-10-05 14:36:59 +00:00
|
|
|
|
2017-11-13 15:54:04 +00:00
|
|
|
/**
|
|
|
|
* The conference page of the mobile (i.e. React Native) application.
|
|
|
|
*/
|
2017-11-17 19:06:47 +00:00
|
|
|
class Conference extends Component<Props> {
|
|
|
|
_backHandler: ?BackHandler;
|
|
|
|
|
2016-10-05 14:36:59 +00:00
|
|
|
/**
|
|
|
|
* 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);
|
|
|
|
|
2017-09-25 17:26:15 +00:00
|
|
|
// Bind event handlers so they are only bound once per instance.
|
2016-10-05 14:36:59 +00:00
|
|
|
this._onClick = this._onClick.bind(this);
|
2017-09-25 17:26:15 +00:00
|
|
|
this._onHardwareBackPress = this._onHardwareBackPress.bind(this);
|
2016-10-05 14:36:59 +00:00
|
|
|
}
|
|
|
|
|
2017-01-03 21:06:47 +00:00
|
|
|
/**
|
2017-09-25 17:26:15 +00:00
|
|
|
* Implements {@link Component#componentDidMount()}. Invoked immediately
|
|
|
|
* after this component is mounted.
|
2017-01-03 21:06:47 +00:00
|
|
|
*
|
2017-01-03 21:09:52 +00:00
|
|
|
* @inheritdoc
|
2017-11-03 20:14:38 +00:00
|
|
|
* @returns {void}
|
2017-01-03 21:06:47 +00:00
|
|
|
*/
|
|
|
|
componentDidMount() {
|
2017-09-25 17:26:15 +00:00
|
|
|
// 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.
|
2018-05-17 13:23:11 +00:00
|
|
|
const { _participantCount, _setToolboxVisible } = this.props;
|
|
|
|
|
2018-05-18 13:19:25 +00:00
|
|
|
_participantCount === 1 && _setToolboxVisible(true);
|
2017-01-03 21:06:47 +00:00
|
|
|
}
|
|
|
|
|
2016-10-05 14:36:59 +00:00
|
|
|
/**
|
2017-09-25 17:26:15 +00:00
|
|
|
* Implements {@link Component#componentWillMount()}. Invoked immediately
|
|
|
|
* before mounting occurs. Connects the conference described by the redux
|
|
|
|
* store/state.
|
2016-10-05 14:36:59 +00:00
|
|
|
*
|
|
|
|
* @inheritdoc
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
componentWillMount() {
|
2017-02-16 23:02:40 +00:00
|
|
|
this.props._onConnect();
|
2016-10-05 14:36:59 +00:00
|
|
|
}
|
|
|
|
|
2018-05-17 13:23:11 +00:00
|
|
|
/**
|
|
|
|
* 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
|
core: refactor routing
Unfortunately, as the Jitsi Meet development evolved the routing mechanism
became more complex and thre logic ended up spread across multiple parts of the
codebase, which made it hard to follow and extend.
This change aims to fix that by rewriting the routing logic and centralizing it
in (pretty much) a single place, with no implicit inter-dependencies.
In order to arrive there, however, some extra changes were needed, which were
not caught early enough and are thus part of this change:
- JitsiMeetJS initialization is now synchronous: there is nothing async about
it, and the only async requirement (Temasys support) was lifted. See [0].
- WebRTC support can be detected early: building on top of the above, WebRTC
support can now be detected immediately, so take advantage of this to simplify
how we handle unsupported browsers. See [0].
The new router takes decissions based on the Redux state at the time of
invocation. A route can be represented by either a component or a URl reference,
with the latter taking precedence. On mobile, obviously, there is no concept of
URL reference so routing is based solely on components.
[0]: https://github.com/jitsi/lib-jitsi-meet/pull/779
2018-06-29 07:58:31 +00:00
|
|
|
* @param {Props} nextProps - The read-only React {@code Component} props
|
2018-05-17 13:23:11 +00:00
|
|
|
* that this instance will receive.
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
core: refactor routing
Unfortunately, as the Jitsi Meet development evolved the routing mechanism
became more complex and thre logic ended up spread across multiple parts of the
codebase, which made it hard to follow and extend.
This change aims to fix that by rewriting the routing logic and centralizing it
in (pretty much) a single place, with no implicit inter-dependencies.
In order to arrive there, however, some extra changes were needed, which were
not caught early enough and are thus part of this change:
- JitsiMeetJS initialization is now synchronous: there is nothing async about
it, and the only async requirement (Temasys support) was lifted. See [0].
- WebRTC support can be detected early: building on top of the above, WebRTC
support can now be detected immediately, so take advantage of this to simplify
how we handle unsupported browsers. See [0].
The new router takes decissions based on the Redux state at the time of
invocation. A route can be represented by either a component or a URl reference,
with the latter taking precedence. On mobile, obviously, there is no concept of
URL reference so routing is based solely on components.
[0]: https://github.com/jitsi/lib-jitsi-meet/pull/779
2018-06-29 07:58:31 +00:00
|
|
|
componentWillReceiveProps(nextProps: Props) {
|
2018-05-18 13:19:25 +00:00
|
|
|
const {
|
core: refactor routing
Unfortunately, as the Jitsi Meet development evolved the routing mechanism
became more complex and thre logic ended up spread across multiple parts of the
codebase, which made it hard to follow and extend.
This change aims to fix that by rewriting the routing logic and centralizing it
in (pretty much) a single place, with no implicit inter-dependencies.
In order to arrive there, however, some extra changes were needed, which were
not caught early enough and are thus part of this change:
- JitsiMeetJS initialization is now synchronous: there is nothing async about
it, and the only async requirement (Temasys support) was lifted. See [0].
- WebRTC support can be detected early: building on top of the above, WebRTC
support can now be detected immediately, so take advantage of this to simplify
how we handle unsupported browsers. See [0].
The new router takes decissions based on the Redux state at the time of
invocation. A route can be represented by either a component or a URl reference,
with the latter taking precedence. On mobile, obviously, there is no concept of
URL reference so routing is based solely on components.
[0]: https://github.com/jitsi/lib-jitsi-meet/pull/779
2018-06-29 07:58:31 +00:00
|
|
|
_locationURL: oldLocationURL,
|
2018-05-18 13:19:25 +00:00
|
|
|
_participantCount: oldParticipantCount,
|
core: refactor routing
Unfortunately, as the Jitsi Meet development evolved the routing mechanism
became more complex and thre logic ended up spread across multiple parts of the
codebase, which made it hard to follow and extend.
This change aims to fix that by rewriting the routing logic and centralizing it
in (pretty much) a single place, with no implicit inter-dependencies.
In order to arrive there, however, some extra changes were needed, which were
not caught early enough and are thus part of this change:
- JitsiMeetJS initialization is now synchronous: there is nothing async about
it, and the only async requirement (Temasys support) was lifted. See [0].
- WebRTC support can be detected early: building on top of the above, WebRTC
support can now be detected immediately, so take advantage of this to simplify
how we handle unsupported browsers. See [0].
The new router takes decissions based on the Redux state at the time of
invocation. A route can be represented by either a component or a URl reference,
with the latter taking precedence. On mobile, obviously, there is no concept of
URL reference so routing is based solely on components.
[0]: https://github.com/jitsi/lib-jitsi-meet/pull/779
2018-06-29 07:58:31 +00:00
|
|
|
_room: oldRoom,
|
2018-05-18 13:19:25 +00:00
|
|
|
_setToolboxVisible
|
|
|
|
} = this.props;
|
core: refactor routing
Unfortunately, as the Jitsi Meet development evolved the routing mechanism
became more complex and thre logic ended up spread across multiple parts of the
codebase, which made it hard to follow and extend.
This change aims to fix that by rewriting the routing logic and centralizing it
in (pretty much) a single place, with no implicit inter-dependencies.
In order to arrive there, however, some extra changes were needed, which were
not caught early enough and are thus part of this change:
- JitsiMeetJS initialization is now synchronous: there is nothing async about
it, and the only async requirement (Temasys support) was lifted. See [0].
- WebRTC support can be detected early: building on top of the above, WebRTC
support can now be detected immediately, so take advantage of this to simplify
how we handle unsupported browsers. See [0].
The new router takes decissions based on the Redux state at the time of
invocation. A route can be represented by either a component or a URl reference,
with the latter taking precedence. On mobile, obviously, there is no concept of
URL reference so routing is based solely on components.
[0]: https://github.com/jitsi/lib-jitsi-meet/pull/779
2018-06-29 07:58:31 +00:00
|
|
|
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();
|
core: refactor routing
Unfortunately, as the Jitsi Meet development evolved the routing mechanism
became more complex and thre logic ended up spread across multiple parts of the
codebase, which made it hard to follow and extend.
This change aims to fix that by rewriting the routing logic and centralizing it
in (pretty much) a single place, with no implicit inter-dependencies.
In order to arrive there, however, some extra changes were needed, which were
not caught early enough and are thus part of this change:
- JitsiMeetJS initialization is now synchronous: there is nothing async about
it, and the only async requirement (Temasys support) was lifted. See [0].
- WebRTC support can be detected early: building on top of the above, WebRTC
support can now be detected immediately, so take advantage of this to simplify
how we handle unsupported browsers. See [0].
The new router takes decissions based on the Redux state at the time of
invocation. A route can be represented by either a component or a URl reference,
with the latter taking precedence. On mobile, obviously, there is no concept of
URL reference so routing is based solely on components.
[0]: https://github.com/jitsi/lib-jitsi-meet/pull/779
2018-06-29 07:58:31 +00:00
|
|
|
|
|
|
|
// 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);
|
2018-05-17 13:23:11 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-10-05 14:36:59 +00:00
|
|
|
/**
|
2017-09-25 17:26:15 +00:00
|
|
|
* Implements {@link Component#componentWillUnmount()}. Invoked immediately
|
|
|
|
* before this component is unmounted and destroyed. Disconnects the
|
|
|
|
* conference described by the redux store/state.
|
2016-10-05 14:36:59 +00:00
|
|
|
*
|
|
|
|
* @inheritdoc
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
componentWillUnmount() {
|
2017-09-25 17:26:15 +00:00
|
|
|
// 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();
|
2016-10-05 14:36:59 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Implements React's {@link Component#render()}.
|
|
|
|
*
|
|
|
|
* @inheritdoc
|
|
|
|
* @returns {ReactElement}
|
|
|
|
*/
|
|
|
|
render() {
|
|
|
|
return (
|
2018-04-18 18:37:33 +00:00
|
|
|
<Container style = { styles.conference }>
|
2018-02-02 14:50:16 +00:00
|
|
|
<StatusBar
|
2018-04-19 08:50:56 +00:00
|
|
|
barStyle = 'light-content'
|
2018-02-02 14:50:16 +00:00
|
|
|
hidden = { true }
|
|
|
|
translucent = { true } />
|
2016-10-05 14:36:59 +00:00
|
|
|
|
2017-05-24 17:01:46 +00:00
|
|
|
{/*
|
|
|
|
* The LargeVideo is the lowermost stacking layer.
|
|
|
|
*/}
|
2018-04-06 21:11:01 +00:00
|
|
|
<LargeVideo onPress = { this._onClick } />
|
2016-12-12 01:02:50 +00:00
|
|
|
|
2017-11-23 16:26:47 +00:00
|
|
|
{/*
|
|
|
|
* If there is a ringing call, show the callee's info.
|
2018-02-02 13:41:30 +00:00
|
|
|
*/
|
2018-02-13 19:14:06 +00:00
|
|
|
this.props._reducedUI || <CalleeInfoContainer />
|
2018-02-02 13:41:30 +00:00
|
|
|
}
|
2017-11-23 16:26:47 +00:00
|
|
|
|
2017-09-14 10:18:47 +00:00
|
|
|
{/*
|
|
|
|
* The activity/loading indicator goes above everything, except
|
|
|
|
* the toolbox/toolbars and the dialogs.
|
|
|
|
*/
|
2017-10-02 23:08:07 +00:00
|
|
|
this.props._connecting
|
2017-12-14 15:04:35 +00:00
|
|
|
&& <TintedView>
|
2017-10-02 23:08:07 +00:00
|
|
|
<LoadingIndicator />
|
2017-12-14 15:04:35 +00:00
|
|
|
</TintedView>
|
2017-09-14 10:18:47 +00:00
|
|
|
}
|
|
|
|
|
2018-04-05 19:46:31 +00:00
|
|
|
<View
|
|
|
|
pointerEvents = 'box-none'
|
|
|
|
style = { styles.toolboxAndFilmstripContainer }>
|
2017-10-13 16:13:46 +00:00
|
|
|
{/*
|
2017-11-07 14:28:08 +00:00
|
|
|
* The Toolbox is in a stacking layer bellow the Filmstrip.
|
2017-10-13 16:13:46 +00:00
|
|
|
*/}
|
|
|
|
<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
|
2017-10-13 16:13:46 +00:00
|
|
|
* participants.
|
|
|
|
*/}
|
|
|
|
<Filmstrip />
|
|
|
|
</View>
|
2018-03-07 15:23:04 +00:00
|
|
|
<TestConnectionInfo />
|
2017-05-24 17:01:46 +00:00
|
|
|
|
2018-04-24 13:24:10 +00:00
|
|
|
{
|
|
|
|
this._renderConferenceNotification()
|
|
|
|
}
|
2018-02-12 15:53:23 +00:00
|
|
|
|
2018-06-14 09:14:32 +00:00
|
|
|
<NotificationsContainer />
|
|
|
|
|
2017-05-24 17:01:46 +00:00
|
|
|
{/*
|
2017-06-10 22:50:42 +00:00
|
|
|
* The dialogs are in the topmost stacking layers.
|
2018-02-02 13:41:30 +00:00
|
|
|
*/
|
2018-02-13 19:14:06 +00:00
|
|
|
this.props._reducedUI || <DialogContainer />
|
2018-02-02 13:41:30 +00:00
|
|
|
}
|
2016-10-05 14:36:59 +00:00
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-11-17 19:06:47 +00:00
|
|
|
_onClick: () => void;
|
|
|
|
|
2016-10-05 14:36:59 +00:00
|
|
|
/**
|
2017-04-01 05:52:40 +00:00
|
|
|
* Changes the value of the toolboxVisible state, thus allowing us to switch
|
2017-04-10 17:59:44 +00:00
|
|
|
* between Toolbox and Filmstrip and change their visibility.
|
2016-10-05 14:36:59 +00:00
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
_onClick() {
|
2018-04-16 15:06:11 +00:00
|
|
|
if (this.props._toolboxAlwaysVisible) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2017-04-01 05:52:40 +00:00
|
|
|
const toolboxVisible = !this.props._toolboxVisible;
|
2016-10-05 14:36:59 +00:00
|
|
|
|
2017-04-01 05:52:40 +00:00
|
|
|
this.props._setToolboxVisible(toolboxVisible);
|
2016-10-05 14:36:59 +00:00
|
|
|
}
|
2016-12-12 01:02:50 +00:00
|
|
|
|
2017-11-17 19:06:47 +00:00
|
|
|
_onHardwareBackPress: () => boolean;
|
|
|
|
|
2017-09-25 17:26:15 +00:00
|
|
|
/**
|
|
|
|
* Handles a hardware button press for back navigation.
|
|
|
|
*
|
|
|
|
* @returns {boolean} If the hardware button press for back navigation was
|
2017-10-01 06:35:19 +00:00
|
|
|
* handled by this {@code Conference}, then {@code true}; otherwise,
|
|
|
|
* {@code false}.
|
2017-09-25 17:26:15 +00:00
|
|
|
*/
|
|
|
|
_onHardwareBackPress() {
|
|
|
|
return this._backHandler && this.props._onHardwareBackPress();
|
|
|
|
}
|
|
|
|
|
2018-04-24 13:24:10 +00:00
|
|
|
/**
|
|
|
|
* 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;
|
2018-04-24 13:24:10 +00:00
|
|
|
}
|
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 {
|
|
|
|
/**
|
2017-08-17 13:50:49 +00:00
|
|
|
* Dispatches actions to create the desired local tracks and for
|
|
|
|
* connecting to the conference.
|
2017-02-16 23:02:40 +00:00
|
|
|
*
|
2017-08-17 13:50:49 +00:00
|
|
|
* @returns {void}
|
2017-02-16 23:02:40 +00:00
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
_onConnect() {
|
2017-08-17 13:50:49 +00:00
|
|
|
dispatch(createDesiredLocalTracks());
|
2017-07-17 15:33:49 +00:00
|
|
|
dispatch(connect());
|
2017-02-16 23:02:40 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Dispatches an action disconnecting from the conference.
|
|
|
|
*
|
2017-08-17 13:50:49 +00:00
|
|
|
* @returns {void}
|
2017-02-16 23:02:40 +00:00
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
_onDisconnect() {
|
2017-07-17 15:33:49 +00:00
|
|
|
dispatch(disconnect());
|
2017-02-16 23:02:40 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
2017-09-25 17:26:15 +00:00
|
|
|
* Handles a hardware button press for back navigation. Leaves the
|
2017-10-01 06:35:19 +00:00
|
|
|
* associated {@code Conference}.
|
2017-09-25 17:26:15 +00:00
|
|
|
*
|
|
|
|
* @returns {boolean} As the associated conference is unconditionally
|
2017-10-01 06:35:19 +00:00
|
|
|
* left and exiting the app while it renders a {@code Conference} is
|
|
|
|
* undesired, {@code true} is always returned.
|
2017-09-25 17:26:15 +00:00
|
|
|
*/
|
|
|
|
_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.
|
2017-08-17 13:50:49 +00:00
|
|
|
* @returns {void}
|
2017-02-16 23:02:40 +00:00
|
|
|
* @private
|
|
|
|
*/
|
2017-11-16 18:26:14 +00:00
|
|
|
_setToolboxVisible(visible) {
|
2017-07-17 15:33:49 +00:00
|
|
|
dispatch(setToolboxVisible(visible));
|
2017-02-16 23:02:40 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2018-02-12 17:42:38 +00:00
|
|
|
* Maps (parts of) the redux state to the associated {@code Conference}'s props.
|
2017-02-16 23:02:40 +00:00
|
|
|
*
|
2018-02-12 17:42:38 +00:00
|
|
|
* @param {Object} state - The redux state.
|
2017-02-16 23:02:40 +00:00
|
|
|
* @private
|
|
|
|
* @returns {{
|
2017-09-14 10:18:47 +00:00
|
|
|
* _connecting: boolean,
|
core: refactor routing
Unfortunately, as the Jitsi Meet development evolved the routing mechanism
became more complex and thre logic ended up spread across multiple parts of the
codebase, which made it hard to follow and extend.
This change aims to fix that by rewriting the routing logic and centralizing it
in (pretty much) a single place, with no implicit inter-dependencies.
In order to arrive there, however, some extra changes were needed, which were
not caught early enough and are thus part of this change:
- JitsiMeetJS initialization is now synchronous: there is nothing async about
it, and the only async requirement (Temasys support) was lifted. See [0].
- WebRTC support can be detected early: building on top of the above, WebRTC
support can now be detected immediately, so take advantage of this to simplify
how we handle unsupported browsers. See [0].
The new router takes decissions based on the Redux state at the time of
invocation. A route can be represented by either a component or a URl reference,
with the latter taking precedence. On mobile, obviously, there is no concept of
URL reference so routing is based solely on components.
[0]: https://github.com/jitsi/lib-jitsi-meet/pull/779
2018-06-29 07:58:31 +00:00
|
|
|
* _locationURL: URL,
|
2018-05-18 13:19:25 +00:00
|
|
|
* _participantCount: number,
|
2018-02-13 19:14:06 +00:00
|
|
|
* _reducedUI: boolean,
|
core: refactor routing
Unfortunately, as the Jitsi Meet development evolved the routing mechanism
became more complex and thre logic ended up spread across multiple parts of the
codebase, which made it hard to follow and extend.
This change aims to fix that by rewriting the routing logic and centralizing it
in (pretty much) a single place, with no implicit inter-dependencies.
In order to arrive there, however, some extra changes were needed, which were
not caught early enough and are thus part of this change:
- JitsiMeetJS initialization is now synchronous: there is nothing async about
it, and the only async requirement (Temasys support) was lifted. See [0].
- WebRTC support can be detected early: building on top of the above, WebRTC
support can now be detected immediately, so take advantage of this to simplify
how we handle unsupported browsers. See [0].
The new router takes decissions based on the Redux state at the time of
invocation. A route can be represented by either a component or a URl reference,
with the latter taking precedence. On mobile, obviously, there is no concept of
URL reference so routing is based solely on components.
[0]: https://github.com/jitsi/lib-jitsi-meet/pull/779
2018-06-29 07:58:31 +00:00
|
|
|
* _room: string,
|
2018-04-16 15:06:11 +00:00
|
|
|
* _toolboxVisible: boolean,
|
|
|
|
* _toolboxAlwaysVisible: boolean
|
2017-02-16 23:02:40 +00:00
|
|
|
* }}
|
|
|
|
*/
|
|
|
|
function _mapStateToProps(state) {
|
core: refactor routing
Unfortunately, as the Jitsi Meet development evolved the routing mechanism
became more complex and thre logic ended up spread across multiple parts of the
codebase, which made it hard to follow and extend.
This change aims to fix that by rewriting the routing logic and centralizing it
in (pretty much) a single place, with no implicit inter-dependencies.
In order to arrive there, however, some extra changes were needed, which were
not caught early enough and are thus part of this change:
- JitsiMeetJS initialization is now synchronous: there is nothing async about
it, and the only async requirement (Temasys support) was lifted. See [0].
- WebRTC support can be detected early: building on top of the above, WebRTC
support can now be detected immediately, so take advantage of this to simplify
how we handle unsupported browsers. See [0].
The new router takes decissions based on the Redux state at the time of
invocation. A route can be represented by either a component or a URl reference,
with the latter taking precedence. On mobile, obviously, there is no concept of
URL reference so routing is based solely on components.
[0]: https://github.com/jitsi/lib-jitsi-meet/pull/779
2018-06-29 07:58:31 +00:00
|
|
|
const { connecting, connection, locationURL }
|
|
|
|
= state['features/base/connection'];
|
|
|
|
const {
|
|
|
|
conference,
|
|
|
|
joining,
|
|
|
|
leaving,
|
|
|
|
room
|
|
|
|
} = state['features/base/conference'];
|
2018-02-02 13:41:30 +00:00
|
|
|
const { reducedUI } = state['features/base/responsive-ui'];
|
2018-04-16 15:06:11 +00:00
|
|
|
const { alwaysVisible, visible } = state['features/toolbox'];
|
2017-09-14 10:18:47 +00:00
|
|
|
|
|
|
|
// 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 {
|
2017-09-14 10:18:47 +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.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @type {boolean}
|
|
|
|
*/
|
|
|
|
_connecting: Boolean(connecting_),
|
|
|
|
|
core: refactor routing
Unfortunately, as the Jitsi Meet development evolved the routing mechanism
became more complex and thre logic ended up spread across multiple parts of the
codebase, which made it hard to follow and extend.
This change aims to fix that by rewriting the routing logic and centralizing it
in (pretty much) a single place, with no implicit inter-dependencies.
In order to arrive there, however, some extra changes were needed, which were
not caught early enough and are thus part of this change:
- JitsiMeetJS initialization is now synchronous: there is nothing async about
it, and the only async requirement (Temasys support) was lifted. See [0].
- WebRTC support can be detected early: building on top of the above, WebRTC
support can now be detected immediately, so take advantage of this to simplify
how we handle unsupported browsers. See [0].
The new router takes decissions based on the Redux state at the time of
invocation. A route can be represented by either a component or a URl reference,
with the latter taking precedence. On mobile, obviously, there is no concept of
URL reference so routing is based solely on components.
[0]: https://github.com/jitsi/lib-jitsi-meet/pull/779
2018-06-29 07:58:31 +00:00
|
|
|
/**
|
|
|
|
* Current conference's full URL.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @type {URL}
|
|
|
|
*/
|
|
|
|
_locationURL: locationURL,
|
|
|
|
|
2018-05-17 13:23:11 +00:00
|
|
|
/**
|
2018-05-18 13:19:25 +00:00
|
|
|
* The number of participants in the conference.
|
2018-05-17 13:23:11 +00:00
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @type {number}
|
|
|
|
*/
|
2018-05-22 22:41:53 +00:00
|
|
|
_participantCount: getParticipantCount(state),
|
2018-05-17 13:23:11 +00:00
|
|
|
|
2018-02-02 13:41:30 +00:00
|
|
|
/**
|
2018-02-13 19:14:06 +00:00
|
|
|
* The indicator which determines whether the UI is reduced (to
|
|
|
|
* accommodate smaller display areas).
|
2018-02-02 13:41:30 +00:00
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @type {boolean}
|
|
|
|
*/
|
|
|
|
_reducedUI: reducedUI,
|
|
|
|
|
core: refactor routing
Unfortunately, as the Jitsi Meet development evolved the routing mechanism
became more complex and thre logic ended up spread across multiple parts of the
codebase, which made it hard to follow and extend.
This change aims to fix that by rewriting the routing logic and centralizing it
in (pretty much) a single place, with no implicit inter-dependencies.
In order to arrive there, however, some extra changes were needed, which were
not caught early enough and are thus part of this change:
- JitsiMeetJS initialization is now synchronous: there is nothing async about
it, and the only async requirement (Temasys support) was lifted. See [0].
- WebRTC support can be detected early: building on top of the above, WebRTC
support can now be detected immediately, so take advantage of this to simplify
how we handle unsupported browsers. See [0].
The new router takes decissions based on the Redux state at the time of
invocation. A route can be represented by either a component or a URl reference,
with the latter taking precedence. On mobile, obviously, there is no concept of
URL reference so routing is based solely on components.
[0]: https://github.com/jitsi/lib-jitsi-meet/pull/779
2018-06-29 07:58:31 +00:00
|
|
|
/**
|
|
|
|
* 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}
|
|
|
|
*/
|
2018-04-16 15:06:11 +00:00
|
|
|
_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
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2017-11-17 19:06:47 +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);
|