From a49893696b43a4f7d1a1ab41cc20059d3d446500 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Fri, 22 Aug 2025 00:58:24 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90(frontend)=20refactor=20device=20i1?= =?UTF-8?q?8n=20keys=20for=20reusability=20across=20contexts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Update localization keys for device toggling and selection to be more generic, enabling translation sharing between join and room contexts. Eliminates duplicate translations and creates consistent messaging for device interactions regardless of application context. --- .../controls/Device/AudioDevicesControl.tsx | 11 ++++++----- .../components/controls/Device/SelectDevice.tsx | 12 ++++-------- .../components/controls/Device/ToggleDevice.tsx | 4 ++-- .../controls/Device/VideoDeviceControl.tsx | 11 ++++++----- src/frontend/src/locales/de/rooms.json | 14 +++++++------- src/frontend/src/locales/en/rooms.json | 14 +++++++------- src/frontend/src/locales/fr/rooms.json | 14 +++++++------- src/frontend/src/locales/nl/rooms.json | 14 +++++++------- 8 files changed, 46 insertions(+), 48 deletions(-) diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx index 664937ac..444eb502 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx @@ -23,7 +23,7 @@ export const AudioDevicesControl = ({ hideMenu, ...props }: AudioDevicesControlProps) => { - const { t } = useTranslation('rooms', { keyPrefix: 'join' }) + const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' }) const { userChoices: { audioDeviceId, audioOutputDeviceId }, @@ -44,8 +44,9 @@ export const AudioDevicesControl = ({ ...props, }) - const cannotUseDevice = useCannotUseDevice('audioinput') - const selectLabel = t('audioinput.choose') + const kind = 'audioinput' + const cannotUseDevice = useCannotUseDevice(kind) + const selectLabel = t(`${kind}.choose`) return (
Promise} toggleButtonProps={{ ...(hideMenu @@ -95,7 +96,7 @@ export const AudioDevicesControl = ({ > diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/SelectDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/SelectDevice.tsx index 980dd94e..c1486e4d 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Device/SelectDevice.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/SelectDevice.tsx @@ -29,7 +29,7 @@ const SelectDevicePermissions = ({ onSubmit, ...props }: SelectDevicePermissionsProps) => { - const { t } = useTranslation('rooms', { keyPrefix: 'join' }) + const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' }) const deviceIcons = useDeviceIcons(kind) @@ -66,11 +66,7 @@ const SelectDevicePermissions = ({ isDisabled={items.length === 0} items={items} iconComponent={deviceIcons.select} - placeholder={ - items.length === 0 - ? t('selectDevice.loading') - : t('selectDevice.select') - } + placeholder={items.length === 0 ? t('loading') : t('select')} selectedKey={id || activeDeviceId} onSelectionChange={(key) => { onSubmit?.(key as string) @@ -87,7 +83,7 @@ export const SelectDevice = ({ kind, context = 'join', }: SelectDeviceProps) => { - const { t } = useTranslation('rooms', { keyPrefix: 'join' }) + const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' }) const contextProps = useMemo(() => { if (context == 'room') { @@ -106,7 +102,7 @@ export const SelectDevice = ({ label="" isDisabled={true} items={[]} - placeholder={t('selectDevice.permissionsNeeded')} + placeholder={t('permissionsNeeded')} iconComponent={deviceIcons.select} {...contextProps} /> diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx index 6352a86f..41a4489b 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx @@ -43,7 +43,7 @@ export const ToggleDevice = ({ context = 'room', ...props }: ToggleDeviceProps) => { - const { t } = useTranslation('rooms', { keyPrefix: 'join' }) + const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' }) const { variant, errorVariant, toggleButtonProps } = useMemo(() => { @@ -89,7 +89,7 @@ export const ToggleDevice = ({ const toggleLabel = useMemo(() => { const label = t(enabled ? 'disable' : 'enable', { - keyPrefix: `join.${kind}`, + keyPrefix: `selectDevice.${kind}`, }) return deviceShortcut ? appendShortcutLabel(label, deviceShortcut) : label }, [enabled, kind, deviceShortcut, t]) diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx index 3360bb09..f3279ab2 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx @@ -24,7 +24,7 @@ export const VideoDeviceControl = ({ hideMenu, ...props }: VideoDeviceControlProps) => { - const { t } = useTranslation('rooms', { keyPrefix: 'join' }) + const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' }) const { userChoices, saveVideoInputDeviceId, saveVideoInputEnabled } = usePersistentUserChoices() @@ -41,7 +41,8 @@ export const VideoDeviceControl = ({ ...props, }) - const cannotUseDevice = useCannotUseDevice('videoinput') + const kind = 'videoinput' + const cannotUseDevice = useCannotUseDevice(kind) const toggle = () => { /** @@ -70,7 +71,7 @@ export const VideoDeviceControl = ({ } as VideoCaptureOptions) } - const selectLabel = t('videoinput.choose') + const selectLabel = t(`${kind}.choose`) return (
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index 28ae41a5..c21a4475 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -7,12 +7,10 @@ "home": "Zur Startseite zurückkehren", "back": "Dem Meeting erneut beitreten" }, - "join": { - "selectDevice": { - "loading": "Laden…", - "select": "Wählen Sie einen Wert", - "permissionsNeeded": "Genehmigung erforderlich" - }, + "selectDevice": { + "loading": "Laden…", + "select": "Wählen Sie einen Wert", + "permissionsNeeded": "Genehmigung erforderlich", "videoinput": { "choose": "Kamera auswählen", "permissionsNeeded": "Kamera auswählen - genehmigung erforderlich", @@ -31,7 +29,9 @@ "audiooutput": { "choose": "Lautsprecher auswählen", "permissionsNeeded": "Lautsprecher auswählen - genehmigung erforderlich" - }, + } + }, + "join": { "effects": { "description": "Effekte anwenden", "title": "Effekte", diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index 8d5e3c6c..4ba31e91 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -7,12 +7,10 @@ "home": "Return to home", "back": "Rejoin the meeting" }, - "join": { - "selectDevice": { - "loading": "Loading…", - "select": "Select a value", - "permissionsNeeded": "Permission needed" - }, + "selectDevice": { + "loading": "Loading…", + "select": "Select a value", + "permissionsNeeded": "Permission needed", "videoinput": { "choose": "Select camera", "permissionsNeeded": "Select camera - permission needed", @@ -31,7 +29,9 @@ "audiooutput": { "choose": "Select speaker", "permissionsNeeded": "Select speaker - permission needed" - }, + } + }, + "join": { "effects": { "description": "Apply effects", "title": "Effects", diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index 636acfb1..31b38884 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -7,12 +7,10 @@ "home": "Retourner à l'accueil", "back": "Réintégrer la réunion" }, - "join": { - "selectDevice": { - "loading": "Chargement…", - "select": "Sélectionnez une valeur", - "permissionsNeeded": "Autorisations nécessaires" - }, + "selectDevice": { + "loading": "Chargement…", + "select": "Sélectionnez une valeur", + "permissionsNeeded": "Autorisations nécessaires", "videoinput": { "choose": "Choisir la webcam", "permissionsNeeded": "Choisir la webcam - autorisations nécessaires", @@ -31,7 +29,9 @@ "audiooutput": { "choose": "Choisir le haut-parleur", "permissionsNeeded": "Choisir le haut-parleur - autorisations nécessaires" - }, + } + }, + "join": { "heading": "Rejoindre la réunion ?", "effects": { "description": "Effets d'arrière plan", diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json index f3e58120..49365a44 100644 --- a/src/frontend/src/locales/nl/rooms.json +++ b/src/frontend/src/locales/nl/rooms.json @@ -7,12 +7,10 @@ "home": "Keer terug naar het hoofdscherm", "back": "Sluit weer bij de vergadering aan" }, - "join": { - "selectDevice": { - "loading": "Bezig met laden…", - "select": "Selecteer een waarde", - "permissionsNeeded": "Toestemming vereist" - }, + "selectDevice": { + "loading": "Bezig met laden…", + "select": "Selecteer een waarde", + "permissionsNeeded": "Toestemming vereist", "videoinput": { "choose": "Selecteer camera", "permissionsNeeded": "Selecteer camera - Toestemming vereist", @@ -31,7 +29,9 @@ "audiooutput": { "choose": "Selecteer luidspreker", "permissionsNeeded": "Selecteer luidspreker - Toestemming vereist" - }, + } + }, + "join": { "effects": { "description": "Pas effecten toe", "title": "Effecten",