app/javascript/mastodon/features/ui/components/embed_modal.js

   1 import React from 'react';
   2 import PropTypes from 'prop-types';
   3 import ImmutablePureComponent from 'react-immutable-pure-component';
   4 import { FormattedMessage, injectIntl } from 'react-intl';
   5 import axios from 'axios';
   6
   7 @injectIntl
   8 export default class EmbedModal extends ImmutablePureComponent {
   9
  10   static propTypes = {
  11     url: PropTypes.string.isRequired,
  12     onClose: PropTypes.func.isRequired,
  13     intl: PropTypes.object.isRequired,
  14   }
  15
  16   state = {
  17     loading: false,
  18     oembed: null,
  19   };
  20
  21   componentDidMount () {
  22     const { url } = this.props;
  23
  24     this.setState({ loading: true });
  25
  26     axios.post('/api/web/embed', { url }).then(res => {
  27       this.setState({ loading: false, oembed: res.data });
  28
  29       const iframeDocument = this.iframe.contentWindow.document;
  30
  31       iframeDocument.open();
  32       iframeDocument.write(res.data.html);
  33       iframeDocument.close();
  34
  35       iframeDocument.body.style.margin = 0;
  36       this.iframe.width  = iframeDocument.body.scrollWidth;
  37       this.iframe.height = iframeDocument.body.scrollHeight;
  38     });
  39   }
  40
  41   setIframeRef = c =>  {
  42     this.iframe = c;
  43   }
  44
  45   handleTextareaClick = (e) => {
  46     e.target.select();
  47   }
  48
  49   render () {
  50     const { oembed } = this.state;
  51
  52     return (
  53       <div className='modal-root__modal embed-modal'>
  54         <h4><FormattedMessage id='status.embed' defaultMessage='Embed' /></h4>
  55
  56         <div className='embed-modal__container'>
  57           <p className='hint'>
  58             <FormattedMessage id='embed.instructions' defaultMessage='Embed this status on your website by copying the code below.' />
  59           </p>
  60
  61           <input
  62             type='text'
  63             className='embed-modal__html'
  64             readOnly
  65             value={oembed && oembed.html || ''}
  66             onClick={this.handleTextareaClick}
  67           />
  68
  69           <p className='hint'>
  70             <FormattedMessage id='embed.preview' defaultMessage='Here is what it will look like:' />
  71           </p>
  72
  73           <iframe
  74             className='embed-modal__iframe'
  75             frameBorder='0'
  76             ref={this.setIframeRef}
  77             title='preview'
  78           />
  79         </div>
  80       </div>
  81     );
  82   }
  83
  84 }