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.

react/features/film-strip/components/FilmStrip.js

@@ -19,7 +19,13 @@ class FilmStrip extends Component {
      * @static
      */
     static propTypes = {
-        participants: React.PropTypes.array,
+        /**
+         * The participants in the conference.
+         *
+         * @private
+         * @type {Participant[]}
+         */
+        _participants: React.PropTypes.array,
         visible: React.PropTypes.bool.isRequired
     }
 
@@ -43,7 +49,7 @@ class FilmStrip extends Component {
                     showsHorizontalScrollIndicator = { false }
                     showsVerticalScrollIndicator = { false }>
                     {
-                        this._sort(this.props.participants)
+                        this._sort(this.props._participants)
                             .map(p =>
                                 <Thumbnail
                                     key = { p.id }
@@ -94,12 +100,18 @@ class FilmStrip extends Component {
  *
  * @param {Object} state - Redux state.
  * @returns {{
- *      participants: Participant[],
+ *      _participants: Participant[],
  *  }}
  */
 function mapStateToProps(state) {
     return {
-        participants: state['features/base/participants']
+        /**
+         * The participants in the conference.
+         *
+         * @private
+         * @type {Participant[]}
+         */
+        _participants: state['features/base/participants']
     };
 }
 

react/features/film-strip/components/Thumbnail.js

@@ -26,11 +26,11 @@ class Thumbnail extends Component {
      * @static
      */
     static propTypes = {
-        audioTrack: React.PropTypes.object,
+        _audioTrack: React.PropTypes.object,
+        _largeVideo: React.PropTypes.object,
+        _videoTrack: React.PropTypes.object,
         dispatch: React.PropTypes.func,
-        largeVideo: React.PropTypes.object,
-        participant: React.PropTypes.object,
-        videoTrack: React.PropTypes.object
+        participant: React.PropTypes.object
     }
 
     /**
@@ -64,12 +64,10 @@ class Thumbnail extends Component {
      * @returns {ReactElement}
      */
     render() {
-        const {
-            audioTrack,
-            largeVideo,
-            participant,
-            videoTrack
-        } = this.props;
+        const audioTrack = this.props._audioTrack;
+        const largeVideo = this.props._largeVideo;
+        const participant = this.props.participant;
+        const videoTrack = this.props._videoTrack;
 
         let style = styles.thumbnail;
 
@@ -136,9 +134,9 @@ class Thumbnail extends Component {
  * @param {Object} state - Redux state.
  * @param {Object} ownProps - Properties of component.
  * @returns {{
- *      audioTrack: Track,
- *      largeVideo: Object,
- *      videoTrack: Track
+ *      _audioTrack: Track,
+ *      _largeVideo: Object,
+ *      _videoTrack: Track
  *  }}
  */
 function mapStateToProps(state, ownProps) {
@@ -154,9 +152,9 @@ function mapStateToProps(state, ownProps) {
         = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, id);
 
     return {
-        audioTrack,
-        largeVideo,
-        videoTrack
+        _audioTrack: audioTrack,
+        _largeVideo: largeVideo,
+        _videoTrack: videoTrack
     };
 }
 

react/features/toolbar/components/AbstractToolbar.js

@@ -19,15 +19,18 @@ export class AbstractToolbar extends Component {
      * @static
      */
     static propTypes = {
-        audioMuted: React.PropTypes.bool,
-        dispatch: React.PropTypes.func,
+        _audioMuted: React.PropTypes.bool,
 
         /**
          * The indicator which determines whether the conference is
          * locked/password-protected.
+         *
+         * @protected
+         * @type {boolean}
          */
-        locked: React.PropTypes.bool,
-        videoMuted: React.PropTypes.bool,
+        _locked: React.PropTypes.bool,
+        _videoMuted: React.PropTypes.bool,
+        dispatch: React.PropTypes.func,
         visible: React.PropTypes.bool.isRequired
     }
 
@@ -65,7 +68,7 @@ export class AbstractToolbar extends Component {
         let iconStyle;
         let style = styles.primaryToolbarButton;
 
-        if (this.props[`${mediaType}Muted`]) {
+        if (this.props[`_${mediaType}Muted`]) {
             iconName = this[`${mediaType}MutedIcon`];
             iconStyle = styles.whiteIcon;
             style = {
@@ -135,22 +138,27 @@ export class AbstractToolbar extends Component {
  * Maps parts of media state to component props.
  *
  * @param {Object} state - Redux state.
- * @returns {{ audioMuted: boolean, videoMuted: boolean }}
+ * @returns {{
+ *     _audioMuted: boolean,
+ *     _locked: boolean,
+ *     _videoMuted: boolean
+ * }}
  */
 export function mapStateToProps(state) {
     const conference = state['features/base/conference'];
     const media = state['features/base/media'];
 
     return {
-        audioMuted: media.audio.muted,
+        _audioMuted: media.audio.muted,
 
         /**
          * The indicator which determines whether the conference is
          * locked/password-protected.
          *
+         * @protected
          * @type {boolean}
          */
-        locked: conference.locked,
-        videoMuted: media.video.muted
+        _locked: conference.locked,
+        _videoMuted: media.video.muted
     };
 }

react/features/toolbar/components/Toolbar.native.js

@@ -123,7 +123,7 @@ class Toolbar extends AbstractToolbar {
                     underlayColor = { underlayColor } />
                 <ToolbarButton
                     iconName = {
-                        this.props.locked ? 'security-locked' : 'security'
+                        this.props._locked ? 'security-locked' : 'security'
                     }
                     iconStyle = { iconStyle }
                     onClick = { this._onRoomLock }

react/features/welcome/components/AbstractWelcomePage.js

@@ -18,9 +18,9 @@ export class AbstractWelcomePage extends Component {
      * @static
      */
     static propTypes = {
-        dispatch: React.PropTypes.func,
-        localVideoTrack: React.PropTypes.object,
-        room: React.PropTypes.string
+        _localVideoTrack: React.PropTypes.object,
+        _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.
      */
     componentWillReceiveProps(nextProps) {
-        this.setState({ room: nextProps.room });
+        this.setState({ room: nextProps._room });
     }
 
     /**
@@ -167,7 +167,7 @@ export class AbstractWelcomePage extends Component {
      */
     _renderLocalVideo() {
         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.
  * @returns {{
- *      localVideoTrack: (Track|undefined),
- *      room: string
+ *     _localVideoTrack: (Track|undefined),
+ *     _room: string
  * }}
  */
 export function mapStateToProps(state) {
@@ -211,7 +211,7 @@ export function mapStateToProps(state) {
     const tracks = state['features/base/tracks'];
 
     return {
-        localVideoTrack: getLocalVideoTrack(tracks),
-        room: conference.room
+        _localVideoTrack: getLocalVideoTrack(tracks),
+        _room: conference.room
     };
 }