Merge pull request #6 from TwilioDevEd/incoming-call-display-bug

Incoming call display bug

Author: bld010

README.md

@@ -20,7 +20,7 @@ Implementations in other languages:
 
 | .NET | Java | Node | PHP | Ruby |
 | :--- | :--- | :----- | :-- | :--- |
-| [In progress] | [Done](https://github.com/TwilioDevEd/voice-javascript-sdk-quickstart-java)  | [Done](https://github.com/TwilioDevEd/voice-javascript-sdk-quickstart-node)  | [Done](https://github.com/TwilioDevEd/voice-javascript-sdk-quickstart-php) | [Done](https://github.com/TwilioDevEd/voice-javascript-sdk-quickstart-ruby)  |
+| [Done](https://github.com/TwilioDevEd/voice-javascript-sdk-quickstart-csharp) | [Done](https://github.com/TwilioDevEd/voice-javascript-sdk-quickstart-java)  | [Done](https://github.com/TwilioDevEd/voice-javascript-sdk-quickstart-node)  | [Done](https://github.com/TwilioDevEd/voice-javascript-sdk-quickstart-php) | [Done](https://github.com/TwilioDevEd/voice-javascript-sdk-quickstart-ruby)  |
 
 ## Set Up
 

app.py

@@ -66,15 +66,15 @@ def voice():
         # Route to the most recently created client based on the identity stored in the session
         dial.client(IDENTITY["identity"])
         resp.append(dial)
-    elif request.form.get("phone"):
+    elif request.form.get("To"):
         # Placing an outbound call from the Twilio client
         dial = Dial(caller_id=twilio_number)
         # wrap the phone number or client name in the appropriate TwiML verb
         # by checking if the number given has only digits and format symbols
-        if phone_pattern.match(request.form["phone"]):
-            dial.number(request.form["phone"])
+        if phone_pattern.match(request.form["To"]):
+            dial.number(request.form["To"])
         else:
-            dial.client(request.form["phone"])
+            dial.client(request.form["To"])
         resp.append(dial)
     else:
         resp.say("Thanks for calling!")

static/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">

static/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,8 +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
   // to avoid errors in the browser console re: AudioContext
@@ -105,48 +104,47 @@
   async function makeOutgoingCall() {
     var params = {
       // get the phone number to call from the DOM
-      phone: phoneNumberInput.value,
+      To: phoneNumberInput.value,
     };
 
     if (device) {
-      log(`Attempting to call ${params.phone} ...`);
+      log(`Attempting to call ${params.To} ...`);
 
       // Twilio.Device.connect() returns a Call object
       const call = await device.connect({ params });
 
       // 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 +168,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,24 +189,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();
-    console.log("handledisconnected : ", call);
+  function handleDisconnectedIncomingCall() {
     log("Incoming call ended.");
     resetIncomingCallUI();
   }
@@ -226,6 +223,9 @@
 
   function resetIncomingCallUI() {
     incomingPhoneNumberEl.innerHTML = "";
+    incomingCallAcceptButton.classList.remove("hide");
+    incomingCallRejectButton.classList.remove("hide");
+    incomingCallHangupButton.classList.add("hide");
     incomingCallDiv.classList.add("hide");
   }
 

static/site.css

@@ -59,7 +59,7 @@ main {
 }
 
 select {
-  width: 300px;
+  width: 250px;
   height: 60px;
   margin-bottom: 10px;
 }