diff --git a/src/pages/settings/panes/Audio.tsx b/src/pages/settings/panes/Audio.tsx index 73a460d9..6b70919b 100644 --- a/src/pages/settings/panes/Audio.tsx +++ b/src/pages/settings/panes/Audio.tsx @@ -5,20 +5,67 @@ import { connectState } from "../../../redux/connector"; import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState"; +import { TextReact } from "../../../lib/i18n"; + 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 } export function Component() { + const [mediaStream, setMediaStream] = useState(undefined) const [mediaDevices, setMediaDevices] = useState(undefined); + const [permission, setPermission] = useState(undefined); + const [error, setError] = useState(undefined) + + const askOrGetPermission = async () => { + try { + const mediaStream = await navigator.mediaDevices.getUserMedia(constraints) + setMediaStream(mediaStream) + } catch (err) { + // The user has blocked the permission + setError(err) + } + + try { + const { state } = await navigator.permissions.query({ name: 'microphone' }) + setPermission(state) + + } catch (err) { + // the browser might not support `query` functionnality + setError(err); + } + } useEffect(() => { + askOrGetPermission() + }, []); + + useEffect(() => { + if (!mediaStream) { + return; + } + navigator .mediaDevices .enumerateDevices() .then( devices => { setMediaDevices(devices) + }, err => { + setError(err) }) - }, []); + + }, [mediaStream]) + + const handleAskForPermission = (ev: JSX.TargetedMouseEvent) => { + stopPropagation(ev) + setError(undefined) + askOrGetPermission() + } return ( <> @@ -33,12 +80,26 @@ export function Component() { mediaDevices?.filter(device => device.kind === "audioinput").map(device => { return ( ) }) } + {error && error.name === 'NotAllowedError' && + } + + {error && permission === 'prompt' && + + + + + ), + }}/> + + } );