[settings][audio] fix labels of microphone selection

- ask user for microphone permission (prompt).
- handle error when permission is blocked.
- Suggest retry if the permission is still not set and no prompt.

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<MediaStream|undefined>(undefined)
     const [mediaDevices, setMediaDevices] = useState<MediaDeviceInfo[] | undefined>(undefined);
+    const [permission, setPermission] = useState<PermissionState | undefined>(undefined);
+    const [error, setError] = useState<DOMException | undefined>(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<HTMLAnchorElement>) => {
+        stopPropagation(ev)
+        setError(undefined)
+        askOrGetPermission()
+    }
 
     return (
         <>
@@ -33,12 +80,26 @@ export function Component() {
                     mediaDevices?.filter(device => device.kind === "audioinput").map(device => {
                         return (
                             <option value={device.deviceId} key={device.deviceId}>
-                                {device.label}
+                                {device.label || <Text id="app.settings.pages.audio.device_label_NA"/>}
                             </option>
                         )
                     })
                 }
             </ComboBox>
+            {error && error.name === 'NotAllowedError' &&
+                <Overline error="AudioPermissionBlock" type="error" block />}
+
+            {error && permission === 'prompt' &&
+                <Tip>
+                    <TextReact id="app.settings.pages.audio.tip_retry" fields={{
+                        retryBtn: (
+                            <a onClick={handleAskForPermission}>
+                                <Text id="app.settings.pages.audio.button_retry" />
+                            </a>
+                        ),
+                    }}/>
+                </Tip>
+            }
         </div>
         </>
     );