From fa588ee147d491db709721b4fbe32dea4e4f4d9d Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 8 Sep 2025 20:40:05 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20display=20recording=20?=
 =?UTF-8?q?duration=20limit=20in=20recording=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add information to recording panel indicating maximum recording
duration when time limits are configured to prevent user confusion
and help with session planning.
---
 .../components/ScreenRecordingSidePanel.tsx     | 17 +++++++++++++++--
 .../components/TranscriptSidePanel.tsx          | 17 +++++++++++++++--
 src/frontend/src/locales/de/rooms.json          | 10 ++++++----
 src/frontend/src/locales/en/rooms.json          | 10 ++++++----
 src/frontend/src/locales/fr/rooms.json          | 10 ++++++----
 src/frontend/src/locales/nl/rooms.json          | 10 ++++++----
 6 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
index 5e725847..60938779 100644
--- a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
+++ b/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')}
diff --git a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
index fe7de0f9..6d6e87b1 100644
--- a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
+++ b/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}
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 6075f2f5..b00d52cc 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/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.",
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 45aaefe4..56a5e7c5 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/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.",
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 46052bcc..e8ef5316 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/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.",
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index 7e76660a..3fe0213f 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/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.",