feat(base/dialog): visibility control for PageReloadDialog (#12961)

* feat(base/dialog): visibility control for  PageReloadDialog

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

@@ -48,7 +48,7 @@ type Props = {
     /**
      * Dialog title.
      */
-    title?: string,
+    title?: string
 };
 
 /**

react/features/base/dialog/components/native/PageReloadDialog.tsx

@@ -11,6 +11,7 @@ import { IReduxState } from '../../../../app/types';
 import { translate } from '../../../i18n/functions';
 import { isFatalJitsiConnectionError } from '../../../lib-jitsi-meet/functions.native';
 import { connect } from '../../../redux/functions';
+import { hideDialog } from '../../actions';
 // @ts-ignore
 import logger from '../../logger';
 
@@ -33,10 +34,7 @@ interface IPageReloadDialogProps extends WithTranslation {
  * {@link PageReloadDialog}.
  */
 interface IPageReloadDialogState {
-    message: string;
     timeLeft: number;
-    timeoutSeconds: number;
-    title: string;
 }
 
 /**
@@ -48,6 +46,7 @@ class PageReloadDialog extends Component<IPageReloadDialogProps, IPageReloadDial
 
     // @ts-ignore
     _interval: IntervalID;
+    _timeoutSeconds: number;
 
     /**
      * Initializes a new PageReloadOverlay instance.
@@ -59,27 +58,15 @@ class PageReloadDialog extends Component<IPageReloadDialogProps, IPageReloadDial
     constructor(props: IPageReloadDialogProps) {
         super(props);
 
-        const timeoutSeconds = 10 + randomInt(0, 20);
-
-        let message, title;
-
-        if (this.props.isNetworkFailure) {
-            title = 'dialog.conferenceDisconnectTitle';
-            message = 'dialog.conferenceDisconnectMsg';
-        } else {
-            title = 'dialog.conferenceReloadTitle';
-            message = 'dialog.conferenceReloadMsg';
-        }
+        this._timeoutSeconds = 10 + randomInt(0, 20);
 
         this.state = {
-            message,
-            timeLeft: timeoutSeconds,
-            timeoutSeconds,
-            title
+            timeLeft: this._timeoutSeconds
         };
 
         this._onCancel = this._onCancel.bind(this);
         this._onReloadNow = this._onReloadNow.bind(this);
+        this._onReconnecting = this._onReconnecting.bind(this);
     }
 
     /**
@@ -89,32 +76,14 @@ class PageReloadDialog extends Component<IPageReloadDialogProps, IPageReloadDial
      * @returns {void}
      */
     componentDidMount() {
-        const { dispatch } = this.props;
         const { timeLeft } = this.state;
 
         logger.info(
-            `The conference will be reloaded after ${
-                this.state.timeoutSeconds} seconds.`);
-
-        this._interval
-            = setInterval(
-            () => {
-                if (timeLeft === 0) {
-                    if (this._interval) {
-                        clearInterval(this._interval);
-                        this._interval = undefined;
-                    }
-
-                    dispatch(reloadNow());
-                } else {
-                    this.setState(prevState => {
-                        return {
-                            timeLeft: prevState.timeLeft - 1
-                        };
-                    });
-                }
-            },
-            1000);
+            `The conference will be reloaded after ${timeLeft} seconds.`
+        );
+
+        this._interval = setInterval(() =>
+            this._onReconnecting(), 1000);
     }
 
     /**
@@ -138,12 +107,37 @@ class PageReloadDialog extends Component<IPageReloadDialogProps, IPageReloadDial
      * @returns {boolean}
      */
     _onCancel() {
+        const { dispatch } = this.props;
+
         clearInterval(this._interval);
-        this.props.dispatch(appNavigate(undefined));
+        dispatch(appNavigate(undefined));
 
         return true;
     }
 
+    /**
+     * Handles automatic reconnection.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onReconnecting() {
+        const { dispatch } = this.props;
+        const { timeLeft } = this.state;
+
+        if (timeLeft === 0) {
+            if (this._interval) {
+                dispatch(hideDialog());
+                this._onReloadNow();
+                this._interval = undefined;
+            }
+        }
+
+        this.setState({
+            timeLeft: timeLeft - 1
+        });
+    }
+
     /**
      * Handle clicking on the "Reload Now" button. It will navigate to the same
      * conference URL as before immediately, without waiting for the timer to
@@ -153,8 +147,10 @@ class PageReloadDialog extends Component<IPageReloadDialogProps, IPageReloadDial
      * @returns {boolean}
      */
     _onReloadNow() {
+        const { dispatch } = this.props;
+
         clearInterval(this._interval);
-        this.props.dispatch(reloadNow());
+        dispatch(reloadNow());
 
         return true;
     }
@@ -166,8 +162,18 @@ class PageReloadDialog extends Component<IPageReloadDialogProps, IPageReloadDial
      * @returns {ReactElement}
      */
     render() {
-        const { t } = this.props;
-        const { message, timeLeft, title } = this.state;
+        const { isNetworkFailure, t } = this.props;
+        const { timeLeft } = this.state;
+
+        let message, title;
+
+        if (isNetworkFailure) {
+            title = 'dialog.conferenceDisconnectTitle';
+            message = 'dialog.conferenceDisconnectMsg';
+        } else {
+            title = 'dialog.conferenceReloadTitle';
+            message = 'dialog.conferenceReloadMsg';
+        }
 
         return (
             <ConfirmDialog
@@ -187,9 +193,8 @@ class PageReloadDialog extends Component<IPageReloadDialogProps, IPageReloadDial
  * @param {Object} state - The redux state.
  * @protected
  * @returns {{
- *     message: string,
- *     reason: string,
- *     title: string
+ *     isNetworkFailure: boolean,
+ *     reason: string
  * }}
  */
 function mapStateToProps(state: IReduxState) {