Merge pull request #1433 from florianorben/PLT-862

PLT-862: Show images from website links below messages

3 files changed, 23 insertions, 19 deletions

diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx
index 617b4b36c..975ac64dc 100644
--- a/web/react/components/post_body.jsx
+++ b/web/react/components/post_body.jsx
@@ -16,13 +16,13 @@ export default class PostBody extends React.Component {
         super(props);
 
         this.receivedYoutubeData = false;
-        this.isGifLoading = false;
+        this.isImgLoading = false;
 
         this.handleUserChange = this.handleUserChange.bind(this);
         this.parseEmojis = this.parseEmojis.bind(this);
         this.createEmbed = this.createEmbed.bind(this);
-        this.createGifEmbed = this.createGifEmbed.bind(this);
-        this.loadGif = this.loadGif.bind(this);
+        this.createImageEmbed = this.createImageEmbed.bind(this);
+        this.loadImg = this.loadImg.bind(this);
         this.createYoutubeEmbed = this.createYoutubeEmbed.bind(this);
 
         const linkData = Utils.extractLinks(this.props.post.message);
@@ -117,8 +117,12 @@ export default class PostBody extends React.Component {
             return embed;
         }
 
-        if (link.substring(link.length - 4) === '.gif') {
-            return this.createGifEmbed(link, this.state.gifLoaded);
+        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 this.createImageEmbed(link, this.state.imgLoaded);
+            }
         }
 
         return null;
@@ -135,29 +139,29 @@ export default class PostBody extends React.Component {
         return false;
     }
 
-    loadGif(src) {
-        if (this.isGifLoading) {
+    loadImg(src) {
+        if (this.isImgLoading) {
             return;
         }
 
-        this.isGifLoading = true;
+        this.isImgLoading = true;
 
-        const gif = new Image();
-        gif.onload = (
+        const img = new Image();
+        img.onload = (
             () => {
-                this.embed = this.createGifEmbed(src, true);
-                this.setState({gifLoaded: true});
+                this.embed = this.createImageEmbed(src, true);
+                this.setState({imgLoaded: true});
             }
         );
-        gif.src = src;
+        img.src = src;
     }
 
-    createGifEmbed(link, isLoaded) {
+    createImageEmbed(link, isLoaded) {
         if (!isLoaded) {
-            this.loadGif(link);
+            this.loadImg(link);
             return (
                 <img
-                    className='gif-div placeholder'
+                    className='img-div placeholder'
                     height='500px'
                 />
             );
@@ -165,7 +169,7 @@ export default class PostBody extends React.Component {
 
         return (
             <img
-                className='gif-div'
+                className='img-div'
                 src={link}
             />
         );
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index cb140dce6..37626e303 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -280,7 +280,7 @@
             min-height: 100px;
         }
     }
-    .gif-div {
+    .img-div {
         max-width: 100%;
     }
     .tip-div {
diff --git a/web/sass-files/sass/partials/_videos.scss b/web/sass-files/sass/partials/_videos.scss
index bb36b6223..3f15f8f1e 100644
--- a/web/sass-files/sass/partials/_videos.scss
+++ b/web/sass-files/sass/partials/_videos.scss
@@ -51,7 +51,7 @@
 	border-left:60px solid rgba(255,255,255,0.4);
 }
 
-.gif-div {
+.img-div {
     -moz-force-broken-image-icon: 1;
     position:relative;
     max-width: 450px;