diff --git a/react/features/welcome/components/AbstractBlankPage.js b/react/features/welcome/components/AbstractBlankPage.js new file mode 100644 index 000000000..41d7b85b9 --- /dev/null +++ b/react/features/welcome/components/AbstractBlankPage.js @@ -0,0 +1,43 @@ +import PropTypes from 'prop-types'; +import { Component } from 'react'; + +import { destroyLocalTracks } from '../../base/tracks'; + +/** + * A React Component which represents a blank page. Destroys the local + * tracks upon mounting since no media is desired when this component utilized. + * Renders nothing. + */ +export default class AbstractBlankPage extends Component { + /** + * AbstractBlankPage React Component's prop types. + * + * @static + */ + static propTypes = { + dispatch: PropTypes.func + }; + + /** + * Destroys the local tracks (if any) since no media is desired when this + * component is rendered. + * + * @inheritdoc + * @returns {void} + */ + componentWillMount() { + this.props.dispatch(destroyLocalTracks()); + } + + /** + * Implements React's {@link Component#render()}. Returns null because the + * purpose of this component is to destroy the local tracks and render + * nothing. + * + * @inheritdoc + * @returns {null} + */ + render() { + return null; + } +} diff --git a/react/features/welcome/components/BlankPage.js b/react/features/welcome/components/BlankPage.js deleted file mode 100644 index cc6ae3834..000000000 --- a/react/features/welcome/components/BlankPage.js +++ /dev/null @@ -1,49 +0,0 @@ -import PropTypes from 'prop-types'; -import { Component } from 'react'; -import { connect } from 'react-redux'; - -import { destroyLocalTracks } from '../../base/tracks'; - -/** - * A React Component which represents a blank page. It renders nothing - * and destroys local tracks upon being mounted since no media is desired when - * this component is rendered. - * - * The use case which prompted the introduction of this component is mobile - * where SDK users probably disable the Welcome page. - */ -class BlankPage extends Component { - /** - * {@code BlankPage} component's property types. - * - * @static - */ - static propTypes = { - dispatch: PropTypes.func - }; - - /** - * Destroys the local tracks (if any) since no media is desired when this - * component is rendered. - * - * @inheritdoc - * @returns {void} - */ - componentWillMount() { - this.props.dispatch(destroyLocalTracks()); - } - - /** - * Implements React's {@link Component#render()}. In this particular case - * we return null, because the entire purpose of this component is to render - * nothing. - * - * @inheritdoc - * @returns {null} - */ - render() { - return null; - } -} - -export default connect()(BlankPage); diff --git a/react/features/welcome/components/BlankPage.native.js b/react/features/welcome/components/BlankPage.native.js new file mode 100644 index 000000000..41c5e4e52 --- /dev/null +++ b/react/features/welcome/components/BlankPage.native.js @@ -0,0 +1,71 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { ActivityIndicator, View } from 'react-native'; +import { connect } from 'react-redux'; + +import AbstractBlankPage from './AbstractBlankPage'; +import styles from './styles'; + +/** + * Mobile/React Native implementation of AbstractBlankPage. Since this + * is the Component rendered when there is no WelcomePage, + * it will show a progress indicator when there are ongoing network requests + * (notably, the loading of config.js before joining a conference). The use case + * which prompted the introduction of this Component is mobile where + * SDK users probably disable the WelcomePage. + */ +class BlankPage extends AbstractBlankPage { + /** + * BlankPage React Component's prop types. + * + * @static + */ + static propTypes = { + ...AbstractBlankPage.propTypes, + + /** + * Indicates whether there is network activity i.e. ongoing network + * requests. + * + * @private + */ + _networkActivity: PropTypes.bool + }; + + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @override + * @returns {ReactElement} + */ + render() { + return ( + + + + ); + } +} + +/** + * Maps (parts of) the redux state to the React Component props of + * BlankPage. + * + * @param {Object} state - The redux state. + * @private + * @returns {{ + * networkActivity: boolean + * }} + */ +function _mapStateToProps(state) { + const { requests } = state['features/net-interceptor']; + + return { + _networkActivity: Boolean(requests && Object.keys(requests).length) + }; +} + +export default connect(_mapStateToProps)(BlankPage); diff --git a/react/features/welcome/components/BlankPage.web.js b/react/features/welcome/components/BlankPage.web.js new file mode 100644 index 000000000..4e15d0146 --- /dev/null +++ b/react/features/welcome/components/BlankPage.web.js @@ -0,0 +1,10 @@ +import AbstractBlankPage from './AbstractBlankPage'; + +/** + * Default BlankPage implementation for Web/React. It's not currently + * in use but it's here for symmetry with mobile/React Native should we choose + * to take advantage of it in the future. Destroys the local tracks and renders + * nothing. + */ +export default class BlankPage extends AbstractBlankPage { +} diff --git a/react/features/welcome/components/styles.js b/react/features/welcome/components/styles.js index 56b510674..7c606c872 100644 --- a/react/features/welcome/components/styles.js +++ b/react/features/welcome/components/styles.js @@ -11,9 +11,21 @@ import { const TEXT_COLOR = ColorPalette.white; /** - * The styles of WelcomePage. + * The styles of the React Components of the feature welcome including + * WelcomePage and BlankPage. */ export default createStyleSheet({ + /** + * The style of BlankPage. + */ + blankPage: { + alignItems: 'center', + backgroundColor: 'transparent', + flex: 1, + flexDirection: 'column', + justifyContent: 'center' + }, + /** * Join button style. */