From 24ffb6547cc11c6fa7bf5cb6cde9ed817440308b Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 19 Sep 2023 17:57:16 +0100 Subject: [PATCH 1/7] 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 | 28 +++++++++++++-- src/room/useLoadGroupCall.ts | 69 ++++++++---------------------------- 2 files changed, 40 insertions(+), 57 deletions(-) diff --git a/src/room/GroupCallLoader.tsx b/src/room/GroupCallLoader.tsx index 5f71f203..cca495a4 100644 --- a/src/room/GroupCallLoader.tsx +++ b/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 ; + if ((groupCallState.error as MatrixError).errcode === "M_NOT_FOUND") { + return ( + +

{t("Call not found")}

+

+ {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." + )} +

+ {/* 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. */} + + {t("Home")} + + + ); + } else { + return ; + } } } diff --git a/src/room/useLoadGroupCall.ts b/src/room/useLoadGroupCall.ts index e6f79ced..c47a678b 100644 --- a/src/room/useLoadGroupCall.ts +++ b/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 => { - 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 => { From 728e37b23c9c6cf583c8a7d2f45583b10c3b9d5a Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 19 Sep 2023 18:02:57 +0100 Subject: [PATCH 2/7] i18n --- public/locales/en-GB/app.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json index 5d3d524c..d4a65549 100644 --- a/public/locales/en-GB/app.json +++ b/public/locales/en-GB/app.json @@ -21,6 +21,7 @@ "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)": "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)", "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)", "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 and our <5>Cookie Policy.": "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 and our <5>Cookie Policy.", + "Call not found": "Call not found", "Camera": "Camera", "Close": "Close", "Confirm password": "Confirm password", @@ -38,6 +39,7 @@ "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", From 53e3cbcf61bfe8eaa08c441db8b330205bfa70ae Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 19 Sep 2023 18:26:08 +0100 Subject: [PATCH 3/7] Don't include the brand name Co-authored-by: Robin --- src/room/GroupCallLoader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/room/GroupCallLoader.tsx b/src/room/GroupCallLoader.tsx index cca495a4..301dcbdf 100644 --- a/src/room/GroupCallLoader.tsx +++ b/src/room/GroupCallLoader.tsx @@ -60,7 +60,7 @@ export function GroupCallLoader({

{t("Call not found")}

{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." )}

{/* XXX: A 'create it for me' button would be the obvious UX here. Two screens already have From e604c7bcaec6617b28e5aebb5f3f3af67b3bbc75 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 19 Sep 2023 18:26:23 +0100 Subject: [PATCH 4/7] i18n --- public/locales/en-GB/app.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json index d4a65549..f14af673 100644 --- a/public/locales/en-GB/app.json +++ b/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)": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)", "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 and our <5>Cookie Policy.": "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 and our <5>Cookie Policy.", "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", From a268a804bb4e9d8b1197a35d9c450441e1bbad17 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 19 Sep 2023 18:27:53 +0100 Subject: [PATCH 5/7] Use compound components --- src/room/GroupCallLoader.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/room/GroupCallLoader.tsx b/src/room/GroupCallLoader.tsx index 301dcbdf..17036ee1 100644 --- a/src/room/GroupCallLoader.tsx +++ b/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"; @@ -57,12 +57,12 @@ export function GroupCallLoader({ if ((groupCallState.error as MatrixError).errcode === "M_NOT_FOUND") { return ( -

{t("Call not found")}

-

+ {t("Call not found")} + {t( "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." )} -

+ {/* 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. */} From f33170f5f4aaf3292203e2e8128913db7bace5e7 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 19 Sep 2023 18:29:09 +0100 Subject: [PATCH 6/7] Don't reload the page --- src/room/GroupCallLoader.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/room/GroupCallLoader.tsx b/src/room/GroupCallLoader.tsx index 17036ee1..c9761c2c 100644 --- a/src/room/GroupCallLoader.tsx +++ b/src/room/GroupCallLoader.tsx @@ -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: Event) => { + ev.preventDefault(); + history.push("/"); + }, + [history] + ); switch (groupCallState.kind) { case "loading": From aab27ae616f8bfc997e2a95b1e125431c3dfd3d5 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 19 Sep 2023 18:36:51 +0100 Subject: [PATCH 7/7] Wrong mouse event --- src/room/GroupCallLoader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/room/GroupCallLoader.tsx b/src/room/GroupCallLoader.tsx index c9761c2c..c61f4ca4 100644 --- a/src/room/GroupCallLoader.tsx +++ b/src/room/GroupCallLoader.tsx @@ -43,7 +43,7 @@ export function GroupCallLoader({ const history = useHistory(); const onHomeClick = useCallback( - (ev: Event) => { + (ev: React.MouseEvent) => { ev.preventDefault(); history.push("/"); },