diff --git a/src/frontend/src/features/home/components/LaterMeetingDialog.tsx b/src/frontend/src/features/home/components/LaterMeetingDialog.tsx index e61b579b..74d3ca50 100644 --- a/src/frontend/src/features/home/components/LaterMeetingDialog.tsx +++ b/src/frontend/src/features/home/components/LaterMeetingDialog.tsx @@ -1,20 +1,26 @@ -import { useEffect, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import { getRouteUrl } from '@/navigation/getRouteUrl' -import { Button, Dialog, type DialogProps, P, Text } from '@/primitives' +import { Bold, Button, Dialog, type DialogProps, P, Text } from '@/primitives' import { HStack } from '@/styled-system/jsx' import { RiCheckLine, RiFileCopyLine, RiSpam2Fill } from '@remixicon/react' import { css } from '@/styled-system/css' +import { ApiRoom } from '@/features/rooms/api/ApiRoom' +import { useTelephony } from '@/features/rooms/livekit/hooks/useTelephony' +import { formatPinCode } from '@/features/rooms/utils/telephony' // fixme - duplication with the InviteDialog export const LaterMeetingDialog = ({ - roomId, + room, ...dialogProps -}: { roomId: string } & Omit) => { - const { t } = useTranslation('home') - const roomUrl = getRouteUrl('room', roomId) +}: { room: null | ApiRoom } & Omit) => { + const { t } = useTranslation('home', { keyPrefix: 'laterMeetingDialog' }) + + const roomUrl = room && getRouteUrl('room', room?.slug) + const telephony = useTelephony() const [isCopied, setIsCopied] = useState(false) + const [isRoomUrlCopied, setIsRoomUrlCopied] = useState(false) useEffect(() => { if (isCopied) { @@ -25,76 +31,194 @@ export const LaterMeetingDialog = ({ const [isHovered, setIsHovered] = useState(false) + useEffect(() => { + if (isRoomUrlCopied) { + const timeout = setTimeout(() => setIsRoomUrlCopied(false), 3000) + return () => clearTimeout(timeout) + } + }, [isRoomUrlCopied]) + + const isTelephonyReadyForUse = useMemo(() => { + return telephony?.enabled && room?.pin_code + }, [telephony?.enabled, room?.pin_code]) + + const clipboardContent = useMemo(() => { + if (isTelephonyReadyForUse) { + return [ + t('clipboard.url', { roomUrl }), + t('clipboard.numberAndPin', { + phoneNumber: telephony?.internationalPhoneNumber, + pinCode: formatPinCode(room?.pin_code), + }), + ].join('\n') + } + return roomUrl + }, [ + isTelephonyReadyForUse, + roomUrl, + telephony?.internationalPhoneNumber, + room?.pin_code, + t, + ]) + return ( - -

{t('laterMeetingDialog.description')}

- + )} - )} - - )} - - -
- -
- - {t('laterMeetingDialog.permissions')} - - +
+ + {t('phone.call')} ({telephony?.country}){' '} + {telephony?.internationalPhoneNumber} + + + {t('phone.pinCode')}{' '} + {formatPinCode(room?.pin_code)} + +
+ {clipboardContent && ( + + )} + + ) : ( + + )} + +
+ +
+ + {t('permissions')} + + + + )} ) } diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx index ecfd243c..aa18afda 100644 --- a/src/frontend/src/features/home/routes/Home.tsx +++ b/src/frontend/src/features/home/routes/Home.tsx @@ -18,6 +18,7 @@ import { menuRecipe } from '@/primitives/menuRecipe.ts' import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices' import { useConfig } from '@/api/useConfig' import { LoginButton } from '@/components/LoginButton' +import { ApiRoom } from '@/features/rooms/api/ApiRoom' const Columns = ({ children }: { children?: ReactNode }) => { return ( @@ -153,7 +154,7 @@ export const Home = () => { } = usePersistentUserChoices() const { mutateAsync: createRoom } = useCreateRoom() - const [laterRoomId, setLaterRoomId] = useState(null) + const [laterRoom, setLaterRoom] = useState(null) const { data } = useConfig() @@ -202,7 +203,7 @@ export const Home = () => { onAction={() => { const slug = generateRoomId() createRoom({ slug, username }).then((data) => - setLaterRoomId(data.slug) + setLaterRoom(data) ) }} data-attr="create-option-later" @@ -251,8 +252,8 @@ export const Home = () => { setLaterRoomId(null)} + room={laterRoom} + onOpenChange={() => setLaterRoom(null)} /> diff --git a/src/frontend/src/locales/de/home.json b/src/frontend/src/locales/de/home.json index e8b02889..f991d20b 100644 --- a/src/frontend/src/locales/de/home.json +++ b/src/frontend/src/locales/de/home.json @@ -20,9 +20,18 @@ "laterMeetingDialog": { "heading": "Ihre Zugangsdaten", "description": "Teilen Sie diese Informationen mit den Gästen. Sie können dem Meeting beitreten, ohne sich anmelden zu müssen. Dieses Meeting ist dauerhaft und kann wiederverwendet werden.", - "copy": "Meeting-Link kopieren", - "copied": "Link in die Zwischenablage kopiert", - "permissions": "Personen mit diesem Link benötigen keine Genehmigung, um diesem Meeting beizutreten." + "permissions": "Personen mit diesem Link benötigen keine Genehmigung, um diesem Meeting beizutreten.", + "copy": "Informationen kopieren", + "copied": "Informationen kopiert", + "copyUrl": "Meeting-Link kopieren", + "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}}" + } }, "introSlider": { "previous": { diff --git a/src/frontend/src/locales/en/home.json b/src/frontend/src/locales/en/home.json index ae34cbfe..dad09df8 100644 --- a/src/frontend/src/locales/en/home.json +++ b/src/frontend/src/locales/en/home.json @@ -20,9 +20,18 @@ "laterMeetingDialog": { "heading": "Your connection details", "description": "Share this information with the guests. They will be able to join the meeting without needing to sign in. This meeting is permanent and can be reused.", - "copy": "Copy the meeting link", - "copied": "Link copied to clipboard", - "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.", + "copy": "Copy information", + "copied": "Information copied to clipboard", + "copyUrl": "Copy the meeting link", + "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}}" + } }, "introSlider": { "previous": { diff --git a/src/frontend/src/locales/fr/home.json b/src/frontend/src/locales/fr/home.json index c3beca8e..97cacaf2 100644 --- a/src/frontend/src/locales/fr/home.json +++ b/src/frontend/src/locales/fr/home.json @@ -19,10 +19,19 @@ }, "laterMeetingDialog": { "heading": "Vos informations de connexion", - "copy": "Copier le lien de la réunion", - "copied": "Lien copié dans le presse-papiers", - "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 invités. Ils pourront rejoindre la réunion sans avoir besoin de se connecter. Cette réunion est permanente et peut être réutilisée.", + "permissions": "Les personnes disposant de ce lien n'ont pas besoin de votre autorisation pour rejoindre cette réunion.", + "copy": "Copier les informations", + "copied": "Copiées dans le presse-papiers", + "copyUrl": "Copier le lien de la 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}}" + } }, "introSlider": { "previous": { diff --git a/src/frontend/src/locales/nl/home.json b/src/frontend/src/locales/nl/home.json index f9f733f9..b072067d 100644 --- a/src/frontend/src/locales/nl/home.json +++ b/src/frontend/src/locales/nl/home.json @@ -20,9 +20,18 @@ "laterMeetingDialog": { "heading": "Uw verbindingsgegevens", "description": "Deel deze informatie met de genodigden. Zij kunnen deelnemen aan de vergadering zonder zich aan te melden. Deze vergadering is permanent en kan hergebruikt worden.", - "copy": "Kopieer de vergaderlink", - "copied": "Link gekopieerd naar klembord", - "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.", + "copy": "Informatie kopiëren", + "copied": "Informatie gekopieerd", + "copyUrl": "Kopieer de vergaderlink", + "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}}" + } }, "introSlider": { "previous": {