Make image preview placeholder theme compatible (#1619)

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}

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);

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',
+    },
+});