Don't auto create calls from visiting the URL

This didn't work with e2e calls and just ended up with everyone who
went to the URL creating their own room because it didn't add the
alias to any of them.

This has it show a very simple 404-esque screen instead. If the call
already exists, it will show it as before, so existing URLs will
continue to work.

src/room/GroupCallLoader.tsx

@@ -14,10 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ReactNode } from "react";
+import { ReactNode, useCallback } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { MatrixError } from "matrix-js-sdk";
+import { useHistory } from "react-router-dom";
+import { Link } from "@vector-im/compound-web";
 
 import { useLoadGroupCall } from "./useLoadGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
@@ -38,6 +41,9 @@ export function GroupCallLoader({
   const { t } = useTranslation();
   const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
 
+  const history = useHistory();
+  const onHomeClick = useCallback(() => history.push("/"), [history]);
+
   switch (groupCallState.kind) {
     case "loading":
       return (
@@ -48,6 +54,24 @@ export function GroupCallLoader({
     case "loaded":
       return <>{children(groupCallState.rtcSession)}</>;
     case "failed":
-      return <ErrorView error={groupCallState.error} />;
+      if ((groupCallState.error as MatrixError).errcode === "M_NOT_FOUND") {
+        return (
+          <FullScreenView>
+            <h1>{t("Call not found")}</h1>
+            <p>
+              {t(
+                "Element Calls are now end-to-end encrypted and need to be explicitly created. This helps make sure everyone's using the same encryption key."
+              )}
+            </p>
+            {/* XXX: A 'create it for me' button would be the obvious UX here. Two screens already have
+            dupes of this flow, let's make a common component and put it here. */}
+            <Link href="/" onClick={onHomeClick}>
+              {t("Home")}
+            </Link>
+          </FullScreenView>
+        );
+      } else {
+        return <ErrorView error={groupCallState.error} />;
+      }
   }
 }

src/room/useLoadGroupCall.ts

@@ -20,14 +20,10 @@ import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
 import { SyncState } from "matrix-js-sdk/src/sync";
 import { useTranslation } from "react-i18next";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
-import { randomString } from "matrix-js-sdk/src/randomstring";
 
 import type { Room } from "matrix-js-sdk/src/models/room";
 import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
-import { setLocalStorageItem } from "../useLocalStorage";
-import { isLocalRoomId, createRoom, roomNameFromRoomId } from "../matrix-utils";
 import { useEnableE2EE } from "../settings/useSetting";
-import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
 
 export type GroupCallLoaded = {
   kind: "loaded";
@@ -65,58 +61,21 @@ export const useLoadGroupCall = (
 
   useEffect(() => {
     const fetchOrCreateRoom = async (): Promise<Room> => {
-      try {
-        // We lowercase the localpart when we create the room, so we must lowercase
-        // it here too (we just do the whole alias). We can't do the same to room IDs
-        // though.
-        const sanitisedIdOrAlias =
-          roomIdOrAlias[0] === "#"
-            ? roomIdOrAlias.toLowerCase()
-            : roomIdOrAlias;
+      // We lowercase the localpart when we create the room, so we must lowercase
+      // it here too (we just do the whole alias). We can't do the same to room IDs
+      // though.
+      const sanitisedIdOrAlias =
+        roomIdOrAlias[0] === "#" ? roomIdOrAlias.toLowerCase() : roomIdOrAlias;
 
-        const room = await client.joinRoom(sanitisedIdOrAlias, {
-          viaServers,
-        });
-        logger.info(
-          `Joined ${sanitisedIdOrAlias}, waiting room to be ready for group calls`
-        );
-        await client.waitUntilRoomReadyForGroupCalls(room.roomId);
-        logger.info(`${sanitisedIdOrAlias}, is ready for group calls`);
-        return room;
-      } catch (error) {
-        if (
-          isLocalRoomId(roomIdOrAlias, client) &&
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          (error.errcode === "M_NOT_FOUND" ||
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            (error.message &&
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              error.message.indexOf("Failed to fetch alias") !== -1))
-        ) {
-          // The room doesn't exist, but we can create it
-          const [, roomId] = await createRoom(
-            client,
-            roomNameFromRoomId(roomIdOrAlias),
-            e2eeEnabled ?? false
-          );
-
-          if (e2eeEnabled) {
-            setLocalStorageItem(
-              getRoomSharedKeyLocalStorageKey(roomId),
-              randomString(32)
-            );
-          }
-
-          // likewise, wait for the room
-          await client.waitUntilRoomReadyForGroupCalls(roomId);
-          return client.getRoom(roomId)!;
-        } else {
-          throw error;
-        }
-      }
+      const room = await client.joinRoom(sanitisedIdOrAlias, {
+        viaServers,
+      });
+      logger.info(
+        `Joined ${sanitisedIdOrAlias}, waiting room to be ready for group calls`
+      );
+      await client.waitUntilRoomReadyForGroupCalls(room.roomId);
+      logger.info(`${sanitisedIdOrAlias}, is ready for group calls`);
+      return room;
     };
 
     const fetchOrCreateGroupCall = async (): Promise<MatrixRTCSession> => {