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.

react/features/app/components/AbstractApp.js

@@ -1,4 +1,5 @@
 /* global APP */
+/* eslint-disable react/no-multi-comp */
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
@@ -15,6 +16,7 @@ import {
 import { RouteRegistry } from '../../base/react';
 import { MiddlewareRegistry, ReducerRegistry } from '../../base/redux';
 import { toURLString } from '../../base/util';
+import { OverlayContainer } from '../../overlay';
 import { BlankPage } from '../../welcome';
 
 import { appNavigate, appWillMount, appWillUnmount } from '../actions';
@@ -25,6 +27,32 @@ import { appNavigate, appWillMount, appWillUnmount } from '../actions';
  */
 const DEFAULT_URL = 'https://meet.jit.si';
 
+/**
+ * react-redux's {@code Provider} component only accepts a single child, so use
+ * a simple wrapper component in order to pass more than 1 child components.
+ * TODO: remove this once React Native supports Fragment (0.52 probably).
+ */
+class Fragment extends Component {
+    /**
+     * {@code Fragment} component's property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        children: PropTypes.node
+    };
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return this.props.children;
+    }
+}
+
 /**
  * Base (abstract) class for main App component.
  *
@@ -201,7 +229,10 @@ export class AbstractApp extends Component {
             return (
                 <I18nextProvider i18n = { i18next }>
                     <Provider store = { this._getStore() }>
-                        { this._createElement(component) }
+                        <Fragment>
+                            { this._createElement(component) }
+                            <OverlayContainer />
+                        </Fragment>
                     </Provider>
                 </I18nextProvider>
             );

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

@@ -13,7 +13,6 @@ import { Container, LoadingIndicator } from '../../base/react';
 import { createDesiredLocalTracks } from '../../base/tracks';
 import { Filmstrip } from '../../filmstrip';
 import { LargeVideo } from '../../large-video';
-import { OverlayContainer } from '../../overlay';
 import { setToolboxVisible, Toolbox } from '../../toolbox';
 
 import styles from './styles';
@@ -190,12 +189,6 @@ class Conference extends Component<Props> {
                   */}
                 <LargeVideo />
 
-                {/*
-                  * The overlays need to be bellow the Toolbox so that the user
-                  * may tap the ToolbarButtons.
-                  */}
-                <OverlayContainer />
-
                 {/*
                   * The activity/loading indicator goes above everything, except
                   * the toolbox/toolbars and the dialogs.

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

@@ -10,7 +10,6 @@ import { DialogContainer } from '../../base/dialog';
 import { Filmstrip } from '../../filmstrip';
 import { LargeVideo } from '../../large-video';
 import { NotificationsContainer } from '../../notifications';
-import { OverlayContainer } from '../../overlay';
 import { showToolbox, Toolbox } from '../../toolbox';
 import { HideNotificationBarStyle } from '../../unsupported-browser';
 
@@ -117,7 +116,6 @@ class Conference extends Component<*> {
 
                 <DialogContainer />
                 <NotificationsContainer />
-                <OverlayContainer />
 
                 {/*
                   * Temasys automatically injects a notification bar, if