PLT-1049: Vine URLs should not generate preview links

web/react/components/post_attachment_oembed.jsx

@@ -0,0 +1,83 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+export default class PostAttachmentOEmbed extends React.Component {
+    constructor(props) {
+        super(props);
+        this.fetchData = this.fetchData.bind(this);
+
+        this.isLoading = false;
+    }
+
+    componentWillMount() {
+        this.setState({data: {}});
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.fetchData(nextProps.link);
+    }
+
+    fetchData(link) {
+        if (!this.isLoading) {
+            this.isLoading = true;
+            return $.ajax({
+                url: 'https://noembed.com/embed?nowrap=on&url=' + encodeURIComponent(link),
+                dataType: 'jsonp',
+                success: (result) => {
+                    this.isLoading = false;
+                    if (result.error) {
+                        this.setState({data: {}});
+                    } else {
+                        this.setState({data: result});
+                    }
+                },
+                error: () => {
+                    this.setState({data: {}});
+                }
+            });
+        }
+    }
+
+    render() {
+        if ($.isEmptyObject(this.state.data)) {
+            return <div></div>;
+        }
+
+        return (
+            <div
+                className='attachment attachment--oembed'
+                ref='attachment'
+            >
+                    <div className='attachment__content'>
+                        <div
+                            className={'clearfix attachment__container'}
+                        >
+                            <h1
+                                className='attachment__title'
+                            >
+                                <a
+                                    className='attachment__title-link'
+                                    href={this.state.data.url}
+                                    target='_blank'
+                                >
+                                    {this.state.data.title}
+                                </a>
+                            </h1>
+                            <div>
+                                <div className={'attachment__body attachment__body--no_thumb'}>
+                                    <div
+                                        dangerouslySetInnerHTML={{__html: this.state.data.html}}
+                                    >
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+            </div>
+        );
+    }
+}
+
+PostAttachmentOEmbed.propTypes = {
+    link: React.PropTypes.string.isRequired
+};

web/react/components/post_body.jsx

@@ -9,6 +9,8 @@ const TextFormatting = require('../utils/text_formatting.jsx');
 const twemoji = require('twemoji');
 const PostBodyAdditionalContent = require('./post_body_additional_content.jsx');
 
+const providers = require('../providers.json');
+
 export default class PostBody extends React.Component {
     constructor(props) {
         super(props);
@@ -23,7 +25,7 @@ export default class PostBody extends React.Component {
         this.createYoutubeEmbed = this.createYoutubeEmbed.bind(this);
 
         const linkData = Utils.extractLinks(this.props.post.message);
-        this.state = {links: linkData.links, message: linkData.text};
+        this.state = {links: linkData.links, message: linkData.text, post: this.props.post};
     }
 
     getAllChildNodes(nodeIn) {
@@ -45,6 +47,12 @@ export default class PostBody extends React.Component {
         twemoji.parse(ReactDOM.findDOMNode(this), {size: Constants.EMOJI_SIZE});
     }
 
+    componentWillMount() {
+        if (this.props.post.filenames.length === 0 && this.state.links && this.state.links.length > 0) {
+            this.embed = this.createEmbed(this.state.links[0]);
+        }
+    }
+
     componentDidMount() {
         this.parseEmojis();
     }
@@ -55,19 +63,54 @@ export default class PostBody extends React.Component {
 
     componentWillReceiveProps(nextProps) {
         const linkData = Utils.extractLinks(nextProps.post.message);
+        if (this.props.post.filenames.length === 0 && this.state.links && this.state.links.length > 0) {
+            this.embed = this.createEmbed(linkData.links[0]);
+        }
         this.setState({links: linkData.links, message: linkData.text});
     }
 
     createEmbed(link) {
-        let embed = this.createYoutubeEmbed(link);
+        const post = this.state.post;
+
+        if (!link) {
+            if (post.type === 'oEmbed') {
+                post.props.oEmbedLink = '';
+                post.type = '';
+            }
+            return null;
+        }
+
+        const trimmedLink = link.trim();
+
+        if (this.checkForOembedContent(trimmedLink)) {
+            post.props.oEmbedLink = trimmedLink;
+            post.type = 'oEmbed';
+            this.setState({post});
+            return '';
+        }
+
+        const embed = this.createYoutubeEmbed(link);
 
         if (embed != null) {
             return embed;
         }
 
-        embed = this.createGifEmbed(link);
+        if (link.substring(link.length - 4) === '.gif') {
+            return this.createGifEmbed(link, this.state.gifLoaded);
+        }
 
-        return embed;
+        return null;
+    }
+
+    checkForOembedContent(link) {
+        for (let i = 0; i < providers.length; i++) {
+            for (let j = 0; j < providers[i].patterns.length; j++) {
+                if (link.match(providers[i].patterns[j])) {
+                    return true;
+                }
+            }
+        }
+        return false;
     }
 
     loadGif(src) {
@@ -80,18 +123,15 @@ export default class PostBody extends React.Component {
         const gif = new Image();
         gif.onload = (
             () => {
+                this.embed = this.createGifEmbed(src, true);
                 this.setState({gifLoaded: true});
             }
         );
         gif.src = src;
     }
 
-    createGifEmbed(link) {
-        if (link.substring(link.length - 4) !== '.gif') {
-            return null;
-        }
-
-        if (!this.state.gifLoaded) {
+    createGifEmbed(link, isLoaded) {
+        if (!isLoaded) {
             this.loadGif(link);
             return (
                 <img
@@ -112,7 +152,7 @@ export default class PostBody extends React.Component {
     handleYoutubeTime(link) {
         const timeRegex = /[\\?&]t=([0-9hms]+)/;
 
-        const time = link.trim().match(timeRegex);
+        const time = link.match(timeRegex);
         if (!time || !time[1]) {
             return '';
         }
@@ -301,11 +341,6 @@ export default class PostBody extends React.Component {
             );
         }
 
-        let embed;
-        if (filenames.length === 0 && this.state.links && this.state.links.length > 0) {
-            embed = this.createEmbed(this.state.links[0]);
-        }
-
         let fileAttachmentHolder = '';
         if (filenames && filenames.length > 0) {
             fileAttachmentHolder = (
@@ -333,10 +368,10 @@ export default class PostBody extends React.Component {
                     />
                 </div>
                 <PostBodyAdditionalContent
-                    post={post}
+                    post={this.state.post}
                 />
                 {fileAttachmentHolder}
-                {embed}
+                {this.embed}
             </div>
         );
     }

web/react/components/post_body_additional_content.jsx

@@ -2,12 +2,14 @@
 // See License.txt for license information.
 
 const PostAttachmentList = require('./post_attachment_list.jsx');
+const PostAttachmentOEmbed = require('./post_attachment_oembed.jsx');
 
 export default class PostBodyAdditionalContent extends React.Component {
     constructor(props) {
         super(props);
 
         this.getSlackAttachment = this.getSlackAttachment.bind(this);
+        this.getOembedAttachment = this.getOembedAttachment.bind(this);
         this.getComponent = this.getComponent.bind(this);
     }
 
@@ -25,17 +27,31 @@ export default class PostBodyAdditionalContent extends React.Component {
         );
     }
 
+    getOembedAttachment() {
+        const link = this.props.post.props && this.props.post.props.oEmbedLink || '';
+        return (
+            <PostAttachmentOEmbed
+                key={'post_body_additional_content' + this.props.post.id}
+                link={link}
+            />
+        );
+    }
+
     getComponent() {
-        switch (this.state.type) {
+        switch (this.props.post.type) {
         case 'slack_attachment':
             return this.getSlackAttachment();
+        case 'oEmbed':
+            return this.getOembedAttachment();
+        default:
+            return '';
         }
     }
 
     render() {
         let content = [];
 
-        if (this.state.shouldRender) {
+        if (Boolean(this.props.post.type)) {
             const component = this.getComponent();
 
             if (component) {