Merge pull request #1433 from florianorben/PLT-862

PLT-862: Show images from website links below messages

4 files changed, 34 insertions, 23 deletions

diff --git a/utils/textgeneration.go b/utils/textgeneration.go
index affd65bc1..31b6517b8 100644
--- a/utils/textgeneration.go
+++ b/utils/textgeneration.go
@@ -126,6 +126,13 @@ http://en.wikipedia.org/wiki/Foo
 https://vine.co/v/eDeVgbFrt9L
 `,
 
+	`**[7] [Image Test]**
+
+## this *should* display an image
+
+http://37.media.tumblr.com/tumblr_mavsumGGAd1qboaw8o1_500.jpg
+`,
+
 	/*	`**[2] [Username Linking Test]**
 		I saw @alice--and I said "Hi @alice!" then "What's up @alice?" and then @alice, was totally @alice; she just "@alice"'d me and walked on by. That's @alice...
 		@alice‽‽
@@ -134,7 +141,7 @@ https://vine.co/v/eDeVgbFrt9L
 			`**[3] [Mention Highlighting Test]**
 		`,*/
 
-	`**[4] [Emoji Display Test 1]**
+	`**[8] [Emoji Display Test 1]**
 :+1: :-1: :100: :1234: :8ball: :a: :ab: :abc: :abcd: :accept: 
 :aerial_tramway: :airplane: :alarm_clock: :ambulance: :anchor: :angel: :anger: :angry: :anguished: :ant: 
 :apple: :aquarius: :aries: :arrow_backward: :arrow_double_down: :arrow_double_up: :arrow_down: :arrow_down_small: :arrow_forward: :arrow_heading_down:
@@ -169,7 +176,7 @@ https://vine.co/v/eDeVgbFrt9L
 :fork_and_knife: :fountain: :four: :four_leaf_clover: :fr: :free: :fried_shrimp: :fries: :frog: :frowning:
 :fu: :fuelpump: :full_moon: :full_moon_with_face: :game_die: :gb: :gem: :gemini: :ghost: :gift:`,
 
-	`**[5] [Emoji Display Test 2]**
+	`**[9] [Emoji Display Test 2]**
 :gift_heart: :girl: :globe_with_meridians: :goat: :goberserk: :godmode: :golf: :grapes: :green_apple: :green_book:
 :green_heart: :grey_exclamation: :grey_question: :grimacing: :grin: :grinning: :guardsman: :guitar: :gun: :haircut: 
 :hamburger: :hammer: :hamster: :hand: :handbag: :hankey: :hash: :hatched_chick: :hatching_chick: :headphones:
@@ -198,7 +205,7 @@ https://vine.co/v/eDeVgbFrt9L
 :person_with_blond_hair: :person_with_pouting_face: :phone: :pig: :pig2: :pig_nose: :pill: :pineapple: :pisces: :pizza:
 `,
 
-	`**[6] [Emoji Display Test 3]**
+	`**[10] [Emoji Display Test 3]**
 :plus1: :point_down: :point_left: :point_right: :point_up: :point_up_2: :police_car: :poodle: :poop: :post_office:
 :postal_horn: :postbox: :potable_water: :pouch: :poultry_leg: :pound: :pouting_cat: :pray: :princess: :punch: 
 :purple_heart: :purse: :pushpin: :put_litter_in_its_place: :question: :rabbit: :rabbit2: :racehorse: :radio: :radio_button:
@@ -231,7 +238,7 @@ https://vine.co/v/eDeVgbFrt9L
 Unnamed: :u5272: :u5408: :u55b6: :u6307: :u6708: :u6709: :u6e80: :u7121: :u7533: :u7981: :u7a7a:
 `,
 
-	`**[7] [Auto Linking]**
+	`**[11] [Auto Linking]**
 #### should be turned into links:
 http://example.com
 https://example.com
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;