From d58d06d7b25b77e15c24ff9c4f42363bd1597329 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Wed, 25 Apr 2018 13:44:29 -0300
Subject: [PATCH] Make image preview placeholder theme compatible (#1619)

---
 .../file_attachment_image.js                  |   4 ++
 app/components/progressive_image/index.js     |  16 ++++++
 .../progressive_image.js                      |  46 +++++++++++++++---
 assets/base/images/thumb.png                  | Bin 0 -> 1102 bytes
 assets/base/images/thumb@2x.png               | Bin 0 -> 1845 bytes
 assets/base/images/thumb@3x.png               | Bin 0 -> 2589 bytes
 6 files changed, 59 insertions(+), 7 deletions(-)
 create mode 100644 app/components/progressive_image/index.js
 rename app/components/{ => progressive_image}/progressive_image.js (79%)
 create mode 100644 assets/base/images/thumb.png
 create mode 100644 assets/base/images/thumb@2x.png
 create mode 100644 assets/base/images/thumb@3x.png

diff --git a/app/components/file_attachment_list/file_attachment_image.js b/app/components/file_attachment_list/file_attachment_image.js
index eeeaa1de2..833da5c80 100644
--- a/app/components/file_attachment_list/file_attachment_image.js
+++ b/app/components/file_attachment_list/file_attachment_image.js
@@ -16,6 +16,8 @@ import {isGif} from 'app/utils/file';
 import {emptyFunction} from 'app/utils/general';
 import ImageCacheManager from 'app/utils/image_cache_manager';
 
+import thumb from 'assets/images/thumb.png';
+
 const IMAGE_SIZE = {
     Fullsize: 'fullsize',
     Preview: 'preview',
@@ -135,6 +137,8 @@ export default class FileAttachmentImage extends PureComponent {
                 <ProgressiveImage
                     ref={this.handleCapturePreviewRef}
                     style={imageStyle}
+                    defaultSource={thumb}
+                    tintDefaultSource={true}
                     filename={file.name}
                     resizeMode={resizeMode}
                     resizeMethod={resizeMethod}
diff --git a/app/components/progressive_image/index.js b/app/components/progressive_image/index.js
new file mode 100644
index 000000000..a4d517348
--- /dev/null
+++ b/app/components/progressive_image/index.js
@@ -0,0 +1,16 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+
+import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
+
+import ProgressiveImage from './progressive_image';
+
+function mapStateToProps(state) {
+    return {
+        theme: getTheme(state),
+    };
+}
+
+export default connect(mapStateToProps)(ProgressiveImage);
diff --git a/app/components/progressive_image.js b/app/components/progressive_image/progressive_image.js
similarity index 79%
rename from app/components/progressive_image.js
rename to app/components/progressive_image/progressive_image.js
index aa6e1977c..4b4328c8d 100644
--- a/app/components/progressive_image.js
+++ b/app/components/progressive_image/progressive_image.js
@@ -7,6 +7,7 @@ import {Animated, Image, ImageBackground, Platform, View, StyleSheet} from 'reac
 
 import CustomPropTypes from 'app/constants/custom_prop_types';
 import ImageCacheManager from 'app/utils/image_cache_manager';
+import {changeOpacity} from 'app/utils/theme';
 
 const AnimatedImageBackground = Animated.createAnimatedComponent(ImageBackground);
 
@@ -18,7 +19,9 @@ export default class ProgressiveImage extends PureComponent {
         filename: PropTypes.string,
         imageUri: PropTypes.string,
         style: CustomPropTypes.Style,
+        theme: PropTypes.object.isRequired,
         thumbnailUri: PropTypes.string,
+        tintDefaultSource: PropTypes.bool,
     };
 
     constructor(props) {
@@ -34,7 +37,7 @@ export default class ProgressiveImage extends PureComponent {
     }
 
     componentWillMount() {
-        const intensity = new Animated.Value(100);
+        const intensity = new Animated.Value(80);
         this.setState({intensity});
         this.load(this.props);
     }
@@ -102,7 +105,7 @@ export default class ProgressiveImage extends PureComponent {
     };
 
     render() {
-        const {style, defaultSource, isBackgroundImage, ...otherProps} = this.props;
+        const {style, defaultSource, isBackgroundImage, theme, tintDefaultSource, ...otherProps} = this.props;
         const {style: computedStyle} = this;
         const {uri, intensity, thumb} = this.state;
         const hasDefaultSource = Boolean(defaultSource);
@@ -124,9 +127,22 @@ export default class ProgressiveImage extends PureComponent {
             ImageComponent = Animated.Image;
         }
 
-        return (
-            <View {...{style}}>
-                {(hasDefaultSource && !hasPreview && !hasURI) &&
+        let defaultImage;
+        if (hasDefaultSource && tintDefaultSource) {
+            defaultImage = (
+                <View style={styles.defaultImageContainer}>
+                    <DefaultComponent
+                        {...otherProps}
+                        source={defaultSource}
+                        style={{flex: 1, tintColor: changeOpacity(theme.centerChannelColor, 0.2)}}
+                        resizeMode='center'
+                    >
+                        {this.props.children}
+                    </DefaultComponent>
+                </View>
+            );
+        } else {
+            defaultImage = (
                 <DefaultComponent
                     {...otherProps}
                     source={defaultSource}
@@ -134,7 +150,12 @@ export default class ProgressiveImage extends PureComponent {
                 >
                     {this.props.children}
                 </DefaultComponent>
-                }
+            );
+        }
+
+        return (
+            <View {...{style}}>
+                {(hasDefaultSource && !hasPreview && !hasURI) && defaultImage}
                 {hasPreview && !isImageReady &&
                 <ImageComponent
                     {...otherProps}
@@ -155,9 +176,20 @@ export default class ProgressiveImage extends PureComponent {
                 </ImageComponent>
                 }
                 {hasPreview &&
-                <Animated.View style={[computedStyle, {backgroundColor: 'black', opacity}]}/>
+                <Animated.View style={[computedStyle, {backgroundColor: theme.centerChannelBg, opacity}]}/>
                 }
             </View>
         );
     }
 }
+
+const styles = StyleSheet.create({
+    defaultImageContainer: {
+        flex: 1,
+        position: 'absolute',
+        height: 80,
+        width: 80,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
diff --git a/assets/base/images/thumb.png b/assets/base/images/thumb.png
new file mode 100644
index 0000000000000000000000000000000000000000..4bfe55da57b55ab7398affc06fe05645a87748ce
GIT binary patch
literal 1102
zcmV-U1hM;xP)<h;3K|Lk000e1NJLTq0018V001fo1^@s6OBsMC0004lX+uL$b5ch_
zAW20-HZeIiHZ3wPF#rH4k#&)~O9Md=hrc{T(L@C;6fB}dt3-T2&_*ypq7Wp+2)>%+
z%tJ`xahD*$R<I2yh&H|o{R^}etOY?)1hKHPR<uz$=Zp{$Gt2CJ``evicNVPCjFQ#u
zeUQ!NwMfwKnwgz*)jndU9Vd-+#uQy04TnQiwYM8AX1wy6wW^={*BTZRx&oFu;SojE
z^1|c7p_RO9@}_XBl8!A39}9alxuEd1smIIwWOAy^A0}(jNC2$O!miXWj{jmMt!0Jf
z<+!t%g7R}8^CgZ%ZhA^$mv{#{5rX(}F~JxCeDpIcvkxx=^va4V`F-E{lPpWFBC|>n
zjU`f~$>R~VAk`BRlcFbNWGI^b|JzqRIXF<R?(jp+gJHaML+u89mJH*4-!MK8z;+L3
zxk~=>9t^#TUaDyBU1(Z^lk<ue--6S1XuDHmTI^f0iCdFNcs>H>EVNug{d~D+Kl>cs
zLUdKW>H@ZRphwO(Eqnno$!E?CXqdkM000SaNLh0L01FcU01FcV0GgZ_0007UNkl<Z
zScUD_&x_4b7{~F~F!^1g`3GzeX$lQVNq#OY{OE2dli8SJB{s8AHfn6Fq==FtA-`p#
zln|PXNRovtEQT>9KSF*ip6}H)?%aF6ckZR|snhp+y3hA{pYxn^p7V5@q^lE~@FK@I
zL+KfIq#Ccsw>r1ADc}OW;6wJ&sA0C^L<-GSz-w?Euh5I-_>?l@3i@1p8BxJ#6;5CP
zOYmlx&|fqZd?ilfEtcY8y}?7lm*T8g<7K$t2yi+0BAgfNx&l3o0uP2S#3g(cVZYr-
zFcf$Dd|b{3vl2HO4KBhL;A-}M2yIy#tZ9va@5Pv`zqyKiU3Yymo{O0-POyJaZ+KDH
z>ghN|l``Dl4X<{wl(U~La=|@u+tsW*GjG8ik$mpr1}6S4cn4-+7j|O~HVg+2C&lGn
zO^<M_q<>CCpj2ZM{1h@?A<xVQFsY<J8LvzFQ_+X^REK%shs8~I0awIDbU6F18AmYz
zTXOhJ4*M7!5oORP91t}b?96;z&7Q3l{QL-e9(YmX{k*nwvjLqH%klyHQsA{Dnb8?Q
zHi)C5!0Z(J;*>ZA<ElBz3-8WAr^N>A#&mHE`!kz^;`|p<9Hxf71@G`gg!!|`bo<NL
zJ{C!+oN5aDRuSgan29sEi0x%;4~imXMm47?GarYS;+UnV1s_GBGFZ81-jO-nlW6}+
zl;0c01}&=;_(*KSEnH886QQ4sbwe4XT&b%uMTEXL2fQhJw)^=`$OZ2gSLw(c;G%j|
zD8p0W*D$XJa8>=gHQayrA5rOU@A^&5S*4vW_5YizT6>SyCXtES)RshQRUe*y2fK2u
ULzYuztpET307*qoM6N<$f{uUw9RL6T

literal 0
HcmV?d00001

diff --git a/assets/base/images/thumb@2x.png b/assets/base/images/thumb@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..9fda666334877e9f7fd91930bb8b4e91184b5d39
GIT binary patch
literal 1845
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

literal 0
HcmV?d00001

diff --git a/assets/base/images/thumb@3x.png b/assets/base/images/thumb@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..54816bee009558bbf2b4dc322c84ab72fe104a96
GIT binary patch
literal 2589
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

literal 0
HcmV?d00001