Enable users to join calls from multiple devices

package.json

@@ -45,7 +45,7 @@
     "i18next": "^21.10.0",
     "i18next-browser-languagedetector": "^6.1.8",
     "i18next-http-backend": "^1.4.4",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#3f1c3392d45b0fc054c3788cc6c043cd5b4fb730",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#f46ecf970c658ae34b8d5fc3e73369c31ac79e90",
     "matrix-widget-api": "^1.0.0",
     "mermaid": "^8.13.8",
     "normalize.css": "^8.0.1",

src/ClientContext.tsx

@@ -25,8 +25,7 @@ import React, {
   useRef,
 } from "react";
 import { useHistory } from "react-router-dom";
-import { MatrixClient, ClientEvent } from "matrix-js-sdk/src/client";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { MatrixClient } from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
 
@@ -40,6 +39,7 @@ import {
 import { widget } from "./widget";
 import { PosthogAnalytics, RegistrationType } from "./PosthogAnalytics";
 import { translatedError } from "./TranslatedError";
+import { useEventTarget } from "./useEvents";
 
 declare global {
   interface Window {
@@ -55,6 +55,8 @@ export interface Session {
   tempPassword?: string;
 }
 
+const loadChannel = new BroadcastChannel("load");
+
 const loadSession = (): Session => {
   const data = localStorage.getItem("matrix-auth-store");
   if (data) return JSON.parse(data);
@@ -292,47 +294,29 @@ export const ClientProvider: FC<Props> = ({ children }) => {
 
   const { t } = useTranslation();
 
+  // To protect against multiple sessions writing to the same storage
+  // simultaneously, we send a broadcast message that shuts down all other
+  // running instances of the app. This isn't necessary if the app is running in
+  // a widget though, since then it'll be mostly stateless.
   useEffect(() => {
-    // To protect against multiple sessions writing to the same storage
-    // simultaneously, we send a to-device message that shuts down all other
-    // running instances of the app. This isn't necessary if the app is running
-    // in a widget though, since then it'll be mostly stateless.
-    if (!widget && client) {
-      const loadTime = Date.now();
-
-      const onToDeviceEvent = (event: MatrixEvent) => {
-        if (event.getType() !== "org.matrix.call_duplicate_session") return;
-
-        const content = event.getContent();
-
-        if (content.session_id === client.getSessionId()) return;
-
-        if (content.timestamp > loadTime) {
-          client?.stopClient();
-
-          setState((prev) => ({
-            ...prev,
-            error: translatedError(
-              "This application has been opened in another tab.",
-              t
-            ),
-          }));
-        }
-      };
-
-      client.on(ClientEvent.ToDeviceEvent, onToDeviceEvent);
-
-      client.sendToDevice("org.matrix.call_duplicate_session", {
-        [client.getUserId()]: {
-          "*": { session_id: client.getSessionId(), timestamp: loadTime },
-        },
-      });
+    if (!widget) loadChannel.postMessage({});
+  }, []);
 
-      return () => {
-        client?.removeListener(ClientEvent.ToDeviceEvent, onToDeviceEvent);
-      };
-    }
-  }, [client, t]);
+  useEventTarget(
+    loadChannel,
+    "message",
+    useCallback(() => {
+      client?.stopClient();
+
+      setState((prev) => ({
+        ...prev,
+        error: translatedError(
+          "This application has been opened in another tab.",
+          t
+        ),
+      }));
+    }, [client, setState, t])
+  );
 
   const context = useMemo<ClientState>(
     () => ({

src/Facepile.tsx

@@ -32,15 +32,15 @@ const overlapMap: Partial<Record<Size, number>> = {
 interface Props extends HTMLAttributes<HTMLDivElement> {
   className: string;
   client: MatrixClient;
-  participants: RoomMember[];
+  members: RoomMember[];
   max?: number;
   size?: Size;
 }
 
 export function Facepile({
   className,
   client,
-  participants,
+  members,
   max = 3,
   size = Size.XS,
   ...rest
@@ -51,27 +51,26 @@ export function Facepile({
   const _overlap = overlapMap[size];
 
   const title = useMemo(() => {
-    return participants.reduce<string | null>(
+    return members.reduce<string | null>(
       (prev, curr) =>
         prev === null
           ? curr.name
           : t("{{names}}, {{name}}", { names: prev, name: curr.name }),
       null
     ) as string;
-  }, [participants, t]);
+  }, [members, t]);
 
   return (
     <div
       className={classNames(styles.facepile, styles[size], className)}
       title={title}
       style={{
         width:
-          Math.min(participants.length, max + 1) * (_size - _overlap) +
-          _overlap,
+          Math.min(members.length, max + 1) * (_size - _overlap) + _overlap,
       }}
       {...rest}
     >
-      {participants.slice(0, max).map((member, i) => {
+      {members.slice(0, max).map((member, i) => {
         const avatarUrl = member.getMxcAvatarUrl();
         return (
           <Avatar
@@ -84,11 +83,11 @@ export function Facepile({
           />
         );
       })}
-      {participants.length > max && (
+      {members.length > max && (
         <Avatar
           key="additional"
           size={size}
-          fallback={`+${participants.length - max}`}
+          fallback={`+${members.length - max}`}
           className={styles.avatar}
           style={{ left: max * (_size - _overlap) }}
         />

src/home/CallList.tsx

@@ -92,7 +92,7 @@ function CallTile({
             <Facepile
               className={styles.facePile}
               client={client}
-              participants={participants}
+              members={participants}
             />
           )}
         </div>

src/room/GroupCallView.tsx

@@ -79,7 +79,6 @@ export function GroupCallView({
     isScreensharing,
     screenshareFeeds,
     participants,
-    calls,
     unencryptedEventsFromUsers,
   } = useGroupCall(groupCall);
 
@@ -173,9 +172,14 @@ export function GroupCallView({
   const onLeave = useCallback(() => {
     setLeft(true);
 
+    let participantCount = 0;
+    for (const deviceMap of groupCall.participants.values()) {
+      participantCount += deviceMap.size;
+    }
+
     PosthogAnalytics.instance.eventCallEnded.track(
       groupCall.room.name,
-      groupCall.participants.length
+      participantCount
     );
 
     leave();
@@ -187,14 +191,7 @@ export function GroupCallView({
     if (!isPasswordlessUser && !isEmbedded) {
       history.push("/");
     }
-  }, [
-    groupCall.room.name,
-    groupCall.participants.length,
-    leave,
-    isPasswordlessUser,
-    isEmbedded,
-    history,
-  ]);
+  }, [groupCall, leave, isPasswordlessUser, isEmbedded, history]);
 
   useEffect(() => {
     if (widget && state === GroupCallState.Entered) {
@@ -236,7 +233,6 @@ export function GroupCallView({
           roomName={groupCall.room.name}
           avatarUrl={avatarUrl}
           participants={participants}
-          calls={calls}
           microphoneMuted={microphoneMuted}
           localVideoMuted={localVideoMuted}
           toggleLocalVideoMuted={toggleLocalVideoMuted}
@@ -253,12 +249,6 @@ export function GroupCallView({
         />
       );
     }
-  } else if (state === GroupCallState.Entering) {
-    return (
-      <FullScreenView>
-        <h1>{t("Entering room…")}</h1>
-      </FullScreenView>
-    );
   } else if (left) {
     if (isPasswordlessUser) {
       return <CallEndedView client={client} />;