diff options
author | Florian Orben <florian.orben@gmail.com> | 2015-10-17 01:58:34 +0200 |
---|---|---|
committer | Florian Orben <florian.orben@gmail.com> | 2015-10-21 18:13:59 +0200 |
commit | d167e18f0048344c54685a08c19113a84a995ed9 (patch) | |
tree | ccab4d40fc13d8ee566c81774e123f526a879b9a /web/react/components/file_attachment.jsx | |
parent | 9553e44dc55e1798180a942e774e9b11f8b01d67 (diff) | |
download | chat-d167e18f0048344c54685a08c19113a84a995ed9.tar.gz chat-d167e18f0048344c54685a08c19113a84a995ed9.tar.bz2 chat-d167e18f0048344c54685a08c19113a84a995ed9.zip |
PLT-616: Enable playing of animated GIF in thumbnails and preview
Diffstat (limited to 'web/react/components/file_attachment.jsx')
-rw-r--r-- | web/react/components/file_attachment.jsx | 53 |
1 files changed, 50 insertions, 3 deletions
diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx index c6dff6550..817834334 100644 --- a/web/react/components/file_attachment.jsx +++ b/web/react/components/file_attachment.jsx @@ -10,9 +10,10 @@ export default class FileAttachment extends React.Component { super(props); this.loadFiles = this.loadFiles.bind(this); + this.playGif = this.playGif.bind(this); this.canSetState = false; - this.state = {fileSize: -1}; + this.state = {fileSize: -1, mime: '', playing: false, loading: false}; } componentDidMount() { this.loadFiles(); @@ -93,6 +94,16 @@ export default class FileAttachment extends React.Component { return true; } + playGif(e, fileUrl) { + var img = new Image(); + + this.setState({loading: true}); + img.load(fileUrl); + img.onload = () => this.setState({playing: true, loading: false}); + img.onError = () => this.setState({loading: false}); + + e.stopPropagation(); + } render() { var filename = this.props.filename; @@ -100,6 +111,38 @@ export default class FileAttachment extends React.Component { var fileUrl = utils.getFileUrl(filename); var type = utils.getFileType(fileInfo.ext); + var playButton = ''; + var loadedFile = ''; + var loadingIndicator = ''; + if (this.state.mime === 'image/gif') { + playButton = ( + <div + className='file-play-button' + onClick={(e) => this.playGif(e, fileUrl)} + > + {"►"} + </div> + ); + } + if (this.state.playing) { + loadedFile = ( + <img + className='file__loaded' + src={fileUrl} + /> + ); + playButton = ''; + } + if (this.state.loading) { + loadingIndicator = ( + <img + className='spinner file__loading' + src='/static/images/load.gif' + /> + ); + playButton = ''; + } + var thumbnail; if (type === 'image') { thumbnail = ( @@ -107,7 +150,11 @@ export default class FileAttachment extends React.Component { ref={filename} className='post__load' style={{backgroundImage: 'url(/static/images/load.gif)'}} - /> + > + {loadingIndicator} + {playButton} + {loadedFile} + </div> ); } else { thumbnail = <div className={'file-icon ' + utils.getIconClassName(type)}/>; @@ -119,7 +166,7 @@ export default class FileAttachment extends React.Component { filename, function success(data) { if (this.canSetState) { - this.setState({fileSize: parseInt(data.size, 10)}); + this.setState({fileSize: parseInt(data.size, 10), mime: data.mime}); } }.bind(this), function error() {} |