🌐(frontend) refactor device i18n keys for reusability across contexts

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.
2025-08-22 00:58:24 +02:00
parent 6f3339fbdc
commit a49893696b
8 changed files with 46 additions and 48 deletions
--- 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 (
    <div
@@ -56,7 +57,7 @@ export const AudioDevicesControl = ({
    >
      <ToggleDevice
        {...trackProps}
-        kind="audioinput"
+        kind={kind}
        toggle={trackProps.toggle as () => Promise<void>}
        toggleButtonProps={{
          ...(hideMenu
@@ -95,7 +96,7 @@ export const AudioDevicesControl = ({
            >
              <SelectDevice
                context="room"
-                kind="audioinput"
+                kind={kind}
                id={audioDeviceId}
                onSubmit={saveAudioInputDeviceId}
              />
--- 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 = <T extends string | number>({
  onSubmit,
  ...props
 }: SelectDevicePermissionsProps<T>) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })

  const deviceIcons = useDeviceIcons(kind)

@@ -66,11 +66,7 @@ const SelectDevicePermissions = <T extends string | number>({
      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<SelectDeviceContext>(() => {
    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}
      />
--- 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 = <T extends ToggleSource>({
  context = 'room',
  ...props
 }: ToggleDeviceProps<T>) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })

  const { variant, errorVariant, toggleButtonProps } =
    useMemo<ToggleDeviceStyleProps>(() => {
@@ -89,7 +89,7 @@ export const ToggleDevice = <T extends ToggleSource>({

  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])
--- 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 (
    <div
@@ -81,7 +82,7 @@ export const VideoDeviceControl = ({
    >
      <ToggleDevice
        {...trackProps}
-        kind="videoinput"
+        kind={kind}
        toggle={toggle}
        toggleButtonProps={{
          ...(hideMenu
@@ -120,7 +121,7 @@ export const VideoDeviceControl = ({
            >
              <SelectDevice
                context="room"
-                kind="videoinput"
+                kind={kind}
                id={userChoices.videoDeviceId}
                onSubmit={saveVideoInputDeviceId}
              />
--- 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",
--- 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",
--- 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",
--- 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",