@plusscommunities/pluss-core-app 6.0.6-auth.0 → 6.0.7-beta.0

package/src/apis/fileActions.js

@@ -1,34 +1,41 @@
-import Axios from 'axios';
+import mime from 'mime-types';
+import { Storage } from 'aws-amplify';
 import { getUrl, generateImageName, randomString } from '../helper';
 import { authedFunction } from '../session';
+import Config from '../config';
 
 export const fileActions = {
-  getPresignedUrl: async (filename, contentType) => {
-    // const newFilename = filename.replace(/[^a-z0-9+.]+/gi, '').toLowerCase();
-    const signedUrlRes = await authedFunction({
-      method: 'GET',
-      url: getUrl('media', 'get/presignedurl', { filename, contentType }),
-    });
-    return signedUrlRes.data;
-  },
   getUploadUrl: (userId, fileName) => {
     const newFilename = fileName.replace(/[^a-z0-9+.]+/gi, '').toLowerCase();
     return `uploads/users/${userId}/public/${randomString()}/${newFilename}`;
   },
-  uploadUserMediaWithProgress: async (blob, url, progressCallback = null) => {
-    return fileActions.uploadBlobAWS(url, blob, progressCallback);
+  uploadUserMediaWithProgress: async (imageUri, url, progressCallback = null) => {
+    const blob = await fileActions.imageToBlob(imageUri);
+    return fileActions.uploadBlobAWS(Config.env.awsUploadsBucket, url, blob, '', progressCallback);
   },
+  // uploadUserMedia: async (userId, image, fileName) => {
+  //   const blob = await fileActions.imageToBlob(image.uri);
+  //   const url = fileActions.getUploadUrl(userId, fileName);
+  //   return fileActions.uploadBlobAWS(Config.env.awsUploadsBucket, url, blob);
+  // },
+  // uploadSignatureImage: async (image, name) => {
+  //   const blob = await fileActions.imageToBlob(image);
+  //   const newImageName = generateImageName(name, 'signature.png');
+  //   return fileActions.uploadBlobAWS(Config.env.awsStorageBucket, newImageName, blob, 'images/');
+  // },
   imageToBlob: async imageUri => {
     const response = await fetch(imageUri);
     return response.blob();
   },
-  uploadBlobAWS: async (uri, blob, progressCallback = null) => {
-    return Axios.put(uri, blob, {
-      headers: {
-        'Content-Type': blob.type,
-      },
-      transformRequest: d => d,
-      onUploadProgress: progress =>
+  uploadBlobAWS: (bucket, uri, blob, prefix = '', progressCallback = null) => {
+    const imageName = prefix ? uri.replace(/^.*[\\/]/, '') : uri;
+    const fileType = mime.lookup(uri);
+    const access = {
+      level: 'public',
+      bucket,
+      contentType: fileType,
+      customPrefix: { public: '' },
+      progressCallback: progress =>
         progressCallback &&
         progressCallback({
           uri,
@@ -36,7 +43,8 @@ export const fileActions = {
           total: progress.total,
           percentage: `${Math.floor((progress.loaded / progress.total) * 100)}%`,
         }),
-    });
+    };
+    return Storage.put(`${prefix}${imageName}`, blob, access);
   },
   getStockPhotos: async () => {
     const response = await authedFunction({

package/src/components/CommentSection.js

@@ -416,7 +416,7 @@ class CommentSection extends Component {
       content = (
         <View style={styles.multiReplyContainer}>
           {profilePics.map((c, i) => {
-            return <ProfilePic style={{ marginRight: -10 }} Diameter={20} ProfilePic={c.User.profilePic} />;
+            return <ProfilePic key={c.Id} style={{ marginRight: -10 }} Diameter={20} ProfilePic={c.User.profilePic} />;
           })}
           <Text style={[styles.commentRepliesText, { marginLeft: 20, color: this.props.colourBrandingMain }]}>{`${
             threadComments.length

package/src/components/Forbidden.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import _ from 'lodash';
+import { View } from 'react-native';
+import { TextStyle } from './TextStyle';
+import { getMainBrandingColourFromState } from '../colours';
+import { InlineButton } from './InlineButton';
+import { Services } from '../config';
+import { connect } from 'react-redux';
+import Header from './Header';
+
+const Forbidden = ({ colourBrandingMain, title, description }) => {
+  const goBack = () => {
+    Services.navigation.goBack();
+  };
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: '#fff',
+      }}
+    >
+      <Header leftIcon="angle-left" onPressLeft={goBack} />
+      <View
+        style={{
+          padding: 16,
+        }}
+      >
+        <TextStyle type="pageHeading" style={{ color: colourBrandingMain }}>
+          {!_.isEmpty(title) ? title : 'Oops!'}
+        </TextStyle>
+        <TextStyle type="body" style={{ marginTop: 10 }}>
+          {!_.isEmpty(description)
+            ? description
+            : 'It seems this item is no longer accessible. It may have been removed or your access might have changed.'}
+        </TextStyle>
+        <View style={{ marginTop: 20 }}>
+          <InlineButton onPress={goBack} color={colourBrandingMain}>
+            Go back
+          </InlineButton>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state),
+  };
+};
+
+const forbidden = connect(mapStateToProps, {}, null, { forwardRef: true })(Forbidden);
+export { forbidden as Forbidden };

package/src/components/ImageUploader.js

@@ -142,25 +142,23 @@ class ImageUploader extends Component {
     let uploadUri;
     try {
       const fileName = `${getValueOrDefault(this.props.fileName, DEFAULT_IMAGE_NAME)}.${DEFULAT_IMAGE_TYPE}`;
+      uploadUri = fileActions.getUploadUrl(this.props.userId, fileName);
 
+      this.props.onUploadStarted(uploadUri, imageUri);
       this.hideUploadMenu();
 
       const resized = await this.resizeImageAsync(imageUri);
-      const blob = await fileActions.imageToBlob(resized.uri);
-      const presignedUriRes = await fileActions.getPresignedUrl(_.last(resized.uri.split('/')), blob.type);
-      uploadUri = presignedUriRes.key;
-      this.props.onUploadStarted(uploadUri, imageUri);
       if (this.props.onlySelectImage) {
         this.props.onImageSelected(resized, fileName);
         return;
       }
 
-      const uploadResult = await fileActions.uploadUserMediaWithProgress(blob, presignedUriRes.url, progress => {
+      const res = await fileActions.uploadUserMediaWithProgress(resized.uri, uploadUri, progress => {
         if (this.props.onUploadProgress) this.props.onUploadProgress(progress);
       });
 
-      this.props.onUploadSuccess(Config.env.baseUploadsUrl + uploadUri, uploadUri);
-      console.log('upload success', Config.env.baseUploadsUrl + uploadUri);
+      this.props.onUploadSuccess(Config.env.baseUploadsUrl + res.key, uploadUri);
+      console.log('upload success', Config.env.baseUploadsUrl + res.key);
     } catch (e) {
       console.log('handleImagePicked error', e);
       this.props.onUploadFailed(uploadUri);
@@ -172,6 +170,7 @@ class ImageUploader extends Component {
     const imagesUploaded = imagesSelected.map(image => {
       const fileName = `${getValueOrDefault(this.props.fileName, DEFAULT_IMAGE_NAME)}.${DEFULAT_IMAGE_TYPE}`;
       const uploadUri = fileActions.getUploadUrl(this.props.userId, fileName);
+      if (!this.props.onlySelectImage) this.props.onUploadStarted(uploadUri, image.uri);
       return { imageUri: image.uri, uploadUri, fileName };
     });
     this.hideUploadMenu();
@@ -182,21 +181,16 @@ class ImageUploader extends Component {
       const { imageUri, uploadUri, fileName } = image;
       try {
         const resized = await this.resizeImageAsync(imageUri);
-        const blob = await fileActions.imageToBlob(resized.uri);
         if (this.props.onlySelectImage) {
           this.props.onImageSelected(resized, fileName);
           return;
         }
-        const presignedUriRes = await fileActions.getPresignedUrl(_.last(resized.uri.split('/')), blob.type);
-        const uploadUri = presignedUriRes.key;
-        if (!this.props.onlySelectImage) this.props.onUploadStarted(uploadUri, imageUri);
 
-        const uploadResult = await fileActions.uploadUserMediaWithProgress(blob, presignedUriRes.url, progress => {
+        const res = await fileActions.uploadUserMediaWithProgress(resized.uri, uploadUri, progress => {
           if (this.props.onUploadProgress) this.props.onUploadProgress(progress);
         });
-
-        this.props.onUploadSuccess(Config.env.baseUploadsUrl + uploadUri, uploadUri);
-        console.log('upload success', Config.env.baseUploadsUrl + uploadUri);
+        this.props.onUploadSuccess(Config.env.baseUploadsUrl + res.key, uploadUri);
+        console.log('upload success', Config.env.baseUploadsUrl + res.key);
       } catch (e) {
         console.log('handleMultiImagePicked error', e);
         this.props.onUploadFailed(uploadUri);
@@ -209,7 +203,7 @@ class ImageUploader extends Component {
     try {
       const fileType = uri.substring(uri.lastIndexOf('.') + 1);
       const fileName = `${getValueOrDefault(this.props.fileName, DEFAULT_VIDEO_NAME)}.${fileType}`;
-      uploadUri = await fileActions.getPresignedUrl(fileName);
+      uploadUri = fileActions.getUploadUrl(this.props.userId, fileName);
 
       this.props.onUploadStarted(uploadUri, uri);
       this.hideUploadMenu();
@@ -262,7 +256,7 @@ class ImageUploader extends Component {
   askPermissionsAsync = async () => {
     const cameraPermission = await Camera.requestCameraPermissionsAsync();
     const rollPermission = await MediaLibrary.requestPermissionsAsync();
-    if (cameraPermission.status !== 'granted' || rollPermission.status !== 'granted') {
+    if (cameraPermission.status !== 'granted' || (Platform.OS === 'ios' && rollPermission.status !== 'granted')) {
       this.showWarningPopup(cameraPermission.status !== 'granted', rollPermission.status !== 'granted');
       return false;
     }
@@ -272,7 +266,6 @@ class ImageUploader extends Component {
   };
 
   isEditingEnabled = () => {
-    return false;
     return !this.props.multiple && !this.props.allowVideo && getValueOrDefault(this.props.allowsEditing, DEFAULT_ALLOWS_EDITING);
   };
 
@@ -321,6 +314,24 @@ class ImageUploader extends Component {
   };
 
   openPhotos = async () => {
+    if (Platform.OS === 'android') {
+      const result = await ImagePicker.launchImageLibraryAsync({
+        allowsEditing: this.isEditingEnabled(),
+        aspect: getValueOrDefault(this.props.aspect, DEFAULT_ASPECT),
+        exif: getValueOrDefault(this.props.exif, DEFAULT_EXIF),
+        mediaTypes: this.props.allowVideo ? ImagePicker.MediaTypeOptions.All : ImagePicker.MediaTypeOptions.Images,
+      });
+      if (!result.cancelled) {
+        if (result.assets.length === 1 && result.assets[0].type === 'video') {
+          this.handleVideoPicked(result.assets[0].uri);
+        } else {
+          this.handleMultiImagePicked(result.assets);
+        }
+      }
+      return;
+    }
+
+    // iOS behaviour
     if (!(await this.askPermissionsAsync())) return;
 
     this.setState({

package/src/components/MediaPlayer.js

@@ -1,12 +1,9 @@
 import React, { Component } from 'react';
-import { Platform, View, StyleSheet, Dimensions } from 'react-native';
-import * as ScreenOrientation from 'expo-screen-orientation';
-import { DeviceMotion } from 'expo-sensors';
+import { View, StyleSheet, Dimensions } from 'react-native';
 import YoutubePlayer, { getYoutubeMeta } from 'react-native-youtube-iframe';
 import { Vimeo } from 'react-native-vimeo-iframe';
 import { WebView } from 'react-native-webview';
 import { Video } from 'expo-av';
-import VideoPlayer from 'expo-video-player';
 import { Spinner } from './Spinner';
 
 const SCREEN_HEIGHT = Dimensions.get('window').height;
@@ -40,20 +37,10 @@ class MediaPlayer extends Component {
 
   componentDidMount = async () => {
     await this.setupForPlaying();
-
-    ScreenOrientation.lockAsync(Platform.OS === 'ios' ? ScreenOrientation.OrientationLock.DEFAULT : ScreenOrientation.OrientationLock.ALL);
-    const motionAvailalble = await DeviceMotion.isAvailableAsync();
-    // console.log('motionAvailalble', motionAvailalble);
-    if (motionAvailalble) {
-      DeviceMotion.setUpdateInterval(500);
-      DeviceMotion.addListener(this.onMotionChange);
-    }
   };
 
   componentWillUnmount = () => {
     if (this.checkStreamLoaded) clearInterval(this.checkStreamLoaded);
-    DeviceMotion.removeAllListeners();
-    ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
   };
 
   getYoutubeVideoId = url => {
@@ -292,20 +279,20 @@ class MediaPlayer extends Component {
     />
   );
 
-  getVideoPlayer = (embedUrl, width, height, autoPlay) => (
-    <VideoPlayer
-      videoProps={{
-        shouldPlay: autoPlay,
-        resizeMode: Video.RESIZE_MODE_CONTAIN,
-        source: { uri: embedUrl },
-      }}
-      showFullscreenButton={false}
-      errorCallback={this.onVideoPlayError}
-      playbackCallback={this.onVideoPlayStatusUpdate}
-      height={height}
-      width={width}
-    />
-  );
+  // getVideoPlayer = (embedUrl, width, height, autoPlay) => (
+  //   <VideoPlayer
+  //     videoProps={{
+  //       shouldPlay: autoPlay,
+  //       resizeMode: Video.RESIZE_MODE_CONTAIN,
+  //       source: { uri: embedUrl },
+  //     }}
+  //     showFullscreenButton={false}
+  //     errorCallback={this.onVideoPlayError}
+  //     playbackCallback={this.onVideoPlayStatusUpdate}
+  //     height={height}
+  //     width={width}
+  //   />
+  // );
 
   render() {
     let width, height;
@@ -351,7 +338,7 @@ class MediaPlayer extends Component {
       } else if (useVideoPlayer) {
         embedUrl = source;
         // console.log('getVideoPlayer', embedUrl, width, height, autoPlay);
-        player = this.getVideoPlayer(embedUrl, width, height, autoPlay);
+        player = this.getStreamPlayer(embedUrl, width, height, autoPlay);
       }
     }
     if (!player && isUrlLink) {

package/src/components/index.js

@@ -1,5 +1,6 @@
 export * from './InlineButton';
 export * from './AddToCalendarButton';
+export * from './Forbidden';
 export * from './FormCard';
 export * from './FormCardSection';
 export * from './FormCardSectionOptionLauncher';

package/src/config.js

@@ -18,11 +18,6 @@ const CoreConfig = {
     strings: {},
     newEventDefaults: '',
     defaultAllowComments: true,
-    AuthStrategy: {
-      getAccessToken: async () => null,
-      getCurrentUserId: async () => null,
-      hasActiveSession: async () => false,
-    },
   },
   init: (environment, navigation) => {
     CoreConfig.env = environment;

package/src/helper.js

@@ -1,5 +1,6 @@
 import _ from 'lodash';
-import { Platform, StatusBar, Dimensions } from 'react-native';
+import React from 'react';
+import { Platform, StatusBar, Dimensions, Text } from 'react-native';
 import Constants from 'expo-constants';
 import Config from './config';
 import { LINEGREY } from './colours';
@@ -121,6 +122,9 @@ const getThumb300 = url => {
   if (!url) {
     return url;
   }
+  if (isVideo(url)) {
+    return 'https://pluss60-demo-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:97769b56-25ec-41c0-a73c-6c2c4140f629/public/9d0bbec64614b1ed654a03f7e7/movie.jpg';
+  }
   if (url.indexOf('https://plussprdstorage.blob.core.windows.net/') !== -1) {
     return url.replace('https://plussprdstorage.blob.core.windows.net/', 'https://plusscdn.azureedge.net/');
   }
@@ -445,6 +449,20 @@ const allowComments = canComment => {
   return Config.env.defaultAllowComments;
 };
 
+const toParagraphed = (text, style) => {
+  if (!text) {
+    return text;
+  }
+  const textSplit = text.split('\n');
+  return _.map(textSplit, (t, i) => {
+    return (
+      <Text key={`paragraph_${i}`} style={style}>
+        {t}
+      </Text>
+    );
+  });
+};
+
 export {
   TIMESTAMP_FORMAT,
   DATE_FORMAT,
@@ -484,6 +502,7 @@ export {
   getValidUrl,
   getUserPreview,
   allowComments,
+  toParagraphed,
   isVideoUrl,
   detectFaces,
   findLandmarkRange,

package/src/session.js

@@ -1,10 +1,10 @@
 import _ from 'lodash';
 import axios from 'axios';
 import { Auth } from 'aws-amplify';
-import Config from './config';
 
 export const getSessionTokenAWS = async prefix => {
-  const token = await Config.env.AuthStrategy.getAccessToken();
+  const data = await Auth.currentSession();
+  const token = data.accessToken.jwtToken;
   if (_.isUndefined(prefix)) return token;
   return `${prefix} ${token}`;
 };