Merge pull request #1641 from robintown/invite-modal

Implement the new invite modal designs

src/room/GroupCallView.tsx

@@ -47,7 +47,7 @@ import { useEnableE2EE } from "../settings/useSetting";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
-import { ShareModal } from "./ShareModal";
+import { InviteModal } from "./InviteModal";
 
 declare global {
   interface Window {
@@ -267,15 +267,15 @@ export function GroupCallView({
 
   const joinRule = useJoinRule(rtcSession.room);
 
-  const [shareModalOpen, setShareModalOpen] = useState(false);
-  const onDismissShareModal = useCallback(
-    () => setShareModalOpen(false),
-    [setShareModalOpen]
+  const [shareModalOpen, setInviteModalOpen] = useState(false);
+  const onDismissInviteModal = useCallback(
+    () => setInviteModalOpen(false),
+    [setInviteModalOpen]
   );
 
   const onShareClickFn = useCallback(
-    () => setShareModalOpen(true),
-    [setShareModalOpen]
+    () => setInviteModalOpen(true),
+    [setInviteModalOpen]
   );
   const onShareClick = joinRule === JoinRule.Public ? onShareClickFn : null;
 
@@ -318,10 +318,10 @@ export function GroupCallView({
   }
 
   const shareModal = (
-    <ShareModal
+    <InviteModal
       room={rtcSession.room}
       open={shareModalOpen}
-      onDismiss={onDismissShareModal}
+      onDismiss={onDismissInviteModal}
     />
   );
 

src/room/InCallView.tsx

@@ -69,7 +69,7 @@ import { useWakeLock } from "../useWakeLock";
 import { useMergedRefs } from "../useMergedRefs";
 import { MuteStates } from "./MuteStates";
 import { MatrixInfo } from "./VideoPreview";
-import { ShareButton } from "../button/ShareButton";
+import { InviteButton } from "../button/InviteButton";
 import { LayoutToggle } from "./LayoutToggle";
 import {
   ECAddonConnectionState,
@@ -416,7 +416,7 @@ export function InCallView({
           </LeftNav>
           <RightNav>
             {!reducedControls && onShareClick !== null && (
-              <ShareButton onClick={onShareClick} />
+              <InviteButton onClick={onShareClick} />
             )}
           </RightNav>
         </Header>

src/room/InviteModal.module.css

@@ -14,6 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.copyButton {
+.url {
+  text-align: center;
+  color: var(--cpd-color-text-secondary);
+  margin-block-end: var(--cpd-space-8x);
+}
+
+.button {
   width: 100%;
 }

src/room/InviteModal.tsx

@@ -0,0 +1,84 @@
+/*
+Copyright 2022 - 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Room } from "matrix-js-sdk";
+import { Button, Text } from "@vector-im/compound-web";
+import LinkIcon from "@vector-im/compound-design-tokens/icons/link.svg?react";
+import CheckIcon from "@vector-im/compound-design-tokens/icons/check.svg?react";
+import useClipboard from "react-use-clipboard";
+
+import { Modal } from "../Modal";
+import { getAbsoluteRoomUrl } from "../matrix-utils";
+import styles from "./InviteModal.module.css";
+import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { Toast } from "../Toast";
+
+interface Props {
+  room: Room;
+  open: boolean;
+  onDismiss: () => void;
+}
+
+export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
+  const { t } = useTranslation();
+  const roomSharedKey = useRoomSharedKey(room.roomId);
+  const url = useMemo(
+    () =>
+      getAbsoluteRoomUrl(room.roomId, room.name, roomSharedKey ?? undefined),
+    [room, roomSharedKey]
+  );
+  const [, setCopied] = useClipboard(url);
+  const [toastOpen, setToastOpen] = useState(false);
+  const onToastDismiss = useCallback(() => setToastOpen(false), [setToastOpen]);
+
+  const onButtonClick = useCallback(
+    (e: MouseEvent) => {
+      e.stopPropagation();
+      setCopied();
+      onDismiss();
+      setToastOpen(true);
+    },
+    [setCopied, onDismiss]
+  );
+
+  return (
+    <>
+      <Modal title={t("Invite to this call")} open={open} onDismiss={onDismiss}>
+        <Text className={styles.url} size="sm" weight="semibold">
+          {url}
+        </Text>
+        <Button
+          className={styles.button}
+          Icon={LinkIcon}
+          onClick={onButtonClick}
+          data-testid="modal_inviteLink"
+        >
+          {t("Copy link")}
+        </Button>
+      </Modal>
+      <Toast
+        open={toastOpen}
+        onDismiss={onToastDismiss}
+        autoDismiss={2000}
+        Icon={CheckIcon}
+      >
+        {t("Link copied to clipboard")}
+      </Toast>
+    </>
+  );
+};

src/room/LobbyView.tsx

@@ -27,7 +27,7 @@ import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { useLocationNavigation } from "../useLocationNavigation";
 import { MatrixInfo, VideoPreview } from "./VideoPreview";
 import { MuteStates } from "./MuteStates";
-import { ShareButton } from "../button/ShareButton";
+import { InviteButton } from "../button/InviteButton";
 import {
   HangupButton,
   MicButton,
@@ -108,7 +108,7 @@ export const LobbyView: FC<Props> = ({
               />
             </LeftNav>
             <RightNav>
-              {onShareClick !== null && <ShareButton onClick={onShareClick} />}
+              {onShareClick !== null && <InviteButton onClick={onShareClick} />}
             </RightNav>
           </Header>
         )}

src/room/ShareModal.tsx

@@ -1,51 +0,0 @@
-/*
-Copyright 2022 - 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-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 { getAbsoluteRoomUrl } from "../matrix-utils";
-import styles from "./ShareModal.module.css";
-import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
-
-interface Props {
-  room: Room;
-  open: boolean;
-  onDismiss: () => void;
-}
-
-export const ShareModal: FC<Props> = ({ room, open, onDismiss }) => {
-  const { t } = useTranslation();
-  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={getAbsoluteRoomUrl(
-          room.roomId,
-          room.name,
-          roomSharedKey ?? undefined
-        )}
-        data-testid="modal_inviteLink"
-      />
-    </Modal>
-  );
-};