diff --git a/src/Components/Patient/FileUpload.tsx b/src/Components/Patient/FileUpload.tsx index 4f74d9f62f4..40776853ec8 100644 --- a/src/Components/Patient/FileUpload.tsx +++ b/src/Components/Patient/FileUpload.tsx @@ -232,6 +232,26 @@ export const FileUpload = (props: FileUploadProps) => { { name: "Unarchived Files", value: "UNARCHIVED" }, { name: "Archived Files", value: "ARCHIVED" }, ]); + const [isMicPermission, setIsMicPermission] = useState(true); + + useEffect(() => { + const checkMicPermission = async () => { + try { + const permissions = await navigator.permissions.query({ + name: "microphone" as PermissionName, + }); + setIsMicPermission(permissions.state === "granted"); + } catch (error) { + setIsMicPermission(false); + } + }; + + checkMicPermission(); + + return () => { + setIsMicPermission(true); + }; + }, []); const { data: patient } = useQuery(routes.getPatient, { pathParams: { id: patientId }, @@ -1510,8 +1530,9 @@ export const FileUpload = (props: FileUploadProps) => { confirmAudioBlobExists={confirmAudioBlobExists} reset={resetRecording} setResetRecording={setResetRecording} + handleSetMicPermission={setIsMicPermission} /> - {!audioBlobExists && ( + {!audioBlobExists && !isMicPermission && ( { const { t } = useTranslation(); - const { createAudioBlob, confirmAudioBlobExists, reset, setResetRecording } = - props; + const { + createAudioBlob, + confirmAudioBlobExists, + reset, + setResetRecording, + handleSetMicPermission, + } = props; const [ audioURL, isRecording, @@ -16,7 +21,7 @@ export const VoiceRecorder = (props: any) => { 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 index 27a8b4d834e..b601a08f06c 100644 --- 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; }