haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-22 03:47:09 +00:00
Code Issues Releases Wiki Activity

[file view] rewrote it (#3820)

Browse Source 
* [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
This commit is contained in:
llj
2019-07-10 15:04:00 +08:00
committed by Daniel Pan
parent cb683d1e91
commit 514302a7b2
23 changed files with 137 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/components/file-content-view/image.js
View File

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

55
frontend/src/file-view.js Normal file
View File

@@ -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')
);

2
frontend/src/history-trash-file-view.js
View File

@@ -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 />;

47
frontend/src/view-file-audio.js
View File

@@ -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')
);

86
frontend/src/view-file-image.js
View File

@@ -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')
);

36
frontend/src/view-file-pdf.js
View File

@@ -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')
);

36
frontend/src/view-file-svg.js
View File

@@ -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')
);

27
frontend/src/view-file-unknown.js
View File

@@ -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')
);

47
frontend/src/view-file-video.js
View File

@@ -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')
);

35
frontend/src/view-file-xmind.js
View File

@@ -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')
);