✨(frontend) add telephony info to encourage phone participation

Add telephony information to the share dialog when available to help users take advantage of the newly introduced phone join feature. Promotes phone participation as an alternative connection method when users need it, improving meeting accessibility and user adoption of telephony capabilities.
2025-08-05 16:15:06 +02:00
parent de3a5aa404
commit f3af637fd6
5 changed files with 197 additions and 45 deletions
--- 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<DialogProps, 'title'>) => {
-  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<DialogProps, 'title'>) => {
    }
  }, [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 (
    <StyledRACDialog {...props}>
      {({ close }) => (
@@ -60,7 +95,7 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
          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
@@ -76,29 +111,114 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
              <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>
+          <P>{t('description')}</P>
+          {isTelephonyReadyForUse ? (
+            <div
+              className={css({
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                marginTop: '0.5rem',
+                gap: '1rem',
+                overflow: 'hidden',
+              })}
+            >
+              <div
+                className={css({
+                  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={() => {
+                      navigator.clipboard.writeText(roomUrl)
+                      setIsRoomUrlCopied(true)
+                    }}
+                    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>
+              {clipboardContent && (
+                <Button
+                  variant={isCopied ? 'success' : 'secondaryText'}
+                  size="sm"
+                  fullWidth
+                  aria-label={t('copy')}
+                  style={{
+                    justifyContent: 'start',
+                  }}
+                  onPress={() => {
+                    navigator.clipboard.writeText(clipboardContent)
+                    setIsCopied(true)
+                  }}
+                  data-attr="share-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' : 'tertiary'}
+              fullWidth
+              aria-label={t('copy')}
+              onPress={() => {
+                navigator.clipboard.writeText(roomUrl)
+                setIsCopied(true)
+              }}
+              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
@@ -117,7 +237,7 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
                />
              </div>
              <Text variant="sm" style={{ marginTop: '1rem' }}>
-                {t('shareDialog.permissions')}
+                {t('permissions')}
              </Text>
            </HStack>
          )}
--- 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": {
--- 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": {
--- 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": {
--- 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": {