From 8d3b59a0d08d758c71a1c23a8a706967957d2514 Mon Sep 17 00:00:00 2001 From: Zoltan Bettenbuk Date: Fri, 20 Mar 2020 18:30:46 +0100 Subject: [PATCH] rn: lonely meeting experience --- lang/main.json | 4 + .../base/color-scheme/defaultScheme.js | 4 + .../components/native/Conference.js | 3 + .../native/LonelyMeetingExperience.js | 143 ++++++++++++++++++ .../conference/components/native/styles.js | 35 ++++- 5 files changed, 188 insertions(+), 1 deletion(-) create mode 100644 react/features/conference/components/native/LonelyMeetingExperience.js diff --git a/lang/main.json b/lang/main.json index 2aef60e36..477d9e164 100644 --- a/lang/main.json +++ b/lang/main.json @@ -769,5 +769,9 @@ "sendFeedback": "Send feedback", "terms": "Terms", "title": "Secure, fully featured, and completely free video conferencing" + }, + "lonelyMeetingExperience": { + "button": "Invite others", + "youAreAlone": "You are the only one in the meeting" } } diff --git a/react/features/base/color-scheme/defaultScheme.js b/react/features/base/color-scheme/defaultScheme.js index d3a108efe..bcb22a718 100644 --- a/react/features/base/color-scheme/defaultScheme.js +++ b/react/features/base/color-scheme/defaultScheme.js @@ -23,6 +23,10 @@ export default { replyBorder: 'rgb(219, 197, 200)', replyIcon: 'rgb(94, 109, 121)' }, + 'Conference': { + inviteButtonBackground: 'rgb(0, 119, 225)', + onVideoText: 'white' + }, 'Dialog': { border: 'rgba(0, 3, 6, 0.6)', buttonBackground: ColorPalette.blue, diff --git a/react/features/conference/components/native/Conference.js b/react/features/conference/components/native/Conference.js index 143f6877c..8a2fbc5b3 100644 --- a/react/features/conference/components/native/Conference.js +++ b/react/features/conference/components/native/Conference.js @@ -34,6 +34,7 @@ import { abstractMapStateToProps } from '../AbstractConference'; import Labels from './Labels'; +import LonelyMeetingExperience from './LonelyMeetingExperience'; import NavigationBar from './NavigationBar'; import styles, { NAVBAR_GRADIENT_COLORS } from './styles'; @@ -305,6 +306,8 @@ class Conference extends AbstractConference { { _shouldDisplayTileView || } + + {/* * The Toolbox is in a stacking layer below the Filmstrip. */} diff --git a/react/features/conference/components/native/LonelyMeetingExperience.js b/react/features/conference/components/native/LonelyMeetingExperience.js new file mode 100644 index 000000000..783892b2b --- /dev/null +++ b/react/features/conference/components/native/LonelyMeetingExperience.js @@ -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 { + /** + * 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 ( + + + { t('lonelyMeetingExperience.youAreAlone') } + + + + + { t('lonelyMeetingExperience.button') } + + + + ); + } + + _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 { + 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)); diff --git a/react/features/conference/components/native/styles.js b/react/features/conference/components/native/styles.js index 48467d55b..3e2f4bc0d 100644 --- a/react/features/conference/components/native/styles.js +++ b/react/features/conference/components/native/styles.js @@ -1,5 +1,5 @@ import { BoxModel, ColorPalette, fixAndroidViewClipping } from '../../../base/styles'; - +import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme'; import { FILMSTRIP_SIZE } from '../../../filmstrip'; export const NAVBAR_GRADIENT_COLORS = [ '#000000FF', '#00000000' ]; @@ -72,6 +72,29 @@ export default { 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: { iconStyle: { color: ColorPalette.white, @@ -146,3 +169,13 @@ export default { top: BoxModel.margin * 3 } }; + +ColorSchemeRegistry.register('Conference', { + lonelyButton: { + backgroundColor: schemeColor('inviteButtonBackground') + }, + + lonelyMessage: { + color: schemeColor('onVideoText') + } +});