fix(settings): close microphone access navigating away from page (#219)

Co-authored-by: Paul Makles <paulmakles@gmail.com>

src/pages/settings/panes/Audio.tsx

@@ -29,11 +29,11 @@ export function Component() {
 
     const askOrGetPermission = async () => {
         try {
-            const mediaStream = await navigator.mediaDevices.getUserMedia(
+            const result = await navigator.mediaDevices.getUserMedia(
                 constraints,
             );
 
-            setMediaStream(mediaStream);
+            setMediaStream(result);
         } catch (err) {
             // The user has blocked the permission
             setError(err as DOMException);
@@ -42,17 +42,28 @@ export function Component() {
         try {
             const { state } = await navigator.permissions.query({
                 // eslint-disable-next-line
-                // @ts-ignore
+                // @ts-ignore: very few browsers accept this `PermissionName`, but it has been drafted in https://www.w3.org/TR/permissions/#powerful-features-registry
                 name: "microphone",
             });
 
             setPermission(state);
         } catch (err) {
-            // the browser might not support `query` functionnality
+            // the browser might not support `query` functionnality or `PermissionName`
-            setError(err as DOMException);
+            // nothing to do
         }
     };
 
+    useEffect(() => {
+        return () => {
+            if (mediaStream) {
+                // close microphone access on unmount
+                mediaStream.getTracks().forEach(track => {
+                    track.stop()
+                })
+            }
+        }
+    }, [mediaStream]);
+
     useEffect(() => {
         if (!mediaStream) {
             return;