Fixed PhotoCapture top part cropped in portrait orientation

apps/demo-app/src/index.css

@@ -2,7 +2,7 @@ html,
 body,
 #root,
 .app-container {
-  height: 100%;
+  height: 100dvh;
   width: 100%;
 }
 

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts

@@ -1,6 +1,11 @@
 import { Styles } from '@monkvision/types';
 import { getInteractiveVariants, InteractiveVariation } from '@monkvision/common';
 
+const BUTTON_SIZE = 60;
+const BUTTON_PADDING = 20;
+const BUTTON_BORDER_WIDTH = 2;
+export const PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH = BUTTON_SIZE + BUTTON_PADDING + BUTTON_BORDER_WIDTH;
+
 export const captureButtonForegroundColors = getInteractiveVariants(
   '#f3f3f3',
   InteractiveVariation.DARKEN,
@@ -18,23 +23,33 @@ export const styles: Styles = {
     justifyContent: 'space-evenly',
     flexDirection: 'column',
     padding: '30px 40px',
-    backgroundColor: '#000000',
     zIndex: '9',
+    backgroundColor: '#00000080',
+    position: 'absolute',
   },
   containersPortrait: {
     __media: { portrait: true },
-    padding: 20,
+    padding: BUTTON_PADDING,
     flexDirection: 'row-reverse',
+    bottom: '0',
+    left: '0',
+    right: '0',
+  },
+  containersLandscape: {
+    __media: { landscape: true },
+    bottom: '0',
+    top: '0',
+    right: '0',
   },
   button: {
-    width: 60,
-    height: 60,
+    width: BUTTON_SIZE,
+    height: BUTTON_SIZE,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: '50%',
     borderStyle: 'solid',
-    borderWidth: 2,
+    borderWidth: BUTTON_BORDER_WIDTH,
     cursor: 'pointer',
     padding: 0,
   },

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/hooks.ts

@@ -51,6 +51,7 @@ export function useCaptureHUDButtonsStyles(
     containerStyle: {
       ...styles['container'],
       ...responsive(styles['containersPortrait']),
+      ...responsive(styles['containersLandscape']),
     },
     gallery: {
       style: {

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/PhotoCaptureHUDPreviewAddDamage1stShot.styles.ts

@@ -1,4 +1,5 @@
 import { Styles } from '@monkvision/types';
+import { PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
 
 export const styles: Styles = {
   container: {
@@ -24,11 +25,19 @@ export const styles: Styles = {
     right: '0',
     left: '0',
   },
+  topLandscape: {
+    __media: { landscape: true },
+    right: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 2}px`,
+  },
   infoBtn: {
     position: 'absolute',
     margin: '20px',
     bottom: '0',
   },
+  infoBtnPortrait: {
+    __media: { portrait: true },
+    bottom: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 1.5}px`,
+  },
   svg: {
     width: '15%',
   },

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

@@ -7,6 +7,7 @@ import { PhotoCaptureHUDCounter } from '../PhotoCaptureHUDCounter';
 import { PhotoCaptureMode } from '../../hooks';
 import { PhotoCaptureHUDCancelButton } from '../PhotoCaptureHUDCancelButton';
 import { crosshairSvg } from '../../../assets';
+import { usePhotoCaptureHUDPreviewAddDamage1stShotStyle } from './hook';
 
 /**
  * Props of the PhotoCaptureHUDPreviewAddDamage1stShot component.
@@ -28,18 +29,19 @@ export function PhotoCaptureHUDPreviewAddDamage1stShot({
   const [showInfoPopup, setShowInfoPopup] = useState(true);
   const { t } = useTranslation();
   const backgroundColor = usePhotoCaptureHUDButtonBackground();
+  const style = usePhotoCaptureHUDPreviewAddDamage1stShotStyle();
 
   return (
     <div style={styles['container']}>
       <DynamicSVG style={styles['svg']} svg={crosshairSvg} />
-      <div style={styles['top']}>
+      <div style={style.top}>
         <PhotoCaptureHUDCounter mode={PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT} />
         <PhotoCaptureHUDCancelButton onCancel={onCancel} />
       </div>
       {showInfoPopup && (
         <Button
           icon='close'
-          style={{ ...styles['infoBtn'], backgroundColor }}
+          style={{ ...style.infoBtn, backgroundColor }}
           onClick={() => setShowInfoPopup(false)}
         >
           {t('photo.hud.addDamage.infoBtn')}

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/hook.ts

@@ -0,0 +1,23 @@
+import { CSSProperties } from 'react';
+import { useResponsiveStyle } from '@monkvision/common';
+import { styles } from './PhotoCaptureHUDPreviewAddDamage1stShot.styles';
+
+export interface PhotoCaptureHUDPreviewAddDamage1stShotStyle {
+  top: CSSProperties;
+  infoBtn: CSSProperties;
+}
+
+export function usePhotoCaptureHUDPreviewAddDamage1stShotStyle(): PhotoCaptureHUDPreviewAddDamage1stShotStyle {
+  const { responsive } = useResponsiveStyle();
+
+  return {
+    top: {
+      ...styles['top'],
+      ...responsive(styles['topLandscape']),
+    },
+    infoBtn: {
+      ...styles['infoBtn'],
+      ...responsive(styles['infoBtnPortrait']),
+    },
+  };
+}

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/PhotoCaptureHUDPreviewAddDamage2ndShot.styles.ts

@@ -1,4 +1,5 @@
 import { Styles } from '@monkvision/types';
+import { PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
 
 export const styles: Styles = {
   container: {
@@ -24,6 +25,10 @@ export const styles: Styles = {
     right: '0',
     left: '0',
   },
+  topLandscape: {
+    __media: { landscape: true },
+    right: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 2}px`,
+  },
   frameContainer: {
     position: 'absolute',
     width: '100%',
@@ -38,6 +43,13 @@ export const styles: Styles = {
     borderRadius: '10px',
     boxShadow: '0px 0px 0px 100pc rgba(0, 0, 0, 0.5)',
   },
+  framePortrait: {
+    __media: { portrait: true },
+    top: '32%',
+    left: '25%',
+    width: '50%',
+    height: '36%',
+  },
   label: {
     position: 'absolute',
     top: '0',
@@ -57,4 +69,8 @@ export const styles: Styles = {
     padding: '10px 24px',
     textAlign: 'center',
   },
+  infoCloseupPortrait: {
+    __media: { portrait: true },
+    bottom: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 1.5}px`,
+  },
 };

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

@@ -1,9 +1,11 @@
 import { PixelDimensions } from '@monkvision/types';
 import { useTranslation } from 'react-i18next';
+import { isMobileDevice } from '@monkvision/common';
 import { PhotoCaptureMode } from '../../hooks';
 import { styles } from './PhotoCaptureHUDPreviewAddDamage2ndShot.styles';
 import { PhotoCaptureHUDCounter } from '../PhotoCaptureHUDCounter';
 import { PhotoCaptureHUDCancelButton } from '../PhotoCaptureHUDCancelButton';
+import { usePhotoCaptureHUDPreviewAddDamage2ndShotStyle } from './hook';
 
 /**
  * Props of the PhotoCaptureHUDPreviewAddDamage2ndShot component.
@@ -19,6 +21,13 @@ export interface PhotoCaptureHUDAddDamagePreview2ndShotProps {
   streamDimensions?: PixelDimensions | null;
 }
 
+function getAspectRatio(streamDimensions?: PixelDimensions | null) {
+  if (isMobileDevice() && streamDimensions) {
+    return `${streamDimensions?.width}/${streamDimensions?.height}`;
+  }
+  return '16/9';
+}
+
 /**
  * Component implementing an HUD displayed on top of the Camera preview during the PhotoCapture process when the current
  * mode is ADD_DAMAGE_2ND_SHOT.
@@ -28,21 +37,20 @@ export function PhotoCaptureHUDPreviewAddDamage2ndShot({
   streamDimensions,
 }: PhotoCaptureHUDAddDamagePreview2ndShotProps) {
   const { t } = useTranslation();
+  const style = usePhotoCaptureHUDPreviewAddDamage2ndShotStyle();
 
-  const aspectRatio = streamDimensions
-    ? `${streamDimensions?.width}/${streamDimensions?.height}`
-    : '16/9';
+  const aspectRatio = getAspectRatio(streamDimensions);
 
   return (
     <div style={styles['container']}>
       <div style={{ ...styles['frameContainer'], aspectRatio }} data-testid='frame-container'>
-        <div style={styles['frame']} />
+        <div style={style.frame} />
       </div>
-      <div style={styles['top']}>
+      <div style={style.top}>
         <PhotoCaptureHUDCounter mode={PhotoCaptureMode.ADD_DAMAGE_2ND_SHOT} />
         <PhotoCaptureHUDCancelButton onCancel={onCancel} />
       </div>
-      <div style={styles['infoCloseup']}>{t('photo.hud.addDamage.infoCloseup')}</div>
+      <div style={style.infoCloseup}>{t('photo.hud.addDamage.infoCloseup')}</div>
     </div>
   );
 }

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/hook.ts

@@ -0,0 +1,28 @@
+import { CSSProperties } from 'react';
+import { useResponsiveStyle } from '@monkvision/common';
+import { styles } from './PhotoCaptureHUDPreviewAddDamage2ndShot.styles';
+
+export interface PhotoCaptureHUDPreviewAddDamage2ndShotStyle {
+  top: CSSProperties;
+  infoCloseup: CSSProperties;
+  frame: CSSProperties;
+}
+
+export function usePhotoCaptureHUDPreviewAddDamage2ndShotStyle(): PhotoCaptureHUDPreviewAddDamage2ndShotStyle {
+  const { responsive } = useResponsiveStyle();
+
+  return {
+    top: {
+      ...styles['top'],
+      ...responsive(styles['topLandscape']),
+    },
+    frame: {
+      ...styles['frame'],
+      ...responsive(styles['framePortrait']),
+    },
+    infoCloseup: {
+      ...styles['infoCloseup'],
+      ...responsive(styles['infoCloseupPortrait']),
+    },
+  };
+}

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.styles.ts

@@ -1,4 +1,5 @@
 import { Styles } from '@monkvision/types';
+import { PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
 
 export const styles: Styles = {
   container: {
@@ -23,6 +24,10 @@ export const styles: Styles = {
     right: '0',
     left: '0',
   },
+  topLandscape: {
+    __media: { landscape: true },
+    right: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 2}px`,
+  },
   overlay: {
     zIndex: '9',
   },

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

@@ -57,7 +57,7 @@ export function PhotoCaptureHUDPreviewSight({
       {streamDimensions && (
         <SightOverlay style={{ ...style.overlay, aspectRatio }} sight={selectedSight} />
       )}
-      <div style={styles['top']}>
+      <div style={style.top}>
         <PhotoCaptureHUDCounter
           mode={PhotoCaptureMode.SIGHT}
           totalSights={sights.length}

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightsSlider/SightsSlider.styles.ts

@@ -1,4 +1,5 @@
 import { Styles } from '@monkvision/types';
+import { PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH } from '../../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
 
 export const styles: Styles = {
   container: {
@@ -7,7 +8,6 @@ export const styles: Styles = {
     flexDirection: 'row',
     justifyContent: 'flex-start',
     paddingLeft: '45%',
-    paddingRight: '45%',
     paddingBottom: '0%',
     overflowX: 'auto',
     overflowY: 'hidden',
@@ -16,9 +16,15 @@ export const styles: Styles = {
     maxWidth: '60vw',
     zIndex: '9',
     bottom: '0',
-    right: '0',
+    right: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 2}px`,
     left: '0',
   },
+  containerPortrait: {
+    __media: { portrait: true },
+    bottom: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 1.5}px`,
+    right: '0',
+    paddingRight: '45%',
+  },
   button: {
     margin: '10px',
     zIndex: '9',

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightsSlider/SightsSlider.tsx

@@ -2,8 +2,8 @@ import { Sight } from '@monkvision/types';
 import { RefObject, useEffect, useRef } from 'react';
 import { useSightLabel } from '@monkvision/common';
 import { labels } from '@monkvision/sights';
-import { styles } from './SightsSlider.styles';
 import { SightSliderButton } from './SightSliderButton';
+import { useSightsSliderStyle } from './hook';
 
 /**
  * Props of the SightsSlider component.
@@ -52,14 +52,15 @@ export function SightsSlider({
   onSelectedSight = () => {},
 }: SightsSliderProps) {
   const { label } = useSightLabel({ labels });
+  const { container } = useSightsSliderStyle();
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     scrollToSelectedSight(ref, sights.indexOf(selectedSight), true);
   }, [selectedSight, sightsTaken]);
 
   return (
-    <div style={styles['container']} ref={ref}>
+    <div style={container} ref={ref}>
       {sights.map((sight) => (
         <SightSliderButton
           key={sight.id}

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightsSlider/hook.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+import { useResponsiveStyle } from '@monkvision/common';
+import { styles } from './SightsSlider.styles';
+
+export interface SightsSliderHUDStyle {
+  container: CSSProperties;
+}
+
+export function useSightsSliderStyle(): SightsSliderHUDStyle {
+  const { responsive } = useResponsiveStyle();
+
+  return {
+    container: {
+      ...styles['container'],
+      ...responsive(styles['containerPortrait']),
+    },
+  };
+}

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/hook.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+import { useResponsiveStyle } from '@monkvision/common';
 import { styles } from './PhotoCaptureHUDPreviewSight.styles';
 
 export interface PhotoCaptureHUDSightPreviewStyle {
@@ -8,12 +9,15 @@ export interface PhotoCaptureHUDSightPreviewStyle {
 }
 
 export function usePhotoCaptureHUDSightPreviewStyle(): PhotoCaptureHUDSightPreviewStyle {
+  const { responsive } = useResponsiveStyle();
+
   return {
     container: {
       ...styles['container'],
     },
     top: {
       ...styles['top'],
+      ...responsive(styles['topLandscape']),
     },
     overlay: {
       ...styles['overlay'],