From 98c7430b6fee1eaae057a1c18aca3ede5dcaeabb Mon Sep 17 00:00:00 2001 From: Bettenbuk Zoltan Date: Wed, 6 Mar 2019 17:28:59 +0100 Subject: [PATCH] [RN] Replace red screen with dialog --- .../dialog/components/native/ConfirmDialog.js | 10 ++- .../components/AbstractPageReloadOverlay.js | 8 +- .../overlay/components/OverlayFrame.native.js | 10 ++- .../overlay/components/OverlayFrame.web.js | 2 +- .../components/PageReloadOverlay.native.js | 80 ++++++++++++------- .../components/PageReloadOverlay.web.js | 14 +++- react/features/overlay/components/styles.js | 74 ++--------------- 7 files changed, 85 insertions(+), 113 deletions(-) diff --git a/react/features/base/dialog/components/native/ConfirmDialog.js b/react/features/base/dialog/components/native/ConfirmDialog.js index 49781b190..32cfd8fd3 100644 --- a/react/features/base/dialog/components/native/ConfirmDialog.js +++ b/react/features/base/dialog/components/native/ConfirmDialog.js @@ -43,7 +43,7 @@ class ConfirmDialog extends BaseSubmitDialog { * @returns {string} */ _getSubmitButtonKey() { - return 'dialog.confirmYes'; + return this.props.okKey || 'dialog.confirmYes'; } _onCancel: () => void; @@ -57,7 +57,7 @@ class ConfirmDialog extends BaseSubmitDialog { * @inheritdoc */ _renderAdditionalButtons() { - const { _dialogStyles, t } = this.props; + const { _dialogStyles, cancelKey, t } = this.props; return ( { _dialogStyles.buttonSeparator ] }> - { t('dialog.confirmNo') } + { t(cancelKey || 'dialog.confirmNo') } ); @@ -80,6 +80,10 @@ class ConfirmDialog extends BaseSubmitDialog { * @inheritdoc */ _renderSubmittable() { + if (this.props.children) { + return this.props.children; + } + const { _dialogStyles, contentKey, t } = this.props; const content = typeof contentKey === 'string' diff --git a/react/features/overlay/components/AbstractPageReloadOverlay.js b/react/features/overlay/components/AbstractPageReloadOverlay.js index f267f1416..c4d59b3dc 100644 --- a/react/features/overlay/components/AbstractPageReloadOverlay.js +++ b/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 { +export default class AbstractPageReloadOverlay + extends Component { /** * 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); /** diff --git a/react/features/overlay/components/OverlayFrame.native.js b/react/features/overlay/components/OverlayFrame.native.js index 1e19dfe05..21784a90f 100644 --- a/react/features/overlay/components/OverlayFrame.native.js +++ b/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 { */ render() { return ( - - { this.props.children } - + + + { this.props.children } + + ); } } diff --git a/react/features/overlay/components/OverlayFrame.web.js b/react/features/overlay/components/OverlayFrame.web.js index f0874cb9b..97459a36f 100644 --- a/react/features/overlay/components/OverlayFrame.web.js +++ b/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 }; /** diff --git a/react/features/overlay/components/PageReloadOverlay.native.js b/react/features/overlay/components/PageReloadOverlay.native.js index 8e711c53d..b3aa66778 100644 --- a/react/features/overlay/components/PageReloadOverlay.native.js +++ b/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 { + _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 ( - - - - - - { t(title) } + + + { `${t(title)} ${t(message, { seconds: timeLeft })}` } - - { t(message, { seconds: timeLeft }) } - - - - { t('dialog.rejoinNow') } - - - { t('dialog.Cancel') } - - - + ); } } -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)); diff --git a/react/features/overlay/components/PageReloadOverlay.web.js b/react/features/overlay/components/PageReloadOverlay.web.js index cca6b70d3..b2a673d3a 100644 --- a/react/features/overlay/components/PageReloadOverlay.web.js +++ b/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 { /** * Implements React's {@link Component#render()}. * @@ -39,6 +43,10 @@ class PageReloadOverlay extends AbstractPageReloadOverlay { ); } + + _renderButton: () => React$Element<*> + + _renderProgressBar: () => React$Element<*> } export default translate(connect(abstractMapStateToProps)(PageReloadOverlay)); diff --git a/react/features/overlay/components/styles.js b/react/features/overlay/components/styles.js index ac16a7d1d..4903f89a2 100644 --- a/react/features/overlay/components/styles.js +++ b/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' - }, - - /** - * 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' + backgroundColor: ColorPalette.black + }, + + safeContainer: { + flex: 1 } });