From 99cc7fdcd23743c88d6c19ce730151180dc600aa Mon Sep 17 00:00:00 2001
From: Ryan Alexander <w.ryan@stelch.com>
Date: Fri, 20 Aug 2021 02:11:02 +1000
Subject: [PATCH] Add audio tab and ability to change audio input device

---
 src/lib/vortex/VoiceState.ts       |  4 +-
 src/pages/settings/Settings.tsx    | 11 ++++++
 src/pages/settings/panes/Audio.tsx | 61 ++++++++++++++++++++++++++++++
 3 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/settings/panes/Audio.tsx

diff --git a/src/lib/vortex/VoiceState.ts b/src/lib/vortex/VoiceState.ts
index 0c32fc16..7c9287fb 100644
--- a/src/lib/vortex/VoiceState.ts
+++ b/src/lib/vortex/VoiceState.ts
@@ -152,8 +152,10 @@ class VoiceStateReference {
                 if (navigator.mediaDevices === undefined)
                     return console.log("No media devices."); // ! TODO: let the user know
 
+                const mediaDevice = window.localStorage.getItem("audioInputDevice");
+
                 const mediaStream = await navigator.mediaDevices.getUserMedia({
-                    audio: true,
+                    audio: mediaDevice?{deviceId: mediaDevice}:true
                 });
 
                 await this.client?.startProduce(
diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx
index 315a782d..c2754ed5 100644
--- a/src/pages/settings/Settings.tsx
+++ b/src/pages/settings/Settings.tsx
@@ -15,6 +15,7 @@ import {
     Flask,
     User,
     Megaphone,
+    Speaker,
 } from "@styled-icons/boxicons-solid";
 import { Route, Switch, useHistory } from "react-router-dom";
 import { LIBRARY_VERSION } from "revolt.js";
@@ -37,6 +38,7 @@ import { APP_VERSION } from "../../version";
 import { GenericSettings } from "./GenericSettings";
 import { Account } from "./panes/Account";
 import { Appearance } from "./panes/Appearance";
+import { Audio } from "./panes/Audio";
 import { ExperimentsPage } from "./panes/Experiments";
 import { Feedback } from "./panes/Feedback";
 import { Languages } from "./panes/Languages";
@@ -85,6 +87,12 @@ export default function Settings() {
                     category: (
                         <Text id="app.settings.categories.client_settings" />
                     ),
+                    id: "audio",
+                    icon: <Speaker size={20} />,
+                    title: <Text id="app.settings.pages.audio.title" />,
+                },
+                {
+
                     id: "appearance",
                     icon: <Palette size={20} />,
                     title: <Text id="app.settings.pages.appearance.title" />,
@@ -141,6 +149,9 @@ export default function Settings() {
                     <Route path="/settings/appearance">
                         <Appearance />
                     </Route>
+                    <Route path="/settings/audio">
+                        <Audio />
+                    </Route>
                     <Route path="/settings/notifications">
                         <Notifications />
                     </Route>
diff --git a/src/pages/settings/panes/Audio.tsx b/src/pages/settings/panes/Audio.tsx
new file mode 100644
index 00000000..73a460d9
--- /dev/null
+++ b/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;
+});