Voice Javascript SDK: using device.updateOptions() to change incoming sound to emulate a call waiting notification - twilio

Question

Trying to implement simple call waiting with a different incoming sound for any calls that come in while the device is already on an active call.
Upon the answer event we are using device.updateOptions() to update the sound, and the same to revert it back on the disconnect event.
Out of the box we would get the standard incoming sound for that second call. But using the below we do not get any sound on the 2nd incoming call while there is an active call. I'm not sure what we are missing or if there is a better approach.
const appReducer = (state, action) => {
switch (action.type) {
case SET_DEVICE:
return {
...state,
device: action.payload,
};
case SET_ADMIN_DETAIL:
return {
...state,
adminDetail: action.payload,
};
case SET_INCOMING_CALL: {
// when incoming calls set to null (or after calls end)
if (!action.payload.call) {
/** if two calls in progress we need to check which one we have set to null so compare the outboundConnectionId ids with
saved incoming call **/
if (state.incomingCall && state.incomingCall.outboundConnectionId === action.payload.prevStatusCall.outboundConnectionId) {
return {
...state,
incomingCall: null,
};
} else if (state.secondIncomingCall && state.secondIncomingCall.outboundConnectionId === action.payload.prevStatusCall.outboundConnectionId) {
/** if two calls in progress we need to check which one we have set to null so compare the outboundConnectionId ids with
saved second incoming call **/
return {
...state,
secondIncomingCall: null,
};
}
}
// when incoming calls intialized or accept
else {
/** if there is not any call (incomingCall, enqueuedCall, outgoingCall, secondIncomingCall) saved in our state
then treated as first call or update if first call outboundConnectionId is equal to call passed in params **/
if (
(!state.incomingCall && !state.enqueuedCall && !state.outgoingCall && !state.secondIncomingCall) ||
(state.incomingCall && action.payload.call.outboundConnectionId === state.incomingCall.outboundConnectionId)
) {
if (action.payload.event === "accept") {
console.log("First Call Accepted>>>>>>>>>>>>>>>>>>>>>");
state.device.updateOptions({
sounds: {
incoming: "https://method-platform.s3.us-east-1.amazonaws.com/phone-configuration/audios/Short%20Marimba%20Notification%20Ding.mp3",
disconnect: "https://method-platform.s3.us-east-1.amazonaws.com/phone-configuration/audios/call%20connect.mp3",
outgoing: "https://method-platform.s3.us-east-1.amazonaws.com/phone-configuration/audios/call%20disconnect.mp3",
},
});
}
return {
...state,
incomingCall: action.payload.call,
};
} else {
/** if we cancel/end the first call then we treate the second call as first **/
if (!state.incomingCall) {
return {
...state,
incomingCall: action.payload.call,
secondIncomingCall: null,
};
} else {
/** else save the call obj in second call and use for the UI **/
return {
...state,
secondIncomingCall: action.payload.call,
};
}
}
}
// return {
// ...state,
// incomingCall: action.payload.call,
// };
}
case SET_MISSED_CALL_FLAG:
return {
...state,
missedCallFlag: action.payload,
};
case SET_OUT_GOING_CALL: {
if (action.payload.event === "accept") {
console.log("First Call Accepted>>>>>>>>>>>>>>>>>>>>>");
state.device.updateOptions({
sounds: {
incoming: "https://method-platform.s3.us-east-1.amazonaws.com/phone-configuration/audios/Short%20Marimba%20Notification%20Ding.mp3",
disconnect: "https://method-platform.s3.us-east-1.amazonaws.com/phone-configuration/audios/call%20connect.mp3",
outgoing: "https://method-platform.s3.us-east-1.amazonaws.com/phone-configuration/audios/call%20disconnect.mp3",
},
});
}
return {
...state,
outgoingCall: action.payload.call,
};
}
case SET_CALL_TIME:
return {
...state,
callTime: action.payload === 0 ? 0 : state.callTime + action.payload,
};
case SET_ACTIVE:
return {
...state,
isActive: action.payload,
};
case SET_DISPLAY_LIVE_CHAT_PANEL:
return {
...state,
displayLiveChatPanel: action.payload,
};
case SET_DISPLAY_ON_CALL_PANEL:
return {
...state,
displayOnCallPanel: action.payload,
};
case SET_MUTE:
return {
...state,
mute: action.payload,
};
case SET_ENQUEUED:
return {
...state,
enqueued: action.payload,
};
case SET_CALL_ENQUEUED:
return {
...state,
enqueuedCall: action.payload,
enqueued: action.payload ? true : false,
};
case SET_OUT_GOING_USER:
return {
...state,
selectedOutgoingUser: action.payload,
};
default:
return state;
}
};
export const AppContext = createContext(initialState);
export const AppContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(appReducer, initialState);
const location = useLocation();
const dispatchFn = useDispatch();
function setAdminDetail(payload) {
dispatch({ type: SET_ADMIN_DETAIL, payload: payload });
}
function setDevice(payload) {
dispatch({ type: SET_DEVICE, payload: payload });
}
function setIncomingCall(payload) {
dispatch({ type: SET_INCOMING_CALL, payload: payload });
}
function setMissedCallFlag(payload) {
dispatch({ type: SET_MISSED_CALL_FLAG, payload: payload });
}
function setOutgoingCall(payload) {
dispatch({ type: SET_OUT_GOING_CALL, payload: payload });
}
function setCallTime(payload) {
dispatch({ type: SET_CALL_TIME, payload: payload });
}
function setIsActive(payload) {
dispatch({ type: SET_ACTIVE, payload: payload });
}
function setDisplayOnCallPanel(payload) {
dispatch({ type: SET_DISPLAY_ON_CALL_PANEL, payload: payload });
}
function setDisplayLiveChatPanel(payload) {
dispatch({ type: SET_DISPLAY_LIVE_CHAT_PANEL, payload: payload });
}
function setMute(payload) {
dispatch({ type: SET_MUTE, payload: payload });
}
function setCallEnqueue(payload) {
dispatch({ type: SET_CALL_ENQUEUED, payload: payload });
}
function setEnqueue(payload) {
dispatch({ type: SET_ENQUEUED, payload: payload });
}
function setSelectedOutgoingUser(payload) {
dispatch({ type: SET_OUT_GOING_USER, payload: payload });
}
const setUpDevice = async (adminDetail) => {
const result = await getData(
`${process.env.REACT_APP_TWILIO_SERVER}token?extension_name=${adminDetail?.twilio_call_extension?.name}&extension_id=${adminDetail?.twilio_call_extension?.id}`
);
const newDevice = new Device(result.token, {
sounds: {
disconnect: "https://method-platform.s3.us-east-1.amazonaws.com/phone-configuration/audios/call%20connect.mp3",
outgoing: "https://method-platform.s3.us-east-1.amazonaws.com/phone-configuration/audios/call%20disconnect.mp3",
},
logLevel: 1,
allowIncomingWhileBusy: true,
});
newDevice.register();
newDevice.on("registered", (twilioError, call) => {
console.log("registered: ", twilioError);
});
newDevice.on("error", (twilioError, call) => {
console.log("An error has occurred: ", twilioError);
});
newDevice.audio.on("", (twilioError, call) => {
console.log("An error has occurred: ", twilioError, call);
});
newDevice.on("incoming", (call) => {
setMissedCallFlag(true);
setDisplayLiveChatPanel(false);
call.on("accept", (call) => {
setIncomingCall({ call, event: "accept" });
setIsActive(true);
});
call.on("cancel", () => {
setDisplayOnCallPanel(false);
setIncomingCall({ call: null, prevStatusCall: call });
setIsActive(false);
setCallTime(0);
dispatch(
getRecentCalls({
id: adminDetail.twilio_call_extension.id,
offset: 0,
})
);
});
call.on("error", (error) => {
console.log("An error has occurred: ", error);
});
call.on("disconnect", (call) => {
setDisplayOnCallPanel(false);
setIncomingCall({ call: null, prevStatusCall: call, event: "disconnect" });
setIsActive(false);
setCallTime(0);
dispatch(
getRecentCalls({
id: adminDetail.twilio_call_extension.id,
offset: 0,
})
);
});
call.on("reject", () => {
setDisplayOnCallPanel(false);
console.log("The call was rejected.");
setIncomingCall({ call: null, prevStatusCall: call });
setIsActive(false);
setCallTime(0);
dispatch(
getRecentCalls({
id: adminDetail.twilio_call_extension.id,
offset: 0,
})
);
});
call.on("reconnected", () => {
console.log("The call has regained connectivity.");
});
setIncomingCall({ call });
});
newDevice.on("tokenWillExpire", async () => {
console.log("acascas");
let updatedToken = await getData(
`${process.env.REACT_APP_TWILIO_SERVER}token?extension_name=${adminDetail?.twilio_call_extension?.name}&extension_id=${adminDetail?.twilio_call_extension?.id}`
);
newDevice.updateToken(updatedToken.token);
setDevice(newDevice);
});
setDevice(newDevice);
};
const setCallOnMute = async () => {
let { incomingCall, outgoingCall, mute } = state;
let muted = !mute;
if (incomingCall) {
incomingCall.mute(muted);
setMute(muted);
} else if (outgoingCall) {
outgoingCall.mute(muted);
setMute(muted);
}
};
const enqueueCall = async (call_id) => {
const result = await getData(`${process.env.REACT_APP_TWILIO_SERVER}enqueue-call/${call_id}`);
if (result.status === 200) {
console.log(result);
setCallEnqueue(result.data);
setEnqueue(true);
return result.data;
} else {
return null;
}
};
const dialNumber = async (number, id, name) => {
let { adminDetail, device } = state;
let From = adminDetail?.twilio_call_extension?.direct_number;
let params = {
To: number,
From: From,
outboundcall: "true",
extension_id: adminDetail?.twilio_call_extension?.id,
createdBy: adminDetail?.id,
};
if (id) {
params.userId = id;
}
if (name) {
params.tempName = name;
}
const call = await device.connect({
params: params,
});
setOutGoingCallState(call);
setDisplayLiveChatPanel(false);
};
const setOutGoingCallState = (call) => {
setOutgoingCall({ call: null });
setIsActive(true);
setMute(false);
setOutgoingCall({ call: call });
call.on("disconnect", (nest_call) => {
setDisplayOnCallPanel(false);
console.log("disconnect");
setOutgoingCall({ call: null });
setIsActive(false);
setMute(false);
setSelectedOutgoingUser(null);
setCallTime(0);
dispatch(
getRecentCalls({
id: state.adminDetail.twilio_call_extension.id,
offset: 0,
})
);
});
call.on("accept", (nest_call) => {
setOutgoingCall({ call: nest_call, event: "accept" });
});
call.on("cancel", (nest_call) => {
setDisplayOnCallPanel(false);
setOutgoingCall({ call: null });
setIsActive(false);
setMute(false);
setSelectedOutgoingUser(null);
setCallTime(0);
});
};
useEffect(() => {
let interval = null;
if (state.isActive) {
interval = setInterval(() => {
setCallTime(1000);
}, 1000);
} else {
clearInterval(interval);
}
return () => {
clearInterval(interval);
};
}, [state.isActive]);
useEffect(() => {
let interval = null;
if (state.isActive) {
interval = setInterval(() => {
setCallTime(1000);
}, 1000);
} else {
clearInterval(interval);
}
return () => {
clearInterval(interval);
};
}, [state.isActive]);
// reset optons when there is no active call
useEffect(() => {
if (state.device && !state.incomingCall && !state.secondIncomingCall && !state.enqueuedCall && !state.outgoingCall) {
console.log("Both Calls Ends >>>>>>>>>>>>>>>>>>>>>");
state.device.updateOptions({
sounds: {
disconnect: "https://method-platform.s3.us-east-1.amazonaws.com/phone-configuration/audios/call%20connect.mp3",
outgoing: "https://method-platform.s3.us-east-1.amazonaws.com/phone-configuration/audios/call%20disconnect.mp3",
},
});
}
},