[view history/snapshot/trash file] rewrote them with react

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import AudioPlayer from '../audio-player';
+
+import '../../css/audio-file-view.css';
+
+const { rawPath } = window.app.pageOptions;
+
+class FileContent extends React.Component {
+  render() {
+    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>
+    );
+  }
+}
+
+export default FileContent;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Utils } from '../../utils/utils';
+import { gettext, siteRoot } from '../../utils/constants';
+
+import '../../css/image-file-view.css';
+
+const {
+  repoID,
+  fileName, previousImage, nextImage, rawPath
+} = 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 FileContent extends React.Component {
+
+  componentDidMount() {
+    document.addEventListener('keydown', (e) => {
+      if (previousImage && e.keyCode == 37) { // press '<-'
+        location.href = previousImageUrl;
+      }
+      if (nextImage && e.keyCode == 39) { // press '->'
+        location.href = nextImageUrl;
+      }
+    });
+  }
+
+  render() {
+    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>
+        )}
+        <img src={rawPath} alt={fileName} id="image-view" />
+      </div>
+    );
+  }
+}
+
+export default FileContent;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import MarkdownViewer from '@seafile/seafile-editor/dist/viewer/markdown-viewer';
+
+import '../../css/md-file-view.css';
+
+const { fileContent } = window.app.pageOptions;
+
+class FileContent extends React.Component {
+  render() {
+    return (
+      <div className="file-view-content flex-1 o-auto">
+        <div className="md-content">
+          <MarkdownViewer 
+            markdownContent={fileContent}
+            showTOC={false}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default FileContent;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import PDFViewer from '../pdf-viewer';
+
+import '../../css/pdf-file-view.css';
+
+class FileContent extends React.Component {
+  render() {
+    return (
+      <div className="file-view-content flex-1 pdf-file-view">
+        <PDFViewer />
+      </div>
+    );
+  }
+}
+
+export default FileContent;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import '../../css/svg-file-view.css';
+
+const {
+  fileName, rawPath
+} = window.app.pageOptions;
+
+class FileContent extends React.Component {
+  render() {
+    return (
+      <div className="file-view-content flex-1 svg-file-view">
+        <img src={rawPath} alt={fileName} id="svg-view" />
+      </div>
+    );
+  }
+}
+
+export default FileContent;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Utils } from '../../utils/utils';
+
+import CodeMirror from 'react-codemirror';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/clike/clike';
+import 'codemirror/mode/php/php';
+import 'codemirror/mode/sql/sql';
+import 'codemirror/mode/vue/vue';
+import 'codemirror/mode/xml/xml';
+import 'codemirror/mode/go/go';
+import 'codemirror/mode/python/python';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+import 'codemirror/lib/codemirror.css';
+
+import '../../css/text-file-view.css';
+
+const {
+  fileExt, fileContent
+} = window.app.pageOptions;
+
+const options = {
+  lineNumbers: true,
+  mode: Utils.chooseLanguage(fileExt),
+  extraKeys: {'Ctrl': 'autocomplete'},
+  theme: 'default',
+  textWrapping: true,
+  lineWrapping: true,
+  readOnly: true,
+  cursorBlinkRate: -1 // hide the cursor
+};
+
+class FileContent extends React.Component {
+  render() {
+    return (
+      <div className="file-view-content flex-1 text-file-view">
+        <CodeMirror
+          ref="code-mirror-editor"
+          value={fileContent}
+          options={options}
+        />
+      </div>
+    );
+  }
+}
+
+export default FileContent;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import VideoPlayer from '../video-player';
+
+import '../../css/video-file-view.css';
+
+const {
+  rawPath
+} = window.app.pageOptions;
+
+class FileContent extends React.Component {
+  render() {
+    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>
+    );  
+  }
+}
+
+export default FileContent;