diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/post_view/components/post_body_additional_content.jsx | 78 |
1 files changed, 56 insertions, 22 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 a51a557b9..a5d8afa61 100644 --- a/webapp/components/post_view/components/post_body_additional_content.jsx +++ b/webapp/components/post_view/components/post_body_additional_content.jsx @@ -21,14 +21,19 @@ export default class PostBodyAdditionalContent extends React.Component { this.generateToggleableEmbed = this.generateToggleableEmbed.bind(this); this.generateStaticEmbed = this.generateStaticEmbed.bind(this); this.toggleEmbedVisibility = this.toggleEmbedVisibility.bind(this); + this.isLinkToggleable = this.isLinkToggleable.bind(this); this.state = { - embedVisible: props.previewCollapsed.startsWith('false') + embedVisible: props.previewCollapsed.startsWith('false'), + link: Utils.extractFirstLink(props.post.message) }; } componentWillReceiveProps(nextProps) { - this.setState({embedVisible: nextProps.previewCollapsed.startsWith('false')}); + this.setState({ + embedVisible: nextProps.previewCollapsed.startsWith('false'), + link: Utils.extractFirstLink(nextProps.post.message) + }); } shouldComponentUpdate(nextProps, nextState) { @@ -73,8 +78,37 @@ export default class PostBodyAdditionalContent extends React.Component { return null; } + isLinkImage(link) { + 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 true; + } + } + + return false; + } + + isLinkToggleable() { + const link = this.state.link; + if (!link) { + return false; + } + + if (YoutubeVideo.isYoutubeLink(link)) { + return true; + } + + if (this.isLinkImage(link)) { + return true; + } + + return false; + } + generateToggleableEmbed() { - const link = Utils.extractFirstLink(this.props.post.message); + const link = this.state.link; if (!link) { return null; } @@ -89,17 +123,13 @@ export default class PostBodyAdditionalContent extends React.Component { ); } - 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 ( - <PostImage - channelId={this.props.post.channel_id} - link={link} - /> - ); - } + if (this.isLinkImage(link)) { + return ( + <PostImage + channelId={this.props.post.channel_id} + link={link} + /> + ); } return null; @@ -143,9 +173,7 @@ export default class PostBodyAdditionalContent extends React.Component { ); } - const toggleableEmbed = this.generateToggleableEmbed(); - - if (toggleableEmbed) { + if (this.isLinkToggleable()) { let messageWithToggle = []; // if message has only one line and starts with a link place toggle in this only line @@ -166,15 +194,21 @@ export default class PostBodyAdditionalContent extends React.Component { messageWithToggle.unshift(this.props.message); } - return ( - <div> - {messageWithToggle} + let toggleableEmbed; + if (this.state.embedVisible) { + toggleableEmbed = ( <div className='post__embed-container' - hidden={!this.state.embedVisible} > - {toggleableEmbed} + {this.generateToggleableEmbed()} </div> + ); + } + + return ( + <div> + {messageWithToggle} + {toggleableEmbed} </div> ); } |