gab-social/app/javascript/gabsocial/components/modal/embed_modal.js

112 lines
3.0 KiB
JavaScript
Raw Normal View History

2020-03-12 16:09:15 +00:00
import ImmutablePureComponent from 'react-immutable-pure-component'
import { defineMessages, injectIntl } from 'react-intl'
2020-02-24 23:25:55 +00:00
import api from '../../api'
2020-03-12 16:09:15 +00:00
import ModalLayout from './modal_layout'
import Divider from '../divider'
import Icon from '../icon'
import Input from '../input'
import Text from '../text'
2019-07-02 08:10:25 +01:00
const messages = defineMessages({
embed: { id: 'status.embed', defaultMessage: 'Embed' },
instructions: { id: 'embed.instructions', defaultMessage: 'Embed this status on your website by copying the code below.' },
preview: { id: 'embed.preview', defaultMessage: 'Here is what it will look like:' },
2020-03-12 16:09:15 +00:00
})
2020-02-25 16:04:44 +00:00
export default
@injectIntl
2019-07-02 08:10:25 +01:00
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,
2020-03-12 16:09:15 +00:00
}
2019-07-02 08:10:25 +01:00
2020-03-12 16:09:15 +00:00
componentDidMount() {
const { url } = this.props
2019-07-02 08:10:25 +01:00
2020-03-12 16:09:15 +00:00
this.setState({ loading: true })
2019-07-02 08:10:25 +01:00
api().post('/api/web/embed', { url }).then(res => {
2020-03-12 16:09:15 +00:00
this.setState({ loading: false, oembed: res.data })
2019-07-02 08:10:25 +01:00
2020-03-12 16:09:15 +00:00
const iframeDocument = this.iframe.contentWindow.document
2019-07-02 08:10:25 +01:00
2020-03-12 16:09:15 +00:00
iframeDocument.open()
iframeDocument.write(res.data.html)
iframeDocument.close()
2019-07-02 08:10:25 +01:00
2020-03-12 16:09:15 +00:00
iframeDocument.body.style.margin = 0
this.iframe.width = iframeDocument.body.scrollWidth
this.iframe.height = iframeDocument.body.scrollHeight
2019-07-02 08:10:25 +01:00
}).catch(error => {
2020-03-12 16:09:15 +00:00
this.props.onError(error)
})
2019-07-02 08:10:25 +01:00
}
2020-03-12 16:09:15 +00:00
setIframeRef = c => {
this.iframe = c
2019-07-02 08:10:25 +01:00
}
handleTextareaClick = (e) => {
2020-03-12 16:09:15 +00:00
e.target.select()
2019-07-02 08:10:25 +01:00
}
2020-03-12 16:09:15 +00:00
render() {
2020-04-07 02:53:23 +01:00
const { intl, onClose } = this.props
2020-03-12 16:09:15 +00:00
const { oembed } = this.state
2019-07-02 08:10:25 +01:00
return (
2020-04-07 02:53:23 +01:00
<ModalLayout
title={intl.formatMessage(messages.embed)}
onClose={onClose}
>
2020-03-12 16:09:15 +00:00
<div className={_s.default}>
<Text className={_s.my10}>
{intl.formatMessage(messages.instructions)}
2020-03-12 16:09:15 +00:00
</Text>
2019-07-02 08:10:25 +01:00
2020-03-12 16:09:15 +00:00
<div className={[_s.default, _s.mb10].join(' ')}>
<Input
readOnly
type='text'
className='embed-modal__html'
value={oembed && oembed.html || ''}
onClick={this.handleTextareaClick}
/>
</div>
2019-07-02 08:10:25 +01:00
2020-03-12 16:09:15 +00:00
<Divider />
<Text className={_s.mb10}>
{intl.formatMessage(messages.preview)}
2020-03-12 16:09:15 +00:00
</Text>
2020-04-29 23:32:49 +01:00
<div className={[_s.default, _s.width100PC, _s.bgSubtle, _s.height220PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
2020-03-12 16:09:15 +00:00
<iframe
className={[_s.default, _s.width100PC, _s.height100PC, _s.z2].join(' ')}
frameBorder='0'
ref={this.setIframeRef}
sandbox='allow-same-origin'
title='preview'
/>
{
!oembed &&
2020-04-23 07:13:29 +01:00
<Icon id='loading' size='34px' className={[_s.posAbs, _s.z3].join(' ')} />
2020-03-12 16:09:15 +00:00
}
</div>
2019-07-02 08:10:25 +01:00
</div>
2020-03-12 16:09:15 +00:00
</ModalLayout>
)
2019-07-02 08:10:25 +01:00
}
}