[RN] Add ability to enable / disable the filmstrip

This is only implemented for mobile at the moment, since web doesn't handle
visibility within the Filmstrip component yet, so this should be added right
then, too.

react/features/filmstrip/actionTypes.js

@@ -1,3 +1,14 @@
+/**
+ * The type of (redux) action which sets whether the filmstrip is enabled or
+ * not.
+ *
+ * {
+ *     type: SET_FILMSTRIP_ENABLED,
+ *     enabled: boolean
+ * }
+ */
+export const SET_FILMSTRIP_ENABLED = Symbol('SET_FILMSTRIP_ENABLED');
+
 /**
  * The type of (redux) action which sets whether or not the filmstrip is being
  * hovered with the cursor.

react/features/filmstrip/actions.js

@@ -1,8 +1,25 @@
 import {
+    SET_FILMSTRIP_ENABLED,
     SET_FILMSTRIP_HOVERED,
     SET_FILMSTRIP_VISIBLE
 } from './actionTypes';
 
+/**
+ * Sets if the filmstrip should be enabled.
+ *
+ * @param {boolean} enabled - Whether the filmstrip should be enabled.
+ * @returns {{
+ *     type: SET_FILMSTRIP_ENABLED,
+ *     enabled: boolean
+ * }}
+ */
+export function setFilmstripEnabled(enabled) {
+    return {
+        type: SET_FILMSTRIP_ENABLED,
+        enabled
+    };
+}
+
 /**
  * Sets if the filmstrip is currently being hovered over.
  *

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

@@ -1,6 +1,5 @@
 // @flow
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { ScrollView } from 'react-native';
 import { connect } from 'react-redux';
@@ -15,35 +14,39 @@ import { styles } from './_';
 import Thumbnail from './Thumbnail';
 
 /**
- * Implements a React {@link Component} which represents the filmstrip on
- * mobile/React Native.
- *
- * @extends Component
+ * Filmstrip component's property types.
  */
-class Filmstrip extends Component<*> {
+type Props = {
+
     /**
-     * Filmstrip component's property types.
+     * The indicator which determines whether the filmstrip is enabled.
      *
-     * @static
+     * @private
      */
-    static propTypes = {
-        /**
-         * The participants in the conference.
-         *
-         * @private
-         * @type {Participant[]}
-         */
-        _participants: PropTypes.array,
+    _enabled: boolean,
 
-        /**
-         * The indicator which determines whether the filmstrip is visible.
-         *
-         * @private
-         * @type {boolean}
-         */
-        _visible: PropTypes.bool.isRequired
-    };
+    /**
+     * The participants in the conference.
+     *
+     * @private
+     */
+    _participants: Array<any>,
+
+    /**
+     * The indicator which determines whether the filmstrip is visible.
+     *
+     * @private
+     */
+    _visible: boolean
+};
 
+/**
+ * Implements a React {@link Component} which represents the filmstrip on
+ * mobile/React Native.
+ *
+ * @extends Component
+ */
+class Filmstrip extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -51,6 +54,10 @@ class Filmstrip extends Component<*> {
      * @returns {ReactElement}
      */
     render() {
+        if (!this.props._enabled) {
+            return null;
+        }
+
         const isNarrowAspectRatio_ = isNarrowAspectRatio(this);
         const filmstripStyle
             = isNarrowAspectRatio_
@@ -131,9 +138,17 @@ class Filmstrip extends Component<*> {
  */
 function _mapStateToProps(state) {
     const participants = state['features/base/participants'];
-    const { visible } = state['features/filmstrip'];
+    const { enabled, visible } = state['features/filmstrip'];
 
     return {
+        /**
+         * The indicator which determines whether the filmstrip is enabled.
+         *
+         * @private
+         * @type {boolean}
+         */
+        _enabled: enabled,
+
         /**
          * The participants in the conference.
          *

react/features/filmstrip/reducer.js

@@ -1,8 +1,13 @@
 import { ReducerRegistry } from '../base/redux';
 
-import { SET_FILMSTRIP_HOVERED, SET_FILMSTRIP_VISIBLE } from './actionTypes';
+import {
+    SET_FILMSTRIP_ENABLED,
+    SET_FILMSTRIP_HOVERED,
+    SET_FILMSTRIP_VISIBLE
+} from './actionTypes';
 
 const DEFAULT_STATE = {
+    enabled: true,
     visible: true
 };
 
@@ -10,6 +15,12 @@ ReducerRegistry.register(
     'features/filmstrip',
     (state = DEFAULT_STATE, action) => {
         switch (action.type) {
+        case SET_FILMSTRIP_ENABLED:
+            return {
+                ...state,
+                enabled: action.enabled
+            };
+
         case SET_FILMSTRIP_HOVERED:
             return {
                 ...state,