@plusscommunities/pluss-core-app 6.1.7 → 6.1.8-auth.0

package/src/components/AutoOffsetImage.js

@@ -1,206 +1,247 @@
-import React, { Component } from 'react';
-import { View, Image, 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';
+import React, { Component } from "react";
+import { View, Image, 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),
-      disabled: true,
-    };
-  }
-
-  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.setState({
-        imageSource: this.props.uri,
-      });
-    }
-    // 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();
-
-      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() {
-    if (this.state.disabled) {
-      return (
-        <View
-          style={[
-            styles.container,
-            {
-              width: this.props.width,
-              height: this.props.height,
-            },
-            this.props.style,
-          ]}
-        >
-          <Image source={{ uri: this.state.imageSource }} style={[styles.image, this.state.imageStyle]} onLoad={this.onLoad} />
-          {this.props.children}
-        </View>
-      );
-    }
-    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>
-    );
-  }
+	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),
+			disabled: true,
+		};
+	}
+
+	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.setState({
+				imageSource: this.props.uri,
+			});
+		}
+		// 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();
+
+			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() {
+		if (this.state.disabled) {
+			return (
+				<View
+					style={[
+						styles.container,
+						{
+							width: this.props.width,
+							height: this.props.height,
+						},
+						this.props.style,
+					]}
+				>
+					<Image
+						source={{ uri: this.state.imageSource }}
+						style={[styles.image, this.state.imageStyle]}
+						onLoad={this.onLoad}
+					/>
+					{this.props.children}
+				</View>
+			);
+		}
+		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',
-  },
-  staticImage: {
-    resizeMode: 'cover',
-  },
+	container: {
+		overflow: "hidden",
+	},
+	image: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		resizeMode: "cover",
+	},
+	staticImage: {
+		resizeMode: "cover",
+	},
 });
 
-const mapStateToProps = state => {
-  return {
-    imagePositions: state.media.positions,
-  };
+const mapStateToProps = (state) => {
+	return {
+		imagePositions: state.media.positions,
+	};
 };
 
-const autoOffsetImage = connect(mapStateToProps, { saveImagePosition })(AutoOffsetImage);
+const autoOffsetImage = connect(mapStateToProps, { saveImagePosition })(
+	AutoOffsetImage,
+);
 export { autoOffsetImage as AutoOffsetImage };

package/src/components/BackButton.js

@@ -1,9 +1,9 @@
-import React, { PureComponent } from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import { connect } from 'react-redux';
-import stylez from '../styles';
-import { Pl60Icon } from '../fonts';
-import { getMainBrandingColourFromState } from '../colours';
+import React, { PureComponent } from "react";
+import { View, TouchableOpacity } from "react-native";
+import { connect } from "react-redux";
+import stylez from "../styles";
+import { FontAwesome } from "./Icon";
+import { getMainBrandingColourFromState } from "../colours";
 
 /* 
 Props- 
@@ -14,43 +14,59 @@ Props-
 */
 
 class BackButton extends PureComponent {
-  render() {
-    const size = this.props.diameter || 32;
-    const radius = size / 2;
-    if (this.props.noClick) {
-      return (
-        <View
-          style={[
-            stylez.backButton,
-            { backgroundColor: this.props.colourBrandingMain, height: size, width: size, borderRadius: radius },
-            this.props.color && { backgroundColor: this.props.color },
-            this.props.style,
-          ]}
-        >
-          <Pl60Icon name={this.props.flipped ? 'chevron_right' : 'chevron_left'} style={[stylez.backButtonIcon, this.props.iconStyle]} />
-        </View>
-      );
-    }
-    return (
-      <TouchableOpacity
-        style={[
-          stylez.backButton,
-          { backgroundColor: this.props.colourBrandingMain, height: size, width: size, borderRadius: radius },
-          this.props.color && { backgroundColor: this.props.color },
-          this.props.style,
-        ]}
-        onPress={this.props.onPress}
-      >
-        <Pl60Icon name={this.props.flipped ? 'chevron_right' : 'chevron_left'} style={[stylez.backButtonIcon, this.props.iconStyle]} />
-      </TouchableOpacity>
-    );
-  }
+	render() {
+		const size = this.props.diameter || 32;
+		const radius = size / 2;
+		if (this.props.noClick) {
+			return (
+				<View
+					style={[
+						stylez.backButton,
+						{
+							backgroundColor: this.props.colourBrandingMain,
+							height: size,
+							width: size,
+							borderRadius: radius,
+						},
+						this.props.color && { backgroundColor: this.props.color },
+						this.props.style,
+					]}
+				>
+					<FontAwesome
+						name={this.props.flipped ? "chevron-right" : "chevron-left"}
+						style={[stylez.backButtonIcon, this.props.iconStyle]}
+					/>
+				</View>
+			);
+		}
+		return (
+			<TouchableOpacity
+				style={[
+					stylez.backButton,
+					{
+						backgroundColor: this.props.colourBrandingMain,
+						height: size,
+						width: size,
+						borderRadius: radius,
+					},
+					this.props.color && { backgroundColor: this.props.color },
+					this.props.style,
+				]}
+				onPress={this.props.onPress}
+			>
+				<FontAwesome
+					name={this.props.flipped ? "chevron-right" : "chevron-left"}
+					style={[stylez.backButtonIcon, this.props.iconStyle]}
+				/>
+			</TouchableOpacity>
+		);
+	}
 }
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 const backButton = connect(mapStateToProps, {})(BackButton);