From 9b50fb855350ea1e747ee946ab3f955430abeb75 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 23 Feb 2016 16:28:16 -0500 Subject: Refactored embedded image/video code and prevented them from being displayed on deleted posts --- .../components/post_body_additional_content.jsx | 123 +++++++++++++++------ 1 file changed, 87 insertions(+), 36 deletions(-) (limited to 'web/react/components/post_body_additional_content.jsx') diff --git a/web/react/components/post_body_additional_content.jsx b/web/react/components/post_body_additional_content.jsx index 4871eea4f..c0a52dc92 100644 --- a/web/react/components/post_body_additional_content.jsx +++ b/web/react/components/post_body_additional_content.jsx @@ -3,72 +3,123 @@ 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); + + this.state = { + link: Utils.extractLinks(props.post.message)[0] + }; } - componentWillMount() { - this.setState({type: this.props.post.type, shouldRender: Boolean(this.props.post.type)}); + componentWillReceiveProps(nextProps) { + if (this.props.post.message !== nextProps.post.message) { + this.setState({ + link: Utils.extractLinks(nextProps.post.message)[0] + }); + } + } + + shouldComponentUpdate(nextProps, nextState) { + if (nextState.link !== this.state.link) { + return true; + } + + if (nextProps.post.type !== this.props.post.type) { + return true; + } + + if (!Utils.areObjectsEqual(nextProps.post.props, this.props.post.props)) { + 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 ( ); } - getOembedAttachment() { - const link = this.props.post.props && this.props.post.props.oEmbedLink || ''; - return ( - - ); + 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 = this.state.link; + 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 ( + + ); } } - return ( -
- {content} -
- ); + if (YoutubeVideo.isYoutubeLink(link)) { + return ( + + ); + } + + 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 ( + + ); + } + } + + return null; } } PostBodyAdditionalContent.propTypes = { - post: React.PropTypes.object.isRequired, - provider: React.PropTypes.object + post: React.PropTypes.object.isRequired }; -- cgit v1.2.3-1-g7c22 From 1dbe949ce8f65f1110e0f43797bd757bfa906ee0 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 23 Feb 2016 16:45:43 -0500 Subject: Removed unnecessary state from PostBodyAdditionalContent --- .../components/post_body_additional_content.jsx | 26 +++------------------- 1 file changed, 3 insertions(+), 23 deletions(-) (limited to 'web/react/components/post_body_additional_content.jsx') diff --git a/web/react/components/post_body_additional_content.jsx b/web/react/components/post_body_additional_content.jsx index c0a52dc92..a76c59fb3 100644 --- a/web/react/components/post_body_additional_content.jsx +++ b/web/react/components/post_body_additional_content.jsx @@ -16,30 +16,10 @@ export default class PostBodyAdditionalContent extends React.Component { this.getSlackAttachment = this.getSlackAttachment.bind(this); this.getOEmbedProvider = this.getOEmbedProvider.bind(this); - - this.state = { - link: Utils.extractLinks(props.post.message)[0] - }; } - componentWillReceiveProps(nextProps) { - if (this.props.post.message !== nextProps.post.message) { - this.setState({ - link: Utils.extractLinks(nextProps.post.message)[0] - }); - } - } - - shouldComponentUpdate(nextProps, nextState) { - if (nextState.link !== this.state.link) { - return true; - } - - if (nextProps.post.type !== this.props.post.type) { - return true; - } - - if (!Utils.areObjectsEqual(nextProps.post.props, this.props.post.props)) { + shouldComponentUpdate(nextProps) { + if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) { return true; } @@ -76,7 +56,7 @@ export default class PostBodyAdditionalContent extends React.Component { return this.getSlackAttachment(); } - const link = this.state.link; + const link = Utils.extractLinks(this.props.post.message)[0]; if (!link) { return null; } -- cgit v1.2.3-1-g7c22