@plusscommunities/pluss-core-app 1.7.0 → 1.7.1

package/dist/module/js/images/findLandmarkRange.js

@@ -0,0 +1,113 @@
+import _ from 'lodash';
+import moment from 'moment';
+import { stringActions } from '../../apis';
+import detectFaces from './detectFaces';
+import getScaledOffset from './getScaledOffset';
+
+const findLandmarkRange = async (url, options) => {
+  let cachedValues;
+
+  if (options && options.cachedValues) {
+    cachedValues = options.cachedValues;
+  }
+
+  try {
+    const response = await stringActions.getString('plussSpace', `imagefaces_${encodeURIComponent(url)}`);
+    cachedValues = response.data;
+  } catch (e) {
+    console.log('errored from cache');
+  }
+
+  if (!cachedValues || !cachedValues.faces || !cachedValues.image || _.isEmpty(cachedValues.faces) && moment().add(-1, 'w').valueOf() > moment(cachedValues.timestamp).valueOf()) {
+    cachedValues = await detectFaces(url);
+  }
+
+  const {
+    faces,
+    image
+  } = cachedValues;
+  let landmarkStartX = null;
+  let landmarkStartY = null;
+  let landmarkEndX = null;
+  let landmarkEndY = null;
+
+  if (_.isEmpty(faces)) {
+    landmarkStartX = image.width / 2;
+    landmarkStartY = image.height / 2;
+    landmarkEndX = image.width / 2;
+    landmarkEndY = image.height / 2;
+  } else {
+    faces.forEach(face => {
+      const {
+        bounds
+      } = face;
+
+      if (!landmarkStartX || bounds.origin.x < landmarkStartX) {
+        landmarkStartX = bounds.origin.x;
+      }
+
+      if (!landmarkStartY || bounds.origin.y < landmarkStartY) {
+        landmarkStartY = bounds.origin.y;
+      }
+
+      const faceEndX = bounds.origin.x + bounds.size.width;
+
+      if (!landmarkEndX || faceEndX > landmarkEndX) {
+        landmarkEndX = faceEndX;
+      }
+
+      const faceEndY = bounds.origin.y + bounds.size.height;
+
+      if (!landmarkEndY || faceEndX > landmarkEndY) {
+        landmarkEndY = faceEndY;
+      }
+    });
+  }
+
+  let targetWidth = image.width;
+  let targetHeight = image.height;
+
+  if (options && options.targetWidth && options.targetHeight) {
+    const {
+      scaleFactor
+    } = getScaledOffset(image.width, image.height, options.targetWidth, options.targetHeight);
+    landmarkStartX *= scaleFactor;
+    landmarkStartY *= scaleFactor;
+    landmarkEndX *= scaleFactor;
+    landmarkEndY *= scaleFactor;
+    targetWidth = options.targetWidth;
+    targetHeight = options.targetHeight;
+  }
+
+  if (landmarkStartX < 0) {
+    landmarkStartX = 0;
+  }
+
+  if (landmarkStartY < 0) {
+    landmarkStartY = 0;
+  }
+
+  if (landmarkEndX > targetWidth) {
+    landmarkEndX = targetWidth;
+  }
+
+  if (landmarkEndY > targetHeight) {
+    landmarkEndY = targetHeight;
+  }
+
+  return {
+    start: {
+      x: landmarkStartX,
+      y: landmarkStartY
+    },
+    end: {
+      x: landmarkEndX,
+      y: landmarkEndY
+    },
+    height: image.height,
+    width: image.width
+  };
+};
+
+export default findLandmarkRange;
+//# sourceMappingURL=findLandmarkRange.js.map

package/dist/module/js/images/findLandmarkRange.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["findLandmarkRange.js"],"names":["_","moment","stringActions","detectFaces","getScaledOffset","findLandmarkRange","url","options","cachedValues","response","getString","encodeURIComponent","data","e","console","log","faces","image","isEmpty","add","valueOf","timestamp","landmarkStartX","landmarkStartY","landmarkEndX","landmarkEndY","width","height","forEach","face","bounds","origin","x","y","faceEndX","size","faceEndY","targetWidth","targetHeight","scaleFactor","start","end"],"mappings":"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","sourcesContent":["import _ from 'lodash';\nimport moment from 'moment';\nimport { stringActions } from '../../apis';\nimport detectFaces from './detectFaces';\nimport getScaledOffset from './getScaledOffset';\n\nconst findLandmarkRange = async (url, options) => {\n  let cachedValues;\n  if (options && options.cachedValues) {\n    cachedValues = options.cachedValues;\n  }\n  try {\n    const response = await stringActions.getString('plussSpace', `imagefaces_${encodeURIComponent(url)}`);\n    cachedValues = response.data;\n  } catch (e) {\n    console.log('errored from cache');\n  }\n  if (\n    !cachedValues ||\n    !cachedValues.faces ||\n    !cachedValues.image ||\n    (_.isEmpty(cachedValues.faces) &&\n      moment()\n        .add(-1, 'w')\n        .valueOf() > moment(cachedValues.timestamp).valueOf())\n  ) {\n    cachedValues = await detectFaces(url);\n  }\n  const { faces, image } = cachedValues;\n\n  let landmarkStartX = null;\n  let landmarkStartY = null;\n  let landmarkEndX = null;\n  let landmarkEndY = null;\n\n  if (_.isEmpty(faces)) {\n    landmarkStartX = image.width / 2;\n    landmarkStartY = image.height / 2;\n    landmarkEndX = image.width / 2;\n    landmarkEndY = image.height / 2;\n  } else {\n    faces.forEach(face => {\n      const { bounds } = face;\n\n      if (!landmarkStartX || bounds.origin.x < landmarkStartX) {\n        landmarkStartX = bounds.origin.x;\n      }\n\n      if (!landmarkStartY || bounds.origin.y < landmarkStartY) {\n        landmarkStartY = bounds.origin.y;\n      }\n\n      const faceEndX = bounds.origin.x + bounds.size.width;\n      if (!landmarkEndX || faceEndX > landmarkEndX) {\n        landmarkEndX = faceEndX;\n      }\n\n      const faceEndY = bounds.origin.y + bounds.size.height;\n      if (!landmarkEndY || faceEndX > landmarkEndY) {\n        landmarkEndY = faceEndY;\n      }\n    });\n  }\n\n  let targetWidth = image.width;\n  let targetHeight = image.height;\n\n  if (options && options.targetWidth && options.targetHeight) {\n    const { scaleFactor } = getScaledOffset(image.width, image.height, options.targetWidth, options.targetHeight);\n    landmarkStartX *= scaleFactor;\n    landmarkStartY *= scaleFactor;\n    landmarkEndX *= scaleFactor;\n    landmarkEndY *= scaleFactor;\n    targetWidth = options.targetWidth;\n    targetHeight = options.targetHeight;\n  }\n\n  if (landmarkStartX < 0) {\n    landmarkStartX = 0;\n  }\n  if (landmarkStartY < 0) {\n    landmarkStartY = 0;\n  }\n  if (landmarkEndX > targetWidth) {\n    landmarkEndX = targetWidth;\n  }\n  if (landmarkEndY > targetHeight) {\n    landmarkEndY = targetHeight;\n  }\n\n  return {\n    start: {\n      x: landmarkStartX,\n      y: landmarkStartY,\n    },\n    end: {\n      x: landmarkEndX,\n      y: landmarkEndY,\n    },\n    height: image.height,\n    width: image.width,\n  };\n};\n\nexport default findLandmarkRange;\n"]}

package/dist/module/js/images/getScaledOffset.js

@@ -0,0 +1,81 @@
+const getScaledOffset = (sourceWidth, sourceHeight, targetWidth, targetHeight) => {
+  const sourceRatio = sourceWidth / sourceHeight;
+  const targetRatio = targetWidth / targetHeight; // same ratio. no adjustment needed.
+
+  if (sourceRatio === targetRatio) {
+    return {
+      width: targetWidth,
+      height: targetHeight,
+      scaleFactor: targetWidth / sourceWidth,
+      offset: {
+        x: 0,
+        y: 0
+      },
+      bounds: {
+        start: {
+          x: 0,
+          y: 0
+        },
+        end: {
+          x: targetWidth,
+          y: targetHeight
+        }
+      }
+    };
+  } // source is higher than target. height scaling and y offset required.
+
+
+  if (sourceRatio < targetRatio) {
+    const scaleFactor = targetWidth / sourceWidth;
+    const adjustedHeight = sourceHeight * scaleFactor;
+    const yOffset = (adjustedHeight - targetHeight) / 2;
+    return {
+      width: targetWidth,
+      height: adjustedHeight,
+      scaleFactor,
+      offset: {
+        x: 0,
+        y: -yOffset
+      },
+      bounds: {
+        start: {
+          x: 0,
+          y: yOffset
+        },
+        end: {
+          x: targetWidth,
+          y: yOffset + adjustedHeight
+        }
+      }
+    };
+  } // source is wider than target. width scaling and x offset required.
+
+
+  if (sourceRatio > targetRatio) {
+    const scaleFactor = targetHeight / sourceHeight;
+    const adjustedWidth = sourceWidth * scaleFactor;
+    const xOffset = (adjustedWidth - targetWidth) / 2;
+    return {
+      width: adjustedWidth,
+      height: targetHeight,
+      scaleFactor,
+      offset: {
+        x: -xOffset,
+        y: 0
+      },
+      bounds: {
+        start: {
+          x: xOffset,
+          y: 0
+        },
+        end: {
+          x: xOffset + adjustedWidth,
+          y: targetHeight
+        }
+      }
+    };
+  }
+};
+
+export default getScaledOffset;
+//# sourceMappingURL=getScaledOffset.js.map

package/dist/module/js/images/getScaledOffset.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getScaledOffset.js"],"names":["getScaledOffset","sourceWidth","sourceHeight","targetWidth","targetHeight","sourceRatio","targetRatio","width","height","scaleFactor","offset","x","y","bounds","start","end","adjustedHeight","yOffset","adjustedWidth","xOffset"],"mappings":"AAAA,MAAMA,eAAe,GAAG,CAACC,WAAD,EAAcC,YAAd,EAA4BC,WAA5B,EAAyCC,YAAzC,KAA0D;AAChF,QAAMC,WAAW,GAAGJ,WAAW,GAAGC,YAAlC;AACA,QAAMI,WAAW,GAAGH,WAAW,GAAGC,YAAlC,CAFgF,CAIhF;;AACA,MAAIC,WAAW,KAAKC,WAApB,EAAiC;AAC/B,WAAO;AACLC,MAAAA,KAAK,EAAEJ,WADF;AAELK,MAAAA,MAAM,EAAEJ,YAFH;AAGLK,MAAAA,WAAW,EAAEN,WAAW,GAAGF,WAHtB;AAILS,MAAAA,MAAM,EAAE;AACNC,QAAAA,CAAC,EAAE,CADG;AAENC,QAAAA,CAAC,EAAE;AAFG,OAJH;AAQLC,MAAAA,MAAM,EAAE;AACNC,QAAAA,KAAK,EAAE;AACLH,UAAAA,CAAC,EAAE,CADE;AAELC,UAAAA,CAAC,EAAE;AAFE,SADD;AAKNG,QAAAA,GAAG,EAAE;AACHJ,UAAAA,CAAC,EAAER,WADA;AAEHS,UAAAA,CAAC,EAAER;AAFA;AALC;AARH,KAAP;AAmBD,GAzB+E,CA2BhF;;;AACA,MAAIC,WAAW,GAAGC,WAAlB,EAA+B;AAC7B,UAAMG,WAAW,GAAGN,WAAW,GAAGF,WAAlC;AACA,UAAMe,cAAc,GAAGd,YAAY,GAAGO,WAAtC;AACA,UAAMQ,OAAO,GAAG,CAACD,cAAc,GAAGZ,YAAlB,IAAkC,CAAlD;AAEA,WAAO;AACLG,MAAAA,KAAK,EAAEJ,WADF;AAELK,MAAAA,MAAM,EAAEQ,cAFH;AAGLP,MAAAA,WAHK;AAILC,MAAAA,MAAM,EAAE;AACNC,QAAAA,CAAC,EAAE,CADG;AAENC,QAAAA,CAAC,EAAE,CAACK;AAFE,OAJH;AAQLJ,MAAAA,MAAM,EAAE;AACNC,QAAAA,KAAK,EAAE;AACLH,UAAAA,CAAC,EAAE,CADE;AAELC,UAAAA,CAAC,EAAEK;AAFE,SADD;AAKNF,QAAAA,GAAG,EAAE;AACHJ,UAAAA,CAAC,EAAER,WADA;AAEHS,UAAAA,CAAC,EAAEK,OAAO,GAAGD;AAFV;AALC;AARH,KAAP;AAmBD,GApD+E,CAsDhF;;;AACA,MAAIX,WAAW,GAAGC,WAAlB,EAA+B;AAC7B,UAAMG,WAAW,GAAGL,YAAY,GAAGF,YAAnC;AACA,UAAMgB,aAAa,GAAGjB,WAAW,GAAGQ,WAApC;AACA,UAAMU,OAAO,GAAG,CAACD,aAAa,GAAGf,WAAjB,IAAgC,CAAhD;AAEA,WAAO;AACLI,MAAAA,KAAK,EAAEW,aADF;AAELV,MAAAA,MAAM,EAAEJ,YAFH;AAGLK,MAAAA,WAHK;AAILC,MAAAA,MAAM,EAAE;AACNC,QAAAA,CAAC,EAAE,CAACQ,OADE;AAENP,QAAAA,CAAC,EAAE;AAFG,OAJH;AAQLC,MAAAA,MAAM,EAAE;AACNC,QAAAA,KAAK,EAAE;AACLH,UAAAA,CAAC,EAAEQ,OADE;AAELP,UAAAA,CAAC,EAAE;AAFE,SADD;AAKNG,QAAAA,GAAG,EAAE;AACHJ,UAAAA,CAAC,EAAEQ,OAAO,GAAGD,aADV;AAEHN,UAAAA,CAAC,EAAER;AAFA;AALC;AARH,KAAP;AAmBD;AACF,CAhFD;;AAkFA,eAAeJ,eAAf","sourcesContent":["const getScaledOffset = (sourceWidth, sourceHeight, targetWidth, targetHeight) => {\n  const sourceRatio = sourceWidth / sourceHeight;\n  const targetRatio = targetWidth / targetHeight;\n\n  // same ratio. no adjustment needed.\n  if (sourceRatio === targetRatio) {\n    return {\n      width: targetWidth,\n      height: targetHeight,\n      scaleFactor: targetWidth / sourceWidth,\n      offset: {\n        x: 0,\n        y: 0,\n      },\n      bounds: {\n        start: {\n          x: 0,\n          y: 0,\n        },\n        end: {\n          x: targetWidth,\n          y: targetHeight,\n        },\n      },\n    };\n  }\n\n  // source is higher than target. height scaling and y offset required.\n  if (sourceRatio < targetRatio) {\n    const scaleFactor = targetWidth / sourceWidth;\n    const adjustedHeight = sourceHeight * scaleFactor;\n    const yOffset = (adjustedHeight - targetHeight) / 2;\n\n    return {\n      width: targetWidth,\n      height: adjustedHeight,\n      scaleFactor,\n      offset: {\n        x: 0,\n        y: -yOffset,\n      },\n      bounds: {\n        start: {\n          x: 0,\n          y: yOffset,\n        },\n        end: {\n          x: targetWidth,\n          y: yOffset + adjustedHeight,\n        },\n      },\n    };\n  }\n\n  // source is wider than target. width scaling and x offset required.\n  if (sourceRatio > targetRatio) {\n    const scaleFactor = targetHeight / sourceHeight;\n    const adjustedWidth = sourceWidth * scaleFactor;\n    const xOffset = (adjustedWidth - targetWidth) / 2;\n\n    return {\n      width: adjustedWidth,\n      height: targetHeight,\n      scaleFactor,\n      offset: {\n        x: -xOffset,\n        y: 0,\n      },\n      bounds: {\n        start: {\n          x: xOffset,\n          y: 0,\n        },\n        end: {\n          x: xOffset + adjustedWidth,\n          y: targetHeight,\n        },\n      },\n    };\n  }\n};\n\nexport default getScaledOffset;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-app",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/module/index.js",
   "module": "dist/module/index.js",
@@ -21,35 +21,36 @@
   "author": "Phillip Suh",
   "license": "ISC",
   "dependencies": {
-    "@expo/vector-icons": "^12.0.0",
-    "@react-native-async-storage/async-storage": "~1.15.0",
-    "@react-native-community/netinfo": "7.1.3",
-    "@react-native-picker/picker": "2.2.1",
+    "@expo/vector-icons": "^13.0.0",
+    "@react-native-async-storage/async-storage": "~1.17.3",
+    "@react-native-community/netinfo": "8.2.0",
+    "@react-native-picker/picker": "2.4.0",
     "aws-amplify": "^4.3.11",
     "aws-amplify-react-native": "^6.0.2",
-    "expo-av": "~10.2.0",
-    "expo-calendar": "~10.1.0",
-    "expo-constants": "~13.0.0",
-    "expo-file-system": "~13.1.4",
-    "expo-image-manipulator": "~10.2.0",
-    "expo-image-picker": "~12.0.1",
-    "expo-linear-gradient": "~11.0.3",
+    "expo-av": "~11.2.3",
+    "expo-calendar": "~10.2.0",
+    "expo-constants": "~13.1.1",
+    "expo-face-detector": "~11.2.0",
+    "expo-file-system": "~14.0.0",
+    "expo-image-manipulator": "~10.3.1",
+    "expo-image-picker": "~13.1.1",
+    "expo-linear-gradient": "~11.3.0",
     "expo-media-library": "~14.0.0",
-    "expo-screen-orientation": "~4.1.1",
-    "expo-sharing": "~10.1.0",
+    "expo-screen-orientation": "~4.2.0",
+    "expo-sharing": "~10.2.0",
     "expo-video-player": "^1.6.0",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.4",
     "mime-types": "^2.1.24",
     "moment": "^2.18.1",
-    "react": "17.0.1",
-    "react-native": "0.64.3",
+    "react": "17.0.2",
+    "react-native": "0.68.2",
     "react-native-auto-height-image": "3.1.3",
     "react-native-elements": "^0.17.0",
     "react-native-image-zoom-viewer": "^3.0.1",
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-vimeo-iframe": "^1.0.4",
-    "react-native-webview": "11.15.0",
+    "react-native-webview": "11.18.1",
     "react-native-youtube-iframe": "^2.2.1",
     "react-redux": "^7.2.6"
   },

package/src/actions/MediaActions.js

@@ -1,4 +1,4 @@
-import { IMAGE_LIBRARY_LOADED, STOCK_IMAGES_LOADED, IMAGE_FOLDER_UPDATED } from './types';
+import { IMAGE_LIBRARY_LOADED, STOCK_IMAGES_LOADED, IMAGE_FOLDER_UPDATED, SAVE_IMAGE_POSITION } from './types';
 
 export const stockImagesLoaded = images => {
   return {
@@ -20,3 +20,10 @@ export const imageFolderUpdated = folder => {
     payload: folder,
   };
 };
+
+export const saveImagePosition = (uri, positions) => {
+  return {
+    type: SAVE_IMAGE_POSITION,
+    payload: { uri, positions },
+  };
+};

package/src/actions/types.js

@@ -3,6 +3,7 @@ export const CHANGE_ROLE = 'CHANGE_ROLE';
 export const IMAGE_LIBRARY_LOADED = 'IMAGE_LIBRARY_LOADED';
 export const STOCK_IMAGES_LOADED = 'STOCK_IMAGES_LOADED';
 export const IMAGE_FOLDER_UPDATED = 'IMAGE_FOLDER_UPDATED';
+export const SAVE_IMAGE_POSITION = 'SAVE_IMAGE_POSITION';
 export const LOAD_FOLLOWERS = 'LOAD_FOLLOWERS';
 export const ADD_FOLLOWER = 'ADD_FOLLOWER';
 export const REMOVE_FOLLOWER = 'REMOVE_FOLLOWER';

package/src/apis/index.js

@@ -5,6 +5,7 @@ export * from './contactActions';
 export * from './eventActions';
 export * from './analyticsActions';
 export * from './notificationActions';
+export * from './stringActions';
 export * from './typeActions';
 export { default as userActions } from './userActions';
 export { default as profileActions } from './profileActions';

package/src/apis/stringActions.js

@@ -0,0 +1,28 @@
+import axios from 'axios';
+import { authedFunction } from '../session';
+import { getUrl } from '../helper';
+
+export const stringActions = {
+  getString: (site, id, useDefault) => {
+    const url = getUrl('strings', `get/${site}_${id}`, useDefault ? { useDefault } : undefined);
+    return axios({
+      method: 'GET',
+      url,
+    }).catch(error => {
+      console.log('getString error', error);
+      throw error;
+    });
+  },
+  setString: (site, key, value) => {
+    const url = getUrl('strings', 'set');
+    return authedFunction({
+      method: 'POST',
+      url,
+      data: {
+        site,
+        key,
+        value,
+      },
+    });
+  },
+};

package/src/components/AutoOffsetImage.js

@@ -0,0 +1,177 @@
+import React, { Component } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+import { connect } from 'react-redux';
+import moment from 'moment';
+import { findLandmarkRange, getScaledOffset, get300, detectFaces } from '../helper';
+import { saveImagePosition } from '../actions';
+
+class AutoOffsetImage extends Component {
+  constructor(props) {
+    super(props);
+
+    this.paddingFactor = this.props.paddingFactor || 0.1;
+
+    this.state = {
+      imageStyle: {
+        width: this.props.width,
+        height: this.props.height,
+      },
+      blurRadius: new Animated.Value(100),
+      imageSource: get300(this.props.uri),
+    };
+  }
+
+  componentDidMount() {
+    this.positionImage();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.uri !== this.props.uri || prevProps.height !== this.props.height || prevProps.width !== this.props.width) {
+      this.positionImage();
+    }
+  }
+
+  onLoad = event => {
+    if (event.nativeEvent.source.uri === this.props.uri && !this.state.imageLoaded) {
+      //unblur
+      this.setState({
+        imageLoaded: true,
+      });
+      Animated.sequence([
+        Animated.delay(200),
+        Animated.timing(this.state.blurRadius, {
+          toValue: 0,
+          duration: 500,
+          useNativeDriver: false,
+        }),
+      ]).start();
+    }
+  };
+
+  positionImage = async () => {
+    try {
+      const startTime = moment().valueOf();
+
+      let cachedValues;
+      // check local cache
+      if (this.props.imagePositions && this.props.imagePositions[this.props.uri]) {
+        cachedValues = this.props.imagePositions[this.props.uri];
+      }
+      // check remote cache
+      if (!cachedValues) {
+        try {
+          const response = await stringActions.getString('plussSpace', `imagefaces_${encodeURIComponent(this.props.uri)}`);
+          cachedValues = response.data;
+        } catch (e) {
+          console.log('errored from cache');
+        }
+        // run face detection locally
+        if (
+          !cachedValues ||
+          !cachedValues.faces ||
+          !cachedValues.image ||
+          (_.isEmpty(cachedValues.faces) &&
+            moment()
+              .add(-1, 'w')
+              .valueOf() > moment(cachedValues.timestamp).valueOf())
+        ) {
+          cachedValues = await detectFaces(this.props.uri);
+        }
+        this.props.saveImagePosition(this.props.uri, cachedValues);
+      }
+
+      const image = await findLandmarkRange(this.props.uri, {
+        targetWidth: this.props.width,
+        targetHeight: this.props.height,
+        cachedValues,
+      });
+      const scaledOffset = getScaledOffset(image.width, image.height, this.props.width, this.props.height);
+
+      const { start: landmarkStart, end: landmarkEnd } = image;
+      const { bounds: imageBounds, offset, width, height } = scaledOffset;
+
+      if (landmarkStart.y < imageBounds.start.y) {
+        // move up
+        offset.y = -Math.max(landmarkStart.y - this.props.height * this.paddingFactor, 0); // move top to 5% above start of landmark
+      } else if (landmarkEnd.y > imageBounds.end.y) {
+        // move down
+        offset.y = -Math.max(landmarkEnd.y + this.props.height * this.paddingFactor - this.props.height, 0); // move bottom to 5% below end of landmark
+      }
+
+      if (landmarkStart.x < imageBounds.start.x) {
+        // move right
+        offset.x = -Math.max(landmarkStart.x - this.props.width * this.paddingFactor, 0); // move left edge to 5% left of start of landmark
+      } else if (landmarkEnd.x > imageBounds.end.x) {
+        // move left
+        offset.x = -Math.max(landmarkEnd.x + this.props.width * this.paddingFactor - this.props.width, 0); // move right edge to 5% left of end of landmark
+      }
+
+      this.setState({
+        imageStyle: {
+          width,
+          height,
+          top: offset.y,
+          left: offset.x,
+        },
+        imageSource: this.props.uri,
+      });
+
+      const endTime = moment().valueOf();
+      if (endTime - startTime < 500) {
+        Animated.timing(this.state.blurRadius, {
+          toValue: 0,
+          duration: 0,
+          useNativeDriver: false,
+        }).start();
+      }
+    } catch (e) {
+      this.setState({
+        imageSource: this.props.uri,
+      });
+    }
+  };
+
+  render() {
+    return (
+      <View
+        style={[
+          styles.container,
+          {
+            width: this.props.width,
+            height: this.props.height,
+          },
+          this.props.style,
+        ]}
+      >
+        <Animated.Image
+          blurRadius={this.state.blurRadius}
+          source={{ uri: this.state.imageSource }}
+          style={[styles.image, this.state.imageStyle]}
+          onLoad={this.onLoad}
+        />
+        {this.props.children}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  image: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    resizeMode: 'cover',
+  },
+});
+
+const mapStateToProps = state => {
+  return {
+    imagePositions: state.media.positions,
+  };
+};
+
+const autoOffsetImage = connect(mapStateToProps, { saveImagePosition })(AutoOffsetImage);
+export { autoOffsetImage as AutoOffsetImage };

package/src/components/index.js

@@ -48,6 +48,7 @@ export { default as ImageUploadProgress } from './ImageUploadProgress';
 export { default as UserListing } from './UserListing';
 export { default as PlussChat } from './PlussChat';
 export { default as PositionedImage } from './PositionedImage';
+export * from './AutoOffsetImage';
 export { default as FormattedText } from './FormattedText';
 export { default as MediaPlayer } from './MediaPlayer';
 export { default as AudienceSelectorPage } from './AudienceSelectorPage';

package/src/helper.js

@@ -5,6 +5,11 @@ import Config from './config';
 import { LINEGREY } from './colours';
 import { getSessionTokenAWS } from './session';
 
+// seperated files to export
+import detectFaces from './js/images/detectFaces';
+import findLandmarkRange from './js/images/findLandmarkRange';
+import getScaledOffset from './js/images/getScaledOffset';
+
 const TIMESTAMP_FORMAT = 'D MMM • h:mma';
 const DATE_FORMAT = 'D MMM YYYY';
 
@@ -155,6 +160,21 @@ const get1400 = url => {
   return url;
 };
 
+const get300 = url => {
+  if (!url) {
+    return url;
+  }
+  if (isStockImage(url) || url.indexOf(Config.env.baseUploadsUrl) !== -1) {
+    const extension = getExtension(url);
+    let urlToUse = url;
+    if (extension !== 'jpg') {
+      urlToUse = `${url.substring(0, url.length - extension.length)}jpg`;
+    }
+    return urlToUse.replace('/uploads/', '/300/').replace('/1400/', '/300/');
+  }
+  return url;
+};
+
 const getMimeType = url => {
   const extension = getExtension(url);
   switch (extension) {
@@ -400,6 +420,7 @@ export {
   getExtension,
   getFileName,
   isVideo,
+  get300,
   getThumb300,
   get1400,
   getMimeType,
@@ -424,4 +445,7 @@ export {
   getUserPreview,
   allowComments,
   isVideoUrl,
+  detectFaces,
+  findLandmarkRange,
+  getScaledOffset,
 };

package/src/js/images/detectFaces.js

@@ -0,0 +1,30 @@
+import { stringActions } from '../../apis';
+import moment from 'moment';
+import * as FileSystem from 'expo-file-system';
+import * as FaceDetector from 'expo-face-detector';
+
+const detectFaces = async remoteUrl => {
+  const parts = remoteUrl.split('/').splice(-2);
+  const mediaId = parts[0];
+  const extension = parts[1].split('.').splice(-1)[0];
+
+  const downloadPath = `${FileSystem.cacheDirectory}${mediaId}.${extension}`;
+
+  const { uri: localUrl } = await FileSystem.downloadAsync(remoteUrl, downloadPath);
+
+  const faces = await FaceDetector.detectFacesAsync(localUrl, {
+    mode: FaceDetector.FaceDetectorMode.accurate,
+  });
+
+  if (faces && faces.image && faces.image.uri) {
+    delete faces.image.uri;
+  }
+
+  faces.timestamp = moment().valueOf();
+
+  stringActions.setString('plussSpace', `imagefaces_${encodeURIComponent(remoteUrl)}`, faces);
+
+  return faces;
+};
+
+export default detectFaces;