rn,blank-page: refactor BlankPage
- Remove network-activity "feature"
- It wasn't in use
- It relied on internal React Native components, bound to break anytime
- Show an infinite loading indicator
- Style it just like the LoadConfigOverlay
- Since it kinda represents the opposite, an "unload" then SDK is done
This commit is contained in:
Saúl Ibarra Corretgé
Saúl Ibarra Corretgé
parent
97d75c2cb9
commit
d33b700477
react/features
mobile/network-activity
welcome/components
|
|
@ -1,37 +0,0 @@
|
|||
/**
|
||||
* The type of redux action to add a network request to the redux store/state.
|
||||
*
|
||||
* {
|
||||
* type: _ADD_NETWORK_REQUEST,
|
||||
* request: Object
|
||||
* }
|
||||
*
|
||||
* @protected
|
||||
*/
|
||||
export const _ADD_NETWORK_REQUEST = '_ADD_NETWORK_REQUEST';
|
||||
|
||||
/**
|
||||
* The type of redux action to remove all network requests from the redux
|
||||
* store/state.
|
||||
*
|
||||
* {
|
||||
* type: _REMOVE_ALL_NETWORK_REQUESTS,
|
||||
* }
|
||||
*
|
||||
* @protected
|
||||
*/
|
||||
export const _REMOVE_ALL_NETWORK_REQUESTS
|
||||
= '_REMOVE_ALL_NETWORK_REQUESTS';
|
||||
|
||||
/**
|
||||
* The type of redux action to remove a network request from the redux
|
||||
* store/state.
|
||||
*
|
||||
* {
|
||||
* type: _REMOVE_NETWORK_REQUEST,
|
||||
* request: Object
|
||||
* }
|
||||
*
|
||||
* @protected
|
||||
*/
|
||||
export const _REMOVE_NETWORK_REQUEST = '_REMOVE_NETWORK_REQUEST';
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { LoadingIndicator } from '../../../base/react';
|
||||
import { connect } from '../../../base/redux';
|
||||
|
||||
/**
|
||||
* The type of the React {@code Component} props of
|
||||
* {@link NetworkActivityIndicator}.
|
||||
*/
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* Indicates whether there is network activity i.e. ongoing network
|
||||
* requests.
|
||||
*/
|
||||
_networkActivity: boolean
|
||||
};
|
||||
|
||||
/**
|
||||
* The React {@code Component} which renders a progress indicator when there
|
||||
* are ongoing network requests.
|
||||
*/
|
||||
class NetworkActivityIndicator extends Component<Props> {
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
render() {
|
||||
return this.props._networkActivity ? <LoadingIndicator /> : null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Maps (parts of) the redux state to the React {@code Component} props of
|
||||
* {@code NetworkActivityIndicator}.
|
||||
*
|
||||
* @param {Object} state - The redux state.
|
||||
* @private
|
||||
* @returns {{
|
||||
* _networkActivity: boolean
|
||||
* }}
|
||||
*/
|
||||
function _mapStateToProps(state) {
|
||||
const { requests } = state['features/network-activity'];
|
||||
|
||||
return {
|
||||
_networkActivity: Boolean(requests && requests.size)
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(_mapStateToProps)(NetworkActivityIndicator);
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export {
|
||||
default as NetworkActivityIndicator
|
||||
} from './NetworkActivityIndicator';
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export * from './components';
|
||||
|
||||
import './middleware';
|
||||
import './reducer';
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
/* @flow */
|
||||
|
||||
import XHRInterceptor from 'react-native/Libraries/Network/XHRInterceptor';
|
||||
|
||||
import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../base/app';
|
||||
import { MiddlewareRegistry } from '../../base/redux';
|
||||
|
||||
import {
|
||||
_ADD_NETWORK_REQUEST,
|
||||
_REMOVE_ALL_NETWORK_REQUESTS,
|
||||
_REMOVE_NETWORK_REQUEST
|
||||
} from './actionTypes';
|
||||
|
||||
/**
|
||||
* Middleware which captures app startup and conference actions in order to
|
||||
* clear the image cache.
|
||||
*
|
||||
* @returns {Function}
|
||||
*/
|
||||
MiddlewareRegistry.register(store => next => action => {
|
||||
const result = next(action);
|
||||
|
||||
switch (action.type) {
|
||||
case APP_WILL_MOUNT:
|
||||
_startNetInterception(store);
|
||||
break;
|
||||
|
||||
case APP_WILL_UNMOUNT:
|
||||
_stopNetInterception(store);
|
||||
break;
|
||||
}
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
/**
|
||||
* Starts intercepting network requests. Only XHR requests are supported at the
|
||||
* moment.
|
||||
*
|
||||
* Ongoing request information is kept in redux, and it's removed as soon as a
|
||||
* given request is complete.
|
||||
*
|
||||
* @param {Object} store - The redux store.
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
function _startNetInterception({ dispatch }) {
|
||||
XHRInterceptor.setOpenCallback((method, url, xhr) => dispatch({
|
||||
type: _ADD_NETWORK_REQUEST,
|
||||
request: xhr,
|
||||
|
||||
// The following are not really necessary read anywhere at the time of
|
||||
// this writing but are provided anyway if the reducer chooses to
|
||||
// remember them:
|
||||
method,
|
||||
url
|
||||
}));
|
||||
XHRInterceptor.setResponseCallback((...args) => dispatch({
|
||||
type: _REMOVE_NETWORK_REQUEST,
|
||||
|
||||
// XXX The XHR is the last argument of the responseCallback.
|
||||
request: args[args.length - 1]
|
||||
}));
|
||||
|
||||
XHRInterceptor.enableInterception();
|
||||
}
|
||||
|
||||
/**
|
||||
* Stops intercepting network requests.
|
||||
*
|
||||
* @param {Object} store - The redux store.
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
function _stopNetInterception({ dispatch }) {
|
||||
XHRInterceptor.disableInterception();
|
||||
|
||||
dispatch({
|
||||
type: _REMOVE_ALL_NETWORK_REQUESTS
|
||||
});
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import { ReducerRegistry, set } from '../../base/redux';
|
||||
|
||||
import {
|
||||
_ADD_NETWORK_REQUEST,
|
||||
_REMOVE_ALL_NETWORK_REQUESTS,
|
||||
_REMOVE_NETWORK_REQUEST
|
||||
} from './actionTypes';
|
||||
|
||||
/**
|
||||
* The default/initial redux state of the feature network-activity.
|
||||
*
|
||||
* @type {{
|
||||
* requests: Map
|
||||
* }}
|
||||
*/
|
||||
const DEFAULT_STATE = {
|
||||
/**
|
||||
* The ongoing network requests i.e. the network request which have been
|
||||
* added to the redux store/state and have not been removed.
|
||||
*
|
||||
* @type {Map}
|
||||
*/
|
||||
requests: new Map()
|
||||
};
|
||||
|
||||
ReducerRegistry.register(
|
||||
'features/network-activity',
|
||||
(state = DEFAULT_STATE, action) => {
|
||||
switch (action.type) {
|
||||
case _ADD_NETWORK_REQUEST: {
|
||||
const {
|
||||
type, // eslint-disable-line no-unused-vars
|
||||
|
||||
request: key,
|
||||
...value
|
||||
} = action;
|
||||
const requests = new Map(state.requests);
|
||||
|
||||
requests.set(key, value);
|
||||
|
||||
return set(state, 'requests', requests);
|
||||
}
|
||||
|
||||
case _REMOVE_ALL_NETWORK_REQUESTS:
|
||||
return set(state, 'requests', DEFAULT_STATE.requests);
|
||||
|
||||
case _REMOVE_NETWORK_REQUEST: {
|
||||
const { request: key } = action;
|
||||
const requests = new Map(state.requests);
|
||||
|
||||
requests.delete(key);
|
||||
|
||||
return set(state, 'requests', requests);
|
||||
}
|
||||
}
|
||||
|
||||
return state;
|
||||
});
|
||||
|
|
@ -1,18 +1,27 @@
|
|||
// @flow
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import type { Dispatch } from 'redux';
|
||||
|
||||
import { ColorSchemeRegistry } from '../../base/color-scheme';
|
||||
import { LoadingIndicator } from '../../base/react';
|
||||
import { connect } from '../../base/redux';
|
||||
import { StyleType } from '../../base/styles';
|
||||
import { destroyLocalTracks } from '../../base/tracks';
|
||||
import { NetworkActivityIndicator } from '../../mobile/network-activity';
|
||||
|
||||
import LocalVideoTrackUnderlay from './LocalVideoTrackUnderlay';
|
||||
import styles from './styles';
|
||||
|
||||
/**
|
||||
* The type of React {@code Component} props of {@link BlankPage}.
|
||||
*/
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* The color schemed style of the component.
|
||||
*/
|
||||
_styles: StyleType,
|
||||
|
||||
dispatch: Dispatch<any>
|
||||
};
|
||||
|
||||
|
|
@ -40,12 +49,32 @@ class BlankPage extends Component<Props> {
|
|||
* @returns {ReactElement}
|
||||
*/
|
||||
render() {
|
||||
const { _styles } = this.props;
|
||||
|
||||
return (
|
||||
<LocalVideoTrackUnderlay>
|
||||
<NetworkActivityIndicator />
|
||||
</LocalVideoTrackUnderlay>
|
||||
<View
|
||||
style = { [
|
||||
styles.blankPageWrapper,
|
||||
_styles.loadingOverlayWrapper
|
||||
] }>
|
||||
<LoadingIndicator
|
||||
color = { _styles.indicatorColor }
|
||||
size = 'large' />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default connect()(BlankPage);
|
||||
/**
|
||||
* Maps part of the Redux state to the props of this component.
|
||||
*
|
||||
* @param {Object} state - The Redux state.
|
||||
* @returns {Props}
|
||||
*/
|
||||
function _mapStateToProps(state) {
|
||||
return {
|
||||
_styles: ColorSchemeRegistry.get(state, 'LoadConfigOverlay')
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(_mapStateToProps)(BlankPage);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
// @flow
|
||||
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { BoxModel, ColorPalette } from '../../base/styles';
|
||||
|
||||
export const PLACEHOLDER_TEXT_COLOR = 'rgba(255, 255, 255, 0.3)';
|
||||
|
|
@ -38,6 +40,17 @@ export default {
|
|||
flexDirection: 'row'
|
||||
},
|
||||
|
||||
/**
|
||||
* View that is rendered when there is no welcome page.
|
||||
*/
|
||||
blankPageWrapper: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
|
||||
/**
|
||||
* Join button style.
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue