Move DialogContainer to BaseApp to have dialogs on the welcome screen too

react/features/app/components/App.native.js

@@ -5,6 +5,7 @@ import { Linking } from 'react-native';
 
 import '../../analytics';
 import '../../authentication';
+import { DialogContainer } from '../../base/dialog';
 import '../../base/jwt';
 import { Platform } from '../../base/react';
 import {
@@ -180,6 +181,17 @@ export class App extends AbstractApp {
     _onLinkingURL({ url }) {
         super._openURL(url);
     }
+
+    /**
+     * Renders the platform specific dialog container.
+     *
+     * @returns {React$Element}
+     */
+    _renderDialogContainer() {
+        return (
+            <DialogContainer />
+        );
+    }
 }
 
 /**

react/features/app/components/App.web.js

@@ -3,6 +3,7 @@
 import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import React from 'react';
 
+import { DialogContainer } from '../../base/dialog';
 import '../../base/responsive-ui';
 import '../../chat';
 import '../../room-lock';
@@ -39,4 +40,17 @@ export class App extends AbstractApp {
             </AtlasKitThemeProvider>
         );
     }
+
+    /**
+     * Renders the platform specific dialog container.
+     *
+     * @returns {React$Element}
+     */
+    _renderDialogContainer() {
+        return (
+            <AtlasKitThemeProvider mode = 'dark'>
+                <DialogContainer />
+            </AtlasKitThemeProvider>
+        );
+    }
 }

react/features/base/app/components/BaseApp.js

@@ -127,6 +127,7 @@ export default class BaseApp extends Component<*, State> {
                             { this._createMainElement(component) }
                             <SoundCollection />
                             { this._createExtraElement() }
+                            { this._renderDialogContainer() }
                         </Fragment>
                     </Provider>
                 </I18nextProvider>
@@ -235,4 +236,11 @@ export default class BaseApp extends Component<*, State> {
             this.setState({ route }, resolve);
         });
     }
+
+    /**
+     * Renders the platform specific dialog container.
+     *
+     * @returns {React$Element}
+     */
+    _renderDialogContainer: () => React$Element<*>
 }

react/features/base/dialog/components/DialogContainer.js

@@ -22,7 +22,12 @@ export class DialogContainer extends Component {
         /**
          * The props to pass to the component that will be rendered.
          */
-        _componentProps: PropTypes.object
+        _componentProps: PropTypes.object,
+
+        /**
+         * True if the UI is in a compact state where we don't show dialogs.
+         */
+        _reducedUI: PropTypes.bool
     };
 
     /**
@@ -32,10 +37,13 @@ export class DialogContainer extends Component {
      * @returns {ReactElement}
      */
     render() {
-        const { _component: component } = this.props;
+        const {
+            _component: component,
+            _reducedUI: reducedUI
+        } = this.props;
 
         return (
-            component
+            component && !reducedUI
                 ? React.createElement(component, this.props._componentProps)
                 : null);
     }
@@ -49,15 +57,18 @@ export class DialogContainer extends Component {
  * @private
  * @returns {{
  *     _component: React.Component,
- *     _componentProps: Object
+ *     _componentProps: Object,
+ *     _reducedUI: boolean
  * }}
  */
 function _mapStateToProps(state) {
     const stateFeaturesBaseDialog = state['features/base/dialog'];
+    const { reducedUI } = state['features/base/responsive-ui'];
 
     return {
         _component: stateFeaturesBaseDialog.component,
-        _componentProps: stateFeaturesBaseDialog.componentProps
+        _componentProps: stateFeaturesBaseDialog.componentProps,
+        _reducedUI: reducedUI
     };
 }
 

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

@@ -8,7 +8,6 @@ import { connect as reactReduxConnect } from 'react-redux';
 
 import { appNavigate } from '../../app';
 import { connect, disconnect } from '../../base/connection';
-import { DialogContainer } from '../../base/dialog';
 import { getParticipantCount } from '../../base/participants';
 import { Container, LoadingIndicator, TintedView } from '../../base/react';
 import {
@@ -315,11 +314,7 @@ class Conference extends Component<Props> {
                     this._renderConferenceNotification()
                 }
 
-                {/*
-                  * The dialogs are in the topmost stacking layers.
-                  */
-                    this.props._reducedUI || <DialogContainer />
-                }
+                <NotificationsContainer />
             </Container>
         );
     }

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

@@ -8,7 +8,6 @@ import VideoLayout from '../../../../modules/UI/videolayout/VideoLayout';
 
 import { obtainConfig } from '../../base/config';
 import { connect, disconnect } from '../../base/connection';
-import { DialogContainer } from '../../base/dialog';
 import { translate } from '../../base/i18n';
 import { Filmstrip } from '../../filmstrip';
 import { CalleeInfoContainer } from '../../invite';
@@ -226,7 +225,6 @@ class Conference extends Component<Props> {
                 { filmstripOnly || <Toolbox /> }
                 { filmstripOnly || <SidePanel /> }
 
-                <DialogContainer />
                 <NotificationsContainer />
 
                 <CalleeInfoContainer />

react/features/welcome/components/WelcomePage.web.js

@@ -7,7 +7,6 @@ import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import React from 'react';
 import { connect } from 'react-redux';
 
-import { DialogContainer } from '../../base/dialog';
 import { translate } from '../../base/i18n';
 import { Platform, Watermarks } from '../../base/react';
 import { CalendarList } from '../../calendar-sync';
@@ -168,9 +167,6 @@ class WelcomePage extends AbstractWelcomePage {
                             ref = { this._setAdditionalContentRef } />
                         : null }
                 </div>
-                <AtlasKitThemeProvider mode = 'dark'>
-                    <DialogContainer />
-                </AtlasKitThemeProvider>
             </AtlasKitThemeProvider>
         );
     }