mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve calling experience

Browse Source
This commit is contained in:
m5r
2021-09-01 06:42:15 +08:00
parent dee1bc4697
commit b4f06e5471
3 changed files with 94 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
app/phone-calls/hooks/use-device.tsx Normal file
View File

@ -0,0 +1,66 @@
import { useEffect } from "react";
import { useMutation } from "blitz";
import type { TwilioError } from "@twilio/voice-sdk";
import { Call, Device } from "@twilio/voice-sdk";
import { atom, useAtom } from "jotai";
import getToken from "../mutations/get-token";
export default function useDevice() {
const [device, setDevice] = useAtom(deviceAtom);
const [getTokenMutation] = useMutation(getToken);
useEffect(() => {
(async () => {
const token = await getTokenMutation();
const device = new Device(token, {
codecPreferences: [Call.Codec.Opus, Call.Codec.PCMU],
sounds: {
[Device.SoundName.Disconnect]: undefined, // TODO
},
});
device.register();
setDevice(device);
})();
}, [getTokenMutation]);
useEffect(() => {
if (!device) {
return;
}
(window as any).device = device;
device.on("error", onDeviceError);
device.on("incoming", onDeviceIncoming);
return () => {
device.off("error", onDeviceError);
device.off("incoming", onDeviceIncoming);
};
}, [device]);
return device;
function onDeviceError(error: TwilioError.TwilioError, call?: Call) {
// TODO gracefully handle errors: possibly hang up the call, redirect to keypad
console.error("device error", error);
alert(error);
}
function onDeviceIncoming(call: Call) {
// TODO show alert to accept/reject the incoming call /!\ it should persist between screens /!\ prevent making a new call when there is a pending incoming call
console.log("call", call);
console.log("Incoming connection from " + call.parameters.From);
let archEnemyPhoneNumber = "+12093373517";
if (call.parameters.From === archEnemyPhoneNumber) {
call.reject();
console.log("It's your nemesis. Rejected call.");
} else {
// accept the incoming connection and start two-way audio
call.accept();
}
}
}
const deviceAtom = atom<Device | null>(null);

87
app/phone-calls/hooks/use-make-call.ts
View File

@ -1,8 +1,8 @@
import { useEffect, useState } from "react";
import { useMutation } from "blitz";
import { Call, Device, TwilioError } from "@twilio/voice-sdk";
import { useState } from "react";
import { useRouter, Routes } from "blitz";
import { Call } from "@twilio/voice-sdk";
import getToken from "../mutations/get-token";
import useDevice from "./use-device";
type Params = {
recipient: string;
@ -11,39 +11,9 @@ type Params = {
export default function useMakeCall({ recipient, onHangUp }: Params) {
const [outgoingConnection, setOutgoingConnection] = useState<Call | null>(null);
const [device, setDevice] = useState<Device | null>(null);
const [getTokenMutation] = useMutation(getToken);
const [state, setState] = useState<State>("initial");
useEffect(() => {
(async () => {
const token = await getTokenMutation();
const device = new Device(token, {
codecPreferences: [Call.Codec.Opus, Call.Codec.PCMU],
sounds: {
[Device.SoundName.Disconnect]: undefined, // TODO
},
});
device.register();
setDevice(device);
})();
}, [getTokenMutation]);
useEffect(() => {
if (!device) {
return;
}
device.on("error", onDeviceError);
device.on("registered", onDeviceRegistered);
device.on("incoming", onDeviceIncoming);
return () => {
device.off("error", onDeviceError);
device.off("registered", onDeviceRegistered);
device.off("incoming", onDeviceIncoming);
};
}, [device]);
const device = useDevice();
const router = useRouter();
return {
makeCall,
@ -58,8 +28,7 @@ export default function useMakeCall({ recipient, onHangUp }: Params) {
return;
}
if (state !== "ready") {
console.error("not a good time", state);
if (state !== "initial") {
return;
}
@ -74,48 +43,34 @@ export default function useMakeCall({ recipient, onHangUp }: Params) {
// TODO: setState("call_in_progress");
// TODO: remove event listeners
outgoingConnection.on("cancel", () => setState("call_ended"));
outgoingConnection.on("disconnect", () => setState("call_ending"));
outgoingConnection.on("cancel", endCall);
outgoingConnection.on("disconnect", endCall);
outgoingConnection.on("error", (error) => {
console.error("call error", error);
alert(error);
});
}
function endCall() {
setState("call_ending");
setTimeout(() => {
setState("call_ended");
setTimeout(() => router.replace(Routes.KeypadPage()), 100);
}, 150);
}
function sendDigits(digits: string) {
return outgoingConnection?.sendDigits(digits);
}
function hangUp() {
setState("call_ending");
outgoingConnection?.reject();
outgoingConnection?.disconnect();
device?.disconnectAll();
device?.destroy();
onHangUp?.();
}
function onDeviceError(error: TwilioError.TwilioError, call?: Call) {
console.error("device error", error);
alert(error);
}
function onDeviceRegistered() {
setState("ready");
}
function onDeviceIncoming(call: Call) {
// TODO
console.log("call", call);
console.log("Incoming connection from " + call.parameters.From);
let archEnemyPhoneNumber = "+12093373517";
if (call.parameters.From === archEnemyPhoneNumber) {
call.reject();
console.log("It's your nemesis. Rejected call.");
} else {
// accept the incoming connection and start two-way audio
call.accept();
}
router.replace(Routes.KeypadPage());
outgoingConnection?.off("cancel", endCall);
outgoingConnection?.off("disconnect", endCall);
}
}