|
|
@ -16,6 +16,7 @@ import UploadProgress from 'mastodon/features/compose/components/upload_progress |
|
|
|
import CharacterCounter from 'mastodon/features/compose/components/character_counter'; |
|
|
|
import { length } from 'stringz'; |
|
|
|
import { Tesseract as fetchTesseract } from 'mastodon/features/ui/util/async-components'; |
|
|
|
import GIFV from 'mastodon/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> |
|
|
|