TT#20677 Show ended state when caller aborts

Call: Show ended state of the call panel if caller aborts the call
- Show ended reason
- Only show close button (that closes the panel)
- Include css styles from hherzog's previous commit

Call: Implement decline button functionality
- Add remote media stream to view model
(will complete the rest as part of the task specific branch)

Change-Id: I50a1beeb57e0d74f0a82e22a2414ff4e9a6764ca

app/utils/icons.js

@@ -79,6 +79,8 @@ Ext.define('Ngcp.csc.icons', {
         users: "x-fa fa-users",
         user_secret: "x-fa fa-user-secret",
         video: "x-fa fa-video-camera",
-        video2x: "x-fa fa-video-camera fa-2x"
+        video2x: "x-fa fa-video-camera fa-2x",
+        close: "x-fa fa-times",
+        close2x: "x-fa fa-times fa-2x"
     }
 })

app/utils/locales.js

@@ -1654,6 +1654,27 @@ Ext.define('Ngcp.csc.locales', {
                 it: 'Incoming {0} call from',
                 fr: 'Incoming {0} call from',
                 sp: 'Incoming {0} call from'
+            },
+            close: {
+                en: 'Close',
+                it: 'Close',
+                de: 'Close',
+                fr: 'Close',
+                sp: 'Close'
+            },
+            call_aborted_by: {
+                en: 'Call aborted by {0}',
+                it: 'Call aborted by {0}',
+                de: 'Call aborted by {0}',
+                fr: 'Call aborted by {0}',
+                sp: 'Call aborted by {0}'
+            },
+            abort_reason: {
+                en: 'Reason: {0}',
+                it: 'Reason: {0}',
+                de: 'Reason: {0}',
+                fr: 'Reason: {0}',
+                sp: 'Reason: {0}'
             }
         },
         faxsend: {

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

@@ -60,45 +60,8 @@ $border-radius : 50%;
     }
 }
 
-.rtc-decline-call {
+.call-button * {
-    background: red !important;
+    font-size: 22px;
-    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;
 }
 
 .call-button {
@@ -106,27 +69,23 @@ $border-radius : 50%;
     background-color: #16b603;
     color: white;
     border-width: 0;
+    .icon-small {
+        font-size: 11px;
+        position: absolute;
+        top: 2px;
+        right: 3px;
+    }
+    .icon-large {
+        font-size: 22px;
+        position: absolute;
+        bottom: 0px;
+        left: 2px;
+    }
 }
 
-.call-button * {
-    font-size: 22px;
-}
-
-.call-button .icon-large {
-    font-size: 22px;
-    position: absolute;
-    bottom: 0px;
-    left: 2px;
-}
-
-.call-button .icon-small {
-    font-size: 11px;
-    position: absolute;
-    top: 2px;
-    right: 3px;
-}
 
-.call-button-cancel {
+.call-button-cancel,
+.call-button-close {
     background-color: red;
 }
 
@@ -134,21 +93,33 @@ $border-radius : 50%;
     background-color: forestgreen;
 }
 
-.call-icon-cancel {
+.call-icon-cancel,
+.call-icon-close {
     position: absolute;
-    transform: rotate(135deg);
     font-size: 22px;
+}
+
+.call-icon-cancel {
+    transform: rotate(135deg);
     top: 2px;
     left: 4px;
 }
 
-.call-button-cancel.x-btn.x-btn-pressed,
+.call-icon-close {
+    top: 0px;
+    left: 5px;
+}
+
+.call-button-close .x-btn .x-btn-pressed,
+.call-button-close-focus,
+.call-button-close-over,
+.call-button-cancel .x-btn .x-btn-pressed,
 .call-button-cancel-focus,
 .call-button-cancel-over {
     background-color: darkred;
 }
 
-.call-button-accept.x-btn.x-btn-pressed,
+.call-button-accept .x-btn .x-btn-pressed,
 .call-button-accept-focus,
 .call-button-accept-over {
     background-color: darkgreen;

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

@@ -1,95 +1,146 @@
-
 Ext.define('NgcpCsc.view.common.rtc.CallPanel', {
     extend: 'Ext.form.Panel',
     alias: 'widget.call-panel',
     padding: '60 0 0 0',
     bind: {
-        hidden: '{!callEnabled}'
+        hidden: '{!callPanelEnabled}'
     },
     items: [{
-        layout : {
+            layout: {
-            type  : 'vbox',
+                type: 'vbox',
-            align : 'center',
+                align: 'center',
-            pack: 'center',
+                pack: 'center'
-
-        },
-        bind: {
-            hidden: '{!outgoingCall}'
-        },
-        items: [
-            {
-                bind: {
-                    text: '{callActionLabel}'
-                },
-                xtype: 'label',
-                margin: '0 0 20 0'
             },
-            {
+            bind: {
-                bind: {
+                hidden: '{!outgoingCall}'
-                    text: '{numberToCall}'
+            },
+            items: [{
+                    bind: {
+                        html: '{callActionLabel}' + Ngcp.csc.animations.loading_dots
+                    },
+                    xtype: 'label'
                 },
-                xtype: 'label',
+                {
-                margin: '0 0 20 0',
+                    bind: {
-                userCls: 'call-number-label',
+                        text: '{numberToCall}'
+                    },
+                    xtype: 'label',
+                    margin: '0 0 20 0',
+                    userCls: 'call-number-label'
+                },
+                {
+                    xtype: 'button',
+                    userCls: 'call-button call-button-cancel call-button-hangup',
+                    overCls: 'call-button-cancel-over',
+                    focusCls: 'call-button-cancel-focus',
+                    width: 40,
+                    height: 40,
+                    html: '<i class="x-fa fa-phone call-icon-cancel"></i>',
+                    listeners: {
+                        click: 'cancelOutgoingCall'
+                    }
+                }
+            ]
+        }, {
+            bind: {
+                hidden: '{!callAborted}'
+            },
+            layout: {
+                type: 'vbox',
+                align: 'center',
+                pack: 'center'
             },
-            {
+            items: [{
-                xtype: 'button',
+                    bind: {
-                text: '',
+                        text: Ext.String.format(Ngcp.csc.locales.rtc.call_aborted_by[localStorage.getItem('languageSelected')], '{incomingCaller}')
-                userCls: 'call-button call-button-cancel call-button-hangup',
+                    },
-                overCls: 'call-button-cancel-over',
+                    xtype: 'label',
-                focusCls: 'call-button-cancel-focus',
+                    margin: '0 0 20 0'
-                width: 40,
+                }, {
-                height: 40,
+                    bind: {
-                html: '<i class="x-fa fa-phone call-icon-cancel"></i>',
+                        text: Ext.String.format(Ngcp.csc.locales.rtc.abort_reason[localStorage.getItem('languageSelected')], '{abortReason}')
-                listeners: {
+                    },
-                    click: 'cancelOutgoingCall'
+                    xtype: 'label',
+                    margin: '0 0 20 0'
+                },
+                {
+                    xtype: 'button',
+                    userCls: 'call-button call-button-close',
+                    overCls: 'call-button-close-over',
+                    focusCls: 'call-button-close-focus',
+                    width: 40,
+                    height: 40,
+                    html: '<i class="x-fa fa-times call-icon-close"></i>',
+                    listeners: {
+                        click: 'hideAbortedState'
+                    }
                 }
-            }
+            ]
-        ]},
+        },
         {
+            layout: {
+                type: 'vbox',
+                align: 'center',
+                pack: 'center'
+
+            },
             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}')
-                }
+                },
+                xtype: 'label'
             }, {
-                userCls: 'rtc-incoming-number',
-                height: 40,
                 bind: {
-                    html: '{incomingCaller}'
+                    text: '{incomingCaller}'
-                }
+                },
-            }, {
+                xtype: 'label',
-                xtype: 'button',
+                margin: '0 0 20 0',
-                iconCls: Ngcp.csc.icons.phone2x,
+                userCls: 'call-number-label'
-                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',
+                layout: {
-                iconCls: Ngcp.csc.icons.phone_cancel2x,
+                    type: 'hbox',
-                userCls: 'rtc-decline-call',
+                    align: 'center',
-                pressedCls: 'rtc-decline-call-pressed',
+                    pack: 'center'
-                width: 50,
+                },
-                height: 50,
+                items: [{
-                listeners: {
+                    xtype: 'button',
-                    click: 'declineCall'
+                    margin: '0 10 0 0',
-                }
+                    userCls: 'call-button call-button-accept',
+                    overCls: 'call-button-accept-over',
+                    focusCls: 'call-button-accept-focus',
+                    width: 40,
+                    height: 40,
+                    html: '<i class="x-fa fa-phone icon-large"></i><i class="x-fa fa-microphone icon-small"></i>',
+                    listeners: {
+                        click: 'acceptCallAudio'
+                    }
+                }, {
+                    xtype: 'button',
+                    margin: '0 10 0 0',
+                    userCls: 'call-button call-button-accept',
+                    overCls: 'call-button-accept-over',
+                    focusCls: 'call-button-accept-focus',
+                    width: 40,
+                    height: 40,
+                    html: '<i class="x-fa fa-phone icon-large"></i><i class="x-fa fa-video-camera icon-small"></i>',
+                    listeners: {
+                        click: 'acceptCallVideo'
+                    }
+                }, {
+                    xtype: 'button',
+                    userCls: 'call-button call-button-cancel call-button-hangup',
+                    overCls: 'call-button-cancel-over',
+                    focusCls: 'call-button-cancel-focus',
+                    width: 40,
+                    height: 40,
+                    html: '<i class="x-fa fa-phone call-icon-cancel"></i>',
+                    listeners: {
+                        click: 'declineCall'
+                    }
+                }]
             }]
         }
     ]

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

@@ -27,13 +27,11 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
     },
 
     initCall: function(mediaType) {
-
         var $ct = this;
         var $vm = this.getViewModel();
         var callee = $vm.get('numberToCall');
         var network = $vm.get('rtcEngineNetwork');
         var localMediaStream = $vm.get('rtcEngineLocalMediaStream');
-
         if (callee !== '' && callee !== null && callee !== void(0)) {
             if(localMediaStream !== null) {
                 localMediaStream.stop();
@@ -234,9 +232,7 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
             me.stopRingSound();
             vm.set('callPanelEnabled', true);
             vm.set('micEnabled', true);
-
             me.startMedia(audioOn, videoOn);
-
             me.intervalId = setInterval(function() {
                 seconds++;
                 if (seconds == 60) {
@@ -452,10 +448,16 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
                 rtcNetwork.onConnect(function() {
                     $vm.set('callPanelEnabled', true);
                 }).onIncomingCall(function(call) {
-                    $ct.incomingCallPending();
+                    $ct.incomingCallPending(call);
-                    call.onRemoteMedia(function(stream){ $ct.incomingRemoteMedia(stream); })
+                    call.onRemoteMedia(function(stream){
+                            $vm.set('rtcEngineRemoteMediaStream', stream);
+                            $ct.incomingRemoteMedia(stream);
+                        })
+                        // XXX @hherzog Should these both be invoking the same function?
+                        // I separated them for now, as they were causing double invoking
+                        // of incomingRemoteMediaEnded()
                         .onRemoteMediaEnded(function(){ $ct.incomingRemoteMediaEnded(); })
-                        .onEnded(function(){ $ct.incomingRemoteMediaEnded() });
+                        .onEnded(function(reason){ $ct.incomingCallEnded(reason) });
                 }).onDisconnect(function(){
                     $vm.set('callPanelEnabled', false);
                     $vm.set('callDisabledReason', rtcNetwork.disconnectReason);
@@ -503,10 +505,12 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
         this.callEnded();
     },
 
-    incomingCallPending: function() {
+    incomingCallPending: function(call) {
-        this.getView().show().expand();
-        this.showIncomingCallPendingState();
         console.log('incomingCallPending');
+        var peerNum = call.peer.split(/(:|@)/)[2];
+        var type = call.type == 'call' ? 'audio' : call.type;
+        this.getView().show().expand();
+        this.showIncomingCallPendingState(peerNum, type);
     },
 
     incomingRemoteMedia: function(stream) {
@@ -517,6 +521,11 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
         console.log('incomingRemoteMediaEnded');
     },
 
+    incomingCallEnded: function (reason) {
+        this.hideIncomingCallPendingState();
+        this.showAbortedState(reason);
+    },
+
     incomingEnded: function() {
         console.log('incomingEnded');
         this.callEnded();
@@ -535,7 +544,7 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
         this.getViewModel().set('callRinging', false);
         this.stopRingSound();
         if(call !== null) {
-            call.end();
+            call.end('declined');
         }
         if(mediaStream !== null) {
             mediaStream.stop();
@@ -555,10 +564,23 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
         this.playRingSound();
     },
 
-    // parameter state true causes the class for the background color change to
+    showAbortedState: function (reason) {
-    // be added, and parameter state false causes the class to be removed
+        var $vm = this.getViewModel();
+        $vm.set('abortReason', reason || 'declined');
+        $vm.set('phoneComposerHidden', true);
+        $vm.set('callAborted', true);
+    },
+
+    hideAbortedState: function () {
+        var $vm = this.getViewModel();
+        $vm.set('abortReason', '');
+        $vm.set('callAborted', false);
+        $vm.set('incomingCaller', '');
+        this.closeRtcPanel();
+    },
+
     setRtcpanelTitleColor: function (state) {
-        // parameter true to change color, and false to revert
+        // parameters: true to change color, and false to revert
         var rtcpanel = Ext.getCmp('rtcpanel');
         rtcpanel.toggleCls('rtc-title-call-initiation', state);
     },
@@ -576,20 +598,22 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
         sound.currentTime = 0;
     },
 
-    showIncomingCallPendingState: function () {
+    closeRtcPanel: function () {
-        // @hherzog: I added parameters for caller number and media type for
+        var rtcpanel = Ext.getCmp('rtcpanel');
-        // now, but they can be replaced with cdk method calls in variable
+        if (rtcpanel) {
-        // declaration below if you prefer
+            rtcpanel.close();
-        var vm = this.getViewModel();
+        };
-        var caller = '+4312345';
+    },
-        var type = 'audio';
+
-        vm.set('callPanel', true);
+    showIncomingCallPendingState: function (caller, type) {
-        vm.set('incomingCallPending', true);
+        var $vm = this.getViewModel();
-        vm.set('phoneComposerHidden', true);
+        $vm.set('callPanel', true);
-        vm.set('title', Ngcp.csc.locales.rtc.incoming_call[localStorage.getItem('languageSelected')]);
+        $vm.set('incomingCallPending', true);
-        vm.set('incomingCaller', caller);
+        $vm.set('phoneComposerHidden', true);
-        vm.set('incomingType', type);
+        $vm.set('title', Ngcp.csc.locales.rtc.incoming_call[localStorage.getItem('languageSelected')]);
-        vm.set('incomingCallHidden', false);
+        $vm.set('incomingCaller', caller);
+        $vm.set('incomingType', type);
+        $vm.set('incomingCallHidden', false);
         this.setRtcpanelTitleColor(true);
     },
 
@@ -600,11 +624,8 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
         vm.set('callPanel', false);
         vm.set('incomingCallPending', false);
         vm.set('title', '');
-        vm.set('incomingCaller', '');
         vm.set('incomingType', '');
-        if (rtcpanel) { // Closes rtcpanel
+        this.setRtcpanelTitleColor(false);
-            rtcpanel.close();
-        };
     },
 
     declineCall: function () {

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

@@ -31,6 +31,7 @@ Ext.define('NgcpCsc.view.rtc.RtcModel', {
         // panel status
         minimized: true,
         rtcEngineLocalMediaStream: null,
+        rtcEngineRemoteMediaStream: null,
         rtcEngineCall: null,
         rtcEngineNetwork: null,
         rtcEngineClient: null,
@@ -42,7 +43,9 @@ Ext.define('NgcpCsc.view.rtc.RtcModel', {
         outgoingCallPending: false,
         incomingCallPending: false,
         incomingType: '',
-        incomingCaller: ''
+        incomingCaller: '',
+        callAborted: false,
+        abortReason: ''
     },
     formulas: {
         disableSubmit: function(get) {

classic/src/view/common/rtc/composer/Phone.js

@@ -35,7 +35,6 @@ Ext.define('NgcpCsc.view.common.rtc.composer.Phone', {
             xtype: 'container',
             items: [{
                 xtype: 'button',
-                text: '',
                 margin: '0 10 0 0',
                 listeners: {
                     click: 'sendAudio'
@@ -48,7 +47,6 @@ Ext.define('NgcpCsc.view.common.rtc.composer.Phone', {
                 html: '<i class="x-fa fa-phone icon-large"></i><i class="x-fa fa-microphone icon-small"></i>'
             }, {
                 xtype: 'button',
-                text: '',
                 listeners: {
                     click: 'sendVideo'
                 },

classic/src/view/main/MainController.js

@@ -311,7 +311,7 @@ Ext.define('NgcpCsc.view.main.MainController', {
             });
 
             // override pseudo element (can also be done using http://docs.sencha.com/extjs/6.2.0/classic/Ext.util.CSS.html#method-createStyleSheet)
-            if (document.styleSheets[0]) {
+            if (document.styleSheets[0] && document.styleSheets[0].addRule) {
                 document.styleSheets[0].addRule('.x-treelist-item-icon::before', 'line-height:' + currentItemsHeight + 'px !important');
                 document.styleSheets[0].addRule('.x-treelist-item-tool:after', 'height:' + currentItemsHeight + 'px !important');
                 document.styleSheets[0].addRule('.x-treelist-item-tool::before', 'line-height:' + currentItemsHeight + 'px !important');

classic/src/view/pages/callforward/CallForwardController.js

@@ -17,7 +17,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
                 cfSourcesetStoreLoaded: 'cfSourcesetStoreLoaded',
                 cfStoreBeforeSync: 'cfStoreBeforeSync',
                 cfSourcesetBeforeSync: 'cfSourcesetBeforeSync',
-                cfTimesetBeforeSync: 'cfTimesetBeforeSync',
+                cfTimesetBeforeSync: 'cfTimesetBeforeSync'
             }
         }
     },

sass/var/all.scss

@@ -109,3 +109,4 @@ $user: "\f007";
 $users: "\f0c0";
 $user-secret: "\f21b";
 $video: "\f03d";
+$close: "\f00d";