(feat) O3-2782: Show an inline notification for camera access errors …

…in the add attachment modal (#1631) (feat) Show inline notification for camera access error Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Feb 2, 2024 · 9f3f1cd · 9f3f1cd
1 parent 5c71287
commit 9f3f1cd
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 27 deletions.
diff --git a/...esm-patient-attachments-app/src/camera-media-uploader/camera-media-uploader.component.tsx b/...esm-patient-attachments-app/src/camera-media-uploader/camera-media-uploader.component.tsx
@@ -1,47 +1,36 @@
 import React, { useState, useCallback, useMemo, useEffect, useRef, useContext } from 'react';
-import { type UploadedFile, type FetchResponse, showSnackbar } from '@openmrs/esm-framework';
-import CameraMediaUploaderContext from './camera-media-uploader-context.resources';
 import { useTranslation } from 'react-i18next';
+import { Tabs, Tab, TabList, TabPanels, TabPanel, ModalHeader, ModalBody, InlineNotification } from '@carbon/react';
+import { type FetchResponse, type UploadedFile } from '@openmrs/esm-framework';
 import CameraComponent from './camera.component';
-import styles from './camera-media-uploader.scss';
-import { Tabs, Tab, TabList, TabPanels, TabPanel, ModalHeader, ModalBody } from '@carbon/react';
-import MediaUploaderComponent from './media-uploader.component';
+import CameraMediaUploaderContext from './camera-media-uploader-context.resources';
 import FileReviewContainer from './file-review.component';
+import MediaUploaderComponent from './media-uploader.component';
 import UploadingStatusComponent from './uploading-status.component';
+import styles from './camera-media-uploader.scss';
 
 interface CameraMediaUploaderModalProps {
-  multipleFiles?: boolean;
+  allowedExtensions: Array<string> | null;
   cameraOnly?: boolean;
-  collectDescription?: boolean;
-  saveFile: (file: UploadedFile) => Promise<FetchResponse<any>>;
   closeModal: () => void;
+  collectDescription?: boolean;
+  multipleFiles?: boolean;
   onCompletion?: () => void;
-  allowedExtensions: Array<string> | null;
+  saveFile: (file: UploadedFile) => Promise<FetchResponse<any>>;
 }
 
 const CameraMediaUploaderModal: React.FC<CameraMediaUploaderModalProps> = ({
+  allowedExtensions,
   cameraOnly,
-  multipleFiles,
-  collectDescription,
-  saveFile,
   closeModal,
+  collectDescription,
+  multipleFiles,
   onCompletion,
-  allowedExtensions,
+  saveFile,
 }) => {
-  const [error, setError] = useState<Error>(undefined);
+  const [error, setError] = useState<Error>(null);
   const [filesToUpload, setFilesToUpload] = useState<Array<UploadedFile>>([]);
   const [uploadFilesToServer, setUploadFilesToServer] = useState(false);
-  const { t } = useTranslation();
-
-  useEffect(() => {
-    if (error) {
-      showSnackbar({
-        subtitle: error.message,
-        kind: 'error',
-        title: t('cameraError', 'Camera Error'),
-      });
-    }
-  }, [error, t]);
 
   const handleTakePhoto = useCallback((file: string) => {
     setFilesToUpload([
@@ -106,7 +95,7 @@ const CameraMediaUploaderModal: React.FC<CameraMediaUploaderModalProps> = ({
 const CameraMediaUploadTabs = () => {
   const { t } = useTranslation();
   const [view, setView] = useState('upload');
-  const { cameraOnly, closeModal } = useContext(CameraMediaUploaderContext);
+  const { cameraOnly, closeModal, error } = useContext(CameraMediaUploaderContext);
   const mediaStream = useRef<MediaStream | undefined>();
 
   const stopCameraStream = useCallback(() => {
@@ -134,6 +123,15 @@ const CameraMediaUploadTabs = () => {
           </TabList>
           <TabPanels>
             <TabPanel>
+              {error ? (
+                <InlineNotification
+                  subtitle={t(
+                    'cameraAccessErrorMessage',
+                    'Please enable camera access in your browser settings and try again.',
+                  )}
+                  title={t('cameraError', 'Camera error')}
+                />
+              ) : null}
               {view === 'camera' && <CameraComponent mediaStream={mediaStream} stopCameraStream={stopCameraStream} />}
             </TabPanel>
             <TabPanel>

diff --git a/packages/esm-patient-attachments-app/src/camera-media-uploader/camera.component.tsx b/packages/esm-patient-attachments-app/src/camera-media-uploader/camera.component.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useCallback, useEffect, useContext, type MutableRefObject } from 'react';
+import React, { useCallback, useEffect, useContext, type MutableRefObject } from 'react';
 import Camera from 'react-html5-camera-photo';
 import CameraMediaUploaderContext from './camera-media-uploader-context.resources';
 import 'react-html5-camera-photo/build/css/index.css';
@@ -29,6 +29,7 @@ const CameraComponent: React.FC<CameraComponentProps> = ({ mediaStream, stopCame
       onCameraStart={setMediaStream}
       onCameraStop={stopCameraStream}
       onCameraError={setError}
+      isDisplayStartCameraError={false}
     />
   );
 };

diff --git a/packages/esm-patient-attachments-app/translations/am.json b/packages/esm-patient-attachments-app/translations/am.json
@@ -10,6 +10,7 @@
   "Attachments": "Attachments",
   "attachmentsInLowerCase": "attachments",
   "attachmentsInProperFormat": "Attachments",
+  "cameraAccessErrorMessage": "Please enable camera access in your browser settings and try again.",
   "cameraError": "Camera Error",
   "cancel": "Cancel",
   "changeImage": "Change image",

diff --git a/packages/esm-patient-attachments-app/translations/ar.json b/packages/esm-patient-attachments-app/translations/ar.json
@@ -10,6 +10,7 @@
   "Attachments": "المرفقات",
   "attachmentsInLowerCase": "attachments",
   "attachmentsInProperFormat": "Attachments",
+  "cameraAccessErrorMessage": "Please enable camera access in your browser settings and try again.",
   "cameraError": "خطأ في الكاميرا",
   "cancel": "إلغاء",
   "changeImage": "غير الصورة",

diff --git a/packages/esm-patient-attachments-app/translations/en.json b/packages/esm-patient-attachments-app/translations/en.json
@@ -10,6 +10,7 @@
   "Attachments": "Attachments",
   "attachmentsInLowerCase": "attachments",
   "attachmentsInProperFormat": "Attachments",
+  "cameraAccessErrorMessage": "Please enable camera access in your browser settings and try again.",
   "cameraError": "Camera Error",
   "cancel": "Cancel",
   "changeImage": "Change image",

diff --git a/packages/esm-patient-attachments-app/translations/es.json b/packages/esm-patient-attachments-app/translations/es.json
@@ -10,6 +10,7 @@
   "Attachments": "Archivos adjuntos",
   "attachmentsInLowerCase": "attachments",
   "attachmentsInProperFormat": "Attachments",
+  "cameraAccessErrorMessage": "Please enable camera access in your browser settings and try again.",
   "cameraError": "Error de cámara",
   "cancel": "Cancelar",
   "changeImage": "Cambiar imagen",

diff --git a/packages/esm-patient-attachments-app/translations/fr.json b/packages/esm-patient-attachments-app/translations/fr.json
@@ -10,6 +10,7 @@
   "Attachments": "Pièces jointes",
   "attachmentsInLowerCase": "attachments",
   "attachmentsInProperFormat": "Attachments",
+  "cameraAccessErrorMessage": "Please enable camera access in your browser settings and try again.",
   "cameraError": "Erreur avec l'appareil photo",
   "cancel": "Annuller",
   "changeImage": "Changer l'image",

diff --git a/packages/esm-patient-attachments-app/translations/he.json b/packages/esm-patient-attachments-app/translations/he.json
@@ -10,6 +10,7 @@
   "Attachments": "קבצים מצורפים",
   "attachmentsInLowerCase": "קבצים מצורפים",
   "attachmentsInProperFormat": "קבצים מצורפים",
+  "cameraAccessErrorMessage": "Please enable camera access in your browser settings and try again.",
   "cameraError": "שגיאת מצלמה",
   "cancel": "ביטול",
   "changeImage": "שנה תמונה",

diff --git a/packages/esm-patient-attachments-app/translations/km.json b/packages/esm-patient-attachments-app/translations/km.json
@@ -10,6 +10,7 @@
   "Attachments": "ឯកសារភ្ជាប់",
   "attachmentsInLowerCase": "ឯកសារភ្ជាប់",
   "attachmentsInProperFormat": "ឯកសារភ្ជាប់",
+  "cameraAccessErrorMessage": "Please enable camera access in your browser settings and try again.",
   "cameraError": "កំហុសកាមេរ៉ា",
   "cancel": "បោះបង់",
   "changeImage": "ផ្លាស់ប្តូររូបភាព",

diff --git a/packages/esm-patient-attachments-app/translations/zh.json b/packages/esm-patient-attachments-app/translations/zh.json
@@ -10,6 +10,7 @@
   "Attachments": "附件",
   "attachmentsInLowerCase": "附件",
   "attachmentsInProperFormat": "附件",
+  "cameraAccessErrorMessage": "Please enable camera access in your browser settings and try again.",
   "cameraError": "相机错误",
   "cancel": "取消",
   "changeImage": "更改图像",

diff --git a/packages/esm-patient-attachments-app/translations/zh_CN.json b/packages/esm-patient-attachments-app/translations/zh_CN.json
@@ -10,6 +10,7 @@
   "Attachments": "附件",
   "attachmentsInLowerCase": "附件",
   "attachmentsInProperFormat": "附件",
+  "cameraAccessErrorMessage": "Please enable camera access in your browser settings and try again.",
   "cameraError": "相机错误",
   "cancel": "取消",
   "changeImage": "更改图像",