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

[RN] Remove mobile notifications

This commit is contained in:
Bettenbuk Zoltan 2018-09-18 12:52:52 +02:00 committed by Saúl Ibarra Corretgé
parent e5cc732b72
commit 60f7ba7301
4 changed files with 1 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
react/features/conference/components/Conference.native.js
View File

@ -11,21 +11,18 @@ import { connect, disconnect } from '../../base/connection';
import { getParticipantCount } from '../../base/participants';
import { Container, LoadingIndicator, TintedView } from '../../base/react';
import {
isNarrowAspectRatio,
makeAspectRatioAware
} from '../../base/responsive-ui';
import { TestConnectionInfo } from '../../base/testing';
import { createDesiredLocalTracks } from '../../base/tracks';
import { ConferenceNotification } from '../../calendar-sync';
import {
FILMSTRIP_SIZE,
Filmstrip,
isFilmstripVisible,
TileView
} from '../../filmstrip';
import { LargeVideo } from '../../large-video';
import { CalleeInfoContainer } from '../../invite';
import { NotificationsContainer } from '../../notifications';
import { Captions } from '../../subtitles';
import { setToolboxVisible, Toolbox } from '../../toolbox';
import { shouldDisplayTileView } from '../../video-layout';
@ -305,12 +302,6 @@ class Conference extends Component<Props> {
<View
pointerEvents = 'box-none'
style = { styles.toolboxAndFilmstripContainer }>
{/*
* Notifications are rendered on the very top of other
* components like subtitles, toolbox and filmstrip.
*/
this._renderNotificationsContainer()
}
<Captions onPress = { this._onClick } />
@ -336,6 +327,7 @@ class Conference extends Component<Props> {
{
this._renderConferenceNotification()
}
</Container>
);
}
@ -386,33 +378,6 @@ class Conference extends Component<Props> {
? <ConferenceNotification />
: 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 } />;
}
}
/**

106
react/features/notifications/components/Notification.native.js
View File

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

68
react/features/notifications/components/NotificationsContainer.native.js
View File

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

104
react/features/notifications/components/styles.js
View File

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