[file view] code improvement (#3180)

* added component 'file-view.js'

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import watermark from 'watermark-dom';
+import { seafileAPI } from '../../utils/seafile-api';
+import { siteName } from '../../utils/constants';
+import FileInfo from './file-info';
+import FileToolbar from './file-toolbar';
+import CommentPanel from './comment-panel';
+
+import '../../css/file-view.css';
+
+const propTypes = {
+  content: PropTypes.object.isRequired
+};
+
+const { isStarred, isLocked, lockedByMe,
+  repoID, filePath, enableWatermark, userNickName
+} = window.app.pageOptions;
+
+class FileView extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isStarred: isStarred,
+      isLocked: isLocked,
+      lockedByMe: lockedByMe,
+      isCommentPanelOpen: false
+    };
+  }
+
+  toggleCommentPanel = () => {
+    this.setState({
+      isCommentPanelOpen: !this.state.isCommentPanelOpen
+    });
+  }
+
+  toggleStar = () => {
+    if (this.state.isStarred) {
+      seafileAPI.unStarItem(repoID, filePath).then((res) => {
+        this.setState({
+          isStarred: false
+        });
+      });
+    } else {
+      seafileAPI.starItem(repoID, filePath).then((res) => {
+        this.setState({
+          isStarred: true
+        });
+      });
+    }
+  }
+
+  toggleLockFile = () => {
+    if (this.state.isLocked) {
+      seafileAPI.unlockfile(repoID, filePath).then((res) => {
+        this.setState({
+          isLocked: false, 
+          lockedByMe: false 
+        });
+      });
+    } else {
+      seafileAPI.lockfile(repoID, filePath).then((res) => {
+        this.setState({
+          isLocked: true,
+          lockedByMe: true
+        });
+      });
+    }    
+  }
+
+  render() {
+    return (
+      <div className="h-100 d-flex flex-column">
+        <div className="file-view-header d-flex justify-content-between">
+          <FileInfo
+            isStarred={this.state.isStarred}
+            isLocked={this.state.isLocked}
+            toggleStar={this.toggleStar}
+          />
+          <FileToolbar 
+            isLocked={this.state.isLocked}
+            lockedByMe={this.state.lockedByMe}
+            toggleLockFile={this.toggleLockFile}
+            toggleCommentPanel={this.toggleCommentPanel}
+          />
+        </div>
+        <div className="file-view-body flex-auto d-flex">
+          {this.props.content}
+          {this.state.isCommentPanelOpen &&
+            <CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+if (enableWatermark) {
+  watermark.init({
+    watermark_txt: `${siteName} ${userNickName}`,
+    watermark_alpha: 0.075
+  });
+}
+
+FileView.propTypes = propTypes;
+
+export default FileView;

frontend/src/view-file-audio.js

@@ -1,98 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import watermark from 'watermark-dom';
-import { seafileAPI } from './utils/seafile-api';
-import { siteName } from './utils/constants';
-import FileInfo from './components/file-view/file-info';
-import FileToolbar from './components/file-view/file-toolbar';
+import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
-import CommentPanel from './components/file-view/comment-panel';
 import AudioPlayer from './components/audio-player';
 
-import './css/file-view.css';
 import './css/audio-file-view.css';
 
-const { isStarred, isLocked, lockedByMe,
-  repoID, filePath, err, enableWatermark, userNickName,
-  // the following are only for this type of file view
-  rawPath
+const {
+  err, rawPath
 } = window.app.pageOptions;
 
 class ViewFileAudio extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isStarred: isStarred,
-      isLocked: isLocked,
-      lockedByMe: lockedByMe,
-      isCommentPanelOpen: false
-    };
-  }
-
-  toggleCommentPanel = () => {
-    this.setState({
-      isCommentPanelOpen: !this.state.isCommentPanelOpen
-    });
-  }
-
-  toggleStar = () => {
-    if (this.state.isStarred) {
-      seafileAPI.unStarItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: false
-        });
-      });
-    } else {
-      seafileAPI.starItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: true
-        });
-      });
-    }
-  }
-
-  toggleLockFile = () => {
-    if (this.state.isLocked) {
-      seafileAPI.unlockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: false, 
-          lockedByMe: false 
-        });
-      });
-    } else {
-      seafileAPI.lockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: true,
-          lockedByMe: true
-        });
-      });
-    }    
-  }
-
   render() {
     return (
-      <div className="h-100 d-flex flex-column">
-        <div className="file-view-header d-flex justify-content-between">
-          <FileInfo
-            isStarred={this.state.isStarred}
-            isLocked={this.state.isLocked}
-            toggleStar={this.toggleStar}
-          />
-          <FileToolbar 
-            isLocked={this.state.isLocked}
-            lockedByMe={this.state.lockedByMe}
-            toggleLockFile={this.toggleLockFile}
-            toggleCommentPanel={this.toggleCommentPanel}
-          />
-        </div>
-        <div className="file-view-body flex-auto d-flex">
-          <FileContent />
-          {this.state.isCommentPanelOpen &&
-            <CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
-          }
-        </div>
-      </div>
+      <FileView content={<FileContent />} />
     );
   }
 }
@@ -120,13 +41,6 @@ class FileContent extends React.Component {
   }
 }
 
-if (enableWatermark) {
-  watermark.init({
-    watermark_txt: `${siteName} ${userNickName}`,
-    watermark_alpha: 0.075
-  });
-}
-
 ReactDOM.render (
   <ViewFileAudio />,
   document.getElementById('wrapper')

frontend/src/view-file-document.js

@@ -1,99 +1,23 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import watermark from 'watermark-dom';
 import { seafileAPI } from './utils/seafile-api';
-import { siteName, gettext, mediaUrl} from './utils/constants';
-import FileInfo from './components/file-view/file-info';
-import FileToolbar from './components/file-view/file-toolbar';
+import { gettext, mediaUrl} from './utils/constants';
+import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
-import CommentPanel from './components/file-view/comment-panel';
 import Loading from './components/loading';
 import PDFViewer from './components/pdf-viewer';
 
-import './css/file-view.css';
 import './css/pdf-file-view.css';
 
-const { isStarred, isLocked, lockedByMe,
-  repoID, filePath, err, enableWatermark, userNickName,
-  // the following are only for this type of file view
+const {
+  repoID, filePath, err,
   commitID, fileType
 } = window.app.pageOptions;
 
 class ViewFileDocument extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isStarred: isStarred,
-      isLocked: isLocked,
-      lockedByMe: lockedByMe,
-      isCommentPanelOpen: false
-    };
-  }
-
-  toggleCommentPanel = () => {
-    this.setState({
-      isCommentPanelOpen: !this.state.isCommentPanelOpen
-    });
-  }
-
-  toggleStar = () => {
-    if (this.state.isStarred) {
-      seafileAPI.unStarItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: false
-        });
-      });
-    } else {
-      seafileAPI.starItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: true
-        });
-      });
-    }
-  }
-
-  toggleLockFile = () => {
-    if (this.state.isLocked) {
-      seafileAPI.unlockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: false, 
-          lockedByMe: false 
-        });
-      });
-    } else {
-      seafileAPI.lockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: true,
-          lockedByMe: true
-        });
-      });
-    }    
-  }
-
   render() {
     return (
-      <div className="h-100 d-flex flex-column">
-        <div className="file-view-header d-flex justify-content-between">
-          <FileInfo
-            isStarred={this.state.isStarred}
-            isLocked={this.state.isLocked}
-            toggleStar={this.toggleStar}
-          />
-          <FileToolbar 
-            isLocked={this.state.isLocked}
-            lockedByMe={this.state.lockedByMe}
-            toggleLockFile={this.toggleLockFile}
-            toggleCommentPanel={this.toggleCommentPanel}
-          />
-        </div>
-        <div className="file-view-body flex-auto d-flex">
-          <FileContent />
-          {this.state.isCommentPanelOpen &&
-            <CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
-          }
-        </div>
-      </div>
+      <FileView content={<FileContent />} />
     );
   }
 }
@@ -182,13 +106,6 @@ class FileContent extends React.Component {
   }
 }
 
-if (enableWatermark) {
-  watermark.init({
-    watermark_txt: `${siteName} ${userNickName}`,
-    watermark_alpha: 0.075
-  });
-}
-
 ReactDOM.render (
   <ViewFileDocument />,
   document.getElementById('wrapper')

frontend/src/view-file-image.js

@@ -1,20 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import watermark from 'watermark-dom';
-import { seafileAPI } from './utils/seafile-api';
 import { Utils } from './utils/utils';
-import { gettext, siteRoot, siteName } from './utils/constants';
-import FileInfo from './components/file-view/file-info';
-import FileToolbar from './components/file-view/file-toolbar';
+import { gettext, siteRoot } from './utils/constants';
+import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
-import CommentPanel from './components/file-view/comment-panel';
 
-import './css/file-view.css';
 import './css/image-file-view.css';
 
-const { isStarred, isLocked, lockedByMe,
-  repoID, filePath, err, enableWatermark, userNickName,
-  // the following are only for image file view
+const {
+  repoID, filePath, err,
   fileName, previousImage, nextImage, rawPath
 } = window.app.pageOptions;
 
@@ -27,16 +21,14 @@ if (nextImage) {
 }
 
 class ViewFileImage extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isStarred: isStarred,
-      isLocked: isLocked,
-      lockedByMe: lockedByMe,
-      isCommentPanelOpen: false
-    };
+  render() {
+    return (
+      <FileView content={<FileContent />} />
+    );
   }
+}
+
+class FileContent extends React.Component {
 
   componentDidMount() {
     document.addEventListener('keydown', (e) => {
@@ -49,75 +41,6 @@ class ViewFileImage extends React.Component {
     });
   }
 
-  toggleCommentPanel = () => {
-    this.setState({
-      isCommentPanelOpen: !this.state.isCommentPanelOpen
-    });
-  }
-
-  toggleStar = () => {
-    if (this.state.isStarred) {
-      seafileAPI.unStarItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: false
-        });
-      });
-    } else {
-      seafileAPI.starItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: true
-        });
-      });
-    }
-  }
-
-  toggleLockFile = () => {
-    if (this.state.isLocked) {
-      seafileAPI.unlockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: false, 
-          lockedByMe: false 
-        });
-      });
-    } else {
-      seafileAPI.lockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: true,
-          lockedByMe: true
-        });
-      });
-    }    
-  }
-
-  render() {
-    return (
-      <div className="h-100 d-flex flex-column">
-        <div className="file-view-header d-flex justify-content-between">
-          <FileInfo
-            isStarred={this.state.isStarred}
-            isLocked={this.state.isLocked}
-            toggleStar={this.toggleStar}
-          />
-          <FileToolbar 
-            isLocked={this.state.isLocked}
-            lockedByMe={this.state.lockedByMe}
-            toggleLockFile={this.toggleLockFile}
-            toggleCommentPanel={this.toggleCommentPanel}
-          />
-        </div>
-        <div className="file-view-body flex-auto d-flex">
-          <FileContent />
-          {this.state.isCommentPanelOpen &&
-            <CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
-          }
-        </div>
-      </div>
-    );
-  }
-}
-
-class FileContent extends React.Component {
-
   render() {
     if (err) {
       return <FileViewTip />;
@@ -136,13 +59,6 @@ class FileContent extends React.Component {
   }
 }
 
-if (enableWatermark) {
-  watermark.init({
-    watermark_txt: `${siteName} ${userNickName}`,
-    watermark_alpha: 0.075
-  });
-}
-
 ReactDOM.render (
   <ViewFileImage />,
   document.getElementById('wrapper')

frontend/src/view-file-pdf.js

@@ -1,104 +1,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import watermark from 'watermark-dom';
-import { seafileAPI } from './utils/seafile-api';
-import { siteName } from './utils/constants';
-import FileInfo from './components/file-view/file-info';
-import FileToolbar from './components/file-view/file-toolbar';
+import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
-import CommentPanel from './components/file-view/comment-panel';
 import PDFViewer from './components/pdf-viewer';
 
-import './css/file-view.css';
 import './css/pdf-file-view.css';
 
-const { isStarred, isLocked, lockedByMe,
-  repoID, filePath, err, enableWatermark, userNickName,
-  // the following are only for this type of file view
-  rawPath
-} = window.app.pageOptions;
+const { err } = window.app.pageOptions;
 
 class ViewFilePDF extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isStarred: isStarred,
-      isLocked: isLocked,
-      lockedByMe: lockedByMe,
-      isCommentPanelOpen: false
-    };
-  }
-
-  toggleCommentPanel = () => {
-    this.setState({
-      isCommentPanelOpen: !this.state.isCommentPanelOpen
-    });
-  }
-
-  toggleStar = () => {
-    if (this.state.isStarred) {
-      seafileAPI.unStarItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: false
-        });
-      });
-    } else {
-      seafileAPI.starItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: true
-        });
-      });
-    }
-  }
-
-  toggleLockFile = () => {
-    if (this.state.isLocked) {
-      seafileAPI.unlockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: false, 
-          lockedByMe: false 
-        });
-      });
-    } else {
-      seafileAPI.lockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: true,
-          lockedByMe: true
-        });
-      });
-    }    
-  }
-
   render() {
     return (
-      <div className="h-100 d-flex flex-column">
-        <div className="file-view-header d-flex justify-content-between">
-          <FileInfo
-            isStarred={this.state.isStarred}
-            isLocked={this.state.isLocked}
-            toggleStar={this.toggleStar}
-          />
-          <FileToolbar 
-            isLocked={this.state.isLocked}
-            lockedByMe={this.state.lockedByMe}
-            toggleLockFile={this.toggleLockFile}
-            toggleCommentPanel={this.toggleCommentPanel}
-          />
-        </div>
-        <div className="file-view-body flex-auto d-flex">
-          <FileContent />
-          {this.state.isCommentPanelOpen &&
-            <CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
-          }
-        </div>
-      </div>
+      <FileView content={<FileContent />} />
     );
   }
 }
 
 class FileContent extends React.Component {
-
   render() {
     if (err) {
       return <FileViewTip />;
@@ -112,13 +30,6 @@ class FileContent extends React.Component {
   }
 }
 
-if (enableWatermark) {
-  watermark.init({
-    watermark_txt: `${siteName} ${userNickName}`,
-    watermark_alpha: 0.075
-  });
-}
-
 ReactDOM.render (
   <ViewFilePDF />,
   document.getElementById('wrapper')

frontend/src/view-file-spreadsheet.js

@@ -1,98 +1,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import watermark from 'watermark-dom';
 import { seafileAPI } from './utils/seafile-api';
-import { siteRoot, siteName, gettext } from './utils/constants';
-import FileInfo from './components/file-view/file-info';
-import FileToolbar from './components/file-view/file-toolbar';
+import { siteRoot, gettext } from './utils/constants';
+import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
-import CommentPanel from './components/file-view/comment-panel';
 import Loading from './components/loading';
 
-import './css/file-view.css';
 import './css/spreadsheet-file-view.css';
 
-const { isStarred, isLocked, lockedByMe,
-  repoID, filePath, err, enableWatermark, userNickName,
-  // the following are only for this type of file view
+const {
+  repoID, filePath, err,
   commitID, fileType, fileName
 } = window.app.pageOptions;
 
 class ViewFileSpreadsheet extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isStarred: isStarred,
-      isLocked: isLocked,
-      lockedByMe: lockedByMe,
-      isCommentPanelOpen: false
-    };
-  }
-
-  toggleCommentPanel = () => {
-    this.setState({
-      isCommentPanelOpen: !this.state.isCommentPanelOpen
-    });
-  }
-
-  toggleStar = () => {
-    if (this.state.isStarred) {
-      seafileAPI.unStarItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: false
-        });
-      });
-    } else {
-      seafileAPI.starItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: true
-        });
-      });
-    }
-  }
-
-  toggleLockFile = () => {
-    if (this.state.isLocked) {
-      seafileAPI.unlockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: false, 
-          lockedByMe: false 
-        });
-      });
-    } else {
-      seafileAPI.lockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: true,
-          lockedByMe: true
-        });
-      });
-    }    
-  }
-
   render() {
     return (
-      <div className="h-100 d-flex flex-column">
-        <div className="file-view-header d-flex justify-content-between">
-          <FileInfo
-            isStarred={this.state.isStarred}
-            isLocked={this.state.isLocked}
-            toggleStar={this.toggleStar}
-          />
-          <FileToolbar 
-            isLocked={this.state.isLocked}
-            lockedByMe={this.state.lockedByMe}
-            toggleLockFile={this.toggleLockFile}
-            toggleCommentPanel={this.toggleCommentPanel}
-          />
-        </div>
-        <div className="file-view-body flex-auto d-flex">
-          <FileContent />
-          {this.state.isCommentPanelOpen &&
-            <CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
-          }
-        </div>
-      </div>
+      <FileView content={<FileContent />} />
     );
   }
 }
@@ -181,13 +105,6 @@ class FileContent extends React.Component {
   }
 }
 
-if (enableWatermark) {
-  watermark.init({
-    watermark_txt: `${siteName} ${userNickName}`,
-    watermark_alpha: 0.075
-  });
-}
-
 ReactDOM.render (
   <ViewFileSpreadsheet />,
   document.getElementById('wrapper')

frontend/src/view-file-svg.js

@@ -1,103 +1,23 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import watermark from 'watermark-dom';
-import { seafileAPI } from './utils/seafile-api';
-import { siteName } from './utils/constants';
-import FileInfo from './components/file-view/file-info';
-import FileToolbar from './components/file-view/file-toolbar';
+import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
-import CommentPanel from './components/file-view/comment-panel';
 
-import './css/file-view.css';
 import './css/svg-file-view.css';
 
-const { isStarred, isLocked, lockedByMe,
-  repoID, filePath, err, enableWatermark, userNickName,
-  // the following are only for svg file view
-  fileName, rawPath
+const {
+  err, fileName, rawPath
 } = window.app.pageOptions;
 
 class ViewFileSVG extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isStarred: isStarred,
-      isLocked: isLocked,
-      lockedByMe: lockedByMe,
-      isCommentPanelOpen: false
-    };
-  }
-
-  toggleCommentPanel = () => {
-    this.setState({
-      isCommentPanelOpen: !this.state.isCommentPanelOpen
-    });
-  }
-
-  toggleStar = () => {
-    if (this.state.isStarred) {
-      seafileAPI.unStarItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: false
-        });
-      });
-    } else {
-      seafileAPI.starItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: true
-        });
-      });
-    }
-  }
-
-  toggleLockFile = () => {
-    if (this.state.isLocked) {
-      seafileAPI.unlockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: false, 
-          lockedByMe: false 
-        });
-      });
-    } else {
-      seafileAPI.lockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: true,
-          lockedByMe: true
-        });
-      });
-    }    
-  }
-
   render() {
     return (
-      <div className="h-100 d-flex flex-column">
-        <div className="file-view-header d-flex justify-content-between">
-          <FileInfo
-            isStarred={this.state.isStarred}
-            isLocked={this.state.isLocked}
-            toggleStar={this.toggleStar}
-          />
-          <FileToolbar 
-            isLocked={this.state.isLocked}
-            lockedByMe={this.state.lockedByMe}
-            toggleLockFile={this.toggleLockFile}
-            toggleCommentPanel={this.toggleCommentPanel}
-          />
-        </div>
-        <div className="file-view-body flex-auto d-flex">
-          <FileContent />
-          {this.state.isCommentPanelOpen &&
-            <CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
-          }
-        </div>
-      </div>
+      <FileView content={<FileContent />} />
     );
   }
 }
 
 class FileContent extends React.Component {
-
   render() {
     if (err) {
       return <FileViewTip />;
@@ -110,13 +30,6 @@ class FileContent extends React.Component {
   }
 }
 
-if (enableWatermark) {
-  watermark.init({
-    watermark_txt: `${siteName} ${userNickName}`,
-    watermark_alpha: 0.075
-  });
-}
-
 ReactDOM.render (
   <ViewFileSVG />,
   document.getElementById('wrapper')

frontend/src/view-file-text.js

@@ -1,13 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import watermark from 'watermark-dom';
-import { seafileAPI } from './utils/seafile-api';
 import { Utils } from './utils/utils';
-import { siteName } from './utils/constants';
-import FileInfo from './components/file-view/file-info';
-import FileToolbar from './components/file-view/file-toolbar';
+import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
-import CommentPanel from './components/file-view/comment-panel';
 
 import CodeMirror from 'react-codemirror';
 import 'codemirror/mode/javascript/javascript';
@@ -22,13 +17,10 @@ import 'codemirror/mode/python/python';
 import 'codemirror/mode/htmlmixed/htmlmixed';
 import 'codemirror/lib/codemirror.css';
 
-import './css/file-view.css';
 import './css/text-file-view.css';
 
-const { isStarred, isLocked, lockedByMe,
-  repoID, filePath, err, enableWatermark, userNickName,
-  // the following are only for text file view
-  fileExt, fileContent
+const {
+  err, fileExt, fileContent
 } = window.app.pageOptions;
 
 const options = {
@@ -43,88 +35,15 @@ const options = {
 };
 
 class ViewFileText extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isStarred: isStarred,
-      isLocked: isLocked,
-      lockedByMe: lockedByMe,
-      isCommentPanelOpen: false
-    };
-  }
-
-  toggleCommentPanel = () => {
-    this.setState({
-      isCommentPanelOpen: !this.state.isCommentPanelOpen
-    });
-  }
-
-  toggleStar = () => {
-    if (this.state.isStarred) {
-      seafileAPI.unStarItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: false
-        });
-      });
-    } else {
-      seafileAPI.starItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: true
-        });
-      });
-    }
-  }
-
-  toggleLockFile = () => {
-    if (this.state.isLocked) {
-      seafileAPI.unlockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: false,
-          lockedByMe: false
-        });
-      });
-    } else {
-      seafileAPI.lockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: true,
-          lockedByMe: true
-        });
-      });
-    }    
-  }
-
   render() {
     return (
-      <div className="h-100 d-flex flex-column">
-        <div className="file-view-header d-flex justify-content-between">
-          <FileInfo
-            isStarred={this.state.isStarred}
-            isLocked={this.state.isLocked}
-            toggleStar={this.toggleStar}
-          />
-          <FileToolbar
-            isLocked={this.state.isLocked}
-            lockedByMe={this.state.lockedByMe}
-            toggleLockFile={this.toggleLockFile}
-            toggleCommentPanel={this.toggleCommentPanel}
-          />
-        </div>
-        <div className="file-view-body flex-auto d-flex">
-          <FileContent />
-          {this.state.isCommentPanelOpen &&
-            <CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
-          }
-        </div>
-      </div>
+      <FileView content={<FileContent />} />
     );
   }
 }
 
 class FileContent extends React.Component {
-
   render() {
-
     if (err) {
       return <FileViewTip />;
     }
@@ -140,13 +59,6 @@ class FileContent extends React.Component {
   }
 }
 
-if (enableWatermark) {
-  watermark.init({
-    watermark_txt: `${siteName} ${userNickName}`,
-    watermark_alpha: 0.075
-  });
-}
-
 ReactDOM.render (
   <ViewFileText />,
   document.getElementById('wrapper')

frontend/src/view-file-unknown.js

@@ -1,100 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import watermark from 'watermark-dom';
-import { seafileAPI } from './utils/seafile-api';
-import { siteName } from './utils/constants';
-import FileInfo from './components/file-view/file-info';
-import FileToolbar from './components/file-view/file-toolbar';
+import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
-import CommentPanel from './components/file-view/comment-panel';
 
-import './css/file-view.css';
-
-const { isStarred, isLocked, lockedByMe,
-  repoID, filePath, err, enableWatermark, userNickName
-} = window.app.pageOptions;
+const { err } = window.app.pageOptions;
 
 class ViewFileUnknown extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isStarred: isStarred,
-      isLocked: isLocked,
-      lockedByMe: lockedByMe,
-      isCommentPanelOpen: false
-    };
-  }
-
-  toggleCommentPanel = () => {
-    this.setState({
-      isCommentPanelOpen: !this.state.isCommentPanelOpen
-    });
-  }
-
-  toggleStar = () => {
-    if (this.state.isStarred) {
-      seafileAPI.unStarItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: false
-        });
-      });
-    } else {
-      seafileAPI.starItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: true
-        });
-      });
-    }
-  }
-
-  toggleLockFile = () => {
-    if (this.state.isLocked) {
-      seafileAPI.unlockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: false, 
-          lockedByMe: false 
-        });
-      });
-    } else {
-      seafileAPI.lockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: true,
-          lockedByMe: true
-        });
-      });
-    }    
-  }
-
   render() {
     return (
-      <div className="h-100 d-flex flex-column">
-        <div className="file-view-header d-flex justify-content-between">
-          <FileInfo
-            isStarred={this.state.isStarred}
-            isLocked={this.state.isLocked}
-            toggleStar={this.toggleStar}
-          />
-          <FileToolbar 
-            isLocked={this.state.isLocked}
-            lockedByMe={this.state.lockedByMe}
-            toggleLockFile={this.toggleLockFile}
-            toggleCommentPanel={this.toggleCommentPanel}
-          />
-        </div>
-        <div className="file-view-body flex-auto d-flex">
-          <FileContent />
-          {this.state.isCommentPanelOpen &&
-            <CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
-          }
-        </div>
-      </div>
+      <FileView content={<FileContent />} />
     );
   }
 }
 
 class FileContent extends React.Component {
-
   render() {
     if (err) {
       return <FileViewTip />;
@@ -102,13 +21,6 @@ class FileContent extends React.Component {
   }
 }
 
-if (enableWatermark) {
-  watermark.init({
-    watermark_txt: `${siteName} ${userNickName}`,
-    watermark_alpha: 0.075
-  });
-}
-
 ReactDOM.render (
   <ViewFileUnknown />,
   document.getElementById('wrapper')

frontend/src/view-file-video.js

@@ -1,98 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import watermark from 'watermark-dom';
-import { seafileAPI } from './utils/seafile-api';
-import { siteName } from './utils/constants';
-import FileInfo from './components/file-view/file-info';
-import FileToolbar from './components/file-view/file-toolbar';
+import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
-import CommentPanel from './components/file-view/comment-panel';
 import VideoPlayer from './components/video-player';
 
-import './css/file-view.css';
 import './css/video-file-view.css';
 
-const { isStarred, isLocked, lockedByMe,
-  repoID, filePath, err, enableWatermark, userNickName,
-  // the following are only for this type of file view
-  rawPath
+const {
+  err, rawPath
 } = window.app.pageOptions;
 
 class ViewFileVideo extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isStarred: isStarred,
-      isLocked: isLocked,
-      lockedByMe: lockedByMe,
-      isCommentPanelOpen: false
-    };
-  }
-
-  toggleCommentPanel = () => {
-    this.setState({
-      isCommentPanelOpen: !this.state.isCommentPanelOpen
-    });
-  }
-
-  toggleStar = () => {
-    if (this.state.isStarred) {
-      seafileAPI.unStarItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: false
-        });
-      });
-    } else {
-      seafileAPI.starItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: true
-        });
-      });
-    }
-  }
-
-  toggleLockFile = () => {
-    if (this.state.isLocked) {
-      seafileAPI.unlockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: false, 
-          lockedByMe: false 
-        });
-      });
-    } else {
-      seafileAPI.lockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: true,
-          lockedByMe: true
-        });
-      });
-    }    
-  }
-
   render() {
     return (
-      <div className="h-100 d-flex flex-column">
-        <div className="file-view-header d-flex justify-content-between">
-          <FileInfo
-            isStarred={this.state.isStarred}
-            isLocked={this.state.isLocked}
-            toggleStar={this.toggleStar}
-          />
-          <FileToolbar 
-            isLocked={this.state.isLocked}
-            lockedByMe={this.state.lockedByMe}
-            toggleLockFile={this.toggleLockFile}
-            toggleCommentPanel={this.toggleCommentPanel}
-          />
-        </div>
-        <div className="file-view-body flex-auto d-flex">
-          <FileContent />
-          {this.state.isCommentPanelOpen &&
-            <CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
-          }
-        </div>
-      </div>
+      <FileView content={<FileContent />} />
     );
   }
 }
@@ -120,13 +41,6 @@ class FileContent extends React.Component {
   }
 }
 
-if (enableWatermark) {
-  watermark.init({
-    watermark_txt: `${siteName} ${userNickName}`,
-    watermark_alpha: 0.075
-  });
-}
-
 ReactDOM.render (
   <ViewFileVideo />,
   document.getElementById('wrapper')

frontend/src/view-file-xmind.js

@@ -1,103 +1,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import watermark from 'watermark-dom';
-import { seafileAPI } from './utils/seafile-api';
-import { siteRoot, siteName } from './utils/constants';
-import FileInfo from './components/file-view/file-info';
-import FileToolbar from './components/file-view/file-toolbar';
+import { siteRoot } from './utils/constants';
+import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
-import CommentPanel from './components/file-view/comment-panel';
 
-import './css/file-view.css';
 import './css/image-file-view.css';
 
-const { isStarred, isLocked, lockedByMe,
-  repoID, filePath, err, enableWatermark, userNickName,
-  // the following are only for xmind file view
-  fileName, xmindImageSrc
-} = window.app.pageOptions;
+const { err, fileName, xmindImageSrc } = window.app.pageOptions;
 
 class ViewFileXmind extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isStarred: isStarred,
-      isLocked: isLocked,
-      lockedByMe: lockedByMe,
-      isCommentPanelOpen: false
-    };
-  }
-
-  toggleCommentPanel = () => {
-    this.setState({
-      isCommentPanelOpen: !this.state.isCommentPanelOpen
-    });
-  }
-
-  toggleStar = () => {
-    if (this.state.isStarred) {
-      seafileAPI.unStarItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: false
-        });
-      });
-    } else {
-      seafileAPI.starItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: true
-        });
-      });
-    }
-  }
-
-  toggleLockFile = () => {
-    if (this.state.isLocked) {
-      seafileAPI.unlockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: false, 
-          lockedByMe: false 
-        });
-      });
-    } else {
-      seafileAPI.lockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: true,
-          lockedByMe: true
-        });
-      });
-    }    
-  }
-
   render() {
     return (
-      <div className="h-100 d-flex flex-column">
-        <div className="file-view-header d-flex justify-content-between">
-          <FileInfo
-            isStarred={this.state.isStarred}
-            isLocked={this.state.isLocked}
-            toggleStar={this.toggleStar}
-          />
-          <FileToolbar 
-            isLocked={this.state.isLocked}
-            lockedByMe={this.state.lockedByMe}
-            toggleLockFile={this.toggleLockFile}
-            toggleCommentPanel={this.toggleCommentPanel}
-          />
-        </div>
-        <div className="file-view-body flex-auto d-flex">
-          <FileContent />
-          {this.state.isCommentPanelOpen &&
-            <CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
-          }
-        </div>
-      </div>
+      <FileView content={<FileContent />} />
     );
   }
 }
 
 class FileContent extends React.Component {
-
   render() {
     if (err) {
       return <FileViewTip />;
@@ -110,13 +29,6 @@ class FileContent extends React.Component {
   }
 }
 
-if (enableWatermark) {
-  watermark.init({
-    watermark_txt: `${siteName} ${userNickName}`,
-    watermark_alpha: 0.075
-  });
-}
-
 ReactDOM.render (
   <ViewFileXmind />,
   document.getElementById('wrapper')