@plusscommunities/pluss-core-app 6.1.8 → 6.1.9

package/dist/module/components/ImagePopup.js

@@ -4,8 +4,9 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 import React, { Component } from 'react';
 import _ from 'lodash';
 import moment from 'moment';
-import { Dimensions, Modal, TouchableOpacity, StyleSheet, View, ImageBackground, Text } from 'react-native';
+import { Dimensions, Modal, TouchableOpacity, StyleSheet, View, Text } from 'react-native';
 import ImageViewer from 'react-native-image-zoom-viewer';
+import AutoHeightImage from 'react-native-auto-height-image';
 import { Icon } from 'react-native-elements';
 import { TEXT_DARK } from '../colours';
 import { StatusBarHeight, isVideo, get1400 } from '../helper';
@@ -53,26 +54,17 @@ class ImagePopup extends Component {
         currentVideoUrl: url
       });
     });
-    _defineProperty(this, "renderImage", props => {
+    _defineProperty(this, "renderImageFooter", (media, style) => {
       var _media$user, _media$user2;
-      const media = this.state.images.find(image => image.url === props.source.uri);
-      const isVideo = !_.isNil(media) && media.isVideo;
+      if (!media.user || !media.date) return null;
       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
+      return /*#__PURE__*/React.createElement(View, {
+        style: [styles.imageInfoContainer, style]
       }, /*#__PURE__*/React.createElement(ProfilePic, {
         Diameter: 42,
         ProfilePic: media === null || media === void 0 || (_media$user = media.user) === null || _media$user === void 0 ? void 0 : _media$user.profilePic
@@ -83,7 +75,28 @@ class ImagePopup extends Component {
       }, media === null || media === void 0 || (_media$user2 = media.user) === null || _media$user2 === void 0 ? void 0 : _media$user2.displayName), /*#__PURE__*/React.createElement(Text, {
         numberOfLines: 2,
         style: styles.iamgeTextDate
-      }, `Uploaded ${dateText} • ${timeText}`))));
+      }, `Uploaded ${dateText} • ${timeText}`)));
+    });
+    _defineProperty(this, "renderImage", props => {
+      const media = this.state.images.find(image => image.url === props.source.uri);
+      const isVideo = !_.isNil(media) && media.isVideo;
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.imageContainer
+      }, /*#__PURE__*/React.createElement(AutoHeightImage, {
+        source: {
+          uri: media.url
+        },
+        width: SCREEN_WIDTH,
+        resizeMode: "contain"
+      }), 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
+      }))), this.renderImageFooter(media));
     });
     this.state = {
       index: 0,
@@ -144,6 +157,15 @@ class ImagePopup extends Component {
     if (_.isEmpty(images)) {
       return null;
     }
+
+    // This is required for the ImageViewer to render the image info section properly
+    const imagesWithSizes = images.map(image => {
+      return {
+        ...image,
+        width: SCREEN_WIDTH,
+        height: SCREEN_HEIGHT
+      };
+    });
     return /*#__PURE__*/React.createElement(Modal, {
       visible: visible,
       animationType: "slide",
@@ -155,7 +177,7 @@ class ImagePopup extends Component {
       onChange: this.onChange,
       onSwipeDown: onClose,
       enableSwipeDown: true,
-      imageUrls: images,
+      imageUrls: imagesWithSizes,
       saveToLocalByLongPress: false,
       renderImage: this.renderImage
     }), this.renderClose(), /*#__PURE__*/React.createElement(SharingTools, {
@@ -172,10 +194,10 @@ const styles = StyleSheet.create({
     height: SCREEN_HEIGHT,
     backgroundColor: '#000'
   },
-  image: {
-    width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT,
-    backgroundColor: '#000'
+  imageContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   menuIconContainer: {
     position: 'absolute',

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

@@ -1 +1 @@
-{"version":3,"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","_defineProperty","images","map","image","url","original","uri","date","user","setState","index","state","showFullscreenVideo","length","currentVideoUrl","_media$user","_media$user2","media","find","source","isNil","dateText","timeText","imageDate","format","createElement","style","styles","videoOverlay","onPress","toggleFullscreenVideo","bind","name","type","iconStyle","videoPlayIcon","imageInfoContainer","Diameter","profilePic","imageTextContainer","imageTextName","displayName","numberOfLines","iamgeTextDate","componentDidMount","setupUrls","componentDidUpdate","prevProps","visible","scrollTo","renderClose","menuIconContainer","onClose","activeOpacity","menuIcon","renderVideoPlayerPopup","render","isEmpty","animationType","onRequestClose","modal","scrollable","onChange","onSwipeDown","enableSwipeDown","imageUrls","saveToLocalByLongPress","renderImage","create","backgroundColor","position","top","right","zIndex","fontSize","padding","textAlign","color","left","bottom","alignItems","justifyContent","textShadowColor","textShadowOffset","flexDirection","paddingHorizontal","marginLeft","flex","fontFamily"],"sources":["ImagePopup.js"],"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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Component","_","moment","Dimensions","Modal","TouchableOpacity","StyleSheet","View","Text","ImageViewer","AutoHeightImage","Icon","TEXT_DARK","StatusBarHeight","isVideo","get1400","Pl60Icon","SharingTools","VideoPopup","ProfilePic","SCREEN_WIDTH","get","width","SCREEN_HEIGHT","height","ImagePopup","constructor","props","_defineProperty","images","map","image","url","original","uri","date","user","setState","index","state","showFullscreenVideo","length","currentVideoUrl","media","style","_media$user","_media$user2","dateText","timeText","isNil","imageDate","format","createElement","styles","imageInfoContainer","Diameter","profilePic","imageTextContainer","imageTextName","displayName","numberOfLines","iamgeTextDate","find","source","imageContainer","resizeMode","videoOverlay","onPress","toggleFullscreenVideo","bind","name","type","iconStyle","videoPlayIcon","renderImageFooter","componentDidMount","setupUrls","componentDidUpdate","prevProps","visible","scrollTo","renderClose","menuIconContainer","onClose","activeOpacity","menuIcon","renderVideoPlayerPopup","render","isEmpty","imagesWithSizes","animationType","onRequestClose","modal","scrollable","onChange","onSwipeDown","enableSwipeDown","imageUrls","saveToLocalByLongPress","renderImage","create","backgroundColor","flex","justifyContent","alignItems","position","top","right","zIndex","fontSize","padding","textAlign","color","left","bottom","textShadowColor","textShadowOffset","flexDirection","paddingHorizontal","marginLeft","fontFamily"],"sources":["ImagePopup.js"],"sourcesContent":["import React, { Component } from 'react';\nimport _ from 'lodash';\nimport moment from 'moment';\nimport { Dimensions, Modal, TouchableOpacity, StyleSheet, View, Text } from 'react-native';\nimport ImageViewer from 'react-native-image-zoom-viewer';\nimport AutoHeightImage from 'react-native-auto-height-image';\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  renderImageFooter = (media, style) => {\n    if (!media.user || !media.date) return null;\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 style={[styles.imageInfoContainer, style]}>\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  };\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    return (\n      <View style={styles.imageContainer}>\n        <AutoHeightImage source={{ uri: media.url }} width={SCREEN_WIDTH} resizeMode=\"contain\" />\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        {this.renderImageFooter(media)}\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\n    // This is required for the ImageViewer to render the image info section properly\n    const imagesWithSizes = images.map(image => {\n      return {\n        ...image,\n        width: SCREEN_WIDTH,\n        height: SCREEN_HEIGHT,\n      };\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={imagesWithSizes}\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  imageContainer: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\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"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-app",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/module/index.js",
   "module": "dist/module/index.js",

package/src/components/ImagePopup.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import _ from 'lodash';
 import moment from 'moment';
-import { Dimensions, Modal, TouchableOpacity, StyleSheet, View, ImageBackground, Text } from 'react-native';
+import { Dimensions, Modal, TouchableOpacity, StyleSheet, View, Text } from 'react-native';
 import ImageViewer from 'react-native-image-zoom-viewer';
+import AutoHeightImage from 'react-native-auto-height-image';
 import { Icon } from 'react-native-elements';
 import { TEXT_DARK } from '../colours';
 import { StatusBarHeight, isVideo, get1400 } from '../helper';
@@ -71,9 +72,8 @@ class ImagePopup extends Component {
     );
   }
 
-  renderImage = props => {
-    const media = this.state.images.find(image => image.url === props.source.uri);
-    const isVideo = !_.isNil(media) && media.isVideo;
+  renderImageFooter = (media, style) => {
+    if (!media.user || !media.date) return null;
 
     let dateText, timeText;
     if (!_.isNil(media.date)) {
@@ -83,25 +83,31 @@ class ImagePopup extends Component {
     }
 
     return (
-      <View>
-        <ImageBackground {...props}>
-          {isVideo && (
-            <View style={styles.videoOverlay}>
-              <TouchableOpacity onPress={this.toggleFullscreenVideo.bind(this, media.original)}>
-                <Icon name="play" type="font-awesome" iconStyle={styles.videoPlayIcon} />
-              </TouchableOpacity>
-            </View>
-          )}
-        </ImageBackground>
-        {(!_.isNil(media.user) || !_.isNil(media.date)) && (
-          <View style={styles.imageInfoContainer}>
-            <ProfilePic Diameter={42} ProfilePic={media?.user?.profilePic} />
-            <View style={styles.imageTextContainer}>
-              <Text style={styles.imageTextName}>{media?.user?.displayName}</Text>
-              <Text numberOfLines={2} style={styles.iamgeTextDate}>{`Uploaded ${dateText} • ${timeText}`}</Text>
-            </View>
+      <View style={[styles.imageInfoContainer, style]}>
+        <ProfilePic Diameter={42} ProfilePic={media?.user?.profilePic} />
+        <View style={styles.imageTextContainer}>
+          <Text style={styles.imageTextName}>{media?.user?.displayName}</Text>
+          <Text numberOfLines={2} style={styles.iamgeTextDate}>{`Uploaded ${dateText} • ${timeText}`}</Text>
+        </View>
+      </View>
+    );
+  };
+
+  renderImage = props => {
+    const media = this.state.images.find(image => image.url === props.source.uri);
+    const isVideo = !_.isNil(media) && media.isVideo;
+
+    return (
+      <View style={styles.imageContainer}>
+        <AutoHeightImage source={{ uri: media.url }} width={SCREEN_WIDTH} resizeMode="contain" />
+        {isVideo && (
+          <View style={styles.videoOverlay}>
+            <TouchableOpacity onPress={this.toggleFullscreenVideo.bind(this, media.original)}>
+              <Icon name="play" type="font-awesome" iconStyle={styles.videoPlayIcon} />
+            </TouchableOpacity>
           </View>
         )}
+        {this.renderImageFooter(media)}
       </View>
     );
   };
@@ -120,6 +126,15 @@ class ImagePopup extends Component {
     if (_.isEmpty(images)) {
       return null;
     }
+
+    // This is required for the ImageViewer to render the image info section properly
+    const imagesWithSizes = images.map(image => {
+      return {
+        ...image,
+        width: SCREEN_WIDTH,
+        height: SCREEN_HEIGHT,
+      };
+    });
     return (
       <Modal visible={visible} animationType="slide" onRequestClose={onClose} style={styles.modal}>
         <ImageViewer
@@ -128,7 +143,7 @@ class ImagePopup extends Component {
           onChange={this.onChange}
           onSwipeDown={onClose}
           enableSwipeDown
-          imageUrls={images}
+          imageUrls={imagesWithSizes}
           saveToLocalByLongPress={false}
           renderImage={this.renderImage}
         />
@@ -149,10 +164,10 @@ const styles = StyleSheet.create({
     height: SCREEN_HEIGHT,
     backgroundColor: '#000',
   },
-  image: {
-    width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT,
-    backgroundColor: '#000',
+  imageContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   menuIconContainer: {
     position: 'absolute',