diff --git a/classic/sass/src/view/common/rtc/RtcPanel.scss b/classic/sass/src/view/common/rtc/RtcPanel.scss
index 12cf9d1a..de10578b 100644
--- a/classic/sass/src/view/common/rtc/RtcPanel.scss
+++ b/classic/sass/src/view/common/rtc/RtcPanel.scss
@@ -81,6 +81,13 @@ $border-radius : 50%;
bottom: 0px;
left: 2px;
}
+
+ .icon-normal {
+ display: block;
+ font-size: 16px;
+ line-height: 18px;
+ width: 100%;
+ }
}
diff --git a/classic/src/view/common/rtc/CallPanel.js b/classic/src/view/common/rtc/CallPanel.js
index 557cd1cd..9c789d4b 100644
--- a/classic/src/view/common/rtc/CallPanel.js
+++ b/classic/src/view/common/rtc/CallPanel.js
@@ -1,12 +1,10 @@
Ext.define('NgcpCsc.view.common.rtc.CallPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.call-panel',
- padding: '60 0 0 0',
- bind: {
- hidden: true
- },
+ hidden: true,
items: [{
reference: 'outgoingCallState',
+ padding: '40 0 0 0',
layout: {
type: 'vbox',
align: 'center',
@@ -15,17 +13,20 @@ Ext.define('NgcpCsc.view.common.rtc.CallPanel', {
hidden: true,
items: [{
reference: 'outgoingCallLabel',
- xtype: 'label',
- hidden: false
+ xtype: 'label'
},
{
reference: 'outgoingCallPeer',
xtype: 'label',
margin: '0 0 20 0',
userCls: 'call-number-label',
- hidden: false
- },
- {
+ },{
+ reference: 'outgoingCallMedia',
+ hidden: true,
+ padding: '0 0 20 0',
+ width: '100%',
+ html: ''
+ },{
xtype: 'button',
userCls: 'call-button call-button-cancel call-button-hangup',
overCls: 'call-button-cancel-over',
@@ -41,6 +42,7 @@ Ext.define('NgcpCsc.view.common.rtc.CallPanel', {
]
}, {
reference: 'callAbortedState',
+ padding: '40 0 0 0',
hidden: true,
layout: {
type: 'vbox',
@@ -72,6 +74,7 @@ Ext.define('NgcpCsc.view.common.rtc.CallPanel', {
},
{
reference: 'incomingCallState',
+ padding: '40 0 0 0',
layout: {
type: 'vbox',
align: 'center',
@@ -130,6 +133,68 @@ Ext.define('NgcpCsc.view.common.rtc.CallPanel', {
}
}]
}]
+ },{
+ reference: 'acceptedCallState',
+ padding: '0 0 0 0',
+ hidden: true,
+ layout: {
+ type: 'vbox',
+ align: 'center',
+ pack: 'center'
+ },
+ items: [{
+ reference: 'acceptedRemoteMedia',
+ hidden: true,
+ padding: '0 0 0 0',
+ width: '100%',
+ html: ''
+ }, {
+ reference: 'acceptedLocalMedia',
+ hidden: true,
+ padding: '20 0 20 0',
+ width: '33%',
+ html: ''
+ },{
+ layout: {
+ type: 'hbox',
+ align: 'center',
+ pack: 'center'
+ },
+ items: [{
+ 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: '',
+ listeners: {
+ }
+ }, {
+ 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: '',
+ listeners: {
+ }
+ }, {
+ 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: '',
+ listeners: {
+ }
+ }]
+ }
+ ]
}
]
});
diff --git a/classic/src/view/common/rtc/RtcController.js b/classic/src/view/common/rtc/RtcController.js
index f6a990f5..cfde5ada 100644
--- a/classic/src/view/common/rtc/RtcController.js
+++ b/classic/src/view/common/rtc/RtcController.js
@@ -41,6 +41,7 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
this.getOutgoingCallState().hide();
this.getCallAbortedState().hide();
this.getIncomingCallState().hide();
+ this.getView().lookupReference('acceptedCallState').hide();
},
cleanupCall: function(reason) {
@@ -81,6 +82,15 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
}
},
+ getMyNumber: function() {
+ var parts = this.getCall().network.getUser().split('@')[0].split(':');
+ if(parts.length > 1) {
+ return parts[1];
+ } else {
+ return parts[0];
+ }
+ },
+
composeCall: function() {
if(!this.isCallRunning()) {
this.showComposer();
@@ -131,26 +141,12 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
$vm.set('rtcEngineCall', network.call(callee, {
localMediaStream: localMediaStream
}));
- // TODO attach stream to video element. Uncomment and
- // implement video element to attach to in panel
- // if (mediaType === 'video') {
- // var mediaElementHelper = new cdk.MediaElementHelper(localMediaStream);
- // mediaElementHelper.getDomNode(function(err, domNode){
- // if (domNode) {
- // cdk.MediaElementHelper.attachStreamToDomNode(
- // domNode,
- // localMediaStream
- // );
- // $ct.attachDomNodeToElement(domNode);
- // };
- // });
- // };
$vm.get('rtcEngineCall')
.onPending(function () { $ct.outgoingPending(); })
.onAccepted(function () { $ct.outgoingAccepted(); })
.onRingingStart(function () { $ct.outgoingRingingStart(); })
.onRingingStop(function () { $ct.outgoingRingingStop(); })
- .onRemoteMedia(function (stream) { $ct.outgoingRemoteMedia(); })
+ .onRemoteMedia(function (stream) { $ct.outgoingRemoteMedia(stream); })
.onRemoteMediaEnded(function () { $ct.outgoingRemoteMediaEnded(); })
.onEnded(function () { $ct.outgoingEnded(); });
}).catch(function (err) {
@@ -164,7 +160,7 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
var localMediaStream;
localMediaStream = new cdk.LocalMediaStream();
localMediaStream.queryMediaSources(function(sources){
- if(mediaType === 'audio') {
+ if(mediaType === 'audio' || mediaType === 'video') {
localMediaStream.setAudio(sources.defaultAudio);
}
if(mediaType === 'video') {
@@ -263,17 +259,34 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
});
},
+ attachStreamToDomNode: function(id, stream, muted) {
+ $ct = this;
+ document.getElementById(id).onplaying = function(){ $ct.getView().updateLayout(); };
+ cdk.MediaElementHelper.attachStreamToDomNode(document.getElementById(id), stream);
+ if(muted) {
+ document.getElementById(id).muted = true;
+ }
+ },
+
outgoingPending: function() {
console.log('outgoingCallPending');
+ var localMediaStream = this.getViewModel().get('rtcEngineLocalMediaStream');
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());
+ if(localMediaStream.hasVideo()) {
+ this.getView().lookupReference('outgoingCallMedia').show();
+ this.attachStreamToDomNode('outgoing-call-media', localMediaStream, true);
+ } else {
+ this.getView().lookupReference('outgoingCallMedia').hide();
+ }
},
outgoingAccepted: function() {
console.log('outgoingCallAccepted');
+ this.showAcceptedState();
},
outgoingRingingStart: function() {
@@ -287,8 +300,10 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
this.stopRingSound();
},
- outgoingRemoteMedia: function(stream) {
+ outgoingRemoteMedia: function(remoteMediaStream) {
console.log('outgoingCallRemoteMedia');
+ this.getViewModel().set('rtcEngineRemoteMediaStream', remoteMediaStream);
+ this.showRemoteMedia(remoteMediaStream);
},
outgoingRemoteMediaEnded: function() {
@@ -313,11 +328,10 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
this.getView().lookupReference('callIncomingPeer').setText(this.getPeer());
},
- incomingRemoteMedia: function(stream) {
+ incomingRemoteMedia: function(remoteMediaStream) {
console.log('incomingRemoteMedia');
- var $vm = this.getViewModel();
- console.log('stream variable in incomingRemoteMedia:', stream);
- $vm.set('rtcEngineRemoteMediaStream', stream);
+ this.getViewModel().set('rtcEngineRemoteMediaStream', remoteMediaStream);
+ this.showRemoteMedia(remoteMediaStream);
},
incomingRemoteMediaEnded: function() {
@@ -343,18 +357,36 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
this.showComposer();
},
- showAbortedState: function (reason) {
+ showAcceptedState: function() {
+ $ct = this;
+ $vm = $ct.getViewModel();
+ var localMediaStream = $vm.get('rtcEngineLocalMediaStream');
+ this.hideAllCallStates();
+ this.showCallPanel();
+ this.getView().lookupReference('acceptedCallState').show();
+ if(localMediaStream.hasVideo()) {
+ this.getView().lookupReference('acceptedLocalMedia').show();
+ this.attachStreamToDomNode('accepted-local-media', localMediaStream, true);
+ }
+ },
+
+ showRemoteMedia: function(stream) {
+ this.getView().lookupReference('acceptedRemoteMedia').show();
+ this.attachStreamToDomNode('accepted-remote-media', stream, false);
+ },
+
+ showAbortedState: function (by, reason) {
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()
+ by || this.getPeer()
)
);
this.getView().lookupReference('callAbortedReason').setText(
Ext.String.format(Ngcp.csc.locales.rtc.abort_reason[localStorage.getItem('languageSelected')],
- this.getCall().endedReason
+ reason || this.getCall().endedReason
)
);
},
@@ -396,12 +428,6 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
this.closeRtcPanel();
},
- attachDomNodeToElement: function (domNode) {
- console.log('attachDomNodeToElement');
- var element = document.getElementById('call-local-preview');
- element.appendChild(domNode);
- },
-
acceptCallVideo: function () {
this.acceptCall('video');
},
@@ -414,18 +440,13 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
var $ct = this;
var $vm = this.getViewModel();
var call = $vm.get('rtcEngineCall');
- var localMediaStream = new cdk.LocalMediaStream();
- localMediaStream.queryMediaSources(function(sources) {
- if(mediaType === 'audio') {
- localMediaStream.setAudio(sources.defaultAudio);
- }
- if(mediaType === 'video') {
- localMediaStream.setVideo(sources.defaultVideo);
- }
- call.accept({
- localMediaStream: localMediaStream
- });
+ this.createMedia(mediaType).then(function(localMediaStream){
+ $vm.set('rtcEngineLocalMediaStream', localMediaStream);
+ call.accept({ localMediaStream: localMediaStream });
+ $ct.showAcceptedState();
+ }).catch(function(err){
+ $ct.cleanupCall();
+ $ct.showAbortedState($ct.getMyNumber(), 'mediaAccessDenied');
});
}
-
});
diff --git a/classic/src/view/common/rtc/RtcPanel.js b/classic/src/view/common/rtc/RtcPanel.js
index 4520481b..7070eb7b 100644
--- a/classic/src/view/common/rtc/RtcPanel.js
+++ b/classic/src/view/common/rtc/RtcPanel.js
@@ -7,8 +7,8 @@ Ext.define('NgcpCsc.view.common.rtc.RtcPanel', {
controller: 'rtc',
viewModel: 'rtc',
- padding: '0 0 0 1',
- width: '30%',
+ padding: '0 0 0 0',
+
closable: true,
collapseDirection: 'left',
cls: 'rtc-panel',
diff --git a/classic/src/view/main/Main.js b/classic/src/view/main/Main.js
index 36de3dc5..2e32f2a8 100644
--- a/classic/src/view/main/Main.js
+++ b/classic/src/view/main/Main.js
@@ -158,11 +158,6 @@ Ext.define('NgcpCsc.view.main.Main', {
xtype: 'rtc',
itemId: 'webrtcPanel',
hidden: true
- }, {
- width: 350,
- resizable: Ext.os.is.Desktop,
- xtype: 'contacts',
- ui: 'core-container'
}]
}]
}];