diff options
author | Christopher Speller <crspeller@gmail.com> | 2016-02-24 08:35:34 -0500 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-02-24 08:35:34 -0500 |
commit | c5dc455a4c930c6521bd355d43b36a079dff8d55 (patch) | |
tree | 5b9768aa64d105c59226594dddd10ece52f71e31 /web/react/components/post_body_additional_content.jsx | |
parent | 940b706ac8a790db9f089e000489d89426915fc9 (diff) | |
parent | 1dbe949ce8f65f1110e0f43797bd757bfa906ee0 (diff) | |
download | chat-c5dc455a4c930c6521bd355d43b36a079dff8d55.tar.gz chat-c5dc455a4c930c6521bd355d43b36a079dff8d55.tar.bz2 chat-c5dc455a4c930c6521bd355d43b36a079dff8d55.zip |
Merge pull request #2233 from hmhealey/plt2010
PLT-2010/PLT-2071 Refactored Post Embed Components
Diffstat (limited to 'web/react/components/post_body_additional_content.jsx')
-rw-r--r-- | web/react/components/post_body_additional_content.jsx | 103 |
1 files changed, 67 insertions, 36 deletions
diff --git a/web/react/components/post_body_additional_content.jsx b/web/react/components/post_body_additional_content.jsx index 4871eea4f..a76c59fb3 100644 --- a/web/react/components/post_body_additional_content.jsx +++ b/web/react/components/post_body_additional_content.jsx @@ -3,72 +3,103 @@ import PostAttachmentList from './post_attachment_list.jsx'; import PostAttachmentOEmbed from './post_attachment_oembed.jsx'; +import PostImage from './post_image.jsx'; +import YoutubeVideo from './youtube_video.jsx'; + +import Constants from '../utils/constants.jsx'; +import OEmbedProviders from './providers.json'; +import * as Utils from '../utils/utils.jsx'; export default class PostBodyAdditionalContent extends React.Component { constructor(props) { super(props); this.getSlackAttachment = this.getSlackAttachment.bind(this); - this.getOembedAttachment = this.getOembedAttachment.bind(this); - this.getComponent = this.getComponent.bind(this); + this.getOEmbedProvider = this.getOEmbedProvider.bind(this); } - componentWillMount() { - this.setState({type: this.props.post.type, shouldRender: Boolean(this.props.post.type)}); + shouldComponentUpdate(nextProps) { + if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) { + return true; + } + + return false; } getSlackAttachment() { - const attachments = this.props.post.props && this.props.post.props.attachments || []; + let attachments = []; + if (this.props.post.props && this.props.post.props.attachments) { + attachments = this.props.post.props.attachments; + } + return ( <PostAttachmentList - key={'post_body_additional_content' + this.props.post.id} attachments={attachments} /> ); } - getOembedAttachment() { - const link = this.props.post.props && this.props.post.props.oEmbedLink || ''; - return ( - <PostAttachmentOEmbed - key={'post_body_additional_content' + this.props.post.id} - provider={this.props.provider} - link={link} - /> - ); + getOEmbedProvider(link) { + for (let i = 0; i < OEmbedProviders.length; i++) { + for (let j = 0; j < OEmbedProviders[i].patterns.length; j++) { + if (link.match(OEmbedProviders[i].patterns[j])) { + return OEmbedProviders[i]; + } + } + } + + return null; } - getComponent() { - switch (this.props.post.type) { - case 'slack_attachment': + render() { + if (this.props.post.type === 'slack_attachment') { return this.getSlackAttachment(); - case 'oEmbed': - return this.getOembedAttachment(); - default: - return ''; } - } - render() { - let content = []; + const link = Utils.extractLinks(this.props.post.message)[0]; + if (!link) { + return null; + } - if (this.props.post.type) { - const component = this.getComponent(); + if (Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMBED_PREVIEW)) { + const provider = this.getOEmbedProvider(link); - if (component) { - content = component; + if (provider) { + return ( + <PostAttachmentOEmbed + provider={provider} + link={link} + /> + ); } } - return ( - <div> - {content} - </div> - ); + if (YoutubeVideo.isYoutubeLink(link)) { + return ( + <YoutubeVideo + channelId={this.props.post.channel_id} + link={link} + /> + ); + } + + for (let i = 0; i < Constants.IMAGE_TYPES.length; i++) { + const imageType = Constants.IMAGE_TYPES[i]; + const suffix = link.substring(link.length - (imageType.length + 1)); + if (suffix === '.' + imageType || suffix === '=' + imageType) { + return ( + <PostImage + channelId={this.props.post.channel_id} + link={link} + /> + ); + } + } + + return null; } } PostBodyAdditionalContent.propTypes = { - post: React.PropTypes.object.isRequired, - provider: React.PropTypes.object + post: React.PropTypes.object.isRequired }; |