🚸(frontend) display recording duration limit in recording panel

Add information to recording panel indicating maximum recording
duration when time limits are configured to prevent user confusion
and help with session planning.

src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx

@@ -23,6 +23,8 @@ import posthog from 'posthog-js'
 import { useSnapshot } from 'valtio/index'
 import { Spinner } from '@/primitives/Spinner'
 import { useConfig } from '@/api/useConfig'
+import humanizeDuration from 'humanize-duration'
+import i18n from 'i18next'
 
 export const ScreenRecordingSidePanel = () => {
   const { data } = useConfig()
@@ -189,7 +191,7 @@ export const ScreenRecordingSidePanel = () => {
               </H>
               <Text
                 variant="note"
-                wrap={'pretty'}
+                wrap="balance"
                 centered
                 className={css({
                   textStyle: 'sm',
@@ -198,7 +200,18 @@ export const ScreenRecordingSidePanel = () => {
                   marginTop: '0.25rem',
                 })}
               >
-                {t('start.body')} <br />{' '}
+                {t('start.body', {
+                  duration_message: data?.recording?.max_duration
+                    ? t('durationMessage', {
+                        max_duration: humanizeDuration(
+                          data?.recording?.max_duration,
+                          {
+                            language: i18n.language,
+                          }
+                        ),
+                      })
+                    : '',
+                })}{' '}
                 {data?.support?.help_article_recording && (
                   <A href={data.support.help_article_recording} target="_blank">
                     {t('start.linkMore')}

src/frontend/src/features/recording/components/TranscriptSidePanel.tsx

@@ -25,6 +25,8 @@ import posthog from 'posthog-js'
 import { useSnapshot } from 'valtio/index'
 import { Spinner } from '@/primitives/Spinner'
 import { useConfig } from '@/api/useConfig'
+import humanizeDuration from 'humanize-duration'
+import i18n from 'i18next'
 
 export const TranscriptSidePanel = () => {
   const { data } = useConfig()
@@ -263,7 +265,7 @@ export const TranscriptSidePanel = () => {
                   </H>
                   <Text
                     variant="note"
-                    wrap={'pretty'}
+                    wrap="balance"
                     centered
                     className={css({
                       textStyle: 'sm',
@@ -272,7 +274,18 @@ export const TranscriptSidePanel = () => {
                       marginTop: '0.25rem',
                     })}
                   >
-                    {t('start.body')} <br />{' '}
+                    {t('start.body', {
+                      duration_message: data?.recording?.max_duration
+                        ? t('durationMessage', {
+                            max_duration: humanizeDuration(
+                              data?.recording?.max_duration,
+                              {
+                                language: i18n.language,
+                              }
+                            ),
+                          })
+                        : '',
+                    })}{' '}
                     {data?.support?.help_article_transcript && (
                       <A
                         href={data.support.help_article_transcript}

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

@@ -303,7 +303,7 @@
   "transcript": {
     "start": {
       "heading": "Dieses Gespräch transkribieren",
-      "body": "Dieses Gespräch automatisch transkribieren und die Zusammenfassung in Docs erhalten.",
+      "body": "Dieses Gespräch automatisch transkribieren {{duration_message}} und die Zusammenfassung in Docs erhalten.",
       "button": "Transkription starten",
       "loading": "Transkription wird gestartet",
       "linkMore": "Mehr erfahren"
@@ -334,12 +334,13 @@
         "start": "Die Transkription konnte nicht gestartet werden. Bitte versuche es in einem Moment erneut."
       },
       "button": "OK"
-    }
+    },
+    "durationMessage": "(begrenzt auf {{max_duration}}) "
   },
   "screenRecording": {
     "start": {
       "heading": "Dieses Gespräch aufzeichnen",
-      "body": "Zeichne dieses Gespräch auf, um es später anzusehen. Du erhältst die Videoaufnahme per E-Mail.",
+      "body": "Zeichne dieses Gespräch auf, um es später anzusehen {{duration_message}}. Du erhältst die Videoaufnahme per E-Mail.",
       "button": "Aufzeichnung starten",
       "loading": "Aufzeichnung wird gestartet",
       "linkMore": "Mehr erfahren"
@@ -365,7 +366,8 @@
         "start": "Die Aufzeichnung konnte nicht gestartet werden. Bitte versuche es in einem Moment erneut."
       },
       "button": "OK"
-    }
+    },
+    "durationMessage": "(begrenzt auf {{max_duration}})"
   },
   "admin": {
     "description": "Diese Einstellungen für Organisatoren ermöglichen dir die Kontrolle über dein Meeting. Nur Organisatoren haben Zugriff auf diese Optionen.",

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

@@ -303,7 +303,7 @@
   "transcript": {
     "start": {
       "heading": "Transcribe this call",
-      "body": "Automatically transcribe this call and receive the summary in Docs.",
+      "body": "Automatically transcribe this call {{duration_message}} and receive the summary in Docs.",
       "button": "Start transcription",
       "loading": "Transcription starting",
       "linkMore": "Learn more"
@@ -334,12 +334,13 @@
         "start": "We were unable to start the transcription. Please try again in a moment."
       },
       "button": "OK"
-    }
+    },
+    "durationMessage": "(limited to {{max_duration}}) "
   },
   "screenRecording": {
     "start": {
       "heading": "Record this call",
-      "body": "Record this call to watch it later and receive the video recording by email.",
+      "body": "Record this call to watch it later {{duration_message}} and receive the video recording by email.",
       "button": "Start recording",
       "loading": "Recording starting",
       "linkMore": "Learn more"
@@ -365,7 +366,8 @@
         "start": "We were unable to start the recording. Please try again in a moment."
       },
       "button": "OK"
-    }
+    },
+    "durationMessage": "(limited to {{max_duration}}) "
   },
   "admin": {
     "description": "These organizer settings allow you to maintain control of your meeting. Only organizers can access these controls.",

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

@@ -303,7 +303,7 @@
   "transcript": {
     "start": {
       "heading": "Transcrire cet appel",
-      "body": "Transcrivez cet appel automatiquement et recevez le compte rendu dans Docs.",
+      "body": "Transcrivez cet appel automatiquement {{duration_message}} et recevez le compte rendu dans Docs.",
       "button": "Démarrer la transcription",
       "loading": "Démarrage de la transcription",
       "linkMore": "En savoir plus"
@@ -334,12 +334,13 @@
         "start": "Nous n'avons pas pu démarrer la transcription. Veuillez réessayer dans quelques instants."
       },
       "button": "OK"
-    }
+    },
+    "durationMessage": "(limité à {{max_duration}}) "
   },
   "screenRecording": {
     "start": {
       "heading": "Enregistrer cet appel",
-      "body": "Enregistrez cet appel pour plus tard et recevez l'enregistrement vidéo par mail.",
+      "body": "Enregistrez cet appel pour plus tard {{duration_message}} et recevez l'enregistrement vidéo par mail.",
       "button": "Démarrer l'enregistrement",
       "loading": "Démarrage de l'enregistrement",
       "linkMore": "En savoir plus"
@@ -365,7 +366,8 @@
         "start": "Nous n'avons pas pu démarrer l'enregistrement. Veuillez réessayer dans quelques instants."
       },
       "button": "OK"
-    }
+    },
+    "durationMessage": "(limité à {{max_duration}}) "
   },
   "admin": {
     "description": "Ces paramètres organisateur vous permettent de garder le contrôle de votre réunion. Seuls les organisateurs peuvent accéder à ces commandes.",

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

@@ -303,7 +303,7 @@
   "transcript": {
     "start": {
       "heading": "Transcribeer dit gesprek",
-      "body": "Transcribeer dit gesprek automatisch en ontvang het verslag in Docs.",
+      "body": "Transcribeer dit gesprek automatisch {{duration_message}} en ontvang het verslag in Docs.",
       "button": "Transcriptie starten",
       "loading": "Transcriptie begint",
       "linkMore": "Meer informatie"
@@ -334,12 +334,13 @@
         "start": "We konden de transcriptie niet starten. Probeer het over enkele ogenblikken opnieuw."
       },
       "button": "Opnieuw proberen"
-    }
+    },
+    "durationMessage": "(beperkt tot {{max_duration}}) "
   },
   "screenRecording": {
     "start": {
       "heading": "Dit gesprek opnemen",
-      "body": "Neem dit gesprek op om het later terug te kijken. Je ontvangt de video-opname per e-mail.",
+      "body": "Neem dit gesprek op om het later terug te kijken {{duration_message}}. Je ontvangt de video-opname per e-mail.",
       "button": "Opname starten",
       "loading": "Opname gestarten",
       "linkMore": "Meer informatie"
@@ -365,7 +366,8 @@
         "start": "We konden de opname niet starten. Probeer het over enkele ogenblikken opnieuw."
       },
       "button": "Opnieuw proberen"
-    }
+    },
+    "durationMessage": "(beperkt tot {{max_duration}})"
   },
   "admin": {
     "description": "Deze organisatorinstellingen geven u controle over uw vergadering. Alleen organisatoren hebben toegang tot deze bedieningselementen.",