TT#20676 Show call panel in receiving state

What has been done:
- Add "loading dots" animation for easy reuse
- Quick login window fix, to prevent closing when pressing ESC
- Remove rtc/ from .gitignore
- Show buttons for accepting the call
- Show decline button
- Show callers number
- Change color of the title
- Show label with text "Incoming audio/video call from ..."

Testing:
- Dev helper buttons can be found in patchset 5

Change-Id: I1e61abaabc788c9104178ab834533d4bef7517ec

.gitignore

@@ -18,5 +18,4 @@ npm-debug.log
 t/*.xml
 sass/example/fashion.html
 sass/example/render.js
-rtc/
 sencha-error-*.log

app/utils/animations.js

@@ -0,0 +1,5 @@
+Ext.define('Ngcp.csc.animations', {
+    statics: {
+        loading_dots: '<p class="csc-loading">&nbsp;<span>.</span><span>.</span><span>.</span></p>'
+    }
+})

app/utils/icons.js

@@ -58,6 +58,8 @@ Ext.define('Ngcp.csc.icons', {
         phone: "x-fa fa-phone",
         phone2x: "x-fa fa-phone fa-2x",
         phone3x: "x-fa fa-phone fa-3x",
+        phone_cancel: "x-fa fa-phone fa-rotate-180",
+        phone_cancel2x: "x-fa fa-phone fa-rotate-90 fa-2x",
         phonesquare: "x-fa fa-phone-square",
         send: "x-fa fa-send",
         send2x: "x-fa fa-send fa-2x",
@@ -76,6 +78,7 @@ Ext.define('Ngcp.csc.icons', {
         user: "x-fa fa-user",
         users: "x-fa fa-users",
         user_secret: "x-fa fa-user-secret",
-        video: "x-fa fa-video-camera"
+        video: "x-fa fa-video-camera",
+        video2x: "x-fa fa-video-camera fa-2x"
     }
 })

app/utils/locales.js

@@ -1633,6 +1633,27 @@ Ext.define('Ngcp.csc.locales', {
                 it: 'Video Call',
                 fr: 'Video Call',
                 sp: 'Video Call'
+            },
+            start_call: {
+                en: 'Start call',
+                de: 'Start call',
+                it: 'Start call',
+                fr: 'Start call',
+                sp: 'Start call'
+            },
+            incoming_call: {
+                en: 'Incoming call',
+                de: 'Incoming call',
+                it: 'Incoming call',
+                fr: 'Incoming call',
+                sp: 'Incoming call'
+            },
+            incoming_call_from: {
+                en: 'Incoming {0} call from',
+                de: 'Incoming {0} call from',
+                it: 'Incoming {0} call from',
+                fr: 'Incoming {0} call from',
+                sp: 'Incoming {0} call from'
             }
         },
         faxsend: {

classic/sass/src/view/common/rtc/RtcPanel.scss

@@ -59,3 +59,44 @@ $border-radius : 50%;
         }
     }
 }
+
+.rtc-decline-call {
+    background: red !important;
+    border-color: #db0404 !important;
+    &:after {
+        font-family: FontAwesome;
+        content: "\f05e";
+        padding-left: 18px;
+        color: #F1F1F1;
+        position: relative;
+        top: -18px;
+    }
+}
+
+.rtc-decline-call-pressed {
+    background: #db0404 !important;
+    border-color: #db0404 !important;
+}
+
+.rtc-incoming-label,
+.rtc-incoming-number {
+    margin: 0 auto;
+}
+
+.rtc-incoming-label,
+.rtc-outgoing-label {
+    font-size: 16px;
+    .x-autocontainer-innerCt {
+        font-size: 16px;
+    }
+}
+
+.rtc-incoming-number {
+    .x-autocontainer-innerCt {
+        font-size: 24px;
+    }
+}
+
+.rtc-button-margin {
+    margin: 0 50px 0 0;
+}

classic/sass/src/view/main/Main.scss

@@ -255,3 +255,31 @@
         border-radius: 20px;
     }
 }
+
+.csc-loading {
+    display: inline-block;
+    span {
+        animation-name: blink;
+        animation-duration: 1.4s;
+        animation-iteration-count: infinite;
+        animation-fill-mode: both;
+        &:nth-child(2) {
+            animation-delay: .2s;
+        }
+        &:nth-child(3) {
+            animation-delay: .4s;
+        }
+    }
+}
+
+@keyframes blink {
+    0% {
+        opacity: .2;
+    }
+    20% {
+        opacity: 1;
+    }
+    100% {
+        opacity: .2;
+    }
+}

classic/src/view/common/rtc/CallPanel.js

@@ -1,4 +1,3 @@
-
 Ext.define('NgcpCsc.view.common.rtc.CallPanel', {
     extend: 'Ext.form.Panel',
     alias: 'widget.call-panel',
@@ -6,15 +5,59 @@ Ext.define('NgcpCsc.view.common.rtc.CallPanel', {
     bind: {
         hidden: '{!callPanel}'
     },
-    items: [
-        {
+    items: [{
             bind: {
                 hidden: '{!outgoingCallPending}'
             },
             xtype: 'label',
-            text: 'Start call ...'
+            userCls: 'rtc-outgoing-label',
+            html: Ngcp.csc.locales.rtc.start_call[localStorage.getItem('languageSelected')] + Ngcp.csc.animations.loading_dots
+        },
+        {
+            bind: {
+                hidden: '{!incomingCallPending}'
+            },
+            items: [{
+                userCls: 'rtc-incoming-label',
+                height: 50,
+                bind: {
+                    html: Ext.String.format(Ngcp.csc.locales.rtc.incoming_call_from[localStorage.getItem('languageSelected')] + Ngcp.csc.animations.loading_dots, '{incomingType}')
+                }
+            }, {
+                userCls: 'rtc-incoming-number',
+                height: 40,
+                bind: {
+                    html: '{incomingCaller}'
+                }
+            }, {
+                xtype: 'button',
+                iconCls: Ngcp.csc.icons.phone2x,
+                width: 50,
+                height: 50,
+                userCls: 'rtc-button-margin',
+                listeners: {
+                    click: 'acceptCallAudio'
+                }
+            }, {
+                xtype: 'button',
+                iconCls: Ngcp.csc.icons.video2x,
+                width: 50,
+                height: 50,
+                userCls: 'rtc-button-margin',
+                listeners: {
+                    click: 'acceptCallVideo'
+                }
+            }, {
+                xtype: 'button',
+                iconCls: Ngcp.csc.icons.phone_cancel2x,
+                userCls: 'rtc-decline-call',
+                pressedCls: 'rtc-decline-call-pressed',
+                width: 50,
+                height: 50,
+                listeners: {
+                    click: 'declineCall'
+                }
+            }]
         }
     ]
 });
-
-

classic/src/view/common/rtc/RtcController.js

@@ -146,6 +146,9 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
                 vm.set('callPanelHidden', true);
                 fieldToFocus = this.lookupReference('smsTextArea');
                 break;
+            case 'incomingCall':
+                me.showIncomingCallPendingState();
+                break;
         }
         panel.show().expand();
         if (fieldToFocus) {
@@ -514,15 +517,8 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
         }
     },
 
-    showOutgoingCallPendingState: function() {
-        this.getViewModel().set('callPanel', true);
-        this.getViewModel().set('outgoingCallPending', true);
-        this.getViewModel().set('phoneComposerHidden', true);
-    },
-
-    // parameter state true causes the class for the background color change to
-    // be added, and parameter state false causes the class to be removed
     setRtcpanelTitleColor: function (state) {
+        // parameter true to change color, and false to revert
         var rtcpanel = Ext.getCmp('rtcpanel');
         rtcpanel.toggleCls('rtc-title-call-initiation', state);
     },
@@ -538,6 +534,48 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
         var sound = document.getElementById('ring');
         sound.pause();
         sound.currentTime = 0;
+    },
+
+    showOutgoingCallPendingState: function() {
+        var vm = this.getViewModel();
+        vm.set('callPanel', true);
+        vm.set('outgoingCallPending', true);
+        vm.set('phoneComposerHidden', true);
+    },
+
+    showIncomingCallPendingState: function (caller, type) {
+        // @hherzog: I added parameters for caller number and media type for
+        // now, but they can be replaced with cdk method calls in variable
+        // declaration below if you prefer
+        var vm = this.getViewModel();
+        var caller = caller || '+4312345';
+        var type = type || 'audio';
+        vm.set('callPanel', true);
+        vm.set('incomingCallPending', true);
+        vm.set('phoneComposerHidden', true);
+        vm.set('title', Ngcp.csc.locales.rtc.incoming_call[localStorage.getItem('languageSelected')]);
+        vm.set('incomingCaller', caller);
+        vm.set('incomingType', type);
+        vm.set('incomingCallHidden', false);
+        this.setRtcpanelTitleColor(true);
+    },
+
+    hideIncomingCallPendingState: function () {
+        var vm = this.getViewModel();
+        var rtcpanel = Ext.getCmp('rtcpanel');
+        this.setRtcpanelTitleColor(false);
+        vm.set('callPanel', false);
+        vm.set('incomingCallPending', false);
+        vm.set('title', '');
+        vm.set('incomingCaller', '');
+        vm.set('incomingType', '');
+        if (rtcpanel) { // Closes rtcpanel
+            rtcpanel.close();
+        };
+    },
+
+    declineCall: function () {
+        this.hideIncomingCallPendingState();
     }
 
 });

classic/src/view/common/rtc/RtcModel.js

@@ -6,7 +6,7 @@ Ext.define('NgcpCsc.view.rtc.RtcModel', {
     // left inline by purpose as it's not coming from API
     data: {
         uid: '',
-        title: 123456789,
+        title: '',
         defaultThumbnail: Ext.manifest.resources.path + '/images/icons/phoneicon.png',
         thumbnail: Ext.manifest.resources.path + '/images/icons/phoneicon.png',
         status: 'calling...',
@@ -15,6 +15,7 @@ Ext.define('NgcpCsc.view.rtc.RtcModel', {
         faxComposerHidden: true,
         smsComposerHidden: true,
         phoneKeyboardHidden: true,
+        incomingCallHidden: true,
         callEnabled: false,
         connected: false,
         micEnabled: false,
@@ -35,7 +36,10 @@ Ext.define('NgcpCsc.view.rtc.RtcModel', {
         rtcEngineClient: null,
         rtcEngineSession: null,
         callPanel: true,
-        outgoingCallPending: false
+        outgoingCallPending: false,
+        incomingCallPending: false,
+        incomingType: '',
+        incomingCaller: ''
     },
     formulas: {
         disableSubmit: function(get) {

classic/src/view/login/Login.js

@@ -12,6 +12,11 @@ Ext.define('NgcpCsc.view.login.Login', {
     draggable: false,
     header: false,
     cls: 'auth-dialog',
+    listeners: {
+        beforeclose: function (e) {
+            return false; // prevents the login window to close on ESC key
+        }
+    },
     items: {
         xtype: 'form',
         reference: 'login-form',

classic/src/view/pages/conversations/ConversationsController.js

@@ -174,7 +174,7 @@ Ext.define('NgcpCsc.view.pages.conversations.ConversationsController', {
         var storeReload = function(){
             grid.getStore().load();
         };
-        
+
         task = runner.start({
             run: storeReload,
             interval: 60000