Fix Camera Capture on Retake and Close (#9180)

ohcnetwork · Nov 27, 2024 · f8c78fd · f8c78fd
1 parent e309fcd
commit f8c78fd
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/src/components/Files/AudioCaptureDialog.tsx b/src/components/Files/AudioCaptureDialog.tsx
@@ -1,5 +1,5 @@
 import { Link } from "raviger";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -26,6 +26,7 @@ export default function AudioCaptureDialog(props: AudioCaptureDialogProps) {
 
   const { show, onHide, onCapture, autoRecord = false } = props;
   const [status, setStatus] = useState<Status | null>(null);
+  const mediaStreamRef = useRef<MediaStream | null>(null);
   const { t } = useTranslation();
 
   const { audioURL, resetRecording, startRecording, stopRecording } =
@@ -42,7 +43,8 @@ export default function AudioCaptureDialog(props: AudioCaptureDialogProps) {
   const handleStartRecording = () => {
     navigator.mediaDevices
       .getUserMedia({ audio: true })
-      .then(() => {
+      .then((stream) => {
+        mediaStreamRef.current = stream;
         setStatus("RECORDING");
         startRecording();
         timer.start();
@@ -105,6 +107,13 @@ export default function AudioCaptureDialog(props: AudioCaptureDialogProps) {
     if (autoRecord && show && status === "RECORDING") {
       handleStartRecording();
     }
+
+    return () => {
+      if (mediaStreamRef.current) {
+        mediaStreamRef.current.getTracks().forEach((track) => track.stop());
+        mediaStreamRef.current = null;
+      }
+    };
   }, [autoRecord, status, show]);
 
   return (

diff --git a/src/components/Files/CameraCaptureDialog.tsx b/src/components/Files/CameraCaptureDialog.tsx
@@ -15,10 +15,11 @@ export interface CameraCaptureDialogProps {
   show: boolean;
   onHide: () => void;
   onCapture: (file: File, fileName: string) => void;
+  onResetCapture: () => void;
 }
 
 export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
-  const { show, onHide, onCapture } = props;
+  const { show, onHide, onCapture, onResetCapture } = props;
   const isLaptopScreen = useBreakpoints({ lg: true, default: false });
 
   const [cameraFacingMode, setCameraFacingMode] = useState(
@@ -160,6 +161,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
                 <ButtonV2
                   onClick={() => {
                     setPreviewImage(null);
+                    onResetCapture();
                   }}
                   className="m-2"
                 >
@@ -183,6 +185,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
             variant="secondary"
             onClick={() => {
               setPreviewImage(null);
+              onResetCapture();
               onHide();
             }}
             className="m-2"
@@ -221,6 +224,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
                   <ButtonV2
                     onClick={() => {
                       setPreviewImage(null);
+                      onResetCapture();
                     }}
                   >
                     {t("retake")}
@@ -242,6 +246,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
             variant="secondary"
             onClick={() => {
               setPreviewImage(null);
+              onResetCapture();
               onHide();
             }}
           >

diff --git a/src/hooks/useFileUpload.tsx b/src/hooks/useFileUpload.tsx
@@ -249,6 +249,11 @@ export default function useFileUpload(
     setUploadFileNames([]);
   };
 
+  const clearFiles = () => {
+    setFiles([]);
+    setUploadFileNames([]);
+  };
+
   const Dialogues = (
     <>
       <CameraCaptureDialog
@@ -257,6 +262,7 @@ export default function useFileUpload(
         onCapture={(file) => {
           setFiles((prev) => [...prev, file]);
         }}
+        onResetCapture={clearFiles}
       />
       <AudioCaptureDialog
         show={audioModalOpen}
@@ -309,10 +315,7 @@ export default function useFileUpload(
       setFiles((prev) => prev.filter((_, i) => i !== index));
       setUploadFileNames((prev) => prev.filter((_, i) => i !== index));
     },
-    clearFiles: () => {
-      setFiles([]);
-      setUploadFileNames([]);
-    },
+    clearFiles,
     uploading,
   };
 }