@messenger-box/platform-browser 10.0.3-alpha.17 → 10.0.3-alpha.171

package/src/components/post_view/post_attachment_opengraph/post_attachment_opengraph.tsx

@@ -1,262 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import * as React from 'react';
-
-// import {
-//     OpenGraphMetadata,
-//     OpenGraphMetadataImage,
-//     Post,
-//     PostImage,
-// } from 'mattermost-redux/types/posts';
-// import {Dictionary} from 'mattermost-redux/types/utilities';
-
-// import SizeAwareImage from 'components/size_aware_image';
-// import ExternalImage from 'components/external_image';
-// import {PostTypes} from 'utils/constants';
-// import {isSystemMessage} from 'utils/post_utils';
-// import {useSafeUrl} from 'utils/url';
-
-// import {getNearestPoint} from './get_nearest_point';
-
-// const DIMENSIONS_NEAREST_POINT_IMAGE = {
-//     height: 80,
-//     width: 80,
-// };
-
-// export type Props = {
-//     postId: string;
-//     link: string;
-//     currentUserId?: string;
-//     post: Post;
-//     openGraphData?: OpenGraphMetadata;
-//     enableLinkPreviews?: boolean;
-//     previewEnabled?: boolean;
-//     isEmbedVisible?: boolean;
-//     toggleEmbedVisibility: () => void;
-//     actions: {
-//         editPost: (post: { id: string; props: Record<string, any> }) => void;
-//     };
-// };
-
-// export default class PostAttachmentOpenGraph extends React.PureComponent<Props> {
-//     getImageMetadata = (imageUrl?: string) => {
-//         if (!imageUrl) {
-//             return undefined;
-//         }
-
-//         const imagesMetadata = this.props.post.metadata.images;
-//         if (!imagesMetadata) {
-//             return undefined;
-//         }
-
-//         return imagesMetadata[imageUrl];
-//     };
-
-//     isLargeImage = (dimensions?: PostImage) => {
-//         if (!dimensions) {
-//             return false;
-//         }
-
-//         const {height, width} = dimensions;
-
-//         const largeImageMinRatio = 16 / 9;
-//         const largeImageMinWidth = 150;
-
-//         const imageRatio = width / height;
-
-//         return width >= largeImageMinWidth && imageRatio >= largeImageMinRatio;
-//     };
-
-//     renderImageToggle() {
-//         return (
-//             <button
-//                 className={'style--none post__embed-visibility color--link'}
-//                 data-expanded={this.props.isEmbedVisible}
-//                 aria-label='Toggle Embed Visibility'
-//                 onClick={this.props.toggleEmbedVisibility}
-//             />
-//         );
-//     }
-
-//     renderLargeImage(imageUrl: string, imageMetadata?: PostImage) {
-//         if (!this.props.isEmbedVisible) {
-//             return undefined;
-//         }
-
-//         return (
-//             <ExternalImage
-//                 src={imageUrl}
-//                 imageMetadata={imageMetadata}
-//             >
-//                 {(safeImageUrl: string) => (
-//                     <SizeAwareImage
-//                         className='attachment__image attachment__image--opengraph large_image'
-//                         src={safeImageUrl}
-//                         dimensions={imageMetadata}
-//                     />
-//                 )}
-//             </ExternalImage>
-//         );
-//     }
-
-//     renderSmallImage(imageUrl: string, imageMetadata?: PostImage) {
-//         if (!this.props.isEmbedVisible) {
-//             return undefined;
-//         }
-
-//         return (
-//             <div className='attachment__image__container--opengraph'>
-//                 <ExternalImage
-//                     src={imageUrl}
-//                     imageMetadata={imageMetadata}
-//                 >
-//                     {(safeImageUrl: string) => (
-//                         <SizeAwareImage
-//                             className='attachment__image attachment__image--opengraph'
-//                             src={safeImageUrl}
-//                             dimensions={imageMetadata}
-//                         />
-//                     )}
-//                 </ExternalImage>
-//             </div>
-//         );
-//     }
-
-//     truncateText(text?: string) {
-//         const maxLength = 300;
-//         const ellipsis = '...';
-
-//         if (text && text.length > maxLength) {
-//             return text.substring(0, maxLength - ellipsis.length) + ellipsis;
-//         }
-//         return text;
-//     }
-
-//     handleRemovePreview = async () => {
-//         const props = Object.assign({}, this.props.post.props);
-//         props[PostTypes.REMOVE_LINK_PREVIEW] = 'true';
-
-//         const patchedPost = {
-//             id: this.props.post.id,
-//             props,
-//         };
-
-//         return this.props.actions.editPost(patchedPost);
-//     };
-
-//     hasPreviewBeenRemoved() {
-//         const {post} = this.props;
-
-//         if (!post || !post.props) {
-//             return false;
-//         }
-
-//         return post.props[PostTypes.REMOVE_LINK_PREVIEW] === 'true';
-//     }
-
-//     render() {
-//         if (!this.props.previewEnabled || !this.props.enableLinkPreviews) {
-//             return null;
-//         }
-
-//         if (!this.props.post || isSystemMessage(this.props.post)) {
-//             return null;
-//         }
-
-//         if (this.hasPreviewBeenRemoved()) {
-//             return null;
-//         }
-
-//         const data = this.props.openGraphData;
-//         if (!data) {
-//             return null;
-//         }
-
-//         const imageUrl = getBestImageUrl(data, this.props.post.metadata.images);
-//         const imageMetadata = this.getImageMetadata(imageUrl);
-//         const hasLargeImage = this.isLargeImage(imageMetadata);
-
-//         let removePreviewButton;
-//         if (this.props.currentUserId === this.props.post.user_id) {
-//             removePreviewButton = (
-//                 <button
-//                     type='button'
-//                     className='btn-close'
-//                     aria-label='Close'
-//                     onClick={this.handleRemovePreview}
-//                     data-testid='removeLinkPreviewButton'
-//                 >
-//                     <span aria-hidden='true'>{'×'}</span>
-//                 </button>
-//             );
-//         }
-
-//         let body;
-//         if (data.description || imageUrl) {
-//             body = (
-//                 <div className={'attachment__body attachment__body--opengraph'}>
-//                     <div>
-//                         {this.truncateText(data.description)}
-//                         {' '}
-//                         {imageUrl && hasLargeImage && this.renderImageToggle()}
-//                     </div>
-//                     {imageUrl && hasLargeImage && this.renderLargeImage(imageUrl, imageMetadata)}
-//                 </div>
-//             );
-//         }
-
-//         return (
-//             <div className='attachment attachment--opengraph'>
-//                 <div className='attachment__content'>
-//                     <div className={'clearfix attachment__container attachment__container--opengraph'}>
-//                         <div className={'attachment__body__wrap attachment__body__wrap--opengraph'}>
-//                             <span className='sitename'>
-//                                 {this.truncateText(data.site_name)}
-//                             </span>
-//                             {removePreviewButton}
-//                             <h1 className={'attachment__title attachment__title--opengraph' + (data.title ? '' : ' is-url')}>
-//                                 <a
-//                                     className='attachment__title-link attachment__title-link--opengraph'
-//                                     href={useSafeUrl(data.url || this.props.link)}
-//                                     target='_blank'
-//                                     rel='noopener noreferrer'
-//                                     title={data.title || data.url || this.props.link}
-//                                 >
-//                                     {this.truncateText(data.title || data.url || this.props.link)}
-//                                 </a>
-//                             </h1>
-//                             {body}
-//                         </div>
-//                         {imageUrl && !hasLargeImage && this.renderSmallImage(imageUrl, imageMetadata)}
-//                     </div>
-//                 </div>
-//             </div>
-//         );
-//     }
-// }
-
-// export function getBestImageUrl(openGraphData?: OpenGraphMetadata, imagesMetadata?: Dictionary<PostImage>) {
-//     if (!openGraphData?.images?.length) {
-//         return undefined;
-//     }
-
-//     // Get the dimensions from the post metadata if they weren't provided by the website as part of the OpenGraph data
-//     const images = openGraphData.images.map((image: OpenGraphMetadataImage) => {
-//         const imageUrl = image.secure_url || image.url;
-
-//         if ((image.width && image.height) || !(imagesMetadata && imagesMetadata[imageUrl])) {
-//             // The image already includes dimensions or we don't have the missing dimensions
-//             return image;
-//         }
-
-//         return {
-//             ...image,
-//             height: image.height || imagesMetadata[imageUrl].height,
-//             width: image.width || imagesMetadata[imageUrl].width,
-//         };
-//     });
-
-//     const bestImage = getNearestPoint<OpenGraphMetadataImage>(DIMENSIONS_NEAREST_POINT_IMAGE, images);
-//     return bestImage.secure_url || bestImage.url;
-// }

package/src/components/post_view/post_body/index.js

@@ -1,36 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import {connect} from 'react-redux';
-
-// import {getPost} from 'mattermost-redux/selectors/entities/posts';
-// import {isCurrentChannelReadOnly, getCurrentChannel} from 'mattermost-redux/selectors/entities/channels';
-// import {getUser} from 'mattermost-redux/selectors/entities/users';
-// import {getConfig} from 'mattermost-redux/selectors/entities/general';
-
-// import PostBody from './post_body.jsx';
-
-// function mapStateToProps(state, ownProps) {
-//     let parentPost;
-//     let parentPostUser;
-//     if (ownProps.post.root_id) {
-//         parentPost = getPost(state, ownProps.post.root_id);
-//         parentPostUser = parentPost ? getUser(state, parentPost.user_id) : null;
-//     }
-
-//     const config = getConfig(state);
-//     const enablePostUsernameOverride = config.EnablePostUsernameOverride === 'true';
-
-//     const currentChannel = getCurrentChannel(state) || {};
-//     const channelIsArchived = currentChannel.delete_at !== 0;
-
-//     return {
-//         parentPost,
-//         parentPostUser,
-//         pluginPostTypes: state.plugins.postTypes,
-//         enablePostUsernameOverride,
-//         isReadOnly: isCurrentChannelReadOnly(state) || channelIsArchived,
-//     };
-// }
-
-// export default connect(mapStateToProps)(PostBody);

package/src/components/post_view/post_body/post_body.jsx

@@ -1,235 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import PropTypes from 'prop-types';
-// import * as React from 'react';
-
-// import {Posts} from 'mattermost-redux/constants';
-
-// import * as PostUtils from 'utils/post_utils';
-// import * as Utils from 'utils/utils.jsx';
-// import DelayedAction from 'utils/delayed_action';
-// import Constants from 'utils/constants.jsx';
-
-// import CommentedOn from 'components/post_view/commented_on';
-// import FileAttachmentListContainer from 'components/file_attachment_list';
-// import FailedPostOptions from 'components/post_view/failed_post_options';
-// import PostBodyAdditionalContent from 'components/post_view/post_body_additional_content';
-// import PostMessageView from 'components/post_view/post_message_view';
-// import ReactionList from 'components/post_view/reaction_list';
-// import LoadingSpinner from 'components/widgets/loading/loading_spinner';
-
-// const SENDING_ANIMATION_DELAY = 3000;
-
-// export default class PostBody extends React.PureComponent {
-//     static propTypes = {
-
-//         /**
-//          * The post to render the body of
-//          */
-//         post: PropTypes.object.isRequired,
-
-//         /**
-//          * The parent post of the thread this post is in
-//          */
-//         parentPost: PropTypes.object,
-
-//         /**
-//          * The poster of the parent post, if exists
-//          */
-//         parentPostUser: PropTypes.object,
-
-//         /**
-//          * Callback func for file menu open
-//          */
-//         handleFileDropdownOpened: PropTypes.func,
-
-//         /**
-//          * The function called when the comment icon is clicked
-//          */
-//         handleCommentClick: PropTypes.func.isRequired,
-
-//         /**
-//          * Set to render post body compactly
-//          */
-//         compactDisplay: PropTypes.bool,
-
-//         /**
-//          * Set to highlight comment as a mention
-//          */
-//         isCommentMention: PropTypes.bool,
-
-//         /**
-//          * Set to render a preview of the parent post above this reply
-//          */
-//         isFirstReply: PropTypes.bool,
-
-//         /*
-//          * Post type components from plugins
-//          */
-//         pluginPostTypes: PropTypes.object,
-
-//         /**
-//          * Flag passed down to PostBodyAdditionalContent for determining if post embed is visible
-//          */
-//         isEmbedVisible: PropTypes.bool,
-
-//         /**
-//          * Whether or not the post username can be overridden.
-//          */
-//         enablePostUsernameOverride: PropTypes.bool.isRequired,
-
-//         /**
-//          * Set not to allow edits on post
-//          */
-//         isReadOnly: PropTypes.bool,
-//     }
-
-//     static defaultProps = {
-//         isReadOnly: false,
-//     }
-
-//     constructor(props) {
-//         super(props);
-
-//         this.sendingAction = new DelayedAction(
-//             () => {
-//                 const post = this.props.post;
-//                 if (post && post.id === post.pending_post_id) {
-//                     this.setState({sending: true});
-//                 }
-//             },
-//         );
-
-//         this.state = {sending: false};
-//     }
-
-//     static getDerivedStateFromProps(props, state) {
-//         if (state.sending && props.post && (props.post.id !== props.post.pending_post_id)) {
-//             return {
-//                 sending: false,
-//             };
-//         }
-
-//         return null;
-//     }
-
-//     componentDidUpdate() {
-//         if (this.state.sending === false) {
-//             this.sendingAction.cancel();
-//         }
-//     }
-
-//     componentDidMount() {
-//         const post = this.props.post;
-//         if (post && post.id === post.pending_post_id) {
-//             this.sendingAction.fireAfter(SENDING_ANIMATION_DELAY);
-//         }
-//     }
-
-//     componentWillUnmount() {
-//         this.sendingAction.cancel();
-//     }
-
-//     render() {
-//         const post = this.props.post;
-//         const parentPost = this.props.parentPost;
-//         const parentPostUser = this.props.parentPostUser;
-
-//         let comment;
-//         let postClass = '';
-//         const isEphemeral = Utils.isPostEphemeral(post);
-
-//         //We want to show the commented on component even if the post was deleted
-//         if (this.props.isFirstReply && parentPost && post.type !== Constants.PostTypes.EPHEMERAL) {
-//             comment = (
-//                 <CommentedOn
-//                     post={parentPost}
-//                     parentPostUser={parentPostUser}
-//                     onCommentClick={this.props.handleCommentClick}
-//                 />
-//             );
-//         }
-
-//         let failedOptions;
-//         if (this.props.post.failed) {
-//             postClass += ' post--fail';
-//             failedOptions = <FailedPostOptions post={this.props.post}/>;
-//         }
-
-//         if (PostUtils.isEdited(this.props.post)) {
-//             postClass += ' post--edited';
-//         }
-
-//         let fileAttachmentHolder = null;
-//         if (((post.file_ids && post.file_ids.length > 0) || (post.filenames && post.filenames.length > 0)) && this.props.post.state !== Posts.POST_DELETED) {
-//             fileAttachmentHolder = (
-//                 <FileAttachmentListContainer
-//                     post={post}
-//                     compactDisplay={this.props.compactDisplay}
-//                     handleFileDropdownOpened={this.props.handleFileDropdownOpened}
-//                 />
-//             );
-//         }
-
-//         if (this.state.sending) {
-//             postClass += ' post-waiting';
-//         }
-
-//         const messageWrapper = (
-//             <React.Fragment>
-//                 {failedOptions}
-//                 {this.state.sending && <LoadingSpinner/>}
-//                 <PostMessageView
-//                     post={this.props.post}
-//                     compactDisplay={this.props.compactDisplay}
-//                     hasMention={true}
-//                 />
-//             </React.Fragment>
-//         );
-
-//         const hasPlugin = (post.type && this.props.pluginPostTypes.hasOwnProperty(post.type)) ||
-//             (post.props && post.props.type && this.props.pluginPostTypes.hasOwnProperty(post.props.type));
-
-//         let messageWithAdditionalContent;
-//         if (this.props.post.state === Posts.POST_DELETED || hasPlugin) {
-//             messageWithAdditionalContent = messageWrapper;
-//         } else {
-//             messageWithAdditionalContent = (
-//                 <PostBodyAdditionalContent
-//                     post={this.props.post}
-//                     isEmbedVisible={this.props.isEmbedVisible}
-//                 >
-//                     {messageWrapper}
-//                 </PostBodyAdditionalContent>
-//             );
-//         }
-
-//         let mentionHighlightClass = '';
-//         if (this.props.isCommentMention) {
-//             mentionHighlightClass = 'mention-comment';
-//         }
-
-//         let ephemeralPostClass = '';
-//         if (isEphemeral) {
-//             ephemeralPostClass = 'post--ephemeral';
-//         }
-
-//         return (
-//             <div>
-//                 {comment}
-//                 <div
-//                     id={`${post.id}_message`}
-//                     className={`post__body ${mentionHighlightClass} ${ephemeralPostClass} ${postClass}`}
-//                 >
-//                     {messageWithAdditionalContent}
-//                     {fileAttachmentHolder}
-//                     <ReactionList
-//                         post={post}
-//                         isReadOnly={this.props.isReadOnly}
-//                     />
-//                 </div>
-//             </div>
-//         );
-//     }
-// }