From 756a08703ff67e6d896b590d905e2e3c4b154888 Mon Sep 17 00:00:00 2001
From: Chris Duarte <csduarte@users.noreply.github.com>
Date: Tue, 18 Apr 2017 12:49:03 -0700
Subject: [PATCH] RN-72 RN: Improvements to image previewer (#487)

---
 .../file_attachment_list/file_attachment_image.js   |  8 +++++---
 app/scenes/image_preview/image_preview.js           | 13 ++++++++++---
 app/scenes/image_preview/zoomable_image.js          |  1 +
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/components/file_attachment_list/file_attachment_image.js b/app/components/file_attachment_list/file_attachment_image.js
index 1dea81560..34a8c233f 100644
--- a/app/components/file_attachment_list/file_attachment_image.js
+++ b/app/components/file_attachment_list/file_attachment_image.js
@@ -37,6 +37,7 @@ export default class FileAttachmentImage extends PureComponent {
             IMAGE_SIZE.Thumbnail
         ]),
         imageWidth: PropTypes.number,
+        loadingBackgroundColor: PropTypes.string,
         resizeMode: PropTypes.string,
         resizeMethod: PropTypes.string,
         wrapperBackgroundColor: PropTypes.string,
@@ -50,6 +51,7 @@ export default class FileAttachmentImage extends PureComponent {
         imageSize: IMAGE_SIZE.Thumbnail,
         imageWidth: 100,
         loading: false,
+        loadingBackgroundColor: '#fff',
         resizeMode: 'cover',
         resizeMethod: 'resize',
         wrapperBackgroundColor: '#fff',
@@ -116,6 +118,7 @@ export default class FileAttachmentImage extends PureComponent {
             file,
             imageHeight,
             imageWidth,
+            loadingBackgroundColor,
             resizeMethod,
             resizeMode,
             wrapperBackgroundColor,
@@ -152,7 +155,7 @@ export default class FileAttachmentImage extends PureComponent {
                     />
                 </AnimatedView>
                 {(!isInFetchCache && (file.loading || this.state.requesting)) &&
-                    <View style={style.loaderContainer}>
+                    <View style={[style.loaderContainer, {backgroundColor: loadingBackgroundColor}]}>
                         <ActivityIndicator size='small'/>
                     </View>
                 }
@@ -171,7 +174,6 @@ const style = StyleSheet.create({
         height: '100%',
         width: '100%',
         alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: '#fff'
+        justifyContent: 'center'
     }
 });
diff --git a/app/scenes/image_preview/image_preview.js b/app/scenes/image_preview/image_preview.js
index 61f6dab16..156d7079e 100644
--- a/app/scenes/image_preview/image_preview.js
+++ b/app/scenes/image_preview/image_preview.js
@@ -117,13 +117,20 @@ export default class ImagePreview extends PureComponent {
         }
 
         const {dx, dy} = gestureState;
-        return (Math.abs(dy) > DRAG_VERTICAL_THRESHOLD_START && dx < DRAG_HORIZONTAL_THRESHOLD);
+        const isVerticalDrag = Math.abs(dy) > DRAG_VERTICAL_THRESHOLD_START && dx < DRAG_HORIZONTAL_THRESHOLD;
+        if (isVerticalDrag) {
+            this.setHeaderAndFileInfoVisible(false);
+            return true;
+        }
+
+        return false;
     }
 
     mainViewPanResponderRelease = (evt, gestureState) => {
         if (Math.abs(gestureState.dy) > DRAG_VERTICAL_THRESHOLD_END) {
             this.props.actions.goBack();
         } else {
+            this.setHeaderAndFileInfoVisible(true);
             Animated.spring(this.state.drag, {
                 toValue: {x: 0, y: 0}
             }).start();
@@ -326,7 +333,7 @@ const style = StyleSheet.create({
         bottom: 0,
         left: 0,
         right: 0,
-        height: 100,
+        height: 70,
         justifyContent: 'flex-end',
         paddingHorizontal: 24,
         paddingBottom: 16
@@ -337,7 +344,7 @@ const style = StyleSheet.create({
         left: 0
     },
     header: {
-        backgroundColor: '#000',
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
         height: HEADER_HEIGHT,
         position: 'absolute',
         top: 0,
diff --git a/app/scenes/image_preview/zoomable_image.js b/app/scenes/image_preview/zoomable_image.js
index 06fb3fde2..b35137581 100644
--- a/app/scenes/image_preview/zoomable_image.js
+++ b/app/scenes/image_preview/zoomable_image.js
@@ -310,6 +310,7 @@ class ZoomableImage extends Component {
                     imageHeight={imageHeight * this.state.zoom}
                     imageSize='fullsize'
                     imageWidth={imageWidth * this.state.zoom}
+                    loadingBackgroundColor='#000'
                     resizeMode='contain'
                     wrapperBackgroundColor='#000'
                     wrapperHeight={wrapperHeight * this.state.zoom}