review

public/locales/en-GB/app.json

@@ -82,7 +82,7 @@
     "failed_heading": "Failed to join",
     "failed_text": "Call not found or is not accessible.",
     "knock_reject_body": "Your request was declined.",
-    "knock_reject_heading": "Access Denied",
+    "knock_reject_heading": "Access denied",
     "reason": "Reason"
   },
   "hangup_button_label": "End call",

src/room/GroupCallView.tsx

@@ -134,13 +134,6 @@ export const GroupCallView: FC<Props> = ({
   const latestMuteStates = useRef<MuteStates>();
   latestMuteStates.current = muteStates;
 
-  useEffect(() => {
-    // skip lobby if we are not in widget mode;
-    if (!widget && skipLobby) {
-      void enterRTCSession(rtcSession, perParticipantE2EE);
-    }
-  }, [perParticipantE2EE, rtcSession, skipLobby]);
-
   useEffect(() => {
     const defaultDeviceSetup = async (
       requestedDeviceData: JoinCallData,
@@ -184,29 +177,33 @@ export const GroupCallView: FC<Props> = ({
       }
     };
 
-    if (widget && preload && skipLobby) {
+    if (skipLobby) {
-      // In preload mode without lobby we wait for a join action before entering
+      if (widget && preload) {
-      const onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
+        // In preload mode without lobby we wait for a join action before entering
+        const onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
+          (async (): Promise<void> => {
+            await defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
+            await enterRTCSession(rtcSession, perParticipantE2EE);
+            widget!.api.transport.reply(ev.detail, {});
+          })().catch((e) => {
+            logger.error("Error joining RTC session", e);
+          });
+        };
+        widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
+        return (): void => {
+          widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
+        };
+      } else if (widget && !preload) {
+        // No lobby and no preload: we enter the rtc session right away
         (async (): Promise<void> => {
-          await defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
+          await defaultDeviceSetup({ audioInput: null, videoInput: null });
           await enterRTCSession(rtcSession, perParticipantE2EE);
-          widget!.api.transport.reply(ev.detail, {});
         })().catch((e) => {
           logger.error("Error joining RTC session", e);
         });
-      };
+      } else {
-      widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
+        void enterRTCSession(rtcSession, perParticipantE2EE);
-      return (): void => {
+      }
-        widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
-      };
-    } else if (widget && !preload && skipLobby) {
-      // No lobby and no preload: we enter the rtc session right away
-      (async (): Promise<void> => {
-        await defaultDeviceSetup({ audioInput: null, videoInput: null });
-        await enterRTCSession(rtcSession, perParticipantE2EE);
-      })().catch((e) => {
-        logger.error("Error joining RTC session", e);
-      });
     }
   }, [rtcSession, preload, skipLobby, perParticipantE2EE]);
 

src/room/RoomPage.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useEffect, useState, useCallback, ReactNode, useRef } from "react";
+import { FC, useEffect, useState, ReactNode, useRef } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
 import { CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -55,7 +55,7 @@ export const RoomPage: FC = () => {
     useClientLegacy();
   const { avatarUrl, displayName: userDisplayName } = useProfile(client);
 
-  const groupCallState = useLoadGroupCall(roomIdOrAlias, viaServers, client);
+  const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
   const muteStates = useMuteStates();
 
   useEffect(() => {
@@ -88,12 +88,12 @@ export const RoomPage: FC = () => {
   const wasInWaitForInviteState = useRef<boolean>(false);
 
   useEffect(() => {
-    if (groupCallState.kind === "loaded" && wasInWaitForInviteState) {
+    if (groupCallState.kind === "loaded" && wasInWaitForInviteState.current) {
       logger.log("Play join sound 'Not yet implemented'");
     }
   }, [groupCallState.kind]);
 
-  const groupCallView = useCallback((): JSX.Element => {
+  const groupCallView = (): JSX.Element => {
     switch (groupCallState.kind) {
       case "loaded":
         return (
@@ -190,19 +190,7 @@ export const RoomPage: FC = () => {
       default:
         return <> </>;
     }
-  }, [
+  };
-    groupCallState,
-    client,
-    passwordlessUser,
-    confineToRoom,
-    preload,
-    skipLobby,
-    hideHeader,
-    muteStates,
-    t,
-    userDisplayName,
-    avatarUrl,
-  ]);
 
   let content: ReactNode;
   if (loading || isRegistering) {

src/room/useLoadGroupCall.ts

@@ -117,9 +117,9 @@ export class CallTerminatedMessage extends Error {
 }
 
 export const useLoadGroupCall = (
+  client: MatrixClient | undefined,
   roomIdOrAlias: string | null,
   viaServers: string[],
-  client?: MatrixClient,
 ): GroupCallStatus => {
   const [state, setState] = useState<GroupCallStatus>({ kind: "loading" });
   const activeRoom = useRef<Room>();