diff --git a/src/frontend/src/features/rooms/components/InviteDialog.tsx b/src/frontend/src/features/rooms/components/InviteDialog.tsx index 5bafadc4..624f3f5d 100644 --- a/src/frontend/src/features/rooms/components/InviteDialog.tsx +++ b/src/frontend/src/features/rooms/components/InviteDialog.tsx @@ -1,6 +1,6 @@ import { useTranslation } from 'react-i18next' import { getRouteUrl } from '@/navigation/getRouteUrl' -import { Div, Button, type DialogProps, P } from '@/primitives' +import { Div, Button, type DialogProps, P, Bold } from '@/primitives' import { HStack, styled, VStack } from '@/styled-system/jsx' import { Heading, Dialog } from 'react-aria-components' import { Text, text } from '@/primitives/Text' @@ -10,10 +10,12 @@ import { RiFileCopyLine, RiSpam2Fill, } from '@remixicon/react' -import { useEffect, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import { css } from '@/styled-system/css' import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData' import { ApiAccessLevel } from '@/features/rooms/api/ApiRoom' +import { useTelephony } from '@/features/rooms/livekit/hooks/useTelephony' +import { formatPinCode } from '@/features/rooms/utils/telephony' // fixme - extract in a proper primitive this dialog without overlay const StyledRACDialog = styled(Dialog, { @@ -37,11 +39,12 @@ const StyledRACDialog = styled(Dialog, { }) export const InviteDialog = (props: Omit) => { - const { t } = useTranslation('rooms') + const { t } = useTranslation('rooms', { keyPrefix: 'shareDialog' }) const roomData = useRoomData() const roomUrl = getRouteUrl('room', roomData?.slug) const [isCopied, setIsCopied] = useState(false) + const [isRoomUrlCopied, setIsRoomUrlCopied] = useState(false) useEffect(() => { if (isCopied) { @@ -50,6 +53,38 @@ export const InviteDialog = (props: Omit) => { } }, [isCopied]) + useEffect(() => { + if (isRoomUrlCopied) { + const timeout = setTimeout(() => setIsRoomUrlCopied(false), 3000) + return () => clearTimeout(timeout) + } + }, [isRoomUrlCopied]) + + const telephony = useTelephony() + + const isTelephonyReadyForUse = useMemo(() => { + return telephony?.enabled && roomData?.pin_code + }, [telephony?.enabled, roomData?.pin_code]) + + const clipboardContent = useMemo(() => { + if (isTelephonyReadyForUse) { + return [ + t('clipboard.url', { roomUrl }), + t('clipboard.numberAndPin', { + phoneNumber: telephony?.internationalPhoneNumber, + pinCode: formatPinCode(roomData?.pin_code), + }), + ].join('\n') + } + return roomUrl + }, [ + isTelephonyReadyForUse, + roomUrl, + telephony?.internationalPhoneNumber, + roomData?.pin_code, + t, + ]) + return ( {({ close }) => ( @@ -60,7 +95,7 @@ export const InviteDialog = (props: Omit) => { style={{ maxWidth: '100%', overflow: 'hidden' }} > - {t('shareDialog.heading')} + {t('heading')}
-

{t('shareDialog.description')}

- +

{t('description')}

+ {isTelephonyReadyForUse ? ( +
+
+ + {roomUrl?.replace(/^https?:\/\//, '')} + + {isTelephonyReadyForUse && roomUrl && ( + + )} +
+
+ + {t('phone.call')} ({telephony?.country}){' '} + {telephony?.internationalPhoneNumber} + + + {t('phone.pinCode')}{' '} + {formatPinCode(roomData?.pin_code)} + +
+ {clipboardContent && ( + + )} +
+ ) : ( + + )} {roomData?.access_level === ApiAccessLevel.PUBLIC && (
) => { />
- {t('shareDialog.permissions')} + {t('permissions')}
)} diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index 34690aa6..10480c01 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -53,12 +53,20 @@ }, "leaveRoomPrompt": "Dadurch verlassen Sie das Meeting.", "shareDialog": { - "copy": "Meeting-Link kopieren", - "copyButton": "Link kopieren", - "copied": "Link in die Zwischenablage kopiert", + "copy": "Informationen kopieren", + "copyUrl": "Link kopieren", + "copied": "Informationen kopiert", "heading": "Ihr Meeting ist bereit", "description": "Teilen Sie diesen Link mit Personen, die Sie zum Meeting einladen möchten.", - "permissions": "Personen mit diesem Link benötigen keine Erlaubnis, um diesem Meeting beizutreten." + "permissions": "Personen mit diesem Link benötigen keine Erlaubnis, um diesem Meeting beizutreten.", + "phone": { + "call": "Rufen Sie an:", + "pinCode": "Code:" + }, + "clipboard": { + "url": "Um an der Videokonferenz teilzunehmen, klicken Sie auf diesen Link: {{roomUrl}}", + "numberAndPin": "Um telefonisch teilzunehmen, wählen Sie {{phoneNumber}} und geben Sie diesen Code ein: {{pinCode}}" + } }, "mediaErrorDialog": { "DeviceInUse": { diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index ee34d8eb..f27bcb38 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -53,12 +53,20 @@ }, "leaveRoomPrompt": "This will make you leave the meeting.", "shareDialog": { - "copy": "Copy the meeting link", - "copyButton": "Copy link", - "copied": "Link copied to clipboard", + "copy": "Copy information", + "copyUrl": "Copy link", + "copied": "Information copied to clipboard", "heading": "Your meeting is ready", "description": "Share this link with people you want to invite to the meeting.", - "permissions": "People with this link do not need your permission to join this meeting." + "permissions": "People with this link do not need your permission to join this meeting.", + "phone": { + "call": "Call:", + "pinCode": "Code:" + }, + "clipboard": { + "url": "To join the video conference, click on this link: {{roomUrl}}", + "numberAndPin": "To join by phone, dial {{phoneNumber}} and enter this code: {{pinCode}}" + } }, "mediaErrorDialog": { "DeviceInUse": { diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index 36f5438a..28dbe207 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -53,12 +53,20 @@ }, "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion.", "shareDialog": { - "copy": "Copier le lien de la réunion", - "copyButton": "Copier le lien", - "copied": "Lien copié dans le presse-papiers", + "copy": "Copier les informations", + "copyUrl": "Copier le lien", + "copied": "Copiées dans le presse-papiers", "heading": "Votre réunion est prête", - "description": "Partagez ce lien avec les personnes que vous souhaitez inviter à la réunion.", - "permissions": "Les personnes disposant de ce lien n'ont pas besoin de votre autorisation pour rejoindre cette réunion." + "description": "Partagez ces informations avec les personnes que vous souhaitez inviter à la réunion.", + "permissions": "Les personnes disposant de ce lien n'ont pas besoin de votre autorisation pour rejoindre cette réunion.", + "phone": { + "call": "Appelez le :", + "pinCode": "Code :" + }, + "clipboard": { + "url": "Pour participer à la visioconférence, cliquez sur ce lien : {{roomUrl}}", + "numberAndPin": "Pour participer par téléphone, composez le {{phoneNumber}} et saisissez ce code : {{pinCode}}" + } }, "mediaErrorDialog": { "DeviceInUse": { diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json index d3ef2626..f727b1fd 100644 --- a/src/frontend/src/locales/nl/rooms.json +++ b/src/frontend/src/locales/nl/rooms.json @@ -53,12 +53,20 @@ }, "leaveRoomPrompt": "Dat zal u de vergadering doen verlaten.", "shareDialog": { - "copy": "Kopieer de vergaderlink", - "copyButton": "Kopieerlink", - "copied": "Link gekopieerd naar het klembord", + "copy": "Informatie kopiëren", + "copyUrl": "Kopieerlink", + "copied": "Informatie gekopieerd", "heading": "Uw vergadering is klaar", "description": "Deel deze link met mensen die u wilt uitnodigen voor de vergadering.", - "permissions": "Mensen met deze link hebben uw toestemming niet nodig om deel te nemen aan deze vergadering." + "permissions": "Mensen met deze link hebben uw toestemming niet nodig om deel te nemen aan deze vergadering.", + "phone": { + "call": "Bel:", + "pinCode": "Code:" + }, + "clipboard": { + "url": "Klik op deze link om deel te nemen aan de videoconferentie: {{roomUrl}}", + "numberAndPin": "Bel {{phoneNumber}} en voer deze code in om telefonisch deel te nemen: {{pinCode}}" + } }, "mediaErrorDialog": { "DeviceInUse": {