🌐(frontend) internationalize video conference controls

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.

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 />

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

@@ -22,5 +22,14 @@
       "heading": "",
       "body": ""
     }
+  },
+  "controls": {
+    "microphone": "",
+    "camera": "",
+    "shareScreen": "",
+    "stopScreenShare": "",
+    "chat": "",
+    "settings": "",
+    "leave": ""
   }
 }

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"
   }
 }

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"
   }
 }