TT#21087 Call: Catch remote media stream and show the media element on the call panel

- Call: Show local video preview on the call panel
- Disabled contacts

Change-Id: I4961030c35fa775d7ff7e9decf5973a161599178

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%;
+    }
 }
 
 

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',
+    hidden: true,
-    bind: {
-        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',
+                    xtype: 'label'
-                    hidden: false
                 },
                 {
                     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: '<video id="outgoing-call-media" autoplay style="width: 100%"></video>'
+                },{
                     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: '<video id="accepted-remote-media" autoplay style="width: 100%"></video>'
+                }, {
+                    reference: 'acceptedLocalMedia',
+                    hidden: true,
+                    padding: '20 0 20 0',
+                    width: '33%',
+                    html: '<video id="accepted-local-media" autoplay style="width: 100%"></video>'
+                },{
+                    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: '<i class="x-fa fa-microphone icon-normal"></i></i>',
+                        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: '<i class="x-fa fa-video-camera icon-normal"></i></i>',
+                        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: '<i class="x-fa fa-phone call-icon-cancel"></i>',
+                        listeners: {
+                        }
+                    }]
+                }
+            ]
         }
     ]
 });

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();
+        this.getViewModel().set('rtcEngineRemoteMediaStream', remoteMediaStream);
-        console.log('stream variable in incomingRemoteMedia:', stream);
+        this.showRemoteMedia(remoteMediaStream);
-        $vm.set('rtcEngineRemoteMediaStream', stream);
     },
 
     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();
+        this.createMedia(mediaType).then(function(localMediaStream){
-        localMediaStream.queryMediaSources(function(sources) {
+            $vm.set('rtcEngineLocalMediaStream', localMediaStream);
-            if(mediaType === 'audio') {
+            call.accept({ localMediaStream: localMediaStream });
-                localMediaStream.setAudio(sources.defaultAudio);
+            $ct.showAcceptedState();
-            }
+        }).catch(function(err){
-            if(mediaType === 'video') {
+            $ct.cleanupCall();
-                localMediaStream.setVideo(sources.defaultVideo);
+            $ct.showAbortedState($ct.getMyNumber(), 'mediaAccessDenied');
-            }
-            call.accept({
-                localMediaStream: localMediaStream
-            });
         });
     }
-
 });

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',
+    padding: '0 0 0 0',
-    width: '30%',
+
     closable: true,
     collapseDirection: 'left',
     cls: 'rtc-panel',

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'
                 }]
             }]
         }];