WIP: feat: add "accept call?" prompt screen

Author: WofWca

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 noPrompt = false;
+      window.location.hash =
+        (noPrompt ? "#acceptCall=" : "#promptThenAcceptCall=") + 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";
@@ -123,11 +124,20 @@ export default function App() {
     manager.endCall();
   }, [manager]);
 
-  let status = "";
-  if (state === "connecting") {
-    status = "Connecting...";
-  } else if (state === "ringing") {
-    status = "Ringing...";
+  let status: string;
+  switch (state) {
+    case "answerIncomingCallPrompt":
+      status = "Incoming call"
+      break
+    case "connecting":
+      status = "Connecting...";
+      break;
+    case "ringing":
+      status = "Ringing...";
+      break;
+    case "in-call":
+      status = "";
+      break;
   }
 
   const inCall = state === "in-call";
@@ -194,6 +204,21 @@ export default function App() {
           textAlign: "center",
         }}
       >
+        {/* TODO transition */}
+        {/* TODO narrow screens */}
+        {state === "answerIncomingCallPrompt" && (
+          <Button
+            aria-label="Answer call"
+            title="Answer call"
+            onClick={() => manager.acceptCall()}
+            style={{
+              backgroundColor: "#00b000",
+              ...buttonsStyle,
+            }}
+          >
+            <MaterialSymbolsCall />
+          </Button>
+        )}
         <Button
           aria-label={toggleAudioLabel}
           title={toggleAudioLabel}

src/lib/calls.ts

@@ -32,14 +32,20 @@ const initialRtcConfiguration = {
   iceCandidatePoolSize: 1,
 } as RTCConfiguration;
 
-export type CallState = "connecting" | "ringing" | "in-call";
+export type CallState =
+  | "answerIncomingCallPrompt"
+  | "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
@@ -142,6 +148,28 @@ export class CallsManager {
       if (hash === "startCall") {
         console.log("URL hash CMD: ", hash);
         await this.startCall();
+      } else if (hash.startsWith("promptThenAcceptCall=")) {
+        this.state = "answerIncomingCallPrompt";
+        this.onStateChanged(this.state);
+
+        const offer = window.atob(hash.split("promptThenAcceptCall=", 2)[1]);
+        console.log("URL hash CMD: promptThenAcceptCall:", offer);
+
+        const accepted = await new Promise<boolean>((r) => {
+          this.resolveCallAcceptedPromise = r;
+        });
+        console.log(
+          "Accept call prompt resolved, " +
+            (accepted ? "accepted" : "rejected"),
+        );
+        if (!accepted) {
+          this.endCall();
+        } else {
+          this.state = "connecting";
+          this.onStateChanged(this.state);
+
+          await onIncomingCall(offer);
+        }
       } else if (hash.startsWith("acceptCall=")) {
         const offer = window.atob(hash.substring(11));
         console.log("URL hash CMD: acceptCall:", offer);
@@ -178,9 +206,18 @@ export class CallsManager {
     this.onStateChanged(this.state);
   }
 
+  // TODO maybe just make this `undefined` if there is no need to accept it?
+  acceptCall() {
+    this.resolveCallAcceptedPromise?.(true);
+    this.resolveCallAcceptedPromise = undefined;
+  }
+
   async endCall(): Promise<void> {
     this.peerConnection.close();
     window.calls.endCall();
+
+    this.resolveCallAcceptedPromise?.(false);
+    this.resolveCallAcceptedPromise = undefined;
   }
 
   getState() {