improve calling experience

app/phone-calls/hooks/use-device.tsx

@@ -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);

app/phone-calls/hooks/use-make-call.ts

@@ -1,8 +1,8 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
-import { useMutation } from "blitz";
+import { useRouter, Routes } from "blitz";
-import { Call, Device, TwilioError } from "@twilio/voice-sdk";
+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");
-
+	const device = useDevice();
-	useEffect(() => {
+	const router = useRouter();
-		(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]);
 
 	return {
 		makeCall,
@@ -58,8 +28,7 @@ export default function useMakeCall({ recipient, onHangUp }: Params) {
 			return;
 		}
 
-		if (state !== "ready") {
+		if (state !== "initial") {
-			console.error("not a good time", state);
 			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("cancel", endCall);
-		outgoingConnection.on("disconnect", () => setState("call_ending"));
+		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?.();
-	}
+		router.replace(Routes.KeypadPage());
-
+		outgoingConnection?.off("cancel", endCall);
-	function onDeviceError(error: TwilioError.TwilioError, call?: Call) {
+		outgoingConnection?.off("disconnect", endCall);
-		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();
-		}
 	}
 }
 

app/phone-calls/pages/outgoing-call/[recipient].tsx

@@ -6,23 +6,18 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPhoneAlt as faPhone } from "@fortawesome/pro-solid-svg-icons";
 
 import useRequireOnboarding from "../../../core/hooks/use-require-onboarding";
-import Keypad from "../../components/keypad";
 import useMakeCall from "../../hooks/use-make-call";
+import useDevice from "../../hooks/use-device";
+
+import Keypad from "../../components/keypad";
 
 const OutgoingCall: BlitzPage = () => {
 	useRequireOnboarding();
 	const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom);
 	const router = useRouter();
+	const device = useDevice();
 	const recipient = decodeURIComponent(router.params.recipient);
-	const onHangUp = useMemo(
+	const onHangUp = useMemo(() => () => setPhoneNumber(""), [setPhoneNumber]);
-		() => () => {
-			setPhoneNumber("");
-
-			// return router.replace(Routes.KeypadPage());
-			return router.push(Routes.KeypadPage());
-		},
-		[router, setPhoneNumber],
-	);
 	const call = useMakeCall({ recipient, onHangUp });
 	const pressDigit = useAtom(pressDigitAtom)[1];
 	const onDigitPressProps = useMemo(
@@ -37,12 +32,10 @@ const OutgoingCall: BlitzPage = () => {
 	);
 
 	useEffect(() => {
-		console.log("call.state", call.state);
+		if (device !== null) {
-		if (call.state === "ready") {
 			call.makeCall();
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [device]);
-	}, [call.state]);
 
 	return (
 		<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">