MN-427 : Created PhotoCaptureHUDAddDamagePreview component (#664)

* PhotoCaptureHUDAddDamagePreview component

* fixing PR

Author: dlymonk

apps/monk-test-app/src/views/App.tsx

@@ -2,12 +2,12 @@ import { i18nCamera } from '@monkvision/camera-web';
 import { useI18nLink } from '@monkvision/common';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { CameraView } from './CameraView';
-// import { TestView } from './TestView';
+// import { CameraView } from './CameraView';
+import { TestView } from './TestView';
 
 export function App() {
   const { i18n } = useTranslation();
   useI18nLink(i18n, [i18nCamera]);
 
-  return <CameraView />;
+  return <TestView />;
 }

apps/monk-test-app/src/views/TestView/TestView.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import './TestView.css';
-import { CaptureHUDButtons } from '@monkvision/inspection-capture-web';
+import { PhotoCapture } from '@monkvision/inspection-capture-web';
+import { sights } from '@monkvision/sights';
 
+const sightsArray = Object.values(sights)
+  .filter((value) => value.category === 'exterior')
+  .slice(0, 5);
 export function TestView() {
   return (
     <div className='test-view-container'>
-      <CaptureHUDButtons />
+      <PhotoCapture sights={sightsArray} />
     </div>
   );
 }

packages/public/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx

@@ -26,6 +26,10 @@ export const PhotoCapture = i18nWrap(({ sights }: PhotoCaptureProps) => {
   });
   const hud = (props: CameraHUDProps) => <PhotoCaptureHUD sights={sights} {...props} />;
 
+  const handleTakePicture = (picture: MonkPicture) => {
+    console.log('Picture Taken :', picture);
+  };
+
   return (
     <div style={styles['container']}>
       <Camera
@@ -34,7 +38,7 @@ export const PhotoCapture = i18nWrap(({ sights }: PhotoCaptureProps) => {
         resolution={cameraState.resolution}
         format={cameraState.compressionFormat}
         quality={Number(cameraState.quality)}
-        onPictureTaken={(picture: MonkPicture) => console.log('Picture Taken :', picture)}
+        onPictureTaken={handleTakePicture}
       />
     </div>
   );

packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD.tsx

@@ -1,25 +1,61 @@
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { Sight } from '@monkvision/types';
 import { CameraHUDProps } from '@monkvision/camera-web/lib/Camera/CameraHUD.types';
 import { PhotoCaptureHUDButtons } from './PhotoCaptureHUDButtons';
 import { PhotoCaptureHUDAddDamagePreview } from './PhotoCaptureHUDAddDamagePreview';
 import { PhotoCaptureHUDSightPreview } from './PhotoCaptureHUDSightPreview';
 import { HUDMode, usePhotoCaptureHUDStyle } from './hook';
-import { useSightState } from './hooks';
+import { AddDamagePreviewMode, useSightState } from './hooks';
 
 export interface PhotoCaptureHUDProps extends CameraHUDProps {
   sights: Sight[];
 }
 
+/**
+ * Displays the camera preview and HUD components for capturing photos with sights.
+ *
+ * @component
+ *
+ * @param {Sight[]} sights - The array of sights available for selection.
+ *
+ * @example
+ * // Example usage of PhotoCaptureHUD component in Camera Component:
+ * import { Camera } from '@monkvision/camera-web';
+ * import { PhotoCaptureHUD } from '@monkvision/inspection-camera-web';
+ *
+ * export Function MyComponent () {
+ *  const [sights, setSights] = useState<sights[]>([]);
+ *  const hud = (props: CameraHUDProps) => <PhotoCaptureHUD sights={sights} {...props} />;
+ *
+ *  return (
+ *    <Camera HUDComponent={hud} ...props />
+ *  );
+ */
 export function PhotoCaptureHUD({ sights, cameraPreview, handle }: PhotoCaptureHUDProps) {
-  const [mode, setMode] = useState<HUDMode>(HUDMode.DEFAULT);
-  const { selectedSight, setSelectedSight, sightsTaken, handleSightTaken } = useSightState(sights);
+  const {
+    selectedSight,
+    setSelectedSight,
+    sightsTaken,
+    handleSightTaken,
+    mode,
+    setMode,
+    addDamagePreviewMode,
+    setAddDamagePreviewMode,
+  } = useSightState(sights);
   const style = usePhotoCaptureHUDStyle();
 
   const hudPreview = useMemo(
     () =>
       mode === HUDMode.ADD_DAMAGE ? (
-        <PhotoCaptureHUDAddDamagePreview onCancel={() => setMode(HUDMode.DEFAULT)} />
+        <PhotoCaptureHUDAddDamagePreview
+          onCancel={() => {
+            setMode(HUDMode.DEFAULT);
+            setAddDamagePreviewMode(AddDamagePreviewMode.DEFAULT);
+          }}
+          sight={selectedSight}
+          addDamagePreviewMode={addDamagePreviewMode}
+          streamDimensions={handle?.dimensions}
+        />
       ) : (
         <PhotoCaptureHUDSightPreview
           sights={sights}
@@ -30,7 +66,7 @@ export function PhotoCaptureHUD({ sights, cameraPreview, handle }: PhotoCaptureH
           streamDimensions={handle?.dimensions}
         />
       ),
-    [mode, selectedSight, sightsTaken, handle?.dimensions],
+    [mode, selectedSight, sightsTaken, handle?.dimensions, addDamagePreviewMode],
   );
   return (
     <div style={style.container}>

packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton/CancelButton.tsx

@@ -0,0 +1,18 @@
+import { Button } from '@monkvision/common-ui-web';
+import { useTranslation } from 'react-i18next';
+import { usePhotoHUDButtonBackground } from '../../hooks';
+
+export interface CancelButtonProps {
+  onCancel: () => void;
+}
+
+export function CancelButton({ onCancel }: CancelButtonProps) {
+  const { t } = useTranslation();
+  const { bgColor } = usePhotoHUDButtonBackground();
+
+  return (
+    <Button onClick={onCancel} style={{ backgroundColor: bgColor }}>
+      {t('photo.hud.addDamage.cancelBtn')}
+    </Button>
+  );
+}

packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton/index.ts

@@ -0,0 +1 @@
+export * from './CancelButton';

packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/CloseupPreview.styles.ts

@@ -0,0 +1,60 @@
+import { Styles } from '@monkvision/types';
+
+export const styles: Styles = {
+  container: {
+    position: 'absolute',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+    top: '0',
+    right: '0',
+    left: '0',
+    bottom: '0',
+  },
+  top: {
+    position: 'absolute',
+    display: 'flex',
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    margin: '10px',
+    zIndex: '9',
+    top: '0',
+    right: '0',
+    left: '0',
+  },
+  frameContainer: {
+    position: 'absolute',
+    width: '100%',
+  },
+  frame: {
+    position: 'absolute',
+    top: '25%',
+    left: '32%',
+    width: '36%',
+    height: '50%',
+    border: '2px solid #FFC000',
+    borderRadius: '10px',
+    boxShadow: '0px 0px 0px 100pc rgba(0, 0, 0, 0.5)',
+  },
+  label: {
+    position: 'absolute',
+    top: '0',
+    color: 'white',
+    margin: '20px',
+    padding: '10px 24px',
+  },
+  labelPortrait: {
+    __media: { portrait: true },
+    top: '10%',
+  },
+  infoCloseup: {
+    position: 'absolute',
+    bottom: '0',
+    color: 'white',
+    margin: '20px',
+    padding: '10px 24px',
+    textAlign: 'center',
+  },
+};

packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/CloseupPreview.tsx

@@ -0,0 +1,42 @@
+import { PixelDimensions, Sight } from '@monkvision/types';
+import { useTranslation } from 'react-i18next';
+import { useSightLabel } from '@monkvision/common';
+import { labels } from '@monkvision/sights';
+import { styles } from './CloseupPreview.styles';
+import { CancelButton } from '../CancelButton';
+import { DamageCounter } from '../DamageCounter';
+import { useCloseupPreviewStyle } from './hook';
+import { AddDamagePreviewMode } from '../../hooks';
+
+export interface CloseupPreviewProps {
+  sight?: Sight | undefined;
+  onCancel: () => void;
+  streamDimensions?: PixelDimensions | null;
+}
+
+export function CloseupPreview({ sight, onCancel, streamDimensions }: CloseupPreviewProps) {
+  const { t } = useTranslation();
+  const { label } = useSightLabel({ labels });
+  const style = useCloseupPreviewStyle();
+
+  const sightLabel = sight && label(sight);
+  const aspectRatio = streamDimensions
+    ? `${streamDimensions?.width}/${streamDimensions?.height}`
+    : '16/9';
+
+  return (
+    <div style={styles['container']}>
+      <div style={{ ...styles['frameContainer'], aspectRatio }} data-testid='frame-container'>
+        <div style={styles['frame']} />
+      </div>
+      <div style={styles['top']}>
+        <DamageCounter addDamagePreviewMode={AddDamagePreviewMode.CLOSEUP_PREVIEW} />
+        <CancelButton onCancel={onCancel} />
+      </div>
+      <div style={style.label} data-testid='sight-label'>
+        {sightLabel}
+      </div>
+      <div style={styles['infoCloseup']}>{t('photo.hud.addDamage.infoCloseup')}</div>
+    </div>
+  );
+}

packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/hook.ts

@@ -0,0 +1,12 @@
+import { useResponsiveStyle } from '@monkvision/common';
+import { styles } from './CloseupPreview.styles';
+
+export function useCloseupPreviewStyle() {
+  const { responsive } = useResponsiveStyle();
+  return {
+    label: {
+      ...styles['label'],
+      ...responsive(styles['labelPortrait']),
+    },
+  };
+}

packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/index.ts

@@ -0,0 +1 @@
+export * from './CloseupPreview';