chore: update architecture diagram to show peerjs

fonoster · Dec 20, 2023 · 9e11937 · 9e11937
1 parent d0c63ad
commit 9e11937
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 19 deletions.
diff --git a/assets/architecture.png b/assets/architecture.png
diff --git a/mods/widget/src/GoodtokUA.tsx b/mods/widget/src/GoodtokUA.tsx
@@ -44,6 +44,8 @@ const GoodtokUA = () => {
   const [notificationType, setNotificationType] = useState<NotificationType>();
   const [customerToken, setCustomerToken] = useState(null);
   const [peer, setPeer] = useState(null);
+  const [remoteMediaConnection, setRemoteMediaConnection] =
+    useState<MediaConnection | null>(null);
   const [remotePeerId, setRemotePeerId] = useState(null);
   const [localStream, setLocalStream] = useState<MediaStream | null>(null);
   const [sessionType, setSessionType] = useState<
@@ -98,6 +100,7 @@ const GoodtokUA = () => {
           remoteVideo.autoplay = true;
         });
 
+        setRemoteMediaConnection(mediaConnection);
         setRemotePeerId(mediaConnection.peer);
         setVideoOpen(true);
         setNotificationOpen(false);
@@ -106,29 +109,59 @@ const GoodtokUA = () => {
 
       setVideoMuted(event === GoodtokWidgetEvents.AUDIO_SESSION_REQUEST);
 
-      const workspaceId = getWorkspaceId(document);
-      const server = getAPIServer(document);
-
-      const client = new SDK.Client({
-        endpoint: server,
-        workspace: workspaceId
-      });
-
-      client.setToken(customerToken);
-
-      const queues = new SDK.Queues(client);
-
-      await queues.joinQueue({
-        customerId: connectionObject.customerId,
-        workspaceId: connectionObject.workspaceId
-      });
+      await joinQueue(connectionObject, customerToken);
     } catch (e) {
       console.error("failed to initialize peer", e);
       setNotificationType(NotificationType.UNKNOWN_ERROR);
       setNotificationOpen(true);
     }
   };
 
+  const joinQueue = async (
+    connectionObject: ConnectionObject,
+    customerToken: string
+  ) => {
+    const workspaceId = getWorkspaceId(document);
+    const server = getAPIServer(document);
+
+    const client = new SDK.Client({
+      endpoint: server,
+      workspace: workspaceId
+    });
+
+    client.setToken(customerToken);
+
+    const queues = new SDK.Queues(client);
+
+    await queues.joinQueue({
+      customerId: connectionObject.customerId,
+      workspaceId: connectionObject.workspaceId
+    });
+  };
+
+  const leaveQueue = async (
+    connectionObject: ConnectionObject,
+    customerToken: string
+  ) => {
+    const workspaceId = getWorkspaceId(document);
+    const server = getAPIServer(document);
+
+    const client = new SDK.Client({
+      endpoint: server,
+      workspace: workspaceId
+    });
+
+    client.setToken(customerToken);
+
+    const queues = new SDK.Queues(client);
+
+    await queues.updateQueueEntryStatus({
+      customerId: connectionObject.customerId,
+      workspaceId: connectionObject.workspaceId,
+      status: "DEQUEUED"
+    });
+  };
+
   const handleScheduleMeetingRequest = () => {
     window.open(calendarUrl, "_blank");
   };
@@ -238,14 +271,19 @@ const GoodtokUA = () => {
         setNotificationOpen(false);
         setContactFormOpen(false);
 
-        // Release media resources
+        // Release media resources and close peer connection
         if (localStream) {
           localStream.getTracks().forEach((track) => track.stop());
+          remoteMediaConnection?.close();
         }
 
-        // TODO: remotePeer.close();
+        if (peer) {
+          peer.destroy();
+        }
 
-        // TODO: If is connected, unregister, disconnect and hangup
+        if (connectionObject) {
+          await leaveQueue(connectionObject, customerToken);
+        }
         break;
       }