🚀(paas) add PaaS deployment scripts, tested on Scalingo

Extract clipboard content logic from UI components into a separate
custom hook to decouple interface elements from clipboard functionality.

Creates a reusable hook that can better adapt to future UX changes
without requiring modifications to individual UI components.

Procfile

@@ -0,0 +1,2 @@
+web: bin/buildpack_start.sh
+postdeploy: python manage.py migrate

bin/buildpack_postcompile.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+set -o errexit    # always exit on error
+set -o pipefail   # don't ignore exit codes when piping output
+
+echo "-----> Running post-compile script"
+
+# Cleanup
+rm -rf docker docs env.d gitlint

bin/buildpack_postfrontend.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+set -o errexit    # always exit on error
+set -o pipefail   # don't ignore exit codes when piping output
+
+echo "-----> Running post-frontend script"
+
+# Move the frontend build to the nginx root and clean up
+mkdir -p build/
+mv src/frontend/dist build/frontend-out
+
+mv src/backend/* ./
+mv src/nginx/* ./
+
+echo "3.13" > .python-version

bin/buildpack_start.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# Start the Django backend server
+gunicorn -b :8000 meet.wsgi:application --log-file - &
+
+# Start the Nginx server
+bin/run &
+
+# if the current shell is killed, also terminate all its children     
+trap "pkill SIGTERM -P $$" SIGTERM                            
+
+# wait for a single child to finish,                               
+wait -n                                                  
+# then kill all the other tasks                          
+pkill -P $$

src/backend/meet/settings.py

@@ -11,11 +11,12 @@ https://docs.djangoproject.com/en/3.1/ref/settings/
 """
 
 import json
-from os import path
+from os import environ, path
 from socket import gethostbyname, gethostname
 
 from django.utils.translation import gettext_lazy as _
 
+import dj_database_url
 import sentry_sdk
 from configurations import Configuration, values
 from lasuite.configuration.values import SecretFileValue
@@ -86,7 +87,9 @@ class Base(Configuration):
 
     # Database
     DATABASES = {
-        "default": {
+        "default": dj_database_url.config()
+        if environ.get("DATABASE_URL")
+        else {
             "ENGINE": values.Value(
                 "django.db.backends.postgresql_psycopg2",
                 environ_name="DB_ENGINE",

src/backend/pyproject.toml

@@ -29,6 +29,7 @@ dependencies = [
     "Brotli==1.1.0",
     "brevo-python==1.1.2",
     "celery[redis]==5.5.3",
+    "dj-database-url==2.3.0",
     "django-configurations==2.5.1",
     "django-cors-headers==4.7.0",
     "django-countries==7.6.1",

src/backend/setup.py

@@ -0,0 +1,7 @@
+#!/usr/bin/env python
+"""Setup file for the impress module. All configuration stands in the setup.cfg file."""
+# coding: utf-8
+
+from setuptools import setup
+
+setup()

src/frontend/src/features/home/components/LaterMeetingDialog.tsx

@@ -1,100 +1,187 @@
-import { useEffect, useState } from 'react'
+import { 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 { ApiAccessLevel, ApiRoom } from '@/features/rooms/api/ApiRoom'
+import { useTelephony } from '@/features/rooms/livekit/hooks/useTelephony'
+import { formatPinCode } from '@/features/rooms/utils/telephony'
+import { useCopyRoomToClipboard } from '@/features/rooms/livekit/hooks/useCopyRoomToClipboard'
 
 // fixme - duplication with the InviteDialog
 export const LaterMeetingDialog = ({
-  roomId,
+  room,
   ...dialogProps
-}: { roomId: string } & Omit<DialogProps, 'title'>) => {
-  const { t } = useTranslation('home')
-  const roomUrl = getRouteUrl('room', roomId)
+}: { room: null | ApiRoom } & Omit<DialogProps, 'title'>) => {
+  const { t } = useTranslation('home', { keyPrefix: 'laterMeetingDialog' })
 
-  const [isCopied, setIsCopied] = useState(false)
-
-  useEffect(() => {
-    if (isCopied) {
-      const timeout = setTimeout(() => setIsCopied(false), 3000)
-      return () => clearTimeout(timeout)
-    }
-  }, [isCopied])
+  const roomUrl = room && getRouteUrl('room', room?.slug)
+  const telephony = useTelephony()
 
   const [isHovered, setIsHovered] = useState(false)
 
+  const isTelephonyReadyForUse = useMemo(() => {
+    return telephony?.enabled && room?.pin_code
+  }, [telephony?.enabled, room?.pin_code])
+
+  const {
+    isCopied,
+    copyRoomToClipboard,
+    isRoomUrlCopied,
+    copyRoomUrlToClipboard,
+  } = useCopyRoomToClipboard(room || undefined)
+
   return (
-    <Dialog
-      isOpen={!!roomId}
-      {...dialogProps}
-      title={t('laterMeetingDialog.heading')}
-    >
-      <P>{t('laterMeetingDialog.description')}</P>
-      <Button
-        variant={isCopied ? 'success' : 'primary'}
-        size="sm"
-        fullWidth
-        aria-label={t('laterMeetingDialog.copy')}
-        style={{
-          justifyContent: 'start',
-        }}
-        onPress={() => {
-          navigator.clipboard.writeText(roomUrl)
-          setIsCopied(true)
-        }}
-        onHoverChange={setIsHovered}
-        data-attr="later-dialog-copy"
-      >
-        {isCopied ? (
-          <>
-            <RiCheckLine size={18} style={{ marginRight: '8px' }} />
-            {t('laterMeetingDialog.copied')}
-          </>
-        ) : (
-          <>
-            <RiFileCopyLine
-              size={18}
-              style={{ marginRight: '8px', minWidth: '18px' }}
-            />
-            {isHovered ? (
-              t('laterMeetingDialog.copy')
-            ) : (
+    <Dialog isOpen={!!room} {...dialogProps} title={t('heading')}>
+      <P>{t('description')}</P>
+      {!!roomUrl && (
+        <>
+          {isTelephonyReadyForUse ? (
+            <div
+              className={css({
+                width: '100%',
+                backgroundColor: 'gray.50',
+                borderRadius: '0.75rem',
+                display: 'flex',
+                flexDirection: 'column',
+                padding: '1.75rem 1.5rem',
+                marginTop: '0.5rem',
+                gap: '1rem',
+                overflow: 'hidden',
+              })}
+            >
               <div
-                style={{
-                  textOverflow: 'ellipsis',
-                  overflow: 'hidden',
-                  userSelect: 'none',
-                  textWrap: 'nowrap',
-                }}
+                className={css({
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                })}
               >
-                {roomUrl.replace(/^https?:\/\//, '')}
+                <Text as="p" wrap="pretty">
+                  {roomUrl?.replace(/^https?:\/\//, '')}
+                </Text>
+                {isTelephonyReadyForUse && (
+                  <Button
+                    variant={isRoomUrlCopied ? 'success' : 'tertiaryText'}
+                    square
+                    size={'sm'}
+                    onPress={copyRoomUrlToClipboard}
+                    aria-label={t('copyUrl')}
+                    tooltip={t('copyUrl')}
+                  >
+                    {isRoomUrlCopied ? <RiCheckLine /> : <RiFileCopyLine />}
+                  </Button>
+                )}
               </div>
-            )}
-          </>
-        )}
-      </Button>
-      <HStack>
-        <div
-          className={css({
-            backgroundColor: 'primary.200',
-            borderRadius: '50%',
-            padding: '4px',
-            marginTop: '1rem',
-          })}
-        >
-          <RiSpam2Fill
-            size={22}
-            className={css({
-              fill: 'primary.500',
-            })}
-          />
-        </div>
-        <Text variant="sm" style={{ marginTop: '1rem' }}>
-          {t('laterMeetingDialog.permissions')}
-        </Text>
-      </HStack>
+              <div
+                className={css({
+                  display: 'flex',
+                  flexDirection: 'column',
+                })}
+              >
+                <Text as="p" wrap="pretty">
+                  <Bold>{t('phone.call')}</Bold> ({telephony?.country}){' '}
+                  {telephony?.internationalPhoneNumber}
+                </Text>
+                <Text as="p" wrap="pretty">
+                  <Bold>{t('phone.pinCode')}</Bold>{' '}
+                  {formatPinCode(room?.pin_code)}
+                </Text>
+              </div>
+              <Button
+                variant={isCopied ? 'success' : 'tertiaryText'}
+                size="sm"
+                fullWidth
+                aria-label={t('copy')}
+                style={{
+                  justifyContent: 'start',
+                }}
+                onPress={copyRoomToClipboard}
+                data-attr="later-dialog-copy"
+              >
+                {isCopied ? (
+                  <>
+                    <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+                    {t('copied')}
+                  </>
+                ) : (
+                  <>
+                    <RiFileCopyLine
+                      style={{ marginRight: '6px', minWidth: '18px' }}
+                    />
+                    {t('copy')}
+                  </>
+                )}
+              </Button>
+            </div>
+          ) : (
+            <Button
+              variant={isCopied ? 'success' : 'primary'}
+              size="sm"
+              fullWidth
+              aria-label={t('copy')}
+              style={{
+                justifyContent: 'start',
+              }}
+              onPress={copyRoomToClipboard}
+              onHoverChange={setIsHovered}
+              data-attr="later-dialog-copy"
+            >
+              {isCopied ? (
+                <>
+                  <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+                  {t('copied')}
+                </>
+              ) : (
+                <>
+                  <RiFileCopyLine
+                    size={18}
+                    style={{ marginRight: '8px', minWidth: '18px' }}
+                  />
+                  {isHovered ? (
+                    t('copy')
+                  ) : (
+                    <div
+                      style={{
+                        textOverflow: 'ellipsis',
+                        overflow: 'hidden',
+                        userSelect: 'none',
+                        textWrap: 'nowrap',
+                      }}
+                    >
+                      {roomUrl?.replace(/^https?:\/\//, '')}
+                    </div>
+                  )}
+                </>
+              )}
+            </Button>
+          )}
+          {room?.access_level == ApiAccessLevel.PUBLIC && (
+            <HStack>
+              <div
+                className={css({
+                  backgroundColor: 'primary.200',
+                  borderRadius: '50%',
+                  padding: '4px',
+                  marginTop: '1rem',
+                })}
+              >
+                <RiSpam2Fill
+                  size={22}
+                  className={css({
+                    fill: 'primary.500',
+                  })}
+                />
+              </div>
+              <Text variant="sm" style={{ marginTop: '1rem' }}>
+                {t('permissions')}
+              </Text>
+            </HStack>
+          )}
+        </>
+      )}
     </Dialog>
   )
 }

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 | string>(null)
+  const [laterRoom, setLaterRoom] = useState<null | ApiRoom>(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 = () => {
           </RightColumn>
         </Columns>
         <LaterMeetingDialog
-          roomId={laterRoomId ?? ''}
-          onOpenChange={() => setLaterRoomId(null)}
+          room={laterRoom}
+          onOpenChange={() => setLaterRoom(null)}
         />
       </Screen>
     </UserAware>

src/frontend/src/features/rooms/components/Conference.tsx

@@ -240,7 +240,6 @@ export const Conference = ({
             <InviteDialog
               isOpen={showInviteDialog}
               onOpenChange={setShowInviteDialog}
-              roomId={roomId}
               onClose={() => setShowInviteDialog(false)}
             />
           )}

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,8 +10,13 @@ import {
   RiFileCopyLine,
   RiSpam2Fill,
 } from '@remixicon/react'
-import { useEffect, useState } from 'react'
+import { useMemo } 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'
+import { useCopyRoomToClipboard } from '@/features/rooms/livekit/hooks/useCopyRoomToClipboard'
 
 // fixme - extract in a proper primitive this dialog without overlay
 const StyledRACDialog = styled(Dialog, {
@@ -34,24 +39,27 @@ const StyledRACDialog = styled(Dialog, {
   },
 })
 
-export const InviteDialog = ({
-  roomId,
-  ...dialogProps
-}: { roomId: string } & Omit<DialogProps, 'title'>) => {
-  const { t } = useTranslation('rooms')
-  const roomUrl = getRouteUrl('room', roomId)
+export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'shareDialog' })
 
-  const [isCopied, setIsCopied] = useState(false)
+  const roomData = useRoomData()
+  const roomUrl = getRouteUrl('room', roomData?.slug)
 
-  useEffect(() => {
-    if (isCopied) {
-      const timeout = setTimeout(() => setIsCopied(false), 3000)
-      return () => clearTimeout(timeout)
-    }
-  }, [isCopied])
+  const telephony = useTelephony()
+
+  const isTelephonyReadyForUse = useMemo(() => {
+    return telephony?.enabled && roomData?.pin_code
+  }, [telephony?.enabled, roomData?.pin_code])
+
+  const {
+    isCopied,
+    copyRoomToClipboard,
+    isRoomUrlCopied,
+    copyRoomUrlToClipboard,
+  } = useCopyRoomToClipboard(roomData)
 
   return (
-    <StyledRACDialog {...dialogProps}>
+    <StyledRACDialog {...props}>
       {({ close }) => (
         <VStack
           alignItems="left"
@@ -60,7 +68,7 @@ export const InviteDialog = ({
           style={{ maxWidth: '100%', overflow: 'hidden' }}
         >
           <Heading slot="title" level={3} className={text({ variant: 'h2' })}>
-            {t('shareDialog.heading')}
+            {t('heading')}
           </Heading>
           <Div position="absolute" top="5" right="5">
             <Button
@@ -68,7 +76,7 @@ export const InviteDialog = ({
               variant="tertiaryText"
               size="xs"
               onPress={() => {
-                dialogProps.onClose?.()
+                props.onClose?.()
                 close()
               }}
               aria-label={t('closeDialog')}
@@ -76,49 +84,125 @@ export const InviteDialog = ({
               <RiCloseLine />
             </Button>
           </Div>
-          <P>{t('shareDialog.description')}</P>
-          <Button
-            variant={isCopied ? 'success' : 'tertiary'}
-            fullWidth
-            aria-label={t('shareDialog.copy')}
-            onPress={() => {
-              navigator.clipboard.writeText(roomUrl)
-              setIsCopied(true)
-            }}
-            data-attr="share-dialog-copy"
-          >
-            {isCopied ? (
-              <>
-                <RiCheckLine size={24} style={{ marginRight: '8px' }} />
-                {t('shareDialog.copied')}
-              </>
-            ) : (
-              <>
-                <RiFileCopyLine size={24} style={{ marginRight: '8px' }} />
-                {t('shareDialog.copyButton')}
-              </>
-            )}
-          </Button>
-          <HStack>
+          <P>{t('description')}</P>
+          {isTelephonyReadyForUse ? (
             <div
               className={css({
-                backgroundColor: 'primary.200',
-                borderRadius: '50%',
-                padding: '4px',
-                marginTop: '1rem',
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                marginTop: '0.5rem',
+                gap: '1rem',
+                overflow: 'hidden',
               })}
             >
-              <RiSpam2Fill
-                size={22}
+              <div
                 className={css({
-                  fill: 'primary.500',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
                 })}
-              />
+              >
+                <Text as="p" wrap="pretty">
+                  {roomUrl?.replace(/^https?:\/\//, '')}
+                </Text>
+                {isTelephonyReadyForUse && roomUrl && (
+                  <Button
+                    variant={isRoomUrlCopied ? 'success' : 'tertiaryText'}
+                    square
+                    size={'sm'}
+                    onPress={copyRoomUrlToClipboard}
+                    aria-label={t('copyUrl')}
+                    tooltip={t('copyUrl')}
+                  >
+                    {isRoomUrlCopied ? <RiCheckLine /> : <RiFileCopyLine />}
+                  </Button>
+                )}
+              </div>
+              <div
+                className={css({
+                  display: 'flex',
+                  flexDirection: 'column',
+                })}
+              >
+                <Text as="p" wrap="pretty">
+                  <Bold>{t('phone.call')}</Bold> ({telephony?.country}){' '}
+                  {telephony?.internationalPhoneNumber}
+                </Text>
+                <Text as="p" wrap="pretty">
+                  <Bold>{t('phone.pinCode')}</Bold>{' '}
+                  {formatPinCode(roomData?.pin_code)}
+                </Text>
+              </div>
+              <Button
+                variant={isCopied ? 'success' : 'secondaryText'}
+                size="sm"
+                fullWidth
+                aria-label={t('copy')}
+                style={{
+                  justifyContent: 'start',
+                }}
+                onPress={copyRoomToClipboard}
+                data-attr="share-dialog-copy"
+              >
+                {isCopied ? (
+                  <>
+                    <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+                    {t('copied')}
+                  </>
+                ) : (
+                  <>
+                    <RiFileCopyLine
+                      style={{ marginRight: '6px', minWidth: '18px' }}
+                    />
+                    {t('copy')}
+                  </>
+                )}
+              </Button>
             </div>
-            <Text variant="sm" style={{ marginTop: '1rem' }}>
-              {t('shareDialog.permissions')}
-            </Text>
-          </HStack>
+          ) : (
+            <Button
+              variant={isCopied ? 'success' : 'tertiary'}
+              fullWidth
+              aria-label={t('copy')}
+              onPress={copyRoomToClipboard}
+              data-attr="share-dialog-copy"
+            >
+              {isCopied ? (
+                <>
+                  <RiCheckLine size={24} style={{ marginRight: '8px' }} />
+                  {t('copied')}
+                </>
+              ) : (
+                <>
+                  <RiFileCopyLine size={24} style={{ marginRight: '8px' }} />
+                  {t('copyUrl')}
+                </>
+              )}
+            </Button>
+          )}
+          {roomData?.access_level === ApiAccessLevel.PUBLIC && (
+            <HStack>
+              <div
+                className={css({
+                  backgroundColor: 'primary.200',
+                  borderRadius: '50%',
+                  padding: '4px',
+                  marginTop: '1rem',
+                })}
+              >
+                <RiSpam2Fill
+                  size={22}
+                  className={css({
+                    fill: 'primary.500',
+                  })}
+                />
+              </div>
+              <Text variant="sm" style={{ marginTop: '1rem' }}>
+                {t('permissions')}
+              </Text>
+            </HStack>
+          )}
         </VStack>
       )}
     </StyledRACDialog>

src/frontend/src/features/rooms/components/Join.tsx

@@ -8,7 +8,7 @@ import { H } from '@/primitives/H'
 import { SelectToggleDevice } from '../livekit/components/controls/SelectToggleDevice'
 import { Field } from '@/primitives/Field'
 import { Button, Dialog, Text, Form } from '@/primitives'
-import { VStack } from '@/styled-system/jsx'
+import { HStack, VStack } from '@/styled-system/jsx'
 import { Heading } from 'react-aria-components'
 import { RiImageCircleAiFill } from '@remixicon/react'
 import {
@@ -71,14 +71,36 @@ const Effects = ({
         </Text>
         <EffectsConfiguration videoTrack={videoTrack} onSubmit={onSubmit} />
       </Dialog>
-      <Button
-        variant="whiteCircle"
-        onPress={openDialog}
-        tooltip={t('description')}
-        aria-label={t('description')}
+      <div
+        className={css({
+          position: 'absolute',
+          right: 0,
+          bottom: '0',
+          padding: '1rem',
+          zIndex: '1',
+        })}
       >
-        <RiImageCircleAiFill size={24} />
-      </Button>
+        <Button
+          variant="whiteCircle"
+          onPress={openDialog}
+          tooltip={t('description')}
+          aria-label={t('description')}
+        >
+          <RiImageCircleAiFill size={24} />
+        </Button>
+      </div>
+      <div
+        className={css({
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: '20%',
+          backgroundImage:
+            'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%)',
+          borderBottomRadius: '1rem',
+        })}
+      />
     </>
   )
 }
@@ -138,14 +160,12 @@ export const Join = ({
   )
 
   const videoEl = useRef(null)
-  const isVideoInitiated = useRef(false)
 
   useEffect(() => {
     const videoElement = videoEl.current as HTMLVideoElement | null
 
     const handleVideoLoaded = () => {
       if (videoElement) {
-        isVideoInitiated.current = true
         videoElement.style.opacity = '1'
       }
     }
@@ -220,20 +240,6 @@ export const Join = ({
     enterRoom()
   }
 
-  const hintMessage = useMemo(() => {
-    if (!videoEnabled) {
-      return 'cameraDisabled'
-    }
-
-    if (!isVideoInitiated.current) {
-      return 'cameraStarting'
-    }
-
-    if (videoTrack && videoEnabled) {
-      return ''
-    }
-  }, [videoTrack, videoEnabled])
-
   const renderWaitingState = () => {
     switch (status) {
       case ApiLobbyStatus.TIMEOUT:
@@ -316,215 +322,145 @@ export const Join = ({
       <div
         className={css({
           display: 'flex',
+          alignItems: 'flex-start',
           justifyContent: 'center',
-          alignItems: 'center',
-          width: '100%',
-          flexDirection: 'column',
           flexGrow: 1,
-          gap: { base: '1rem', sm: '2rem', lg: 0 },
           lg: {
-            flexDirection: 'row',
+            alignItems: 'center',
           },
         })}
       >
         <div
           className={css({
             display: 'flex',
+            height: 'auto',
             alignItems: 'center',
             justifyContent: 'center',
-            width: '100%',
+            gap: '2rem',
+            padding: '0 2rem',
+            flexDirection: 'column',
             minWidth: 0,
-            maxWidth: '764px',
+            width: '100%',
             lg: {
-              height: '540px',
-              flexGrow: 1,
+              flexDirection: 'row',
+              width: 'auto',
+              height: '570px',
             },
           })}
         >
           <div
             className={css({
-              display: 'inline-flex',
-              flexDirection: 'column',
-              flexGrow: 1,
-              minWidth: 0,
-              flexShrink: { base: 0, sm: 1 },
+              width: '100%',
+              lg: {
+                width: '740px',
+              },
             })}
           >
             <div
               className={css({
                 borderRadius: '1rem',
-                flex: '0 1',
-                minWidth: '320px',
-                margin: {
-                  base: '0.5rem',
-                  sm: '1rem',
-                  lg: '1rem 0.5rem 1rem 1rem',
-                },
                 overflow: 'hidden',
                 position: 'relative',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
+                width: '100%',
+                height: 'auto',
+                aspectRatio: 16 / 9,
+                '--tw-shadow':
+                  '0 10px 15px -5px #00000010, 0 4px 5px -6px #00000010',
+                '--tw-shadow-colored':
+                  '0 10px 15px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)',
+                boxShadow:
+                  'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
+                backgroundColor: 'black',
               })}
             >
-              <div
-                className={css({
-                  position: 'relative',
-                  width: '100%',
-                  height: 'fit-content',
-                  aspectRatio: '16 / 9',
-                })}
-              >
-                <div
+              {videoTrack && videoEnabled ? (
+                // eslint-disable-next-line jsx-a11y/media-has-caption
+                <video
+                  ref={videoEl}
+                  width="1280"
+                  height="720"
                   className={css({
-                    backgroundColor: 'black',
-                    position: 'absolute',
-                    boxSizing: 'border-box',
-                    top: 0,
+                    display: 'block',
                     width: '100%',
                     height: '100%',
-                    overflow: 'hidden',
+                    objectFit: 'cover',
+                    transform: 'rotateY(180deg)',
+                    opacity: 0,
+                    transition: 'opacity 0.3s ease-in-out',
+                    borderRadius: '1rem',
                   })}
-                >
-                  <div
-                    aria-label={t(
-                      `videoPreview.${videoEnabled ? 'enabled' : 'disabled'}`
-                    )}
-                    role="status"
-                    className={css({
-                      position: 'absolute',
-                      top: 0,
-                      width: '100%',
-                    })}
-                  >
-                    <div
-                      className={css({
-                        width: '100%',
-                        height: 'auto',
-                        aspectRatio: '16 / 9',
-                        overflow: 'hidden',
-                        position: 'absolute',
-                        top: '-2px',
-                        left: '-2px',
-                        pointerEvents: 'none',
-                        transform: 'scale(1.02)',
-                      })}
-                    >
-                      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-                      <video
-                        ref={videoEl}
-                        width="1280"
-                        height="720"
-                        style={{
-                          display: !videoEnabled ? 'none' : undefined,
-                        }}
-                        className={css({
-                          position: 'absolute',
-                          transform: 'rotateY(180deg)',
-                          opacity: 0,
-                          height: '100%',
-                          transition: 'opacity 0.3s ease-in-out',
-                          objectFit: 'cover',
-                        })}
-                        disablePictureInPicture
-                        disableRemotePlayback
-                      />
-                    </div>
-                  </div>
-                  <div
-                    role="alert"
-                    className={css({
-                      display: 'flex',
-                      flexDirection: 'column',
-                      height: '100%',
-                      width: '100%',
-                      justifyContent: 'center',
-                      textAlign: 'center',
-                      alignItems: 'center',
-                      padding: '0.24rem',
-                      boxSizing: 'border-box',
-                    })}
-                  >
-                    <p
-                      className={css({
-                        fontWeight: '400',
-                        fontSize: { base: '1rem', sm: '1.25rem', lg: '1.5rem' },
-                        textWrap: 'balance',
-                        color: 'white',
-                      })}
-                    >
-                      {hintMessage && t(hintMessage)}
-                    </p>
-                  </div>
-                </div>
+                  disablePictureInPicture
+                  disableRemotePlayback
+                />
+              ) : (
                 <div
                   className={css({
-                    position: 'absolute',
-                    right: '1rem',
-                    bottom: '1rem',
-                    zIndex: '1',
+                    width: '100%',
+                    height: '100%',
+                    color: 'white',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
                   })}
                 >
-                  <Effects
-                    videoTrack={videoTrack}
-                    onSubmit={(processor) =>
-                      saveProcessorSerialized(processor?.serialize())
-                    }
-                  />
+                  <p
+                    className={css({
+                      fontSize: '24px',
+                      fontWeight: '300',
+                    })}
+                  >
+                    {!videoEnabled && t('cameraDisabled')}
+                    {videoEnabled && !videoTrack && t('cameraStarting')}
+                  </p>
                 </div>
-              </div>
-            </div>
-            <div
-              className={css({
-                display: 'flex',
-                justifyContent: 'center',
-                gap: '2%',
-                width: '80%',
-                marginX: 'auto',
-              })}
-            >
-              <div>
-                <SelectToggleDevice
-                  source={Track.Source.Microphone}
-                  initialState={audioEnabled}
-                  track={audioTrack}
-                  initialDeviceId={audioDeviceId}
-                  onChange={(enabled) => saveAudioInputEnabled(enabled)}
-                  onDeviceError={(error) => console.error(error)}
-                  onActiveDeviceChange={(deviceId) =>
-                    saveAudioInputDeviceId(deviceId ?? '')
-                  }
-                  variant="tertiary"
-                />
-              </div>
-              <div>
-                <SelectToggleDevice
-                  source={Track.Source.Camera}
-                  initialState={videoEnabled}
-                  track={videoTrack}
-                  initialDeviceId={videoDeviceId}
-                  onChange={(enabled) => saveVideoInputEnabled(enabled)}
-                  onDeviceError={(error) => console.error(error)}
-                  onActiveDeviceChange={(deviceId) =>
-                    saveVideoInputDeviceId(deviceId ?? '')
-                  }
-                  variant="tertiary"
-                />
-              </div>
+              )}
+              <Effects
+                videoTrack={videoTrack}
+                onSubmit={(processor) =>
+                  saveProcessorSerialized(processor?.serialize())
+                }
+              />
             </div>
+            <HStack justify="center" padding={1.5}>
+              <SelectToggleDevice
+                source={Track.Source.Microphone}
+                initialState={audioEnabled}
+                track={audioTrack}
+                initialDeviceId={audioDeviceId}
+                onChange={(enabled) => saveAudioInputEnabled(enabled)}
+                onDeviceError={(error) => console.error(error)}
+                onActiveDeviceChange={(deviceId) =>
+                  saveAudioInputDeviceId(deviceId ?? '')
+                }
+                variant="tertiary"
+              />
+              <SelectToggleDevice
+                source={Track.Source.Camera}
+                initialState={videoEnabled}
+                track={videoTrack}
+                initialDeviceId={videoDeviceId}
+                onChange={(enabled) => saveVideoInputEnabled(enabled)}
+                onDeviceError={(error) => console.error(error)}
+                onActiveDeviceChange={(deviceId) =>
+                  saveVideoInputDeviceId(deviceId ?? '')
+                }
+                variant="tertiary"
+              />
+            </HStack>
+          </div>
+          <div
+            className={css({
+              width: '100%',
+              flexShrink: 0,
+              padding: '0',
+              sm: {
+                width: '448px',
+                padding: '0 3rem 9rem 3rem',
+              },
+            })}
+          >
+            {renderWaitingState()}
           </div>
-        </div>
-        <div
-          className={css({
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            flex: '0 0 448px',
-            position: 'relative',
-            margin: '1rem 1rem 1rem 0.5rem',
-          })}
-        >
-          {renderWaitingState()}
         </div>
       </div>
     </Screen>

src/frontend/src/features/rooms/livekit/components/Info.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { useEffect, useState } from 'react'
+import { useMemo } from 'react'
 import { VStack } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
 import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
@@ -8,24 +8,22 @@ import { getRouteUrl } from '@/navigation/getRouteUrl'
 import { useRoomData } from '../hooks/useRoomData'
 import { formatPinCode } from '../../utils/telephony'
 import { useTelephony } from '../hooks/useTelephony'
+import { useCopyRoomToClipboard } from '../hooks/useCopyRoomToClipboard'
 
 export const Info = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'info' })
 
-  const [isCopied, setIsCopied] = useState(false)
-
-  useEffect(() => {
-    if (isCopied) {
-      const timeout = setTimeout(() => setIsCopied(false), 3000)
-      return () => clearTimeout(timeout)
-    }
-  }, [isCopied])
-
   const data = useRoomData()
   const roomUrl = getRouteUrl('room', data?.slug)
 
   const telephony = useTelephony()
 
+  const isTelephonyReadyForUse = useMemo(() => {
+    return telephony?.enabled && data?.pin_code
+  }, [telephony?.enabled, data?.pin_code])
+
+  const { isCopied, copyRoomToClipboard } = useCopyRoomToClipboard(data)
+
   return (
     <Div
       display="flex"
@@ -53,9 +51,9 @@ export const Info = () => {
           })}
         >
           <Text as="p" variant="xsNote" wrap="pretty">
-            {roomUrl}
+            {roomUrl.replace(/^https?:\/\//, '')}
           </Text>
-          {telephony?.enabled && data?.pin_code && (
+          {isTelephonyReadyForUse && (
             <>
               <Text as="p" variant="xsNote" wrap="pretty">
                 <Bold>{t('roomInformation.phone.call')}</Bold> (
@@ -72,10 +70,7 @@ export const Info = () => {
           size="sm"
           variant={isCopied ? 'success' : 'tertiaryText'}
           aria-label={t('roomInformation.button.ariaLabel')}
-          onPress={() => {
-            navigator.clipboard.writeText(roomUrl)
-            setIsCopied(true)
-          }}
+          onPress={copyRoomToClipboard}
           data-attr="copy-info-sidepannel"
           style={{
             marginLeft: '-8px',

src/frontend/src/features/rooms/livekit/hooks/useCopyRoomToClipboard.ts

@@ -0,0 +1,79 @@
+import { useTelephony } from './useTelephony'
+import { useTranslation } from 'react-i18next'
+import { useEffect, useMemo, useState } from 'react'
+import { formatPinCode } from '@/features/rooms/utils/telephony'
+import { ApiRoom } from '@/features/rooms/api/ApiRoom'
+import { getRouteUrl } from '@/navigation/getRouteUrl'
+
+const COPY_SUCCESS_TIMEOUT = 3000
+
+export const useCopyRoomToClipboard = (room: ApiRoom | undefined) => {
+  const telephony = useTelephony()
+  const { t } = useTranslation('global', { keyPrefix: 'clipboardContent' })
+
+  const [isCopied, setIsCopied] = useState(false)
+  const [isRoomUrlCopied, setIsRoomUrlCopied] = useState(false)
+
+  useEffect(() => {
+    if (isCopied) {
+      const timeout = setTimeout(() => setIsCopied(false), COPY_SUCCESS_TIMEOUT)
+      return () => clearTimeout(timeout)
+    }
+  }, [isCopied])
+
+  useEffect(() => {
+    if (isRoomUrlCopied) {
+      const timeout = setTimeout(
+        () => setIsRoomUrlCopied(false),
+        COPY_SUCCESS_TIMEOUT
+      )
+      return () => clearTimeout(timeout)
+    }
+  }, [isRoomUrlCopied])
+
+  const roomUrl = useMemo(() => {
+    return room?.slug ? getRouteUrl('room', room.slug) : ''
+  }, [room?.slug])
+
+  const hasTelephonyInfo = useMemo(() => {
+    return telephony.enabled && room?.pin_code
+  }, [telephony.enabled, room?.pin_code])
+
+  const content = useMemo(() => {
+    if (!roomUrl || !room) return ''
+    if (!hasTelephonyInfo) return roomUrl
+
+    return [
+      t('url', { roomUrl }),
+      t('numberAndPin', {
+        phoneNumber: telephony?.internationalPhoneNumber,
+        pinCode: formatPinCode(room.pin_code),
+      }),
+    ].join('\n')
+  }, [roomUrl, hasTelephonyInfo, telephony, room, t])
+
+  const copyRoomToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(content)
+      setIsCopied(true)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  const copyRoomUrlToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(roomUrl)
+      setIsRoomUrlCopied(true)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return {
+    isCopied,
+    copyRoomToClipboard,
+    isRoomUrlCopied,
+    copyRoomUrlToClipboard,
+  }
+}

src/frontend/src/features/rooms/utils/telephony.ts

@@ -19,5 +19,5 @@ export const parseConfigPhoneNumber = (
 }
 
 export function formatPinCode(pinCode?: string) {
-  return pinCode && `${pinCode.replace(/(\d{3})(\d{3})(\d{4})/, '$1 $2 $3')} #`
+  return pinCode && `${pinCode.replace(/(\d{3})(\d{3})(\d{4})/, '$1 $2 $3')}#`
 }

src/frontend/src/locales/de/global.json

@@ -51,5 +51,9 @@
       "ariaLabel": "Hinweis schließen",
       "label": "OK"
     }
+  },
+  "clipboardContent": {
+    "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}}"
   }
 }

src/frontend/src/locales/de/home.json

@@ -19,10 +19,15 @@
   },
   "laterMeetingDialog": {
     "heading": "Ihre Zugangsdaten",
-    "description": "Senden Sie diesen Link an die Personen, die Sie zum Meeting einladen möchten. Sie können ohne ProConnect teilnehmen.",
-    "copy": "Meeting-Link kopieren",
-    "copied": "Link in die Zwischenablage kopiert",
-    "permissions": "Personen mit diesem Link benötigen keine Genehmigung, um diesem Meeting beizutreten."
+    "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.",
+    "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:"
+    }
   },
   "introSlider": {
     "previous": {

src/frontend/src/locales/de/rooms.json

@@ -53,12 +53,16 @@
   },
   "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:"
+    }
   },
   "mediaErrorDialog": {
     "DeviceInUse": {
@@ -226,9 +230,9 @@
     "roomInformation": {
       "title": "Verbindungsinformationen",
       "button": {
-        "ariaLabel": "Kopiere deine Meeting-Adresse",
-        "copy": "Adresse kopieren",
-        "copied": "Adresse kopiert"
+        "ariaLabel": "Kopieren Sie die Informationen aus Ihrer Besprechung",
+        "copy": "Informationen kopieren",
+        "copied": "Informationen kopiert"
       },
       "phone": {
         "call": "Rufen Sie an:",

src/frontend/src/locales/en/global.json

@@ -51,5 +51,9 @@
       "ariaLabel": "Close the suggestion",
       "label": "OK"
     }
+  },
+  "clipboardContent": {
+    "url": "To join the video conference, click on this link: {{roomUrl}}",
+    "numberAndPin": "To join by phone, dial {{phoneNumber}} and enter this code: {{pinCode}}"
   }
 }

src/frontend/src/locales/en/home.json

@@ -19,10 +19,15 @@
   },
   "laterMeetingDialog": {
     "heading": "Your connection details",
-    "description": "Send this link to the people you want to invite to the meeting. They will be able to join without ProConnect.",
-    "copy": "Copy the meeting link",
-    "copied": "Link copied to clipboard",
-    "permissions": "People with this link do not need your permission to join this meeting."
+    "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.",
+    "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:"
+    }
   },
   "introSlider": {
     "previous": {

src/frontend/src/locales/en/rooms.json

@@ -53,12 +53,16 @@
   },
   "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:"
+    }
   },
   "mediaErrorDialog": {
     "DeviceInUse": {
@@ -226,9 +230,9 @@
     "roomInformation": {
       "title": "Connection Information",
       "button": {
-        "ariaLabel": "Copy your meeting address",
-        "copy": "Copy address",
-        "copied": "Address copied"
+        "ariaLabel": "Copy the information from your meeting",
+        "copy": "Copy information",
+        "copied": "Information copied"
       },
       "phone": {
         "call": "Call:",

src/frontend/src/locales/fr/global.json

@@ -51,5 +51,9 @@
       "ariaLabel": "Fermer la suggestion",
       "label": "OK"
     }
+  },
+  "clipboardContent": {
+    "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}}"
   }
 }

src/frontend/src/locales/fr/home.json

@@ -19,10 +19,15 @@
   },
   "laterMeetingDialog": {
     "heading": "Vos informations de connexion",
-    "description": "Envoyez ce lien aux personnes que vous souhaitez inviter à la réunion. Ils pourront la rejoindre sans ProConnect.",
-    "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 :"
+    }
   },
   "introSlider": {
     "previous": {

src/frontend/src/locales/fr/rooms.json

@@ -53,12 +53,16 @@
   },
   "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 :"
+    }
   },
   "mediaErrorDialog": {
     "DeviceInUse": {
@@ -226,9 +230,9 @@
     "roomInformation": {
       "title": "Informations de connexions",
       "button": {
-        "ariaLabel": "Copier l'adresse de votre réunion",
-        "copy": "Copier l'adresse",
-        "copied": "Adresse copiée"
+        "ariaLabel": "Copier les informations de votre réunion",
+        "copy": "Copier les informations",
+        "copied": "Informations copiées"
       },
       "phone": {
         "call": "Appelez le :",

src/frontend/src/locales/nl/global.json

@@ -50,5 +50,9 @@
       "ariaLabel": "Sluit de suggestie",
       "label": "OK"
     }
+  },
+  "clipboardContent": {
+    "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}}"
   }
 }

src/frontend/src/locales/nl/home.json

@@ -19,10 +19,15 @@
   },
   "laterMeetingDialog": {
     "heading": "Uw verbindingsgegevens",
-    "description": "Stuur deze link naar de mensen die u wilt uitnodigen voor de vergadering. Zij kunnen deelnemen zonder ProConnect.",
-    "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."
+    "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.",
+    "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:"
+    }
   },
   "introSlider": {
     "previous": {

src/frontend/src/locales/nl/rooms.json

@@ -53,12 +53,16 @@
   },
   "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:"
+    }
   },
   "mediaErrorDialog": {
     "DeviceInUse": {
@@ -226,9 +230,9 @@
     "roomInformation": {
       "title": "Verbindingsinformatie",
       "button": {
-        "ariaLabel": "Kopieer je vergaderadres",
-        "copy": "Adres kopiëren",
-        "copied": "Adres gekopieerd"
+        "ariaLabel": "Kopieer de informatie van uw vergadering",
+        "copy": "Informatie kopiëren",
+        "copied": "Informatie gekopieerd"
       },
       "phone": {
         "call": "Bel:",

src/frontend/src/primitives/buttonRecipe.ts

@@ -68,6 +68,7 @@ export const buttonRecipe = cva({
       },
       secondaryText: {
         backgroundColor: 'transparent',
+        fontWeight: 'medium !important',
         color: 'primary.800',
         '&[data-hovered]': {
           backgroundColor: 'greyscale.100',

src/helm/env.d/dev-keycloak/values.meet.yaml.gotmpl

@@ -69,6 +69,8 @@ backend:
     SUMMARY_SERVICE_API_TOKEN: password
     SCREEN_RECORDING_BASE_URL: https://meet.127.0.0.1.nip.io/recordings
     ROOM_TELEPHONY_ENABLED: True
+    ROOM_TELEPHONY_DEFAULT_COUNTRY: 'FR'
+    ROOM_TELEPHONY_PHONE_NUMBER: '+33901020304'
     SSL_CERT_FILE: /usr/local/lib/python3.13/site-packages/certifi/cacert.pem
 
 

src/nginx/servers.conf.erb

@@ -0,0 +1,50 @@
+
+upstream backend_server {
+	server localhost:8000 fail_timeout=0;
+}
+
+server {
+  listen <%= ENV["PORT"] %>;
+  server_name _;
+  server_tokens off;
+
+  root /app/build/frontend-out;
+
+  # Django rest framework
+  location ^~ /api/ {
+      proxy_set_header X-Forwarded-Proto https;
+      proxy_set_header Host $http_host;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+      proxy_redirect off;
+      proxy_pass http://backend_server;
+  }
+
+  # Django admin
+  location ^~ /admin/ {
+      proxy_set_header X-Forwarded-Proto https;
+      proxy_set_header Host $http_host;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+      proxy_redirect off;
+      proxy_pass http://backend_server;
+  }
+
+  # Serve static files with caching
+  location ~* ^/assets/.*\.(css|js|json|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+      expires 30d;
+      add_header Cache-Control "public, max-age=2592000";
+  }
+
+  # Serve static files
+  location / {
+      try_files $uri $uri/ /index.html;
+      # Add no-cache headers
+      add_header Cache-Control "no-cache, no-store, must-revalidate";
+      add_header Pragma "no-cache";  # HTTP 1.0 header for backward compatibility
+      add_header Expires 0;
+  }
+
+  # Optionally, handle 404 errors by redirecting to index.html
+  error_page 404 =200 /index.html;
+}