Merge remote-tracking branch 'origin/livekit' into dbkr/include_room_name

public/locales/en-GB/app.json

@@ -22,6 +22,7 @@
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
   "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.": "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.",
   "Call not found": "Call not found",
+  "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.",
   "Camera": "Camera",
   "Close": "Close",
   "Confirm password": "Confirm password",
@@ -39,7 +40,6 @@
   "Download debug logs": "Download debug logs",
   "Element Call Home": "Element Call Home",
   "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call is temporarily not end-to-end encrypted while we test scalability.",
-  "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.": "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.",
   "Enable end-to-end encryption (password protected calls)": "Enable end-to-end encryption (password protected calls)",
   "Encrypted": "Encrypted",
   "End call": "End call",

src/home/CallList.tsx

@@ -35,9 +35,9 @@ export function CallList({ rooms, client }: CallListProps) {
   return (
     <>
       <div className={styles.callList}>
-        {rooms.map(({ room, roomAlias, roomName, avatarUrl, participants }) => (
+        {rooms.map(({ room, roomName, avatarUrl, participants }) => (
           <CallTile
-            key={roomAlias}
+            key={room.roomId}
             client={client}
             name={roomName}
             avatarUrl={avatarUrl}

src/room/GroupCallLoader.tsx

@@ -20,7 +20,7 @@ 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 { Heading, Link, Text } from "@vector-im/compound-web";
 
 import { useLoadGroupCall } from "./useLoadGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
@@ -42,7 +42,13 @@ export function GroupCallLoader({
   const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
 
   const history = useHistory();
-  const onHomeClick = useCallback(() => history.push("/"), [history]);
+  const onHomeClick = useCallback(
+    (ev: React.MouseEvent) => {
+      ev.preventDefault();
+      history.push("/");
+    },
+    [history]
+  );
 
   switch (groupCallState.kind) {
     case "loading":
@@ -57,12 +63,12 @@ export function GroupCallLoader({
       if ((groupCallState.error as MatrixError).errcode === "M_NOT_FOUND") {
         return (
           <FullScreenView>
-            <h1>{t("Call not found")}</h1>
-            <p>
+            <Heading>{t("Call not found")}</Heading>
+            <Text>
               {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."
+                "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key."
               )}
-            </p>
+            </Text>
             {/* 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}>