diff options
author | ThibG <thib@sitedethib.com> | 2019-10-11 22:28:11 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-10-11 22:28:11 +0200 |
commit | ef925f31a66d1cbc95bff11669d05e2924d8ce85 (patch) | |
tree | aadbb60d22a196075fe1faaeeae169e5badead57 /app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js | |
parent | b3dd0d276d52042828e11bf325015f5d7f4624ca (diff) | |
parent | 877e8c9d799eae663526609642e0c0c9a4612bda (diff) |
Merge pull request #1233 from ThibG/glitch-soc/merge-upstream
Merge upstream changes
Diffstat (limited to 'app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js | 36 |
1 files changed, 34 insertions, 2 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js index d5c9e66ae..f5ecf77b9 100644 --- a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js @@ -16,6 +16,7 @@ import UploadProgress from 'flavours/glitch/features/compose/components/upload_p import CharacterCounter from 'flavours/glitch/features/compose/components/character_counter'; import { length } from 'stringz'; import { Tesseract as fetchTesseract } from 'flavours/glitch/util/async-components'; +import GIFV from 'flavours/glitch/components/gifv'; const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, @@ -41,6 +42,36 @@ const removeExtraLineBreaks = str => str.replace(/\n\n/g, '******') const assetHost = process.env.CDN_HOST || ''; +class ImageLoader extends React.PureComponent { + + static propTypes = { + src: PropTypes.string.isRequired, + width: PropTypes.number, + height: PropTypes.number, + }; + + state = { + loading: true, + }; + + componentDidMount() { + const image = new Image(); + image.addEventListener('load', () => this.setState({ loading: false })); + image.src = this.props.src; + } + + render () { + const { loading } = this.state; + + if (loading) { + return <canvas width={this.props.width} height={this.props.height} />; + } else { + return <img {...this.props} alt='' />; + } + } + +} + export default @connect(mapStateToProps, mapDispatchToProps) @injectIntl class FocalPointModal extends ImmutablePureComponent { @@ -60,6 +91,7 @@ class FocalPointModal extends ImmutablePureComponent { description: '', dirty: false, progress: 0, + loading: true, }; componentWillMount () { @@ -242,8 +274,8 @@ class FocalPointModal extends ImmutablePureComponent { <div className='focal-point-modal__content'> {focals && ( <div className={classNames('focal-point', { dragging })} ref={this.setRef} onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart}> - {media.get('type') === 'image' && <img src={media.get('url')} width={width} height={height} alt='' />} - {media.get('type') === 'gifv' && <video src={media.get('url')} width={width} height={height} loop muted autoPlay />} + {media.get('type') === 'image' && <ImageLoader src={media.get('url')} width={width} height={height} alt='' />} + {media.get('type') === 'gifv' && <GIFV src={media.get('url')} width={width} height={height} />} <div className='focal-point__preview'> <strong><FormattedMessage id='upload_modal.preview_label' defaultMessage='Preview ({ratio})' values={{ ratio: '16:9' }} /></strong> |