[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/config/webpack.config.dev.js

@@ -149,31 +149,16 @@ module.exports = {
       require.resolve('react-dev-utils/webpackHotDevClient'),
       paths.appSrc + "/history-trash-file-view.js",
     ],
+    fileView: [
+      require.resolve('./polyfills'),
+      require.resolve('react-dev-utils/webpackHotDevClient'),
+      paths.appSrc + "/file-view.js",
+    ],
     viewFileText: [
       require.resolve('./polyfills'),
       require.resolve('react-dev-utils/webpackHotDevClient'),
       paths.appSrc + "/view-file-text.js",
     ],
-    viewFileImage: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/view-file-image.js",
-    ],
-    viewFileXmind: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/view-file-xmind.js",
-    ],
-    viewFileVideo: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/view-file-video.js",
-    ],
-    viewFilePDF: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/view-file-pdf.js",
-    ],
     viewFileDocument: [
       require.resolve('./polyfills'),
       require.resolve('react-dev-utils/webpackHotDevClient'),
@@ -184,21 +169,6 @@ module.exports = {
       require.resolve('react-dev-utils/webpackHotDevClient'),
       paths.appSrc + "/view-file-spreadsheet.js",
     ],
-    viewFileSVG: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/view-file-svg.js",
-    ],
-    viewFileAudio: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/view-file-audio.js",
-    ],
-    viewFileUnknown: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/view-file-unknown.js",
-    ],
     settings: [
       require.resolve('./polyfills'),
       require.resolve('react-dev-utils/webpackHotDevClient'),

frontend/config/webpack.config.prod.js

@@ -78,16 +78,10 @@ module.exports = {
     sharedFileViewSpreadsheet: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-spreadsheet.js"],
     sharedFileViewUnknown: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-unknown.js"],
     historyTrashFileView: [require.resolve('./polyfills'), paths.appSrc + "/history-trash-file-view.js"],
+    fileView: [require.resolve('./polyfills'), paths.appSrc + "/file-view.js"],
     viewFileText: [require.resolve('./polyfills'), paths.appSrc + "/view-file-text.js"],
-    viewFileImage: [require.resolve('./polyfills'), paths.appSrc + "/view-file-image.js"],
-    viewFileXmind: [require.resolve('./polyfills'), paths.appSrc + "/view-file-xmind.js"],
-    viewFileVideo: [require.resolve('./polyfills'), paths.appSrc + "/view-file-video.js"],
-    viewFilePDF: [require.resolve('./polyfills'), paths.appSrc + "/view-file-pdf.js"],
     viewFileDocument: [require.resolve('./polyfills'), paths.appSrc + "/view-file-document.js"],
     viewFileSpreadsheet: [require.resolve('./polyfills'), paths.appSrc + "/view-file-spreadsheet.js"],
-    viewFileSVG: [require.resolve('./polyfills'), paths.appSrc + "/view-file-svg.js"],
-    viewFileAudio: [require.resolve('./polyfills'), paths.appSrc + "/view-file-audio.js"],
-    viewFileUnknown: [require.resolve('./polyfills'), paths.appSrc + "/view-file-unknown.js"],
     settings: [require.resolve('./polyfills'), paths.appSrc + "/settings.js"],
     repoHistory: [require.resolve('./polyfills'), paths.appSrc + "/repo-history.js"],
     repoSnapshot: [require.resolve('./polyfills'), paths.appSrc + "/repo-snapshot.js"],

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

frontend/src/file-view.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import FileView from './components/file-view/file-view';
+import FileViewTip from './components/file-view/file-view-tip';
+import Image from './components/file-content-view/image';
+import SVG from './components/file-content-view/svg';
+import PDF from './components/file-content-view/pdf';
+import Video from './components/file-content-view/video';
+import Audio from './components/file-content-view/audio';
+
+const {
+  fileType, err
+} = window.app.pageOptions;
+
+class InnerFileView extends React.Component {
+
+  render() {
+    if (err) {
+      return (
+        <FileView content={<FileViewTip />} />
+      );
+    }
+
+    let content;
+    switch (fileType) {
+      case 'Image':
+        content = <Image tip={<FileViewTip />} canUseThumbnail={true} />;
+        break;
+      case 'XMind':
+        content = <Image tip={<FileViewTip />} />;
+        break;
+      case 'SVG': 
+        content = <SVG />;
+        break;
+      case 'PDF': 
+        content = <PDF />;
+        break;
+      case 'Video': 
+        content = <Video />;
+        break;
+      case 'Audio': 
+        content = <Audio />;
+        break;
+    }
+
+    return (
+      <FileView content={content} />
+    );
+  }
+}
+
+ReactDOM.render (
+  <InnerFileView />,
+  document.getElementById('wrapper')
+);

frontend/src/history-trash-file-view.js

@@ -28,7 +28,7 @@ class HistoryTrashFileView extends React.Component {
     let content;
     switch (fileType) {
       case 'Image':
-        content = <Image />;
+        content = <Image tip={<FileViewTip />} />;
         break;
       case 'SVG': 
         content = <SVG />;

frontend/src/view-file-audio.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import FileView from './components/file-view/file-view';
-import FileViewTip from './components/file-view/file-view-tip';
-import AudioPlayer from './components/audio-player';
-
-import './css/audio-file-view.css';
-
-const {
-  err, rawPath
-} = window.app.pageOptions;
-
-class ViewFileAudio extends React.Component {
-  render() {
-    return (
-      <FileView content={<FileContent />} />
-    );
-  }
-}
-
-class FileContent extends React.Component {
-
-  render() {
-    if (err) {
-      return <FileViewTip />;
-    }
-
-    const videoJsOptions = {
-      autoplay: false,
-      controls: true,
-      preload: 'auto',
-      sources: [{
-        src: rawPath
-      }]
-    };
-    return (
-      <div className="file-view-content flex-1 audio-file-view">
-        <AudioPlayer { ...videoJsOptions } />
-      </div>
-    );
-  }
-}
-
-ReactDOM.render (
-  <ViewFileAudio />,
-  document.getElementById('wrapper')
-);

frontend/src/view-file-image.js

@@ -1,86 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Utils } from './utils/utils';
-import { gettext, siteRoot } from './utils/constants';
-import FileView from './components/file-view/file-view';
-import FileViewTip from './components/file-view/file-view-tip';
-
-import './css/image-file-view.css';
-
-const {
-  repoID, filePath, err,
-  fileName, previousImage, nextImage, rawPath, thumbnailSizeForOriginal,
-} = window.app.pageOptions;
-
-let previousImageUrl, nextImageUrl; 
-if (previousImage) {
-  previousImageUrl = `${siteRoot}lib/${repoID}/file${Utils.encodePath(previousImage)}`;
-}
-if (nextImage) {
-  nextImageUrl = `${siteRoot}lib/${repoID}/file${Utils.encodePath(nextImage)}`;
-}
-
-class ViewFileImage extends React.Component {
-  render() {
-    return (
-      <FileView content={<FileContent />} />
-    );
-  }
-}
-
-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 '<-'
-        location.href = previousImageUrl;
-      }
-      if (nextImage && e.keyCode == 39) { // press '->'
-        location.href = nextImageUrl;
-      }
-    });
-  }
-
-  handleError = () => {
-    this.setState({
-      thumbnailError: true
-    });
-  };
-
-  render() {
-    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 && (
-          <a href={previousImageUrl} id="img-prev" title={gettext('you can also press ← ')}><span className="fas fa-chevron-left"></span></a>
-        )}
-        {nextImage && (
-          <a href={nextImageUrl} id="img-next" title={gettext('you can also press →')}><span className="fas fa-chevron-right"></span></a>
-        )}
-        {isPreviewThumbnail ?
-          <img src={thumbnailUrl} alt={fileName} id="image-view" onError={this.handleError}/> :
-          <img src={rawPath} alt={fileName} id="image-view"/>
-        }
-      </div>
-    );
-  }
-}
-
-ReactDOM.render (
-  <ViewFileImage />,
-  document.getElementById('wrapper')
-);

frontend/src/view-file-pdf.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import FileView from './components/file-view/file-view';
-import FileViewTip from './components/file-view/file-view-tip';
-import PDFViewer from './components/pdf-viewer';
-
-import './css/pdf-file-view.css';
-
-const { err } = window.app.pageOptions;
-
-class ViewFilePDF extends React.Component {
-  render() {
-    return (
-      <FileView content={<FileContent />} />
-    );
-  }
-}
-
-class FileContent extends React.Component {
-  render() {
-    if (err) {
-      return <FileViewTip />;
-    }
-
-    return (
-      <div className="file-view-content flex-1 pdf-file-view">
-        <PDFViewer />
-      </div>
-    );
-  }
-}
-
-ReactDOM.render (
-  <ViewFilePDF />,
-  document.getElementById('wrapper')
-);

frontend/src/view-file-svg.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import FileView from './components/file-view/file-view';
-import FileViewTip from './components/file-view/file-view-tip';
-
-import './css/svg-file-view.css';
-
-const {
-  err, fileName, rawPath
-} = window.app.pageOptions;
-
-class ViewFileSVG extends React.Component {
-  render() {
-    return (
-      <FileView content={<FileContent />} />
-    );
-  }
-}
-
-class FileContent extends React.Component {
-  render() {
-    if (err) {
-      return <FileViewTip />;
-    }
-    return (
-      <div className="file-view-content flex-1 svg-file-view">
-        <img src={rawPath} alt={fileName} id="svg-view" />
-      </div>
-    );
-  }
-}
-
-ReactDOM.render (
-  <ViewFileSVG />,
-  document.getElementById('wrapper')
-);

frontend/src/view-file-unknown.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import FileView from './components/file-view/file-view';
-import FileViewTip from './components/file-view/file-view-tip';
-
-const { err } = window.app.pageOptions;
-
-class ViewFileUnknown extends React.Component {
-  render() {
-    return (
-      <FileView content={<FileContent />} />
-    );
-  }
-}
-
-class FileContent extends React.Component {
-  render() {
-    if (err) {
-      return <FileViewTip />;
-    }
-  }
-}
-
-ReactDOM.render (
-  <ViewFileUnknown />,
-  document.getElementById('wrapper')
-);

frontend/src/view-file-video.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import FileView from './components/file-view/file-view';
-import FileViewTip from './components/file-view/file-view-tip';
-import VideoPlayer from './components/video-player';
-
-import './css/video-file-view.css';
-
-const {
-  err, rawPath
-} = window.app.pageOptions;
-
-class ViewFileVideo extends React.Component {
-  render() {
-    return (
-      <FileView content={<FileContent />} />
-    );
-  }
-}
-
-class FileContent extends React.Component {
-
-  render() {
-    if (err) {
-      return <FileViewTip />;
-    }
-
-    const videoJsOptions = {
-      autoplay: false,
-      controls: true,
-      preload: 'auto',
-      sources: [{
-        src: rawPath
-      }]
-    };
-    return (
-      <div className="file-view-content flex-1 video-file-view">
-        <VideoPlayer { ...videoJsOptions } />
-      </div>
-    );
-  }
-}
-
-ReactDOM.render (
-  <ViewFileVideo />,
-  document.getElementById('wrapper')
-);

frontend/src/view-file-xmind.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { siteRoot } from './utils/constants';
-import FileView from './components/file-view/file-view';
-import FileViewTip from './components/file-view/file-view-tip';
-
-import './css/image-file-view.css';
-
-const { err, fileName, xmindImageSrc } = window.app.pageOptions;
-
-class ViewFileXmind extends React.Component {
-  render() {
-    return (
-      <FileView content={<FileContent />} />
-    );
-  }
-}
-
-class FileContent extends React.Component {
-  render() {
-    if (err) {
-      return <FileViewTip />;
-    }
-    return (
-      <div className="file-view-content flex-1 image-file-view">
-        <img src={`${siteRoot}${xmindImageSrc}`} alt={fileName} id="image-view" />
-      </div>
-    );
-  }
-}
-
-ReactDOM.render (
-  <ViewFileXmind />,
-  document.getElementById('wrapper')
-);

seahub/templates/audio_file_view_react.html

@@ -1,15 +0,0 @@
-{% extends 'file_view_react.html' %}
-{% load render_bundle from webpack_loader %}
-{% load seahub_tags %}
-
-{% block extra_style %}
-{% render_bundle 'viewFileAudio' 'css' %}
-{% endblock %}
-
-{% block extra_data %}
-  rawPath: '{{ raw_path|escapejs }}'
-{% endblock %}
-
-{% block render_bundle %}
-{% render_bundle 'viewFileAudio' 'js' %}
-{% endblock %}

seahub/templates/common_file_view_react.html

@@ -0,0 +1,37 @@
+{% extends 'file_view_react.html' %}
+{% load render_bundle from webpack_loader %}
+{% load seahub_tags %}
+
+{% block extra_style %}
+{% if filetype == 'PDF' %}
+<link rel="resource" type="application/l10n" href="{{ MEDIA_URL }}js/pdf/locale/locale.properties" />
+{% endif %}
+{% render_bundle 'fileView' 'css' %}
+{% endblock %}
+
+{% block extra_data %}
+{% if filetype == 'Image' %}
+// img_prev && img_next can be path or None
+previousImage: {% if img_prev %}'{{ img_prev|escapejs }}'{% else %}false{% endif %},
+nextImage: {% if img_next %}'{{ img_next|escapejs }}'{% else %}false{% endif %},
+fileExt: '{{ fileext|escapejs }}',
+thumbnailSizeForOriginal: {{ thumbnail_size_for_original }},
+{% endif %}
+{% if filetype == 'XMind' %}
+xmindImageSrc: '{{ xmind_image_src|escapejs }}',
+{% endif %}
+rawPath: '{{ raw_path|escapejs }}'
+{% endblock %}
+
+{% block render_bundle %}
+{% render_bundle 'fileView' 'js' %}
+{% if filetype == 'PDF' %}
+<script type="text/javascript">
+  var sf_file_url = '{{ raw_path|escapejs }}';
+  var sf_pdfworkerjs_url = '{{MEDIA_URL}}js/pdf/pdf.worker.min.js';
+  var sf_pdf_images_path = '{{MEDIA_URL}}js/pdf/images/';
+</script>
+<script type="text/javascript" src="{{MEDIA_URL}}js/pdf/pdf.min.js"></script>
+<script type="text/javascript" src="{{MEDIA_URL}}js/pdf/viewer.js"></script>
+{% endif %}
+{% endblock %}

seahub/templates/file_view_react.html

@@ -16,7 +16,6 @@ window.app.pageOptions = {
   shareLinkExpireDaysDefault: {{ share_link_expire_days_default }},
   shareLinkExpireDaysMin: {{ share_link_expire_days_min }},
   shareLinkExpireDaysMax: {{ share_link_expire_days_max }},
-  thumbnailSizeForOriginal: {{ thumbnail_size_for_original }},
 
   // for all types of files
   fileName: '{{ filename|escapejs }}',

seahub/templates/image_file_view_react.html

@@ -1,18 +0,0 @@
-{% extends 'file_view_react.html' %}
-{% load render_bundle from webpack_loader %}
-{% load seahub_tags %}
-
-{% block extra_style %}
-{% render_bundle 'viewFileImage' 'css' %}
-{% endblock %}
-
-{% block extra_data %}
-  // img_prev && img_next can be path or None
-  previousImage: {% if img_prev %}'{{ img_prev|escapejs }}'{% else %}false{% endif %},
-  nextImage: {% if img_next %}'{{ img_next|escapejs }}'{% else %}false{% endif %},
-  rawPath: '{{ raw_path|escapejs }}'
-{% endblock %}
-
-{% block render_bundle %}
-{% render_bundle 'viewFileImage' 'js' %}
-{% endblock %}

seahub/templates/pdf_file_view_react.html

@@ -1,23 +0,0 @@
-{% extends 'file_view_react.html' %}
-{% load render_bundle from webpack_loader %}
-{% load seahub_tags %}
-
-{% block extra_style %}
-<link rel="resource" type="application/l10n" href="{{ MEDIA_URL }}js/pdf/locale/locale.properties" />
-{% render_bundle 'viewFilePDF' 'css' %}
-{% endblock %}
-
-{% block extra_data %}
-  rawPath: '{{ raw_path|escapejs }}'
-{% endblock %}
-
-{% block render_bundle %}
-{% render_bundle 'viewFilePDF' 'js' %}
-<script type="text/javascript">
-var sf_file_url = '{{ raw_path|escapejs }}';
-var sf_pdfworkerjs_url = '{{MEDIA_URL}}js/pdf/pdf.worker.min.js';
-var sf_pdf_images_path = '{{MEDIA_URL}}js/pdf/images/';
-</script>
-<script type="text/javascript" src="{{MEDIA_URL}}js/pdf/pdf.min.js"></script>
-<script type="text/javascript" src="{{MEDIA_URL}}js/pdf/viewer.js"></script>
-{% endblock %}

seahub/templates/svg_file_view_react.html

@@ -1,15 +0,0 @@
-{% extends 'file_view_react.html' %}
-{% load render_bundle from webpack_loader %}
-{% load seahub_tags %}
-
-{% block extra_style %}
-{% render_bundle 'viewFileSVG' 'css' %}
-{% endblock %}
-
-{% block extra_data %}
-  rawPath: '{{ raw_path|escapejs }}'
-{% endblock %}
-
-{% block render_bundle %}
-{% render_bundle 'viewFileSVG' 'js' %}
-{% endblock %}

seahub/templates/unknown_file_view_react.html

@@ -1,14 +0,0 @@
-{% extends 'file_view_react.html' %}
-{% load render_bundle from webpack_loader %}
-{% load seahub_tags %}
-
-{% block extra_style %}
-{% render_bundle 'viewFileUnknown' 'css' %}
-{% endblock %}
-
-{% block extra_data %}
-{% endblock %}
-
-{% block render_bundle %}
-{% render_bundle 'viewFileUnknown' 'js' %}
-{% endblock %}

seahub/templates/video_file_view_react.html

@@ -1,15 +0,0 @@
-{% extends 'file_view_react.html' %}
-{% load render_bundle from webpack_loader %}
-{% load seahub_tags %}
-
-{% block extra_style %}
-{% render_bundle 'viewFileVideo' 'css' %}
-{% endblock %}
-
-{% block extra_data %}
-  rawPath: '{{ raw_path|escapejs }}'
-{% endblock %}
-
-{% block render_bundle %}
-{% render_bundle 'viewFileVideo' 'js' %}
-{% endblock %}

seahub/templates/xmind_file_view_react.html

@@ -1,15 +0,0 @@
-{% extends 'file_view_react.html' %}
-{% load render_bundle from webpack_loader %}
-{% load seahub_tags %}
-
-{% block extra_style %}
-{% render_bundle 'viewFileXmind' 'css' %}
-{% endblock %}
-
-{% block extra_data %}
-  xmindImageSrc: '{{ xmind_image_src|escapejs }}'
-{% endblock %}
-
-{% block render_bundle %}
-{% render_bundle 'viewFileXmind' 'js' %}
-{% endblock %}

seahub/utils/__init__.py

@@ -125,7 +125,7 @@ EMPTY_SHA1 = '0000000000000000000000000000000000000000'
 MAX_INT = 2147483647
 
 PREVIEW_FILEEXT = {
-    IMAGE: ('gif', 'jpeg', 'jpg', 'png', 'ico', 'bmp', 'tif', 'tiff', 'eps', 'psd'),
+    IMAGE: ('gif', 'jpeg', 'jpg', 'png', 'ico', 'bmp', 'tif', 'tiff', 'psd'),
     DOCUMENT: ('doc', 'docx', 'ppt', 'pptx', 'odt', 'fodt', 'odp', 'fodp'),
     SPREADSHEET: ('xls', 'xlsx', 'ods', 'fods'),
     SVG: ('svg',),

seahub/views/file.py

@@ -531,7 +531,6 @@ def view_lib_file(request, repo_id, path):
         'share_link_expire_days_max': SHARE_LINK_EXPIRE_DAYS_MAX,
         'can_download_file': parse_repo_perm(permission).can_download,
         'seafile_collab_server': SEAFILE_COLLAB_SERVER,
-        'thumbnail_size_for_original': settings.THUMBNAIL_SIZE_FOR_ORIGINAL,
     }
 
     # check whether file is starred
@@ -607,6 +606,9 @@ def view_lib_file(request, repo_id, path):
     # template = 'view_file_%s.html' % filetype.lower()
     template = '%s_file_view_react.html' % filetype.lower()
 
+    if filetype in (IMAGE, VIDEO, AUDIO, PDF, SVG, XMIND, 'Unknown'):
+        template = 'common_file_view_react.html'
+
     if filetype == TEXT or fileext in get_conf_text_ext():
 
         # get file size