Merge pull request #1140 from mattermost/plt-787

PLT-787 Auto-embed gifs from .gif links

web/react/components/post.jsx

@@ -120,6 +120,10 @@ export default class Post extends React.Component {
         var parentPost = this.props.parentPost;
         var posts = this.props.posts;
 
+        if (!post.props) {
+            post.props = {};
+        }
+
         var type = 'Post';
         if (post.root_id && post.root_id.length > 0) {
             type = 'Comment';
@@ -140,7 +144,7 @@ export default class Post extends React.Component {
         }
 
         var currentUserCss = '';
-        if (UserStore.getCurrentId() === post.user_id) {
+        if (UserStore.getCurrentId() === post.user_id && !post.props.from_webhook) {
             currentUserCss = 'current--user';
         }
 
@@ -200,6 +204,7 @@ export default class Post extends React.Component {
                             posts={posts}
                             handleCommentClick={this.handleCommentClick}
                             retryPost={this.retryPost}
+                            resize={this.props.resize}
                         />
                         <PostInfo
                             ref='info'
@@ -223,5 +228,6 @@ Post.propTypes = {
     sameUser: React.PropTypes.bool,
     sameRoot: React.PropTypes.bool,
     hideProfilePic: React.PropTypes.bool,
-    isLastComment: React.PropTypes.bool
+    isLastComment: React.PropTypes.bool,
+    resize: React.PropTypes.func
 };

web/react/components/post_body.jsx

@@ -13,8 +13,12 @@ export default class PostBody extends React.Component {
         super(props);
 
         this.receivedYoutubeData = false;
+        this.isGifLoading = false;
 
         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.createYoutubeEmbed = this.createYoutubeEmbed.bind(this);
 
         const linkData = Utils.extractLinks(this.props.post.message);
@@ -46,6 +50,7 @@ export default class PostBody extends React.Component {
 
     componentDidUpdate() {
         this.parseEmojis();
+        this.props.resize();
     }
 
     componentWillReceiveProps(nextProps) {
@@ -53,6 +58,52 @@ export default class PostBody extends React.Component {
         this.setState({links: linkData.links, message: linkData.text});
     }
 
+    createEmbed(link) {
+        let embed = this.createYoutubeEmbed(link);
+
+        if (embed != null) {
+            return embed;
+        }
+
+        embed = this.createGifEmbed(link);
+
+        return embed;
+    }
+
+    loadGif(src) {
+        if (this.isGifLoading) {
+            return;
+        }
+
+        this.isGifLoading = true;
+
+        const gif = new Image();
+        gif.src = src;
+        gif.onload = (
+            () => {
+                this.setState({gifLoaded: true});
+            }
+        );
+    }
+
+    createGifEmbed(link) {
+        if (link.substring(link.length - 4) !== '.gif') {
+            return null;
+        }
+
+        if (!this.state.gifLoaded) {
+            this.loadGif(link);
+            return null;
+        }
+
+        return (
+            <img
+                className='gif-div'
+                src={link}
+            />
+        );
+    }
+
     handleYoutubeTime(link) {
         const timeRegex = /[\\?&]t=([0-9hms]+)/;
 
@@ -247,7 +298,7 @@ export default class PostBody extends React.Component {
 
         let embed;
         if (filenames.length === 0 && this.state.links) {
-            embed = this.createYoutubeEmbed(this.state.links[0]);
+            embed = this.createEmbed(this.state.links[0]);
         }
 
         let fileAttachmentHolder = '';
@@ -287,5 +338,6 @@ PostBody.propTypes = {
     post: React.PropTypes.object.isRequired,
     parentPost: React.PropTypes.object,
     retryPost: React.PropTypes.func.isRequired,
-    handleCommentClick: React.PropTypes.func.isRequired
+    handleCommentClick: React.PropTypes.func.isRequired,
+    resize: React.PropTypes.func.isRequired
 };

web/react/components/post_list.jsx

@@ -42,6 +42,7 @@ export default class PostList extends React.Component {
         this.deactivate = this.deactivate.bind(this);
         this.handleResize = this.handleResize.bind(this);
         this.resizePostList = this.resizePostList.bind(this);
+        this.updateScroll = this.updateScroll.bind(this);
 
         const state = this.getStateFromStores(props.channelId);
         state.numToDisplay = Constants.POST_CHUNK_SIZE;
@@ -205,9 +206,10 @@ export default class PostList extends React.Component {
             this.scrollToBottom();
 
         // there's a new post and
-        // it's by the user and not a comment
+        // it's by the user (and not from their webhook) and not a comment
         } else if (isNewPost &&
                     userId === firstPost.user_id &&
+                    !firstPost.props.from_webhook &&
                     !Utils.isComment(firstPost)) {
             this.scrollToBottom(true);
 
@@ -237,6 +239,11 @@ export default class PostList extends React.Component {
             this.deactivate();
         }
     }
+    updateScroll() {
+        if (!this.scrolled) {
+            this.scrollToBottom();
+        }
+    }
     handleResize() {
         this.setState({
             windowHeight: Utils.windowHeight()
@@ -550,6 +557,7 @@ export default class PostList extends React.Component {
                     posts={posts}
                     hideProfilePic={hideProfilePic}
                     isLastComment={isLastComment}
+                    resize={this.updateScroll}
                 />
             );
 

web/sass-files/sass/partials/_videos.scss

@@ -50,3 +50,11 @@
 	border-bottom:36px solid transparent;
 	border-left:60px solid rgba(255,255,255,0.4);
 }
+
+.gif-div {
+    position:relative;
+    max-width: 450px;
+    max-height: 500px;
+    margin-bottom: 8px;
+    border-radius:5px
+}