improve behavior

www/app/transcripts/new/page.tsx

@@ -30,6 +30,7 @@ const App = () => {
   const {
     loading,
     permissionOk,
+    permissionDenied,
     audioDevices,
     requestPermission,
     getAudioStream,
@@ -71,13 +72,16 @@ const App = () => {
                 <p className="text-gray-500 text-center mt-5">
                   Reflector needs access to your microphone to work.
                   <br />
-                  Please grant permission to continue.
+                  {permissionDenied
+                    ? "Please reset microphone permissions to continue."
+                    : "Please grant permission to continue."}
                 </p>
                 <button
                   className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-auto"
                   onClick={requestPermission}
+                  disabled={permissionDenied}
                 >
-                  Grant Permission
+                  {permissionDenied ? "Access denied" : "Grant Permission"}
                 </button>
               </>
             )}

www/app/transcripts/useAudioDevice.ts

@@ -1,22 +1,57 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { Option } from "react-dropdown";
 
+const MIC_QUERY = { name: "microphone" as PermissionName };
+
 const useAudioDevice = () => {
-  const [permissionOk, setPermissionOk] = useState(false);
+  const [permissionOk, setPermissionOk] = useState<boolean>(false);
+  const [permissionDenied, setPermissionDenied] = useState<boolean>(false);
   const [audioDevices, setAudioDevices] = useState<Option[]>([]);
   const [loading, setLoading] = useState(true);
 
+  useEffect(() => {
+    checkPermission();
+  }, []);
+
+  useEffect(() => {
+    if (permissionOk) {
+      updateDevices();
+    }
+  }, [permissionOk]);
+
+  const checkPermission = (): void => {
+    navigator.permissions
+      .query(MIC_QUERY)
+      .then((permissionStatus) => {
+        setPermissionOk(permissionStatus.state === "granted");
+        setPermissionDenied(permissionStatus.state === "denied");
+        permissionStatus.onchange = () => {
+          setPermissionOk(permissionStatus.state === "granted");
+          setPermissionDenied(permissionStatus.state === "denied");
+        };
+      })
+      .catch(() => {
+        setPermissionOk(false);
+        setPermissionDenied(false);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
   const requestPermission = () => {
     navigator.mediaDevices
       .getUserMedia({
         audio: true,
       })
-      .then(() => {
+      .then((stream) => {
+        if (!navigator.userAgent.includes("Firefox"))
+          stream.getTracks().forEach((track) => track.stop());
         setPermissionOk(true);
-        updateDevices();
       })
       .catch(() => {
+        setPermissionDenied(true);
         setPermissionOk(false);
       })
       .finally(() => {
@@ -56,11 +91,12 @@ const useAudioDevice = () => {
   };
 
   return {
+    loading,
     permissionOk,
+    permissionDenied,
     audioDevices,
     getAudioStream,
     requestPermission,
-    loading,
   };
 };