a7ee632f43
Implement a React Component which displays children as an overlay of local video. The WelcomePage implemented such a component inside of it among other WelcomePage-specific logic so I split LocalVideoTrackUnderlay out of it. The new Component is used on the BlankPage which may be displayed in the future not only when the WelcomePage is disabled but also when there are long running network requests, for example.
118 lines
3.1 KiB
JavaScript
118 lines
3.1 KiB
JavaScript
/* @flow */
|
|
|
|
import PropTypes from 'prop-types';
|
|
import React, { Component } from 'react';
|
|
import { View } from 'react-native';
|
|
import { connect } from 'react-redux';
|
|
|
|
import { VideoTrack } from '../../base/media';
|
|
import { getLocalVideoTrack } from '../../base/tracks';
|
|
|
|
import styles from './styles';
|
|
|
|
/**
|
|
* Implements a React {@code Component} which underlays the local video track,
|
|
* if any, underneath its children.
|
|
*/
|
|
class LocalVideoTrackUnderlay extends Component {
|
|
state: {
|
|
|
|
/**
|
|
* The style of <tt>LocalVideoTrackUnderlay</tt> which is a combination
|
|
* of its default style and the consumer-specified style.
|
|
*/
|
|
style: Object
|
|
};
|
|
|
|
/**
|
|
* {@code LocalVideoTrackUnderlay}'s React {@code Component} prop types.
|
|
*
|
|
* @static
|
|
*/
|
|
static propTypes = {
|
|
_localVideoTrack: PropTypes.object,
|
|
children: PropTypes.node,
|
|
style: PropTypes.object
|
|
};
|
|
|
|
/**
|
|
* Initializes a new {@code LocalVideoTrackUnderlay} instance.
|
|
*
|
|
* @param {Object} props - The read-only React {@code Component} props with
|
|
* which the new instance is to be initialized.
|
|
*/
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.componentWillReceiveProps(props);
|
|
}
|
|
|
|
/**
|
|
* Notifies this mounted React {@code Component} that it will receive new
|
|
* props. Forks (in Facebook/React speak) the prop {@code style} because its
|
|
* value is to be combined with the default style.
|
|
*
|
|
* @inheritdoc
|
|
* @param {Object} nextProps - The read-only React {@code Component} props
|
|
* that this instance will receive.
|
|
* @returns {void}
|
|
*/
|
|
componentWillReceiveProps(nextProps) {
|
|
// style
|
|
const prevStyle = this.props && this.props.style;
|
|
const nextStyle = nextProps && nextProps.style;
|
|
const assignState = !this.state;
|
|
|
|
if (prevStyle !== nextStyle || assignState) {
|
|
const nextState = {
|
|
style: {
|
|
...styles.localVideoTrackUnderlay,
|
|
...nextStyle
|
|
}
|
|
};
|
|
|
|
if (assignState) {
|
|
this.state = nextState;
|
|
} else {
|
|
this.setState(nextState);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Implements React's {@link Component#render()}.
|
|
*
|
|
* @inheritdoc
|
|
* @override
|
|
* @returns {ReactElement}
|
|
*/
|
|
render() {
|
|
return (
|
|
<View style = { this.state.style }>
|
|
<VideoTrack videoTrack = { this.props._localVideoTrack } />
|
|
<View style = { styles.localVideoTrackOverlay }>
|
|
{ this.props.children }
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Maps (parts of) the redux state to the React {@code Component} props of
|
|
* {@code LocalVideoTrackUnderlay}.
|
|
*
|
|
* @param {Object} state - The redux state.
|
|
* @private
|
|
* @returns {{
|
|
* _localVideoTrack: (Track|undefined)
|
|
* }}
|
|
*/
|
|
function _mapStateToProps(state) {
|
|
return {
|
|
_localVideoTrack: getLocalVideoTrack(state['features/base/tracks'])
|
|
};
|
|
}
|
|
|
|
export default connect(_mapStateToProps)(LocalVideoTrackUnderlay);
|