Converted to hook and added MediaStream

src/Utils/useCamera.ts

@@ -0,0 +1,37 @@
+import { useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+export const useCamera = () => {
+  const toastShownRef = useRef(false);
+  const { t } = useTranslation();
+
+  const requestPermission = useCallback(
+    async (cameraFacingMode: string = "user") => {
+      try {
+        toastShownRef.current = false;
+        const constraints: MediaStreamConstraints = {
+          video: { facingMode: cameraFacingMode },
+        };
+
+        const mediaStream =
+          await navigator.mediaDevices.getUserMedia(constraints);
+
+        if (mediaStream == null) {
+          return { hasPermission: false, mediaStream: null };
+        }
+
+        return { hasPermission: true, mediaStream: mediaStream };
+      } catch (_error) {
+        if (!toastShownRef.current) {
+          toastShownRef.current = true;
+          toast.warning(t("camera_permission_denied"));
+        }
+        return { hasPermission: false, mediaStream: null };
+      }
+    },
+    [t],
+  );
+
+  return { requestPermission };
+};

src/components/Common/AvatarEditModal.tsx

@@ -23,7 +23,7 @@ import {
 
 import useDragAndDrop from "@/hooks/useDragAndDrop";
 
-import { handleCameraPermission } from "@/Utils/cameraPermissionHandler";
+import { useCamera } from "@/Utils/useCamera";
 
 interface Props {
   title: string;
@@ -79,7 +79,7 @@ const AvatarEditModal = ({
   );
   const { t } = useTranslation();
   const [isDragging, setIsDragging] = useState(false);
-  const { requestPermission } = handleCameraPermission();
+  const { requestPermission } = useCamera();
 
   const handleSwitchCamera = useCallback(() => {
     setConstraint(
@@ -395,10 +395,7 @@ const AvatarEditModal = ({
                         ref={webRef}
                         videoConstraints={constraint}
                         onUserMediaError={async () => {
-                          const hasPermission = await requestPermission(
-                            "camera",
-                            "user",
-                          );
+                          const hasPermission = await requestPermission("user");
                           if (!hasPermission) {
                             setIsCameraOpen(false);
                           }

src/components/Files/CameraCaptureDialog.tsx

@@ -15,7 +15,7 @@ import {
 
 import useBreakpoints from "@/hooks/useBreakpoints";
 
-import { handleCameraPermission } from "@/Utils/cameraPermissionHandler";
+import { useCamera } from "@/Utils/useCamera";
 
 export interface CameraCaptureDialogProps {
   open: boolean;
@@ -28,7 +28,7 @@ export interface CameraCaptureDialogProps {
 export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
   const { open, onOpenChange, onCapture, onResetCapture, setPreview } = props;
   const isLaptopScreen = useBreakpoints({ lg: true, default: false });
-  const { requestPermission } = handleCameraPermission();
+  const { requestPermission } = useCamera();
   const [stream, setStream] = useState<MediaStream | null>(null);
 
   const [cameraFacingMode, setCameraFacingMode] = useState(
@@ -47,16 +47,14 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
     if (!open) return;
 
     const getCameraStream = async () => {
-      const hasPermission = await requestPermission("camera", cameraFacingMode);
-      if (!hasPermission) {
+      const hasPermission = await requestPermission(cameraFacingMode);
+      if (!hasPermission.hasPermission) {
         onOpenChange(false);
         return;
       }
 
       try {
-        const mediaStream = await navigator.mediaDevices.getUserMedia({
-          video: { facingMode: cameraFacingMode },
-        });
+        const mediaStream = hasPermission.mediaStream;
         setStream(mediaStream);
       } catch (error) {
         console.error("Error accessing camera:", error);