Create a virtual default audio output

Managing your audio output manually is kind of cumbersome; Chrome creates a default audio output for us, but now that audio outputs are enabled on Firefox as well, I find it necessary for a good user experience that there always be a way to set it to "whatever the default is".

src/settings/DeviceSelection.tsx

@@ -13,16 +13,23 @@ import {
   RadioControl,
   Separator,
 } from "@vector-im/compound-web";
+import { useTranslation } from "react-i18next";
 
 import { MediaDevice } from "../livekit/MediaDevicesContext";
 import styles from "./DeviceSelection.module.css";
 
 interface Props {
   devices: MediaDevice;
-  caption: string;
+  title: string;
+  numberedLabel: (number: number) => string;
 }
 
-export const DeviceSelection: FC<Props> = ({ devices, caption }) => {
+export const DeviceSelection: FC<Props> = ({
+  devices,
+  title,
+  numberedLabel,
+}) => {
+  const { t } = useTranslation();
   const groupId = useId();
   const onChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
@@ -31,7 +38,7 @@ export const DeviceSelection: FC<Props> = ({ devices, caption }) => {
     [devices],
   );
 
-  if (devices.available.length == 0) return null;
+  if (devices.available.size == 0) return null;
 
   return (
     <div className={styles.selection}>
@@ -42,26 +49,28 @@ export const DeviceSelection: FC<Props> = ({ devices, caption }) => {
         as="h4"
         className={styles.title}
       >
-        {caption}
+        {title}
       </Heading>
       <Separator className={styles.separator} />
       <div className={styles.options}>
-        {devices.available.map(({ deviceId, label }, index) => (
+        {[...devices.available].map(([id, label]) => (
           <InlineField
-            key={deviceId}
+            key={id}
             name={groupId}
             control={
               <RadioControl
-                checked={deviceId === devices.selectedId}
+                checked={id === devices.selectedId}
                 onChange={onChange}
-                value={deviceId}
+                value={id}
               />
             }
           >
             <Label>
-              {!!label && label.trim().length > 0
-                ? label
-                : `${caption} ${index + 1}`}
+              {label.type === "name"
+                ? label.name
+                : label.type === "number"
+                  ? numberedLabel(label.number)
+                  : t("settings.devices.default")}
             </Label>
           </InlineField>
         ))}

src/settings/SettingsModal.tsx

@@ -93,11 +93,15 @@ 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}
-            caption={t("settings.speaker_device_selection_label")}
+            title={t("settings.devices.speaker")}
+            numberedLabel={(n) => t("settings.devices.speaker_numbered", { n })}
           />
           <div className={styles.volumeSlider}>
             <label>{t("settings.audio_tab.effect_volume_label")}</label>
@@ -123,7 +127,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>
     ),