diff options
author | Corey Hulen <corey@hulen.com> | 2015-11-16 08:28:21 -0800 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2015-11-16 08:28:21 -0800 |
commit | d03b3830976c96aab59cb78177cfd0e82cc05b8d (patch) | |
tree | cd57b6a49307c28af7c5171689e649d49995c270 | |
parent | 675e4e714971af7bc0525ad9dfe2eef3f7ed7562 (diff) | |
parent | bfd1bbdab4cad3b2d2b63cc22ae922f2bb526b59 (diff) | |
download | chat-d03b3830976c96aab59cb78177cfd0e82cc05b8d.tar.gz chat-d03b3830976c96aab59cb78177cfd0e82cc05b8d.tar.bz2 chat-d03b3830976c96aab59cb78177cfd0e82cc05b8d.zip |
Merge pull request #1433 from florianorben/PLT-862
PLT-862: Show images from website links below messages
-rw-r--r-- | utils/textgeneration.go | 15 | ||||
-rw-r--r-- | web/react/components/post_body.jsx | 38 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 2 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_videos.scss | 2 |
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; |