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);
}
}