diff --git a/src/frontend/src/features/rooms/livekit/components/Info.tsx b/src/frontend/src/features/rooms/livekit/components/Info.tsx index a0aadaae..c4c13690 100644 --- a/src/frontend/src/features/rooms/livekit/components/Info.tsx +++ b/src/frontend/src/features/rooms/livekit/components/Info.tsx @@ -3,9 +3,11 @@ import { useEffect, useState } from 'react' import { VStack } from '@/styled-system/jsx' import { css } from '@/styled-system/css' import { RiCheckLine, RiFileCopyLine } from '@remixicon/react' -import { Button, Div, Text } from '@/primitives' +import { Bold, Button, Div, Text } from '@/primitives' import { getRouteUrl } from '@/navigation/getRouteUrl' import { useRoomData } from '../hooks/useRoomData' +import { formatPinCode } from '../../utils/telephony' +import { useTelephony } from '../hooks/useTelephony' export const Info = () => { const { t } = useTranslation('rooms', { keyPrefix: 'info' }) @@ -22,6 +24,8 @@ export const Info = () => { const data = useRoomData() const roomUrl = getRouteUrl('room', data?.slug) + const telephony = useTelephony() + return (
{ > {t('roomInformation.title')} - - {roomUrl} - +
+ + {roomUrl} + + {telephony?.enabled && data?.pin_code && ( + <> + + {t('roomInformation.phone.call')} ( + {telephony?.country}) {telephony?.internationalPhoneNumber} + + + {t('roomInformation.phone.pinCode')}{' '} + {formatPinCode(data?.pin_code)} + + + )} +