rn: lonely meeting experience

This commit is contained in:
Zoltan Bettenbuk 2020-03-20 18:30:46 +01:00 committed by GitHub
parent b0e7471a83
commit 8d3b59a0d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 188 additions and 1 deletions

View File

@ -769,5 +769,9 @@
"sendFeedback": "Send feedback", "sendFeedback": "Send feedback",
"terms": "Terms", "terms": "Terms",
"title": "Secure, fully featured, and completely free video conferencing" "title": "Secure, fully featured, and completely free video conferencing"
},
"lonelyMeetingExperience": {
"button": "Invite others",
"youAreAlone": "You are the only one in the meeting"
} }
} }

View File

@ -23,6 +23,10 @@ export default {
replyBorder: 'rgb(219, 197, 200)', replyBorder: 'rgb(219, 197, 200)',
replyIcon: 'rgb(94, 109, 121)' replyIcon: 'rgb(94, 109, 121)'
}, },
'Conference': {
inviteButtonBackground: 'rgb(0, 119, 225)',
onVideoText: 'white'
},
'Dialog': { 'Dialog': {
border: 'rgba(0, 3, 6, 0.6)', border: 'rgba(0, 3, 6, 0.6)',
buttonBackground: ColorPalette.blue, buttonBackground: ColorPalette.blue,

View File

@ -34,6 +34,7 @@ import {
abstractMapStateToProps abstractMapStateToProps
} from '../AbstractConference'; } from '../AbstractConference';
import Labels from './Labels'; import Labels from './Labels';
import LonelyMeetingExperience from './LonelyMeetingExperience';
import NavigationBar from './NavigationBar'; import NavigationBar from './NavigationBar';
import styles, { NAVBAR_GRADIENT_COLORS } from './styles'; import styles, { NAVBAR_GRADIENT_COLORS } from './styles';
@ -305,6 +306,8 @@ class Conference extends AbstractConference<Props, *> {
{ _shouldDisplayTileView || <DisplayNameLabel participantId = { _largeVideoParticipantId } /> } { _shouldDisplayTileView || <DisplayNameLabel participantId = { _largeVideoParticipantId } /> }
<LonelyMeetingExperience />
{/* {/*
* The Toolbox is in a stacking layer below the Filmstrip. * The Toolbox is in a stacking layer below the Filmstrip.
*/} */}

View File

@ -0,0 +1,143 @@
// @flow
import React, { PureComponent } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { ColorSchemeRegistry } from '../../../base/color-scheme';
import { getFeatureFlag, INVITE_ENABLED } from '../../../base/flags';
import { connect } from '../../../base/redux';
import { StyleType } from '../../../base/styles';
import { translate } from '../../../base/i18n';
import { getParticipantCount } from '../../../base/participants';
import { isAddPeopleEnabled, isDialOutEnabled, setAddPeopleDialogVisible } from '../../../invite';
import { beginShareRoom } from '../../../share-room';
import styles from './styles';
import { Icon, IconAddPeople } from '../../../base/icons';
/**
* Props type of the component.
*/
type Props = {
/**
* True if any of the invite functions are enabled.
*/
_inviteEnabled: boolean,
/**
* True if it's a lonely meeting (participant count excluding fakes is 1).
*/
_isLonelyMeeting: boolean,
/**
* Color schemed styles of the component.
*/
_styles: StyleType,
/**
* The Redux Dispatch function.
*/
dispatch: Function,
/**
* Function to be used to translate i18n labels.
*/
t: Function
};
/**
* Implements the UI elements to be displayed in the lonely meeting experience.
*/
class LonelyMeetingExperience extends PureComponent<Props> {
/**
* Instantiates a new component.
*
* @inheritdoc
*/
constructor(props: Props) {
super(props);
this._onPress = this._onPress.bind(this);
}
/**
* Implements {@code PureComponent#render}.
*
* @inheritdoc
*/
render() {
const { _isLonelyMeeting, _styles, t } = this.props;
if (!_isLonelyMeeting) {
return null;
}
return (
<View style = { styles.lonelyMeetingContainer }>
<Text
style = { [
styles.lonelyMessage,
_styles.lonelyMessage
] }>
{ t('lonelyMeetingExperience.youAreAlone') }
</Text>
<TouchableOpacity
onPress = { this._onPress }
style = { [
styles.lonelyButton,
_styles.lonelyButton
] }>
<Icon
size = { 24 }
src = { IconAddPeople }
style = { styles.lonelyButtonComponents } />
<Text
style = { [
styles.lonelyButtonComponents,
_styles.lonelyMessage
] }>
{ t('lonelyMeetingExperience.button') }
</Text>
</TouchableOpacity>
</View>
);
}
_onPress: () => void;
/**
* Callback for the onPress function of the button.
*
* @returns {void}
*/
_onPress() {
const { _inviteEnabled, dispatch } = this.props;
if (_inviteEnabled) {
dispatch(setAddPeopleDialogVisible(true));
} else {
dispatch(beginShareRoom());
}
}
}
/**
* Maps parts of the Redux state to the props of this Component.
*
* @param {Object} state - The redux state.
* @private
* @returns {Props}
*/
function _mapStateToProps(state): $Shape<Props> {
const _inviteEnabled = getFeatureFlag(state, INVITE_ENABLED, true)
&& (isAddPeopleEnabled(state) || isDialOutEnabled(state));
return {
_inviteEnabled,
_isLonelyMeeting: getParticipantCount(state) === 1,
_styles: ColorSchemeRegistry.get(state, 'Conference')
};
}
export default connect(_mapStateToProps)(translate(LonelyMeetingExperience));

View File

@ -1,5 +1,5 @@
import { BoxModel, ColorPalette, fixAndroidViewClipping } from '../../../base/styles'; import { BoxModel, ColorPalette, fixAndroidViewClipping } from '../../../base/styles';
import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
import { FILMSTRIP_SIZE } from '../../../filmstrip'; import { FILMSTRIP_SIZE } from '../../../filmstrip';
export const NAVBAR_GRADIENT_COLORS = [ '#000000FF', '#00000000' ]; export const NAVBAR_GRADIENT_COLORS = [ '#000000FF', '#00000000' ];
@ -72,6 +72,29 @@ export default {
top: 0 top: 0
}, },
lonelyButton: {
alignItems: 'center',
borderRadius: 24,
flexDirection: 'row',
height: 48,
justifyContent: 'space-around',
paddingHorizontal: 12
},
lonelyButtonComponents: {
marginHorizontal: 6
},
lonelyMeetingContainer: {
alignSelf: 'stretch',
alignItems: 'center',
padding: BoxModel.padding * 2
},
lonelyMessage: {
paddingVertical: 12
},
navBarButton: { navBarButton: {
iconStyle: { iconStyle: {
color: ColorPalette.white, color: ColorPalette.white,
@ -146,3 +169,13 @@ export default {
top: BoxModel.margin * 3 top: BoxModel.margin * 3
} }
}; };
ColorSchemeRegistry.register('Conference', {
lonelyButton: {
backgroundColor: schemeColor('inviteButtonBackground')
},
lonelyMessage: {
color: schemeColor('onVideoText')
}
});