[shared file view] rewrote with react (#3191)

* rewrote 'file view' with react for audio, document, spreadsheet, svg,
unknown files
* code improvement for 'video' file
* bugfix

frontend/src/components/shared-file-view/shared-file-view-tip.js

@@ -1,7 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 
-const { err } = window.shared.pageOptions;
+const { err, trafficOverLimit } = window.shared.pageOptions;
+
+const propTypes = {
+  errorMsg: PropTypes.string
+};
 
 class SharedFileViewTip extends React.Component {
   render() {
@@ -9,16 +14,21 @@ class SharedFileViewTip extends React.Component {
     if (err == 'File preview unsupported') {
       errorMsg = <p>{gettext('Online view is not applicable to this file format')}</p>;
     } else {
-      errorMsg = <p className="error">{err}</p>;
+      errorMsg = <p className="error">{err || this.props.errorMsg}</p>;
     }
     return (
       <div className="shared-file-view-body">
         <div className="file-view-tip">
           {errorMsg}
+          {!trafficOverLimit &&
+            <a href="?dl=1" className="btn btn-secondary">{gettext('Download')}</a>
+          }
         </div>
       </div>
     );
   }
 }
 
+SharedFileViewTip.propTypes = propTypes;
+
 export default SharedFileViewTip;

frontend/src/components/shared-file-view/shared-file-view.js

@@ -45,7 +45,7 @@ class SharedFileView extends React.Component {
   }
 
   componentDidMount() {
-    if (trafficOverLimit == 'True') {
+    if (trafficOverLimit) {
       toaster.danger(gettext('File download is disabled: the share link traffic of owner is used up.'), {
         duration: 3
       });
@@ -76,7 +76,7 @@ class SharedFileView extends React.Component {
                     onClick={this.handleSaveSharedFileDialog}>{gettext('Save as ...')}
                   </Button>
                 }{' '}
-                {(trafficOverLimit === 'False') &&
+                {!trafficOverLimit &&
                   <Button color="success" className="shared-file-op-btn">
                     <a href="?dl=1">{gettext('Download')}({Utils.bytesToSize(fileSize)})</a>
                   </Button>

frontend/src/shared-file-view-audio.js

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

frontend/src/shared-file-view-document.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { seafileAPI } from './utils/seafile-api';
+import { gettext, mediaUrl} from './utils/constants';
+import SharedFileView from './components/shared-file-view/shared-file-view';
+import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
+import Loading from './components/loading';
+import PDFViewer from './components/pdf-viewer';
+
+import './css/pdf-file-view.css';
+
+const {
+  repoID, filePath, err,
+  commitID, fileType, sharedToken
+} = window.shared.pageOptions;
+
+class SharedFileViewDocument extends React.Component {
+  render() {
+    return <SharedFileView content={<FileContent />} />;
+  }
+}
+
+class FileContent extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: !err,
+      errorMsg: ''
+    };
+  }
+
+  componentDidMount() {
+    if (err) {
+      return;
+    }
+
+    let queryStatus = () => {
+      seafileAPI.queryOfficeFileConvertStatus(repoID, commitID, filePath, fileType.toLowerCase(), sharedToken).then((res) => {
+        const convertStatus = res.data['status'];
+        switch (convertStatus) {
+          case 'PROCESSING':
+            this.setState({
+              isLoading: true
+            });
+            setTimeout(queryStatus, 2000);
+            break;
+          case 'ERROR':
+            this.setState({
+              isLoading: false,
+              errorMsg: gettext('Document convertion failed.')
+            });
+            break;
+          case 'DONE':
+            this.setState({
+              isLoading: false,
+              errorMsg: ''
+            });
+
+            let scriptNode = document.createElement('script');
+            scriptNode.type = 'text/javascript';
+            scriptNode.src = `${mediaUrl}js/pdf/viewer.js`;
+            document.body.append(scriptNode);
+        }
+      }).catch((error) => {
+        if (error.response) {
+          this.setState({
+            isLoading: false,
+            errorMsg: gettext('Document convertion failed.')
+          });
+        } else {
+          this.setState({
+            isLoading: false,
+            errorMsg: gettext('Please check the network.')
+          });
+        }
+      });
+    };
+
+    queryStatus();
+  }
+
+  render() {
+    const { isLoading, errorMsg } = this.state;
+
+    if (err) {
+      return <SharedFileViewTip />;
+    }
+
+    if (isLoading) {
+      return <Loading />;
+    }
+
+    if (errorMsg) {
+      return <SharedFileViewTip errorMsg={errorMsg} />;
+    }
+
+    return (
+      <div className="shared-file-view-body pdf-file-view">
+        <PDFViewer />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render (
+  <SharedFileViewDocument />,
+  document.getElementById('wrapper')
+);

frontend/src/shared-file-view-spreadsheet.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { seafileAPI } from './utils/seafile-api';
+import { siteRoot, gettext } from './utils/constants';
+import SharedFileView from './components/shared-file-view/shared-file-view';
+import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
+import Loading from './components/loading';
+
+import './css/spreadsheet-file-view.css';
+
+const {
+  repoID, filePath, err,
+  commitID, fileType, fileName, sharedToken
+} = window.shared.pageOptions;
+
+class SharedFileViewSpreadsheet extends React.Component {
+  render() {
+    return (
+      <SharedFileView content={<FileContent />} />
+    );
+  }
+}
+
+class FileContent extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: !err,
+      errorMsg: ''
+    };
+  }
+
+  componentDidMount() {
+    if (err) {
+      return;
+    }
+
+    let queryStatus = () => {
+      seafileAPI.queryOfficeFileConvertStatus(repoID, commitID, filePath, fileType.toLowerCase(), sharedToken).then((res) => {
+        const convertStatus = res.data['status'];
+        switch (convertStatus) {
+          case 'QUEUED':
+          case 'PROCESSING':
+            this.setState({
+              isLoading: true
+            });
+            setTimeout(queryStatus, 2000);
+            break;
+          case 'ERROR':
+            this.setState({
+              isLoading: false,
+              errorMsg: gettext('Document convertion failed.')
+            });
+            break;
+          case 'DONE':
+            this.setState({
+              isLoading: false,
+              errorMsg: ''
+            });
+        }
+      }).catch((error) => {
+        if (error.response) {
+          this.setState({
+            isLoading: false,
+            errorMsg: gettext('Document convertion failed.')
+          });
+        } else {
+          this.setState({
+            isLoading: false,
+            errorMsg: gettext('Please check the network.')
+          });
+        }
+      });
+    };
+
+    queryStatus();
+  }
+
+  setIframeHeight = (e) => {
+    const iframe = e.currentTarget;
+    iframe.height = iframe.contentDocument.body.scrollHeight;
+  }
+
+  render() {
+    const { isLoading, errorMsg } = this.state;
+
+    if (err) {
+      return <SharedFileViewTip />;
+    }
+
+    if (isLoading) {
+      return <Loading />;
+    }
+
+    if (errorMsg) {
+      return <SharedFileViewTip errorMsg={errorMsg} />;
+    }
+
+    return (
+      <div className="shared-file-view-body spreadsheet-file-view">
+        <iframe id="spreadsheet-container" title={fileName} src={`${siteRoot}office-convert/static/${repoID}/${commitID}${encodeURIComponent(filePath)}/index.html?token=${sharedToken}`} onLoad={this.setIframeHeight}></iframe>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render (
+  <SharedFileViewSpreadsheet />,
+  document.getElementById('wrapper')
+);

frontend/src/shared-file-view-svg.js

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

frontend/src/shared-file-view-unknown.js

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

frontend/src/shared-file-view-video.js

@@ -1,150 +1,44 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Account from './components/common/account';
-import { gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
-import { Button } from 'reactstrap';
-import { Utils } from './utils/utils';
-import SaveSharedFileDialog from './components/dialog/save-shared-file-dialog';
-import toaster from './components/toast';
+import SharedFileView from './components/shared-file-view/shared-file-view';
+import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
 import VideoPlayer from './components/video-player';
-import watermark from 'watermark-dom';
 
-import './css/shared-file-view.css';
 import './css/video-file-view.css';
 
-let loginUser = window.app.pageOptions.name;
-const { repoID, sharedToken, trafficOverLimit, fileName, fileSize, rawPath, sharedBy, siteName, enableWatermark, download, err } = window.shared.pageOptions;
-
-class SharedFileViewVideo extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      showSaveSharedFileDialog: false
-    };
-  }
-
-  handleSaveSharedFileDialog = () => {
-    this.setState({
-      showSaveSharedFileDialog: true
-    });
-  }
-
-  toggleCancel = () => {
-    this.setState({
-      showSaveSharedFileDialog: false
-    });
-  }
-
-  handleSaveSharedFile = () => {
-    toaster.success(gettext('Successfully saved'), {
-      duration: 3
-    });
-  }
-
-  componentDidMount() {
-    if (trafficOverLimit == 'True') {
-      toaster.danger(gettext('File download is disabled: the share link traffic of owner is used up.'), {
-        duration: 3
-      });
-    }
-  }
-
-  getContent() {
-    if (err) {
-      let errorMsg;
-      if (err == 'File preview unsupported') {
-        errorMsg = <p>{gettext('Online view is not applicable to this file format')}</p>;
-      } else {
-        errorMsg = <p className="error">{err}</p>;
-      }
-      return (
-        <div className="shared-file-view-body">
-          <div className="file-view-tip">
-            {errorMsg}
-          </div>
-        </div>
-      );
-    } else {
-      const videoJsOptions = { 
-        autoplay: false,
-        controls: true,
-        preload: 'auto',
-        sources: [{
-          src: rawPath
-        }]  
-      };
-      return (
-        <div className="shared-file-view-body d-flex text-center">
-          <div className="video-file-view flex-1">
-            <VideoPlayer { ...videoJsOptions } />
-          </div>
-        </div>
-      );
-    }
-  }
+const { rawPath, err } = window.shared.pageOptions;
 
+class SharedFileViewImage extends React.Component {
   render() {
+    return <SharedFileView content={<FileContent />} />;
+  }
+}
+
+class FileContent extends React.Component {
+  render() {
+    if (err) {
+      return <SharedFileViewTip />;
+    }
+
+    const videoJsOptions = {
+      autoplay: false,
+      controls: true,
+      preload: 'auto',
+      sources: [{
+        src: rawPath
+      }]
+    };
     return (
-      <div className="shared-file-view-md">
-        <div className="shared-file-view-md-header d-flex">
-          <React.Fragment>
-            <a href={siteRoot}>
-              <img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" />
-            </a>
-          </React.Fragment>
-          { loginUser && <Account /> }
+      <div className="shared-file-view-body d-flex">
+        <div className="flex-1">
+          <VideoPlayer { ...videoJsOptions } />
         </div>
-        <div className="shared-file-view-md-main">
-          <div className="shared-file-view-head">
-            <div className="float-left">
-              <h2 className="ellipsis" title={fileName}>{fileName}</h2>
-              <p className="share-by ellipsis">{gettext('Shared by:')}{'  '}{sharedBy}</p>
-            </div>
-            {download &&
-              <div className="float-right">
-                {(loginUser && loginUser !== sharedBy) &&
-                  <Button color="secondary" id="save" className="shared-file-op-btn"
-                    onClick={this.handleSaveSharedFileDialog}>{gettext('Save as ...')}
-                  </Button>
-                }{' '}
-                {(trafficOverLimit === 'False') &&
-                  <Button color="success" className="shared-file-op-btn">
-                    <a href="?dl=1">{gettext('Download')}({Utils.bytesToSize(fileSize)})</a>
-                  </Button>
-                }
-              </div>
-            }
-          </div>
-          {this.getContent()}
-        </div>
-        {this.state.showSaveSharedFileDialog &&
-          <SaveSharedFileDialog
-            repoID={repoID}
-            sharedToken={sharedToken}
-            toggleCancel={this.toggleCancel}
-            handleSaveSharedFile={this.handleSaveSharedFile}
-          />
-        }
       </div>
     );
   }
 }
 
-if (enableWatermark) {
-  let watermark_txt;
-  if (loginUser) {
-    watermark_txt = siteName + '  ' + loginUser;
-  } else {
-    watermark_txt = gettext('Anonymous User');
-  }
-  watermark.init({
-    watermark_txt: watermark_txt,
-    watermark_alpha: 0.075
-  });
-}
-
 ReactDOM.render(
-  <SharedFileViewVideo />,
+  <SharedFileViewImage />,
   document.getElementById('wrapper')
 );