diff options
author | =Corey Hulen <corey@hulen.com> | 2015-10-22 09:19:18 -0700 |
---|---|---|
committer | =Corey Hulen <corey@hulen.com> | 2015-10-22 09:19:18 -0700 |
commit | 54894e90ac705eab3bf0f34c8dd197bb0929feae (patch) | |
tree | 2fd5c6bc1bdb8cef1ea6095e8f12f8fd73a52ce9 /web/react/components/view_image.jsx | |
parent | c4c04e5f02253dfdfc2bd09e06955f1f5932ce18 (diff) | |
parent | 649f42e3fc706f8fa829276bcdb825381bc703f2 (diff) | |
download | chat-54894e90ac705eab3bf0f34c8dd197bb0929feae.tar.gz chat-54894e90ac705eab3bf0f34c8dd197bb0929feae.tar.bz2 chat-54894e90ac705eab3bf0f34c8dd197bb0929feae.zip |
Fixing merge conflict
Diffstat (limited to 'web/react/components/view_image.jsx')
-rw-r--r-- | web/react/components/view_image.jsx | 89 |
1 files changed, 88 insertions, 1 deletions
diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index 766edf0ac..92d7cd835 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -38,7 +38,10 @@ export default class ViewImageModal extends React.Component { progress: progress, images: {}, fileSizes: {}, - showFooter: false + fileMimes: {}, + showFooter: false, + isPlaying: {}, + isLoading: {} }; } handleNext(e) { @@ -122,6 +125,36 @@ export default class ViewImageModal extends React.Component { this.setState({loaded}); } } + playGif(e, filename, fileUrl) { + var isLoading = this.state.isLoading; + var isPlaying = this.state.isPlaying; + + isLoading[filename] = fileUrl; + this.setState({isLoading}); + + var img = new Image(); + img.load(fileUrl); + img.onload = () => { + delete isLoading[filename]; + isPlaying[filename] = fileUrl; + this.setState({isPlaying, isLoading}); + }; + img.onError = () => { + delete isLoading[filename]; + this.setState({isLoading}); + }; + + e.stopPropagation(); + e.preventDefault(); + } + stopGif(e, filename) { + var isPlaying = this.state.isPlaying; + delete isPlaying[filename]; + this.setState({isPlaying}); + + e.stopPropagation(); + e.preventDefault(); + } componentDidMount() { $(window).on('keyup', this.handleKeyPress); @@ -154,6 +187,10 @@ export default class ViewImageModal extends React.Component { var fileType = Utils.getFileType(fileInfo.ext); if (fileType === 'image') { + if (filename in this.state.isPlaying) { + return this.state.isPlaying[filename]; + } + // This is a temporary patch to fix issue with old files using absolute paths if (fileInfo.path.indexOf('/api/v1/files/get') !== -1) { fileInfo.path = fileInfo.path.split('/api/v1/files/get')[1]; @@ -189,12 +226,62 @@ export default class ViewImageModal extends React.Component { var fileType = Utils.getFileType(fileInfo.ext); if (fileType === 'image') { + if (!(filename in this.state.fileMimes)) { + Client.getFileInfo( + filename, + (data) => { + if (this.canSetState) { + var fileMimes = this.state.fileMimes; + fileMimes[filename] = data.mime; + this.setState(fileMimes); + } + }, + () => {} + ); + } + + var playbackControls = ''; + if (this.state.fileMimes[filename] === 'image/gif' && !(filename in this.state.isLoading)) { + if (filename in this.state.isPlaying) { + playbackControls = ( + <div + className='file-playback-controls stop' + onClick={(e) => this.stopGif(e, filename)} + > + {"■"} + </div> + ); + } else { + playbackControls = ( + <div + className='file-playback-controls play' + onClick={(e) => this.playGif(e, filename, fileUrl)} + > + {"►"} + </div> + ); + } + } + + var loadingIndicator = ''; + if (this.state.isLoading[filename] === fileUrl) { + loadingIndicator = ( + <img + className='spinner file__loading' + src='/static/images/load.gif' + /> + ); + playbackControls = ''; + } + // image files just show a preview of the file content = ( <a href={fileUrl} target='_blank' > + {loadingIndicator} + {playbackControls} <img style={{maxHeight: this.state.imgHeight}} ref='image' |