diff --git a/app/components/post_body/post_body.js b/app/components/post_body/post_body.js index 6bae82fa7..a288ebb0b 100644 --- a/app/components/post_body/post_body.js +++ b/app/components/post_body/post_body.js @@ -21,6 +21,7 @@ import PostBodyAdditionalContent from 'app/components/post_body_additional_conte import {emptyFunction} from 'app/utils/general'; import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown'; +import {extractFirstLink} from 'app/utils/url'; import {makeStyleSheetFromTheme} from 'app/utils/theme'; import Reactions from 'app/components/reactions'; @@ -66,6 +67,20 @@ class PostBody extends PureComponent { toggleSelected: emptyFunction }; + constructor(props) { + super(props); + + this.state = { + link: extractFirstLink(props.message) + }; + } + + componentWillReceiveProps(nextProps) { + if (nextProps.message !== this.props.message) { + this.setState({link: extractFirstLink(nextProps.message)}); + } + } + handleHideUnderlay = () => { this.props.toggleSelected(false); }; @@ -226,14 +241,17 @@ class PostBody extends PureComponent { > {messageComponent} + {Boolean(this.state.link) && + } {this.renderFileAttachments()} @@ -248,14 +266,17 @@ class PostBody extends PureComponent { cancelText={formatMessage({id: 'channel_modal.cancel', defaultMessage: 'Cancel'})} > {messageComponent} + {Boolean(this.state.link) && + } {this.renderFileAttachments()} {hasReactions && } diff --git a/app/components/post_body_additional_content/index.js b/app/components/post_body_additional_content/index.js index 03700017d..95590ae6d 100644 --- a/app/components/post_body_additional_content/index.js +++ b/app/components/post_body_additional_content/index.js @@ -15,20 +15,17 @@ import {ViewTypes} from 'app/constants'; import {getDimensions} from 'app/selectors/device'; import {getTheme} from 'app/selectors/preferences'; -import {extractFirstLink} from 'app/utils/url'; import PostBodyAdditionalContent from './post_body_additional_content'; function mapStateToProps(state, ownProps) { const config = getConfig(state); const previewsEnabled = getBool(state, Preferences.CATEGORY_ADVANCED_SETTINGS, `${ViewTypes.FEATURE_TOGGLE_PREFIX}${ViewTypes.EMBED_PREVIEW}`); - const link = extractFirstLink(ownProps.message); return { ...ownProps, ...getDimensions(state), config, - link, - openGraphData: getOpenGraphMetadataForUrl(state, link), + openGraphData: getOpenGraphMetadataForUrl(state, ownProps.link), showLinkPreviews: previewsEnabled && config.EnableLinkPreviews === 'true', theme: getTheme(state) }; diff --git a/app/components/post_body_additional_content/post_body_additional_content.js b/app/components/post_body_additional_content/post_body_additional_content.js index 8fa69f9af..6612aebcd 100644 --- a/app/components/post_body_additional_content/post_body_additional_content.js +++ b/app/components/post_body_additional_content/post_body_additional_content.js @@ -93,8 +93,8 @@ export default class PostBodyAdditionalContent extends PureComponent { return {width: maxWidth, height: maxHeight}; }; - generateStaticEmbed = (isYouTube) => { - if (isYouTube) { + generateStaticEmbed = (isYouTube, isImage) => { + if (isYouTube || isImage) { return null; } @@ -255,7 +255,7 @@ export default class PostBodyAdditionalContent extends PureComponent { } } - return this.generateStaticEmbed(isYouTube); + return this.generateStaticEmbed(isYouTube, isImage); } }