Merge pull request #37 from deltachat/wofwca/accept-call-prompt

feat: add "Answer Call" button

Author: adbenitez

README.md

@@ -16,7 +16,8 @@ To integrate into your Delta Chat client you need to provide a
 Commands are given to the app via URL hash:
 
 - `#startCall`: tells the app to generate an offer payload and call `startCall()`, this is how the app should be open when the user is starting an outgoing call.
-- `#acceptCall=PAYLOAD`: tells the app to auto-accept the incoming offer, generating an answer payload and calling `acceptCall()`, this must be used when the user clicks "Answer" in the incoming call notification.
+- `#offerIncomingCall=PAYLOAD`: tells the app to show the "Incoming call. Answer?" screen. Then, if the user clicks "Answer", generate a WebRTC answer to the offer provided in `PAYLOAD`, and call `window.calls.acceptCall(webrtcAnswer)`. If the user declined the call, the app will invoke `window.calls.endCall`.
+- `#acceptCall=PAYLOAD`: same as `#offerIncomingCall`, but doesn't show the "Incoming call. Answer?" screen and instead automatically and immediately accepts the call.
 - `#onAnswer=PAYLOAD`: notifies the app that the outgoing call was accepted and provides the answer payload
 
 **IMPORTANT:** `PAYLOAD` **must** be base64 encoded (NOTE: you might still need to URL-encode the base64 string to be a valid URL hash) before passing it to the app in the URL hash.

calls.js

@@ -50,7 +50,9 @@ window.webxdc.setUpdateListener(
     if (peer === selfAddr) {
     } else if (cmd === "start") {
       console.log("INCOMING CALL!");
-      window.location.hash = "#acceptCall=" + payload;
+      const autoAccept = false;
+      window.location.hash =
+        (autoAccept ? "#acceptCall=" : "#offerIncomingCall=") + payload;
     } else if (cmd === "accept") {
       console.log("CALL ACCEPTED!");
       window.location.hash = "#onAnswer=" + payload;

src/App.tsx

@@ -8,6 +8,7 @@ import EndCallButton from "~/components/EndCallButton";
 import AvatarPlaceholder from "~/components/AvatarPlaceholder";
 import AvatarImage from "~/components/AvatarImage";
 import Button from "~/components/Button";
+import MaterialSymbolsCall from "~icons/material-symbols/call";
 import MaterialSymbolsVideocam from "~icons/material-symbols/videocam";
 import MaterialSymbolsVideocamOff from "~icons/material-symbols/videocam-off";
 import MaterialSymbolsMic from "~icons/material-symbols/mic";
@@ -119,15 +120,27 @@ export default function App() {
   const outStreamHasVideoTrack =
     outStream == undefined || outStream.getVideoTracks().length >= 1;
 
+  const acceptCall: null | (() => void) =
+    state === "promptingUserToAcceptCall" ? () => manager.acceptCall() : null;
+
   const endCall = useCallback(() => {
     manager.endCall();
   }, [manager]);
 
-  let status = "";
-  if (state === "connecting") {
-    status = "Connecting...";
-  } else if (state === "ringing") {
-    status = "Ringing...";
+  let status: string;
+  switch (state) {
+    case "promptingUserToAcceptCall":
+      status = "Incoming call";
+      break;
+    case "connecting":
+      status = "Connecting...";
+      break;
+    case "ringing":
+      status = "Ringing...";
+      break;
+    case "in-call":
+      status = "";
+      break;
   }
 
   const inCall = state === "in-call";
@@ -145,7 +158,7 @@ export default function App() {
     color: "white",
     borderRadius: "50%",
     fontSize: "1.5em",
-    margin: "0 1rem",
+    margin: "0.25em 0.625em",
   };
 
   return (
@@ -189,11 +202,24 @@ export default function App() {
       <div
         style={{
           position: "absolute",
-          bottom: "1em",
+          bottom: "0.75em",
           width: "100%",
           textAlign: "center",
         }}
       >
+        {acceptCall != null && (
+          <Button
+            aria-label="Answer call"
+            title="Answer call"
+            onClick={acceptCall}
+            style={{
+              backgroundColor: "#00b000",
+              ...buttonsStyle,
+            }}
+          >
+            <MaterialSymbolsCall />
+          </Button>
+        )}
         <Button
           aria-label={toggleAudioLabel}
           title={toggleAudioLabel}

src/lib/calls.ts

@@ -34,14 +34,20 @@ const initialRtcConfiguration = {
   iceCandidatePoolSize: 1,
 } as RTCConfiguration;
 
-export type CallState = "connecting" | "ringing" | "in-call";
+export type CallState =
+  | "promptingUserToAcceptCall"
+  | "connecting"
+  | "ringing"
+  | "in-call";
 
 export class CallsManager {
   private peerConnection: RTCPeerConnection;
   private setIceServersPromise: Promise<void>;
   private state: CallState;
   static initialState = "connecting" as const;
 
+  resolveCallAcceptedPromise?: (accepted: boolean) => void;
+
   private iceTricklingDataChannel: RTCDataChannel;
   /**
    * Stores local ICE candidates to be sent to the remote peer
@@ -104,7 +110,10 @@ export class CallsManager {
       this.onStateChanged(this.state);
     };
 
-    const onIncomingCall = async (payload: string) => {
+    const acceptCall = async (payload: string) => {
+      this.state = "connecting";
+      this.onStateChanged(this.state);
+
       await this.setIceServersPromise;
       const gatheredEnoughIceP = gatheredEnoughIce(this.peerConnection);
 
@@ -130,7 +139,7 @@ export class CallsManager {
       logSDP("Answering incoming call with answer:", answer);
       window.calls.acceptCall(answer);
     };
-    const onAcceptedCall = (payload: string) => {
+    const onAnswer = (payload: string) => {
       const answerObject = {
         type: "answer",
         sdp: payload,
@@ -146,17 +155,54 @@ export class CallsManager {
         console.log("empty URL hash: ", window.location.href);
         return;
       }
+
+      // A new command, most likely `#acceptCall`, has been issued.
+      // Let's interrupt the previously started `#offerIncomingCall`,
+      // if any.
+      this.resolveCallAcceptedPromise?.(false);
+
       if (hash === "startCall") {
         console.log("URL hash CMD: ", hash);
         await this.startCall();
+      } else if (hash.startsWith("offerIncomingCall=")) {
+        const offer = window.atob(hash.split("offerIncomingCall=", 2)[1]);
+        logSDP("Incoming call (with user prompt) with offer:", offer);
+
+        this.state = "promptingUserToAcceptCall";
+        this.onStateChanged(this.state);
+
+        // Wait for the user to accept the call, do _not_ do anything
+        // with the other party's offer yet,
+        // i.e. don't establish the connection, for privacy reasons.
+        const accepted: boolean = await new Promise((r) => {
+          const fn = (val: boolean) => {
+            r(val);
+            if (this.resolveCallAcceptedPromise === fn) {
+              this.resolveCallAcceptedPromise = undefined;
+            }
+          };
+          this.resolveCallAcceptedPromise = fn;
+        });
+        console.log(
+          "Accept call prompt resolved: " +
+            (accepted ? "accepted" : "not accepted"),
+        );
+
+        if (!accepted) {
+          // "Not accepted" doesn't mean "declined".
+          // If "declined", `window.calls.endCall()` will be called
+          // in a separate place.
+          return;
+        }
+        await acceptCall(offer);
       } else if (hash.startsWith("acceptCall=")) {
         const offer = window.atob(hash.substring(11));
         logSDP("Incoming call with offer:", offer);
-        await onIncomingCall(offer);
+        await acceptCall(offer);
       } else if (hash.startsWith("onAnswer=")) {
         const answer = window.atob(hash.substring(9));
         logSDP("Outgoing call was accepted with answer:", answer);
-        onAcceptedCall(answer);
+        onAnswer(answer);
       } else {
         console.log("unexpected URL hash: ", hash);
       }
@@ -186,9 +232,19 @@ export class CallsManager {
     this.onStateChanged(this.state);
   }
 
+  acceptCall() {
+    if (this.resolveCallAcceptedPromise == undefined) {
+      console.warn("acceptCall invoked, but we were not waiting for it");
+      return;
+    }
+    this.resolveCallAcceptedPromise(true);
+  }
+
   async endCall(): Promise<void> {
     this.peerConnection.close();
     window.calls.endCall();
+
+    this.resolveCallAcceptedPromise?.(false);
   }
 
   getState() {