diff --git a/src/home/CallList.tsx b/src/home/CallList.tsx index bdc423cd..ac501e41 100644 --- a/src/home/CallList.tsx +++ b/src/home/CallList.tsx @@ -17,11 +17,12 @@ 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/src/models/room"; 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"; @@ -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,22 @@ 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 +84,11 @@ function CallTile({ name, avatarUrl, roomId }: 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 a9f37011..a03b4bc4 100644 --- a/src/matrix-utils.ts +++ b/src/matrix-utils.ts @@ -340,15 +340,35 @@ 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(roomId: string, password?: string): string { +export function getAbsoluteRoomUrl( + roomId: string, + roomName?: string, + password?: string +): string { return `${window.location.protocol}//${ window.location.host - }/room/#?roomId=${roomId}${password ? "&" + PASSWORD_STRING + password : ""}`; + }${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 : ""}`; } export function getAvatarUrl( diff --git a/src/room/AppSelectionModal.tsx b/src/room/AppSelectionModal.tsx index b1cc4e48..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"; @@ -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) + : 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/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..0439f10a 100644 --- a/src/room/ShareModal.tsx +++ b/src/room/ShareModal.tsx @@ -16,29 +16,34 @@ 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"; -import { getRoomUrl } from "../matrix-utils"; +import { getAbsoluteRoomUrl } from "../matrix-utils"; 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")}