🐛 refactor to not use async inside

Author: arunachalam-monk

packages/camera-web/src/Camera/hooks/useUserMedia.ts

@@ -206,6 +206,7 @@ export function useUserMedia(
   const { handleError } = useMonitoring();
   const isActive = useRef(true);
 
+  let cameraPermissionState: PermissionStatus['state'] | null = null;
   useEffect(() => {
     return () => {
       isActive.current = false;
@@ -216,17 +217,18 @@ export function useUserMedia(
     let type = UserMediaErrorType.OTHER;
     if (err instanceof Error && err.name === 'NotAllowedError') {
       type = UserMediaErrorType.NOT_ALLOWED;
-      try {
-        const permission = await navigator.permissions.query({ name: 'camera' as PermissionName });
-        switch (permission.state) {
+      if (cameraPermissionState) {
+        switch (cameraPermissionState) {
           case 'denied':
             type = UserMediaErrorType.NOT_ALLOWED_WEBPAGE;
             break;
           case 'granted':
             type = UserMediaErrorType.NOT_ALLOWED_BROWSER;
             break;
+          default:
+            type = UserMediaErrorType.NOT_ALLOWED;
         }
-      } catch (error) {}
+      }
     } else if (
       err instanceof Error &&
       Object.values(InvalidStreamErrorName).includes(err.name as InvalidStreamErrorName)
@@ -292,6 +294,14 @@ export function useUserMedia(
         }
       }
     };
+    navigator.permissions
+      .query({ name: 'camera' as PermissionName })
+      .then((status) => {
+        if (isActive.current) {
+          cameraPermissionState = status.state;
+        }
+      })
+      .catch(console.error);
     getUserMedia().catch(handleError);
   }, [constraints, stream, error, isLoading, lastConstraintsApplied]);
 

packages/camera-web/test/Camera/hooks/useUserMedia.test.ts

@@ -32,6 +32,13 @@ describe('useUserMedia hook', () => {
 
   beforeEach(() => {
     gumMock = mockGetUserMedia();
+    Object.defineProperty(global.navigator, 'permissions', {
+      value: {
+        query: jest.fn(() => Promise.reject()),
+      },
+      configurable: true,
+      writable: true,
+    });
   });
 
   afterEach(() => {
@@ -125,6 +132,56 @@ describe('useUserMedia hook', () => {
     unmount();
   });
 
+  it('should return a NotAllowed for webpage error in case of camera permission error', async () => {
+    const videoRef = { current: {} } as RefObject<HTMLVideoElement>;
+    const nativeError = new Error();
+    nativeError.name = 'NotAllowedError';
+    mockGetUserMedia({ createMock: () => jest.fn(() => Promise.reject(nativeError)) });
+    navigator.permissions.query = jest.fn(() =>
+      Promise.resolve({ state: 'granted' } as PermissionStatus),
+    );
+    const { result } = renderUseUserMedia({ constraints: {}, videoRef });
+    await waitFor(() => {
+      expect(result.current).toEqual({
+        stream: null,
+        dimensions: null,
+        error: {
+          type: UserMediaErrorType.NOT_ALLOWED_BROWSER,
+          nativeError,
+        },
+        isLoading: false,
+        retry: expect.any(Function),
+        availableCameraDevices: [],
+        selectedCameraDeviceId: null,
+      });
+    });
+  });
+
+  it('should return a NotAllowed for browser error in case of camera permission error', async () => {
+    const videoRef = { current: {} } as RefObject<HTMLVideoElement>;
+    const nativeError = new Error();
+    nativeError.name = 'NotAllowedError';
+    mockGetUserMedia({ createMock: () => jest.fn(() => Promise.reject(nativeError)) });
+    navigator.permissions.query = jest.fn(() =>
+      Promise.resolve({ state: 'denied' } as PermissionStatus),
+    );
+    const { result } = renderUseUserMedia({ constraints: {}, videoRef });
+    await waitFor(() => {
+      expect(result.current).toEqual({
+        stream: null,
+        dimensions: null,
+        error: {
+          type: UserMediaErrorType.NOT_ALLOWED_WEBPAGE,
+          nativeError,
+        },
+        isLoading: false,
+        retry: expect.any(Function),
+        availableCameraDevices: [],
+        selectedCameraDeviceId: null,
+      });
+    });
+  });
+
   it('should return an InvalidStream error if the stream has no tracks', async () => {
     const videoRef = { current: {} } as RefObject<HTMLVideoElement>;
     mockGetUserMedia({ tracks: [] });