From 217b19e42abe00c049ef2c744073aacd7fdc7ad5 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 6 Aug 2024 14:50:26 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90(frontend)=20internationalize=20vid?=
 =?UTF-8?q?eo=20conference=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Localized video conference controls to match the selected language.

Previously, controls were always in English, causing confusion for French users.
A full refactor of the controls is planned soon.
---
 .../rooms/livekit/prefabs/ControlBar.tsx       | 18 ++++++++++++------
 src/frontend/src/locales/de/rooms.json         |  9 +++++++++
 src/frontend/src/locales/en/rooms.json         |  9 +++++++++
 src/frontend/src/locales/fr/rooms.json         |  9 +++++++++
 4 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
index 54330999..ce1282ae 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
@@ -20,6 +20,7 @@ import { SettingsMenuToggle } from '../components/controls/SettingsMenuToggle'
 import { mergeProps } from '@/utils/mergeProps.ts'
 import { StartMediaButton } from '../components/controls/StartMediaButton'
 import { useMediaQuery } from '../hooks/useMediaQuery'
+import { useTranslation } from 'react-i18next'
 
 /** @public */
 export type ControlBarControls = {
@@ -68,6 +69,7 @@ export function ControlBar({
   onDeviceError,
   ...props
 }: ControlBarProps) {
+  const { t } = useTranslation('rooms')
   const [isChatOpen, setIsChatOpen] = React.useState(false)
   const layoutContext = useMaybeLayoutContext()
   React.useEffect(() => {
@@ -152,7 +154,7 @@ export function ControlBar({
               onDeviceError?.({ source: Track.Source.Microphone, error })
             }
           >
-            {showText && 'Microphone'}
+            {showText && t('controls.microphone')}
           </TrackToggle>
           <div className="lk-button-group-menu">
             <MediaDeviceMenu
@@ -174,7 +176,7 @@ export function ControlBar({
               onDeviceError?.({ source: Track.Source.Camera, error })
             }
           >
-            {showText && 'Camera'}
+            {showText && t('controls.camera')}
           </TrackToggle>
           <div className="lk-button-group-menu">
             <MediaDeviceMenu
@@ -197,25 +199,29 @@ export function ControlBar({
           }
         >
           {showText &&
-            (isScreenShareEnabled ? 'Stop screen share' : 'Share screen')}
+            t(
+              isScreenShareEnabled
+                ? 'controls.stopScreenShare'
+                : 'controls.shareScreen'
+            )}
         </TrackToggle>
       )}
       {visibleControls.chat && (
         <ChatToggle>
           {showIcon && <ChatIcon />}
-          {showText && 'Chat'}
+          {showText && t('controls.chat')}
         </ChatToggle>
       )}
       {visibleControls.settings && (
         <SettingsMenuToggle>
           {showIcon && <GearIcon />}
-          {showText && 'Settings'}
+          {showText && t('controls.settings')}
         </SettingsMenuToggle>
       )}
       {visibleControls.leave && (
         <DisconnectButton>
           {showIcon && <LeaveIcon />}
-          {showText && 'Leave'}
+          {showText && t('controls.leave')}
         </DisconnectButton>
       )}
       <StartMediaButton />
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 6eeaeca4..fe64376c 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -22,5 +22,14 @@
       "heading": "",
       "body": ""
     }
+  },
+  "controls": {
+    "microphone": "",
+    "camera": "",
+    "shareScreen": "",
+    "stopScreenShare": "",
+    "chat": "",
+    "settings": "",
+    "leave": ""
   }
 }
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index b0dfccf1..b2822464 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -22,5 +22,14 @@
       "heading": "Authentication Required",
       "body": "This room has not been created yet. Please authenticate to create it or wait for an authenticated user to do so."
     }
+  },
+  "controls": {
+    "microphone": "Microphone",
+    "camera": "Camera",
+    "shareScreen": "Share screen",
+    "stopScreenShare": "Stop screen share",
+    "chat": "Chat",
+    "settings": "Settings",
+    "leave": "Leave"
   }
 }
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index dd0c94ed..8a38cc48 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -22,5 +22,14 @@
       "heading": "Authentification requise",
       "body": "Cette réunion n'a pas encore été créée. Veuillez vous authentifier pour la créer ou attendre qu'un utilisateur authentifié le fasse."
     }
+  },
+  "controls": {
+    "microphone": "Microphone",
+    "camera": "Camera",
+    "shareScreen": "Partager l'écran",
+    "stopScreenShare": "Arrêter le partage",
+    "chat": "Chat",
+    "settings": "Paramètres",
+    "leave": "Quitter"
   }
 }