diff --git a/src/frontend/src/features/rooms/livekit/components/Info.tsx b/src/frontend/src/features/rooms/livekit/components/Info.tsx index c4c13690..4501593a 100644 --- a/src/frontend/src/features/rooms/livekit/components/Info.tsx +++ b/src/frontend/src/features/rooms/livekit/components/Info.tsx @@ -1,5 +1,5 @@ import { useTranslation } from 'react-i18next' -import { useEffect, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import { VStack } from '@/styled-system/jsx' import { css } from '@/styled-system/css' import { RiCheckLine, RiFileCopyLine } from '@remixicon/react' @@ -26,6 +26,29 @@ export const Info = () => { const telephony = useTelephony() + const isTelephonyReadyForUse = useMemo(() => { + return telephony?.enabled && data?.pin_code + }, [telephony?.enabled, data?.pin_code]) + + const clipboardContent = useMemo(() => { + if (isTelephonyReadyForUse) { + return [ + t('roomInformation.clipboard.url', { roomUrl }), + t('roomInformation.clipboard.numberAndPin', { + phoneNumber: telephony?.internationalPhoneNumber, + pinCode: formatPinCode(data?.pin_code), + }), + ].join('\n') + } + return roomUrl + }, [ + isTelephonyReadyForUse, + roomUrl, + telephony?.internationalPhoneNumber, + data?.pin_code, + t, + ]) + return (
{ {roomUrl} - {telephony?.enabled && data?.pin_code && ( + {isTelephonyReadyForUse && ( <> {t('roomInformation.phone.call')} ( @@ -73,7 +96,7 @@ export const Info = () => { variant={isCopied ? 'success' : 'tertiaryText'} aria-label={t('roomInformation.button.ariaLabel')} onPress={() => { - navigator.clipboard.writeText(roomUrl) + navigator.clipboard.writeText(clipboardContent) setIsCopied(true) }} data-attr="copy-info-sidepannel" diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index 4db7930d..bebb687c 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -233,6 +233,10 @@ "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}}" } } }, diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index 1b5c4c3e..9cc87c4e 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -233,6 +233,10 @@ "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}}" } } }, diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index a3d5a077..8eb5bfea 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -233,6 +233,10 @@ "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}}" } } }, diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json index 56d9bc0a..3ed64b8a 100644 --- a/src/frontend/src/locales/nl/rooms.json +++ b/src/frontend/src/locales/nl/rooms.json @@ -233,6 +233,10 @@ "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}}" } } },