From ab67f6e257f6e8f08145a02a7b93550f99641be4 Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Sun, 18 Jun 2017 14:42:32 -0400 Subject: PLT-6215 Major post list refactor (#6501) * Major post list refactor * Fix post and thread deletion * Fix preferences not selecting correctly * Fix military time displaying * Fix UP key for editing posts * Fix ESLint error * Various fixes and updates per feedback * Fix for permalink view * Revert to old scrolling method and various fixes * Add floating timestamp, new message indicator, scroll arrows * Update post loading for focus mode and add visibility limit * Fix pinning posts and a react warning * Add loading UI updates from Asaad * Fix refreshing loop * Temporarily bump post visibility limit * Update infinite scrolling * Remove infinite scrolling --- .../post_attachment_opengraph.jsx | 259 +++++++++++++++++++++ 1 file changed, 259 insertions(+) create mode 100644 webapp/components/post_view/post_attachment_opengraph/post_attachment_opengraph.jsx (limited to 'webapp/components/post_view/post_attachment_opengraph/post_attachment_opengraph.jsx') diff --git a/webapp/components/post_view/post_attachment_opengraph/post_attachment_opengraph.jsx b/webapp/components/post_view/post_attachment_opengraph/post_attachment_opengraph.jsx new file mode 100644 index 000000000..dbf8f6049 --- /dev/null +++ b/webapp/components/post_view/post_attachment_opengraph/post_attachment_opengraph.jsx @@ -0,0 +1,259 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; +import PropTypes from 'prop-types'; + +import * as Utils from 'utils/utils.jsx'; +import * as CommonUtils from 'utils/commons.jsx'; + +export default class PostAttachmentOpenGraph extends React.PureComponent { + static propTypes = { + + /** + * The link to display the open graph data for + */ + link: PropTypes.string.isRequired, + + /** + * The open graph data to render + */ + openGraphData: PropTypes.object.isRequired, + + /** + * Set to collapse the preview + */ + previewCollapsed: PropTypes.string, + actions: PropTypes.shape({ + + /** + * The function to get open graph data for a link + */ + getOpenGraphMetadata: PropTypes.func.isRequired + }).isRequired + } + + constructor(props) { + super(props); + this.largeImageMinWidth = 150; + this.imageDimentions = { // Image dimentions in pixels. + height: 80, + width: 80 + }; + this.textMaxLenght = 300; + this.textEllipsis = '...'; + this.largeImageMinRatio = 16 / 9; + this.smallImageContainerLeftPadding = 15; + + this.imageRatio = null; + + this.smallImageContainer = null; + this.smallImageElement = null; + + this.fetchData = this.fetchData.bind(this); + this.toggleImageVisibility = this.toggleImageVisibility.bind(this); + this.onImageLoad = this.onImageLoad.bind(this); + this.onImageError = this.onImageError.bind(this); + this.truncateText = this.truncateText.bind(this); + } + + IMAGE_LOADED = { + LOADING: 'loading', + YES: 'yes', + ERROR: 'error' + } + + componentWillMount() { + this.setState({ + imageLoaded: this.IMAGE_LOADED.LOADING, + imageVisible: this.props.previewCollapsed.startsWith('false'), + hasLargeImage: false + }); + this.fetchData(this.props.link); + } + + componentWillReceiveProps(nextProps) { + if (nextProps.link !== this.props.link) { + this.fetchData(nextProps.link); + } + } + + fetchData(url) { + if (!this.props.openGraphData) { + this.props.actions.getOpenGraphMetadata(url); + } + } + + getBestImageUrl() { + if (Utils.isEmptyObject(this.props.openGraphData.images)) { + return null; + } + + const bestImage = CommonUtils.getNearestPoint(this.imageDimentions, this.props.openGraphData.images, 'width', 'height'); + return bestImage.secure_url || bestImage.url; + } + + toggleImageVisibility() { + this.setState({imageVisible: !this.state.imageVisible}); + } + + onImageLoad(image) { + this.imageRatio = image.target.naturalWidth / image.target.naturalHeight; + if ( + image.target.naturalWidth >= this.largeImageMinWidth && + this.imageRatio >= this.largeImageMinRatio && + !this.state.hasLargeImage + ) { + this.setState({ + hasLargeImage: true + }); + } + this.setState({ + imageLoaded: this.IMAGE_LOADED.YES + }); + } + + onImageError() { + this.setState({imageLoaded: this.IMAGE_LOADED.ERROR}); + } + + loadImage(src) { + const img = new Image(); + img.onload = this.onImageLoad; + img.onerror = this.onImageError; + img.src = src; + } + + imageToggleAnchoreTag(imageUrl) { + if (imageUrl && this.state.hasLargeImage) { + return ( + + ); + } + return null; + } + + wrapInSmallImageContainer(imageElement) { + return ( +
{ + this.smallImageContainer = div; + }} + > + {imageElement} +
+ ); + } + + imageTag(imageUrl, renderingForLargeImage = false) { + var element = null; + if ( + imageUrl && renderingForLargeImage === this.state.hasLargeImage && + (!renderingForLargeImage || (renderingForLargeImage && this.state.imageVisible)) + ) { + if (this.state.imageLoaded === this.IMAGE_LOADED.LOADING) { + if (renderingForLargeImage) { + element = ; + } else { + element = this.wrapInSmallImageContainer( + + ); + } + } else if (this.state.imageLoaded === this.IMAGE_LOADED.YES) { + if (renderingForLargeImage) { + element = ( + + ); + } else { + element = this.wrapInSmallImageContainer( + { + this.smallImageElement = img; + }} + /> + ); + } + } else if (this.state.imageLoaded === this.IMAGE_LOADED.ERROR) { + return null; + } + } + return element; + } + + truncateText(text, maxLength = this.textMaxLenght, ellipsis = this.textEllipsis) { + if (text.length > maxLength) { + return text.substring(0, maxLength - ellipsis.length) + ellipsis; + } + return text; + } + + render() { + if (!this.props.openGraphData || Utils.isEmptyObject(this.props.openGraphData.description)) { + return null; + } + + const data = this.props.openGraphData; + const imageUrl = this.getBestImageUrl(); + + if (imageUrl) { + this.loadImage(imageUrl); + } + + return ( +
+
+
+
+ {this.truncateText(data.site_name)} +

+ + {this.truncateText(data.title || data.url || this.props.link)} + +

+
+
+
+
+ {this.truncateText(data.description)}   + {this.imageToggleAnchoreTag(imageUrl)} +
+ {this.imageTag(imageUrl, true)} +
+
+
+
+ {this.imageTag(imageUrl, false)} +
+
+
+ ); + } +} -- cgit v1.2.3-1-g7c22