haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[RN] Replace red screen with dialog

This commit is contained in:
Bettenbuk Zoltan 2019-03-06 17:28:59 +01:00 committed by Zoltan Bettenbuk
parent ebdcbe122a
commit 98c7430b6f
7 changed files with 85 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
react/features/base/dialog/components/native/ConfirmDialog.js
View File

@ -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'

8
react/features/overlay/components/AbstractPageReloadOverlay.js
View File

@ -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);
/**

10
react/features/overlay/components/OverlayFrame.native.js
View File

@ -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>
);
}
}

2
react/features/overlay/components/OverlayFrame.web.js
View File

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

80
react/features/overlay/components/PageReloadOverlay.native.js
View File

@ -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));

14
react/features/overlay/components/PageReloadOverlay.web.js
View File

@ -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));

74
react/features/overlay/components/styles.js
View File

@ -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
}
});