rn: lonely meeting experience

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"
     }
 }

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,

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<Props, *> {
 
                     { _shouldDisplayTileView || <DisplayNameLabel participantId = { _largeVideoParticipantId } /> }
 
+                    <LonelyMeetingExperience />
+
                     {/*
                       * The Toolbox is in a stacking layer below the Filmstrip.
                       */}

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

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