From 2753f04f0bd0fb9e9de36d0ade9ab271fce30aa6 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 19 Sep 2023 18:23:44 +0100 Subject: [PATCH 1/3] Include the room name in the generated URL --- src/home/CallList.tsx | 18 +++++++++++------- src/matrix-utils.ts | 12 ++++++++---- src/room/AppSelectionModal.tsx | 6 +++++- src/room/GroupCallView.tsx | 2 +- src/room/ShareModal.tsx | 9 +++++---- 5 files changed, 30 insertions(+), 17 deletions(-) diff --git a/src/home/CallList.tsx b/src/home/CallList.tsx index a82e4c13..97469e55 100644 --- a/src/home/CallList.tsx +++ b/src/home/CallList.tsx @@ -17,6 +17,7 @@ limitations under the License. import { Link } from "react-router-dom"; import { MatrixClient } from "matrix-js-sdk/src/client"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; +import { Room } from "matrix-js-sdk"; import { CopyButton } from "../button"; import { Avatar, Size } from "../Avatar"; @@ -40,7 +41,7 @@ export function CallList({ rooms, client }: CallListProps) { client={client} name={roomName} avatarUrl={avatarUrl} - roomId={room.roomId} + room={room} participants={participants} /> ))} @@ -57,17 +58,20 @@ export function CallList({ rooms, client }: CallListProps) { interface CallTileProps { name: string; avatarUrl: string; - roomId: string; + room: Room; participants: RoomMember[]; client: MatrixClient; } -function CallTile({ name, avatarUrl, roomId }: CallTileProps) { - const roomSharedKey = useRoomSharedKey(roomId); +function CallTile({ name, avatarUrl, room }: CallTileProps) { + const roomSharedKey = useRoomSharedKey(room.roomId); return (
- - + +
{name} @@ -78,7 +82,7 @@ function CallTile({ name, avatarUrl, roomId }: CallTileProps) {
); diff --git a/src/matrix-utils.ts b/src/matrix-utils.ts index a9f37011..e9f8a35c 100644 --- a/src/matrix-utils.ts +++ b/src/matrix-utils.ts @@ -345,10 +345,14 @@ export async function createRoom( * @param password * @returns */ -export function getRoomUrl(roomId: string, password?: string): string { - return `${window.location.protocol}//${ - window.location.host - }/room/#?roomId=${roomId}${password ? "&" + PASSWORD_STRING + password : ""}`; +export function getRoomUrl( + roomId: string, + roomName?: string, + password?: string +): string { + return `${window.location.protocol}//${window.location.host}/#${ + roomName ? "/" + roomAliasLocalpartFromRoomName(roomName) : "" + }?roomId=${roomId}${password ? "&" + PASSWORD_STRING + password : ""}`; } export function getAvatarUrl( diff --git a/src/room/AppSelectionModal.tsx b/src/room/AppSelectionModal.tsx index b1cc4e48..ec639a39 100644 --- a/src/room/AppSelectionModal.tsx +++ b/src/room/AppSelectionModal.tsx @@ -45,10 +45,14 @@ export const AppSelectionModal: FC = ({ roomId }) => { const roomSharedKey = useRoomSharedKey(roomId ?? ""); const appUrl = useMemo(() => { // If the room ID is not known, fall back to the URL of the current page + // Also, we don't really know the room name at this stage as we haven't + // started a client and synced to get the room details. We could take the one + // we got in our own URL and use that, but it's not a string that a human + // ever sees so it's somewhat redundant. We just don't pass a name. const url = new URL( roomId === null ? window.location.href - : getRoomUrl(roomId, roomSharedKey ?? undefined) + : getRoomUrl(roomId, undefined, roomSharedKey ?? undefined) ); // Edit the URL to prevent the app selection prompt from appearing a second // time within the app, and to keep the user confined to the current room diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx index a9db1bb7..809bba7d 100644 --- a/src/room/GroupCallView.tsx +++ b/src/room/GroupCallView.tsx @@ -302,7 +302,7 @@ export function GroupCallView({ const shareModal = ( diff --git a/src/room/ShareModal.tsx b/src/room/ShareModal.tsx index b9adc8e0..1e140c3f 100644 --- a/src/room/ShareModal.tsx +++ b/src/room/ShareModal.tsx @@ -16,6 +16,7 @@ limitations under the License. import { FC } from "react"; import { useTranslation } from "react-i18next"; +import { Room } from "matrix-js-sdk"; import { Modal } from "../Modal"; import { CopyButton } from "../button"; @@ -24,21 +25,21 @@ import styles from "./ShareModal.module.css"; import { useRoomSharedKey } from "../e2ee/sharedKeyManagement"; interface Props { - roomId: string; + room: Room; open: boolean; onDismiss: () => void; } -export const ShareModal: FC = ({ roomId, open, onDismiss }) => { +export const ShareModal: FC = ({ room, open, onDismiss }) => { const { t } = useTranslation(); - const roomSharedKey = useRoomSharedKey(roomId); + const roomSharedKey = useRoomSharedKey(room.roomId); return (

{t("Copy and share this call link")}

 From 83fdb094d59c6c8329c05cfc4b4d07c62a955d90 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 19 Sep 2023 18:55:33 +0100 Subject: [PATCH 2/3] Factor out common function to generate the URLs --- src/home/CallList.tsx | 12 +++++++++--- src/home/RegisteredView.tsx | 3 ++- src/home/UnauthenticatedView.tsx | 3 ++- src/matrix-utils.ts | 28 ++++++++++++++++++++++------ src/room/AppSelectionModal.tsx | 4 ++-- src/room/ShareModal.tsx | 8 ++++++-- 6 files changed, 43 insertions(+), 15 deletions(-) diff --git a/src/home/CallList.tsx b/src/home/CallList.tsx index 97469e55..59949b41 100644 --- a/src/home/CallList.tsx +++ b/src/home/CallList.tsx @@ -22,7 +22,7 @@ import { Room } from "matrix-js-sdk"; import { CopyButton } from "../button"; import { Avatar, Size } from "../Avatar"; import styles from "./CallList.module.css"; -import { getRoomUrl } from "../matrix-utils"; +import { getAbsoluteRoomUrl, getRelativeRoomUrl } from "../matrix-utils"; import { Body } from "../typography/Typography"; import { GroupCallRoom } from "./useGroupCallRooms"; import { useRoomSharedKey } from "../e2ee/sharedKeyManagement"; @@ -68,7 +68,9 @@ function CallTile({ name, avatarUrl, room }: CallTileProps) { return (
@@ -82,7 +84,11 @@ function CallTile({ name, avatarUrl, room }: CallTileProps) {
); diff --git a/src/home/RegisteredView.tsx b/src/home/RegisteredView.tsx index 4e7b151c..5552eda3 100644 --- a/src/home/RegisteredView.tsx +++ b/src/home/RegisteredView.tsx @@ -23,6 +23,7 @@ import { Heading } from "@vector-im/compound-web"; import { createRoom, + getRelativeRoomUrl, roomAliasLocalpartFromRoomName, sanitiseRoomNameInput, } from "../matrix-utils"; @@ -86,7 +87,7 @@ export function RegisteredView({ client }: Props) { ); } - history.push(`/room/#?roomId=${roomId}`); + history.push(getRelativeRoomUrl(roomId, roomName)); } submit().catch((error) => { diff --git a/src/home/UnauthenticatedView.tsx b/src/home/UnauthenticatedView.tsx index e001c5a8..8cd64c14 100644 --- a/src/home/UnauthenticatedView.tsx +++ b/src/home/UnauthenticatedView.tsx @@ -27,6 +27,7 @@ import { FieldRow, InputField, ErrorMessage } from "../input/Input"; import { Button } from "../button"; import { createRoom, + getRelativeRoomUrl, roomAliasLocalpartFromRoomName, sanitiseRoomNameInput, } from "../matrix-utils"; @@ -125,7 +126,7 @@ export const UnauthenticatedView: FC = () => { } setClient({ client, session }); - history.push(`/room/#?roomId=${roomId}`); + history.push(getRelativeRoomUrl(roomId, roomName)); } submit().catch((error) => { diff --git a/src/matrix-utils.ts b/src/matrix-utils.ts index e9f8a35c..a03b4bc4 100644 --- a/src/matrix-utils.ts +++ b/src/matrix-utils.ts @@ -340,17 +340,33 @@ export async function createRoom( } /** - * Returns a URL to that will load Element Call with the given room - * @param roomId of the room - * @param password - * @returns + * Returns an absolute URL to that will load Element Call with the given room + * @param roomId ID of the room + * @param roomName Name of the room + * @param password e2e key for the room */ -export function getRoomUrl( +export function getAbsoluteRoomUrl( roomId: string, roomName?: string, password?: string ): string { - return `${window.location.protocol}//${window.location.host}/#${ + return `${window.location.protocol}//${ + window.location.host + }${getRelativeRoomUrl(roomId, roomName, password)}`; +} + +/** + * Returns a relative URL to that will load Element Call with the given room + * @param roomId ID of the room + * @param roomName Name of the room + * @param password e2e key for the room + */ +export function getRelativeRoomUrl( + roomId: string, + roomName?: string, + password?: string +): string { + return `/room/#${ roomName ? "/" + roomAliasLocalpartFromRoomName(roomName) : "" }?roomId=${roomId}${password ? "&" + PASSWORD_STRING + password : ""}`; } diff --git a/src/room/AppSelectionModal.tsx b/src/room/AppSelectionModal.tsx index ec639a39..80e2871b 100644 --- a/src/room/AppSelectionModal.tsx +++ b/src/room/AppSelectionModal.tsx @@ -21,7 +21,7 @@ import { ReactComponent as PopOutIcon } from "@vector-im/compound-design-tokens/ import { Modal } from "../Modal"; import { useRoomSharedKey } from "../e2ee/sharedKeyManagement"; -import { getRoomUrl } from "../matrix-utils"; +import { getAbsoluteRoomUrl } from "../matrix-utils"; import styles from "./AppSelectionModal.module.css"; import { editFragmentQuery } from "../UrlParams"; @@ -52,7 +52,7 @@ export const AppSelectionModal: FC = ({ roomId }) => { const url = new URL( roomId === null ? window.location.href - : getRoomUrl(roomId, undefined, roomSharedKey ?? undefined) + : getAbsoluteRoomUrl(roomId, undefined, roomSharedKey ?? undefined) ); // Edit the URL to prevent the app selection prompt from appearing a second // time within the app, and to keep the user confined to the current room diff --git a/src/room/ShareModal.tsx b/src/room/ShareModal.tsx index 1e140c3f..0439f10a 100644 --- a/src/room/ShareModal.tsx +++ b/src/room/ShareModal.tsx @@ -20,7 +20,7 @@ import { Room } from "matrix-js-sdk"; import { Modal } from "../Modal"; import { CopyButton } from "../button"; -import { getRoomUrl } from "../matrix-utils"; +import { getAbsoluteRoomUrl } from "../matrix-utils"; import styles from "./ShareModal.module.css"; import { useRoomSharedKey } from "../e2ee/sharedKeyManagement"; @@ -39,7 +39,11 @@ export const ShareModal: FC = ({ room, open, onDismiss }) => {

{t("Copy and share this call link")}

From 01ec38493a711886fbad41fca2e008fe97fe43f5 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 19 Sep 2023 22:04:37 +0100 Subject: [PATCH 3/3] Be consistent with imports --- src/home/CallList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/home/CallList.tsx b/src/home/CallList.tsx index 298b9654..ac501e41 100644 --- a/src/home/CallList.tsx +++ b/src/home/CallList.tsx @@ -17,7 +17,7 @@ limitations under the License. import { Link } from "react-router-dom"; import { MatrixClient } from "matrix-js-sdk/src/client"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; -import { Room } from "matrix-js-sdk"; +import { Room } from "matrix-js-sdk/src/models/room"; import { CopyButton } from "../button"; import { Avatar, Size } from "../Avatar";