import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import api from 'mastodon/api'; import IconButton from 'mastodon/components/icon_button'; const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, }); export default @injectIntl class EmbedModal extends ImmutablePureComponent { static propTypes = { url: PropTypes.string.isRequired, onClose: PropTypes.func.isRequired, onError: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, } state = { loading: false, oembed: null, }; componentDidMount () { const { url } = this.props; this.setState({ loading: true }); api().post('/api/web/embed', { url }).then(res => { this.setState({ loading: false, oembed: res.data }); const iframeDocument = this.iframe.contentWindow.document; iframeDocument.open(); iframeDocument.write(res.data.html); iframeDocument.close(); iframeDocument.body.style.margin = 0; this.iframe.width = iframeDocument.body.scrollWidth; this.iframe.height = iframeDocument.body.scrollHeight; }).catch(error => { this.props.onError(error); }); } setIframeRef = c => { this.iframe = c; } handleTextareaClick = (e) => { e.target.select(); } render () { const { intl, onClose } = this.props; const { oembed } = this.state; return ( <div className='modal-root__modal report-modal embed-modal'> <div className='report-modal__target'> <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} /> <FormattedMessage id='status.embed' defaultMessage='Embed' /> </div> <div className='report-modal__container embed-modal__container' style={{ display: 'block' }}> <p className='hint'> <FormattedMessage id='embed.instructions' defaultMessage='Embed this status on your website by copying the code below.' /> </p> <input type='text' className='embed-modal__html' readOnly value={oembed && oembed.html || ''} onClick={this.handleTextareaClick} /> <p className='hint'> <FormattedMessage id='embed.preview' defaultMessage='Here is what it will look like:' /> </p> <iframe className='embed-modal__iframe' frameBorder='0' ref={this.setIframeRef} sandbox='allow-same-origin' title='preview' /> </div> </div> ); } }