switch to TS

www/app/transcripts/useAudioDevice.ts

@@ -0,0 +1,67 @@
+import { useState } from "react";
+
+import { Option } from "react-dropdown";
+
+const useAudioDevice = () => {
+  const [permissionOk, setPermissionOk] = useState(false);
+  const [audioDevices, setAudioDevices] = useState<Option[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const requestPermission = () => {
+    navigator.mediaDevices
+      .getUserMedia({
+        audio: true,
+      })
+      .then(() => {
+        setPermissionOk(true);
+        updateDevices();
+      })
+      .catch(() => {
+        setPermissionOk(false);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const getAudioStream = async (
+    deviceId: string,
+  ): Promise<MediaStream | null> => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          deviceId,
+          noiseSuppression: false,
+          echoCancellation: false,
+        },
+      });
+      return stream;
+    } catch (e) {
+      setPermissionOk(false);
+      setAudioDevices([]);
+      return null;
+    }
+  };
+
+  const updateDevices = async (): Promise<void> => {
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    const _audioDevices = devices
+      .filter(
+        (d) => d.kind === "audioinput" && d.deviceId != "" && d.label != "",
+      )
+      .map((d) => ({ value: d.deviceId, label: d.label }));
+
+    setPermissionOk(_audioDevices.length > 0);
+    setAudioDevices(_audioDevices);
+  };
+
+  return {
+    permissionOk,
+    audioDevices,
+    getAudioStream,
+    requestPermission,
+    loading,
+  };
+};
+
+export default useAudioDevice;