[RN] Add ability to enable / disable the filmstrip (Coding style: comments, naming)

react/features/conference/components/Conference.native.js

@@ -355,9 +355,9 @@ function _mapDispatchToProps(dispatch) {
 }
 
 /**
- * Maps (parts of) the Redux state to the associated Conference's props.
+ * Maps (parts of) the redux state to the associated {@code Conference}'s props.
  *
- * @param {Object} state - The Redux state.
+ * @param {Object} state - The redux state.
  * @private
  * @returns {{
  *     _connecting: boolean,

react/features/conference/components/Conference.web.js

@@ -25,9 +25,9 @@ declare var interfaceConfig: Object;
 type Props = {
 
     /**
-     * Whether or not the current local user is recording the conference.
+     * Whether the local participant is recording the conference.
      */
-    _isRecording: boolean,
+    _iAmRecorder: boolean,
 
     dispatch: Function,
     t: Function
@@ -102,9 +102,10 @@ class Conference extends Component<Props> {
      */
     render() {
         const { filmStripOnly, VIDEO_QUALITY_LABEL_DISABLED } = interfaceConfig;
-        const hideVideoQualityLabel = filmStripOnly
-            || VIDEO_QUALITY_LABEL_DISABLED
-            || this.props._isRecording;
+        const hideVideoQualityLabel
+            = filmStripOnly
+                || VIDEO_QUALITY_LABEL_DISABLED
+                || this.props._iAmRecorder;
 
         return (
             <div
@@ -153,18 +154,17 @@ class Conference extends Component<Props> {
  * @param {Object} state - The Redux state.
  * @private
  * @returns {{
- *     _isRecording: boolean
+ *     _iAmRecorder: boolean
  * }}
  */
 function _mapStateToProps(state) {
     return {
         /**
-         * Indicates if the current user is recording the conference, ie, they
-         * are a recorder.
+         * Whether the local participant is recording the conference.
          *
          * @private
          */
-        _isRecording: state['features/base/config'].iAmRecorder
+        _iAmRecorder: state['features/base/config'].iAmRecorder
     };
 }
 

react/features/filmstrip/actionTypes.js

@@ -1,6 +1,5 @@
 /**
- * The type of (redux) action which sets whether the filmstrip is enabled or
- * not.
+ * The type of (redux) action which sets whether the filmstrip is enabled.
  *
  * {
  *     type: SET_FILMSTRIP_ENABLED,
@@ -21,7 +20,7 @@ export const SET_FILMSTRIP_ENABLED = Symbol('SET_FILMSTRIP_ENABLED');
 export const SET_FILMSTRIP_HOVERED = Symbol('SET_FILMSTRIP_HOVERED');
 
 /**
- * The type of (redux) action which sets the visibility of the filmstrip.
+ * The type of (redux) action which sets whether the filmstrip is visible.
  *
  * {
  *     type: SET_FILMSTRIP_VISIBLE,

react/features/filmstrip/actions.js

@@ -1,3 +1,5 @@
+// @flow
+
 import {
     SET_FILMSTRIP_ENABLED,
     SET_FILMSTRIP_HOVERED,
@@ -5,15 +7,15 @@ import {
 } from './actionTypes';
 
 /**
- * Sets if the filmstrip should be enabled.
+ * Sets whether the filmstrip is enabled.
  *
- * @param {boolean} enabled - Whether the filmstrip should be enabled.
+ * @param {boolean} enabled - Whether the filmstrip is enabled.
  * @returns {{
  *     type: SET_FILMSTRIP_ENABLED,
  *     enabled: boolean
  * }}
  */
-export function setFilmstripEnabled(enabled) {
+export function setFilmstripEnabled(enabled: boolean) {
     return {
         type: SET_FILMSTRIP_ENABLED,
         enabled
@@ -21,16 +23,15 @@ export function setFilmstripEnabled(enabled) {
 }
 
 /**
- * Sets if the filmstrip is currently being hovered over.
+ * Sets whether the filmstrip is being hovered (over).
  *
- * @param {boolean} hovered - Whether or not the filmstrip is currently being
- * hovered over.
+ * @param {boolean} hovered - Whether the filmstrip is being hovered (over).
  * @returns {{
  *     type: SET_FILMSTRIP_HOVERED,
  *     hovered: boolean
  * }}
  */
-export function setFilmstripHovered(hovered) {
+export function setFilmstripHovered(hovered: boolean) {
     return {
         type: SET_FILMSTRIP_HOVERED,
         hovered
@@ -38,15 +39,15 @@ export function setFilmstripHovered(hovered) {
 }
 
 /**
- * Sets if the filmstrip should be visible.
+ * Sets whether the filmstrip is visible.
  *
- * @param {boolean} visible - Whether the filmstrip should be visible.
+ * @param {boolean} visible - Whether the filmstrip is visible.
  * @returns {{
  *     type: SET_FILMSTRIP_VISIBLE,
  *     visible: boolean
  * }}
  */
-export function setFilmstripVisible(visible) {
+export function setFilmstripVisible(visible: boolean) {
     return {
         type: SET_FILMSTRIP_VISIBLE,
         visible

react/features/filmstrip/components/Filmstrip.native.js

@@ -10,7 +10,7 @@ import {
     makeAspectRatioAware
 } from '../../base/responsive-ui';
 
-import { styles } from './_';
+import styles from './styles';
 import Thumbnail from './Thumbnail';
 
 /**
@@ -63,14 +63,11 @@ class Filmstrip extends Component<Props> {
             = isNarrowAspectRatio_
                 ? styles.filmstripNarrow
                 : styles.filmstripWide;
-        const {
-            _participants: participants,
-            _visible: visible } = this.props;
 
         return (
             <Container
                 style = { filmstripStyle }
-                visible = { visible }>
+                visible = { this.props._visible }>
                 <ScrollView
                     horizontal = { isNarrowAspectRatio_ }
                     showsHorizontalScrollIndicator = { false }
@@ -78,7 +75,9 @@ class Filmstrip extends Component<Props> {
                     {
                         /* eslint-disable react/jsx-wrap-multilines */
 
-                        this._sort(participants, isNarrowAspectRatio_)
+                        this._sort(
+                                this.props._participants,
+                                isNarrowAspectRatio_)
                             .map(p =>
                                 <Thumbnail
                                     key = { p.id }
@@ -127,9 +126,9 @@ class Filmstrip extends Component<Props> {
 }
 
 /**
- * Function that maps parts of Redux state tree into component props.
+ * Maps (parts of) the redux state to the associated {@code Filmstrip}'s props.
  *
- * @param {Object} state - Redux state.
+ * @param {Object} state - The redux state.
  * @private
  * @returns {{
  *     _participants: Participant[],

react/features/filmstrip/reducer.js

@@ -1,3 +1,5 @@
+// @flow
+
 import { ReducerRegistry } from '../base/redux';
 
 import {
@@ -7,7 +9,20 @@ import {
 } from './actionTypes';
 
 const DEFAULT_STATE = {
+    /**
+     * The indicator which determines whether the {@link Filmstrip} is enabled.
+     *
+     * @public
+     * @type {boolean}
+     */
     enabled: true,
+
+    /**
+     * The indicator which determines whether the {@link Filmstrip} is visible.
+     *
+     * @public
+     * @type {boolean}
+     */
     visible: true
 };
 
@@ -24,6 +39,14 @@ ReducerRegistry.register(
         case SET_FILMSTRIP_HOVERED:
             return {
                 ...state,
+
+                /**
+                 * The indicator which determines whether the {@link Filmstrip}
+                 * is being hovered (over).
+                 *
+                 * @public
+                 * @type {boolean}
+                 */
                 hovered: action.hovered
             };