Merge pull request #13010 from margelo/@thomas/revert-fast-image

Revert "Merge pull request #12648 from margelo/@thomas/fast-image-cac…

Author: luacmartins

src/CONST.js

@@ -862,8 +862,6 @@ const CONST = {
     },
 
     TFA_CODE_LENGTH: 6,
-
-    CHAT_ATTACHMENT_TOKEN_KEY: 'X-Chat-Attachment-Token',
 };
 
 export default CONST;

src/components/AttachmentModal.js

@@ -115,7 +115,7 @@ class AttachmentModal extends PureComponent {
      * @param {String} sourceURL
      */
     downloadAttachment(sourceURL) {
-        fileDownload(this.props.isAuthTokenRequired ? addEncryptedAuthTokenToURL(sourceURL) : sourceURL, this.props.originalFileName);
+        fileDownload(sourceURL, this.props.originalFileName);
 
         // At ios, if the keyboard is open while opening the attachment, then after downloading
         // the attachment keyboard will show up. So, to fix it we need to dismiss the keyboard.
@@ -229,7 +229,9 @@ class AttachmentModal extends PureComponent {
     }
 
     render() {
-        const sourceURL = this.state.sourceURL;
+        const sourceURL = this.props.isAuthTokenRequired
+            ? addEncryptedAuthTokenToURL(this.state.sourceURL)
+            : this.state.sourceURL;
 
         const {fileName, fileExtension} = FileUtils.splitExtensionFromFileName(this.props.originalFileName || lodashGet(this.state, 'file.name', ''));
 
@@ -264,7 +266,6 @@ class AttachmentModal extends PureComponent {
                     <View style={styles.imageModalImageCenterContainer}>
                         {this.state.sourceURL && (
                             <AttachmentView
-                                isAuthTokenRequired={this.props.isAuthTokenRequired}
                                 sourceURL={sourceURL}
                                 file={this.state.file}
                                 onToggleKeyboard={this.updateConfirmButtonVisibility}

src/components/AttachmentView.js

@@ -12,13 +12,8 @@ import compose from '../libs/compose';
 import Text from './Text';
 import Tooltip from './Tooltip';
 import themeColors from '../styles/themes/default';
-import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
 
 const propTypes = {
-
-    /** Do the urls require an authToken? */
-    isAuthTokenRequired: PropTypes.bool,
-
     /** URL to full-sized attachment */
     sourceURL: PropTypes.string.isRequired,
 
@@ -40,7 +35,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    isAuthTokenRequired: false,
     file: {
         name: '',
     },
@@ -54,12 +48,9 @@ const AttachmentView = (props) => {
     // will appear with a sourceURL that is a blob
     if (Str.isPDF(props.sourceURL)
         || (props.file && Str.isPDF(props.file.name || props.translate('attachmentView.unknownFilename')))) {
-        const sourceURL = props.isAuthTokenRequired
-            ? addEncryptedAuthTokenToURL(props.sourceURL)
-            : props.sourceURL;
         return (
             <PDFView
-                sourceURL={sourceURL}
+                sourceURL={props.sourceURL}
                 style={styles.imageModalPDF}
                 onToggleKeyboard={props.onToggleKeyboard}
             />
@@ -70,7 +61,7 @@ const AttachmentView = (props) => {
     // both PDFs and images will appear as images when pasted into the the text field
     if (Str.isImage(props.sourceURL) || (props.file && Str.isImage(props.file.name))) {
         return (
-            <ImageView url={props.sourceURL} isAuthTokenRequired={props.isAuthTokenRequired} />
+            <ImageView url={props.sourceURL} />
         );
     }
 

src/components/Avatar.js

@@ -1,5 +1,5 @@
 import React, {PureComponent} from 'react';
-import {View} from 'react-native';
+import {Image, View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import stylePropTypes from '../styles/stylePropTypes';
@@ -10,7 +10,6 @@ import * as StyleUtils from '../styles/StyleUtils';
 import * as Expensicons from './Icon/Expensicons';
 import getAvatarDefaultSource from '../libs/getAvatarDefaultSource';
 import styles from '../styles/styles';
-import FastImage from './FastImage';
 
 const propTypes = {
     /** Source for the avatar. Can be a URL or an icon. */
@@ -81,7 +80,7 @@ class Avatar extends PureComponent {
                         </View>
                     )
                     : (
-                        <FastImage
+                        <Image
                             source={{uri: this.props.source}}
                             defaultSource={getAvatarDefaultSource(this.props.source)}
                             style={imageStyle}

src/components/FastImage/index.js

@@ -1,33 +1,20 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {
-    View, Pressable,
+    View, Image, Pressable,
 } from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import FastImage from '../FastImage';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 import canUseTouchScreen from '../../libs/canUseTouchscreen';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import FullscreenLoadingIndicator from '../FullscreenLoadingIndicator';
-import compose from '../../libs/compose';
-import ONYXKEYS from '../../ONYXKEYS';
-import chatAttachmentTokenHeaders from '../../libs/chatAttachmentTokenHeaders';
 
 const propTypes = {
-
-    /** Do the urls require an authToken? */
-    isAuthTokenRequired: PropTypes.bool,
-
     /** URL to full-sized image */
     url: PropTypes.string.isRequired,
     ...windowDimensionsPropTypes,
 };
 
-const defaultProps = {
-    isAuthTokenRequired: false,
-};
-
 class ImageView extends PureComponent {
     constructor(props) {
         super(props);
@@ -36,7 +23,6 @@ class ImageView extends PureComponent {
         this.onContainerLayoutChanged = this.onContainerLayoutChanged.bind(this);
         this.onContainerPressIn = this.onContainerPressIn.bind(this);
         this.onContainerPress = this.onContainerPress.bind(this);
-        this.imageLoad = this.imageLoad.bind(this);
         this.imageLoadingStart = this.imageLoadingStart.bind(this);
         this.imageLoadingEnd = this.imageLoadingEnd.bind(this);
         this.trackMovement = this.trackMovement.bind(this);
@@ -60,6 +46,9 @@ class ImageView extends PureComponent {
     }
 
     componentDidMount() {
+        Image.getSize(this.props.url, (width, height) => {
+            this.setImageRegion(width, height);
+        });
         if (this.canUseTouchScreen) {
             return;
         }
@@ -218,10 +207,6 @@ class ImageView extends PureComponent {
         this.setState(prevState => ({isDragging: prevState.isMouseDown}));
     }
 
-    imageLoad({nativeEvent}) {
-        this.setImageRegion(nativeEvent.width, nativeEvent.height);
-    }
-
     imageLoadingStart() {
         this.setState({isLoading: true});
     }
@@ -231,29 +216,24 @@ class ImageView extends PureComponent {
     }
 
     render() {
-        const headers = this.props.isAuthTokenRequired ? chatAttachmentTokenHeaders() : undefined;
         if (this.canUseTouchScreen) {
             return (
                 <View
                     style={[styles.imageViewContainer, styles.overflowHidden]}
                     onLayout={this.onContainerLayoutChanged}
                 >
-                    <FastImage
-                        source={{
-                            uri: this.props.url,
-                            headers,
-                        }}
+                    <Image
+                        source={{uri: this.props.url}}
                         style={this.state.zoomScale === 0 ? undefined : [
                             styles.w100,
                             styles.h100,
                         ]} // Hide image until zoomScale calculated to prevent showing preview with wrong dimensions.
 
                         // When Image dimensions are lower than the container boundary(zoomscale <= 1), use `contain` to render the image with natural dimensions.
                         // Both `center` and `contain` keeps the image centered on both x and y axis.
-                        resizeMode={this.state.zoomScale > 1 ? FastImage.resizeMode.center : FastImage.resizeMode.contain}
+                        resizeMode={this.state.zoomScale > 1 ? 'center' : 'contain'}
                         onLoadStart={this.imageLoadingStart}
                         onLoadEnd={this.imageLoadingEnd}
-                        onLoad={this.imageLoad}
                     />
                     {this.state.isLoading && (
                         <FullscreenLoadingIndicator
@@ -285,19 +265,15 @@ class ImageView extends PureComponent {
                     onPressIn={this.onContainerPressIn}
                     onPress={this.onContainerPress}
                 >
-                    <FastImage
-                        source={{
-                            uri: this.props.url,
-                            headers,
-                        }}
+                    <Image
+                        source={{uri: this.props.url}}
                         style={this.state.zoomScale === 0 ? undefined : [
                             styles.h100,
                             styles.w100,
                         ]} // Hide image until zoomScale calculated to prevent showing preview with wrong dimensions.
-                        resizeMode={FastImage.resizeMode.contain}
+                        resizeMode="contain"
                         onLoadStart={this.imageLoadingStart}
                         onLoadEnd={this.imageLoadingEnd}
-                        onLoad={this.imageLoad}
                     />
                 </Pressable>
 
@@ -312,7 +288,4 @@ class ImageView extends PureComponent {
 }
 
 ImageView.propTypes = propTypes;
-ImageView.defaultProps = defaultProps;
-export default compose(withWindowDimensions, withOnyx({
-    session: {key: ONYXKEYS.SESSION},
-}))(ImageView);
+export default withWindowDimensions(ImageView);