Removed gif playing code from the FileAttachment component
Этот коммит содержится в:
@@ -19,12 +19,10 @@ class FileAttachment extends React.Component {
|
|||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
this.loadFiles = this.loadFiles.bind(this);
|
this.loadFiles = this.loadFiles.bind(this);
|
||||||
this.playGif = this.playGif.bind(this);
|
|
||||||
this.stopGif = this.stopGif.bind(this);
|
|
||||||
this.addBackgroundImage = this.addBackgroundImage.bind(this);
|
this.addBackgroundImage = this.addBackgroundImage.bind(this);
|
||||||
|
|
||||||
this.canSetState = false;
|
this.canSetState = false;
|
||||||
this.state = {fileSize: -1, mime: '', playing: false, loading: false, format: ''};
|
this.state = {fileSize: -1};
|
||||||
}
|
}
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.loadFiles();
|
this.loadFiles();
|
||||||
@@ -95,42 +93,6 @@ class FileAttachment extends React.Component {
|
|||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
playGif(e, filename) {
|
|
||||||
var img = new Image();
|
|
||||||
var fileUrl = utils.getFileUrl(filename);
|
|
||||||
|
|
||||||
this.setState({loading: true});
|
|
||||||
img.load(fileUrl);
|
|
||||||
img.onload = () => {
|
|
||||||
var state = {playing: true, loading: false};
|
|
||||||
|
|
||||||
switch (true) {
|
|
||||||
case img.width > img.height:
|
|
||||||
state.format = 'landscape';
|
|
||||||
break;
|
|
||||||
case img.height > img.width:
|
|
||||||
state.format = 'portrait';
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
state.format = 'quadrat';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState(state);
|
|
||||||
|
|
||||||
// keep displaying background image for a short moment while browser is
|
|
||||||
// loading gif, to prevent white background flashing through
|
|
||||||
setTimeout(() => this.removeBackgroundImage.bind(this)(filename), 100);
|
|
||||||
};
|
|
||||||
img.onError = () => this.setState({loading: false});
|
|
||||||
|
|
||||||
e.stopPropagation();
|
|
||||||
}
|
|
||||||
stopGif(e, filename) {
|
|
||||||
this.setState({playing: false});
|
|
||||||
this.addBackgroundImage(filename);
|
|
||||||
e.stopPropagation();
|
|
||||||
}
|
|
||||||
getFileInfoFromName(name) {
|
getFileInfoFromName(name) {
|
||||||
var fileInfo = utils.splitFileLocation(name);
|
var fileInfo = utils.splitFileLocation(name);
|
||||||
|
|
||||||
@@ -167,71 +129,15 @@ class FileAttachment extends React.Component {
|
|||||||
var fileUrl = utils.getFileUrl(filename);
|
var fileUrl = utils.getFileUrl(filename);
|
||||||
var type = utils.getFileType(fileInfo.ext);
|
var type = utils.getFileType(fileInfo.ext);
|
||||||
|
|
||||||
var playbackControls = '';
|
|
||||||
var loadedFile = '';
|
|
||||||
var loadingIndicator = '';
|
|
||||||
if (this.state.mime === 'image/gif') {
|
|
||||||
playbackControls = (
|
|
||||||
<div
|
|
||||||
className='file-playback-controls play'
|
|
||||||
onClick={(e) => this.playGif(e, filename)}
|
|
||||||
>
|
|
||||||
{"►"}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (this.state.playing) {
|
|
||||||
loadedFile = (
|
|
||||||
<img
|
|
||||||
className={'file__loaded ' + this.state.format}
|
|
||||||
src={fileUrl}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
playbackControls = (
|
|
||||||
<div
|
|
||||||
className='file-playback-controls stop'
|
|
||||||
onClick={(e) => this.stopGif(e, filename)}
|
|
||||||
>
|
|
||||||
{"■"}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (this.state.loading) {
|
|
||||||
loadingIndicator = (
|
|
||||||
<img
|
|
||||||
className='spinner file__loading'
|
|
||||||
src='/static/images/load.gif'
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
playbackControls = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
var thumbnail;
|
var thumbnail;
|
||||||
if (type === 'image') {
|
if (type === 'image') {
|
||||||
if (this.state.playing) {
|
thumbnail = (
|
||||||
thumbnail = (
|
<div
|
||||||
<div
|
ref={filename}
|
||||||
ref={filename}
|
className='post__load'
|
||||||
className='post__load'
|
style={{backgroundImage: 'url(/static/images/load.gif)'}}
|
||||||
style={{backgroundImage: 'url(/static/images/load.gif)'}}
|
/>
|
||||||
>
|
);
|
||||||
{playbackControls}
|
|
||||||
{loadedFile}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
thumbnail = (
|
|
||||||
<div
|
|
||||||
ref={filename}
|
|
||||||
className='post__load'
|
|
||||||
style={{backgroundImage: 'url(/static/images/load.gif)'}}
|
|
||||||
>
|
|
||||||
{loadingIndicator}
|
|
||||||
{playbackControls}
|
|
||||||
{loadedFile}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
thumbnail = <div className={'file-icon ' + utils.getIconClassName(type)}/>;
|
thumbnail = <div className={'file-icon ' + utils.getIconClassName(type)}/>;
|
||||||
}
|
}
|
||||||
@@ -242,7 +148,7 @@ class FileAttachment extends React.Component {
|
|||||||
filename,
|
filename,
|
||||||
function success(data) {
|
function success(data) {
|
||||||
if (this.canSetState) {
|
if (this.canSetState) {
|
||||||
this.setState({fileSize: parseInt(data.size, 10), mime: data.mime});
|
this.setState({fileSize: parseInt(data.size, 10)});
|
||||||
}
|
}
|
||||||
}.bind(this),
|
}.bind(this),
|
||||||
function error() {
|
function error() {
|
||||||
|
|||||||
Ссылка в новой задаче
Block a user