diff options
Diffstat (limited to 'webapp/components/post_view')
3 files changed, 45 insertions, 24 deletions
diff --git a/webapp/components/post_view/components/post_body_additional_content.jsx b/webapp/components/post_view/components/post_body_additional_content.jsx index 130031233..180681100 100644 --- a/webapp/components/post_view/components/post_body_additional_content.jsx +++ b/webapp/components/post_view/components/post_body_additional_content.jsx @@ -23,19 +23,20 @@ export default class PostBodyAdditionalContent extends React.Component { this.toggleEmbedVisibility = this.toggleEmbedVisibility.bind(this); this.isLinkToggleable = this.isLinkToggleable.bind(this); this.handleLinkLoadError = this.handleLinkLoadError.bind(this); + this.handleLinkLoaded = this.handleLinkLoaded.bind(this); this.state = { embedVisible: props.previewCollapsed.startsWith('false'), link: Utils.extractFirstLink(props.post.message), - linkLoadError: false + linkLoadError: false, + linkLoaded: false }; } componentWillReceiveProps(nextProps) { this.setState({ embedVisible: nextProps.previewCollapsed.startsWith('false'), - link: Utils.extractFirstLink(nextProps.post.message), - linkLoadError: false + link: Utils.extractFirstLink(nextProps.post.message) }); } @@ -52,6 +53,9 @@ export default class PostBodyAdditionalContent extends React.Component { if (nextState.linkLoadError !== this.state.linkLoadError) { return true; } + if (nextState.linkLoaded !== this.state.linkLoaded) { + return true; + } return false; } @@ -105,6 +109,12 @@ export default class PostBodyAdditionalContent extends React.Component { }); } + handleLinkLoaded() { + this.setState({ + linkLoaded: true + }); + } + generateToggleableEmbed() { const link = this.state.link; if (!link) { @@ -127,6 +137,8 @@ export default class PostBodyAdditionalContent extends React.Component { channelId={this.props.post.channel_id} link={link} onLinkLoadError={this.handleLinkLoadError} + onLinkLoaded={this.handleLinkLoaded} + childComponentDidUpdateFunction={this.props.childComponentDidUpdateFunction} /> ); } @@ -174,11 +186,13 @@ export default class PostBodyAdditionalContent extends React.Component { </div> ); - let contents; - if (prependToggle) { - contents = [toggle, message]; - } else { - contents = [message, toggle]; + const contents = [message]; + if (this.state.linkLoaded) { + if (prependToggle) { + contents.unshift(toggle); + } else { + contents.push(toggle); + } } if (this.state.embedVisible) { diff --git a/webapp/components/post_view/components/post_image.jsx b/webapp/components/post_view/components/post_image.jsx index 2bdc5efc0..1268c9df2 100644 --- a/webapp/components/post_view/components/post_image.jsx +++ b/webapp/components/post_view/components/post_image.jsx @@ -32,6 +32,9 @@ export default class PostImageEmbed extends React.Component { } componentDidUpdate(prevProps) { + if (this.state.loaded && this.props.childComponentDidUpdateFunction) { + this.props.childComponentDidUpdateFunction(); + } if (!this.state.loaded && prevProps.link !== this.props.link) { this.loadImg(this.props.link); } @@ -46,8 +49,12 @@ export default class PostImageEmbed extends React.Component { handleLoadComplete() { this.setState({ - loaded: true + loaded: true, + errored: false }); + if (this.props.onLinkLoaded) { + this.props.onLinkLoaded(); + } } handleLoadError() { @@ -61,29 +68,26 @@ export default class PostImageEmbed extends React.Component { } render() { - if (this.state.errored) { + if (this.state.errored || !this.state.loaded) { return null; } - if (!this.state.loaded) { - return ( + return ( + <div + className='post__embed-container' + > <img - className='img-div placeholder' - height='500px' + className='img-div' + src={this.props.link} /> - ); - } - - return ( - <img - className='img-div' - src={this.props.link} - /> + </div> ); } } PostImageEmbed.propTypes = { link: PropTypes.string.isRequired, - onLinkLoadError: PropTypes.func + onLinkLoadError: PropTypes.func, + onLinkLoaded: PropTypes.func, + childComponentDidUpdateFunction: PropTypes.func }; diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx index 403e26f84..ec3c8dc6a 100644 --- a/webapp/components/post_view/components/post_list.jsx +++ b/webapp/components/post_view/components/post_list.jsx @@ -23,7 +23,7 @@ const ScrollTypes = Constants.ScrollTypes; import PostStore from 'stores/post_store.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; - +import ScrollStore from 'stores/scroll_store.jsx'; import {FormattedDate, FormattedMessage} from 'react-intl'; import PropTypes from 'prop-types'; @@ -49,6 +49,7 @@ export default class PostList extends React.Component { this.scrollToBottomAnimated = this.scrollToBottomAnimated.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); this.childComponentDidUpdate = this.childComponentDidUpdate.bind(this); + this.checkAndUpdateScrolling = this.checkAndUpdateScrolling.bind(this); this.jumpToPostNode = null; this.wasAtBottom = true; @@ -536,6 +537,7 @@ export default class PostList extends React.Component { window.addEventListener('keydown', this.handleKeyDown); PostStore.addPostDraftChangeListener(this.props.channelId, this.handlePostDraftChange); + ScrollStore.addPostScrollListener(this.checkAndUpdateScrolling); } handlePostDraftChange = (draft) => { @@ -550,6 +552,7 @@ export default class PostList extends React.Component { window.cancelAnimationFrame(this.animationFrameId); window.removeEventListener('resize', this.handleResize); window.removeEventListener('keydown', this.handleKeyDown); + ScrollStore.removePostScrollListener(this.checkAndUpdateScrolling); this.scrollStopAction.cancel(); PostStore.removePostDraftChangeListener(this.props.channelId, this.handlePostDraftChange); |