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} />;
+      }
   }
 }