@plusscommunities/pluss-core-app 1.4.9 → 1.5.0

package/dist/module/components/ImagePopup.js

@@ -0,0 +1,257 @@
+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 _ from 'lodash';
+import moment from 'moment';
+import { Dimensions, Modal, TouchableOpacity, StyleSheet, View, ImageBackground, Text } from 'react-native';
+import ImageViewer from 'react-native-image-zoom-viewer';
+import { Icon } from 'react-native-elements';
+import { TEXT_DARK } from '../colours';
+import { StatusBarHeight, isVideo, get1400 } from '../helper';
+import { Pl60Icon } from '../fonts';
+import { SharingTools } from './SharingTools';
+import { VideoPopup } from './VideoPopup';
+import { ProfilePic } from './ProfilePic';
+const SCREEN_WIDTH = Dimensions.get('window').width;
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+
+class ImagePopup extends Component {
+  constructor(_props) {
+    super(_props);
+
+    _defineProperty(this, "setupUrls", () => {
+      if (!this.props.images) return;
+      const images = this.props.images.map(image => {
+        if (typeof image === 'string') {
+          return {
+            url: get1400(image),
+            original: image,
+            isVideo: isVideo(image)
+          };
+        }
+
+        return {
+          url: get1400(image === null || image === void 0 ? void 0 : image.uri),
+          original: image === null || image === void 0 ? void 0 : image.uri,
+          isVideo: isVideo(image === null || image === void 0 ? void 0 : image.uri),
+          date: image === null || image === void 0 ? void 0 : image.date,
+          user: image === null || image === void 0 ? void 0 : image.user
+        };
+      });
+      this.setState({
+        images,
+        index: this.state.index || this.props.index || 0
+      });
+    });
+
+    _defineProperty(this, "onChange", index => {
+      this.setState({
+        index
+      });
+    });
+
+    _defineProperty(this, "toggleFullscreenVideo", url => {
+      if (typeof url !== 'string') url = '';
+      this.setState({
+        showFullscreenVideo: url.length > 0,
+        currentVideoUrl: url
+      });
+    });
+
+    _defineProperty(this, "renderImage", props => {
+      const media = this.state.images.find(image => image.url === props.source.uri);
+      const isVideo = !_.isNil(media) && media.isVideo;
+      let dateText, timeText;
+
+      if (!_.isNil(media.date)) {
+        const imageDate = moment(media.date);
+        dateText = imageDate.format('MMMM D, YYYY');
+        timeText = imageDate.format('hh:mm A');
+      }
+
+      return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(ImageBackground, props, isVideo && /*#__PURE__*/React.createElement(View, {
+        style: styles.videoOverlay
+      }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+        onPress: this.toggleFullscreenVideo.bind(this, media.original)
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "play",
+        type: "font-awesome",
+        iconStyle: styles.videoPlayIcon
+      })))), (!_.isNil(media.user) || !_.isNil(media.date)) && /*#__PURE__*/React.createElement(View, {
+        style: styles.imageInfoContainer
+      }, /*#__PURE__*/React.createElement(ProfilePic, {
+        Diameter: 42,
+        ProfilePic: media.user.profilePic
+      }), /*#__PURE__*/React.createElement(View, {
+        style: styles.imageTextContainer
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: styles.imageTextName
+      }, media.user.displayName), /*#__PURE__*/React.createElement(Text, {
+        numberOfLines: 2,
+        style: styles.iamgeTextDate
+      }, `Uploaded ${dateText} • ${timeText}`))));
+    });
+
+    this.state = {
+      index: 0,
+      images: [],
+      showFullscreenVideo: false,
+      currentVideoUrl: ''
+    };
+  }
+
+  componentDidMount() {
+    this.setupUrls();
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      visible,
+      index
+    } = this.props;
+    if (!prevProps.visible && visible) this.setupUrls();
+    if (prevProps.index !== index) this.setState({
+      index
+    });
+  }
+
+  scrollTo(index) {
+    this.setState({
+      index
+    });
+  }
+
+  renderClose() {
+    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.menuIconContainer,
+      onPress: this.props.onClose,
+      activeOpacity: 0.6
+    }, /*#__PURE__*/React.createElement(Pl60Icon, {
+      name: "close",
+      style: [styles.menuIcon]
+    }));
+  }
+
+  renderVideoPlayerPopup() {
+    const {
+      showFullscreenVideo,
+      currentVideoUrl
+    } = this.state;
+    if (!currentVideoUrl) return;
+    return /*#__PURE__*/React.createElement(VideoPopup, {
+      uri: currentVideoUrl,
+      visible: showFullscreenVideo,
+      onClose: this.toggleFullscreenVideo
+    });
+  }
+
+  render() {
+    const {
+      visible,
+      onClose
+    } = this.props;
+    const {
+      index,
+      images
+    } = this.state;
+
+    if (_.isEmpty(images)) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(Modal, {
+      visible: visible,
+      animationType: "slide",
+      onRequestClose: onClose,
+      style: styles.modal
+    }, /*#__PURE__*/React.createElement(ImageViewer, {
+      style: styles.scrollable,
+      index: index,
+      onChange: this.onChange,
+      onSwipeDown: onClose,
+      enableSwipeDown: true,
+      imageUrls: images,
+      saveToLocalByLongPress: false,
+      renderImage: this.renderImage
+    }), this.renderClose(), /*#__PURE__*/React.createElement(SharingTools, {
+      uri: images[index].original
+    }), this.renderVideoPlayerPopup());
+  }
+
+}
+
+const styles = StyleSheet.create({
+  modal: {
+    backgroundColor: '#000'
+  },
+  scrollable: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    backgroundColor: '#000'
+  },
+  image: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    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
+  },
+  videoOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  videoPlayIcon: {
+    color: '#fff',
+    fontSize: 30,
+    textShadowColor: 'rgba(0,0,0,0.3)',
+    textShadowOffset: {
+      width: 2,
+      height: 2
+    }
+  },
+  imageInfoContainer: {
+    flexDirection: 'row',
+    paddingHorizontal: 12,
+    height: 70,
+    backgroundColor: '#fff',
+    alignItems: 'center'
+  },
+  imageTextContainer: {
+    marginLeft: 12,
+    flexDirection: 'column',
+    flex: 1,
+    height: 42,
+    justifyContent: 'space-around'
+  },
+  imageTextName: {
+    fontFamily: 'sf-semibold',
+    fontSize: 14,
+    color: TEXT_DARK
+  },
+  iamgeTextDate: {
+    fontFamily: 'sf-regular',
+    fontSize: 12,
+    color: TEXT_DARK
+  }
+});
+export { ImagePopup };
+//# sourceMappingURL=ImagePopup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ImagePopup.js"],"names":["React","Component","_","moment","Dimensions","Modal","TouchableOpacity","StyleSheet","View","ImageBackground","Text","ImageViewer","Icon","TEXT_DARK","StatusBarHeight","isVideo","get1400","Pl60Icon","SharingTools","VideoPopup","ProfilePic","SCREEN_WIDTH","get","width","SCREEN_HEIGHT","height","ImagePopup","constructor","props","images","map","image","url","original","uri","date","user","setState","index","state","showFullscreenVideo","length","currentVideoUrl","media","find","source","isNil","dateText","timeText","imageDate","format","styles","videoOverlay","toggleFullscreenVideo","bind","videoPlayIcon","imageInfoContainer","profilePic","imageTextContainer","imageTextName","displayName","iamgeTextDate","componentDidMount","setupUrls","componentDidUpdate","prevProps","visible","scrollTo","renderClose","menuIconContainer","onClose","menuIcon","renderVideoPlayerPopup","render","isEmpty","modal","scrollable","onChange","renderImage","create","backgroundColor","position","top","right","zIndex","fontSize","padding","textAlign","color","left","bottom","alignItems","justifyContent","textShadowColor","textShadowOffset","flexDirection","paddingHorizontal","marginLeft","flex","fontFamily"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport _ from 'lodash';\nimport moment from 'moment';\nimport { Dimensions, Modal, TouchableOpacity, StyleSheet, View, ImageBackground, Text } from 'react-native';\nimport ImageViewer from 'react-native-image-zoom-viewer';\nimport { Icon } from 'react-native-elements';\nimport { TEXT_DARK } from '../colours';\nimport { StatusBarHeight, isVideo, get1400 } from '../helper';\nimport { Pl60Icon } from '../fonts';\nimport { SharingTools } from './SharingTools';\nimport { VideoPopup } from './VideoPopup';\nimport { ProfilePic } from './ProfilePic';\n\nconst SCREEN_WIDTH = Dimensions.get('window').width;\nconst SCREEN_HEIGHT = Dimensions.get('window').height;\n\nclass ImagePopup extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      index: 0,\n      images: [],\n      showFullscreenVideo: false,\n      currentVideoUrl: '',\n    };\n  }\n\n  componentDidMount() {\n    this.setupUrls();\n  }\n\n  componentDidUpdate(prevProps) {\n    const { visible, index } = this.props;\n    if (!prevProps.visible && visible) this.setupUrls();\n    if (prevProps.index !== index) this.setState({ index });\n  }\n\n  setupUrls = () => {\n    if (!this.props.images) return;\n\n    const images = this.props.images.map(image => {\n      if (typeof image === 'string') {\n        return { url: get1400(image), original: image, isVideo: isVideo(image) };\n      }\n      return { url: get1400(image?.uri), original: image?.uri, isVideo: isVideo(image?.uri), date: image?.date, user: image?.user };\n    });\n\n    this.setState({ images, index: this.state.index || this.props.index || 0 });\n  };\n\n  onChange = index => {\n    this.setState({ index });\n  };\n\n  scrollTo(index) {\n    this.setState({\n      index,\n    });\n  }\n\n  toggleFullscreenVideo = url => {\n    if (typeof url !== 'string') url = '';\n    this.setState({ showFullscreenVideo: url.length > 0, currentVideoUrl: url });\n  };\n\n  renderClose() {\n    return (\n      <TouchableOpacity style={styles.menuIconContainer} onPress={this.props.onClose} activeOpacity={0.6}>\n        <Pl60Icon name=\"close\" style={[styles.menuIcon]} />\n      </TouchableOpacity>\n    );\n  }\n\n  renderImage = props => {\n    const media = this.state.images.find(image => image.url === props.source.uri);\n    const isVideo = !_.isNil(media) && media.isVideo;\n\n    let dateText, timeText;\n    if (!_.isNil(media.date)) {\n      const imageDate = moment(media.date);\n      dateText = imageDate.format('MMMM D, YYYY');\n      timeText = imageDate.format('hh:mm A');\n    }\n\n    return (\n      <View>\n        <ImageBackground {...props}>\n          {isVideo && (\n            <View style={styles.videoOverlay}>\n              <TouchableOpacity onPress={this.toggleFullscreenVideo.bind(this, media.original)}>\n                <Icon name=\"play\" type=\"font-awesome\" iconStyle={styles.videoPlayIcon} />\n              </TouchableOpacity>\n            </View>\n          )}\n        </ImageBackground>\n        {(!_.isNil(media.user) || !_.isNil(media.date)) && (\n          <View style={styles.imageInfoContainer}>\n            <ProfilePic Diameter={42} ProfilePic={media.user.profilePic} />\n            <View style={styles.imageTextContainer}>\n              <Text style={styles.imageTextName}>{media.user.displayName}</Text>\n              <Text numberOfLines={2} style={styles.iamgeTextDate}>{`Uploaded ${dateText} • ${timeText}`}</Text>\n            </View>\n          </View>\n        )}\n      </View>\n    );\n  };\n\n  renderVideoPlayerPopup() {\n    const { showFullscreenVideo, currentVideoUrl } = this.state;\n    if (!currentVideoUrl) return;\n\n    return <VideoPopup uri={currentVideoUrl} visible={showFullscreenVideo} onClose={this.toggleFullscreenVideo} />;\n  }\n\n  render() {\n    const { visible, onClose } = this.props;\n    const { index, images } = this.state;\n\n    if (_.isEmpty(images)) {\n      return null;\n    }\n    return (\n      <Modal visible={visible} animationType=\"slide\" onRequestClose={onClose} style={styles.modal}>\n        <ImageViewer\n          style={styles.scrollable}\n          index={index}\n          onChange={this.onChange}\n          onSwipeDown={onClose}\n          enableSwipeDown\n          imageUrls={images}\n          saveToLocalByLongPress={false}\n          renderImage={this.renderImage}\n        />\n        {this.renderClose()}\n        <SharingTools uri={images[index].original} />\n        {this.renderVideoPlayerPopup()}\n      </Modal>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  modal: {\n    backgroundColor: '#000',\n  },\n  scrollable: {\n    width: SCREEN_WIDTH,\n    height: SCREEN_HEIGHT,\n    backgroundColor: '#000',\n  },\n  image: {\n    width: SCREEN_WIDTH,\n    height: SCREEN_HEIGHT,\n    backgroundColor: '#000',\n  },\n  menuIconContainer: {\n    position: 'absolute',\n    top: StatusBarHeight(0),\n    right: 0,\n    width: 55,\n    height: 55,\n    zIndex: 3,\n  },\n  menuIcon: {\n    fontSize: 25,\n    padding: 15,\n    width: 55,\n    textAlign: 'center',\n    color: '#fff',\n    zIndex: 3,\n  },\n  videoOverlay: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  videoPlayIcon: {\n    color: '#fff',\n    fontSize: 30,\n    textShadowColor: 'rgba(0,0,0,0.3)',\n    textShadowOffset: { width: 2, height: 2 },\n  },\n  imageInfoContainer: {\n    flexDirection: 'row',\n    paddingHorizontal: 12,\n    height: 70,\n    backgroundColor: '#fff',\n    alignItems: 'center',\n  },\n  imageTextContainer: {\n    marginLeft: 12,\n    flexDirection: 'column',\n    flex: 1,\n    height: 42,\n    justifyContent: 'space-around',\n  },\n  imageTextName: {\n    fontFamily: 'sf-semibold',\n    fontSize: 14,\n    color: TEXT_DARK,\n  },\n  iamgeTextDate: {\n    fontFamily: 'sf-regular',\n    fontSize: 12,\n    color: TEXT_DARK,\n  },\n});\n\nexport { ImagePopup };\n"]}

package/dist/module/components/ImageUploadProgress.js

@@ -0,0 +1,72 @@
+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, Text, StyleSheet } from 'react-native';
+import { InlineButton } from './InlineButton';
+import { Spinner } from './Spinner';
+
+class ImageUploadProgress extends Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "onRetryUpload", (imageUri, uploadUri) => {
+      this.props.uploader.retryUpload(imageUri, uploadUri);
+    });
+  }
+
+  render() {
+    const {
+      color,
+      image,
+      style,
+      progressTextStyle,
+      retryTextStyle
+    } = this.props;
+    const {
+      imageUri,
+      uploadUri,
+      uploadProgress,
+      allowRetry
+    } = image;
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.container, style]
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      style: styles.spinner
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: [styles.uploadProgressText, progressTextStyle, {
+        color
+      }]
+    }, uploadProgress), allowRetry && /*#__PURE__*/React.createElement(InlineButton, {
+      color: color,
+      onPress: () => this.onRetryUpload(imageUri, uploadUri),
+      touchableStyle: styles.retryButton
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.retryText, retryTextStyle]
+    }, "Retry")));
+  }
+
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  spinner: {
+    flex: 0
+  },
+  uploadProgressText: {
+    textAlign: 'center',
+    fontFamily: 'sf-semibold',
+    fontSize: 12
+  },
+  retryButton: {
+    marginTop: 10
+  },
+  retryText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 12
+  }
+});
+export default ImageUploadProgress;
+//# sourceMappingURL=ImageUploadProgress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ImageUploadProgress.js"],"names":["React","Component","View","Text","StyleSheet","InlineButton","Spinner","ImageUploadProgress","imageUri","uploadUri","props","uploader","retryUpload","render","color","image","style","progressTextStyle","retryTextStyle","uploadProgress","allowRetry","styles","container","spinner","uploadProgressText","onRetryUpload","retryButton","retryText","create","alignItems","justifyContent","flex","textAlign","fontFamily","fontSize","marginTop"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AACA,SAASC,IAAT,EAAeC,IAAf,EAAqBC,UAArB,QAAuC,cAAvC;AACA,SAASC,YAAT,QAA6B,gBAA7B;AACA,SAASC,OAAT,QAAwB,WAAxB;;AAEA,MAAMC,mBAAN,SAAkCN,SAAlC,CAA4C;AAAA;AAAA;;AAAA,2CAC1B,CAACO,QAAD,EAAWC,SAAX,KAAyB;AACvC,WAAKC,KAAL,CAAWC,QAAX,CAAoBC,WAApB,CAAgCJ,QAAhC,EAA0CC,SAA1C;AACD,KAHyC;AAAA;;AAK1CI,EAAAA,MAAM,GAAG;AACP,UAAM;AAAEC,MAAAA,KAAF;AAASC,MAAAA,KAAT;AAAgBC,MAAAA,KAAhB;AAAuBC,MAAAA,iBAAvB;AAA0CC,MAAAA;AAA1C,QAA6D,KAAKR,KAAxE;AACA,UAAM;AAAEF,MAAAA,QAAF;AAAYC,MAAAA,SAAZ;AAAuBU,MAAAA,cAAvB;AAAuCC,MAAAA;AAAvC,QAAsDL,KAA5D;AAEA,wBACE,oBAAC,IAAD;AAAM,MAAA,KAAK,EAAE,CAACM,MAAM,CAACC,SAAR,EAAmBN,KAAnB;AAAb,oBACE,oBAAC,OAAD;AAAS,MAAA,KAAK,EAAEK,MAAM,CAACE;AAAvB,MADF,eAEE,oBAAC,IAAD;AAAM,MAAA,KAAK,EAAE,CAACF,MAAM,CAACG,kBAAR,EAA4BP,iBAA5B,EAA+C;AAAEH,QAAAA;AAAF,OAA/C;AAAb,OAAyEK,cAAzE,CAFF,EAGGC,UAAU,iBACT,oBAAC,YAAD;AAAc,MAAA,KAAK,EAAEN,KAArB;AAA4B,MAAA,OAAO,EAAE,MAAM,KAAKW,aAAL,CAAmBjB,QAAnB,EAA6BC,SAA7B,CAA3C;AAAoF,MAAA,cAAc,EAAEY,MAAM,CAACK;AAA3G,oBACE,oBAAC,IAAD;AAAM,MAAA,KAAK,EAAE,CAACL,MAAM,CAACM,SAAR,EAAmBT,cAAnB;AAAb,eADF,CAJJ,CADF;AAWD;;AApByC;;AAuB5C,MAAMG,MAAM,GAAGjB,UAAU,CAACwB,MAAX,CAAkB;AAC/BN,EAAAA,SAAS,EAAE;AACTO,IAAAA,UAAU,EAAE,QADH;AAETC,IAAAA,cAAc,EAAE;AAFP,GADoB;AAK/BP,EAAAA,OAAO,EAAE;AACPQ,IAAAA,IAAI,EAAE;AADC,GALsB;AAQ/BP,EAAAA,kBAAkB,EAAE;AAClBQ,IAAAA,SAAS,EAAE,QADO;AAElBC,IAAAA,UAAU,EAAE,aAFM;AAGlBC,IAAAA,QAAQ,EAAE;AAHQ,GARW;AAa/BR,EAAAA,WAAW,EAAE;AACXS,IAAAA,SAAS,EAAE;AADA,GAbkB;AAgB/BR,EAAAA,SAAS,EAAE;AACTM,IAAAA,UAAU,EAAE,aADH;AAETC,IAAAA,QAAQ,EAAE;AAFD;AAhBoB,CAAlB,CAAf;AAsBA,eAAe3B,mBAAf","sourcesContent":["import React, { Component } from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport { InlineButton } from './InlineButton';\nimport { Spinner } from './Spinner';\n\nclass ImageUploadProgress extends Component {\n  onRetryUpload = (imageUri, uploadUri) => {\n    this.props.uploader.retryUpload(imageUri, uploadUri);\n  };\n\n  render() {\n    const { color, image, style, progressTextStyle, retryTextStyle } = this.props;\n    const { imageUri, uploadUri, uploadProgress, allowRetry } = image;\n\n    return (\n      <View style={[styles.container, style]}>\n        <Spinner style={styles.spinner} />\n        <Text style={[styles.uploadProgressText, progressTextStyle, { color }]}>{uploadProgress}</Text>\n        {allowRetry && (\n          <InlineButton color={color} onPress={() => this.onRetryUpload(imageUri, uploadUri)} touchableStyle={styles.retryButton}>\n            <Text style={[styles.retryText, retryTextStyle]}>Retry</Text>\n          </InlineButton>\n        )}\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  spinner: {\n    flex: 0,\n  },\n  uploadProgressText: {\n    textAlign: 'center',\n    fontFamily: 'sf-semibold',\n    fontSize: 12,\n  },\n  retryButton: {\n    marginTop: 10,\n  },\n  retryText: {\n    fontFamily: 'sf-semibold',\n    fontSize: 12,\n  },\n});\n\nexport default ImageUploadProgress;\n"]}