Bladeren bron

feat(overlays): refactor logic for selecting current overlay

Do the selection in mapStateToProps so the container itself doesn't need to
receive all the props that each overlay needs.

Each overlay is responsible for fetching their own props and for providing a
"needsDisplay" static method wich will be called with the full redux state and
should return true if the overlay needs displaying.

Also eliminate duplicated state keeping: the connection and conference error
states can be fetched from their respective base features.
master
Saúl Ibarra Corretgé 8 jaren geleden
bovenliggende
commit
38629b437d

+ 12
- 0
react/features/base/jwt/components/CallOverlay.js Bestand weergeven

@@ -77,6 +77,18 @@ class CallOverlay extends Component<*, *> {
77 77
         _callee: PropTypes.object
78 78
     };
79 79
 
80
+    /**
81
+     * Check if this overlay needs to be rendered. This function will be called
82
+     * by the {@code OverlayContainer}.
83
+     *
84
+     * @param {Object} state - The redux state.
85
+     * @returns {boolean} - True if this overlay needs to be rendered, false
86
+     * otherwise.
87
+     */
88
+    static needsRender(state) {
89
+        return state['features/base/jwt'].callOverlayVisible;
90
+    }
91
+
80 92
     /**
81 93
      * Initializes a new {@code CallOverlay} instance.
82 94
      *

+ 26
- 1
react/features/base/lib-jitsi-meet/functions.js Bestand weergeven

@@ -8,6 +8,7 @@ import JitsiMeetJS from './_';
8 8
 
9 9
 declare var APP: Object;
10 10
 
11
+const JitsiConferenceErrors = JitsiMeetJS.errors.conference;
11 12
 const JitsiConnectionErrors = JitsiMeetJS.errors.connection;
12 13
 
13 14
 /**
@@ -52,11 +53,35 @@ export function isAnalyticsEnabled(stateful: Function | Object) {
52 53
             && Boolean(analyticsScriptUrls.length));
53 54
 }
54 55
 
56
+/**
57
+ * Determines whether a specific JitsiConferenceErrors instance indicates a
58
+ * fatal JitsiConference error.
59
+ *
60
+ * FIXME Figure out the category of errors defined by the function and describe
61
+ * that category. I've currently named the category fatal because it appears to
62
+ * be used in the cases of unrecoverable errors that necessitate a reload.
63
+ *
64
+ * @param {Object|string} error - The JitsiConferenceErrors instance to
65
+ * categorize/classify or an Error-like object.
66
+ * @returns {boolean} True if the specified JitsiConferenceErrors instance
67
+ * indicates a fatal JitsiConference error; otherwise, false.
68
+ */
69
+export function isFatalJitsiConferenceError(error: Object | string) {
70
+    if (typeof error !== 'string') {
71
+        error = error.name; // eslint-disable-line no-param-reassign
72
+    }
73
+
74
+    return (
75
+        error === JitsiConferenceErrors.FOCUS_DISCONNECTED
76
+            || error === JitsiConferenceErrors.FOCUS_LEFT
77
+            || error === JitsiConferenceErrors.VIDEOBRIDGE_NOT_AVAILABLE);
78
+}
79
+
55 80
 /**
56 81
  * Determines whether a specific JitsiConnectionErrors instance indicates a
57 82
  * fatal JitsiConnection error.
58 83
  *
59
- * FIXME Figure out the category of errors defined by the fucntion and describe
84
+ * FIXME Figure out the category of errors defined by the function and describe
60 85
  * that category. I've currently named the category fatal because it appears to
61 86
  * be used in the cases of unrecoverable errors that necessitate a reload.
62 87
  *

+ 43
- 0
react/features/overlay/components/AbstractPageReloadOverlay.js Bestand weergeven

@@ -3,6 +3,10 @@
3 3
 import PropTypes from 'prop-types';
4 4
 import React, { Component } from 'react';
5 5
 
6
+import {
7
+    isFatalJitsiConferenceError,
8
+    isFatalJitsiConnectionError
9
+} from '../../base/lib-jitsi-meet';
6 10
 import { randomInt } from '../../base/util';
7 11
 
8 12
 import { _reloadNow } from '../actions';
@@ -85,6 +89,25 @@ export default class AbstractPageReloadOverlay extends Component<*, *> {
85 89
         title: string
86 90
     }
87 91
 
92
+    /**
93
+     * Check if this overlay needs to be rendered. This function will be called
94
+     * by the {@code OverlayContainer}.
95
+     *
96
+     * @param {Object} state - The redux state.
97
+     * @returns {boolean} - True if this overlay needs to be rendered, false
98
+     * otherwise.
99
+     */
100
+    static needsRender(state) {
101
+        const conferenceError = state['features/base/conference'].error;
102
+        const connectionError = state['features/base/connection'].error;
103
+
104
+        return (
105
+            (connectionError && isFatalJitsiConnectionError(connectionError))
106
+                || (conferenceError
107
+                    && isFatalJitsiConferenceError(conferenceError))
108
+        );
109
+    }
110
+
88 111
     /**
89 112
      * Initializes a new AbstractPageReloadOverlay instance.
90 113
      *
@@ -215,3 +238,23 @@ export default class AbstractPageReloadOverlay extends Component<*, *> {
215 238
         );
216 239
     }
217 240
 }
241
+
242
+/**
243
+ * Maps (parts of) the redux state to the associated component's props.
244
+ *
245
+ * @param {Object} state - The redux state.
246
+ * @returns {{
247
+ *      isNetworkFailure: boolean,
248
+ *      reason: string
249
+ * }}
250
+ * @protected
251
+ */
252
+export function abstractMapStateToProps(state: Object) {
253
+    const conferenceError = state['features/base/conference'].error;
254
+    const connectionError = state['features/base/connection'].error;
255
+
256
+    return {
257
+        isNetworkFailure: Boolean(connectionError),
258
+        reason: (connectionError || conferenceError).message
259
+    };
260
+}

+ 45
- 0
react/features/overlay/components/AbstractSuspendedOverlay.js Bestand weergeven

@@ -0,0 +1,45 @@
1
+import PropTypes from 'prop-types';
2
+import { Component } from 'react';
3
+
4
+/**
5
+ * Implements a React Component for suspended overlay. Shown when a suspend is
6
+ * detected.
7
+ */
8
+export default class AbstractSuspendedOverlay extends Component {
9
+    /**
10
+     * SuspendedOverlay component's property types.
11
+     *
12
+     * @static
13
+     */
14
+    static propTypes = {
15
+        /**
16
+         * The function to translate human-readable text.
17
+         *
18
+         * @public
19
+         * @type {Function}
20
+         */
21
+        t: PropTypes.func
22
+    };
23
+
24
+    /**
25
+     * Check if this overlay needs to be rendered. This function will be called
26
+     * by the {@code OverlayContainer}.
27
+     *
28
+     * @param {Object} state - The redux state.
29
+     * @returns {boolean} - True if this overlay needs to be rendered, false
30
+     * otherwise.
31
+     */
32
+    static needsRender(state) {
33
+        return state['features/overlay'].suspendDetected;
34
+    }
35
+
36
+    /**
37
+     * Implements React's {@link Component#render()}.
38
+     *
39
+     * @inheritdoc
40
+     * @returns {ReactElement|null}
41
+     */
42
+    render() {
43
+        return null;
44
+    }
45
+}

+ 72
- 0
react/features/overlay/components/AbstractUserMediaPermissionsOverlay.js Bestand weergeven

@@ -0,0 +1,72 @@
1
+import PropTypes from 'prop-types';
2
+import { Component } from 'react';
3
+
4
+
5
+/**
6
+ * Implements a React Component for overlay with guidance how to proceed with
7
+ * gUM prompt.
8
+ */
9
+export default class AbstractUserMediaPermissionsOverlay extends Component {
10
+    /**
11
+     * UserMediaPermissionsOverlay component's property types.
12
+     *
13
+     * @static
14
+     */
15
+    static propTypes = {
16
+        /**
17
+         * The browser which is used currently. The text is different for every
18
+         * browser.
19
+         *
20
+         * @public
21
+         * @type {string}
22
+         */
23
+        browser: PropTypes.string,
24
+
25
+        /**
26
+         * The function to translate human-readable text.
27
+         *
28
+         * @public
29
+         * @type {Function}
30
+         */
31
+        t: PropTypes.func
32
+    };
33
+
34
+    /**
35
+     * Check if this overlay needs to be rendered. This function will be called
36
+     * by the {@code OverlayContainer}.
37
+     *
38
+     * @param {Object} state - The redux state.
39
+     * @returns {boolean} - True if this overlay needs to be rendered, false
40
+     * otherwise.
41
+     */
42
+    static needsRender(state) {
43
+        return state['features/overlay'].isMediaPermissionPromptVisible;
44
+    }
45
+
46
+    /**
47
+     * Implements React's {@link Component#render()}.
48
+     *
49
+     * @inheritdoc
50
+     * @returns {ReactElement|null}
51
+     */
52
+    render() {
53
+        return null;
54
+    }
55
+}
56
+
57
+/**
58
+ * Maps (parts of) the redux state to the associated component's props.
59
+ *
60
+ * @param {Object} state - The redux state.
61
+ * @returns {{
62
+ *      browser: string
63
+ * }}
64
+ * @protected
65
+ */
66
+export function abstractMapStateToProps(state) {
67
+    const { browser } = state['features/overlay'];
68
+
69
+    return {
70
+        browser
71
+    };
72
+}

+ 54
- 227
react/features/overlay/components/OverlayContainer.js Bestand weergeven

@@ -14,6 +14,42 @@ import UserMediaPermissionsFilmstripOnlyOverlay
14 14
     from './UserMediaPermissionsFilmstripOnlyOverlay';
15 15
 import UserMediaPermissionsOverlay from './UserMediaPermissionsOverlay';
16 16
 
17
+/**
18
+ * Reference to the lazily loaded list of overlays.
19
+ */
20
+let _overlays;
21
+
22
+/**
23
+ * Returns the list of overlays which can be rendered by this container. The
24
+ * list is lazily loaded the first time it's required.
25
+ *
26
+ * @returns {Array} - The list of overlay types which are available.
27
+ */
28
+function getOverlays() {
29
+    if (typeof _overlays === 'undefined') {
30
+        const filmstripOnly
31
+            = typeof interfaceConfig === 'object'
32
+                && interfaceConfig.filmStripOnly;
33
+
34
+        if (filmstripOnly) {
35
+            _overlays = [
36
+                PageReloadFilmstripOnlyOverlay,
37
+                SuspendedFilmstripOnlyOverlay,
38
+                UserMediaPermissionsFilmstripOnlyOverlay
39
+            ];
40
+        } else {
41
+            _overlays = [
42
+                PageReloadOverlay,
43
+                SuspendedOverlay,
44
+                UserMediaPermissionsOverlay,
45
+                CallOverlay
46
+            ];
47
+        }
48
+    }
49
+
50
+    return _overlays;
51
+}
52
+
17 53
 /**
18 54
  * Implements a React Component that will display the correct overlay when
19 55
  * needed.
@@ -26,113 +62,11 @@ class OverlayContainer extends Component {
26 62
      */
27 63
     static propTypes = {
28 64
         /**
29
-         * The browser which is used currently.
30
-         *
31
-         * NOTE: Used by UserMediaPermissionsOverlay only.
32
-         *
33
-         * @private
34
-         * @type {string}
35
-         */
36
-        _browser: PropTypes.string,
37
-
38
-        /**
39
-         * The indicator which determines whether the {@link CallOverlay} is
40
-         * displayed/visible.
41
-         *
42
-         * @private
43
-         * @type {boolean}
44
-         */
45
-        _callOverlayVisible: PropTypes.bool,
46
-
47
-        /**
48
-         * The indicator which determines whether the status of the
49
-         * JitsiConnection object has been "established" or not.
50
-         *
51
-         * NOTE: Used by PageReloadOverlay only.
52
-         *
53
-         * @private
54
-         * @type {boolean}
55
-         */
56
-        _connectionEstablished: PropTypes.bool,
57
-
58
-        /**
59
-         * The indicator which determines whether a critical error for reload
60
-         * has been received.
61
-         *
62
-         * NOTE: Used by PageReloadOverlay only.
63
-         *
64
-         * @private
65
-         * @type {boolean}
66
-         */
67
-        _haveToReload: PropTypes.bool,
68
-
69
-        /**
70
-         * The indicator which determines whether the GUM permissions prompt is
71
-         * displayed or not.
72
-         *
73
-         * NOTE: Used by UserMediaPermissionsOverlay only.
74
-         *
75
-         * @private
76
-         * @type {boolean}
77
-         */
78
-        _isMediaPermissionPromptVisible: PropTypes.bool,
79
-
80
-        /**
81
-         * The indicator which determines whether the reload was caused by
82
-         * network failure.
83
-         *
84
-         * NOTE: Used by PageReloadOverlay only.
85
-         *
86
-         * @private
87
-         * @type {boolean}
88
-         */
89
-        _isNetworkFailure: PropTypes.bool,
90
-
91
-        /**
92
-         * The reason for the error that will cause the reload.
93
-         *
94
-         * NOTE: Used by PageReloadOverlay only.
95
-         *
96
-         * @private
97
-         * @type {string}
98
-         */
99
-        _reason: PropTypes.string,
100
-
101
-        /**
102
-         * The indicator which determines whether the GUM permissions prompt is
103
-         * displayed or not.
104
-         *
105
-         * NOTE: Used by SuspendedOverlay only.
106
-         *
107
-         * @private
108
-         * @type {string}
65
+         * Type of overlay that should be rendered.
109 66
          */
110
-        _suspendDetected: PropTypes.bool
67
+        overlay: PropTypes.element
111 68
     };
112 69
 
113
-    /**
114
-     * Initializes a new OverlayContainer instance.
115
-     *
116
-     * @param {Object} props - The read-only properties with which the new
117
-     * instance is to be initialized.
118
-     * @public
119
-     */
120
-    constructor(props) {
121
-        super(props);
122
-
123
-        this.state = {
124
-            /**
125
-             * The indicator which determines whether filmstrip-only mode is
126
-             * enabled.
127
-             *
128
-             * @type {boolean}
129
-             */
130
-            filmstripOnly:
131
-                typeof interfaceConfig === 'object'
132
-                    && interfaceConfig.filmStripOnly
133
-        };
134
-    }
135
-
136 70
     /**
137 71
      * Implements React's {@link Component#render()}.
138 72
      *
@@ -141,39 +75,9 @@ class OverlayContainer extends Component {
141 75
      * @public
142 76
      */
143 77
     render() {
144
-        const { filmstripOnly } = this.state;
145
-        let overlayComponent, props;
146
-
147
-        if (this.props._connectionEstablished && this.props._haveToReload) {
148
-            overlayComponent
149
-                = filmstripOnly
150
-                    ? PageReloadFilmstripOnlyOverlay
151
-                    : PageReloadOverlay;
152
-            props = {
153
-                isNetworkFailure: this.props._isNetworkFailure,
154
-                reason: this.props._reason
155
-            };
156
-        } else if (this.props._suspendDetected) {
157
-            overlayComponent
158
-                = filmstripOnly
159
-                    ? SuspendedFilmstripOnlyOverlay
160
-                    : SuspendedOverlay;
161
-        } else if (this.props._isMediaPermissionPromptVisible) {
162
-            overlayComponent
163
-                = filmstripOnly
164
-                    ? UserMediaPermissionsFilmstripOnlyOverlay
165
-                    : UserMediaPermissionsOverlay;
166
-            props = {
167
-                browser: this.props._browser
168
-            };
169
-        } else if (this.props._callOverlayVisible) {
170
-            overlayComponent = CallOverlay;
171
-        }
78
+        const { overlay } = this.props;
172 79
 
173
-        return (
174
-            overlayComponent
175
-                ? React.createElement(overlayComponent, props)
176
-                : null);
80
+        return overlay ? React.createElement(overlay, {}) : null;
177 81
     }
178 82
 }
179 83
 
@@ -182,106 +86,29 @@ class OverlayContainer extends Component {
182 86
  *
183 87
  * @param {Object} state - The redux state.
184 88
  * @returns {{
185
- *     _browser: string,
186
- *     _callOverlayVisible: boolean,
187
- *     _connectionEstablished: boolean,
188
- *     _haveToReload: boolean,
189
- *     _isNetworkFailure: boolean,
190
- *     _isMediaPermissionPromptVisible: boolean,
191
- *     _reason: string,
192
- *     _suspendDetected: boolean
89
+ *      overlay: ?Object
193 90
  * }}
194 91
  * @private
195 92
  */
196 93
 function _mapStateToProps(state) {
197
-    const stateFeaturesOverlay = state['features/overlay'];
198
-
199
-    return {
200
-        /**
201
-         * The browser which is used currently.
202
-         *
203
-         * NOTE: Used by {@link UserMediaPermissionsOverlay} only.
204
-         *
205
-         * @private
206
-         * @type {string}
207
-         */
208
-        _browser: stateFeaturesOverlay.browser,
209
-
210
-        /**
211
-         * The indicator which determines whether the {@link CallOverlay} is
212
-         * displayed/visible.
213
-         *
214
-         * @private
215
-         * @type {boolean}
216
-         */
217
-        _callOverlayVisible:
218
-            Boolean(state['features/base/jwt'].callOverlayVisible),
94
+    let overlay;
219 95
 
220
-        /**
221
-         * The indicator which determines whether the status of the
222
-         * JitsiConnection object has been "established" or not.
223
-         *
224
-         * NOTE: Used by {@link PageReloadOverlay} only.
225
-         *
226
-         * @private
227
-         * @type {boolean}
228
-         */
229
-        _connectionEstablished: stateFeaturesOverlay.connectionEstablished,
230
-
231
-        /**
232
-         * The indicator which determines whether a critical error for reload
233
-         * has been received.
234
-         *
235
-         * NOTE: Used by {@link PageReloadOverlay} only.
236
-         *
237
-         * @private
238
-         * @type {boolean}
239
-         */
240
-        _haveToReload: stateFeaturesOverlay.haveToReload,
241
-
242
-        /**
243
-         * The indicator which determines whether the GUM permissions prompt is
244
-         * displayed or not.
245
-         *
246
-         * NOTE: Used by {@link UserMediaPermissionsOverlay} only.
247
-         *
248
-         * @private
249
-         * @type {boolean}
250
-         */
251
-        _isMediaPermissionPromptVisible:
252
-            stateFeaturesOverlay.isMediaPermissionPromptVisible,
96
+    for (const o of getOverlays()) {
97
+        // react-i18n / react-redux wrap components and thus we cannot access
98
+        // the wrapped component's static methods directly.
99
+        const component = o.WrappedComponent || o;
253 100
 
254
-        /**
255
-         * The indicator which determines whether the reload was caused by
256
-         * network failure.
257
-         *
258
-         * NOTE: Used by {@link PageReloadOverlay} only.
259
-         *
260
-         * @private
261
-         * @type {boolean}
262
-         */
263
-        _isNetworkFailure: stateFeaturesOverlay.isNetworkFailure,
264
-
265
-        /**
266
-         * The reason for the error that will cause the reload.
267
-         *
268
-         * NOTE: Used by {@link PageReloadOverlay} only.
269
-         *
270
-         * @private
271
-         * @type {string}
272
-         */
273
-        _reason: stateFeaturesOverlay.reason,
101
+        if (component.needsRender(state)) {
102
+            overlay = o;
103
+            break;
104
+        }
105
+    }
274 106
 
107
+    return {
275 108
         /**
276
-         * The indicator which determines whether the GUM permissions prompt is
277
-         * displayed or not.
278
-         *
279
-         * NOTE: Used by {@link SuspendedOverlay} only.
280
-         *
281
-         * @private
282
-         * @type {string}
109
+         * Type of overlay that should be rendered.
283 110
          */
284
-        _suspendDetected: stateFeaturesOverlay.suspendDetected
111
+        overlay
285 112
     };
286 113
 }
287 114
 

+ 4
- 2
react/features/overlay/components/PageReloadFilmstripOnlyOverlay.js Bestand weergeven

@@ -3,7 +3,8 @@ import { connect } from 'react-redux';
3 3
 
4 4
 import { translate } from '../../base/i18n';
5 5
 
6
-import AbstractPageReloadOverlay from './AbstractPageReloadOverlay';
6
+import AbstractPageReloadOverlay, { abstractMapStateToProps }
7
+    from './AbstractPageReloadOverlay';
7 8
 import FilmstripOnlyOverlayFrame from './FilmstripOnlyOverlayFrame';
8 9
 
9 10
 /**
@@ -39,4 +40,5 @@ class PageReloadFilmstripOnlyOverlay extends AbstractPageReloadOverlay {
39 40
     }
40 41
 }
41 42
 
42
-export default translate(connect()(PageReloadFilmstripOnlyOverlay));
43
+export default translate(
44
+    connect(abstractMapStateToProps)(PageReloadFilmstripOnlyOverlay));

+ 3
- 2
react/features/overlay/components/PageReloadOverlay.js Bestand weergeven

@@ -3,7 +3,8 @@ import { connect } from 'react-redux';
3 3
 
4 4
 import { translate } from '../../base/i18n';
5 5
 
6
-import AbstractPageReloadOverlay from './AbstractPageReloadOverlay';
6
+import AbstractPageReloadOverlay, { abstractMapStateToProps }
7
+    from './AbstractPageReloadOverlay';
7 8
 import OverlayFrame from './OverlayFrame';
8 9
 
9 10
 /**
@@ -40,4 +41,4 @@ class PageReloadOverlay extends AbstractPageReloadOverlay {
40 41
     }
41 42
 }
42 43
 
43
-export default translate(connect()(PageReloadOverlay));
44
+export default translate(connect(abstractMapStateToProps)(PageReloadOverlay));

+ 4
- 18
react/features/overlay/components/SuspendedFilmstripOnlyOverlay.js Bestand weergeven

@@ -1,8 +1,8 @@
1
-import PropTypes from 'prop-types';
2
-import React, { Component } from 'react';
1
+import React from 'react';
3 2
 
4 3
 import { translate, translateToHTML } from '../../base/i18n';
5 4
 
5
+import AbstractSuspendedOverlay from './AbstractSuspendedOverlay';
6 6
 import FilmstripOnlyOverlayFrame from './FilmstripOnlyOverlayFrame';
7 7
 import ReloadButton from './ReloadButton';
8 8
 
@@ -10,26 +10,12 @@ import ReloadButton from './ReloadButton';
10 10
  * Implements a React Component for suspended overlay for filmstrip only mode.
11 11
  * Shown when suspended is detected.
12 12
  */
13
-class SuspendedFilmstripOnlyOverlay extends Component {
14
-    /**
15
-     * SuspendedFilmstripOnlyOverlay component's property types.
16
-     *
17
-     * @static
18
-     */
19
-    static propTypes = {
20
-        /**
21
-         * The function to translate human-readable text.
22
-         *
23
-         * @public
24
-         * @type {Function}
25
-         */
26
-        t: PropTypes.func
27
-    };
28
-
13
+class SuspendedFilmstripOnlyOverlay extends AbstractSuspendedOverlay {
29 14
     /**
30 15
      * Implements React's {@link Component#render()}.
31 16
      *
32 17
      * @inheritdoc
18
+     * @override
33 19
      * @returns {ReactElement|null}
34 20
      */
35 21
     render() {

+ 4
- 18
react/features/overlay/components/SuspendedOverlay.js Bestand weergeven

@@ -1,8 +1,8 @@
1
-import PropTypes from 'prop-types';
2
-import React, { Component } from 'react';
1
+import React from 'react';
3 2
 
4 3
 import { translate, translateToHTML } from '../../base/i18n';
5 4
 
5
+import AbstractSuspendedOverlay from './AbstractSuspendedOverlay';
6 6
 import OverlayFrame from './OverlayFrame';
7 7
 import ReloadButton from './ReloadButton';
8 8
 
@@ -10,26 +10,12 @@ import ReloadButton from './ReloadButton';
10 10
  * Implements a React Component for suspended overlay. Shown when a suspend is
11 11
  * detected.
12 12
  */
13
-class SuspendedOverlay extends Component {
14
-    /**
15
-     * SuspendedOverlay component's property types.
16
-     *
17
-     * @static
18
-     */
19
-    static propTypes = {
20
-        /**
21
-         * The function to translate human-readable text.
22
-         *
23
-         * @public
24
-         * @type {Function}
25
-         */
26
-        t: PropTypes.func
27
-    };
28
-
13
+class SuspendedOverlay extends AbstractSuspendedOverlay {
29 14
     /**
30 15
      * Implements React's {@link Component#render()}.
31 16
      *
32 17
      * @inheritdoc
18
+     * @override
33 19
      * @returns {ReactElement|null}
34 20
      */
35 21
     render() {

+ 9
- 28
react/features/overlay/components/UserMediaPermissionsFilmstripOnlyOverlay.js Bestand weergeven

@@ -1,43 +1,23 @@
1
-import PropTypes from 'prop-types';
2
-import React, { Component } from 'react';
1
+import React from 'react';
2
+import { connect } from 'react-redux';
3 3
 
4 4
 import { translate, translateToHTML } from '../../base/i18n';
5 5
 
6
+import AbstractUserMediaPermissionsOverlay, { abstractMapStateToProps }
7
+    from './AbstractUserMediaPermissionsOverlay';
6 8
 import FilmstripOnlyOverlayFrame from './FilmstripOnlyOverlayFrame';
7 9
 
8 10
 /**
9 11
  * Implements a React Component for overlay with guidance how to proceed with
10 12
  * gUM prompt. This component will be displayed only for filmstrip only mode.
11 13
  */
12
-class UserMediaPermissionsFilmstripOnlyOverlay extends Component {
13
-    /**
14
-     * UserMediaPermissionsFilmstripOnlyOverlay component's property types.
15
-     *
16
-     * @static
17
-     */
18
-    static propTypes = {
19
-        /**
20
-         * The browser which is used currently. The text is different for every
21
-         * browser.
22
-         *
23
-         * @public
24
-         * @type {string}
25
-         */
26
-        browser: PropTypes.string,
27
-
28
-        /**
29
-         * The function to translate human-readable text.
30
-         *
31
-         * @public
32
-         * @type {Function}
33
-         */
34
-        t: PropTypes.func
35
-    };
36
-
14
+class UserMediaPermissionsFilmstripOnlyOverlay
15
+    extends AbstractUserMediaPermissionsOverlay {
37 16
     /**
38 17
      * Implements React's {@link Component#render()}.
39 18
      *
40 19
      * @inheritdoc
20
+     * @override
41 21
      * @returns {ReactElement|null}
42 22
      */
43 23
     render() {
@@ -66,4 +46,5 @@ class UserMediaPermissionsFilmstripOnlyOverlay extends Component {
66 46
     }
67 47
 }
68 48
 
69
-export default translate(UserMediaPermissionsFilmstripOnlyOverlay);
49
+export default translate(
50
+    connect(abstractMapStateToProps)(UserMediaPermissionsFilmstripOnlyOverlay));

+ 9
- 29
react/features/overlay/components/UserMediaPermissionsOverlay.js Bestand weergeven

@@ -1,43 +1,21 @@
1 1
 /* global interfaceConfig */
2 2
 
3
-import PropTypes from 'prop-types';
4
-import React, { Component } from 'react';
3
+import React from 'react';
4
+import { connect } from 'react-redux';
5 5
 
6 6
 import { translate, translateToHTML } from '../../base/i18n';
7 7
 
8
+import AbstractUserMediaPermissionsOverlay, { abstractMapStateToProps }
9
+    from './AbstractUserMediaPermissionsOverlay';
8 10
 import OverlayFrame from './OverlayFrame';
9 11
 
10 12
 /**
11 13
  * Implements a React Component for overlay with guidance how to proceed with
12 14
  * gUM prompt.
13 15
  */
14
-class UserMediaPermissionsOverlay extends Component {
16
+class UserMediaPermissionsOverlay extends AbstractUserMediaPermissionsOverlay {
15 17
     /**
16
-     * UserMediaPermissionsOverlay component's property types.
17
-     *
18
-     * @static
19
-     */
20
-    static propTypes = {
21
-        /**
22
-         * The browser which is used currently. The text is different for every
23
-         * browser.
24
-         *
25
-         * @public
26
-         * @type {string}
27
-         */
28
-        browser: PropTypes.string,
29
-
30
-        /**
31
-         * The function to translate human-readable text.
32
-         *
33
-         * @public
34
-         * @type {Function}
35
-         */
36
-        t: PropTypes.func
37
-    };
38
-
39
-    /**
40
-     * Initializes a new SuspendedOverlay instance.
18
+     * Initializes a new UserMediaPermissionsOverlay instance.
41 19
      *
42 20
      * @param {Object} props - The read-only properties with which the new
43 21
      * instance is to be initialized.
@@ -60,6 +38,7 @@ class UserMediaPermissionsOverlay extends Component {
60 38
      * Implements React's {@link Component#render()}.
61 39
      *
62 40
      * @inheritdoc
41
+     * @override
63 42
      * @returns {ReactElement|null}
64 43
      */
65 44
     render() {
@@ -116,4 +95,5 @@ class UserMediaPermissionsOverlay extends Component {
116 95
     }
117 96
 }
118 97
 
119
-export default translate(UserMediaPermissionsOverlay);
98
+export default translate(
99
+    connect(abstractMapStateToProps)(UserMediaPermissionsOverlay));

+ 2
- 118
react/features/overlay/reducer.js Bestand weergeven

@@ -1,16 +1,5 @@
1 1
 // @flow
2 2
 
3
-import { CONFERENCE_FAILED } from '../base/conference';
4
-import {
5
-    CONNECTION_ESTABLISHED,
6
-    CONNECTION_FAILED,
7
-    CONNECTION_WILL_CONNECT
8
-} from '../base/connection';
9
-import {
10
-    isFatalJitsiConnectionError,
11
-    JitsiConferenceErrors,
12
-    JitsiConnectionErrors
13
-} from '../base/lib-jitsi-meet';
14 3
 import { assign, ReducerRegistry, set } from '../base/redux';
15 4
 
16 5
 import {
@@ -18,25 +7,13 @@ import {
18 7
     SUSPEND_DETECTED
19 8
 } from './actionTypes';
20 9
 
21
-const logger = require('jitsi-meet-logger').getLogger(__filename);
22
-
23 10
 /**
24 11
  * Reduces the redux actions of the feature overlay.
12
+ *
13
+ * FIXME: these pieces of state should probably be in a different place.
25 14
  */
26 15
 ReducerRegistry.register('features/overlay', (state = {}, action) => {
27 16
     switch (action.type) {
28
-    case CONFERENCE_FAILED:
29
-        return _conferenceFailed(state, action);
30
-
31
-    case CONNECTION_ESTABLISHED:
32
-        return _connectionEstablished(state);
33
-
34
-    case CONNECTION_FAILED:
35
-        return _connectionFailed(state, action);
36
-
37
-    case CONNECTION_WILL_CONNECT:
38
-        return _connectionWillConnect(state, action);
39
-
40 17
     case MEDIA_PERMISSION_PROMPT_VISIBILITY_CHANGED:
41 18
         return _mediaPermissionPromptVisibilityChanged(state, action);
42 19
 
@@ -47,99 +24,6 @@ ReducerRegistry.register('features/overlay', (state = {}, action) => {
47 24
     return state;
48 25
 });
49 26
 
50
-/**
51
- * Reduces a specific redux action CONFERENCE_FAILED of the feature overlay.
52
- *
53
- * @param {Object} state - The redux state of the feature overlay.
54
- * @param {Action} action - The redux action CONFERENCE_FAILED to reduce.
55
- * @private
56
- * @returns {Object} The new state of the feature overlay after the reduction of
57
- * the specified action.
58
- */
59
-function _conferenceFailed(state, { error: { message, name } }) {
60
-    if (name === JitsiConferenceErrors.FOCUS_LEFT
61
-            || name === JitsiConferenceErrors.VIDEOBRIDGE_NOT_AVAILABLE) {
62
-        return assign(state, {
63
-            haveToReload: true,
64
-            isNetworkFailure: false,
65
-
66
-            // FIXME There is no message associated with CONFERENCE_FAILED at
67
-            // the time of this writing. In jitsi-meet the action creator
68
-            // conferenceFailed neither accepts an argument message nor defines
69
-            // a property message on the error. In lib-jitsi-meet
70
-            // CONFERENCE_FAILED emissions mostly do not provide a message with
71
-            // the exception of at least one which provides an Error, not a
72
-            // string.
73
-            reason: message
74
-        });
75
-    }
76
-
77
-    return state;
78
-}
79
-
80
-/**
81
- * Reduces a specific redux action CONNECTION_ESTABLISHED of the feature
82
- * overlay.
83
- *
84
- * @param {Object} state - The redux state of the feature overlay.
85
- * @private
86
- * @returns {Object} The new state of the feature overlay after the reduction of
87
- * the specified action.
88
- */
89
-function _connectionEstablished(state) {
90
-    return set(state, 'connectionEstablished', true);
91
-}
92
-
93
-/**
94
- * Reduces a specific redux action CONNECTION_FAILED of the feature overlay.
95
- *
96
- * @param {Object} state - The redux state of the feature overlay.
97
- * @param {Action} action - The redux action CONNECTION_FAILED to reduce.
98
- * @private
99
- * @returns {Object} The new state of the feature overlay after the reduction of
100
- * the specified action.
101
- */
102
-function _connectionFailed(state, { error }) {
103
-    if (isFatalJitsiConnectionError(error)) {
104
-        const { message } = error;
105
-
106
-        logger.error(`FATAL XMPP connection error: ${message}`);
107
-
108
-        return assign(state, {
109
-            haveToReload: true,
110
-
111
-            // From all of the cases above only CONNECTION_DROPPED_ERROR is
112
-            // considered a network type of failure.
113
-            isNetworkFailure:
114
-                error.name === JitsiConnectionErrors.CONNECTION_DROPPED_ERROR,
115
-            reason: `xmpp-conn-dropped: ${message}`
116
-        });
117
-    }
118
-
119
-    return state;
120
-}
121
-
122
-/**
123
- * Reduces a specific redux action CONNECTION_WILL_CONNECT in the feature
124
- * overlay. Clears the redux state related to the XMPP connection's status.
125
- *
126
- * @param {Object} state - The redux state of the feature overlay.
127
- * @param {Action} action - The redux action to reduce.
128
- * @private
129
- * @returns {Object} The new state of the feature overlay after reducing the
130
- * specified {@code action} in the feature overlay.
131
- */
132
-function _connectionWillConnect(
133
-        state,
134
-        action) { // eslint-disable-line no-unused-vars
135
-    return assign(state, {
136
-        connectionEstablished: undefined,
137
-        haveToReload: undefined,
138
-        isNetworkFailure: undefined,
139
-        reason: undefined
140
-    });
141
-}
142
-
143 27
 /**
144 28
  * Reduces a specific redux action MEDIA_PERMISSION_PROMPT_VISIBILITY_CHANGED of
145 29
  * the feature overlay.

Laden…
Annuleren
Opslaan