Merge pull request #3752 from haiwen/image_thumb_react

image preview thumb react

frontend/src/view-file-image.js

@@ -9,7 +9,7 @@ import './css/image-file-view.css';
 
 const {
   repoID, filePath, err,
-  fileName, previousImage, nextImage, rawPath
+  fileName, previousImage, nextImage, rawPath, thumbnailSizeForOriginal,
 } = window.app.pageOptions;
 
 let previousImageUrl, nextImageUrl; 
@@ -30,6 +30,14 @@ class ViewFileImage extends React.Component {
 
 class FileContent extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      thumbnailError: false,
+    };
+    this.thumbnailSuffixList = ['tiff', 'eps', 'psd'];
+  }
+
   componentDidMount() {
     document.addEventListener('keydown', (e) => {
       if (previousImage && e.keyCode == 37) { // press '<-'
@@ -41,10 +49,20 @@ class FileContent extends React.Component {
     });
   }
 
+  handleError = () => {
+    this.setState({
+      thumbnailError: true
+    });
+  };
+
   render() {
-    if (err) {
+    if (err || this.state.thumbnailError) {
       return <FileViewTip />;
     }
+    let thumbnailUrl = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${Utils.encodePath(filePath)}`;
+    let imageSuffix = fileName.split('.').pop();
+    let isPreviewThumbnail = this.thumbnailSuffixList.includes(imageSuffix);
+
     return (
       <div className="file-view-content flex-1 image-file-view">
         {previousImage && (
@@ -53,7 +71,10 @@ class FileContent extends React.Component {
         {nextImage && (
           <a href={nextImageUrl} id="img-next" title={gettext('you can also press →')}><span className="fas fa-chevron-right"></span></a>
         )}
-        <img src={rawPath} alt={fileName} id="image-view" />
+        {isPreviewThumbnail ?
+          <img src={thumbnailUrl} alt={fileName} id="image-view" onError={this.handleError}/> :
+          <img src={rawPath} alt={fileName} id="image-view"/>
+        }
       </div>
     );
   }