toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix post additional content (#962)

Browse source 
* Fix post additional content

* Feedback review
This commit is contained in:
enahum 2017-09-28 12:02:41 -03:00 committed by GitHub
parent 0c3bb89832
commit a694122ffd
3 changed files with 62 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/components/post_body/post_body.js
View file

@ -21,7 +21,6 @@ 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';
@ -67,20 +66,6 @@ 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);
};
@ -241,17 +226,14 @@ 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>
@ -266,17 +248,14 @@ class PostBody extends PureComponent {
cancelText={formatMessage({id: 'channel_modal.cancel', defaultMessage: 'Cancel'})}
>
{messageComponent}
{Boolean(this.state.link) &&
<PostBodyAdditionalContent
baseTextStyle={messageStyle}
blockStyles={blockStyles}
navigator={navigator}
message={message}
link={this.state.link}
postProps={postProps}
textStyles={textStyles}
/>
}
{this.renderFileAttachments()}
{hasReactions && <Reactions postId={postId}/>}
</OptionsContext>

43
app/components/post_body_additional_content/index.js
View file

@ -14,21 +14,42 @@ import {getBool} from 'mattermost-redux/selectors/entities/preferences';
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}`);
function makeGetFirstLink() {
let link;
let lastMessage;
return {
...ownProps,
...getDimensions(state),
config,
openGraphData: getOpenGraphMetadataForUrl(state, ownProps.link),
showLinkPreviews: previewsEnabled && config.EnableLinkPreviews === 'true',
theme: getTheme(state)
return (message) => {
if (message !== lastMessage) {
link = extractFirstLink(message);
lastMessage = message;
}
return link;
};
}
export default connect(mapStateToProps)(PostBodyAdditionalContent);
function makeMapStateToProps() {
const getFirstLink = makeGetFirstLink();
return 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 = getFirstLink(ownProps.message);
return {
...ownProps,
...getDimensions(state),
config,
link,
openGraphData: getOpenGraphMetadataForUrl(state, link),
showLinkPreviews: previewsEnabled && config.EnableLinkPreviews === 'true',
theme: getTheme(state)
};
};
}
export default connect(makeMapStateToProps)(PostBodyAdditionalContent);

52
app/components/post_body_additional_content/post_body_additional_content.js
View file

@ -120,23 +120,25 @@ export default class PostBodyAdditionalContent extends PureComponent {
const {link} = this.props;
const {linkLoaded} = this.state;
let imageUrl;
if (isImageLink(link)) {
imageUrl = link;
} else if (isYoutubeLink(link)) {
const videoId = youTubeVideoId(link);
imageUrl = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;
}
if (link) {
let imageUrl;
if (isImageLink(link)) {
imageUrl = link;
} else if (isYoutubeLink(link)) {
const videoId = youTubeVideoId(link);
imageUrl = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;
}
if (imageUrl && !linkLoaded) {
Image.getSize(imageUrl, (width, height) => {
if (!this.mounted) {
return;
}
if (imageUrl && !linkLoaded) {
Image.getSize(imageUrl, (width, height) => {
if (!this.mounted) {
return;
}
const dimensions = this.calculateDimensions(width, height);
this.setState({...dimensions, linkLoaded: true});
}, () => null);
const dimensions = this.calculateDimensions(width, height);
this.setState({...dimensions, linkLoaded: true});
}, () => null);
}
}
};
@ -244,14 +246,20 @@ export default class PostBodyAdditionalContent extends PureComponent {
render() {
const {link, openGraphData} = this.props;
const {linkLoaded, linkLoadError} = this.state;
const isYouTube = isYoutubeLink(link);
const isImage = isImageLink(link);
const isOpenGraph = Boolean(openGraphData && openGraphData.description);
let isYouTube = false;
let isImage = false;
let isOpenGraph = false;
if (((isImage && !isOpenGraph) || isYouTube) && !linkLoadError) {
const embed = this.generateToggleableEmbed(isImage, isYouTube);
if (embed && (linkLoaded || isYouTube)) {
return embed;
if (link) {
isYouTube = isYoutubeLink(link);
isImage = isImageLink(link);
isOpenGraph = Boolean(openGraphData && openGraphData.description);
if (((isImage && !isOpenGraph) || isYouTube) && !linkLoadError) {
const embed = this.generateToggleableEmbed(isImage, isYouTube);
if (embed && (linkLoaded || isYouTube)) {
return embed;
}
}
}