feat(callee-info): Redesign.

conference.js

@@ -1662,6 +1662,7 @@ export default {
             const displayName = user.getDisplayName();
 
             APP.store.dispatch(participantJoined({
+                botType: user.getBotType(),
                 conference: room,
                 id,
                 name: displayName,
@@ -1862,6 +1863,17 @@ export default {
                 APP.UI.changeDisplayName(id, formattedDisplayName);
             }
         );
+        room.on(
+            JitsiConferenceEvents.BOT_TYPE_CHANGED,
+            (id, botType) => {
+
+                APP.store.dispatch(participantUpdated({
+                    conference: room,
+                    id,
+                    botType
+                }));
+            }
+        );
 
         room.on(
             JitsiConferenceEvents.LOCK_STATE_CHANGED,

css/ringing/_ringing.scss

@@ -6,12 +6,10 @@
     height: 100%;
     position: fixed;
     z-index: $ringingZ;
-    background: linear-gradient(transparent, #000);
-    opacity: 0.8;
+    @include transparentBg(#283447, 0.95);
 
     &.solidBG {
         background: $defaultBackground;
-        opacity: 1;
     }
 
     &__content {
@@ -22,20 +20,26 @@
         top: 50%;
         margin-left: -200px;
         margin-top: -125px;
-        font-weight: 400;
-        font-size: 14px;
         text-align: center;
+        font-weight: normal;
+        color: #FFFFFF;
     }
 
     &__avatar {
-        width: 100px;
-        height: 100px;
+        width: 128px;
+        height: 128px;
         border-radius: 50%;
+        border: 2px solid #1B2638;
+    }
+
+    &__status{
+        margin-top: 15px;
+        font-size: 14px;
+        line-height: 20px;
     }
 
-    &__caller-info {
-        .mention {
-            color: #333;
-        }
+    &__name {
+        font-size: 24px;
+        line-height: 32px;
     }
 }

lang/main.json

@@ -632,12 +632,12 @@
     },
     "presenceStatus": {
         "invited": "Invited",
-        "ringing": "Ringing",
-        "calling": "Calling",
-        "initializingCall": "Initializing Call",
+        "ringing": "Ringing...",
+        "calling": "Calling...",
+        "initializingCall": "Initializing Call...",
         "connected": "Connected",
-        "connecting": "Connecting",
-        "connecting2": "Connecting*",
+        "connecting": "Connecting...",
+        "connecting2": "Connecting*...",
         "disconnected": "Disconnected",
         "busy": "Busy",
         "rejected": "Rejected",

modules/API/API.js

@@ -113,8 +113,10 @@ function initCommands() {
 
         switch (name) {
         case 'invite':
+            // The store should be already available because API.init is called
+            // on appWillMount action.
             APP.store.dispatch(
-                invite(request.invitees))
+                invite(request.invitees, true))
                 .then(failedInvitees => {
                     let error;
                     let result;

modules/API/external/external_api.js

@@ -238,7 +238,7 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
                 }
             })
         });
-        this._invitees = invitees;
+        this.invite(invitees);
         this._isLargeVideoVisible = true;
         this._numberOfParticipants = 0;
         this._participants = {};
@@ -369,9 +369,6 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
 
             switch (name) {
             case 'video-conference-joined':
-                if (this._invitees) {
-                    this.invite(this._invitees);
-                }
                 this._myUserID = userID;
                 this._participants[userID] = {
                     avatarURL: data.avatarURL

modules/UI/UI.js

@@ -492,7 +492,10 @@ UI.updateUserRole = user => {
  * @param {string} status - The new status.
  */
 UI.updateUserStatus = (user, status) => {
-    if (!status) {
+    const reduxState = APP.store.getState() || {};
+    const { calleeInfoVisible } = reduxState['features/invite'] || {};
+
+    if (!status || calleeInfoVisible) {
         return;
     }
 

modules/UI/videolayout/LargeVideoManager.js

@@ -428,7 +428,12 @@ export default class LargeVideoManager {
             ReactDOM.render(
                 <Provider store = { APP.store }>
                     <I18nextProvider i18n = { i18next }>
-                        <PresenceLabel participantID = { id } />
+                        <PresenceLabel
+                            noContentStyles = { {
+                                className: 'presence-label no-presence'
+                            } }
+                            participantID = { id }
+                            styles = { { className: 'presence-label' } } />
                     </I18nextProvider>
                 </Provider>,
                 presenceLabelContainer.get(0));

modules/UI/videolayout/RemoteVideo.js

@@ -573,7 +573,12 @@ RemoteVideo.prototype.addPresenceLabel = function() {
         ReactDOM.render(
             <Provider store = { APP.store }>
                 <I18nextProvider i18n = { i18next }>
-                    <PresenceLabel participantID = { this.id } />
+                    <PresenceLabel
+                        noContentStyles = { {
+                            className: 'presence-label no-presence'
+                        } }
+                        participantID = { this.id }
+                        styles = { { className: 'presence-label' } } />
                 </I18nextProvider>
             </Provider>,
             presenceLabelContainer);

react/features/base/conference/actions.js

@@ -144,6 +144,7 @@ function _addConferenceListeners(conference, dispatch) {
     conference.on(
         JitsiConferenceEvents.USER_JOINED,
         (id, user) => !user.isHidden() && dispatch(participantJoined({
+            botType: user.getBotType(),
             conference,
             id,
             name: user.getDisplayName(),
@@ -161,6 +162,14 @@ function _addConferenceListeners(conference, dispatch) {
         JitsiConferenceEvents.USER_STATUS_CHANGED,
         (...args) => dispatch(participantPresenceChanged(...args)));
 
+    conference.on(
+        JitsiConferenceEvents.BOT_TYPE_CHANGED,
+        (id, botType) => dispatch(participantUpdated({
+            conference,
+            id,
+            botType
+        })));
+
     conference.addCommandListener(
         AVATAR_ID_COMMAND,
         (data, id) => dispatch(participantUpdated({

react/features/base/jwt/actionTypes.js

@@ -1,13 +1,3 @@
-/**
- * The type of redux action which sets the visibility of {@code CalleeInfo}.
- *
- * {
- *     type: SET_CALLEE_INFO_VISIBLE,
- *     calleeInfoVisible: boolean
- * }
- */
-export const SET_CALLEE_INFO_VISIBLE = Symbol('SET_CALLEE_INFO_VISIBLE');
-
 /**
  * The type of redux action which stores a specific JSON Web Token (JWT) into
  * the redux store.

react/features/base/jwt/actions.js

@@ -1,28 +1,6 @@
 // @flow
 
-import { SET_CALLEE_INFO_VISIBLE, SET_JWT } from './actionTypes';
-
-/**
- * Sets the visibility of {@code CalleeInfo}.
- *
- * @param {boolean|undefined} [calleeInfoVisible] - If {@code CalleeInfo} is
- * to be displayed/visible, then {@code true}; otherwise, {@code false} or
- * {@code undefined}.
- * @returns {{
- *     type: SET_CALLEE_INFO_VISIBLE,
- *     calleeInfoVisible: (boolean|undefined)
- * }}
- */
-export function setCalleeInfoVisible(calleeInfoVisible: ?boolean) {
-    return (dispatch: Dispatch<*>, getState: Function) => {
-        getState()['features/base/jwt']
-            .calleeInfoVisible === calleeInfoVisible
-            || dispatch({
-                type: SET_CALLEE_INFO_VISIBLE,
-                calleeInfoVisible
-            });
-    };
-}
+import { SET_JWT } from './actionTypes';
 
 /**
  * Stores a specific JSON Web Token (JWT) into the redux store.