diff options
Diffstat (limited to 'web/react/components/post_body.jsx')
-rw-r--r-- | web/react/components/post_body.jsx | 60 |
1 files changed, 56 insertions, 4 deletions
diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index fb838b736..45eae8c6a 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -13,8 +13,12 @@ export default class PostBody extends React.Component { super(props); this.receivedYoutubeData = false; + this.isGifLoading = false; this.parseEmojis = this.parseEmojis.bind(this); + this.createEmbed = this.createEmbed.bind(this); + this.createGifEmbed = this.createGifEmbed.bind(this); + this.loadGif = this.loadGif.bind(this); this.createYoutubeEmbed = this.createYoutubeEmbed.bind(this); const linkData = Utils.extractLinks(this.props.post.message); @@ -46,6 +50,7 @@ export default class PostBody extends React.Component { componentDidUpdate() { this.parseEmojis(); + this.props.resize(); } componentWillReceiveProps(nextProps) { @@ -53,6 +58,52 @@ export default class PostBody extends React.Component { this.setState({links: linkData.links, message: linkData.text}); } + createEmbed(link) { + let embed = this.createYoutubeEmbed(link); + + if (embed != null) { + return embed; + } + + embed = this.createGifEmbed(link); + + return embed; + } + + loadGif(src) { + if (this.isGifLoading) { + return; + } + + this.isGifLoading = true; + + const gif = new Image(); + gif.src = src; + gif.onload = ( + () => { + this.setState({gifLoaded: true}); + } + ); + } + + createGifEmbed(link) { + if (link.substring(link.length - 4) !== '.gif') { + return null; + } + + if (!this.state.gifLoaded) { + this.loadGif(link); + return null; + } + + return ( + <img + className='gif-div' + src={link} + /> + ); + } + handleYoutubeTime(link) { const timeRegex = /[\\?&]t=([0-9hms]+)/; @@ -119,12 +170,12 @@ export default class PostBody extends React.Component { this.setState({youtubeTitle: metadata.title}); } - if (global.window.config.GoogleDeveloperKey && !this.receivedYoutubeData) { + if (global.window.mm_config.GoogleDeveloperKey && !this.receivedYoutubeData) { $.ajax({ async: true, url: 'https://www.googleapis.com/youtube/v3/videos', type: 'GET', - data: {part: 'snippet', id: youtubeId, key: global.window.config.GoogleDeveloperKey}, + data: {part: 'snippet', id: youtubeId, key: global.window.mm_config.GoogleDeveloperKey}, success: success.bind(this) }); } @@ -247,7 +298,7 @@ export default class PostBody extends React.Component { let embed; if (filenames.length === 0 && this.state.links) { - embed = this.createYoutubeEmbed(this.state.links[0]); + embed = this.createEmbed(this.state.links[0]); } let fileAttachmentHolder = ''; @@ -287,5 +338,6 @@ PostBody.propTypes = { post: React.PropTypes.object.isRequired, parentPost: React.PropTypes.object, retryPost: React.PropTypes.func.isRequired, - handleCommentClick: React.PropTypes.func.isRequired + handleCommentClick: React.PropTypes.func.isRequired, + resize: React.PropTypes.func.isRequired }; |