IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

PLT-5057 Make image preview work if URL contains a query (#4869)

Browse Source 
* Fixed image previews urls having query params

* dont show expand/collapse icon if image link fails to load
This commit is contained in:
khawerrind
2017-01-19 02:02:03 +05:00
committed by enahum
parent 9eb5727841
commit bcd7da510d
2 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
webapp/components/post_view/components/post_body_additional_content.jsx
View File

@@ -22,17 +22,20 @@ export default class PostBodyAdditionalContent extends React.Component {
this.generateStaticEmbed = this.generateStaticEmbed.bind(this);
this.toggleEmbedVisibility = this.toggleEmbedVisibility.bind(this);
this.isLinkToggleable = this.isLinkToggleable.bind(this);
this.handleLinkLoadError = this.handleLinkLoadError.bind(this);
this.state = {
embedVisible: props.previewCollapsed.startsWith('false'),
link: Utils.extractFirstLink(props.post.message)
link: Utils.extractFirstLink(props.post.message),
linkLoadError: false
};
}
componentWillReceiveProps(nextProps) {
this.setState({
embedVisible: nextProps.previewCollapsed.startsWith('false'),
link: Utils.extractFirstLink(nextProps.post.message)
link: Utils.extractFirstLink(nextProps.post.message),
linkLoadError: false
});
}
@@ -46,6 +49,9 @@ export default class PostBodyAdditionalContent extends React.Component {
if (nextState.embedVisible !== this.state.embedVisible) {
return true;
}
if (nextState.linkLoadError !== this.state.linkLoadError) {
return true;
}
return false;
}
@@ -79,12 +85,10 @@ export default class PostBodyAdditionalContent extends React.Component {
}
isLinkImage(link) {
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 true;
}
const regex = /.+\/(.+\.(?:jpg|gif|bmp|png|jpeg))(?:\?.*)?$/i;
const match = link.match(regex);
if (match && match[1]) {
return true;
}
return false;
@@ -107,6 +111,12 @@ export default class PostBodyAdditionalContent extends React.Component {
return false;
}
handleLinkLoadError() {
this.setState({
linkLoadError: true
});
}
generateToggleableEmbed() {
const link = this.state.link;
if (!link) {
@@ -128,6 +138,7 @@ export default class PostBodyAdditionalContent extends React.Component {
<PostImage
channelId={this.props.post.channel_id}
link={link}
onLinkLoadError={this.handleLinkLoadError}
/>
);
}
@@ -173,7 +184,7 @@ export default class PostBodyAdditionalContent extends React.Component {
);
}
if (this.isLinkToggleable()) {
if (this.isLinkToggleable() && !this.state.linkLoadError) {
const messageWithToggle = [];
// if message has only one line and starts with a link place toggle in this only line

6
webapp/components/post_view/components/post_image.jsx
View File

@@ -53,6 +53,9 @@ export default class PostImageEmbed extends React.Component {
errored: true,
loaded: true
});
if (this.props.onLinkLoadError) {
this.props.onLinkLoadError();
}
}
render() {
@@ -79,5 +82,6 @@ export default class PostImageEmbed extends React.Component {
}
PostImageEmbed.propTypes = {
link: React.PropTypes.string.isRequired
link: React.PropTypes.string.isRequired,
onLinkLoadError: React.PropTypes.func
};