[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>