Add interior sight masks

Author: natsukiai

packages/react-native-views/src/components/ActivityIndicatorView/index.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { utils } from '@monkvision/react-native';
 
@@ -14,10 +15,18 @@ const styles = StyleSheet.create({
   },
 });
 
-export default function ActivityIndicatorView() {
+export default function ActivityIndicatorView({ hideIndicator }) {
   return (
     <View style={styles.root}>
-      <ActivityIndicator color="white" />
+      {!hideIndicator && <ActivityIndicator color="white" />}
     </View>
   );
 }
+
+ActivityIndicatorView.propTypes = {
+  hideIndicator: PropTypes.bool,
+};
+
+ActivityIndicatorView.defaultProps = {
+  hideIndicator: false,
+};

packages/react-native-views/src/components/CameraView/index.jsx

@@ -79,8 +79,21 @@ export default function CameraView({
 
   const { activeSight, count, nextSightProps } = useSights(sights);
 
+  const handleFakeActivity = useCallback((onEnd = noop) => {
+    const fakeActivityId = setTimeout(() => {
+      setFakeActivity(null);
+      onEnd();
+    }, 500);
+
+    setFakeActivity(fakeActivityId);
+
+    return () => { clearTimeout(fakeActivityId); };
+  }, []);
+
   // PICTURES
   const handleTakePicture = useCallback(async () => {
+    handleFakeActivity();
+
     if (camera) {
       const options = { quality: 1 };
       const picture = await camera.takePictureAsync(options);
@@ -99,7 +112,7 @@ export default function CameraView({
         nextSightProps.onPress();
       }
     }
-  }, [activeSight, camera, nextSightProps, onTakePicture, pictures]);
+  }, [activeSight, camera, handleFakeActivity, nextSightProps, onTakePicture, pictures]);
 
   // UI
   const { colors } = useTheme();
@@ -108,17 +121,6 @@ export default function CameraView({
     onShowAdvice(pictures);
   };
 
-  const handleFakeActivity = useCallback((onEnd = noop) => {
-    const fakeActivityId = setTimeout(() => {
-      setFakeActivity(null);
-      onEnd();
-    }, 500);
-
-    setFakeActivity(fakeActivityId);
-
-    return () => { clearTimeout(fakeActivityId); };
-  }, []);
-
   const [visibleSnack, setVisibleSnack] = useState(false);
 
   const toggleSnackBar = () => setVisibleSnack((prev) => !prev);
@@ -132,10 +134,6 @@ export default function CameraView({
   const handleCameraReady = useCallback(setCamera, [setCamera]);
 
   // EFFECTS
-  useEffect(() => {
-    handleFakeActivity();
-  }, [activeSight.id, handleFakeActivity]);
-
   useEffect(() => {
     const picturesTaken = Object.values(pictures).filter((p) => Boolean(p.source)).length;
     if (count === picturesTaken) {
@@ -233,5 +231,10 @@ CameraView.defaultProps = {
     ['abstractMiddleLateralLeft', [null, 90, null], 'middle side left'],
     ['abstractFrontLateralLeft', [null, 60, null], 'front side left'],
     ['abstractFrontLeft', [null, 30, null], 'front left'],
+    ['vin', [null, null, null], 'VIN'],
+    ['abstractInteriorFront', [null, null, null], 'interior front'],
+    ['abstractBoard', [null, null, null], 'board'],
+    ['abstractInteriorBack', [null, null, null], 'interior back'],
+    ['abstractTrunk', [null, null, null], 'trunk'],
   ],
 };

packages/react-native/package.json

@@ -50,9 +50,7 @@
     "lodash.isboolean": "^3.0.3",
     "lodash.isempty": "^4.4.0",
     "lodash.isplainobject": "^4.0.6",
-    "lodash.kebabcase": "^4.1.1",
     "lodash.noop": "^3.0.1",
-    "lodash.upperfirst": "^4.3.1",
     "react-native-animation-library": "^0.0.8",
     "react-native-xml2js": "^1.0.3",
     "tinycolor2": "^1.4.2",

packages/react-native/src/assets/sightMasks.js

@@ -11,3 +11,7 @@ export { default as abstractRearLateralRight } from './sightMasks/abstract-rear-
 export { default as abstractRearLeft } from './sightMasks/abstract-rear-left.png';
 export { default as abstractRearRight } from './sightMasks/abstract-rear-right.png';
 export { default as vin } from './sightMasks/vin.png';
+export { default as abstractInteriorFront } from './sightMasks/abstract-interior-front.png';
+export { default as abstractInteriorBack } from './sightMasks/abstract-interior-back.png';
+export { default as abstractTrunk } from './sightMasks/abstract-trunk.png';
+export { default as abstractBoard } from './sightMasks/abstract-board.png';

packages/react-native/src/assets/sightMasks.native.js

@@ -12,3 +12,7 @@ export const abstractRearLateralRight = require('./sightMasks/abstract-rear-late
 export const abstractRearLeft = require('./sightMasks/abstract-rear-left.png');
 export const abstractRearRight = require('./sightMasks/abstract-rear-right.png');
 export const vin = require('./sightMasks/vin.png');
+export const abstractInteriorFront = require('./sightMasks/abstract-interior-front.png');
+export const abstractInteriorBack = require('./sightMasks/abstract-interior-front.png');
+export const abstractTrunk = require('./sightMasks/abstract-interior-front.png');
+export const abstractBoard = require('./sightMasks/abstract-interior-front.png');