Add room id routing

src/CallList.jsx

@@ -1,22 +1,23 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Link } from "react-router-dom";
 import { CopyButton } from "./button";
 import { Facepile } from "./Facepile";
 import { Avatar } from "./Avatar";
 import { ReactComponent as VideoIcon } from "./icons/Video.svg";
 import styles from "./CallList.module.css";
+import { getRoomUrl } from "./ConferenceCallManagerHooks";
 
 export function CallList({ title, rooms }) {
   return (
     <>
       <h3>{title}</h3>
       <div className={styles.callList}>
-        {rooms.map(({ roomId, roomName, roomUrl, avatarUrl, participants }) => (
+        {rooms.map(({ roomId, roomName, avatarUrl, participants }) => (
           <CallTile
             key={roomId}
             name={roomName}
             avatarUrl={avatarUrl}
-            roomUrl={roomUrl}
+            roomId={roomId}
             participants={participants}
           />
         ))}
@@ -25,9 +26,9 @@ export function CallList({ title, rooms }) {
   );
 }
 
-function CallTile({ name, avatarUrl, roomUrl, participants }) {
+function CallTile({ name, avatarUrl, roomId, participants }) {
   return (
-    <Link to={roomUrl} className={styles.callTile}>
+    <Link to={`/room/${roomId}`} className={styles.callTile}>
       <Avatar
         size="md"
         bgKey={name}
@@ -37,13 +38,13 @@ function CallTile({ name, avatarUrl, roomUrl, participants }) {
       />
       <div className={styles.callInfo}>
         <h5>{name}</h5>
-        <p>{roomUrl}</p>
+        <p>{roomId}</p>
         {participants && <Facepile participants={participants} />}
       </div>
       <CopyButton
         className={styles.copyButton}
         variant="icon"
-        value={roomUrl}
+        value={getRoomUrl(roomId)}
       />
     </Link>
   );

src/ConferenceCallManagerHooks.jsx

@@ -519,10 +519,9 @@ export function useGroupCallRooms(client) {
         const groupCall = client.getGroupCallForRoom(room.roomId);
 
         return {
-          roomId: room.roomId,
+          roomId: room.getCanonicalAlias() || room.roomId,
           roomName: room.name,
           avatarUrl: null,
-          roomUrl: `/room/${room.getCanonicalAlias() || room.roomId}`,
           room,
           groupCall,
           participants: [...groupCall.participants],
@@ -554,11 +553,10 @@ export function usePublicRooms(client, publicSpaceRoomId, maxRooms = 50) {
         const filteredRooms = rooms
           .filter((room) => room.room_type !== "m.space")
           .map((room) => ({
-            roomId: room.room_id,
+            roomId: room.room_alias || room.room_id,
             roomName: room.name,
             avatarUrl: null,
             room,
-            roomUrl: `/room/${room.room_id}`,
             participants: [],
           }));
 
@@ -571,3 +569,17 @@ export function usePublicRooms(client, publicSpaceRoomId, maxRooms = 50) {
 
   return rooms;
 }
+
+export function getRoomUrl(roomId) {
+  if (roomId.startsWith("#")) {
+    const [localPart, host] = roomId.replace("#", "").split(":");
+
+    if (host !== window.location.host) {
+      return `${window.location.host}/rooms/${roomId}`;
+    } else {
+      return `${window.location.host}/${localPart}`;
+    }
+  } else {
+    return `${window.location.host}/rooms/${roomId}`;
+  }
+}

src/InviteModal.jsx

@@ -1,13 +1,14 @@
 import React from "react";
 import { Modal, ModalContent } from "./Modal";
 import { CopyButton } from "./button";
+import { getRoomUrl } from "./ConferenceCallManagerHooks";
 
-export function InviteModal({ roomUrl, ...rest }) {
+export function InviteModal({ roomId, ...rest }) {
   return (
     <Modal title="Invite People" isDismissable {...rest}>
       <ModalContent>
         <p>Copy and share this meeting link</p>
-        <CopyButton value={roomUrl} />
+        <CopyButton value={getRoomUrl(roomId)} />
       </ModalContent>
     </Modal>
   );

src/OverflowMenu.jsx

@@ -11,7 +11,7 @@ import { SettingsModal } from "./SettingsModal";
 import { InviteModal } from "./InviteModal";
 
 export function OverflowMenu({
-  roomUrl,
+  roomId,
   setShowInspector,
   showInspector,
   client,
@@ -63,7 +63,7 @@ export function OverflowMenu({
         />
       )}
       {inviteModalState.isOpen && (
-        <InviteModal roomUrl={roomUrl} {...inviteModalProps} />
+        <InviteModal roomId={roomId} {...inviteModalProps} />
       )}
     </>
   );

src/Room.jsx

@@ -131,6 +131,7 @@ export function GroupCall({ client }) {
     <div className={styles.room}>
       <GroupCallView
         client={client}
+        roomId={roomId}
         groupCall={groupCall}
         simpleGrid={simpleGrid}
       />
@@ -138,7 +139,7 @@ export function GroupCall({ client }) {
   );
 }
 
-export function GroupCallView({ client, groupCall, simpleGrid }) {
+export function GroupCallView({ client, roomId, groupCall, simpleGrid }) {
   const [showInspector, setShowInspector] = useState(false);
   const {
     state,
@@ -215,6 +216,7 @@ export function GroupCallView({ client, groupCall, simpleGrid }) {
         simpleGrid={simpleGrid}
         setShowInspector={setShowInspector}
         showInspector={showInspector}
+        roomId={roomId}
       />
     );
   } else if (state === GroupCallState.Entering) {
@@ -235,6 +237,7 @@ export function GroupCallView({ client, groupCall, simpleGrid }) {
         toggleMicrophoneMuted={toggleMicrophoneMuted}
         setShowInspector={setShowInspector}
         showInspector={showInspector}
+        roomId={roomId}
       />
     );
   }
@@ -274,6 +277,7 @@ function RoomSetupView({
   hasLocalParticipant,
   setShowInspector,
   showInspector,
+  roomId,
 }) {
   const history = useHistory();
   const { stream } = useCallFeed(localCallFeed);
@@ -332,7 +336,7 @@ function RoomSetupView({
                   onPress={toggleLocalVideoMuted}
                 />
                 <OverflowMenu
-                  roomUrl={window.location.href}
+                  roomId={roomId}
                   setShowInspector={setShowInspector}
                   showInspector={showInspector}
                   client={client}
@@ -370,6 +374,7 @@ function InRoomView({
   simpleGrid,
   setShowInspector,
   showInspector,
+  roomId,
 }) {
   const [layout, setLayout] = useVideoGridLayout();
 
@@ -457,7 +462,7 @@ function InRoomView({
           />
         )}
         <OverflowMenu
-          roomUrl={window.location.href}
+          roomId={roomId}
           setShowInspector={setShowInspector}
           showInspector={showInspector}
           client={client}