@plusscommunities/pluss-core-app 1.8.1 → 1.8.2

package/dist/module/components/AutoOffsetImage.js

@@ -1,7 +1,7 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import React, { Component } from 'react';
-import { View, Animated, StyleSheet } from 'react-native';
+import { View, Image, Animated, StyleSheet } from 'react-native';
 import { connect } from 'react-redux';
 import moment from 'moment';
 import { findLandmarkRange, getScaledOffset, get300, detectFaces } from '../helper';
@@ -12,20 +12,32 @@ class AutoOffsetImage extends Component {
     super(props);
 
     _defineProperty(this, "onLoad", event => {
-      if (event.nativeEvent.source.uri === this.props.uri && !this.state.imageLoaded) {
-        //unblur
+      if (event.nativeEvent.source.uri !== this.props.uri) {
         this.setState({
-          imageLoaded: true
+          imageSource: this.props.uri
         });
-        Animated.sequence([Animated.delay(200), Animated.timing(this.state.blurRadius, {
-          toValue: 0,
-          duration: 500,
-          useNativeDriver: false
-        })]).start();
-      }
+      } // 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();
+      // }
+
     });
 
     _defineProperty(this, "positionImage", async () => {
+      if (this.state.disabled) {
+        return;
+      }
+
       try {
         const startTime = moment().valueOf();
         let cachedValues; // check local cache
@@ -116,7 +128,8 @@ class AutoOffsetImage extends Component {
         height: this.props.height
       },
       blurRadius: new Animated.Value(100),
-      imageSource: get300(this.props.uri)
+      imageSource: get300(this.props.uri),
+      disabled: true
     };
   }
 
@@ -131,6 +144,19 @@ class AutoOffsetImage extends Component {
   }
 
   render() {
+    if (this.state.disabled) {
+      return /*#__PURE__*/React.createElement(Image, {
+        source: {
+          uri: this.state.imageSource
+        },
+        style: [styles.container, styles.staticImage, {
+          width: this.props.width,
+          height: this.props.height
+        }, this.props.style],
+        onLoad: this.onLoad
+      });
+    }
+
     return /*#__PURE__*/React.createElement(View, {
       style: [styles.container, {
         width: this.props.width,
@@ -157,6 +183,9 @@ const styles = StyleSheet.create({
     top: 0,
     left: 0,
     resizeMode: 'cover'
+  },
+  staticImage: {
+    resizeMode: 'cover'
   }
 });
 

package/dist/module/components/AutoOffsetImage.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-app",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/module/index.js",
   "module": "dist/module/index.js",

package/src/components/AutoOffsetImage.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, Animated, StyleSheet } from 'react-native';
+import { View, Image, Animated, StyleSheet } from 'react-native';
 import { connect } from 'react-redux';
 import moment from 'moment';
 import { findLandmarkRange, getScaledOffset, get300, detectFaces } from '../helper';
@@ -18,6 +18,7 @@ class AutoOffsetImage extends Component {
       },
       blurRadius: new Animated.Value(100),
       imageSource: get300(this.props.uri),
+      disabled: true,
     };
   }
 
@@ -32,23 +33,31 @@ class AutoOffsetImage extends Component {
   }
 
   onLoad = event => {
-    if (event.nativeEvent.source.uri === this.props.uri && !this.state.imageLoaded) {
-      //unblur
+    if (event.nativeEvent.source.uri !== this.props.uri) {
       this.setState({
-        imageLoaded: true,
+        imageSource: this.props.uri,
       });
-      Animated.sequence([
-        Animated.delay(200),
-        Animated.timing(this.state.blurRadius, {
-          toValue: 0,
-          duration: 500,
-          useNativeDriver: false,
-        }),
-      ]).start();
     }
+    // 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 () => {
+    if (this.state.disabled) {
+      return;
+    }
     try {
       const startTime = moment().valueOf();
 
@@ -132,6 +141,23 @@ class AutoOffsetImage extends Component {
   };
 
   render() {
+    if (this.state.disabled) {
+      return (
+        <Image
+          source={{ uri: this.state.imageSource }}
+          style={[
+            styles.container,
+            styles.staticImage,
+            {
+              width: this.props.width,
+              height: this.props.height,
+            },
+            this.props.style,
+          ]}
+          onLoad={this.onLoad}
+        />
+      );
+    }
     return (
       <View
         style={[
@@ -165,6 +191,9 @@ const styles = StyleSheet.create({
     left: 0,
     resizeMode: 'cover',
   },
+  staticImage: {
+    resizeMode: 'cover',
+  },
 });
 
 const mapStateToProps = state => {