Add audio tab and ability to change audio input device

src/pages/settings/panes/Audio.tsx

@@ -0,0 +1,61 @@
+import styles from "./Panes.module.scss";
+import { Text } from "preact-i18n";
+
+import { connectState } from "../../../redux/connector";
+
+import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState";
+
+import ComboBox from "../../../components/ui/ComboBox";
+import {useEffect, useState} from "preact/hooks";
+
+export function Component() {
+    const [mediaDevices, setMediaDevices] = useState<MediaDeviceInfo[] | undefined>(undefined);
+
+    useEffect(() => {
+        navigator
+            .mediaDevices
+            .enumerateDevices()
+            .then( devices => {
+                setMediaDevices(devices)
+            })
+    }, []);
+
+    return (
+        <>
+        <div>
+            <h3>
+                <Text id="app.settings.pages.audio.input_device" />
+            </h3>
+            <ComboBox
+                value={window.localStorage.getItem("audioInputDevice") ?? 0}
+                onChange={(e) => changeAudioDevice(e.currentTarget.value, "input")}>
+                {
+                    mediaDevices?.filter(device => device.kind === "audioinput").map(device => {
+                        return (
+                            <option value={device.deviceId} key={device.deviceId}>
+                                {device.label}
+                            </option>
+                        )
+                    })
+                }
+            </ComboBox>
+        </div>
+        </>
+    );
+}
+
+function changeAudioDevice(deviceId: string, deviceType: string) {
+    if(deviceType === "input") {
+        window.localStorage.setItem("audioInputDevice", deviceId)
+        if(voiceState.isProducing("audio")) {
+            voiceState.stopProducing("audio");
+            voiceState.startProducing("audio");
+        }
+    }else if(deviceType === "output") {
+        window.localStorage.setItem("audioOutputDevice", deviceId)
+    }
+}
+
+export const Audio = connectState(Component, () => {
+    return;
+});