rzerres/element-call
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Include the room name in the generated URL

Browse Source
This commit is contained in:
David Baker
2023-09-19 18:23:44 +01:00
parent 728e37b23c
commit 2753f04f0b
5 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/home/CallList.tsx
View File

@@ -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 (
<div className={styles.callTile}>
<Link to={`/room/#?roomId=${roomId}`} className={styles.callTileLink}>
<Avatar id={roomId} name={name} size={Size.LG} src={avatarUrl} />
<Link
to={`/room/#?roomId=${room.roomId}`}
className={styles.callTileLink}
>
<Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />
<div className={styles.callInfo}>
<Body overflowEllipsis fontWeight="semiBold">
{name}
@@ -78,7 +82,7 @@ function CallTile({ name, avatarUrl, roomId }: CallTileProps) {
<CopyButton
className={styles.copyButton}
variant="icon"
value={getRoomUrl(roomId, roomSharedKey ?? undefined)}
value={getRoomUrl(room.roomId, room.name, roomSharedKey ?? undefined)}
/>
</div>
);

12
src/matrix-utils.ts
View File

@@ -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(

6
src/room/AppSelectionModal.tsx
View File

@@ -45,10 +45,14 @@ export const AppSelectionModal: FC<Props> = ({ 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

2
src/room/GroupCallView.tsx
View File

@@ -302,7 +302,7 @@ export function GroupCallView({
const shareModal = (
<ShareModal
roomId={rtcSession.room.roomId}
room={rtcSession.room}
open={shareModalOpen}
onDismiss={onDismissShareModal}
/>

9
src/room/ShareModal.tsx
View File

@@ -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<Props> = ({ roomId, open, onDismiss }) => {
export const ShareModal: FC<Props> = ({ room, open, onDismiss }) => {
const { t } = useTranslation();
const roomSharedKey = useRoomSharedKey(roomId);
const roomSharedKey = useRoomSharedKey(room.roomId);
return (
<Modal title={t("Share this call")} open={open} onDismiss={onDismiss}>
<p>{t("Copy and share this call link")}</p>
<CopyButton
className={styles.copyButton}
value={getRoomUrl(roomId, roomSharedKey ?? undefined)}
value={getRoomUrl(room.roomId, room.name, roomSharedKey ?? undefined)}
data-testid="modal_inviteLink"
/>
</Modal>