Explorar el Código

[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.
master
Saúl Ibarra Corretgé hace 7 años
padre
commit
7bd8b7948f

+ 11
- 0
react/features/filmstrip/actionTypes.js Ver fichero

1
+/**
2
+ * The type of (redux) action which sets whether the filmstrip is enabled or
3
+ * not.
4
+ *
5
+ * {
6
+ *     type: SET_FILMSTRIP_ENABLED,
7
+ *     enabled: boolean
8
+ * }
9
+ */
10
+export const SET_FILMSTRIP_ENABLED = Symbol('SET_FILMSTRIP_ENABLED');
11
+
1
 /**
12
 /**
2
  * The type of (redux) action which sets whether or not the filmstrip is being
13
  * The type of (redux) action which sets whether or not the filmstrip is being
3
  * hovered with the cursor.
14
  * hovered with the cursor.

+ 17
- 0
react/features/filmstrip/actions.js Ver fichero

1
 import {
1
 import {
2
+    SET_FILMSTRIP_ENABLED,
2
     SET_FILMSTRIP_HOVERED,
3
     SET_FILMSTRIP_HOVERED,
3
     SET_FILMSTRIP_VISIBLE
4
     SET_FILMSTRIP_VISIBLE
4
 } from './actionTypes';
5
 } from './actionTypes';
5
 
6
 
7
+/**
8
+ * Sets if the filmstrip should be enabled.
9
+ *
10
+ * @param {boolean} enabled - Whether the filmstrip should be enabled.
11
+ * @returns {{
12
+ *     type: SET_FILMSTRIP_ENABLED,
13
+ *     enabled: boolean
14
+ * }}
15
+ */
16
+export function setFilmstripEnabled(enabled) {
17
+    return {
18
+        type: SET_FILMSTRIP_ENABLED,
19
+        enabled
20
+    };
21
+}
22
+
6
 /**
23
 /**
7
  * Sets if the filmstrip is currently being hovered over.
24
  * Sets if the filmstrip is currently being hovered over.
8
  *
25
  *

+ 40
- 25
react/features/filmstrip/components/Filmstrip.native.js Ver fichero

1
 // @flow
1
 // @flow
2
 
2
 
3
-import PropTypes from 'prop-types';
4
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
5
 import { ScrollView } from 'react-native';
4
 import { ScrollView } from 'react-native';
6
 import { connect } from 'react-redux';
5
 import { connect } from 'react-redux';
15
 import Thumbnail from './Thumbnail';
14
 import Thumbnail from './Thumbnail';
16
 
15
 
17
 /**
16
 /**
18
- * Implements a React {@link Component} which represents the filmstrip on
19
- * mobile/React Native.
20
- *
21
- * @extends Component
17
+ * Filmstrip component's property types.
22
  */
18
  */
23
-class Filmstrip extends Component<*> {
19
+type Props = {
20
+
24
     /**
21
     /**
25
-     * Filmstrip component's property types.
22
+     * The indicator which determines whether the filmstrip is enabled.
26
      *
23
      *
27
-     * @static
24
+     * @private
28
      */
25
      */
29
-    static propTypes = {
30
-        /**
31
-         * The participants in the conference.
32
-         *
33
-         * @private
34
-         * @type {Participant[]}
35
-         */
36
-        _participants: PropTypes.array,
26
+    _enabled: boolean,
37
 
27
 
38
-        /**
39
-         * The indicator which determines whether the filmstrip is visible.
40
-         *
41
-         * @private
42
-         * @type {boolean}
43
-         */
44
-        _visible: PropTypes.bool.isRequired
45
-    };
28
+    /**
29
+     * The participants in the conference.
30
+     *
31
+     * @private
32
+     */
33
+    _participants: Array<any>,
34
+
35
+    /**
36
+     * The indicator which determines whether the filmstrip is visible.
37
+     *
38
+     * @private
39
+     */
40
+    _visible: boolean
41
+};
46
 
42
 
43
+/**
44
+ * Implements a React {@link Component} which represents the filmstrip on
45
+ * mobile/React Native.
46
+ *
47
+ * @extends Component
48
+ */
49
+class Filmstrip extends Component<Props> {
47
     /**
50
     /**
48
      * Implements React's {@link Component#render()}.
51
      * Implements React's {@link Component#render()}.
49
      *
52
      *
51
      * @returns {ReactElement}
54
      * @returns {ReactElement}
52
      */
55
      */
53
     render() {
56
     render() {
57
+        if (!this.props._enabled) {
58
+            return null;
59
+        }
60
+
54
         const isNarrowAspectRatio_ = isNarrowAspectRatio(this);
61
         const isNarrowAspectRatio_ = isNarrowAspectRatio(this);
55
         const filmstripStyle
62
         const filmstripStyle
56
             = isNarrowAspectRatio_
63
             = isNarrowAspectRatio_
131
  */
138
  */
132
 function _mapStateToProps(state) {
139
 function _mapStateToProps(state) {
133
     const participants = state['features/base/participants'];
140
     const participants = state['features/base/participants'];
134
-    const { visible } = state['features/filmstrip'];
141
+    const { enabled, visible } = state['features/filmstrip'];
135
 
142
 
136
     return {
143
     return {
144
+        /**
145
+         * The indicator which determines whether the filmstrip is enabled.
146
+         *
147
+         * @private
148
+         * @type {boolean}
149
+         */
150
+        _enabled: enabled,
151
+
137
         /**
152
         /**
138
          * The participants in the conference.
153
          * The participants in the conference.
139
          *
154
          *

+ 12
- 1
react/features/filmstrip/reducer.js Ver fichero

1
 import { ReducerRegistry } from '../base/redux';
1
 import { ReducerRegistry } from '../base/redux';
2
 
2
 
3
-import { SET_FILMSTRIP_HOVERED, SET_FILMSTRIP_VISIBLE } from './actionTypes';
3
+import {
4
+    SET_FILMSTRIP_ENABLED,
5
+    SET_FILMSTRIP_HOVERED,
6
+    SET_FILMSTRIP_VISIBLE
7
+} from './actionTypes';
4
 
8
 
5
 const DEFAULT_STATE = {
9
 const DEFAULT_STATE = {
10
+    enabled: true,
6
     visible: true
11
     visible: true
7
 };
12
 };
8
 
13
 
10
     'features/filmstrip',
15
     'features/filmstrip',
11
     (state = DEFAULT_STATE, action) => {
16
     (state = DEFAULT_STATE, action) => {
12
         switch (action.type) {
17
         switch (action.type) {
18
+        case SET_FILMSTRIP_ENABLED:
19
+            return {
20
+                ...state,
21
+                enabled: action.enabled
22
+            };
23
+
13
         case SET_FILMSTRIP_HOVERED:
24
         case SET_FILMSTRIP_HOVERED:
14
             return {
25
             return {
15
                 ...state,
26
                 ...state,

Loading…
Cancelar
Guardar