@plusscommunities/pluss-core-app 1.2.3 → 1.4.1-beta.0

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@plusscommunities/pluss-core-app",
-  "version": "1.2.3",
+  "version": "1.4.1-beta.0",
   "description": "Core extension package for Pluss Communities platform",
   "main": "src/index.js",
   "scripts": {
+    "prepatch": "npm version prepatch --preid=beta",
     "patch": "npm version patch",
+    "preupload": "npm publish --access public --tag beta && rm -rf node_modules",
+    "preupload:p": "npm run prepatch && npm run preupload",
     "upload": "npm publish --access public && rm -rf node_modules",
     "upload:p": "npm run patch && npm run upload"
   },
@@ -12,31 +15,33 @@
   "license": "ISC",
   "dependencies": {
     "@expo/vector-icons": "^12.0.0",
-    "aws-amplify": "^3.4.0",
-    "aws-amplify-react-native": "^4.3.3",
-    "expo-av": "~9.1.2",
-    "expo-constants": "~10.1.3",
-    "expo-file-system": "~11.0.2",
-    "expo-image-manipulator": "~9.1.0",
-    "expo-image-picker": "~10.1.4",
-    "expo-linear-gradient": "~9.1.0",
-    "expo-media-library": "~12.0.2",
-    "expo-permissions": "~12.0.1",
-    "expo-screen-orientation": "~3.1.0",
-    "expo-sharing": "~9.1.2",
+    "@react-native-async-storage/async-storage": "~1.15.0",
+    "@react-native-community/netinfo": "7.1.3",
+    "@react-native-picker/picker": "2.2.1",
+    "aws-amplify": "^4.3.11",
+    "aws-amplify-react-native": "^6.0.2",
+    "expo-av": "~10.2.0",
+    "expo-constants": "~13.0.0",
+    "expo-file-system": "~13.1.0",
+    "expo-image-manipulator": "~10.2.0",
+    "expo-image-picker": "~12.0.1",
+    "expo-linear-gradient": "~11.0.0",
+    "expo-media-library": "~14.0.0",
+    "expo-screen-orientation": "~4.1.1",
+    "expo-sharing": "~10.1.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": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
+    "react": "17.0.1",
+    "react-native": "0.64.3",
     "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.2.3",
+    "react-native-webview": "11.15.0",
     "react-native-youtube-iframe": "^2.2.1",
     "react-redux": "^5.0.5"
   },

package/src/apis/index.js

@@ -4,4 +4,5 @@ export * from './followerActions';
 export * from './contactActions';
 export * from './eventActions';
 export * from './analyticsActions';
+export * from './notificationActions';
 export { default as userActions } from './userActions';

package/src/apis/notificationActions.js

@@ -0,0 +1,47 @@
+import { getUrl } from '../helper';
+import { authedFunction } from '../session';
+
+export const notificationActions = {
+  getAppNotificationSetting: () => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('notifications', 'getState/get', {
+        type: 'app',
+      }),
+    });
+  },
+  muteApp: () => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl('notifications', 'updateState/mute'),
+      data: { type: 'app' },
+    });
+  },
+  unmuteApp: () => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl('notifications', 'updateState/unmute'),
+      data: { type: 'app' },
+    });
+  },
+  getEntityNotificationSetting: (type, id) => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('notifications', 'getState/get', { type, id }),
+    });
+  },
+  muteEntity: (type, id) => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl('notifications', 'updateState/mute'),
+      data: { type, id },
+    });
+  },
+  unmuteEntity: (type, id) => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl('notifications', 'updateState/unmute'),
+      data: { type, id },
+    });
+  },
+};

package/src/components/CommentReply.js

@@ -329,5 +329,5 @@ const mapStateToProps = state => {
   return { user };
 };
 
-const commentReply = connect(mapStateToProps, {}, null, { withRef: true })(CommentReply);
+const commentReply = connect(mapStateToProps, {}, null, { forwardRef: true })(CommentReply);
 export { commentReply as CommentReply };

package/src/components/CommentSection.js

@@ -1,16 +1,17 @@
 import React, { Component } from 'react';
-import { View, Text, TouchableOpacity, Image } from 'react-native';
+import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
 import _ from 'lodash';
 import moment from 'moment';
 import { connect } from 'react-redux';
 import { Icon } from 'react-native-elements';
-import { getPluralS, getThumb300, get1400 } from '../helper';
+import { getPluralS, getThumb300, get1400, getSiteSettingFromState } from '../helper';
 import { getMainBrandingColourFromState, TEXT_DARKEST, BG_GREY, TEXT_LIGHT, LINEGREY } from '../colours';
-import { Spinner } from './Spinner';
-import { reactionActions } from '../apis';
+import { reactionActions, notificationActions } from '../apis';
 import { ConfirmPopup } from './ConfirmPopup';
 import { ProfilePic } from './ProfilePic';
 import { ImagePopup } from './ImagePopup';
+import { InlineButton } from './InlineButton';
+import { Spinner } from './Spinner';
 
 class CommentSection extends Component {
   constructor(props) {
@@ -23,10 +24,15 @@ class CommentSection extends Component {
       commentToReport: null,
       commentReportedStatus: null,
       reportLoading: false,
+      processing: false,
+      muteExpiry: null,
+      muteLoaded: false,
     };
   }
 
   componentDidMount() {
+    this.getNotificationSate();
+
     if (!_.includes(this.props.user.hidden, 'viewComment')) {
       this.getComments();
     }
@@ -97,6 +103,64 @@ class CommentSection extends Component {
     this.props.commentReply.getWrappedInstance().focusInput();
   }
 
+  onMute = () => {
+    const { entityType, entityId } = this.props;
+    this.setState({ processing: true }, async () => {
+      try {
+        const { data } = await notificationActions.muteEntity(entityType, entityId);
+        // console.log('onMute', data);
+        const muteExpiry = moment(data.Expiry);
+        this.setState({ muteExpiry, processing: false });
+      } catch (error) {
+        console.error('onMute', error);
+        this.setState({ processing: false });
+      }
+    });
+  };
+
+  onUnmute = () => {
+    const { entityType, entityId } = this.props;
+    this.setState({ processing: true }, async () => {
+      try {
+        const { data } = await notificationActions.unmuteEntity(entityType, entityId);
+        // console.log('onUnmute', data);
+        this.setState({ muteExpiry: null, processing: false });
+      } catch (error) {
+        console.error('onUnmute', error);
+        this.setState({ processing: false });
+      }
+    });
+  };
+
+  isMuted = () => {
+    const { muteExpiry } = this.state;
+    return muteExpiry && moment() <= muteExpiry;
+  };
+
+  getMuteRemaining = () => {
+    const { muteExpiry } = this.state;
+    const actual = muteExpiry ? moment.duration(muteExpiry.diff(moment())).asHours() : 0;
+    return Math.abs(Math.ceil(actual));
+  };
+
+  getNotificationSate = () => {
+    const { processing } = this.state;
+    const { entityType, entityId, notificationsForComments } = this.props;
+    if (processing || !notificationsForComments) return;
+
+    this.setState({ processing: true }, async () => {
+      try {
+        const { data } = await notificationActions.getEntityNotificationSetting(entityType, entityId);
+        // console.log('getNotificationSate', data);
+        const muteExpiry = data ? moment(data.Expiry) : null;
+        this.setState({ muteExpiry, muteLoaded: true, processing: false });
+      } catch (error) {
+        console.error('getNotificationSate', error);
+        this.setState({ processing: false });
+      }
+    });
+  };
+
   getAdjustedSize(size) {
     if (this.props.scaleFont) {
       return size + this.props.user.fontScale;
@@ -288,6 +352,47 @@ class CommentSection extends Component {
     );
   }
 
+  renderMute() {
+    const { notificationsForComments } = this.props;
+    const { muteLoaded, muteExpiry, processing } = this.state;
+    if (!notificationsForComments || !muteLoaded) return null;
+
+    if (processing)
+      return (
+        <View style={styles.muteSpinnerContainer}>
+          <Spinner size={'small'} color={this.props.colourBrandingMain} />
+        </View>
+      );
+
+    const isMuted = this.isMuted();
+    const hours = this.getMuteRemaining();
+    const mutedFor = `Muted for ${hours} hour${getPluralS(hours)}`;
+    // console.log(muteExpiry.format('DD MMM YYYY hh:mm a'));
+
+    return (
+      <View style={styles.muteContainer}>
+        {isMuted && muteExpiry ? <Text style={[{ color: this.props.colourBrandingMain }, styles.mutedForText]}>{mutedFor}</Text> : null}
+        <InlineButton
+          onPress={isMuted ? this.onUnmute : this.onMute}
+          color="#fff"
+          style={[{ borderColor: this.props.colourBrandingMain }, styles.muteButton]}
+          disabled={processing}
+          disabledOpacity
+          noText
+        >
+          <View style={styles.muteButtonInner}>
+            <Icon
+              name={isMuted ? 'bell-o' : 'bell-slash-o'}
+              type={'font-awesome'}
+              iconStyle={[{ color: this.props.colourBrandingMain }, styles.muteButtonIcon]}
+            />
+            <Text style={[{ color: this.props.colourBrandingMain }, styles.muteButtonText]}>{isMuted ? 'Unmute' : 'Mute'}</Text>
+          </View>
+        </InlineButton>
+      </View>
+    );
+  }
+
   renderComments() {
     if (this.state.commentsLoading) {
       return (
@@ -317,11 +422,14 @@ class CommentSection extends Component {
       <View style={styles.commentSection}>
         {!this.isEmpty() && (
           <View style={styles.commentSectionTitleRow}>
-            {!this.props.hideAddComment && this.state.comments.length > 2 && (
-              <TouchableOpacity onPress={this.onGoToAdd.bind(this)}>
-                <Text style={[styles.goToText, { color: this.props.colourBrandingMain }]}>Add a comment</Text>
-              </TouchableOpacity>
-            )}
+            <View style={{ alignItems: 'flex-end' }}>
+              {this.renderMute()}
+              {!this.props.hideAddComment && this.state.comments.length > 2 && (
+                <TouchableOpacity onPress={this.onGoToAdd.bind(this)}>
+                  <Text style={[styles.goToText, { color: this.props.colourBrandingMain }]}>Add a comment</Text>
+                </TouchableOpacity>
+              )}
+            </View>
             <Text style={[styles.commentCount, { fontSize: this.getAdjustedSize(15) }]}>
               {this.state.comments.length}
               {` comment${getPluralS(this.state.comments.length)}`}
@@ -374,22 +482,22 @@ class CommentSection extends Component {
   }
 }
 
-const styles = {
+const styles = StyleSheet.create({
   commentSectionOuter: {
     flex: 1,
     paddingHorizontal: 16,
   },
   commentSection: {
     flex: 1,
-    paddingVertical: 16,
+    paddingVertical: 12,
     borderTopColor: LINEGREY,
     borderTopWidth: 1,
-    borderTopStyle: 'solid',
   },
   commentCount: {
     fontFamily: 'sf-semibold',
     color: TEXT_DARKEST,
     flex: 1,
+    marginTop: 4,
   },
   comment: {
     marginTop: 16,
@@ -463,14 +571,49 @@ const styles = {
   reportLoadingContainer: {
     paddingVertical: 10,
   },
-};
+  goToText: {
+    marginTop: 4,
+  },
+  muteSpinnerContainer: {
+    width: 100,
+    marginBottom: 6,
+  },
+  muteContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    marginBottom: 6,
+  },
+  mutedForText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 13,
+    marginRight: 8,
+  },
+  muteButton: {
+    borderWidth: 1,
+    paddingHorizontal: 8,
+  },
+  muteButtonInner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  muteButtonIcon: {
+    fontSize: 14,
+  },
+  muteButtonText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 14,
+    marginLeft: 6,
+  },
+});
 
 const mapStateToProps = state => {
   return {
     colourBrandingMain: getMainBrandingColourFromState(state),
     user: state.user,
+    notificationsForComments: getSiteSettingFromState(state, 'NotificationsForComments', false),
   };
 };
 
-const commentSection = connect(mapStateToProps, {}, null, { withRef: true })(CommentSection);
+const commentSection = connect(mapStateToProps, {}, null, { forwardRef: true })(CommentSection);
 export { commentSection as CommentSection };

package/src/components/ImageUploader.js

@@ -3,7 +3,7 @@ import { View, ScrollView, TouchableOpacity, Text, Platform, Linking, Modal, Dim
 import { connect } from 'react-redux';
 import { Icon } from 'react-native-elements';
 import _ from 'lodash';
-import * as Permissions from 'expo-permissions';
+import { Camera } from 'expo-camera';
 import * as MediaLibrary from 'expo-media-library';
 import * as ImageManipulator from 'expo-image-manipulator';
 import * as ImagePicker from 'expo-image-picker';
@@ -60,7 +60,7 @@ class ImageUploader extends Component {
   }
 
   loadLocalAlbums = async () => {
-    const hasPermission = await Permissions.getAsync(Permissions.CAMERA_ROLL);
+    const hasPermission = await MediaLibrary.getPermissionsAsync();
     if (!hasPermission.granted) return;
 
     this.setState({ loadingLocalFolders: true }, async () => {
@@ -254,8 +254,8 @@ class ImageUploader extends Component {
   }
 
   askPermissionsAsync = async () => {
-    const cameraPermission = await Permissions.askAsync(Permissions.CAMERA);
-    const rollPermission = await Permissions.askAsync(Permissions.CAMERA_ROLL);
+    const cameraPermission = await Camera.requestCameraPermissionsAsync();
+    const rollPermission = await MediaLibrary.requestPermissionsAsync();
     if (cameraPermission.status !== 'granted' || rollPermission.status !== 'granted') {
       this.showWarningPopup(cameraPermission.status !== 'granted', rollPermission.status !== 'granted');
       return false;
@@ -786,4 +786,4 @@ const mapStateToProps = state => {
   };
 };
 
-export default connect(mapStateToProps, { stockImagesLoaded, imageLibraryLoaded }, null, { withRef: true })(ImageUploader);
+export default connect(mapStateToProps, { stockImagesLoaded, imageLibraryLoaded }, null, { forwardRef: true })(ImageUploader);

package/src/components/MediaPlayer.js

@@ -39,7 +39,7 @@ class MediaPlayer extends Component {
   }
 
   componentDidMount = async () => {
-    this.setupForPlaying();
+    await this.setupForPlaying();
 
     ScreenOrientation.lockAsync(Platform.OS === 'ios' ? ScreenOrientation.OrientationLock.DEFAULT : ScreenOrientation.OrientationLock.ALL);
     const motionAvailalble = await DeviceMotion.isAvailableAsync();
@@ -75,25 +75,26 @@ class MediaPlayer extends Component {
 
   setupForPlaying = async () => {
     // Extract live stream info
-    const { source } = this.props;
-    const isUrlLink = source.startsWith('http');
-    const isYoutube = source.includes('youtube.com/watch?v=') || source.includes('youtu.be/');
-    const isVimeo = source.includes('vimeo.com/');
-    this.setState({ isUrlLink, isYoutube, isVimeo, playbackLoaded: isYoutube || isVimeo });
+    const { source, useVideoPlayer } = this.props;
+    const isUrlLink = source && source.startsWith('http');
+    const isYoutube = source && (source.includes('youtube.com/watch?v=') || source.includes('youtu.be/'));
+    const isVimeo = source && source.includes('vimeo.com/');
+    let heightFactor = 0;
 
     if (isYoutube) {
       const metadata = await getYoutubeMeta(this.getYoutubeVideoId(source));
-      this.setState({ heightFactor: metadata.height / metadata.width, readyToRender: true });
-      // console.log('youtube metadata', metadata);
-    } else if (isVimeo) {
-      this.setState({ heightFactor: 0.565, readyToRender: true });
+      heightFactor = metadata.height / metadata.width;
+    } else if (useVideoPlayer) {
+      heightFactor = 0;
     } else {
-      this.setState({ readyToRender: true });
+      heightFactor = 0.565;
     }
+
+    this.setState({ isUrlLink, isYoutube, isVimeo, playbackLoaded: isYoutube || isVimeo, heightFactor, readyToRender: true });
   };
 
   getStreamPlaybackUrl = () => {
-    // return 'https://stream.mux.com/nflNhyFQMlrSt00II01Hjh2BLSW009PH1tl023pdpJ01s1vc.m3u8';
+    // return 'https://stream.mux.com/Ym4nKktRpGuZNBBBlzhxpyRwZLpvMlPRchcu01x6Ur600.m3u8';
     return `https://stream.mux.com/${this.props.playbackId}.m3u8`;
   };
 

package/src/components/VideoPopup.js

@@ -3,7 +3,8 @@ import { Platform, View, Modal, TouchableOpacity, StyleSheet } from 'react-nativ
 import * as ScreenOrientation from 'expo-screen-orientation';
 import { StatusBarHeight, getCompressed, imageExists } from '../helper';
 import { Pl60Icon } from '../fonts';
-import { SharingTools, MediaPlayer } from './';
+import { SharingTools } from './SharingTools';
+import { MediaPlayer } from './MediaPlayer';
 
 class VideoPopup extends Component {
   constructor(props) {

package/src/components/expo-image-picker-multiple/ImageBrowser.js

@@ -3,7 +3,7 @@ import { StyleSheet, View, FlatList, Dimensions, ActivityIndicator, Platform } f
 import _ from 'lodash';
 import * as ScreenOrientation from 'expo-screen-orientation';
 import * as MediaLibrary from 'expo-media-library';
-import * as Permissions from 'expo-permissions';
+import { Camera } from 'expo-camera';
 import { isVideo } from '../../helper';
 import ImageTile from './ImageTile';
 
@@ -49,8 +49,8 @@ export default class ImageBrowser extends React.Component {
   };
 
   getPermissionsAsync = async () => {
-    const { status: camera } = await Permissions.askAsync(Permissions.CAMERA);
-    const { status: cameraRoll } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
+    const { status: camera } = await Camera.requestCameraPermissionsAsync();
+    const { status: cameraRoll } = await MediaLibrary.requestPermissionsAsync();
     this.setState({
       hasCameraPermission: camera === 'granted',
       hasCameraRollPermission: cameraRoll === 'granted',