[RN] Remove mobile notifications
This commit is contained in:
Bettenbuk Zoltan
Saúl Ibarra Corretgé
parent
e5cc732b72
commit
60f7ba7301
|
|
@ -11,21 +11,18 @@ import { connect, disconnect } from '../../base/connection';
|
||||||
import { getParticipantCount } from '../../base/participants';
|
import { getParticipantCount } from '../../base/participants';
|
||||||
import { Container, LoadingIndicator, TintedView } from '../../base/react';
|
import { Container, LoadingIndicator, TintedView } from '../../base/react';
|
||||||
import {
|
import {
|
||||||
isNarrowAspectRatio,
|
|
||||||
makeAspectRatioAware
|
makeAspectRatioAware
|
||||||
} from '../../base/responsive-ui';
|
} from '../../base/responsive-ui';
|
||||||
import { TestConnectionInfo } from '../../base/testing';
|
import { TestConnectionInfo } from '../../base/testing';
|
||||||
import { createDesiredLocalTracks } from '../../base/tracks';
|
import { createDesiredLocalTracks } from '../../base/tracks';
|
||||||
import { ConferenceNotification } from '../../calendar-sync';
|
import { ConferenceNotification } from '../../calendar-sync';
|
||||||
import {
|
import {
|
||||||
FILMSTRIP_SIZE,
|
|
||||||
Filmstrip,
|
Filmstrip,
|
||||||
isFilmstripVisible,
|
isFilmstripVisible,
|
||||||
TileView
|
TileView
|
||||||
} from '../../filmstrip';
|
} from '../../filmstrip';
|
||||||
import { LargeVideo } from '../../large-video';
|
import { LargeVideo } from '../../large-video';
|
||||||
import { CalleeInfoContainer } from '../../invite';
|
import { CalleeInfoContainer } from '../../invite';
|
||||||
import { NotificationsContainer } from '../../notifications';
|
|
||||||
import { Captions } from '../../subtitles';
|
import { Captions } from '../../subtitles';
|
||||||
import { setToolboxVisible, Toolbox } from '../../toolbox';
|
import { setToolboxVisible, Toolbox } from '../../toolbox';
|
||||||
import { shouldDisplayTileView } from '../../video-layout';
|
import { shouldDisplayTileView } from '../../video-layout';
|
||||||
|
|
@ -305,12 +302,6 @@ class Conference extends Component<Props> {
|
||||||
<View
|
<View
|
||||||
pointerEvents = 'box-none'
|
pointerEvents = 'box-none'
|
||||||
style = { styles.toolboxAndFilmstripContainer }>
|
style = { styles.toolboxAndFilmstripContainer }>
|
||||||
{/*
|
|
||||||
* Notifications are rendered on the very top of other
|
|
||||||
* components like subtitles, toolbox and filmstrip.
|
|
||||||
*/
|
|
||||||
this._renderNotificationsContainer()
|
|
||||||
}
|
|
||||||
|
|
||||||
<Captions onPress = { this._onClick } />
|
<Captions onPress = { this._onClick } />
|
||||||
|
|
||||||
|
|
@ -336,6 +327,7 @@ class Conference extends Component<Props> {
|
||||||
{
|
{
|
||||||
this._renderConferenceNotification()
|
this._renderConferenceNotification()
|
||||||
}
|
}
|
||||||
|
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -386,33 +378,6 @@ class Conference extends Component<Props> {
|
||||||
? <ConferenceNotification />
|
? <ConferenceNotification />
|
||||||
: undefined);
|
: undefined);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Renders a container for notifications to be displayed by the
|
|
||||||
* base/notifications feature.
|
|
||||||
*
|
|
||||||
* @private
|
|
||||||
* @returns {React$Element}
|
|
||||||
*/
|
|
||||||
_renderNotificationsContainer() {
|
|
||||||
const notificationsStyle = {};
|
|
||||||
|
|
||||||
// In the landscape mode (wide) there's problem with notifications being
|
|
||||||
// shadowed by the filmstrip rendered on the right. This makes the "x"
|
|
||||||
// button not clickable. In order to avoid that a margin of the
|
|
||||||
// filmstrip's size is added to the right.
|
|
||||||
//
|
|
||||||
// Pawel: after many attempts I failed to make notifications adjust to
|
|
||||||
// their contents width because of column and rows being used in the
|
|
||||||
// flex layout. The only option that seemed to limit the notification's
|
|
||||||
// size was explicit 'width' value which is not better than the margin
|
|
||||||
// added here.
|
|
||||||
if (this.props._filmstripVisible && !isNarrowAspectRatio(this)) {
|
|
||||||
notificationsStyle.marginRight = FILMSTRIP_SIZE;
|
|
||||||
}
|
|
||||||
|
|
||||||
return <NotificationsContainer style = { notificationsStyle } />;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -1,106 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import { Text, TouchableOpacity, View } from 'react-native';
|
|
||||||
|
|
||||||
import { Icon } from '../../base/font-icons';
|
|
||||||
import { translate } from '../../base/i18n';
|
|
||||||
|
|
||||||
import { NOTIFICATION_TYPE } from '../constants';
|
|
||||||
|
|
||||||
import AbstractNotification, {
|
|
||||||
type Props
|
|
||||||
} from './AbstractNotification';
|
|
||||||
import styles from './styles';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Implements a React {@link Component} to display a notification.
|
|
||||||
*
|
|
||||||
* @extends Component
|
|
||||||
*/
|
|
||||||
class Notification extends AbstractNotification<Props> {
|
|
||||||
/**
|
|
||||||
* Implements React's {@link Component#render()}.
|
|
||||||
*
|
|
||||||
* @inheritdoc
|
|
||||||
* @returns {ReactElement}
|
|
||||||
*/
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
appearance,
|
|
||||||
isDismissAllowed,
|
|
||||||
t,
|
|
||||||
title,
|
|
||||||
titleArguments,
|
|
||||||
titleKey
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
let notificationStyle;
|
|
||||||
|
|
||||||
switch (appearance) {
|
|
||||||
case NOTIFICATION_TYPE.ERROR:
|
|
||||||
notificationStyle = styles.notificationTypeError;
|
|
||||||
break;
|
|
||||||
case NOTIFICATION_TYPE.NORMAL:
|
|
||||||
notificationStyle = styles.notificationTypeNormal;
|
|
||||||
break;
|
|
||||||
case NOTIFICATION_TYPE.SUCCESS:
|
|
||||||
notificationStyle = styles.notificationTypeSuccess;
|
|
||||||
break;
|
|
||||||
case NOTIFICATION_TYPE.WARNING:
|
|
||||||
notificationStyle = styles.notificationTypeWarning;
|
|
||||||
break;
|
|
||||||
case NOTIFICATION_TYPE.INFO:
|
|
||||||
default:
|
|
||||||
notificationStyle = styles.notificationTypeInfo;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
pointerEvents = 'box-none'
|
|
||||||
style = { [
|
|
||||||
styles.notification,
|
|
||||||
notificationStyle
|
|
||||||
] }>
|
|
||||||
<View style = { styles.contentColumn }>
|
|
||||||
<View
|
|
||||||
pointerEvents = 'box-none'
|
|
||||||
style = { styles.notificationTitle }>
|
|
||||||
<Text style = { styles.titleText }>
|
|
||||||
{
|
|
||||||
title || t(titleKey, titleArguments)
|
|
||||||
}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
<View
|
|
||||||
pointerEvents = 'box-none'
|
|
||||||
style = { styles.notificationContent }>
|
|
||||||
{
|
|
||||||
this._getDescription().map((line, index) => (
|
|
||||||
<Text
|
|
||||||
key = { index }
|
|
||||||
style = { styles.contentText }>
|
|
||||||
{ line }
|
|
||||||
</Text>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
{
|
|
||||||
isDismissAllowed
|
|
||||||
&& <TouchableOpacity onPress = { this._onDismissed }>
|
|
||||||
<Icon
|
|
||||||
name = { 'close' }
|
|
||||||
style = { styles.dismissIcon } />
|
|
||||||
</TouchableOpacity>
|
|
||||||
}
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
_getDescription: () => Array<string>;
|
|
||||||
|
|
||||||
_onDismissed: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default translate(Notification);
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import { View } from 'react-native';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import AbstractNotificationsContainer, {
|
|
||||||
_abstractMapStateToProps,
|
|
||||||
type Props as AbstractProps
|
|
||||||
} from './AbstractNotificationsContainer';
|
|
||||||
import Notification from './Notification';
|
|
||||||
import styles from './styles';
|
|
||||||
|
|
||||||
type Props = AbstractProps & {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Any custom styling applied to the notifications container.
|
|
||||||
*/
|
|
||||||
style: Object
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Implements a React {@link Component} which displays notifications and handles
|
|
||||||
* automatic dismissmal after a notification is shown for a defined timeout
|
|
||||||
* period.
|
|
||||||
*
|
|
||||||
* @extends {Component}
|
|
||||||
*/
|
|
||||||
class NotificationsContainer
|
|
||||||
extends AbstractNotificationsContainer<Props> {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Implements React's {@link Component#render()}.
|
|
||||||
*
|
|
||||||
* @inheritdoc
|
|
||||||
* @returns {ReactElement}
|
|
||||||
*/
|
|
||||||
render() {
|
|
||||||
const { _notifications } = this.props;
|
|
||||||
|
|
||||||
if (!_notifications || !_notifications.length) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
pointerEvents = 'box-none'
|
|
||||||
style = { [
|
|
||||||
styles.notificationContainer,
|
|
||||||
this.props.style
|
|
||||||
] } >
|
|
||||||
{
|
|
||||||
_notifications.map(
|
|
||||||
({ props, uid }) => (
|
|
||||||
<Notification
|
|
||||||
{ ...props }
|
|
||||||
key = { uid }
|
|
||||||
onDismissed = { this._onDismissed }
|
|
||||||
uid = { uid } />))
|
|
||||||
}
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
_onDismissed: number => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default connect(_abstractMapStateToProps)(NotificationsContainer);
|
|
||||||
|
|
@ -1,104 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import { BoxModel, createStyleSheet, ColorPalette } from '../../base/styles';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The styles of the React {@code Components} of the feature notifications.
|
|
||||||
*/
|
|
||||||
export default createStyleSheet({
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The content (left) column of the notification.
|
|
||||||
*/
|
|
||||||
contentColumn: {
|
|
||||||
flex: 1,
|
|
||||||
flexDirection: 'column',
|
|
||||||
padding: BoxModel.padding
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Test style of the notification.
|
|
||||||
*/
|
|
||||||
contentText: {
|
|
||||||
color: ColorPalette.white
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Dismiss icon style.
|
|
||||||
*/
|
|
||||||
dismissIcon: {
|
|
||||||
alignSelf: 'center',
|
|
||||||
color: ColorPalette.white,
|
|
||||||
fontSize: 16,
|
|
||||||
padding: 1.5 * BoxModel.padding
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Outermost view of a single notification.
|
|
||||||
*/
|
|
||||||
notification: {
|
|
||||||
borderRadius: 5,
|
|
||||||
flexDirection: 'row',
|
|
||||||
marginTop: 0.5 * BoxModel.margin
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Outermost container of a list of notifications.
|
|
||||||
*/
|
|
||||||
notificationContainer: {
|
|
||||||
flexGrow: 0,
|
|
||||||
justifyContent: 'flex-end',
|
|
||||||
padding: 2 * BoxModel.padding,
|
|
||||||
paddingBottom: BoxModel.padding
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Wrapper for the message (without title).
|
|
||||||
*/
|
|
||||||
notificationContent: {
|
|
||||||
flexDirection: 'column',
|
|
||||||
paddingVertical: 0.5 * BoxModel.padding
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The View containing the title.
|
|
||||||
*/
|
|
||||||
notificationTitle: {
|
|
||||||
paddingVertical: 0.5 * BoxModel.padding
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Background settings for different notification types.
|
|
||||||
*/
|
|
||||||
|
|
||||||
notificationTypeError: {
|
|
||||||
backgroundColor: ColorPalette.R400
|
|
||||||
},
|
|
||||||
|
|
||||||
notificationTypeInfo: {
|
|
||||||
backgroundColor: ColorPalette.N500
|
|
||||||
},
|
|
||||||
|
|
||||||
notificationTypeNormal: {
|
|
||||||
// NOTE: Mobile has black background when the large video doesn't render
|
|
||||||
// a stream, so we avoid using black as the background of the normal
|
|
||||||
// type notifications.
|
|
||||||
backgroundColor: ColorPalette.N500
|
|
||||||
},
|
|
||||||
|
|
||||||
notificationTypeSuccess: {
|
|
||||||
backgroundColor: ColorPalette.G400
|
|
||||||
},
|
|
||||||
|
|
||||||
notificationTypeWarning: {
|
|
||||||
backgroundColor: ColorPalette.Y200
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Title text style.
|
|
||||||
*/
|
|
||||||
titleText: {
|
|
||||||
color: ColorPalette.white,
|
|
||||||
fontWeight: 'bold'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue