From 99acf6106833a2186c0f7e07985feac5d9c25de1 Mon Sep 17 00:00:00 2001
From: atp <pruthvip15@gmail.com>
Date: Fri, 25 Aug 2017 20:01:30 +0530
Subject: PLT-5478: Hide collapse/expand arrow for image links when no image is
 available (#7216)

---
 .../post_view/post_body_additional_content.jsx     | 29 +++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

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 {
-- 
cgit v1.2.3-1-g7c22