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 { Link } from "react-router-dom";
import { MatrixClient } from "matrix-js-sdk/src/client"; import { MatrixClient } from "matrix-js-sdk/src/client";
import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { Room } from "matrix-js-sdk";
import { CopyButton } from "../button"; import { CopyButton } from "../button";
import { Avatar, Size } from "../Avatar"; import { Avatar, Size } from "../Avatar";
@@ -40,7 +41,7 @@ export function CallList({ rooms, client }: CallListProps) {
client={client} client={client}
name={roomName} name={roomName}
avatarUrl={avatarUrl} avatarUrl={avatarUrl}
roomId={room.roomId} room={room}
participants={participants} participants={participants}
/> />
))} ))}
@@ -57,17 +58,20 @@ export function CallList({ rooms, client }: CallListProps) {
interface CallTileProps { interface CallTileProps {
name: string; name: string;
avatarUrl: string; avatarUrl: string;
roomId: string; room: Room;
participants: RoomMember[]; participants: RoomMember[];
client: MatrixClient; client: MatrixClient;
} }
function CallTile({ name, avatarUrl, roomId }: CallTileProps) { function CallTile({ name, avatarUrl, room }: CallTileProps) {
const roomSharedKey = useRoomSharedKey(roomId); const roomSharedKey = useRoomSharedKey(room.roomId);
return ( return (
<div className={styles.callTile}> <div className={styles.callTile}>
<Link to={`/room/#?roomId=${roomId}`} className={styles.callTileLink}> <Link
<Avatar id={roomId} name={name} size={Size.LG} src={avatarUrl} /> to={`/room/#?roomId=${room.roomId}`}
className={styles.callTileLink}
>
<Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />
<div className={styles.callInfo}> <div className={styles.callInfo}>
<Body overflowEllipsis fontWeight="semiBold"> <Body overflowEllipsis fontWeight="semiBold">
{name} {name}
@@ -78,7 +82,7 @@ function CallTile({ name, avatarUrl, roomId }: CallTileProps) {
<CopyButton <CopyButton
className={styles.copyButton} className={styles.copyButton}
variant="icon" variant="icon"
value={getRoomUrl(roomId, roomSharedKey ?? undefined)} value={getRoomUrl(room.roomId, room.name, roomSharedKey ?? undefined)}
/> />
</div> </div>
); );

12
src/matrix-utils.ts
View File

@@ -345,10 +345,14 @@ export async function createRoom(
* @param password * @param password
* @returns * @returns
*/ */
export function getRoomUrl(roomId: string, password?: string): string { export function getRoomUrl(
return `${window.location.protocol}//${ roomId: string,
window.location.host roomName?: string,
}/room/#?roomId=${roomId}${password ? "&" + PASSWORD_STRING + password : ""}`; password?: string
): string {
return `${window.location.protocol}//${window.location.host}/#${
roomName ? "/" + roomAliasLocalpartFromRoomName(roomName) : ""
}?roomId=${roomId}${password ? "&" + PASSWORD_STRING + password : ""}`;
} }
export function getAvatarUrl( 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 roomSharedKey = useRoomSharedKey(roomId ?? "");
const appUrl = useMemo(() => { const appUrl = useMemo(() => {
// If the room ID is not known, fall back to the URL of the current page // 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( const url = new URL(
roomId === null roomId === null
? window.location.href ? 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 // 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 // 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 = ( const shareModal = (
<ShareModal <ShareModal
roomId={rtcSession.room.roomId} room={rtcSession.room}
open={shareModalOpen} open={shareModalOpen}
onDismiss={onDismissShareModal} onDismiss={onDismissShareModal}
/> />

9
src/room/ShareModal.tsx
View File

@@ -16,6 +16,7 @@ limitations under the License.
import { FC } from "react"; import { FC } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Room } from "matrix-js-sdk";
import { Modal } from "../Modal"; import { Modal } from "../Modal";
import { CopyButton } from "../button"; import { CopyButton } from "../button";
@@ -24,21 +25,21 @@ import styles from "./ShareModal.module.css";
import { useRoomSharedKey } from "../e2ee/sharedKeyManagement"; import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
interface Props { interface Props {
roomId: string; room: Room;
open: boolean; open: boolean;
onDismiss: () => void; onDismiss: () => void;
} }
export const ShareModal: FC<Props> = ({ roomId, open, onDismiss }) => { export const ShareModal: FC<Props> = ({ room, open, onDismiss }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const roomSharedKey = useRoomSharedKey(roomId); const roomSharedKey = useRoomSharedKey(room.roomId);
return ( return (
<Modal title={t("Share this call")} open={open} onDismiss={onDismiss}> <Modal title={t("Share this call")} open={open} onDismiss={onDismiss}>
<p>{t("Copy and share this call link")}</p> <p>{t("Copy and share this call link")}</p>
<CopyButton <CopyButton
className={styles.copyButton} className={styles.copyButton}
value={getRoomUrl(roomId, roomSharedKey ?? undefined)} value={getRoomUrl(room.roomId, room.name, roomSharedKey ?? undefined)}
data-testid="modal_inviteLink" data-testid="modal_inviteLink"
/> />
</Modal> </Modal>