Fix display bug, add event listeners to calls (#24)

Author: bld010

public/index.html

@@ -32,7 +32,7 @@ <h2 class="instructions">Make a Call</h2>
             <input id="phone-number" type="text" placeholder="+15552221234" />
             <button id="button-call" type="submit">Call</button>
           </form>
-          <button id="button-hangup" class="hide">Hang Up</button>
+          <button id="button-hangup-outgoing" class="hide">Hang Up</button>
           <div id="incoming-call" class="hide">
             <h2>Incoming Call Controls</h2>
             <p class="instructions">

public/quickstart.js

@@ -5,7 +5,7 @@
   const inputVolumeBar = document.getElementById("input-volume");
   const volumeIndicators = document.getElementById("volume-indicators");
   const callButton = document.getElementById("button-call");
-  const hangupButton = document.getElementById("button-hangup");
+  const outgoingCallHangupButton = document.getElementById("button-hangup-outgoing");
   const callControlsDiv = document.getElementById("call-controls");
   const audioSelectionDiv = document.getElementById("output-selection");
   const getAudioDevicesButton = document.getElementById("get-devices");
@@ -36,7 +36,7 @@
   getAudioDevicesButton.onclick = getAudioDevices;
   speakerDevices.addEventListener("change", updateOutputDevice);
   ringtoneDevices.addEventListener("change", updateRingtoneDevice);
-  hangupButton.onclick = hangup;
+  
 
   // SETUP STEP 1:
   // Browser client should be started after a user gesture
@@ -116,37 +116,36 @@
 
       // add listeners to the Call
       // "accepted" means the call has finished connecting and the state is now "open"
-      call.addListener("accept", updateUIAcceptedCall);
-      call.addListener("disconnect", updateUIDisconnectedCall);
+      call.on("accept", updateUIAcceptedOutgoingCall);
+      call.on("disconnect", updateUIDisconnectedOutgoingCall);
+      call.on("cancel", updateUIDisconnectedOutgoingCall);
+      call.on("reject", updateUIDisconnectedOutgoingCall);
+
+      outgoingCallHangupButton.onclick = () => {
+        log("Hanging up ...");
+        call.disconnect();
+      };
+
     } else {
       log("Unable to make call.");
     }
   }
 
-  function updateUIAcceptedCall(call) {
+  function updateUIAcceptedOutgoingCall(call) {
     log("Call in progress ...");
     callButton.disabled = true;
-    hangupButton.classList.remove("hide");
+    outgoingCallHangupButton.classList.remove("hide");
     volumeIndicators.classList.remove("hide");
     bindVolumeIndicators(call);
   }
 
-  function updateUIDisconnectedCall() {
+  function updateUIDisconnectedOutgoingCall() {
     log("Call disconnected.");
     callButton.disabled = false;
-    hangupButton.classList.add("hide");
+    outgoingCallHangupButton.classList.add("hide");
     volumeIndicators.classList.add("hide");
   }
 
-  // HANG UP A CALL
-
-  function hangup() {
-    log("Hanging up ...");
-    if (device) {
-      device.disconnectAll();
-    }
-  }
-
   // HANDLE INCOMING CALL
 
   function handleIncomingCall(call) {
@@ -170,7 +169,9 @@
     };
 
     // add event listener to call object
-    call.addListener("cancel", handleDisconnectedIncomingCall);
+    call.on("cancel", handleDisconnectedIncomingCall);
+    call.on("disconnect", handleDisconnectedIncomingCall);
+    call.on("reject", handleDisconnectedIncomingCall);
   }
 
   // ACCEPT INCOMING CALL
@@ -189,23 +190,21 @@
 
   function rejectIncomingCall(call) {
     call.reject();
-
     log("Rejected incoming call");
     resetIncomingCallUI();
   }
 
   // HANG UP INCOMING CALL
 
-  function hangupIncomingCall() {
-    hangup();
-
+  function hangupIncomingCall(call) {
+    call.disconnect();
+    log("Hanging up incoming call");
     resetIncomingCallUI();
   }
 
   // HANDLE CANCELLED INCOMING CALL
 
-  function handleDisconnectedIncomingCall(call) {
-    device.disconnectAll();
+  function handleDisconnectedIncomingCall() {
     log("Incoming call ended.");
     resetIncomingCallUI();
   }
@@ -225,6 +224,9 @@
 
   function resetIncomingCallUI() {
     incomingPhoneNumberEl.innerHTML = "";
+    incomingCallAcceptButton.classList.remove("hide");
+    incomingCallRejectButton.classList.remove("hide");
+    incomingCallHangupButton.classList.add("hide");
     incomingCallDiv.classList.add("hide");
   }
 

src/handler.js

@@ -31,14 +31,13 @@ exports.tokenGenerator = function tokenGenerator() {
 
 exports.voiceResponse = function voiceResponse(requestBody) {
   const toNumberOrClientName = requestBody.To;
-
+  const callerId = config.callerId;
   let twiml = new VoiceResponse();
 
   // If the request to the /voice endpoint is TO your Twilio Number, 
   // then it is an incoming call towards your Twilio.Device.
-  if (requestBody.To == config.callerId) {
-    
-    dial = twiml.dial();
+  if (toNumberOrClientName == callerId) {
+    let dial = twiml.dial();
 
     // This will connect the caller with your Twilio.Device/client 
     dial.client(identity);
@@ -47,7 +46,7 @@ exports.voiceResponse = function voiceResponse(requestBody) {
     // This is an outgoing call
 
     // set the callerId
-    dial = twiml.dial({ callerId: config.callerId });
+    let dial = twiml.dial({ callerId });
 
     // Check if the 'To' parameter is a Phone Number or Client Name
     // in order to use the appropriate TwiML noun