[file view] rewrote it (#3820)

* [file view] rewrote it

* fixup for tiff/tif/psd file view
* handled tiff/tif/psd history/trash file view

* [file view] rewrote it for xmind file

* [file view] rewrote it for 'Unknown' files

frontend/src/components/file-content-view/image.js

@@ -5,8 +5,11 @@ import { gettext, siteRoot } from '../../utils/constants';
 import '../../css/image-file-view.css';
 
 const {
-  repoID,
-  fileName, previousImage, nextImage, rawPath
+  repoID, repoEncrypted,
+  fileExt, filePath, fileName,
+  thumbnailSizeForOriginal,
+  previousImage, nextImage, rawPath,
+  xmindImageSrc // for xmind file
 } = window.app.pageOptions;
 
 let previousImageUrl, nextImageUrl; 
@@ -19,6 +22,13 @@ if (nextImage) {
 
 class FileContent extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      loadFailed: false
+    };
+  }
+
   componentDidMount() {
     document.addEventListener('keydown', (e) => {
       if (previousImage && e.keyCode == 37) { // press '<-'
@@ -30,7 +40,28 @@ class FileContent extends React.Component {
     });
   }
 
+  handleLoadFailure = () => {
+    this.setState({
+      loadFailed: true
+    });
+  }
+
   render() {
+    if (this.state.loadFailed) {
+      return this.props.tip;
+    }
+
+    // request thumbnails for some files
+    // only for 'file view'. not for 'history/trash file view'
+    let thumbnailURL = '';
+    const fileExtList = ['tif', 'tiff', 'psd'];
+    if (this.props.canUseThumbnail && !repoEncrypted && fileExtList.includes(fileExt)) {
+      thumbnailURL = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${Utils.encodePath(filePath)}`;
+    }
+
+    // for xmind file
+    const xmindSrc = xmindImageSrc ? `${siteRoot}${xmindImageSrc}` : '';
+
     return (
       <div className="file-view-content flex-1 image-file-view">
         {previousImage && (
@@ -39,7 +70,7 @@ 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" />
+        <img src={xmindSrc || thumbnailURL || rawPath} alt={fileName} id="image-view" onError={this.handleLoadFailure} />
       </div>
     );
   }