feat(callee-info): Implement for mobile.

android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetViewListener.java

@@ -22,6 +22,14 @@ import java.util.Map;
  * Interface for listening to events coming from Jitsi Meet.
  */
 public interface JitsiMeetViewListener {
+    /**
+     * Called when the <tt>App</tt> component is mounted.
+     *
+     * @param data This parameter is not used. It's here beacuse the parameter
+     * is always passed for every JitsiMeetViewListener method.
+     */
+    void onAppWillMount(Map<String, Object> data);
+
     /**
      * Called when joining a conference fails or an ongoing conference is
      * interrupted due to a failure.

android/sdk/src/main/java/org/jitsi/meet/sdk/invite/InviteController.java

@@ -116,7 +116,8 @@ public class InviteController {
             invite(
                 addPeopleController.getUuid(),
                 addPeopleController.getReactApplicationContext(),
-                invitees);
+                invitees,
+                false);
     }
 
     public Future<List<Map<String, Object>>> invite(
@@ -125,7 +126,8 @@ public class InviteController {
             = invite(
                 UUID.randomUUID().toString(),
                 /* reactContext */ null,
-                Arguments.makeNativeArray(invitees));
+                Arguments.makeNativeArray(invitees),
+                true);
         FutureTask futureTask
             = new FutureTask(new Callable() {
                 @Override
@@ -155,12 +157,14 @@ public class InviteController {
     private boolean invite(
             String addPeopleControllerScope,
             ReactContext reactContext,
-            WritableArray invitees) {
+            WritableArray invitees,
+            boolean showCalleeInfo) {
         WritableNativeMap data = new WritableNativeMap();
 
         data.putString("addPeopleControllerScope", addPeopleControllerScope);
         data.putString("externalAPIScope", externalAPIScope);
         data.putArray("invitees", invitees);
+        data.putBoolean("showCalleeInfo", showCalleeInfo);
 
         return
             ReactContextUtils.emitEvent(

css/ringing/_ringing.scss

@@ -34,8 +34,10 @@
 
     &__status{
         margin-top: 15px;
-        font-size: 14px;
-        line-height: 20px;
+        &__text{
+            font-size: 14px;
+            line-height: 20px;
+        }
     }
 
     &__name {

ios/sdk/src/invite/Invite.m

@@ -108,11 +108,13 @@ RCT_EXPORT_METHOD(receivedResults:(NSString *)externalAPIScope
 
 - (void)            invite:(NSArray<NSDictionary *> * _Nonnull)invitees
           externalAPIScope:(NSString * _Nonnull)externalAPIScope
-  addPeopleControllerScope:(NSString * _Nonnull) addPeopleControllerScope {
+  addPeopleControllerScope:(NSString * _Nonnull) addPeopleControllerScope
+   showCalleeInfo:(BOOL)showCalleeInfo {
     [self sendEventWithName:InviteEmitterEvent
                        body:@{ @"addPeopleControllerScope": addPeopleControllerScope,
                                @"externalAPIScope": externalAPIScope,
-                               @"invitees": invitees }];
+                               @"invitees": invitees,
+                               @"showCalleeInfo": @(showCalleeInfo) }];
 }
 
 - (void)      performQuery:(NSString * _Nonnull)query

ios/sdk/src/invite/InviteController.m

@@ -140,14 +140,16 @@
   forControllerScope:(NSString * _Nonnull)controllerScope {
     [self.inviteModule invite:invitees
              externalAPIScope:self.externalAPIScope
-     addPeopleControllerScope:controllerScope];
+     addPeopleControllerScope:controllerScope,
+     showCalleeInfo:NO];
 }
 
 - (void)  invite:(NSArray *)invitees
   withCompletion:(void (^)(NSArray<NSDictionary *> *failedInvitees))completion {
     // TODO Execute the specified completion block when the invite settles.
     [self        invite:invitees
-     forControllerScope:[[NSUUID UUID] UUIDString]];
+     forControllerScope:[[NSUUID UUID] UUIDString]
+     showCalleeInfo:YES];
 }
 
 - (void)performQuery:(NSString * _Nonnull)query

react/features/base/participants/components/Avatar.native.js

@@ -38,7 +38,9 @@ type Props = {
     /**
      * The URI of the {@link Avatar}.
      */
-    uri: string
+    uri: string,
+
+    style: Object
 };
 
 /**
@@ -251,7 +253,8 @@ export default class Avatar extends Component<Props, State> {
                     ? size * 2
                     : borderRadius,
             height: size,
-            width: size
+            width: size,
+            ...this.props.style
         };
 
         // If we're rendering the _DEFAULT_SOURCE, then we want to do some

react/features/invite/components/callee-info/CalleeInfo.js

@@ -58,19 +58,24 @@ class CalleeInfo extends Component<Props> {
                 id = 'ringOverlay'>
                 <Container
                     { ...this._style('ringing__content') }>
-                    <Avatar
-                        { ...this._style('ringing__avatar') }
-                        uri = { avatar } />
-                    <Container { ...this._style('ringing__status') }>
-                        <PresenceLabel
-                            defaultPresence = { status }
-                            { ...this._style('ringing__text') } />
+                    <Container
+                        { ...this._style('ringing__avatar-container') }>
+                        <Avatar
+                            { ...this._style('ringing__avatar') }
+                            uri = { avatar } />
                     </Container>
-                    <Container { ...this._style('ringing__name') }>
-                        <Text
-                            { ...this._style('ringing__text') }>
-                            { name }
-                        </Text>
+                    <Container { ...this._style('ringing__texts-container') }>
+                        <Container { ...this._style('ringing__status') }>
+                            <PresenceLabel
+                                defaultPresence = { status }
+                                { ...this._style('ringing__status__text') } />
+                        </Container>
+                        <Container>
+                            <Text
+                                { ...this._style('ringing__name') }>
+                                { name }
+                            </Text>
+                        </Container>
                     </Container>
                 </Container>
             </Container>

react/features/invite/components/callee-info/styles.native.js

@@ -12,38 +12,62 @@ export default createStyleSheet({
     ringing: {
         ...StyleSheet.absoluteFillObject,
         alignItems: 'center',
-        backgroundColor: ColorPalette.black,
         flex: 0,
-        flexDirection: 'column',
-        justifyContent: 'center',
-        opacity: 0.8
+        flexDirection: 'column'
+    },
+
+    solidBG: {
+        backgroundColor: '#0052CC'
     },
 
     'ringing__avatar': {
-        borderRadius: 50,
-        flex: 0,
-        height: 100,
-        width: 100
+        borderRadius: 128,
+        width: 128,
+        height: 128
     },
 
-    'ringing__caller-info': {
-        alignItems: 'center',
-        flex: 0,
-        flexDirection: 'row',
-        justifyContent: 'center'
+    'ringing__avatar-container': {
+        marginTop: 58,
+        borderRadius: 128,
+        borderColor: '#4C9AFF',
+        backgroundColor: '#0052CC',
+        borderWidth: 3,
+        width: 134,
+        height: 134,
+        flex: 0
     },
 
     'ringing__content': {
+        marginTop: 0,
         alignItems: 'center',
         flex: 0,
-        flexDirection: 'column',
-        justifyContent: 'center'
+        flexDirection: 'column-reverse'
+    },
+
+    'ringing__texts-container': {
+        marginTop: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 0
     },
 
     /**
      * The style of {@code Text} within {@code CalleeInfo}.
      */
-    'ringing__text': {
-        color: ColorPalette.white
+    'ringing__name': {
+        marginTop: 8,
+        color: ColorPalette.white,
+        fontSize: 36,
+        lineHeight: 40
+    },
+
+    /**
+     * The style of {@code Text} within {@code CalleeInfo}.
+     */
+    'ringing__status__text': {
+        marginTop: 8,
+        color: ColorPalette.white,
+        fontSize: 14,
+        lineHeight: 24
     }
 });

react/features/invite/middleware.native.js

@@ -127,7 +127,12 @@ function _beginAddPeople(store, next, action) {
  * @param {Object} event - The details of the event.
  * @returns {void}
  */
-function _onInvite({ addPeopleControllerScope, externalAPIScope, invitees }) {
+function _onInvite({
+    addPeopleControllerScope,
+    externalAPIScope,
+    invitees,
+    showCalleeInfo
+}) {
     const { dispatch, getState } = this; // eslint-disable-line no-invalid-this
 
     // If there are multiple JitsiMeetView instances alive, they will all get
@@ -137,7 +142,7 @@ function _onInvite({ addPeopleControllerScope, externalAPIScope, invitees }) {
         return;
     }
 
-    dispatch(invite(invitees))
+    dispatch(invite(invitees, showCalleeInfo))
         .then(failedInvitees =>
             Invite.inviteSettled(
                 externalAPIScope,

react/features/mobile/external-api/middleware.js

@@ -2,7 +2,7 @@
 
 import { NativeModules } from 'react-native';
 
-import { getAppProp } from '../../app';
+import { getAppProp, APP_WILL_MOUNT } from '../../app';
 import {
     CONFERENCE_FAILED,
     CONFERENCE_JOINED,
@@ -65,6 +65,7 @@ MiddlewareRegistry.register(store => next => action => {
             && _sendConferenceFailedOnConnectionError(store, action);
         break;
 
+    case APP_WILL_MOUNT:
     case ENTER_PICTURE_IN_PICTURE:
         _sendEvent(store, _getSymbolDescription(type), /* data */ {});
         break;

react/features/presence-status/components/PresenceLabel.js

@@ -81,7 +81,7 @@ class PresenceLabel extends Component {
         return (
             <Text
                 className = { className }
-                { ...style }>
+                style = { style }>
                 { text }
             </Text>);
     }