[RN] Replace red screen with dialog

react/features/base/dialog/components/native/ConfirmDialog.js

@@ -43,7 +43,7 @@ class ConfirmDialog extends BaseSubmitDialog<Props, *> {
      * @returns {string}
      */
     _getSubmitButtonKey() {
-        return 'dialog.confirmYes';
+        return this.props.okKey || 'dialog.confirmYes';
     }
 
     _onCancel: () => void;
@@ -57,7 +57,7 @@ class ConfirmDialog extends BaseSubmitDialog<Props, *> {
      * @inheritdoc
      */
     _renderAdditionalButtons() {
-        const { _dialogStyles, t } = this.props;
+        const { _dialogStyles, cancelKey, t } = this.props;
 
         return (
             <TouchableOpacity
@@ -68,7 +68,7 @@ class ConfirmDialog extends BaseSubmitDialog<Props, *> {
                     _dialogStyles.buttonSeparator
                 ] }>
                 <Text style = { _dialogStyles.text }>
-                    { t('dialog.confirmNo') }
+                    { t(cancelKey || 'dialog.confirmNo') }
                 </Text>
             </TouchableOpacity>
         );
@@ -80,6 +80,10 @@ class ConfirmDialog extends BaseSubmitDialog<Props, *> {
      * @inheritdoc
      */
     _renderSubmittable() {
+        if (this.props.children) {
+            return this.props.children;
+        }
+
         const { _dialogStyles, contentKey, t } = this.props;
         const content
             = typeof contentKey === 'string'

react/features/overlay/components/AbstractPageReloadOverlay.js

@@ -23,7 +23,7 @@ const logger = require('jitsi-meet-logger').getLogger(__filename);
  * The type of the React {@code Component} props of
  * {@link AbstractPageReloadOverlay}.
  */
-type Props = {
+export type Props = {
 
     /**
      * The details is an object containing more information about the connection
@@ -82,8 +82,8 @@ type State = {
 /**
  * Implements an abstract React {@link Component} for the page reload overlays.
  */
-export default class AbstractPageReloadOverlay
-    extends Component<Props, State> {
+export default class AbstractPageReloadOverlay<P: Props>
+    extends Component<P, State> {
     /**
      * Determines whether this overlay needs to be rendered (according to a
      * specific redux state). Called by {@link OverlayContainer}.
@@ -132,7 +132,7 @@ export default class AbstractPageReloadOverlay
      * instance is to be initialized.
      * @public
      */
-    constructor(props: Object) {
+    constructor(props: P) {
         super(props);
 
         /**

react/features/overlay/components/OverlayFrame.native.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { Component, type Node } from 'react';
-import { SafeAreaView } from 'react-native';
+import { SafeAreaView, View } from 'react-native';
 
 import { overlayFrame as styles } from './styles';
 
@@ -28,9 +28,11 @@ export default class OverlayFrame extends Component<Props> {
      */
     render() {
         return (
-            <SafeAreaView style = { styles.container }>
-                { this.props.children }
-            </SafeAreaView>
+            <View style = { styles.container }>
+                <SafeAreaView style = { styles.safeContainer } >
+                    { this.props.children }
+                </SafeAreaView>
+            </View>
         );
     }
 }

react/features/overlay/components/OverlayFrame.web.js

@@ -18,7 +18,7 @@ type Props = {
      * Indicates the css style of the overlay. If true, then lighter; darker,
      * otherwise.
      */
-    isLightOverlay: boolean
+    isLightOverlay?: boolean
 };
 
 /**

react/features/overlay/components/PageReloadOverlay.native.js

@@ -1,23 +1,38 @@
+// @flow
+
 import React from 'react';
-import { Text, View } from 'react-native';
+import { Text } from 'react-native';
 import { connect } from 'react-redux';
 
 import { appNavigate, reloadNow } from '../../app';
+import { ColorSchemeRegistry } from '../../base/color-scheme';
+import { ConfirmDialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
-import { LoadingIndicator } from '../../base/react';
+import { StyleType } from '../../base/styles';
 
-import AbstractPageReloadOverlay, { abstractMapStateToProps }
-    from './AbstractPageReloadOverlay';
+import AbstractPageReloadOverlay, {
+    abstractMapStateToProps,
+    type Props as AbstractProps
+} from './AbstractPageReloadOverlay';
 import { setFatalError } from '../actions';
 import OverlayFrame from './OverlayFrame';
-import { pageReloadOverlay as styles } from './styles';
+
+type Props = AbstractProps & {
+
+    /**
+     * The color-schemed stylesheet of the base/dialog feature.
+     */
+    _dialogStyles: StyleType
+}
 
 /**
  * Implements a React Component for page reload overlay. Shown before the
  * conference is reloaded. Shows a warning message and counts down towards the
  * reload.
  */
-class PageReloadOverlay extends AbstractPageReloadOverlay {
+class PageReloadOverlay extends AbstractPageReloadOverlay<Props> {
+    _interval: IntervalID;
+
     /**
      * Initializes a new PageReloadOverlay instance.
      *
@@ -32,6 +47,8 @@ class PageReloadOverlay extends AbstractPageReloadOverlay {
         this._onReloadNow = this._onReloadNow.bind(this);
     }
 
+    _onCancel: () => void
+
     /**
      * Handle clicking of the "Cancel" button. It will navigate back to the
      * welcome page.
@@ -45,6 +62,8 @@ class PageReloadOverlay extends AbstractPageReloadOverlay {
         this.props.dispatch(appNavigate(undefined));
     }
 
+    _onReloadNow: () => void
+
     /**
      * Handle clicking on the "Reload Now" button. It will navigate to the same
      * conference URL as before immediately, without waiting for the timer to
@@ -65,37 +84,38 @@ class PageReloadOverlay extends AbstractPageReloadOverlay {
      * @returns {ReactElement}
      */
     render() {
-        const { t } = this.props;
+        const { _dialogStyles, t } = this.props;
         const { message, timeLeft, title } = this.state;
 
         return (
             <OverlayFrame>
-                <View style = { styles.container }>
-                    <View style = { styles.loadingIndicator }>
-                        <LoadingIndicator />
-                    </View>
-                    <Text style = { styles.title }>
-                        { t(title) }
+                <ConfirmDialog
+                    cancelKey = 'dialog.Cancel'
+                    okKey = 'dialog.rejoinNow'
+                    onCancel = { this._onCancel }
+                    onSubmit = { this._onReloadNow }>
+                    <Text style = { _dialogStyles.text }>
+                        { `${t(title)} ${t(message, { seconds: timeLeft })}` }
                     </Text>
-                    <Text style = { styles.message }>
-                        { t(message, { seconds: timeLeft }) }
-                    </Text>
-                    <View style = { styles.buttonBox }>
-                        <Text
-                            onPress = { this._onReloadNow }
-                            style = { styles.button } >
-                            { t('dialog.rejoinNow') }
-                        </Text>
-                        <Text
-                            onPress = { this._onCancel }
-                            style = { styles.button } >
-                            { t('dialog.Cancel') }
-                        </Text>
-                    </View>
-                </View>
+                </ConfirmDialog>
             </OverlayFrame>
         );
     }
 }
 
-export default translate(connect(abstractMapStateToProps)(PageReloadOverlay));
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {{
+ *     _dialogStyles: StyleType
+ * }}
+ */
+function _mapStateToProps(state) {
+    return {
+        ...abstractMapStateToProps(state),
+        _dialogStyles: ColorSchemeRegistry.get(state, 'Dialog')
+    };
+}
+
+export default translate(connect(_mapStateToProps)(PageReloadOverlay));

react/features/overlay/components/PageReloadOverlay.web.js

@@ -1,10 +1,14 @@
+// @flow
+
 import React from 'react';
 import { connect } from 'react-redux';
 
 import { translate } from '../../base/i18n';
 
-import AbstractPageReloadOverlay, { abstractMapStateToProps }
-    from './AbstractPageReloadOverlay';
+import AbstractPageReloadOverlay, {
+    abstractMapStateToProps,
+    type Props
+} from './AbstractPageReloadOverlay';
 import OverlayFrame from './OverlayFrame';
 
 /**
@@ -12,7 +16,7 @@ import OverlayFrame from './OverlayFrame';
  * conference is reloaded. Shows a warning message and counts down towards the
  * reload.
  */
-class PageReloadOverlay extends AbstractPageReloadOverlay {
+class PageReloadOverlay extends AbstractPageReloadOverlay<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -39,6 +43,10 @@ class PageReloadOverlay extends AbstractPageReloadOverlay {
             </OverlayFrame>
         );
     }
+
+    _renderButton: () => React$Element<*>
+
+    _renderProgressBar: () => React$Element<*>
 }
 
 export default translate(connect(abstractMapStateToProps)(PageReloadOverlay));

react/features/overlay/components/styles.js

@@ -1,11 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles';
-
-/**
- * The default color of text on overlays.
- */
-const TEXT_COLOR = ColorPalette.white;
+import { ColorPalette, createStyleSheet } from '../../base/styles';
 
 /**
  * The React {@code Component} styles of {@code OverlayFrame}.
@@ -17,67 +12,10 @@ export const overlayFrame = createStyleSheet({
      */
     container: {
         ...StyleSheet.absoluteFillObject,
-        backgroundColor: ColorPalette.red
-    }
-});
-
-/**
- * The React {@code Component} styles of {@code PageReloadOverlay}.
- */
-export const pageReloadOverlay = createStyleSheet({
-    /**
-     * Style for the buttons on {@code PageReloadOverlay}.
-     */
-    button: {
-        color: TEXT_COLOR,
-        fontSize: 20,
-        marginVertical: BoxModel.margin,
-        textAlign: 'center'
-    },
-
-    /**
-     * Style for the "box" surrounding the buttons at the bottom of the page.
-     */
-    buttonBox: {
-        bottom: BoxModel.margin,
-        left: 0,
-        position: 'absolute',
-        right: 0
-    },
-
-    /**
-     * Style for the container of the {@code PageReloadOVerlay}.
-     */
-    container: {
-        flex: 1,
-        margin: BoxModel.margin * 2
-    },
-
-    /**
-     * Style for the {@code LoadingIndicator}.
-     */
-    loadingIndicator: {
-        ...StyleSheet.absoluteFillObject,
-        alignItems: 'center',
-        justifyContent: 'center'
+        backgroundColor: ColorPalette.black
     },
 
-    /**
-     * Style for the descriptive error message.
-     */
-    message: {
-        color: TEXT_COLOR,
-        fontSize: 16,
-        marginTop: BoxModel.margin,
-        textAlign: 'center'
-    },
-
-    /**
-     * Style for the error title.
-     */
-    title: {
-        color: TEXT_COLOR,
-        fontSize: 24,
-        textAlign: 'center'
+    safeContainer: {
+        flex: 1
     }
 });