Consistent naming of Component props mapped from the Redux state
Until we make a decision on access modifier hints and adopt a respective coding style, consistency is king.
This commit is contained in:
parent
88eabf23f4
commit
3aff812ee2
|
@ -19,7 +19,13 @@ class FilmStrip extends Component {
|
||||||
* @static
|
* @static
|
||||||
*/
|
*/
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
participants: React.PropTypes.array,
|
/**
|
||||||
|
* The participants in the conference.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @type {Participant[]}
|
||||||
|
*/
|
||||||
|
_participants: React.PropTypes.array,
|
||||||
visible: React.PropTypes.bool.isRequired
|
visible: React.PropTypes.bool.isRequired
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -43,7 +49,7 @@ class FilmStrip extends Component {
|
||||||
showsHorizontalScrollIndicator = { false }
|
showsHorizontalScrollIndicator = { false }
|
||||||
showsVerticalScrollIndicator = { false }>
|
showsVerticalScrollIndicator = { false }>
|
||||||
{
|
{
|
||||||
this._sort(this.props.participants)
|
this._sort(this.props._participants)
|
||||||
.map(p =>
|
.map(p =>
|
||||||
<Thumbnail
|
<Thumbnail
|
||||||
key = { p.id }
|
key = { p.id }
|
||||||
|
@ -94,12 +100,18 @@ class FilmStrip extends Component {
|
||||||
*
|
*
|
||||||
* @param {Object} state - Redux state.
|
* @param {Object} state - Redux state.
|
||||||
* @returns {{
|
* @returns {{
|
||||||
* participants: Participant[],
|
* _participants: Participant[],
|
||||||
* }}
|
* }}
|
||||||
*/
|
*/
|
||||||
function mapStateToProps(state) {
|
function mapStateToProps(state) {
|
||||||
return {
|
return {
|
||||||
participants: state['features/base/participants']
|
/**
|
||||||
|
* The participants in the conference.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @type {Participant[]}
|
||||||
|
*/
|
||||||
|
_participants: state['features/base/participants']
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -26,11 +26,11 @@ class Thumbnail extends Component {
|
||||||
* @static
|
* @static
|
||||||
*/
|
*/
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
audioTrack: React.PropTypes.object,
|
_audioTrack: React.PropTypes.object,
|
||||||
|
_largeVideo: React.PropTypes.object,
|
||||||
|
_videoTrack: React.PropTypes.object,
|
||||||
dispatch: React.PropTypes.func,
|
dispatch: React.PropTypes.func,
|
||||||
largeVideo: React.PropTypes.object,
|
participant: React.PropTypes.object
|
||||||
participant: React.PropTypes.object,
|
|
||||||
videoTrack: React.PropTypes.object
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -64,12 +64,10 @@ class Thumbnail extends Component {
|
||||||
* @returns {ReactElement}
|
* @returns {ReactElement}
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
const {
|
const audioTrack = this.props._audioTrack;
|
||||||
audioTrack,
|
const largeVideo = this.props._largeVideo;
|
||||||
largeVideo,
|
const participant = this.props.participant;
|
||||||
participant,
|
const videoTrack = this.props._videoTrack;
|
||||||
videoTrack
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
let style = styles.thumbnail;
|
let style = styles.thumbnail;
|
||||||
|
|
||||||
|
@ -136,9 +134,9 @@ class Thumbnail extends Component {
|
||||||
* @param {Object} state - Redux state.
|
* @param {Object} state - Redux state.
|
||||||
* @param {Object} ownProps - Properties of component.
|
* @param {Object} ownProps - Properties of component.
|
||||||
* @returns {{
|
* @returns {{
|
||||||
* audioTrack: Track,
|
* _audioTrack: Track,
|
||||||
* largeVideo: Object,
|
* _largeVideo: Object,
|
||||||
* videoTrack: Track
|
* _videoTrack: Track
|
||||||
* }}
|
* }}
|
||||||
*/
|
*/
|
||||||
function mapStateToProps(state, ownProps) {
|
function mapStateToProps(state, ownProps) {
|
||||||
|
@ -154,9 +152,9 @@ function mapStateToProps(state, ownProps) {
|
||||||
= getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, id);
|
= getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, id);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
audioTrack,
|
_audioTrack: audioTrack,
|
||||||
largeVideo,
|
_largeVideo: largeVideo,
|
||||||
videoTrack
|
_videoTrack: videoTrack
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -19,15 +19,18 @@ export class AbstractToolbar extends Component {
|
||||||
* @static
|
* @static
|
||||||
*/
|
*/
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
audioMuted: React.PropTypes.bool,
|
_audioMuted: React.PropTypes.bool,
|
||||||
dispatch: React.PropTypes.func,
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The indicator which determines whether the conference is
|
* The indicator which determines whether the conference is
|
||||||
* locked/password-protected.
|
* locked/password-protected.
|
||||||
|
*
|
||||||
|
* @protected
|
||||||
|
* @type {boolean}
|
||||||
*/
|
*/
|
||||||
locked: React.PropTypes.bool,
|
_locked: React.PropTypes.bool,
|
||||||
videoMuted: React.PropTypes.bool,
|
_videoMuted: React.PropTypes.bool,
|
||||||
|
dispatch: React.PropTypes.func,
|
||||||
visible: React.PropTypes.bool.isRequired
|
visible: React.PropTypes.bool.isRequired
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -65,7 +68,7 @@ export class AbstractToolbar extends Component {
|
||||||
let iconStyle;
|
let iconStyle;
|
||||||
let style = styles.primaryToolbarButton;
|
let style = styles.primaryToolbarButton;
|
||||||
|
|
||||||
if (this.props[`${mediaType}Muted`]) {
|
if (this.props[`_${mediaType}Muted`]) {
|
||||||
iconName = this[`${mediaType}MutedIcon`];
|
iconName = this[`${mediaType}MutedIcon`];
|
||||||
iconStyle = styles.whiteIcon;
|
iconStyle = styles.whiteIcon;
|
||||||
style = {
|
style = {
|
||||||
|
@ -135,22 +138,27 @@ export class AbstractToolbar extends Component {
|
||||||
* Maps parts of media state to component props.
|
* Maps parts of media state to component props.
|
||||||
*
|
*
|
||||||
* @param {Object} state - Redux state.
|
* @param {Object} state - Redux state.
|
||||||
* @returns {{ audioMuted: boolean, videoMuted: boolean }}
|
* @returns {{
|
||||||
|
* _audioMuted: boolean,
|
||||||
|
* _locked: boolean,
|
||||||
|
* _videoMuted: boolean
|
||||||
|
* }}
|
||||||
*/
|
*/
|
||||||
export function mapStateToProps(state) {
|
export function mapStateToProps(state) {
|
||||||
const conference = state['features/base/conference'];
|
const conference = state['features/base/conference'];
|
||||||
const media = state['features/base/media'];
|
const media = state['features/base/media'];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
audioMuted: media.audio.muted,
|
_audioMuted: media.audio.muted,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The indicator which determines whether the conference is
|
* The indicator which determines whether the conference is
|
||||||
* locked/password-protected.
|
* locked/password-protected.
|
||||||
*
|
*
|
||||||
|
* @protected
|
||||||
* @type {boolean}
|
* @type {boolean}
|
||||||
*/
|
*/
|
||||||
locked: conference.locked,
|
_locked: conference.locked,
|
||||||
videoMuted: media.video.muted
|
_videoMuted: media.video.muted
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -123,7 +123,7 @@ class Toolbar extends AbstractToolbar {
|
||||||
underlayColor = { underlayColor } />
|
underlayColor = { underlayColor } />
|
||||||
<ToolbarButton
|
<ToolbarButton
|
||||||
iconName = {
|
iconName = {
|
||||||
this.props.locked ? 'security-locked' : 'security'
|
this.props._locked ? 'security-locked' : 'security'
|
||||||
}
|
}
|
||||||
iconStyle = { iconStyle }
|
iconStyle = { iconStyle }
|
||||||
onClick = { this._onRoomLock }
|
onClick = { this._onRoomLock }
|
||||||
|
|
|
@ -18,9 +18,9 @@ export class AbstractWelcomePage extends Component {
|
||||||
* @static
|
* @static
|
||||||
*/
|
*/
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
dispatch: React.PropTypes.func,
|
_localVideoTrack: React.PropTypes.object,
|
||||||
localVideoTrack: React.PropTypes.object,
|
_room: React.PropTypes.string,
|
||||||
room: React.PropTypes.string
|
dispatch: React.PropTypes.func
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -69,7 +69,7 @@ export class AbstractWelcomePage extends Component {
|
||||||
* @param {Object} nextProps - New props component will receive.
|
* @param {Object} nextProps - New props component will receive.
|
||||||
*/
|
*/
|
||||||
componentWillReceiveProps(nextProps) {
|
componentWillReceiveProps(nextProps) {
|
||||||
this.setState({ room: nextProps.room });
|
this.setState({ room: nextProps._room });
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -167,7 +167,7 @@ export class AbstractWelcomePage extends Component {
|
||||||
*/
|
*/
|
||||||
_renderLocalVideo() {
|
_renderLocalVideo() {
|
||||||
return (
|
return (
|
||||||
<VideoTrack videoTrack = { this.props.localVideoTrack } />
|
<VideoTrack videoTrack = { this.props._localVideoTrack } />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -202,8 +202,8 @@ export class AbstractWelcomePage extends Component {
|
||||||
*
|
*
|
||||||
* @param {Object} state - Redux state.
|
* @param {Object} state - Redux state.
|
||||||
* @returns {{
|
* @returns {{
|
||||||
* localVideoTrack: (Track|undefined),
|
* _localVideoTrack: (Track|undefined),
|
||||||
* room: string
|
* _room: string
|
||||||
* }}
|
* }}
|
||||||
*/
|
*/
|
||||||
export function mapStateToProps(state) {
|
export function mapStateToProps(state) {
|
||||||
|
@ -211,7 +211,7 @@ export function mapStateToProps(state) {
|
||||||
const tracks = state['features/base/tracks'];
|
const tracks = state['features/base/tracks'];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
localVideoTrack: getLocalVideoTrack(tracks),
|
_localVideoTrack: getLocalVideoTrack(tracks),
|
||||||
room: conference.room
|
_room: conference.room
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue