Merge branch 'livekit' into toger5/track-processor-blur

src/settings/SettingsModal.tsx

@@ -26,7 +26,6 @@ import {
   backgroundBlur as backgroundBlurSetting,
   developerMode,
 } from "./settings";
-import { isFirefox } from "../Platform";
 import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
 import { Slider } from "../Slider";
 import { DeviceSelection } from "./DeviceSelection";
@@ -107,14 +106,16 @@ export const SettingsModal: FC<Props> = ({
         <Form>
           <DeviceSelection
             devices={devices.audioInput}
-            caption={t("common.microphone")}
+            title={t("settings.devices.microphone")}
+            numberedLabel={(n) =>
+              t("settings.devices.microphone_numbered", { n })
+            }
+          />
+          <DeviceSelection
+            devices={devices.audioOutput}
+            title={t("settings.devices.speaker")}
+            numberedLabel={(n) => t("settings.devices.speaker_numbered", { n })}
           />
-          {!isFirefox() && (
-            <DeviceSelection
-              devices={devices.audioOutput}
-              caption={t("settings.speaker_device_selection_label")}
-            />
-          )}
           <div className={styles.volumeSlider}>
             <label>{t("settings.audio_tab.effect_volume_label")}</label>
             <p>{t("settings.audio_tab.effect_volume_description")}</p>
@@ -141,7 +142,8 @@ export const SettingsModal: FC<Props> = ({
         <Form>
           <DeviceSelection
             devices={devices.videoInput}
-            caption={t("common.camera")}
+            title={t("settings.devices.camera")}
+            numberedLabel={(n) => t("settings.devices.camera_numbered", { n })}
           />
         </Form>
         <Separator />