diff options
author | atp <pruthvip15@gmail.com> | 2017-08-25 20:01:30 +0530 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2017-08-25 10:31:30 -0400 |
commit | 99acf6106833a2186c0f7e07985feac5d9c25de1 (patch) | |
tree | ec66dcdf990cd7e95f0270d87734e5b0c274ca8c /webapp/components/post_view/post_body_additional_content.jsx | |
parent | 1a71589dce9781be8c9eca17a5d96f94b57d0679 (diff) | |
download | chat-99acf6106833a2186c0f7e07985feac5d9c25de1.tar.gz chat-99acf6106833a2186c0f7e07985feac5d9c25de1.tar.bz2 chat-99acf6106833a2186c0f7e07985feac5d9c25de1.zip |
PLT-5478: Hide collapse/expand arrow for image links when no image is available (#7216)
Diffstat (limited to 'webapp/components/post_view/post_body_additional_content.jsx')
-rw-r--r-- | webapp/components/post_view/post_body_additional_content.jsx | 29 |
1 files changed, 28 insertions, 1 deletions
diff --git a/webapp/components/post_view/post_body_additional_content.jsx b/webapp/components/post_view/post_body_additional_content.jsx index 9310d951e..bd7574949 100644 --- a/webapp/components/post_view/post_body_additional_content.jsx +++ b/webapp/components/post_view/post_body_additional_content.jsx @@ -54,11 +54,19 @@ export default class PostBodyAdditionalContent extends React.PureComponent { }; } + componentDidMount() { + // check the availability of the image rendered(if any) in the first render. + this.preCheckImageLink(); + } + componentWillReceiveProps(nextProps) { if (nextProps.previewCollapsed !== this.props.previewCollapsed || nextProps.post.message !== this.props.post.message) { this.setState({ embedVisible: nextProps.previewCollapsed.startsWith('false'), link: Utils.extractFirstLink(nextProps.post.message) + }, () => { + // check the availability of the image link + this.preCheckImageLink(); }); } } @@ -83,6 +91,24 @@ export default class PostBodyAdditionalContent extends React.PureComponent { ); } + // when image links are collapsed, check if the link is a valid image url and it is available + preCheckImageLink() { + // check only if embedVisible is false i.e the image are by default hidden/collapsed + // if embedVisible is true, the image is rendered, during which image load error is captured + if (!this.state.embedVisible && this.isLinkImage(this.state.link)) { + const image = new Image(); + image.src = this.state.link; + + image.onload = () => { + this.handleLinkLoaded(); + }; + + image.onerror = () => { + this.handleLinkLoadError(); + }; + } + } + isLinkImage(link) { const regex = /.+\/(.+\.(?:jpg|gif|bmp|png|jpeg))(?:\?.*)?$/i; const match = link.match(regex); @@ -194,7 +220,8 @@ export default class PostBodyAdditionalContent extends React.PureComponent { ); const contents = [message]; - if (this.state.linkLoaded || this.props.previewCollapsed.startsWith('true')) { + + if (this.state.linkLoaded || YoutubeVideo.isYoutubeLink(this.state.link)) { if (prependToggle) { contents.unshift(toggle); } else { |