Update Typescript to 4.4.2.

Fix issues associated with new version.

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",

src/pages/settings/panes/Audio.tsx

@@ -1,48 +1,58 @@
-import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
-
+import { useEffect, useState } from "preact/hooks";
-import { connectState } from "../../../redux/connector";
-
-import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState";
 
 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<MediaStream|undefined>(undefined)
+    const [mediaStream, setMediaStream] = useState<MediaStream | undefined>(
-    const [mediaDevices, setMediaDevices] = useState<MediaDeviceInfo[] | undefined>(undefined);
+        undefined,
-    const [permission, setPermission] = useState<PermissionState | undefined>(undefined);
+    );
-    const [error, setError] = useState<DOMException | 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)
+            const mediaStream = await navigator.mediaDevices.getUserMedia(
-            setMediaStream(mediaStream)
+                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' })
+            const { state } = await navigator.permissions.query({
-            setPermission(state)
+                // 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,22 +60,23 @@ export function Component() {
             return;
         }
 
-        navigator
+        navigator.mediaDevices.enumerateDevices().then(
-            .mediaDevices
+            (devices) => {
-            .enumerateDevices()
+                setMediaDevices(devices);
-            .then( devices => {
+            },
-                setMediaDevices(devices)
+            (err) => {
-            }, err => {
+                setError(err as DOMException);
-                setError(err)
+            },
-            })
+        );
+    }, [mediaStream]);
 
-    }, [mediaStream])
+    const handleAskForPermission = (
-
+        ev: JSX.TargetedMouseEvent<HTMLAnchorElement>,
-    const handleAskForPermission = (ev: JSX.TargetedMouseEvent<HTMLAnchorElement>) => {
+    ) => {
-        stopPropagation(ev)
+        stopPropagation(ev);
-        setError(undefined)
+        setError(undefined);
-        askOrGetPermission()
+        askOrGetPermission();
-    }
+    };
 
     return (
         <>
@@ -75,31 +86,41 @@ export function Component() {
                 </h3>
                 <ComboBox
                     value={window.localStorage.getItem("audioInputDevice") ?? 0}
-                onChange={(e) => changeAudioDevice(e.currentTarget.value, "input")}>
+                    onChange={(e) =>
-                {
+                        changeAudioDevice(e.currentTarget.value, "input")
-                    mediaDevices?.filter(device => device.kind === "audioinput").map(device => {
+                    }>
+                    {mediaDevices
+                        ?.filter((device) => device.kind === "audioinput")
+                        .map((device) => {
                             return (
-                            <option value={device.deviceId} key={device.deviceId}>
+                                <option
-                                {device.label || <Text id="app.settings.pages.audio.device_label_NA"/>}
+                                    value={device.deviceId}
+                                    key={device.deviceId}>
+                                    {device.label || (
+                                        <Text id="app.settings.pages.audio.device_label_NA" />
+                                    )}
                                 </option>
-                        )
+                            );
-                    })
+                        })}
-                }
                 </ComboBox>
-            {error && error.name === 'NotAllowedError' &&
+                {error && error.name === "NotAllowedError" && (
-                <Overline error="AudioPermissionBlock" type="error" block />}
+                    <Overline error="AudioPermissionBlock" type="error" block />
+                )}
 
-            {error && permission === 'prompt' &&
+                {error && permission === "prompt" && (
                     <Tip>
-                    <TextReact id="app.settings.pages.audio.tip_retry" fields={{
+                        <TextReact
+                            id="app.settings.pages.audio.tip_retry"
+                            fields={{
                                 retryBtn: (
                                     <a onClick={handleAskForPermission}>
                                         <Text id="app.settings.pages.audio.button_retry" />
                                     </a>
                                 ),
-                    }}/>
+                            }}
+                        />
                     </Tip>
-            }
+                )}
             </div>
         </>
     );
@@ -107,13 +128,13 @@ export function Component() {
 
 function changeAudioDevice(deviceId: string, deviceType: string) {
     if (deviceType === "input") {
-        window.localStorage.setItem("audioInputDevice", deviceId)
+        window.localStorage.setItem("audioInputDevice", deviceId);
         if (voiceState.isProducing("audio")) {
             voiceState.stopProducing("audio");
             voiceState.startProducing("audio");
         }
     } else if (deviceType === "output") {
-        window.localStorage.setItem("audioOutputDevice", deviceId)
+        window.localStorage.setItem("audioOutputDevice", deviceId);
     }
 }
 

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==