diff --git a/package.json b/package.json index 37abf562..b4a84839 100644 --- a/package.json +++ b/package.json @@ -126,7 +126,7 @@ "sass": "^1.35.1", "shade-blend-color": "^1.0.0", "styled-components": "^5.3.0", - "typescript": "^4.3.2", + "typescript": "^4.4.2", "ulid": "^2.3.0", "use-resize-observer": "^7.0.0", "vite-plugin-pwa": "^0.8.1", diff --git a/src/pages/settings/panes/Audio.tsx b/src/pages/settings/panes/Audio.tsx index 6b70919b..a6e90bf7 100644 --- a/src/pages/settings/panes/Audio.tsx +++ b/src/pages/settings/panes/Audio.tsx @@ -1,48 +1,58 @@ -import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; - -import { connectState } from "../../../redux/connector"; - -import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState"; +import { useEffect, useState } from "preact/hooks"; import { TextReact } from "../../../lib/i18n"; +import { stopPropagation } from "../../../lib/stopPropagation"; +import { voiceState } from "../../../lib/vortex/VoiceState"; + +import { connectState } from "../../../redux/connector"; import ComboBox from "../../../components/ui/ComboBox"; import Overline from "../../../components/ui/Overline"; import Tip from "../../../components/ui/Tip"; -import {useEffect, useState} from "preact/hooks"; -import { stopPropagation } from "../../../lib/stopPropagation"; - -const constraints = { audio: true } +const constraints = { audio: true }; export function Component() { - const [mediaStream, setMediaStream] = useState(undefined) - const [mediaDevices, setMediaDevices] = useState(undefined); - const [permission, setPermission] = useState(undefined); - const [error, setError] = useState(undefined) + const [mediaStream, setMediaStream] = useState( + undefined, + ); + const [mediaDevices, setMediaDevices] = useState< + MediaDeviceInfo[] | undefined + >(undefined); + const [permission, setPermission] = useState( + undefined, + ); + const [error, setError] = useState(undefined); const askOrGetPermission = async () => { try { - const mediaStream = await navigator.mediaDevices.getUserMedia(constraints) - setMediaStream(mediaStream) + const mediaStream = await navigator.mediaDevices.getUserMedia( + constraints, + ); + + setMediaStream(mediaStream); } catch (err) { // The user has blocked the permission - setError(err) + setError(err as DOMException); } try { - const { state } = await navigator.permissions.query({ name: 'microphone' }) - setPermission(state) + const { state } = await navigator.permissions.query({ + // eslint-disable-next-line + // @ts-ignore + name: "microphone", + }); + setPermission(state); } catch (err) { // the browser might not support `query` functionnality - setError(err); + setError(err as DOMException); } - } + }; useEffect(() => { - askOrGetPermission() + askOrGetPermission(); }, []); useEffect(() => { @@ -50,70 +60,81 @@ export function Component() { return; } - navigator - .mediaDevices - .enumerateDevices() - .then( devices => { - setMediaDevices(devices) - }, err => { - setError(err) - }) + navigator.mediaDevices.enumerateDevices().then( + (devices) => { + setMediaDevices(devices); + }, + (err) => { + setError(err as DOMException); + }, + ); + }, [mediaStream]); - }, [mediaStream]) - - const handleAskForPermission = (ev: JSX.TargetedMouseEvent) => { - stopPropagation(ev) - setError(undefined) - askOrGetPermission() - } + const handleAskForPermission = ( + ev: JSX.TargetedMouseEvent, + ) => { + stopPropagation(ev); + setError(undefined); + askOrGetPermission(); + }; return ( <> -
-

- -

- changeAudioDevice(e.currentTarget.value, "input")}> - { - mediaDevices?.filter(device => device.kind === "audioinput").map(device => { - return ( - - ) - }) - } - - {error && error.name === 'NotAllowedError' && - } +
+

+ +

+ + changeAudioDevice(e.currentTarget.value, "input") + }> + {mediaDevices + ?.filter((device) => device.kind === "audioinput") + .map((device) => { + return ( + + ); + })} + + {error && error.name === "NotAllowedError" && ( + + )} - {error && permission === 'prompt' && - - - - - ), - }}/> - - } -
+ {error && permission === "prompt" && ( + + + + + ), + }} + /> + + )} +
); } function changeAudioDevice(deviceId: string, deviceType: string) { - if(deviceType === "input") { - window.localStorage.setItem("audioInputDevice", deviceId) - if(voiceState.isProducing("audio")) { + 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) + } else if (deviceType === "output") { + window.localStorage.setItem("audioOutputDevice", deviceId); } } diff --git a/yarn.lock b/yarn.lock index f69c1826..67788139 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4135,7 +4135,7 @@ type-fest@^0.20.2: resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4" integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ== -typescript@^4.3.2: +typescript@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.2.tgz#6d618640d430e3569a1dfb44f7d7e600ced3ee86" integrity sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==