From 7b699f2bb8119b2f51716e5e1ad7996709d9ad12 Mon Sep 17 00:00:00 2001 From: Hans-Peter Herzog Date: Fri, 1 Sep 2017 11:43:09 +0200 Subject: [PATCH] TT#21182 Call: Show current call if customer tries to create a new one Change-Id: I3bc3808937ed192b81ba086b2eb405e234d54bc3 --- classic/src/view/common/rtc/CallPanel.js | 50 +- classic/src/view/common/rtc/RtcController.js | 614 +++++------------- classic/src/view/common/rtc/RtcModel.js | 79 +-- classic/src/view/common/rtc/RtcPanel.js | 12 +- .../conversations/ConversationsController.js | 2 +- 5 files changed, 192 insertions(+), 565 deletions(-) diff --git a/classic/src/view/common/rtc/CallPanel.js b/classic/src/view/common/rtc/CallPanel.js index 8422613b..557cd1cd 100644 --- a/classic/src/view/common/rtc/CallPanel.js +++ b/classic/src/view/common/rtc/CallPanel.js @@ -3,30 +3,27 @@ Ext.define('NgcpCsc.view.common.rtc.CallPanel', { alias: 'widget.call-panel', padding: '60 0 0 0', bind: { - hidden: '{!callPanelEnabled}' + hidden: true }, items: [{ + reference: 'outgoingCallState', layout: { type: 'vbox', align: 'center', pack: 'center' }, - bind: { - hidden: '{!outgoingCall}' - }, + hidden: true, items: [{ - bind: { - html: '{callActionLabel}' + Ngcp.csc.animations.loading_dots - }, - xtype: 'label' + reference: 'outgoingCallLabel', + xtype: 'label', + hidden: false }, { - bind: { - text: '{numberToCall}' - }, + reference: 'outgoingCallPeer', xtype: 'label', margin: '0 0 20 0', - userCls: 'call-number-label' + userCls: 'call-number-label', + hidden: false }, { xtype: 'button', @@ -38,28 +35,24 @@ Ext.define('NgcpCsc.view.common.rtc.CallPanel', { html: '', listeners: { click: 'cancelOutgoingCall' - } + }, + hidden: false } ] }, { - bind: { - hidden: '{!callAborted}' - }, + reference: 'callAbortedState', + hidden: true, layout: { type: 'vbox', align: 'center', pack: 'center' }, items: [{ - bind: { - text: Ext.String.format(Ngcp.csc.locales.rtc.call_aborted_by[localStorage.getItem('languageSelected')], '{incomingCaller}') - }, + reference: 'callAbortedPeer', xtype: 'label', margin: '0 0 20 0' }, { - bind: { - text: Ext.String.format(Ngcp.csc.locales.rtc.abort_reason[localStorage.getItem('languageSelected')], '{abortReason}') - }, + reference: 'callAbortedReason', xtype: 'label', margin: '0 0 20 0' }, @@ -78,24 +71,19 @@ Ext.define('NgcpCsc.view.common.rtc.CallPanel', { ] }, { + reference: 'incomingCallState', layout: { type: 'vbox', align: 'center', pack: 'center' }, - bind: { - hidden: '{!incomingCallPending}' - }, + hidden: true, items: [{ - bind: { - html: Ext.String.format(Ngcp.csc.locales.rtc.incoming_call_from[localStorage.getItem('languageSelected')] + Ngcp.csc.animations.loading_dots, '{incomingType}') - }, + reference: 'callIncomingType', xtype: 'label' }, { - bind: { - text: '{incomingCaller}' - }, + reference: 'callIncomingPeer', xtype: 'label', margin: '0 0 20 0', userCls: 'call-number-label' diff --git a/classic/src/view/common/rtc/RtcController.js b/classic/src/view/common/rtc/RtcController.js index 01d741b3..890f48b7 100644 --- a/classic/src/view/common/rtc/RtcController.js +++ b/classic/src/view/common/rtc/RtcController.js @@ -8,15 +8,107 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { }, controller: { '*': { - initrtc: 'showRtcPanel', - emulateCall: 'emulateCall', - endcall: 'endCall' + composeCall: 'composeCall' } } }, - currentStream: null, - intervalId: '', + getComposer: function() { + return this.getView().lookupReference('phoneComposer'); + }, + + getCallPanel: function() { + return this.getView().lookupReference('callPanel'); + }, + + getOutgoingCallState: function() { + return this.getView().lookupReference('outgoingCallState'); + }, + + getOutgoingCallLabel: function() { + return this.getView().lookupReference('outgoingCallLabel'); + }, + + getCallAbortedState: function() { + return this.getView().lookupReference('callAbortedState'); + }, + + getIncomingCallState: function() { + return this.getView().lookupReference('incomingCallState'); + }, + + hideAllCallStates: function() { + this.getOutgoingCallState().hide(); + this.getCallAbortedState().hide(); + this.getIncomingCallState().hide(); + }, + + cleanupCall: function(reason) { + var call = this.getViewModel().get('rtcEngineCall'); + var lms = this.getViewModel().get('rtcEngineLocalMediaStream'); + var rms = this.getViewModel().get('rtcEngineRemoteMediaStream'); + if(call !== null && call !== void(0)) { + call.end(reason); + } + if(lms !== null && lms !== void(0)) { + lms.stop(); + this.getViewModel().set('rtcEngineLocalMediaStream', null); + } + + if(rms !== null && rms !== void(0)) { + this.getViewModel().set('rtcEngineRemoteMediaStream', null); + } + }, + + isCallRunning: function() { + return this.hasCall() && this.getCall().state !== 'ended'; + }, + + hasCall: function() { + return this.getCall() !== null; + }, + + getCall: function() { + return this.getViewModel().get('rtcEngineCall'); + }, + + getPeer: function() { + var parts = this.getCall().peer.split('@')[0].split(':'); + if(parts.length > 1) { + return parts[1]; + } else { + return parts[0]; + } + }, + + composeCall: function() { + if(!this.isCallRunning()) { + this.showComposer(); + } else { + this.showCallPanel(); + } + }, + + showComposer: function() { + this.getView().setTitle('New Call'); + this.getView().removeCls('rtc-title-call-initiation'); + this.getView().setClosable(true); + this.getComposer().show(); + this.getCallPanel().hide(); + if(this.getView().isHidden()) { + this.getView().show(); + } + }, + + showCallPanel: function() { + this.getView().addCls('rtc-title-call-initiation'); + this.getView().setClosable(false); + this.getComposer().hide(); + this.getCallPanel().show(); + if(this.getView().isHidden()) { + this.getView().show(); + } + }, sendAudio: function(){ this.initCall('audio'); @@ -31,30 +123,21 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { 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(); - $vm.set('rtcEngineLocalMediaStream', null); - } + this.cleanupCall(); this.createMedia(mediaType).then(function (localMediaStream) { - // Todo: attache stream to video element - // if(mediaType === 'video') { - // cdk.MediaElementHelper.attachStreamToDomNode( - // document.getElementById('call-local-preview'), - // localMediaStream - // ); - // } - var call = network.call(callee, { localMediaStream: localMediaStream }); - call.onPending(function () { $ct.outgoingPending(); }) + $vm.set('rtcEngineLocalMediaStream', localMediaStream); + $vm.set('rtcEngineCall', network.call(callee, { + localMediaStream: localMediaStream + })); + $vm.get('rtcEngineCall') + .onPending(function () { $ct.outgoingPending(); }) .onAccepted(function () { $ct.outgoingAccepted(); }) .onRingingStart(function () { $ct.outgoingRingingStart(); }) .onRingingStop(function () { $ct.outgoingRingingStop(); }) .onRemoteMedia(function (stream) { $ct.outgoingRemoteMedia(); }) .onRemoteMediaEnded(function () { $ct.outgoingRemoteMediaEnded(); }) .onEnded(function () { $ct.outgoingEnded(); }); - $vm.set('rtcEngineLocalMediaStream', localMediaStream); - $vm.set('rtcEngineCall', call); }).catch(function (err) { console.error(err); }); @@ -83,177 +166,10 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { }); }, - showRtcPanel: function(record, action, switchVideoOn, preventReloadConversation) { - var me = this; - var panel = this.getView(); - var vm = this.getViewModel(); - var fieldToFocus; - vm.set('numberToCall', ''); - switch (action) { - case 'startCall': - case 'startVideoCall': - var number = record.get('name') || record.get('source_cli') || record.get('callee'); - var mainView = Ext.ComponentQuery.query('[name=mainView]')[0]; - var notification = Ext.create('NgcpCsc.model.Notification', { - 'id': Ext.id(), - 'conversation_type': 'call', - 'name': number, - 'direction': 'outgoing', - 'status': 'answered', - 'start_time': Date.now(), - "author": "Administrator", - "thumbnail": Ext.manifest.resources.path + "/images/user-profile/2.png" - }); - vm.set('uid', record.get('uid') || number); - vm.set('title', Ext.String.format(Ngcp.csc.locales.rtc.calling[localStorage.getItem('languageSelected')], number)); - vm.set('thumbnail', record.get('thumbnail') || this.getViewModel().get('defaultThumbnail')); - vm.set('status', Ext.String.format(Ngcp.csc.locales.rtc.calling[localStorage.getItem('languageSelected')] + ' ...', number)); - vm.set('callPanelEnabled', false); - vm.set('micEnabled', false); - vm.set('phoneComposerHidden', true); - vm.set('faxComposerHidden', true); - vm.set('smsComposerHidden', true); - vm.set('callPanelHidden', false); - vm.set('videoEnabled', switchVideoOn || false); - mainView.getViewModel().set('sectionTitle', 'Conversation with ' + number); - this.emulateCall(true, action == 'startVideoCall'); - if (!preventReloadConversation) { - this.redirectTo('conversation-with'); - Ext.Function.defer(function() { - me.fireEvent('openpmtab', null, record); - }, 100); - } - break; - case 'phoneComposer': - if (vm.get('connected')) { - this.fireEvent('showmessage', false, Ngcp.csc.locales.rtc.call_in_progress[localStorage.getItem('languageSelected')]); - return; - } - vm.set('title', Ngcp.csc.locales.conversations.btns.new_call[localStorage.getItem('languageSelected')]); - vm.set('phoneComposerHidden', false); - vm.set('faxComposerHidden', true); - vm.set('smsComposerHidden', true); - vm.set('callPanelHidden', true); - fieldToFocus = this.lookupReference('callNumberInput'); - break; - case 'faxComposer': - if (record) { - vm.set('numberToCall', record.get('source_cli')); - } - vm.set('title', Ngcp.csc.locales.conversations.btns.new_fax[localStorage.getItem('languageSelected')]); - vm.set('phoneComposerHidden', true); - vm.set('faxComposerHidden', false); - vm.set('smsComposerHidden', true); - vm.set('callPanelHidden', true); - fieldToFocus = this.lookupReference('faxNumberInput'); - break; - case 'smsComposer': - if (record) { - vm.set('numberToCall', record.get('source_cli')); - } - vm.set('title', Ngcp.csc.locales.conversations.btns.new_sms[localStorage.getItem('languageSelected')]); - vm.set('phoneComposerHidden', true); - vm.set('faxComposerHidden', true); - vm.set('smsComposerHidden', false); - vm.set('callPanelHidden', true); - fieldToFocus = this.lookupReference('smsTextArea'); - break; - } - panel.show().expand(); - if (fieldToFocus) { - Ext.Function.defer(function() { // needs to be executed when field is visible - fieldToFocus.focus(); - }, 50) - } - this.fireEvent('collapseContacts'); - }, - - toogleChat: function(btn) { - var me = this; - var vm = this.getViewModel(); - var contactsStore = Ext.getStore('Contacts'); - var contact = contactsStore.findRecord('uid', vm.get('uid')) || Ext.create('Ext.data.Model', { - id: vm.get('uid'), - name: vm.get('number') - }); - me.fireEvent('updateconversationtitle', 'conversation-with', contact); - me.redirectTo('conversation-with'); - Ext.Function.defer(function() { - me.fireEvent('openpmtab', null, contact, true); - }, 100); - }, - - toggleFullscreen: function() { - var video = document.querySelector("video"); - var videoInProgress = false; - Ext.each(this.currentStream.getTracks(), function(mediaTrack) { - if (mediaTrack.readyState == 'live' && mediaTrack.kind == "video") { - videoInProgress = true; - return; - } - }); - if (videoInProgress) { - if (Ext.isWebKit) { - video.webkitEnterFullScreen(); - } else { - video.mozRequestFullScreen(); - } - } - }, - minimizeRtcPanel: function() { this.getView().collapse(); }, - onBeforeClose: function() { - var vm = this.getViewModel(); - this.getView().hide(); - vm.set('status', ''); - clearInterval(this.intervalId); - if (vm.get('connected')) { - this.endCall(); - } - this.fireEvent('expandContacts'); - return false; - }, - - emulateCall: function(audioOn, videoOn) { - var me = this; - var vm = me.getViewModel(); - var sample = document.getElementById("ring"); - var ringDuration = 3000; - if (this.intervalId !== '') { - clearInterval(me.intervalId); - } - vm.set('status', 'calling...'); - me.playRingSound(); - setTimeout(function() { - var seconds = minutes = hours = 0; - me.stopRingSound(); - vm.set('callPanelEnabled', true); - vm.set('micEnabled', true); - me.startMedia(audioOn, videoOn); - me.intervalId = setInterval(function() { - seconds++; - if (seconds == 60) { - seconds = 0; - minutes++; - } - if (minutes == 60) { - minutes = 0; - hours++; - } - if (hours == 24) { - hours = 0; - } - var duration = ((hours < 10) ? '0' + hours : hours) + ': ' + - ((minutes < 10) ? '0' + minutes : minutes) + ': ' + - ((seconds < 10) ? '0' + seconds : seconds); - vm.set('status', 'connected ' + duration); - }, 1000); - }, ringDuration); - }, - toggleAudioVideo: function() { var me = this; var vm = this.getViewModel(); @@ -270,146 +186,6 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { } }, - toggleCall: function(btn) { - if (btn.pressed) { // this can be also checked against vm.get('callPanelEnabled') - this.emulateCall(true, false); - } else { - this.endCall(); - } - }, - - endCall: function() { - var vm = this.getViewModel(); - var videoObj = this.lookupReference('videoObj'); - var video = document.querySelector("video"); - var me = this; - this.lookupReference('avatar').show(); - clearInterval(this.intervalId); - video.pause(); - video.src = ""; - videoObj.hide(); - if (this.currentStream) { - Ext.each(this.currentStream.getTracks(), function(mediaTrack) { - mediaTrack.stop(); - }); - } - vm.set('status', 'Call ended.'); - vm.set('connected', false); - this.fireEvent('notify', 'call'); - }, - - startMedia: function(audio, video) { - var me = this; - var vm = me.getViewModel(); - //Wrap the getUserMedia function from the different browsers - navigator.getUserMedia = navigator.getUserMedia || - navigator.webkitGetUserMedia || - navigator.mozGetUserMedia; - - //Our success callback where we get the media stream object and assign it to a video tag on the page - function onSuccess(mediaObj) { - me.currentStream = mediaObj; - me.lookupReference('avatar').setVisible(!vm.get('videoEnabled')); - me.lookupReference('videoObj').setVisible(vm.get('videoEnabled')); - vm.set('connected', true); - window.stream = mediaObj; - var video = document.querySelector("video"); - video.src = window.URL.createObjectURL(mediaObj); - video.play(); - } - - //Our error callback where we will handle any issues - function onError(errorObj) { - console.log("There was an error: " + errorObj); - } - - //We can select to request audio and video or just one of them - var mediaConstraints = { - video: video, - audio: audio - }; - - //Call our method to request the media object - this will trigger the browser to prompt a request. - navigator.getUserMedia(mediaConstraints, onSuccess, onError); - }, - - showPhoneComposer: function(btn) { - var vm = this.getViewModel(); - vm.set('phoneKeyboardHidden', !btn.pressed); - }, - - digitNumber: function(btn) { - var vm = this.getViewModel(); - var currentNum = vm.get('numberToCall'); - vm.set('numberToCall', currentNum + btn.getText()) - }, - - startNewCall: function() { - var vm = this.getViewModel(); - var currentNum = vm.get('numberToCall'); - var record = Ext.create('Ext.data.Model', { - callee: currentNum - }); - this.showRtcPanel(record, 'startCall'); - }, - - sendFax: function() { - var me = this; - var vm = me.getViewModel(); - var mainView = Ext.ComponentQuery.query('[name=mainView]')[0]; - var faxForm = me.getView().down('fax-composer'); - var record = Ext.create('NgcpCsc.model.Notification', { - 'id': Ext.id(), - 'conversation_type': 'fax', - 'name': vm.get('numberToCall') || 'Administrator', - 'direction': 'outgoing', - 'status': 'answered', - 'start_time': Date.now(), - "thumbnail": Ext.manifest.resources.path + "/images/user-profile/2.png" - }); - if (faxForm.isValid()) { - mainView.getViewModel().set('sectionTitle', 'Conversation with ' + vm.get('numberToCall')); - me.redirectTo('conversation-with'); - Ext.Function.defer(function() { - me.fireEvent('openpmtab', null, record); - me.fireEvent('notify', 'fax'); - }, 100); - faxForm.reset(); - me.fireEvent('showmessage', true, Ngcp.csc.locales.rtc.fax_sent[localStorage.getItem('languageSelected')]); - } else { - me.fireEvent('showmessage', false, Ngcp.csc.locales.common.invalid_form[localStorage.getItem('languageSelected')]); - } - this.getView().close(); - - }, - - sendSms: function() { - var me = this; - var vm = me.getViewModel(); - var mainView = Ext.ComponentQuery.query('[name=mainView]')[0]; - var smsForm = me.getView().down('sms-composer'); - var record = Ext.create('NgcpCsc.model.Notification', { - 'id': Ext.id(), - 'conversation_type': 'sms', - 'name': vm.get('numberToCall'), - 'direction': 'outgoing', - 'status': 'answered', - 'text': vm.get('smsText'), - 'start_time': Date.now(), - "author": "Administrator", - "thumbnail": Ext.manifest.resources.path + "/images/user-profile/2.png" - }); - mainView.getViewModel().set('sectionTitle', 'Conversation with ' + vm.get('numberToCall')); - me.redirectTo('conversation-with'); - Ext.Function.defer(function() { - me.fireEvent('openpmtab', null, record); - me.fireEvent('notify', 'sms', vm.get('smsText')); - smsForm.reset(); - me.getView().close(); - }, 100); - this.fireEvent('showmessage', true, Ngcp.csc.locales.rtc.sms_sent[localStorage.getItem('languageSelected')]); - }, - initRtcEngineClient: function() { var $ct = this; var $vm = $ct.getViewModel(); @@ -446,19 +222,19 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { var rtcNetwork = rtcClient.getNetworkByTag('sip'); $vm.set('rtcEngineNetwork', rtcNetwork); rtcNetwork.onConnect(function() { - $vm.set('callPanelEnabled', true); + }).onIncomingCall(function(call) { - $vm.set('rtcEngineRemoteCall', call); + $vm.set('rtcEngineCall', call); $ct.incomingCallPending(call); - call.onRemoteMedia(function(stream){ - console.log('stream', stream); + call + .onRemoteMedia(function(stream){ $vm.set('rtcEngineRemoteMediaStream', stream); $ct.incomingRemoteMedia(stream); }) .onRemoteMediaEnded(function(){ $ct.incomingRemoteMediaEnded(); }) - .onEnded(function(){ $ct.incomingCallEnded() }); + .onEnded(function(reason){ $ct.incomingCallEnded(reason) }); }).onDisconnect(function(){ - $vm.set('callPanelEnabled', false); + this.hideCall(); $vm.set('callDisabledReason', rtcNetwork.disconnectReason); }); }).onDisconnect(function(){ @@ -473,49 +249,53 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { }, outgoingPending: function() { - console.log('outgoingPending'); - this.showOutgoingCallPendingState(); + console.log('outgoingCallPending'); + this.showCallPanel(); + this.hideAllCallStates(); + this.getOutgoingCallState().show(); + this.getOutgoingCallLabel().setHtml('Try to call ' + Ngcp.csc.animations.loading_dots); + this.getView().lookupReference('outgoingCallPeer').setText(this.getPeer()); }, outgoingAccepted: function() { - console.log('outgoingAccepted'); + console.log('outgoingCallAccepted'); }, outgoingRingingStart: function() { - console.log('outgoingRingingStart'); - this.showOutgoingCallRingingState(); + console.log('outgoingCallRingingStart'); + this.playRingSound(); + this.getOutgoingCallLabel().setHtml('Ringing ' + Ngcp.csc.animations.loading_dots); }, outgoingRingingStop: function() { - console.log('outgoingRingingStop'); + console.log('outgoingCallRingingStop'); this.stopRingSound(); }, outgoingRemoteMedia: function(stream) { - console.log('outgoingRemoteMedia'); + console.log('outgoingCallRemoteMedia'); }, outgoingRemoteMediaEnded: function() { - console.log('outgoingRemoteMediaEnded'); - var $vm = this.getViewModel(); - var localMediaStream = $vm.get('rtcEngineLocalMediaStream'); - localMediaStream.stop(); + console.log('outgoingCallRemoteMediaEnded'); }, outgoingEnded: function() { - console.log('outgoingEnded'); - var $vm = this.getViewModel(); - var call = $vm.get('rtcEngineCall'); - this.hideOutgoingCallPendingState(); - this.showAbortedState(call.endedReason); + console.log('outgoingCallEnded'); + this.showAbortedState(); + this.callEnded(); }, incomingCallPending: function(call) { 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); + this.showCallPanel(); + this.hideAllCallStates(); + this.getIncomingCallState().show(); + this.getView().setTitle(Ngcp.csc.locales.rtc.incoming_call[localStorage.getItem('languageSelected')]); + this.getView().lookupReference('callIncomingType').setHtml( + Ext.String.format(Ngcp.csc.locales.rtc.incoming_call_from[localStorage.getItem('languageSelected')] + + Ngcp.csc.animations.loading_dots, 'audio')) + this.getView().lookupReference('callIncomingPeer').setText(this.getPeer()); }, incomingRemoteMedia: function(stream) { @@ -524,95 +304,56 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { incomingRemoteMediaEnded: function() { console.log('incomingRemoteMediaEnded'); - var $vm = this.getViewModel(); - // TODO cleanup remote media }, incomingCallEnded: function () { console.log('incomingCallEnded'); - var $vm = this.getViewModel(); - var call = $vm.get('rtcEngineRemoteCall'); - this.hideIncomingCallPendingState(); - this.showAbortedState(call.endedReason); + this.showAbortedState(); }, incomingEnded: function() { console.log('incomingEnded'); + this.callEnded(); }, - callEnded: function() { - var $ct = this; - var $vm = $ct.getViewModel(); + callEnded: function(reason) { + this.cleanupCall(reason); }, cancelOutgoingCall: function() { - var $vm = this.getViewModel(); - var call = $vm.get('rtcEngineCall'); - var mediaStream = $vm.get('rtcEngineLocalMediaStream'); - $vm.set('phoneComposerHidden', false); - $vm.set('callPending', false); - $vm.set('callRinging', false); - this.stopRingSound(); - if (call !== null) { - call.end('declined'); - } - if (mediaStream !== null) { - mediaStream.stop(); - } - $vm.set('phoneComposerHidden', true); - this.closeRtcPanel(); - }, - - showOutgoingCallPendingState: function() { - var $vm = this.getViewModel(); - $vm.set('callPending', true); - $vm.set('callActionLabel', 'Try to call'); - $vm.set('phoneComposerHidden', true); - }, - - hideOutgoingCallPendingState: function () { - var $vm = this.getViewModel(); - $vm.set('outgoingCall', false); - $vm.set('callPending', false); - $vm.set('callActionLabel', ''); - $vm.set('phoneComposerHidden', false); - }, - - showOutgoingCallRingingState: function() { - var $vm = this.getViewModel(); - $vm.set('callRinging', true); - $vm.set('callPending', false); - $vm.set('callActionLabel', 'Ringing'); - this.playRingSound(); + this.callEnded('aborted'); + this.showComposer(); }, showAbortedState: function (reason) { - console.log('showAbortedState'); - var $vm = this.getViewModel(); - $vm.set('abortReason', reason); - $vm.set('phoneComposerHidden', true); - $vm.set('callAborted', true); + this.hideAllCallStates(); + this.getCallAbortedState().show(); + this.showCallPanel(); + this.getView().lookupReference('callAbortedPeer').setText( + Ext.String.format(Ngcp.csc.locales.rtc.call_aborted_by[localStorage.getItem('languageSelected')], + this.getPeer() + ) + ); + this.getView().lookupReference('callAbortedReason').setText( + Ext.String.format(Ngcp.csc.locales.rtc.abort_reason[localStorage.getItem('languageSelected')], + this.getCall().endedReason + ) + ); }, hideAbortedState: function () { - var $vm = this.getViewModel(); - $vm.set('abortReason', ''); - $vm.set('callAborted', false); - $vm.set('incomingCaller', ''); - this.closeRtcPanel(); - }, - - setRtcpanelTitleColor: function (state) { - // parameters: true to change color, and false to revert - var rtcpanel = Ext.getCmp('rtcpanel'); - rtcpanel.toggleCls('rtc-title-call-initiation', state); + if(this.hasCall() && this.getCall().origin === 'local') { + this.showComposer(); + } else { + this.closeRtcPanel(); + } }, playRingSound: function () { var sound = document.getElementById('ring'); if (sound.paused) { sound.play(); - }; + } }, stopRingSound: function () { @@ -622,41 +363,18 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { }, closeRtcPanel: function () { - var rtcpanel = Ext.getCmp('rtcpanel'); - if (rtcpanel) { - rtcpanel.close(); - }; - }, - - showIncomingCallPendingState: function (caller, type) { - var $vm = this.getViewModel(); - $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); + if(!this.isCallRunning()) { + this.getView().hide(); + } }, - 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('incomingType', ''); - this.setRtcpanelTitleColor(false); + handleBeforeClose: function() { + this.closeRtcPanel(); + return false; }, declineCall: function () { - var $vm = this.getViewModel(); - var call = $vm.get('rtcEngineRemoteCall'); - call.end('decline'); - this.hideIncomingCallPendingState(); + this.cleanupCall(); this.closeRtcPanel(); } - }); diff --git a/classic/src/view/common/rtc/RtcModel.js b/classic/src/view/common/rtc/RtcModel.js index 3b37c04b..939dd278 100644 --- a/classic/src/view/common/rtc/RtcModel.js +++ b/classic/src/view/common/rtc/RtcModel.js @@ -1,91 +1,14 @@ Ext.define('NgcpCsc.view.rtc.RtcModel', { extend: 'Ext.app.ViewModel', - alias: 'viewmodel.rtc', - - // left inline by purpose as it's not coming from API data: { - uid: '', - title: '', - defaultThumbnail: Ext.manifest.resources.path + '/images/icons/phoneicon.png', - thumbnail: Ext.manifest.resources.path + '/images/icons/phoneicon.png', - status: 'calling...', - callPanelHidden: true, - phoneComposerHidden: true, - faxComposerHidden: true, - smsComposerHidden: true, phoneKeyboardHidden: true, - incomingCallHidden: true, - callPanelEnabled: false, - connected: false, - micEnabled: false, - videoEnabled: false, numberToCall: '', - // fax only fields - faxPageHeader: '', - faxContent: '', - faxSelectedQuality: '', - faxChosenFile: '', - // sms only fields - smsText: '', - // panel status - minimized: true, rtcEngineLocalMediaStream: null, rtcEngineRemoteMediaStream: null, rtcEngineCall: null, rtcEngineNetwork: null, rtcEngineClient: null, - rtcEngineSession: null, - callPanel: true, - callActionLabel: '', - callPending: false, - callRinging: false, - outgoingCallPending: false, - incomingCallPending: false, - incomingType: '', - incomingCaller: '', - callAborted: false, - abortReason: '', - rtcEngineRemoteCall: null - }, - formulas: { - disableSubmit: function(get) { - var digitNumber = get('numberToCall'); - if (digitNumber.length < 1) { - return true; - } else { - return !digitNumber.match(/^[0-9#*+]+$/); - }; - }, - disableSmsSubmit: function(get) { - return get('numberToCall').length < 1; - }, - setuserCls:function(get){ - return get('callPanelEnabled') ? '' : 'fa-rotate-180'; - }, - callEnabled: { - bind: { - callPending: '{callPending}', - callRinging: '{callRinging}', - incomingCallPending: '{incomingCallPending}' - }, - get: function (data) { - return data.callPending || data.callRinging || data.incomingCallPending; - } - }, - outgoingCall: { - bind: { - callPending: '{callPending}', - callRinging: '{callRinging}' - }, - get: function (data) { - return data.callPending || data.callRinging; - } - }, - callLocalPreview: { - get: function (data) { - return data.rtcEngineLocalMediaStream && data.rtcEngineLocalMediaStream.hasVideo(); - } - } + rtcEngineSession: null } }); diff --git a/classic/src/view/common/rtc/RtcPanel.js b/classic/src/view/common/rtc/RtcPanel.js index 7fbdcf02..4520481b 100644 --- a/classic/src/view/common/rtc/RtcPanel.js +++ b/classic/src/view/common/rtc/RtcPanel.js @@ -34,16 +34,14 @@ Ext.define('NgcpCsc.view.common.rtc.RtcPanel', { }, listeners: { - beforeclose: 'onBeforeClose' + beforeclose: 'handleBeforeClose' }, items: [{ - xtype: 'phone-composer' + xtype: 'phone-composer', + reference: 'phoneComposer' }, { - xtype: 'sms-composer' - }, { - xtype: 'fax-composer' - }, { - xtype: 'call-panel' + xtype: 'call-panel', + reference: 'callPanel' }] }); diff --git a/classic/src/view/pages/conversations/ConversationsController.js b/classic/src/view/pages/conversations/ConversationsController.js index 62926cee..4b0d624a 100644 --- a/classic/src/view/pages/conversations/ConversationsController.js +++ b/classic/src/view/pages/conversations/ConversationsController.js @@ -243,7 +243,7 @@ Ext.define('NgcpCsc.view.pages.conversations.ConversationsController', { }, composeCall: function() { - this.fireEvent('initrtc', null, 'phoneComposer'); + this.fireEvent('composeCall', null, 'phoneComposer'); }, composeFax: function() {