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

memoize hook functions and wrap up outgoing calls

Browse Source
This commit is contained in:
m5r
2021-09-05 00:29:25 +08:00
parent d5185fa183
commit 3433a90258
4 changed files with 106 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
app/phone-calls/hooks/use-device.tsx
View File

@ -1,16 +1,16 @@
import { useCallback, useEffect, useMemo } from "react";
import { useCallback, useEffect, useState } 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, { ttl } from "../mutations/get-token";
import getToken from "../mutations/get-token";
import appLogger from "../../../integrations/logger";
const logger = appLogger.child({ module: "use-device" });
export default function useDevice() {
const [device, setDevice] = useAtom(deviceAtom);
const [device, setDevice] = useState<Device | null>(null);
const [isDeviceReady, setIsDeviceReady] = useState(() => device?.state === Device.State.Registered);
const [getTokenMutation] = useMutation(getToken);
const refreshToken = useCallback(async () => {
if (!device) {
@ -21,16 +21,13 @@ export default function useDevice() {
const token = await getTokenMutation();
device.updateToken(token);
}, [device, getTokenMutation]);
const isDeviceReady = useMemo(() => device?.state === Device.State.Registered, [device]);
useEffect(() => {
if (!isDeviceReady) {
return;
}
const intervalId = setInterval(refreshToken, (ttl - 30) * 1000);
const intervalId = setInterval(() => {
return refreshToken();
}, (3600 - 30) * 1000);
return () => clearInterval(intervalId);
}, [isDeviceReady, refreshToken]);
}, [refreshToken]);
useEffect(() => {
(async () => {
@ -51,31 +48,39 @@ export default function useDevice() {
return;
}
console.log("ok");
// @ts-ignore
window.device = device;
device.on("registered", onDeviceRegistered);
device.on("unregistered", onDeviceUnregistered);
device.on("error", onDeviceError);
device.on("incoming", onDeviceIncoming);
return () => {
device.off("registered", onDeviceRegistered);
device.off("unregistered", onDeviceUnregistered);
device.off("error", onDeviceError);
device.off("incoming", onDeviceIncoming);
};
}, [device]);
// @ts-ignore
window.refreshToken = refreshToken;
return {
device,
isDeviceReady,
refreshToken,
};
function onDeviceRegistered() {
setIsDeviceReady(true);
}
function onDeviceUnregistered() {
setIsDeviceReady(false);
}
function onDeviceError(error: TwilioError.TwilioError, call?: Call) {
// TODO gracefully handle errors: possibly hang up the call, redirect to keypad
console.error("device error", JSON.parse(JSON.stringify(error)));
alert(error.code);
// we might have to change this if we instantiate the device on every page to receive calls
setDevice(() => {
// hack to trigger the error boundary
throw error;
});
}
function onDeviceIncoming(call: Call) {
@ -94,8 +99,6 @@ export default function useDevice() {
}
}
const deviceAtom = atom<Device | null>(null);
let e = {
message:
"ConnectionError (53000): Raised whenever a signaling connection error occurs that is not covered by a more specific error code.",

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

@ -1,9 +1,13 @@
import { useState } from "react";
import { useCallback, useState } from "react";
import { useRouter, Routes } from "blitz";
import { Call } from "@twilio/voice-sdk";
import useDevice from "./use-device";
import appLogger from "../../../integrations/logger";
const logger = appLogger.child({ module: "use-make-call" });
type Params = {
recipient: string;
onHangUp?: () => void;
@ -15,69 +19,85 @@ export default function useMakeCall({ recipient, onHangUp }: Params) {
const { device, isDeviceReady } = useDevice();
const router = useRouter();
const endCall = useCallback(
function endCall() {
outgoingConnection?.off("cancel", endCall);
outgoingConnection?.off("disconnect", endCall);
outgoingConnection?.disconnect();
setState("call_ending");
setTimeout(() => {
setState("call_ended");
setTimeout(() => router.replace(Routes.KeypadPage()), 100);
}, 150);
},
[outgoingConnection, router],
);
const makeCall = useCallback(
async function makeCall() {
if (!device || !isDeviceReady) {
logger.warn("device is not ready yet, can't make the call");
return;
}
if (state !== "initial") {
return;
}
if (device.isBusy) {
logger.error("device is busy, this shouldn't happen");
return;
}
setState("calling");
const params = { To: recipient };
const outgoingConnection = await device.connect({ params });
setOutgoingConnection(outgoingConnection);
outgoingConnection.on("error", (error) => {
outgoingConnection.off("cancel", endCall);
outgoingConnection.off("disconnect", endCall);
setState(() => {
// hack to trigger the error boundary
throw error;
});
});
outgoingConnection.once("accept", (call: Call) => setState("call_in_progress"));
outgoingConnection.on("cancel", endCall);
outgoingConnection.on("disconnect", endCall);
},
[device, isDeviceReady, recipient, state],
);
const sendDigits = useCallback(
function sendDigits(digits: string) {
return outgoingConnection?.sendDigits(digits);
},
[outgoingConnection],
);
const hangUp = useCallback(
function hangUp() {
setState("call_ending");
outgoingConnection?.disconnect();
device?.disconnectAll();
device?.destroy();
onHangUp?.();
router.replace(Routes.KeypadPage());
outgoingConnection?.off("cancel", endCall);
outgoingConnection?.off("disconnect", endCall);
},
[device, endCall, onHangUp, outgoingConnection, router],
);
return {
makeCall,
sendDigits,
hangUp,
state,
};
async function makeCall() {
if (!device || !isDeviceReady) {
console.error("device is not ready yet, can't make the call");
return;
}
if (state !== "initial") {
return;
}
setState("calling");
const params = { To: recipient };
const outgoingConnection = await device.connect({ params });
setOutgoingConnection(outgoingConnection);
// @ts-ignore
window.ddd = outgoingConnection;
outgoingConnection.on("error", (error) => {
outgoingConnection.off("cancel", endCall);
outgoingConnection.off("disconnect", endCall);
setState(() => {
// hack to trigger the error boundary
throw error;
});
});
outgoingConnection.once("accept", (call: Call) => setState("call_in_progress"));
outgoingConnection.on("cancel", endCall);
outgoingConnection.on("disconnect", endCall);
}
function endCall() {
outgoingConnection?.off("cancel", endCall);
outgoingConnection?.off("disconnect", endCall);
outgoingConnection?.disconnect();
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?.disconnect();
device?.disconnectAll();
onHangUp?.();
router.replace(Routes.KeypadPage());
outgoingConnection?.off("cancel", endCall);
outgoingConnection?.off("disconnect", endCall);
}
}
type State = "initial" | "ready" | "calling" | "call_in_progress" | "call_ending" | "call_ended";