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

package/src/components/VideoPopup.js

@@ -1,114 +1,128 @@
-import React, { Component } from 'react';
-import { Platform, View, Modal, TouchableOpacity, StyleSheet } from 'react-native';
-import * as ScreenOrientation from 'expo-screen-orientation';
-import { StatusBarHeight, getCompressed, imageExists } from '../helper';
-import { Pl60Icon } from '../fonts';
-import { SharingTools } from './SharingTools';
-import MediaPlayer from './MediaPlayer';
+import React, { Component } from "react";
+import {
+	Platform,
+	View,
+	Modal,
+	TouchableOpacity,
+	StyleSheet,
+} from "react-native";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { StatusBarHeight, getCompressed, imageExists } from "../helper";
+import { FontAwesome } from "./Icon";
+import { SharingTools } from "./SharingTools";
+import MediaPlayer from "./MediaPlayer";
 
 class VideoPopup extends Component {
-  constructor(props) {
-    super(props);
+	constructor(props) {
+		super(props);
 
-    this.state = {
-      uri: '',
-      isFullScreen: false,
-    };
-  }
+		this.state = {
+			uri: "",
+			isFullScreen: false,
+		};
+	}
 
-  UNSAFE_componentWillMount = async () => {
-    this.checkCompressed(this.props.uri);
-    await ScreenOrientation.lockAsync(
-      Platform.OS === 'ios' ? ScreenOrientation.OrientationLock.DEFAULT : ScreenOrientation.OrientationLock.ALL,
-    );
-  };
+	UNSAFE_componentWillMount = async () => {
+		this.checkCompressed(this.props.uri);
+		await ScreenOrientation.lockAsync(
+			Platform.OS === "ios"
+				? ScreenOrientation.OrientationLock.DEFAULT
+				: ScreenOrientation.OrientationLock.ALL,
+		);
+	};
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.uri === nextProps.uri) return;
-    this.checkCompressed(nextProps.uri);
-  }
+	UNSAFE_componentWillReceiveProps(nextProps) {
+		if (this.props.uri === nextProps.uri) return;
+		this.checkCompressed(nextProps.uri);
+	}
 
-  componentWillUnmount = async () => {
-    await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
-  };
+	componentWillUnmount = async () => {
+		await ScreenOrientation.lockAsync(
+			ScreenOrientation.OrientationLock.PORTRAIT_UP,
+		);
+	};
 
-  checkCompressed = url => {
-    const compressedUri = getCompressed(url);
-    imageExists(compressedUri).then(compressedExists => {
-      this.setState({ uri: compressedExists ? compressedUri : url });
-    });
-  };
+	checkCompressed = (url) => {
+		const compressedUri = getCompressed(url);
+		imageExists(compressedUri).then((compressedExists) => {
+			this.setState({ uri: compressedExists ? compressedUri : url });
+		});
+	};
 
-  renderClose() {
-    return (
-      <TouchableOpacity style={styles.menuIconContainer} onPress={this.props.onClose} activeOpacity={0.6}>
-        <Pl60Icon name="close" style={styles.menuIcon} />
-      </TouchableOpacity>
-    );
-  }
+	renderClose() {
+		return (
+			<TouchableOpacity
+				style={styles.menuIconContainer}
+				onPress={this.props.onClose}
+				activeOpacity={0.6}
+			>
+				<FontAwesome name="x" style={styles.menuIcon} />
+			</TouchableOpacity>
+		);
+	}
 
-  renderPlayer() {
-    const { uri } = this.state;
-    if (!uri) return null;
+	renderPlayer() {
+		const { uri } = this.state;
+		if (!uri) return null;
 
-    return (
-      <View style={styles.playerContainer}>
-        <MediaPlayer
-          source={uri}
-          useVideoPlayer={true}
-          autoPlay={true}
-          orientationChanged={isFullScreen => this.setState({ isFullScreen })}
-        />
-      </View>
-    );
-  }
+		return (
+			<View style={styles.playerContainer}>
+				<MediaPlayer
+					source={uri}
+					useVideoPlayer={true}
+					autoPlay={true}
+					orientationChanged={(isFullScreen) => this.setState({ isFullScreen })}
+				/>
+			</View>
+		);
+	}
 
-  render() {
-    const { isFullScreen } = this.state;
-    const { visible, onClose, animationType, style } = this.props;
+	render() {
+		const { isFullScreen } = this.state;
+		const { visible, onClose, animationType, style } = this.props;
 
-    return (
-      <Modal
-        visible={visible}
-        animationType={animationType || 'fade'}
-        onRequestClose={onClose}
-        style={[styles.container, style]}
-        supportedOrientations={['portrait', 'landscape']}
-      >
-        {this.renderPlayer()}
-        {!isFullScreen && this.renderClose()}
-        {!isFullScreen && <SharingTools uri={this.props.uri} />}
-      </Modal>
-    );
-  }
+		return (
+			<Modal
+				visible={visible}
+				animationType={animationType || "fade"}
+				onRequestClose={onClose}
+				style={[styles.container, style]}
+				supportedOrientations={["portrait", "landscape"]}
+			>
+				{this.renderPlayer()}
+				{!isFullScreen && this.renderClose()}
+				{!isFullScreen && <SharingTools uri={this.props.uri} />}
+			</Modal>
+		);
+	}
 }
 
 const styles = StyleSheet.create({
-  container: {
-    backgroundColor: '#000',
-  },
-  menuIconContainer: {
-    position: 'absolute',
-    top: StatusBarHeight(0),
-    right: 0,
-    width: 55,
-    height: 55,
-    zIndex: 3,
-  },
-  menuIcon: {
-    fontSize: 25,
-    padding: 15,
-    width: 55,
-    textAlign: 'center',
-    color: '#fff',
-    zIndex: 3,
-  },
-  playerContainer: {
-    flex: 1,
-    backgroundColor: '#000',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
+	container: {
+		backgroundColor: "#000",
+	},
+	menuIconContainer: {
+		position: "absolute",
+		top: StatusBarHeight(0),
+		right: 0,
+		width: 55,
+		height: 55,
+		zIndex: 3,
+	},
+	menuIcon: {
+		fontSize: 25,
+		padding: 15,
+		width: 55,
+		textAlign: "center",
+		color: "#fff",
+		zIndex: 3,
+	},
+	playerContainer: {
+		flex: 1,
+		backgroundColor: "#000",
+		alignItems: "center",
+		justifyContent: "center",
+	},
 });
 
 export { VideoPopup };

package/src/components/WarningPopup.js

@@ -1,82 +1,103 @@
-import React, { PureComponent } from 'react';
-import _ from 'lodash';
-import { View, Text, Dimensions } from 'react-native';
-import { connect } from 'react-redux';
-import { Pl60Icon } from '../fonts';
-import { COLOUR_GREEN, TEXT_DARK, getMainBrandingColourFromState } from '../colours';
-import { MiddlePopup } from './MiddlePopup';
-import { InlineButton } from './InlineButton';
+import React, { PureComponent } from "react";
+import _ from "lodash";
+import { View, Dimensions } from "react-native";
+import { Text } from "./Text";
+import { connect } from "react-redux";
+import { FontAwesome } from "./Icon";
+import {
+	COLOUR_GREEN,
+	TEXT_DARK,
+	getMainBrandingColourFromState,
+} from "../colours";
+import { MiddlePopup } from "./MiddlePopup";
+import { InlineButton } from "./InlineButton";
 
-const SCREEN_WIDTH = Dimensions.get('window').width;
+const SCREEN_WIDTH = Dimensions.get("window").width;
 
 class WarningPopup extends PureComponent {
-  render() {
-    return (
-      <MiddlePopup
-        visible={this.props.visible}
-        onClose={this.props.onClose}
-        style={[styles.popup, this.props.padHorizontal && { paddingHorizontal: 16 }]}
-      >
-        {this.props.isSuccess && <Pl60Icon style={styles.icon} name="circleoutlined" />}
-        <Text style={styles.text}>{this.props.confirmText}</Text>
-        <View style={{ marginTop: 16, paddingHorizontal: 24 }}>
-          <Text style={[styles.infoText, this.props.infoTextStyle]}>{this.props.infoText}</Text>
-        </View>
-        <InlineButton
-          onPress={this.props.onClose}
-          color={this.props.ctaButton ? this.props.colourBrandingMain : '#fff'}
-          style={styles.button}
-          textStyle={[styles.closeText, { color: this.props.ctaButton ? '#fff' : this.props.colourBrandingMain }]}
-          large
-        >
-          {!_.isUndefined(this.props.buttonText) ? this.props.buttonText : 'Close'}
-        </InlineButton>
-      </MiddlePopup>
-    );
-  }
+	render() {
+		return (
+			<MiddlePopup
+				visible={this.props.visible}
+				onClose={this.props.onClose}
+				style={[
+					styles.popup,
+					this.props.padHorizontal && { paddingHorizontal: 16 },
+				]}
+			>
+				{this.props.isSuccess && (
+					<FontAwesome style={styles.icon} name="circle-check" />
+				)}
+				<Text style={styles.text}>{this.props.confirmText}</Text>
+				<View style={{ marginTop: 16, paddingHorizontal: 24 }}>
+					<Text style={[styles.infoText, this.props.infoTextStyle]}>
+						{this.props.infoText}
+					</Text>
+				</View>
+				<InlineButton
+					onPress={this.props.onClose}
+					color={this.props.ctaButton ? this.props.colourBrandingMain : "#fff"}
+					style={styles.button}
+					textStyle={[
+						styles.closeText,
+						{
+							color: this.props.ctaButton
+								? "#fff"
+								: this.props.colourBrandingMain,
+						},
+					]}
+					large
+				>
+					{!_.isUndefined(this.props.buttonText)
+						? this.props.buttonText
+						: "Close"}
+				</InlineButton>
+			</MiddlePopup>
+		);
+	}
 }
 
 const styles = {
-  popup: {
-    width: 'auto',
-    maxWidth: SCREEN_WIDTH - 34,
-    paddingVertical: 16,
-  },
-  icon: {
-    marginTop: 20,
-    paddingBottom: 16,
-    fontSize: 52,
-    color: COLOUR_GREEN,
-  },
-  text: {
-    fontFamily: 'sf-bold',
-    fontSize: 24,
-    lineHeight: 24,
-    color: TEXT_DARK,
-    textAlign: 'center',
-    marginTop: 8,
-  },
-  infoText: {
-    fontFamily: 'sf-regular',
-    fontSize: 16,
-    lineHeight: 22,
-    color: TEXT_DARK,
-    textAlign: 'left',
-  },
-  button: {
-    width: 130,
-    marginTop: 20,
-  },
-  closeText: {
-    fontFamily: 'sf-medium',
-    fontSize: 15,
-  },
+	popup: {
+		width: "auto",
+		maxWidth: SCREEN_WIDTH - 34,
+		paddingVertical: 16,
+	},
+	icon: {
+		marginTop: 20,
+		paddingBottom: 16,
+		fontSize: 52,
+		color: COLOUR_GREEN,
+	},
+	text: {
+		fontFamily: "sf-bold",
+		fontSize: 24,
+		lineHeight: 24,
+		color: TEXT_DARK,
+		textAlign: "center",
+		marginTop: 8,
+	},
+	infoText: {
+		fontFamily: "sf-regular",
+		fontSize: 16,
+		lineHeight: 22,
+		color: TEXT_DARK,
+		textAlign: "left",
+	},
+	button: {
+		width: 130,
+		marginTop: 20,
+	},
+	closeText: {
+		fontFamily: "sf-medium",
+		fontSize: 15,
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 const warningPopup = connect(mapStateToProps, {})(WarningPopup);