From 23ed41e18386f2e106a0826d1841c48ede9c2e8e Mon Sep 17 00:00:00 2001 From: David_LY Date: Thu, 11 Jan 2024 14:48:16 +0100 Subject: [PATCH 1/2] PhotoCaptureHUDAddDamagePreview component --- apps/monk-test-app/src/views/App.tsx | 6 +- .../src/views/TestView/TestView.tsx | 8 +- .../src/PhotoCapture/PhotoCapture.tsx | 6 +- .../src/PhotoCapture/PhotoCaptureHUD.tsx | 48 ++++++++++-- .../CancelButton/CancelButton.tsx | 18 +++++ .../CancelButton/index.ts | 1 + .../CloseupPreview/CloseupPreview.styles.ts | 60 ++++++++++++++ .../CloseupPreview/CloseupPreview.tsx | 41 ++++++++++ .../CloseupPreview/hook.ts | 12 +++ .../CloseupPreview/index.ts | 1 + .../CrosshairPreview.styles.ts | 32 ++++++++ .../CrosshairPreview/CrosshairPreview.tsx | 40 ++++++++++ .../CrosshairPreview/index.ts | 1 + .../DamageCounter/DamageCounter.styles.ts | 13 ++++ .../DamageCounter/DamageCounter.tsx | 26 +++++++ .../DamageCounter/index.ts | 1 + .../PhotoCaptureHUDAddDamagePreview.styles.ts | 22 +++++- .../PhotoCaptureHUDAddDamagePreview.tsx | 34 ++++---- .../src/PhotoCapture/hooks/useSightState.ts | 49 ++++++++++-- .../src/PhotoCapture/translations/de.json | 6 +- .../src/PhotoCapture/translations/en.json | 6 +- .../src/PhotoCapture/translations/fr.json | 6 +- .../PhotoCaptureHUDAddDamagePreview.test.tsx | 33 -------- .../CancelButton.test.tsx | 33 ++++++++ .../CloseupPreview.test.tsx | 78 +++++++++++++++++++ .../CrosshairPreview.test.tsx | 30 +++++++ .../DamageCounter.test.tsx | 43 ++++++++++ .../PhotoCaptureHUDAddDamagePreview.test.tsx | 46 +++++++++++ .../PhotoCapture/hooks/useSightState.test.tsx | 32 ++++++-- 29 files changed, 655 insertions(+), 77 deletions(-) create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton/CancelButton.tsx create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton/index.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/CloseupPreview.styles.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/CloseupPreview.tsx create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/hook.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/index.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.styles.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.tsx create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/index.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter/DamageCounter.styles.ts create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter/DamageCounter.tsx create mode 100644 packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter/index.ts delete mode 100644 packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview.test.tsx create mode 100644 packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton.test.tsx create mode 100644 packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview.test.tsx create mode 100644 packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview.test.tsx create mode 100644 packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter.test.tsx create mode 100644 packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.test.tsx diff --git a/apps/monk-test-app/src/views/App.tsx b/apps/monk-test-app/src/views/App.tsx index ff5c0f029..9695a1547 100644 --- a/apps/monk-test-app/src/views/App.tsx +++ b/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 ; + return ; } diff --git a/apps/monk-test-app/src/views/TestView/TestView.tsx b/apps/monk-test-app/src/views/TestView/TestView.tsx index 4e1d304d2..e4b354ec3 100644 --- a/apps/monk-test-app/src/views/TestView/TestView.tsx +++ b/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 (
- +
); } diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx index abee8f975..8fe56c373 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx @@ -26,6 +26,10 @@ export const PhotoCapture = i18nWrap(({ sights }: PhotoCaptureProps) => { }); const hud = (props: CameraHUDProps) => ; + const handleTakePicture = (picture: MonkPicture) => { + console.log('Picture Taken :', picture); + }; + return (
{ resolution={cameraState.resolution} format={cameraState.compressionFormat} quality={Number(cameraState.quality)} - onPictureTaken={(picture: MonkPicture) => console.log('Picture Taken :', picture)} + onPictureTaken={handleTakePicture} />
); diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD.tsx b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD.tsx index 27e7c3172..182af5b39 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD.tsx +++ b/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([]); + * const hud = (props: CameraHUDProps) => ; + * + * return ( + * + * ); + */ export function PhotoCaptureHUD({ sights, cameraPreview, handle }: PhotoCaptureHUDProps) { - const [mode, setMode] = useState(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 ? ( - setMode(HUDMode.DEFAULT)} /> + { + setMode(HUDMode.DEFAULT); + setAddDamagePreviewMode(AddDamagePreviewMode.DEFAULT); + }} + sight={selectedSight} + addDamagePreviewMode={addDamagePreviewMode} + streamDimensions={handle?.dimensions} + /> ) : ( ), - [mode, selectedSight, sightsTaken, handle?.dimensions], + [mode, selectedSight, sightsTaken, handle?.dimensions, addDamagePreviewMode], ); return (
diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton/CancelButton.tsx b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton/CancelButton.tsx new file mode 100644 index 000000000..2ac629233 --- /dev/null +++ b/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 ( + + ); +} diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton/index.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton/index.ts new file mode 100644 index 000000000..886c5b010 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton/index.ts @@ -0,0 +1 @@ +export * from './CancelButton'; diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/CloseupPreview.styles.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/CloseupPreview.styles.ts new file mode 100644 index 000000000..02abea621 --- /dev/null +++ b/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', + }, +}; diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/CloseupPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/CloseupPreview.tsx new file mode 100644 index 000000000..593d0fdff --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/CloseupPreview.tsx @@ -0,0 +1,41 @@ +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?.width}/${streamDimensions?.height}`; + const addDamagePreviewMode = AddDamagePreviewMode.CLOSEUP_PREVIEW; + + return ( +
+
+
+
+
+ + +
+
+ {sightLabel} +
+
{t('photo.hud.addDamage.infoCloseup')}
+
+ ); +} diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/hook.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/hook.ts new file mode 100644 index 000000000..af146a1a3 --- /dev/null +++ b/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']), + }, + }; +} diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/index.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/index.ts new file mode 100644 index 000000000..805563fca --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/index.ts @@ -0,0 +1 @@ +export * from './CloseupPreview'; diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.styles.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.styles.ts new file mode 100644 index 000000000..74bb5c5d2 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.styles.ts @@ -0,0 +1,32 @@ +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', + }, + infoBtn: { + position: 'absolute', + margin: '20px', + bottom: '0', + }, +}; diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.tsx new file mode 100644 index 000000000..bdd3ed427 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.tsx @@ -0,0 +1,40 @@ +import { Button, DynamicSVG } from '@monkvision/common-ui-web'; +import { useTranslation } from 'react-i18next'; +import { useState } from 'react'; +import { AddDamagePreviewMode, usePhotoHUDButtonBackground } from '../../hooks'; +import { styles } from './CrosshairPreview.styles'; +import { DamageCounter } from '../DamageCounter'; +import { CancelButton } from '../CancelButton'; + +export interface CrosshairPreviewProps { + onCancel: () => void; +} + +export function CrosshairPreview({ onCancel }: CrosshairPreviewProps) { + const [showInfoBtn, setShowInfoBtn] = useState(true); + + const { t } = useTranslation(); + const { bgColor } = usePhotoHUDButtonBackground(); + const addDamagePreviewMode = AddDamagePreviewMode.DEFAULT; + + const svg = + ' '; + return ( +
+ +
+ + +
+ {showInfoBtn && ( + + )} +
+ ); +} diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/index.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/index.ts new file mode 100644 index 000000000..496faf5ca --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/index.ts @@ -0,0 +1 @@ +export * from './CrosshairPreview'; diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter/DamageCounter.styles.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter/DamageCounter.styles.ts new file mode 100644 index 000000000..93ecea605 --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter/DamageCounter.styles.ts @@ -0,0 +1,13 @@ +import { Styles } from '@monkvision/types'; + +export const styles: Styles = { + counter: { + display: 'flex', + color: 'white', + alignItems: 'center', + justifyContent: 'center', + padding: '6px 12px', + borderRadius: '8px', + zIndex: '9', + }, +}; diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter/DamageCounter.tsx b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter/DamageCounter.tsx new file mode 100644 index 000000000..4350d48fc --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter/DamageCounter.tsx @@ -0,0 +1,26 @@ +import { useTranslation } from 'react-i18next'; +import { styles } from './DamageCounter.styles'; +import { AddDamagePreviewMode, usePhotoHUDButtonBackground } from '../../hooks'; + +export interface DamageCounterProps { + addDamagePreviewMode: AddDamagePreviewMode; +} + +export function DamageCounter({ addDamagePreviewMode }: DamageCounterProps) { + const { t } = useTranslation(); + const { bgColor } = usePhotoHUDButtonBackground(); + + const previewMode = Object.values(AddDamagePreviewMode).indexOf(addDamagePreviewMode) + 1; + const totalDamage = Object.values(AddDamagePreviewMode).length; + const counterText = + addDamagePreviewMode === AddDamagePreviewMode.DEFAULT + ? t('photo.hud.addDamage.damagedPart') + : t('photo.hud.addDamage.closeupPicture'); + + return ( +
{`${previewMode} / ${totalDamage} • ${counterText}`}
+ ); +} diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter/index.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter/index.ts new file mode 100644 index 000000000..e8bf1b7bd --- /dev/null +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter/index.ts @@ -0,0 +1 @@ +export * from './DamageCounter'; diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts index 93bd047cc..b50378a04 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.styles.ts @@ -4,20 +4,34 @@ export const styles: Styles = { container: { position: 'absolute', display: 'flex', - alignSelf: 'stretch', justifyContent: 'center', + alignItems: 'center', flexDirection: 'column', - flex: '1', + top: '0', + right: '0', + left: '0', + bottom: '0', }, top: { position: 'absolute', display: 'flex', - alignSelf: 'flex-start', + alignSelf: 'stretch', flexDirection: 'row', justifyContent: 'space-between', margin: '10px', - zIndex: '1', + zIndex: '9', top: '0', right: '0', + left: '0', + }, + infoBtn: { + position: 'absolute', + margin: '10px', + bottom: '0', + }, + test: { + position: 'absolute', + width: '100%', + aspectRatio: '16/9', }, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx index 3a07648a1..bb9324e95 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx @@ -1,21 +1,29 @@ -import { Button } from '@monkvision/common-ui-web'; -import { useTranslation } from 'react-i18next'; +import { PixelDimensions, Sight } from '@monkvision/types'; import { styles } from './PhotoCaptureHUDAddDamagePreview.styles'; -import { usePhotoHUDButtonBackground } from '../hooks'; +import { CloseupPreview } from './CloseupPreview'; +import { CrosshairPreview } from './CrosshairPreview'; +import { AddDamagePreviewMode } from '../hooks'; export interface PhotoCaptureHUDAddDamageMenuProps { + sight?: Sight | undefined; onCancel: () => void; + addDamagePreviewMode: AddDamagePreviewMode; + streamDimensions?: PixelDimensions | null; } -export function PhotoCaptureHUDAddDamagePreview({ onCancel }: PhotoCaptureHUDAddDamageMenuProps) { - const { t } = useTranslation(); - const { bgColor } = usePhotoHUDButtonBackground(); +export function PhotoCaptureHUDAddDamagePreview({ + onCancel, + sight, + addDamagePreviewMode, + streamDimensions, +}: PhotoCaptureHUDAddDamageMenuProps) { + function addDamagePreview() { + return addDamagePreviewMode === AddDamagePreviewMode.DEFAULT ? ( + + ) : ( + + ); + } - return ( -
- -
- ); + return
{addDamagePreview()}
; } diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/hooks/useSightState.ts b/packages/public/inspection-capture-web/src/PhotoCapture/hooks/useSightState.ts index 61aad913a..bba2401d2 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture/hooks/useSightState.ts +++ b/packages/public/inspection-capture-web/src/PhotoCapture/hooks/useSightState.ts @@ -1,5 +1,20 @@ import { useState } from 'react'; import { Sight } from '@monkvision/types'; +import { HUDMode } from '../hook'; + +/** + * Enumeration of the different AddDamagePreview when HUD is in ADD_DAMAGE mode + */ +export enum AddDamagePreviewMode { + /** + * Default preview which is the Crosshair preview + */ + DEFAULT = 'default', + /** + * Closeup preview + */ + CLOSEUP_PREVIEW = 'closeup-preview', +} /** * Custom hook used to initialize and manipulate sight state. @@ -7,16 +22,32 @@ import { Sight } from '@monkvision/types'; export function useSightState(sights: Sight[]) { const [selectedSight, setSelectedSight] = useState(sights[0]); const [sightsTaken, setSightsTaken] = useState([]); + const [mode, setMode] = useState(HUDMode.DEFAULT); + const [addDamagePreviewMode, setAddDamagePreviewMode] = useState( + AddDamagePreviewMode.DEFAULT, + ); const handleSightTaken = () => { - if (sightsTaken.includes(selectedSight)) { - return; + if (mode === HUDMode.DEFAULT) { + if (sightsTaken.includes(selectedSight)) { + return; + } + const updatedSightsTaken = [...sightsTaken, selectedSight]; + setSightsTaken(updatedSightsTaken); + const nextSight = sights.filter((sight) => !updatedSightsTaken.includes(sight))[0]; + if (nextSight) { + setSelectedSight(nextSight); + } } - const updatedSightsTaken = [...sightsTaken, selectedSight]; - setSightsTaken(updatedSightsTaken); - const nextSight = sights.filter((sight) => !updatedSightsTaken.includes(sight))[0]; - if (nextSight) { - setSelectedSight(nextSight); + if (mode === HUDMode.ADD_DAMAGE) { + if (addDamagePreviewMode === AddDamagePreviewMode.DEFAULT) { + setAddDamagePreviewMode(AddDamagePreviewMode.CLOSEUP_PREVIEW); + return; + } + if (addDamagePreviewMode === AddDamagePreviewMode.CLOSEUP_PREVIEW) { + setMode(HUDMode.DEFAULT); + setAddDamagePreviewMode(AddDamagePreviewMode.DEFAULT); + } } }; @@ -25,5 +56,9 @@ export function useSightState(sights: Sight[]) { setSelectedSight, sightsTaken, handleSightTaken, + mode, + setMode, + addDamagePreviewMode, + setAddDamagePreviewMode, }; } diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/translations/de.json b/packages/public/inspection-capture-web/src/PhotoCapture/translations/de.json index 51f34e576..a928f1ae0 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture/translations/de.json +++ b/packages/public/inspection-capture-web/src/PhotoCapture/translations/de.json @@ -5,7 +5,11 @@ "addDamageBtn": "Schaden" }, "addDamage": { - "cancelBtn": "Stornieren" + "cancelBtn": "Stornieren", + "damagedPart": "Beschädigtes Teil", + "infoBtn": "Richte das Ziel auf den beschädigten Teil aus und tippe dann auf den Auslöserknopf", + "closeupPicture": "Nahaufnahme-Vorschau", + "infoCloseup": "Ein Nahaufnahmebild von dem Schaden machen" } } } diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/translations/en.json b/packages/public/inspection-capture-web/src/PhotoCapture/translations/en.json index 8c3d1a056..677ae2f4a 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture/translations/en.json +++ b/packages/public/inspection-capture-web/src/PhotoCapture/translations/en.json @@ -5,7 +5,11 @@ "addDamageBtn": "Damage" }, "addDamage": { - "cancelBtn": "Cancel" + "cancelBtn": "Cancel", + "damagedPart": "Damaged part", + "infoBtn": "Aim the target at the damaged part then tap the shutter button", + "closeupPicture": "Closeup Picture", + "infoCloseup": "Take a closeup picture of the damage" } } } diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/translations/fr.json b/packages/public/inspection-capture-web/src/PhotoCapture/translations/fr.json index 86f2ca2d8..12249a347 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture/translations/fr.json +++ b/packages/public/inspection-capture-web/src/PhotoCapture/translations/fr.json @@ -5,7 +5,11 @@ "addDamageBtn": "Dégât" }, "addDamage": { - "cancelBtn": "Annuler" + "cancelBtn": "Annuler", + "damagedPart": "Pièce endommagée", + "infoBtn": "Placer le viseur sur la pièce endommagée puis enclencher le bouton capture de la photo", + "closeupPicture": "Dégât en gros plan", + "infoCloseup": "Prendre une photo en gros plan du dégât" } } } diff --git a/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview.test.tsx b/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview.test.tsx deleted file mode 100644 index 5a63b8076..000000000 --- a/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview.test.tsx +++ /dev/null @@ -1,33 +0,0 @@ -jest.mock('@monkvision/common-ui-web'); -jest.mock('react-i18next'); - -import { render } from '@testing-library/react'; -import { Button } from '@monkvision/common-ui-web'; -import { useTranslation } from 'react-i18next'; -import { PhotoCaptureHUDAddDamagePreview } from '../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview'; - -describe('PhotoCaptureHUDAddDamagePreview component', () => { - afterEach(() => { - jest.clearAllMocks(); - }); - - it('should render a Button', () => { - const onCancel = jest.fn(); - const { unmount } = render(); - - expect(Button).toHaveBeenCalled(); - - unmount(); - }); - - it('should translate button text', () => { - const onCancel = jest.fn(); - const useTranslationMock = useTranslation as jest.Mock; - const { unmount } = render(); - const { t } = useTranslationMock.mock.results[0].value; - - expect(t).toHaveBeenCalled(); - - unmount(); - }); -}); diff --git a/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton.test.tsx b/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton.test.tsx new file mode 100644 index 000000000..72fb996dc --- /dev/null +++ b/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton.test.tsx @@ -0,0 +1,33 @@ +jest.mock('@monkvision/common-ui-web'); + +import { render } from '@testing-library/react'; +import { useTranslation } from 'react-i18next'; +import { Button } from '@monkvision/common-ui-web'; +import { CancelButton } from '../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton'; + +describe('CancelButton component', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + + it('should call Button component', () => { + const buttonMock = Button as unknown as jest.Mock; + const onCancel = jest.fn(); + const { unmount } = render(); + + expect(buttonMock).toHaveBeenCalled(); + expect(buttonMock.mock.calls[0][0].children).toEqual('photo.hud.addDamage.cancelBtn'); + + unmount(); + }); + + it('should translate cancel button', () => { + const onCancel = jest.fn(); + const { unmount } = render(); + + const { t } = (useTranslation as jest.Mock).mock.results[0].value; + expect(t).toHaveBeenCalled(); + + unmount(); + }); +}); diff --git a/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview.test.tsx b/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview.test.tsx new file mode 100644 index 000000000..70da1ce8c --- /dev/null +++ b/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview.test.tsx @@ -0,0 +1,78 @@ +import { useSightLabel } from '@monkvision/common'; + +jest.mock('@monkvision/common-ui-web'); +jest.mock('@monkvision/common'); +jest.mock('../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter', () => ({ + DamageCounter: jest.fn(() => <>), +})); +jest.mock('../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton', () => ({ + CancelButton: jest.fn(() => <>), +})); + +import { render, screen } from '@testing-library/react'; +import { useTranslation } from 'react-i18next'; +import { Sight } from '@monkvision/types'; +import { CloseupPreview } from '../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview'; +import { CancelButton } from '../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton'; +import { DamageCounter } from '../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter'; + +describe('CloseupPreview component', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + + it('should render 2 components: DamageCounter, CancelButton', () => { + const onCancel = jest.fn(); + const { unmount } = render(); + expect(DamageCounter).toHaveBeenCalled(); + expect(CancelButton).toHaveBeenCalled(); + + unmount(); + }); + + it('should use t function from useTranslation hook', () => { + const onCancel = jest.fn(); + const useTranslationMock = useTranslation as jest.Mock; + const { unmount } = render(); + + const { t } = useTranslationMock.mock.results[0].value; + expect(t).toHaveBeenCalled(); + + unmount(); + }); + + it('should apply the streamDimensions to the aspect ratio', () => { + const onCancel = jest.fn(); + const dimensions = { width: 1920, height: 1080 }; + const { unmount } = render( + , + ); + + const frameContainer = screen.getByTestId('frame-container'); + expect(frameContainer.style.aspectRatio).toEqual(`${dimensions.width}/${dimensions.height}`); + + unmount(); + }); + + it('should not render sight label if undefined', () => { + const onCancel = jest.fn(); + const { unmount } = render(); + + const sightLabel = screen.getByTestId('sight-label'); + expect(sightLabel.innerHTML).toEqual(''); + + unmount(); + }); + + it('should call label function from useSightLabel hook', () => { + const onCancel = jest.fn(); + const useSightLabelMock = useSightLabel as jest.Mock; + const sight = { label: '' } as Sight; + const { unmount } = render(); + + const { label } = useSightLabelMock.mock.results[0].value; + expect(label).toHaveBeenCalled(); + + unmount(); + }); +}); diff --git a/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview.test.tsx b/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview.test.tsx new file mode 100644 index 000000000..3928d57f1 --- /dev/null +++ b/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview.test.tsx @@ -0,0 +1,30 @@ +jest.mock('@monkvision/common-ui-web'); +jest.mock('../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter', () => ({ + DamageCounter: jest.fn(() => <>), +})); +jest.mock('../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton', () => ({ + CancelButton: jest.fn(() => <>), +})); + +import { render } from '@testing-library/react'; +import { Button, DynamicSVG } from '@monkvision/common-ui-web'; +import { CrosshairPreview } from '../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview'; +import { CancelButton } from '../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CancelButton'; +import { DamageCounter } from '../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter'; + +describe('CrosshairPreview component', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + + it('should render 4 components: DynamicSVG, DamageCounter, CancelButton, Button', () => { + const onCancel = jest.fn(); + const { unmount } = render(); + expect(DynamicSVG).toHaveBeenCalled(); + expect(DamageCounter).toHaveBeenCalled(); + expect(CancelButton).toHaveBeenCalled(); + expect(Button).toHaveBeenCalled(); + + unmount(); + }); +}); diff --git a/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter.test.tsx b/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter.test.tsx new file mode 100644 index 000000000..8ba1d18a6 --- /dev/null +++ b/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter.test.tsx @@ -0,0 +1,43 @@ +import { render, screen } from '@testing-library/react'; +import { useTranslation } from 'react-i18next'; +import { DamageCounter } from '../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/DamageCounter'; +import { AddDamagePreviewMode } from '../../../src/PhotoCapture/hooks'; + +describe('DamageCounter component', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + + it('should call useTranslation hook and use t function from it', () => { + const { unmount } = render( + , + ); + + const { t } = (useTranslation as jest.Mock).mock.results[0].value; + expect(t).toHaveBeenCalled(); + + unmount(); + }); + + it('should render the default text value', () => { + const { unmount } = render( + , + ); + + const counterText = screen.getByTestId('damage-counter').textContent; + expect(counterText).toEqual('1 / 2 • photo.hud.addDamage.damagedPart'); + + unmount(); + }); + + it('should render the addDamageMode Closeup preview text value', () => { + const { unmount } = render( + , + ); + + const counterText = screen.getByTestId('damage-counter').textContent; + expect(counterText).toEqual('2 / 2 • photo.hud.addDamage.closeupPicture'); + + unmount(); + }); +}); diff --git a/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.test.tsx b/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.test.tsx new file mode 100644 index 000000000..fbaaff636 --- /dev/null +++ b/packages/public/inspection-capture-web/test/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.test.tsx @@ -0,0 +1,46 @@ +jest.mock('@monkvision/common-ui-web'); +jest.mock('react-i18next'); +jest.mock('../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview', () => ({ + CrosshairPreview: jest.fn(() => <>), +})); +jest.mock('../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview', () => ({ + CloseupPreview: jest.fn(() => <>), +})); + +import { AddDamagePreviewMode } from '../../../src/PhotoCapture/hooks'; +import { render } from '@testing-library/react'; +import { PhotoCaptureHUDAddDamagePreview } from '../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview'; +import { CrosshairPreview } from '../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview'; +import { CloseupPreview } from '../../../src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview'; + +describe('PhotoCaptureHUDAddDamagePreview component', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + + it('should call CrosshairPreview component when AddDamagePreviewMode is set to DEFAULT', () => { + const onCancel = jest.fn(); + const { unmount } = render( + , + ); + expect(CrosshairPreview).toHaveBeenCalled(); + + unmount(); + }); + + it('should call CloseupPreview component when AddDamagePreviewMode is set to CLOSEUP_PREVIEW', () => { + const onCancel = jest.fn(); + const { unmount } = render( + , + ); + expect(CloseupPreview).toHaveBeenCalled(); + + unmount(); + }); +}); diff --git a/packages/public/inspection-capture-web/test/PhotoCapture/hooks/useSightState.test.tsx b/packages/public/inspection-capture-web/test/PhotoCapture/hooks/useSightState.test.tsx index 1b85c2977..50c53f356 100644 --- a/packages/public/inspection-capture-web/test/PhotoCapture/hooks/useSightState.test.tsx +++ b/packages/public/inspection-capture-web/test/PhotoCapture/hooks/useSightState.test.tsx @@ -1,9 +1,10 @@ -jest.mock('@monkvision/common'); - +import { HUDMode } from '../../../src/PhotoCapture/hook'; import { act } from '@testing-library/react'; import { renderHook } from '@testing-library/react-hooks'; import { Sight } from '@monkvision/types'; -import { useSightState } from '../../../src/PhotoCapture/hooks'; +import { AddDamagePreviewMode, useSightState } from '../../../src/PhotoCapture/hooks'; + +jest.mock('@monkvision/common'); const sights = [ { id: 'id', label: { en: 'en', fr: 'fr', de: 'de' } }, @@ -36,13 +37,17 @@ describe('useSightState hook', () => { expect(result.current.selectedSight).toEqual(newSelectedSight); }); - it('should update sightsTaken and sightSelected when handleSightTaken is called', () => { + it('should update sightsTaken and sightSelected when handleSightTaken is called with mode is set to DEFAULT', () => { const { result } = renderHook(() => useSightState(sights)); + expect(result.current.sightsTaken).toEqual([]); + expect(result.current.selectedSight).toEqual(sights[0]); + expect(result.current.mode).toEqual(HUDMode.DEFAULT); + expect(result.current.addDamagePreviewMode).toEqual(AddDamagePreviewMode.DEFAULT); + act(() => { result.current.handleSightTaken(); }); - expect(result.current.sightsTaken).toEqual([sights[0]]); expect(result.current.selectedSight).toEqual(sights[1]); @@ -53,4 +58,21 @@ describe('useSightState hook', () => { expect(result.current.sightsTaken).toEqual([sights[0], sights[1]]); expect(result.current.selectedSight).toEqual(sights[1]); }); + + it('should update damagedPictureTaken handleSightTaken is called', async () => { + const { result, waitForNextUpdate } = renderHook(() => useSightState(sights)); + + await act(async () => { + result.current.setMode(HUDMode.ADD_DAMAGE); + await waitForNextUpdate(); + result.current.handleSightTaken(); + }); + expect(result.current.addDamagePreviewMode).toEqual(AddDamagePreviewMode.CLOSEUP_PREVIEW); + + await act(async () => { + result.current.handleSightTaken(); + }); + expect(result.current.addDamagePreviewMode).toEqual(AddDamagePreviewMode.DEFAULT); + expect(result.current.mode).toEqual(HUDMode.DEFAULT); + }); }); From 6d022409e7b1cc732fbe38cfc2cd6e405b1c2450 Mon Sep 17 00:00:00 2001 From: David_LY Date: Mon, 15 Jan 2024 16:03:29 +0100 Subject: [PATCH 2/2] fixing PR --- .../CloseupPreview/CloseupPreview.tsx | 7 ++++--- .../CrosshairPreview/CrosshairPreview.styles.ts | 3 +++ .../CrosshairPreview/CrosshairPreview.tsx | 8 ++++---- .../PhotoCaptureHUDAddDamagePreview.tsx | 7 ++++--- 4 files changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/CloseupPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/CloseupPreview.tsx index 593d0fdff..b5769af44 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/CloseupPreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CloseupPreview/CloseupPreview.tsx @@ -20,8 +20,9 @@ export function CloseupPreview({ sight, onCancel, streamDimensions }: CloseupPre const style = useCloseupPreviewStyle(); const sightLabel = sight && label(sight); - const aspectRatio = `${streamDimensions?.width}/${streamDimensions?.height}`; - const addDamagePreviewMode = AddDamagePreviewMode.CLOSEUP_PREVIEW; + const aspectRatio = streamDimensions + ? `${streamDimensions?.width}/${streamDimensions?.height}` + : '16/9'; return (
@@ -29,7 +30,7 @@ export function CloseupPreview({ sight, onCancel, streamDimensions }: CloseupPre
- +
diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.styles.ts b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.styles.ts index 74bb5c5d2..970a6009a 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.styles.ts +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.styles.ts @@ -29,4 +29,7 @@ export const styles: Styles = { margin: '20px', bottom: '0', }, + svg: { + width: '15%', + }, }; diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.tsx b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.tsx index bdd3ed427..9588f2b3f 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/CrosshairPreview/CrosshairPreview.tsx @@ -15,15 +15,15 @@ export function CrosshairPreview({ onCancel }: CrosshairPreviewProps) { const { t } = useTranslation(); const { bgColor } = usePhotoHUDButtonBackground(); - const addDamagePreviewMode = AddDamagePreviewMode.DEFAULT; const svg = - ' '; + ''; + return (
- +
- +
{showInfoBtn && ( diff --git a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx index bb9324e95..ac78b280b 100644 --- a/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx +++ b/packages/public/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUDAddDamagePreview/PhotoCaptureHUDAddDamagePreview.tsx @@ -1,4 +1,5 @@ import { PixelDimensions, Sight } from '@monkvision/types'; +import { useMemo } from 'react'; import { styles } from './PhotoCaptureHUDAddDamagePreview.styles'; import { CloseupPreview } from './CloseupPreview'; import { CrosshairPreview } from './CrosshairPreview'; @@ -17,13 +18,13 @@ export function PhotoCaptureHUDAddDamagePreview({ addDamagePreviewMode, streamDimensions, }: PhotoCaptureHUDAddDamageMenuProps) { - function addDamagePreview() { + const addDamagePreview = useMemo(() => { return addDamagePreviewMode === AddDamagePreviewMode.DEFAULT ? ( ) : ( ); - } + }, [addDamagePreviewMode, onCancel, sight, streamDimensions]); - return
{addDamagePreview()}
; + return
{addDamagePreview}
; }