MN-430: PhotoHUDPreview with SightsSlider + Counter (#648)

* Added ObjectTranlation type

* Added useObjectTranslation hook

* Renamed CaptureCaptureHUDButtons to PhotoCaptureHUDButtons

* Added PhotoCaptureHUDSightsSlider component: display a scrolling sights label

* Added PhotoCaptureHUDCounter component

* Added PhotoCaptureHUDPreview component that render SightsSlider and Counter

* Added PhotoCaptureHUD that render the HUDPreview and HUDButtons

* Fix: lint

* fix: applying feedback review, Sights liftup in PhotoCaptureHUD

* rename Slider to SightsSlider

* useObjectTranslation/CaptureHUDPreviewtests added + fix

* directory structure changed by PreviewSight and PreviewAddDamage view

directory structure changed to be more clear with PreviewSight and PreviewAddDamage view

* TSDoc added to i18n language types

* fix on tests and import

* useSightLabel's hook moved to @monkvision/common + SightSlider component styles sight.id: string instead of sight:Sight

* SightsSlider tests done

* sight overlay now take all preview screen space

* sight centered in slider when selected

* responsive style added when portrait view

* when the picture is taken, the sight button(in the slider) changed to a light color and have a check icon

* TSDoc useSightLabel

* keep sight button selected in the center when switching back to main preview

* TSDoc useObjectTranslation & useSightLabel hooks

* fixing PR review comments

* PhotoCapture logic and component plug to camera. refacto + rename funct/var

* renaming component for more readability + callback mode (avoiding rerender camera) + button in AddDamagePreview traduction in sync

* tests + i18nAddDamage instance moved to separate file

* SightOverlay stays in CameraPreview frame in both landscape and portrait mode.

* SightOverlay equals CameraPreview in aspect ratio

* fixing PR (check comments)

* fixing PR (check comments)

* Created SwitchButton component (#656)

* import changeAlpha function in usePhotoHUDButtonBackground hook

Author: dlymonk

packages/private/test-utils/src/__mocks__/@monkvision/common.tsx

@@ -73,4 +73,6 @@ export = {
   })),
   useResponsiveStyle: jest.fn(() => ({ responsive: jest.fn(() => null) })),
   useWindowDimensions: jest.fn(() => ({ width: 0, height: 0, isPortrait: false })),
+  useObjectTranslation: jest.fn(() => ({ tObj: jest.fn(() => {}) })),
+  useSightLabel: jest.fn(() => ({ label: jest.fn(() => {}) })),
 };

packages/private/test-utils/src/__mocks__/@monkvision/inspection-capture-web.ts

@@ -0,0 +1,12 @@
+export = {
+  /* Actual exports */
+  /* Mocks */
+  PhotoCaptureHUDButtons: jest.fn(() => <></>),
+  PhotoCaptureHUDAddDamagePreview: jest.fn(() => <></>),
+  PhotoCaptureHUDSightPreview: jest.fn(() => <></>),
+  SightsCounter: jest.fn(() => <></>),
+  AddDamageButton: jest.fn(() => <></>),
+  SightsSlider: jest.fn(() => <></>),
+  PhotoCaptureHUD: jest.fn(() => <></>),
+  PhotoCapture: jest.fn(() => <></>),
+};

packages/private/test-utils/src/__mocks__/@monkvision/inspection-capture-web.tsx

@@ -4,5 +4,5 @@ export = {
   /* Mocks */
   initReactI18next: {},
   I18nextProvider: jest.fn(({ children }) => <>{children}</>),
-  useTranslation: jest.fn(() => ({ t: jest.fn((str) => str) })),
+  useTranslation: jest.fn(() => ({ t: jest.fn((str) => str), i18n: { language: 'en' } })),
 };

packages/private/test-utils/src/__mocks__/react-i18next.tsx

@@ -87,7 +87,10 @@ export function Camera({
   );
 
   return HUDComponent ? (
-    <HUDComponent handle={{ takePicture, error, retry, isLoading }} cameraPreview={cameraPreview} />
+    <HUDComponent
+      handle={{ takePicture, error, retry, isLoading, dimensions }}
+      cameraPreview={cameraPreview}
+    />
   ) : (
     <>{cameraPreview}</>
   );

packages/public/camera-web/src/Camera/Camera.tsx

@@ -1,4 +1,5 @@
 import { ComponentType, ReactElement } from 'react';
+import { PixelDimensions } from '@monkvision/types';
 import { MonkPicture, UserMediaError } from './hooks';
 
 /**
@@ -21,6 +22,11 @@ export interface CameraHandle {
    * A function to retry the camera stream fetching in case of error.
    */
   retry: () => void;
+  /**
+   * The dimensions of the resulting camera stream. Note that these dimensions can differ from the ones given in the
+   * stream constraints if they are not supported or available on the current device.
+   */
+  dimensions: PixelDimensions | null;
 }
 
 /**
@@ -40,7 +46,7 @@ export interface CameraEventHandlers {
  */
 export interface CameraHUDProps {
   /**
-   * The camera preview element. The HUD component is exepcted to take this element as a prop and display it however it
+   * The camera preview element. The HUD component is expected to take this element as a prop and display it however it
    * wants to.
    */
   cameraPreview: ReactElement;

packages/public/camera-web/src/Camera/CameraHUD.types.ts

@@ -201,6 +201,7 @@ describe('Camera component', () => {
         error: useCameraPreviewResultMock.error,
         retry: useCameraPreviewResultMock.retry,
         isLoading: useCameraPreviewResultMock.isLoading || useTakePictureResultMock.isLoading,
+        dimensions: useCameraPreviewResultMock.dimensions,
       },
       cameraPreview: expect.anything(),
     });

packages/public/camera-web/test/Camera/Camera.test.tsx

@@ -2,3 +2,5 @@ export * from './useWindowDimensions';
 export * from './useResponsiveStyle';
 export * from './useInteractiveStatus';
 export * from './useQueue';
+export * from './useObjectTranslation';
+export * from './useSightLabel';

packages/public/common/src/hooks/index.ts

@@ -0,0 +1,25 @@
+import { MonkLanguage, TranslationObject } from '@monkvision/types';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * The result of the useObjectTranslation. It contains a function which takes a LabelTranslation object and return the
+ * translated label sync with the actual selected language.
+ */
+export interface UseObjectTranslationResult {
+  /**
+   * Function translating a LabelTranslation object into a translated label sync with the actual selected language.
+   */
+  tObj: (obj: TranslationObject) => string;
+}
+
+/**
+ * Custom hook used to get a translate function tObj that translates TranslationObjects.
+ */
+export function useObjectTranslation(): UseObjectTranslationResult {
+  const { i18n } = useTranslation();
+  const tObj = (obj: TranslationObject) => {
+    const lang = i18n.language.slice(0, 2) as MonkLanguage;
+    return obj[lang] ?? 'translation-not-found';
+  };
+  return { tObj };
+}

packages/public/common/src/hooks/useObjectTranslation.ts

@@ -0,0 +1,33 @@
+import { LabelDictionary, Sight } from '@monkvision/types';
+import { useObjectTranslation } from './useObjectTranslation';
+
+/**
+ * The result of the useSightLabel. It contains a function which takes a Sight object and return the
+ * translated label sync with the actual selected language.
+ */
+export interface UseSightLabelResult {
+  label: (sight: Sight) => string;
+}
+
+/**
+ * Parameters given to the useSightLabel hook.
+ */
+export interface UseSightLabelParams {
+  /**
+   * A dictionary of label translations objects.
+   */
+  labels: LabelDictionary;
+}
+
+/**
+ * Custom hook used to get the label of a sight with the actual selected language.
+ */
+export function useSightLabel({ labels }: UseSightLabelParams): UseSightLabelResult {
+  const { tObj } = useObjectTranslation();
+  return {
+    label: (sight) => {
+      const translationObject = labels[sight.label];
+      return translationObject ? tObj(translationObject) : `translation-not-found[${sight.label}]`;
+    },
+  };
+}