Skip to content
This repository was archived by the owner on May 13, 2025. It is now read-only.

Commit ed203b4

Browse files
committed
Fix display bug with incoming calls ending
1 parent 88833c3 commit ed203b4

File tree

4 files changed

+34
-32
lines changed

4 files changed

+34
-32
lines changed

app.py

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,15 +66,15 @@ def voice():
6666
# Route to the most recently created client based on the identity stored in the session
6767
dial.client(IDENTITY["identity"])
6868
resp.append(dial)
69-
elif request.form.get("phone"):
69+
elif request.form.get("To"):
7070
# Placing an outbound call from the Twilio client
7171
dial = Dial(caller_id=twilio_number)
7272
# wrap the phone number or client name in the appropriate TwiML verb
7373
# by checking if the number given has only digits and format symbols
74-
if phone_pattern.match(request.form["phone"]):
75-
dial.number(request.form["phone"])
74+
if phone_pattern.match(request.form["To"]):
75+
dial.number(request.form["To"])
7676
else:
77-
dial.client(request.form["phone"])
77+
dial.client(request.form["To"])
7878
resp.append(dial)
7979
else:
8080
resp.say("Thanks for calling!")

static/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ <h2 class="instructions">Make a Call</h2>
3232
<input id="phone-number" type="text" placeholder="+15552221234" />
3333
<button id="button-call" type="submit">Call</button>
3434
</form>
35-
<button id="button-hangup" class="hide">Hang Up</button>
35+
<button id="button-hangup-outgoing" class="hide">Hang Up</button>
3636
<div id="incoming-call" class="hide">
3737
<h2>Incoming Call Controls</h2>
3838
<p class="instructions">

static/quickstart.js

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
const inputVolumeBar = document.getElementById("input-volume");
66
const volumeIndicators = document.getElementById("volume-indicators");
77
const callButton = document.getElementById("button-call");
8-
const hangupButton = document.getElementById("button-hangup");
8+
const outgoingCallHangupButton = document.getElementById("button-hangup-outgoing");
99
const callControlsDiv = document.getElementById("call-controls");
1010
const audioSelectionDiv = document.getElementById("output-selection");
1111
const getAudioDevicesButton = document.getElementById("get-devices");
@@ -36,7 +36,7 @@
3636
getAudioDevicesButton.onclick = getAudioDevices;
3737
speakerDevices.addEventListener("change", updateOutputDevice);
3838
ringtoneDevices.addEventListener("change", updateRingtoneDevice);
39-
hangupButton.onclick = hangup;
39+
4040

4141
// SETUP STEP 1:
4242
// Browser client should be started after a user gesture
@@ -105,48 +105,47 @@
105105
async function makeOutgoingCall() {
106106
var params = {
107107
// get the phone number to call from the DOM
108-
phone: phoneNumberInput.value,
108+
To: phoneNumberInput.value,
109109
};
110110

111111
if (device) {
112-
log(`Attempting to call ${params.phone} ...`);
112+
log(`Attempting to call ${params.To} ...`);
113113

114114
// Twilio.Device.connect() returns a Call object
115115
const call = await device.connect({ params });
116116

117117
// add listeners to the Call
118118
// "accepted" means the call has finished connecting and the state is now "open"
119-
call.addListener("accept", updateUIAcceptedCall);
120-
call.addListener("disconnect", updateUIDisconnectedCall);
119+
call.on("accept", updateUIAcceptedOutgoingCall);
120+
call.on("disconnect", updateUIDisconnectedOutgoingCall);
121+
call.on("cancel", updateUIDisconnectedOutgoingCall);
122+
call.on("reject", updateUIDisconnectedOutgoingCall);
123+
124+
outgoingCallHangupButton.onclick = () => {
125+
log("Hanging up ...");
126+
call.disconnect();
127+
};
128+
121129
} else {
122130
log("Unable to make call.");
123131
}
124132
}
125133

126-
function updateUIAcceptedCall(call) {
134+
function updateUIAcceptedOutgoingCall(call) {
127135
log("Call in progress ...");
128136
callButton.disabled = true;
129-
hangupButton.classList.remove("hide");
137+
outgoingCallHangupButton.classList.remove("hide");
130138
volumeIndicators.classList.remove("hide");
131139
bindVolumeIndicators(call);
132140
}
133141

134-
function updateUIDisconnectedCall() {
142+
function updateUIDisconnectedOutgoingCall() {
135143
log("Call disconnected.");
136144
callButton.disabled = false;
137-
hangupButton.classList.add("hide");
145+
outgoingCallHangupButton.classList.add("hide");
138146
volumeIndicators.classList.add("hide");
139147
}
140148

141-
// HANG UP A CALL
142-
143-
function hangup() {
144-
log("Hanging up ...");
145-
if (device) {
146-
device.disconnectAll();
147-
}
148-
}
149-
150149
// HANDLE INCOMING CALL
151150

152151
function handleIncomingCall(call) {
@@ -170,7 +169,9 @@
170169
};
171170

172171
// add event listener to call object
173-
call.addListener("cancel", handleDisconnectedIncomingCall);
172+
call.on("cancel", handleDisconnectedIncomingCall);
173+
call.on("disconnect", handleDisconnectedIncomingCall);
174+
call.on("reject", handleDisconnectedIncomingCall);
174175
}
175176

176177
// ACCEPT INCOMING CALL
@@ -189,24 +190,21 @@
189190

190191
function rejectIncomingCall(call) {
191192
call.reject();
192-
193193
log("Rejected incoming call");
194194
resetIncomingCallUI();
195195
}
196196

197197
// HANG UP INCOMING CALL
198198

199-
function hangupIncomingCall() {
200-
hangup();
201-
199+
function hangupIncomingCall(call) {
200+
call.disconnect();
201+
log("Hanging up incoming call");
202202
resetIncomingCallUI();
203203
}
204204

205205
// HANDLE CANCELLED INCOMING CALL
206206

207-
function handleDisconnectedIncomingCall(call) {
208-
device.disconnectAll();
209-
console.log("handledisconnected : ", call);
207+
function handleDisconnectedIncomingCall() {
210208
log("Incoming call ended.");
211209
resetIncomingCallUI();
212210
}
@@ -226,6 +224,9 @@
226224

227225
function resetIncomingCallUI() {
228226
incomingPhoneNumberEl.innerHTML = "";
227+
incomingCallAcceptButton.classList.remove("hide");
228+
incomingCallRejectButton.classList.remove("hide");
229+
incomingCallHangupButton.classList.add("hide");
229230
incomingCallDiv.classList.add("hide");
230231
}
231232

static/twilio.min.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)