From 3ef3f84877d2abe000886950ed26ecd47736ef0a Mon Sep 17 00:00:00 2001
From: David Epely <esion99@gmail.com>
Date: Sun, 31 Oct 2021 22:52:20 +0100
Subject: [PATCH] fix(settings): close microphone access navigating away from
 page (#219)

Co-authored-by: Paul Makles <paulmakles@gmail.com>
---
 src/pages/settings/panes/Audio.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/pages/settings/panes/Audio.tsx b/src/pages/settings/panes/Audio.tsx
index 843eb4cf..5365b047 100644
--- a/src/pages/settings/panes/Audio.tsx
+++ b/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
-            setError(err as DOMException);
+            // the browser might not support `query` functionnality or `PermissionName`
+            // nothing to do
         }
     };
 
+    useEffect(() => {
+        return () => {
+            if (mediaStream) {
+                // close microphone access on unmount
+                mediaStream.getTracks().forEach(track => {
+                    track.stop()
+                })
+            }
+        }
+    }, [mediaStream]);
+
     useEffect(() => {
         if (!mediaStream) {
             return;