implemented multiple incoming calls feature

nixonsam · Aug 17, 2018 · b46c6bf · b46c6bf
1 parent 6ef828d
commit b46c6bf
Show file tree

Hide file tree

Showing 8 changed files with 14,059 additions and 29,389 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 node_modules/
+.DS_Store
diff --git a/webApp-plivo/.DS_Store b/webApp-plivo/.DS_Store
diff --git a/webApp-plivo/public/css/notify.css b/webApp-plivo/public/css/notify.css
@@ -0,0 +1,155 @@
+.messg {
+  position: fixed;
+  z-index: 9999;
+  left: 10px;
+  right: 10px;
+  border: 0 none;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  -ms-border-radius: 2px;
+  -o-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 -1px rgba(0,0,0,0.25);
+  -moz-box-shadow: inset 0 -1px rgba(0,0,0,0.25);
+  box-shadow: inset 0 -1px rgba(0,0,0,0.25);
+  font-size: 14px;
+  line-height: 1.4286;
+  text-align: left;
+  cursor: pointer;
+}
+
+@media (min-width: 768px) {
+  .messg {
+    left: 23%;
+    right: 23%;
+  }
+
+  .messg--left {
+    left: 10px !important;
+    right: 45%;
+  }
+
+  .messg--right {
+    left: 45%;
+    right: 10px !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .messg {
+    left: 28%;
+    right: 28%;
+  }
+
+  .messg--left {
+    right: 55%;
+  }
+
+  .messg--right {
+    left: 55%;
+  }
+}
+
+@media (min-width: 1200px) {
+  .messg {
+    left: 33%;
+    right: 33%;
+  }
+
+  .messg--left {
+    right: 65%;
+  }
+
+  .messg--right {
+    left: 65%;
+  }
+}
+
+.messg--default {
+  background-color: #323232;
+}
+
+.messg--success {
+  background-color: #4caf50;
+}
+
+.messg--info {
+  background-color: #00bcd4;
+}
+
+.messg--warning {
+  background-color: #ff9800;
+}
+
+.messg--error {
+  background-color: #f44336;
+}
+
+.messg__text {
+  padding: 10px 14px;
+}
+
+.messg__buttons {
+  float: right;
+  padding: 10px;
+}
+
+.messg,
+.messg__button {
+  color: #f5f5f5;
+  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+}
+
+.messg__button {
+  display: inline-block;
+  border: 0 none;
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  -ms-border-radius: 1px;
+  -o-border-radius: 1px;
+  border-radius: 1px;
+  margin: 0 0 0 5px;
+  padding: 0 6px;
+  background: none;
+  cursor: pointer;
+}
+
+.messg--default .messg__button {
+  background-color: #212121;
+}
+
+.messg--default .messg__button:hover {
+  background-color: #000;
+}
+
+.messg--success .messg__button {
+  background-color: #43a047;
+}
+
+.messg--success .messg__button:hover {
+  background-color: #388e3c;
+}
+
+.messg--info .messg__button {
+  background-color: #00acc1;
+}
+
+.messg--info .messg__button:hover {
+  background-color: #0097a7;
+}
+
+.messg--warning .messg__button {
+  background-color: #fb8c00;
+}
+
+.messg--warning .messg__button:hover {
+  background-color: #f57c00;
+}
+
+.messg--error .messg__button {
+  background-color: #e53935;
+}
+
+.messg--error .messg__button:hover {
+  background-color: #d32f2f;
+}
diff --git a/webApp-plivo/public/js/customclient.js b/webApp-plivo/public/js/customclient.js
@@ -2,6 +2,8 @@ var audioChunks,rec, audioGraph, audioStreamContext, uioptions,
 localStorage = window.localStorage;
 var callStorage = {}, timer = "00:00:00";
 
+const incomingNotifications = new Map();
+
 String.prototype.calltimer = function () {
     var sec_num = parseInt(this, 10);
     var hours   = Math.floor(sec_num / 3600);
@@ -142,12 +144,27 @@ function onCallRemoteRinging(){
 	$('#callstatus').html('Ringing...');
 	console.info('onCallRemoteRinging');
 }
-function onCallAnswered(){
+function onCallAnswered(callInfo){
 	console.info('onCallAnswered');
 	$('#callstatus').html('Answered');
 	$('.hangup').show();
+  $('#makecall').hide();
+  if (callInfo && callInfo.direction === 'incoming') {
+    $('.inboundBeforeAnswer').hide();
+    $('.AfterAnswer').show();
+    $('#boundType').html('Inbound :');
+    $('#callNum').html(callInfo.from);
+    $('#callDuration').html('00:00:00');
+    $('.callinfo').show();
+    if (incomingNotifications.has(callInfo.callUUID)) {
+      const incomingCall = incomingNotifications.get(callInfo.callUUID)
+      incomingCall.hide();
+      incomingNotifications.delete(callInfo.callUUID);
+    }
+  }
 	// plivoWebSdk.client.logout();
 	timer = 0;
+  if (window.calltimer) clearInterval(window.calltimer);
 	window.calltimer = setInterval(function(){
 		timer = timer +1;
 		$('#callDuration').html(timer.toString().calltimer());
@@ -162,24 +179,36 @@ function onCallAnswered(){
 	recAudioFun(pcObj);
 
 }
-function onCallTerminated(evt){
+function onCallTerminated(evt, callInfo){
 	$('#callstatus').html('Call Ended');
-	console.info('onCallTerminated');
+	console.info(`onCallTerminated ${evt}`);
 	if(sessionStorage.getItem('triggerFB')){
 		clearStars();
 		$('#clickFeedback').trigger('click');
 		// clear at end of every call
 		sessionStorage.removeItem('triggerFB');
 	}
-	callOff(evt);
+  if (callInfo.callUUID === plivoWebSdk.client.getCallUUID()) {
+    callOff(evt);
+  }
+
 }
-function onCallFailed(reason){
-	$('#callstatus').html('call failed');
-	console.info('onCallFailed',reason);
+function onCallFailed(reason, callInfo){
+	console.info(`onCallFailed ${reason} ${callInfo.callUUID} ${callInfo.direction}`);
 	if(reason && /Denied Media/i.test(reason)){
+    $('#callstatus').html('call failed');
 		$('#mediaAccessBlock').modal('show');
 	};
-	callOff(reason);
+  if (incomingNotifications.has(callInfo.callUUID)) {
+    const incomingCall = incomingNotifications.get(callInfo.callUUID)
+    incomingCall.hide();
+    incomingNotifications.delete(callInfo.callUUID);
+  }
+  if (incomingNotifications.size === 0  && !plivoWebSdk.client.getCallUUID()) {
+    callOff();
+  } else if (incomingNotifications.size === 0 && callInfo.direction === 'outgoing') {
+    callOff();
+  }
 }
 function onMediaPermission(evt){
 	console.info('onMediaPermission',evt);
@@ -192,23 +221,42 @@ function onMediaPermission(evt){
 		audioGraph && audioGraph.start(window.localStream);
 	}
 }
-function onIncomingCall(callerName, extraHeaders){
+function onIncomingCall(callerName, extraHeaders, callInfo){
 
 	console.info('onIncomingCall : ', callerName, extraHeaders);
 	callStorage.startTime = date();
 	callStorage.mode = 'in';
 	callStorage.num = callerName;
-	$('#boundType').html('Incomming :');
-	$('#callNum').html(callerName);
-	$('#callDuration').html('00:00:00');
-	$('.callinfo').show();
-	$('.callScreen').show();
-	$('.inboundBeforeAnswer').show();
+	// $('.callScreen').show();
+	// $('.inboundBeforeAnswer').show();
+
 	$('#makecall').hide();
+  const incomingNotification = Notify.success(`Incoming Call: ${callerName}`)
+    .button('Answer', () => {
+      console.info('Call accept clicked');
+    	plivoWebSdk.client.answer(callInfo.callUUID);
+    })
+    .button('Reject', () => {
+      const incomingCall = incomingNotifications.get(callInfo.callUUID);
+      plivoWebSdk.client.reject(callInfo.callUUID);
+    })
+    .button('Ignore', () => {
+      plivoWebSdk.client.ignore(callInfo.callUUID);
+    });
+
+  incomingNotifications.set(callInfo.callUUID, incomingNotification);
 }
-function onIncomingCallCanceled(){
+
+function onIncomingCallCanceled(callInfo){
 	console.info('onIncomingCallCanceled');
-	callOff();
+  const incomingCall = incomingNotifications.get(callInfo.callUUID);
+  if (incomingCall) {
+    incomingCall.hide();
+    incomingNotifications.delete(callInfo.callUUID);
+  }
+  if (incomingNotifications.size === 0 && !plivoWebSdk.client.getCallUUID()) {
+    callOff();
+  }
 }
 
 function callOff(reason){
@@ -263,7 +311,8 @@ function resetSettings(source){
 		},
 		"dscp":true,
 		"enableTracking":true,
-		"dialType":"conference"
+		"dialType":"conference",
+    "allowMultipleIncomingCalls": true
 	};
 	var uiSettings = document.querySelector('#appSettings');
 	uiSettings.value = JSON.stringify(defaultSettings);
@@ -878,6 +927,7 @@ function initPhone(username, password){
 	plivoWebSdk.client.on('onTokenEvent', onLoginFailed);
 	plivoWebSdk.client.on('onCallRemoteRinging', onCallRemoteRinging);
 	plivoWebSdk.client.on('onIncomingCallCanceled', onIncomingCallCanceled);
+  plivoWebSdk.client.on('onIncomingCallIgnored', onIncomingCallCanceled);
 	plivoWebSdk.client.on('onCallFailed', onCallFailed);
 	plivoWebSdk.client.on('onCallAnswered', onCallAnswered);
 	plivoWebSdk.client.on('onCallTerminated', onCallTerminated);