fixed unnecessary placement of mic permission info

ohcnetwork · Mar 13, 2024 · e5c8f34 · e5c8f34
1 parent 4c51d3a
commit e5c8f34
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/src/Components/Patient/FileUpload.tsx b/src/Components/Patient/FileUpload.tsx
@@ -226,6 +226,7 @@ export const FileUpload = (props: FileUploadProps) => {
     { name: "Unarchived Files", value: "UNARCHIVED" },
     { name: "Archived Files", value: "ARCHIVED" },
   ]);
+  const [isMicPermission, setIsMicPermission] = useState(true);
 
   const { data: patient } = useQuery(routes.getPatient, {
     pathParams: { id: patientId },
@@ -556,6 +557,10 @@ export const FileUpload = (props: FileUploadProps) => {
     setbtnloader(false);
   };
 
+  const handleSetMicPermission = (isPermitted: boolean) => {
+    setIsMicPermission(isPermitted);
+  };
+
   const renderFileUpload = (item: FileUploadModel) => {
     const isPreviewSupported = previewExtensions.includes(item.extension ?? "");
     return (
@@ -1474,8 +1479,9 @@ export const FileUpload = (props: FileUploadProps) => {
                       confirmAudioBlobExists={confirmAudioBlobExists}
                       reset={resetRecording}
                       setResetRecording={setResetRecording}
+                      handleSetMicPermission={handleSetMicPermission}
                     />
-                    {!audioBlobExists && (
+                    {!audioBlobExists && !isMicPermission && (
                       <span className="text-sm font-medium text-warning-500">
                         <CareIcon className="care-l-exclamation-triangle mr-1 text-base" />
                         Please allow browser permission before you start

diff --git a/src/Utils/VoiceRecorder.tsx b/src/Utils/VoiceRecorder.tsx
@@ -6,16 +6,21 @@ import { NonReadOnlyUsers } from "./AuthorizeFor";
 import { useTranslation } from "react-i18next";
 export const VoiceRecorder = (props: any) => {
   const { t } = useTranslation();
-  const { createAudioBlob, confirmAudioBlobExists, reset, setResetRecording } =
-    props;
+  const {
+    createAudioBlob,
+    confirmAudioBlobExists,
+    reset,
+    setResetRecording,
+    handleSetMicPermission,
+  } = props;
   const [
     audioURL,
     isRecording,
     startRecording,
     stopRecording,
     newBlob,
     resetRecording,
-  ] = useRecorder();
+  ] = useRecorder(handleSetMicPermission);
   const [time, setTime] = useState(0);
   createAudioBlob(newBlob);
   useEffect(() => {

diff --git a/src/Utils/useRecorder.js b/src/Utils/useRecorder.js
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Error } from "./Notifications";
 
-const useRecorder = () => {
+const useRecorder = (handleMicPermission) => {
   const [audioURL, setAudioURL] = useState("");
   const [isRecording, setIsRecording] = useState(false);
   const [recorder, setRecorder] = useState(null);
@@ -11,10 +11,19 @@ const useRecorder = () => {
     // Lazily obtain recorder first time we're recording.
     if (recorder === null) {
       if (isRecording) {
-        requestRecorder().then(setRecorder, () => {
-          Error({ msg: "Please grant microphone permission to record audio." });
-          setIsRecording(false);
-        });
+        requestRecorder().then(
+          (fetchedRecorder) => {
+            setRecorder(fetchedRecorder);
+            handleMicPermission(true);
+          },
+          () => {
+            Error({
+              msg: "Please grant microphone permission to record audio.",
+            });
+            setIsRecording(false);
+            handleMicPermission(false);
+          }
+        );
       }
       return;
     }