diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2015-10-23 09:40:36 -0400 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2015-10-23 09:40:36 -0400 |
commit | 6724ef4314efbd82e9b608b53679444d60c4ba08 (patch) | |
tree | d418bacee42675152bf0d424b49c6f6ce868e9fc /web | |
parent | 510abb408b7524cad4be3b1bb73231cfba6fbe43 (diff) | |
parent | 4c0e4991e76c18fd39ffadcf5b0e1943fb4cd2c3 (diff) | |
download | chat-6724ef4314efbd82e9b608b53679444d60c4ba08.tar.gz chat-6724ef4314efbd82e9b608b53679444d60c4ba08.tar.bz2 chat-6724ef4314efbd82e9b608b53679444d60c4ba08.zip |
Merge pull request #1140 from mattermost/plt-787
PLT-787 Auto-embed gifs from .gif links
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/post.jsx | 10 | ||||
-rw-r--r-- | web/react/components/post_body.jsx | 56 | ||||
-rw-r--r-- | web/react/components/post_list.jsx | 10 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_videos.scss | 8 |
4 files changed, 79 insertions, 5 deletions
diff --git a/web/react/components/post.jsx b/web/react/components/post.jsx index bc3144dbc..dedac8951 100644 --- a/web/react/components/post.jsx +++ b/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 }; diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index ae94bd42e..45eae8c6a 100644 --- a/web/react/components/post_body.jsx +++ b/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 }; diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index fd29a303c..3ceef478c 100644 --- a/web/react/components/post_list.jsx +++ b/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} /> ); diff --git a/web/sass-files/sass/partials/_videos.scss b/web/sass-files/sass/partials/_videos.scss index 6ae5b488b..f6999d15c 100644 --- a/web/sass-files/sass/partials/_videos.scss +++ b/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 +} |