Browse Source

feat(overlays): render overlays outside of Conference

On web Conference is pretty much all there is, but on mobile we have the welcome
page and the blank page. If we fail to load config.js, for example we will still
be in the welcome page *and* we want to show an error overlay.
master
Saúl Ibarra Corretgé 8 years ago
parent
commit
870e6bbddc

+ 32
- 1
react/features/app/components/AbstractApp.js View File

1
 /* global APP */
1
 /* global APP */
2
+/* eslint-disable react/no-multi-comp */
2
 
3
 
3
 import PropTypes from 'prop-types';
4
 import PropTypes from 'prop-types';
4
 import React, { Component } from 'react';
5
 import React, { Component } from 'react';
15
 import { RouteRegistry } from '../../base/react';
16
 import { RouteRegistry } from '../../base/react';
16
 import { MiddlewareRegistry, ReducerRegistry } from '../../base/redux';
17
 import { MiddlewareRegistry, ReducerRegistry } from '../../base/redux';
17
 import { toURLString } from '../../base/util';
18
 import { toURLString } from '../../base/util';
19
+import { OverlayContainer } from '../../overlay';
18
 import { BlankPage } from '../../welcome';
20
 import { BlankPage } from '../../welcome';
19
 
21
 
20
 import { appNavigate, appWillMount, appWillUnmount } from '../actions';
22
 import { appNavigate, appWillMount, appWillUnmount } from '../actions';
25
  */
27
  */
26
 const DEFAULT_URL = 'https://meet.jit.si';
28
 const DEFAULT_URL = 'https://meet.jit.si';
27
 
29
 
30
+/**
31
+ * react-redux's {@code Provider} component only accepts a single child, so use
32
+ * a simple wrapper component in order to pass more than 1 child components.
33
+ * TODO: remove this once React Native supports Fragment (0.52 probably).
34
+ */
35
+class Fragment extends Component {
36
+    /**
37
+     * {@code Fragment} component's property types.
38
+     *
39
+     * @static
40
+     */
41
+    static propTypes = {
42
+        children: PropTypes.node
43
+    };
44
+
45
+    /**
46
+     * Implements React's {@link Component#render()}.
47
+     *
48
+     * @inheritdoc
49
+     * @returns {ReactElement}
50
+     */
51
+    render() {
52
+        return this.props.children;
53
+    }
54
+}
55
+
28
 /**
56
 /**
29
  * Base (abstract) class for main App component.
57
  * Base (abstract) class for main App component.
30
  *
58
  *
201
             return (
229
             return (
202
                 <I18nextProvider i18n = { i18next }>
230
                 <I18nextProvider i18n = { i18next }>
203
                     <Provider store = { this._getStore() }>
231
                     <Provider store = { this._getStore() }>
204
-                        { this._createElement(component) }
232
+                        <Fragment>
233
+                            { this._createElement(component) }
234
+                            <OverlayContainer />
235
+                        </Fragment>
205
                     </Provider>
236
                     </Provider>
206
                 </I18nextProvider>
237
                 </I18nextProvider>
207
             );
238
             );

+ 0
- 7
react/features/conference/components/Conference.native.js View File

13
 import { createDesiredLocalTracks } from '../../base/tracks';
13
 import { createDesiredLocalTracks } from '../../base/tracks';
14
 import { Filmstrip } from '../../filmstrip';
14
 import { Filmstrip } from '../../filmstrip';
15
 import { LargeVideo } from '../../large-video';
15
 import { LargeVideo } from '../../large-video';
16
-import { OverlayContainer } from '../../overlay';
17
 import { setToolboxVisible, Toolbox } from '../../toolbox';
16
 import { setToolboxVisible, Toolbox } from '../../toolbox';
18
 
17
 
19
 import styles from './styles';
18
 import styles from './styles';
190
                   */}
189
                   */}
191
                 <LargeVideo />
190
                 <LargeVideo />
192
 
191
 
193
-                {/*
194
-                  * The overlays need to be bellow the Toolbox so that the user
195
-                  * may tap the ToolbarButtons.
196
-                  */}
197
-                <OverlayContainer />
198
-
199
                 {/*
192
                 {/*
200
                   * The activity/loading indicator goes above everything, except
193
                   * The activity/loading indicator goes above everything, except
201
                   * the toolbox/toolbars and the dialogs.
194
                   * the toolbox/toolbars and the dialogs.

+ 0
- 2
react/features/conference/components/Conference.web.js View File

10
 import { Filmstrip } from '../../filmstrip';
10
 import { Filmstrip } from '../../filmstrip';
11
 import { LargeVideo } from '../../large-video';
11
 import { LargeVideo } from '../../large-video';
12
 import { NotificationsContainer } from '../../notifications';
12
 import { NotificationsContainer } from '../../notifications';
13
-import { OverlayContainer } from '../../overlay';
14
 import { showToolbox, Toolbox } from '../../toolbox';
13
 import { showToolbox, Toolbox } from '../../toolbox';
15
 import { HideNotificationBarStyle } from '../../unsupported-browser';
14
 import { HideNotificationBarStyle } from '../../unsupported-browser';
16
 
15
 
117
 
116
 
118
                 <DialogContainer />
117
                 <DialogContainer />
119
                 <NotificationsContainer />
118
                 <NotificationsContainer />
120
-                <OverlayContainer />
121
 
119
 
122
                 {/*
120
                 {/*
123
                   * Temasys automatically injects a notification bar, if
121
                   * Temasys automatically injects a notification bar, if

Loading…
Cancel
Save