fix: Add user media ready and camera permission denied notifications

ohcnetwork · Oct 1, 2024 · e45c8a8 · e45c8a8
1 parent 99d79de
commit e45c8a8
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 19 deletions.
diff --git a/src/Components/Facility/CoverImageEditModal.tsx b/src/Components/Facility/CoverImageEditModal.tsx
@@ -1,11 +1,11 @@
-import {
+import React, {
+  useState,
   ChangeEventHandler,
   useCallback,
   useEffect,
   useRef,
-  useState,
 } from "react";
-import { Success } from "../../Utils/Notifications";
+import { Success, Warn } from "../../Utils/Notifications";
 import useDragAndDrop from "../../Utils/useDragAndDrop";
 import { sleep } from "../../Utils/utils";
 import ButtonV2, { Cancel, Submit } from "../Common/components/ButtonV2";
@@ -67,9 +67,11 @@ const CoverImageEditModal = ({
   const LaptopScreenBreakpoint = 640;
   const isLaptopScreen = width >= LaptopScreenBreakpoint;
   const { t } = useTranslation();
+  const [isDragging, setIsDragging] = useState(false);
+
   const handleSwitchCamera = useCallback(() => {
-    setConstraint((prev) =>
-      prev.facingMode === "user"
+    setConstraint(
+      constraint.facingMode === "user"
         ? VideoConstraints.environment
         : VideoConstraints.user,
     );
@@ -85,6 +87,7 @@ const CoverImageEditModal = ({
       setSelectedFile(myFile);
     });
   };
+
   const closeModal = () => {
     setPreview(undefined);
     setSelectedFile(undefined);
@@ -162,11 +165,25 @@ const CoverImageEditModal = ({
   const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     dragProps.setDragOver(false);
-    const dropedFile = e?.dataTransfer?.files[0];
-    if (dropedFile.type.split("/")[0] !== "image")
+    setIsDragging(false);
+    const droppedFile = e?.dataTransfer?.files[0];
+    if (droppedFile.type.split("/")[0] !== "image")
       return dragProps.setFileDropError("Please drop an image file to upload!");
-    setSelectedFile(dropedFile);
+    setSelectedFile(droppedFile);
+  };
+
+  const onDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    dragProps.onDragOver(e);
+    setIsDragging(true);
+  };
+
+  const onDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    dragProps.onDragLeave();
+    setIsDragging(false);
   };
+
   const commonHint = (
     <>
       {t("max_size_for_image_uploaded_should_be")} 1mb.
@@ -202,24 +219,28 @@ const CoverImageEditModal = ({
               </>
             ) : (
               <div
-                onDragOver={dragProps.onDragOver}
-                onDragLeave={dragProps.onDragLeave}
+                onDragOver={onDragOver}
+                onDragLeave={onDragLeave}
                 onDrop={onDrop}
                 className={`mt-8 flex flex-1 flex-col items-center justify-center rounded-lg border-[3px] border-dashed px-3 py-6 ${
-                  dragProps.dragOver && "border-primary-500"
-                } ${
-                  dragProps.fileDropError !== ""
-                    ? "border-red-500"
-                    : "border-secondary-500"
-                }`}
+                  isDragging
+                    ? "border-primary-800 bg-primary-100"
+                    : dragProps.dragOver
+                      ? "border-primary-500"
+                      : "border-secondary-500"
+                } ${dragProps.fileDropError !== "" ? "border-red-500" : ""}`}
               >
                 <svg
                   stroke="currentColor"
                   fill="none"
                   viewBox="0 0 48 48"
                   aria-hidden="true"
                   className={`h-12 w-12 stroke-[2px] ${
-                    dragProps.dragOver && "text-primary-500"
+                    isDragging
+                      ? "text-green-500"
+                      : dragProps.dragOver
+                        ? "text-primary-500"
+                        : "text-secondary-600"
                   } ${
                     dragProps.fileDropError !== ""
                       ? "text-red-500"
@@ -230,7 +251,9 @@ const CoverImageEditModal = ({
                 </svg>
                 <p
                   className={`text-sm ${
-                    dragProps.dragOver && "text-primary-500"
+                    dragProps.dragOver
+                      ? "text-primary-500"
+                      : "text-secondary-700"
                   } ${
                     dragProps.fileDropError !== ""
                       ? "text-red-500"
@@ -267,6 +290,7 @@ const CoverImageEditModal = ({
               <div className="sm:flex-1" />
               <ButtonV2
                 onClick={() => {
+                  setConstraint(() => VideoConstraints.user);
                   setIsCameraOpen(true);
                 }}
               >
@@ -322,6 +346,13 @@ const CoverImageEditModal = ({
                     width={1280}
                     ref={webRef}
                     videoConstraints={constraint}
+                    onUserMedia={() => {
+                      Success({ msg: t("user_media_is_ready") });
+                    }}
+                    onUserMediaError={(_e) => {
+                      setIsCameraOpen(false);
+                      Warn({ msg: t("camera_permission_denied") });
+                    }}
                   />
                 </>
               ) : (

diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json
@@ -136,6 +136,8 @@
   "retake": "Retake",
   "submit": "Submit",
   "camera": "Camera",
+  "user_media_is_ready": "User media is ready",
+  "camera_permission_denied": "Camera Permission denied",
   "submitting": "Submitting",
   "view_details": "View Details",
   "type_to_search": "Type to search",
@@ -177,7 +179,7 @@
   "treating_doctor": "Treating Doctor",
   "hubs": "Hub Facilities",
   "spokes": "Spoke Facilities",
-  "add_spoke" : "Add Spoke Facility",
+  "add_spoke": "Add Spoke Facility",
   "ration_card__NO_CARD": "Non-card holder",
   "ration_card__BPL": "BPL",
   "ration_card__APL": "APL",

diff --git a/src/Locale/hi/Common.json b/src/Locale/hi/Common.json
@@ -137,6 +137,8 @@
   "retake": "फिर से लेना",
   "submit": "जमा करना",
   "camera": "कैमरा",
+  "user_media_is_ready": "उपयोगकर्ता मीडिया तैयार है",
+  "camera_permission_denied": "कैमरा अनुमति नहीं दी गई",
   "submitting": "भेजने से",
   "view_details": "विवरण देखें",
   "type_to_search": "खोजने के लिए टाइप करें",

diff --git a/src/Locale/kn/Common.json b/src/Locale/kn/Common.json
@@ -137,6 +137,8 @@
   "retake": "ಮರುಪಡೆಯಿರಿ",
   "submit": "ಸಲ್ಲಿಸಿ",
   "camera": "ಕ್ಯಾಮೆರಾ",
+  "user_media_is_ready": "ಬಳಕೆದಾರ ಮೀಡಿಯಾ ಸಿದ್ಧವಾಗಿದೆ",
+  "camera_permission_denied": "ಕ್ಯಾಮೆರಾ ಅನುಮತಿ ನಿರಾಕರಿಸಲಾಗಿದೆ",
   "submitting": "ಸಲ್ಲಿಸಲಾಗುತ್ತಿದೆ",
   "view_details": "ವಿವರಗಳನ್ನು ವೀಕ್ಷಿಸಿ",
   "type_to_search": "ಹುಡುಕಲು ಟೈಪ್ ಮಾಡಿ",

diff --git a/src/Locale/ml/Common.json b/src/Locale/ml/Common.json
@@ -137,6 +137,8 @@
   "retake": "വീണ്ടും എടുക്കുക",
   "submit": "സമർപ്പിക്കുക",
   "camera": "ക്യാമറ",
+  "user_media_is_ready": "ഉപയോക്താവിന്റെ മീഡിയ സജ്ജമാണ്",
+  "camera_permission_denied": "ക്യാമറ അനുമതി നിഷേധിച്ചു",
   "submitting": "സമർപ്പിക്കുന്നു",
   "view_details": "വിശദാംശങ്ങൾ കാണുക",
   "type_to_search": "തിരയാൻ ടൈപ്പ് ചെയ്യുക",

diff --git a/src/Locale/ta/Common.json b/src/Locale/ta/Common.json
@@ -137,6 +137,8 @@
   "retake": "மீண்டும் எடுக்கவும்",
   "submit": "சமர்ப்பிக்கவும்",
   "camera": "கேமரா",
+  "user_media_is_ready": "பயனர் மீடியா தயாராக்கப்பட்டுள்ளது",
+  "camera_permission_denied": "கேமரா அனுமதி நிராகரித்தது",
   "submitting": "சமர்ப்பிக்கிறது",
   "view_details": "விவரங்களைக் காண்க",
   "type_to_search": "தேட தட்டச்சு செய்யவும்",