Only load post body additional content when needed (#927)
* Only load post body additional content when needed * Feedback review
This commit is contained in:
parent
a09e1ebcc1
commit
757387a4de
3 changed files with 26 additions and 8 deletions
|
|
@ -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 {
|
|||
>
|
||||
<View>
|
||||
{messageComponent}
|
||||
{Boolean(this.state.link) &&
|
||||
<PostBodyAdditionalContent
|
||||
baseTextStyle={messageStyle}
|
||||
blockStyles={blockStyles}
|
||||
navigator={navigator}
|
||||
message={message}
|
||||
link={this.state.link}
|
||||
postProps={postProps}
|
||||
textStyles={textStyles}
|
||||
/>
|
||||
}
|
||||
{this.renderFileAttachments()}
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
|
|
@ -248,14 +266,17 @@ class PostBody extends PureComponent {
|
|||
cancelText={formatMessage({id: 'channel_modal.cancel', defaultMessage: 'Cancel'})}
|
||||
>
|
||||
{messageComponent}
|
||||
{Boolean(this.state.link) &&
|
||||
<PostBodyAdditionalContent
|
||||
baseTextStyle={messageStyle}
|
||||
blockStyles={blockStyles}
|
||||
message={message}
|
||||
navigator={navigator}
|
||||
message={message}
|
||||
link={this.state.link}
|
||||
postProps={postProps}
|
||||
textStyles={textStyles}
|
||||
/>
|
||||
}
|
||||
{this.renderFileAttachments()}
|
||||
{hasReactions && <Reactions postId={postId}/>}
|
||||
</OptionsContext>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue