From d167e18f0048344c54685a08c19113a84a995ed9 Mon Sep 17 00:00:00 2001 From: Florian Orben Date: Sat, 17 Oct 2015 01:58:34 +0200 Subject: PLT-616: Enable playing of animated GIF in thumbnails and preview --- web/react/components/view_image.jsx | 70 ++++++++++++++++++++++++++++++++++++- 1 file changed, 69 insertions(+), 1 deletion(-) (limited to 'web/react/components/view_image.jsx') diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index 322e68c17..c8356b2fa 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,28 @@ 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(); + } componentDidMount() { $(window).on('keyup', this.handleKeyPress); @@ -154,6 +179,10 @@ export default class ViewImageModal extends React.Component { var fileType = Utils.getFileType(fileInfo.ext); if (fileType === 'image') { + if (typeof this.state.isPlaying[filename] !== 'undefined') { + 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 +218,51 @@ 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 playButton = ''; + if (this.state.fileMimes[filename] === 'image/gif' && !(filename in this.state.isLoading) && !(filename in this.state.isPlaying)) { + playButton = ( +
this.playGif(e, filename, fileUrl)} + > + {"►"} +
+ ); + } + + var loadingIndicator = ''; + if (this.state.isLoading[filename] === fileUrl) { + loadingIndicator = ( + + ); + playButton = ''; + } + // image files just show a preview of the file content = ( + {loadingIndicator} + {playButton} Date: Mon, 19 Oct 2015 22:30:00 +0200 Subject: Add stop button to stop animated gifs --- web/react/components/view_image.jsx | 45 ++++++++++++++++++++++++++----------- 1 file changed, 32 insertions(+), 13 deletions(-) (limited to 'web/react/components/view_image.jsx') diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index c8356b2fa..fbe32cb07 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -147,6 +147,14 @@ export default class ViewImageModal extends React.Component { 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); @@ -179,7 +187,7 @@ export default class ViewImageModal extends React.Component { var fileType = Utils.getFileType(fileInfo.ext); if (fileType === 'image') { - if (typeof this.state.isPlaying[filename] !== 'undefined') { + if (filename in this.state.isPlaying) { return this.state.isPlaying[filename]; } @@ -232,16 +240,27 @@ export default class ViewImageModal extends React.Component { ); } - var playButton = ''; - if (this.state.fileMimes[filename] === 'image/gif' && !(filename in this.state.isLoading) && !(filename in this.state.isPlaying)) { - playButton = ( -
this.playGif(e, filename, fileUrl)} - > - {"►"} -
- ); + var playbackControls = ''; + if (this.state.fileMimes[filename] === 'image/gif' && !(filename in this.state.isLoading)) { + if (filename in this.state.isPlaying) { + playbackControls = ( +
this.stopGif(e, filename)} + > + {"◼"} +
+ ); + } else { + playbackControls = ( +
this.playGif(e, filename, fileUrl)} + > + {"►"} +
+ ); + } } var loadingIndicator = ''; @@ -252,7 +271,7 @@ export default class ViewImageModal extends React.Component { src='/static/images/load.gif' /> ); - playButton = ''; + playbackControls = ''; } // image files just show a preview of the file @@ -262,7 +281,7 @@ export default class ViewImageModal extends React.Component { target='_blank' > {loadingIndicator} - {playButton} + {playbackControls} Date: Wed, 21 Oct 2015 18:15:04 +0200 Subject: Change stop symbol to another one since chrome-win can't display it --- web/react/components/view_image.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/react/components/view_image.jsx') diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index fbe32cb07..bea6ce7a5 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -248,7 +248,7 @@ export default class ViewImageModal extends React.Component { className='file-playback-controls stop' onClick={(e) => this.stopGif(e, filename)} > - {"◼"} + {"■"} ); } else { -- cgit v1.2.3-1-g7c22