Link Previews

This commit is contained in:
Scott Nonnenberg 2019-01-15 19:03:56 -08:00
parent 91ef39e482
commit 813924685e
36 changed files with 2298 additions and 134 deletions

View file

@ -6,12 +6,15 @@ import { MessageBody } from './MessageBody';
import { ExpireTimer, getIncrement } from './ExpireTimer';
import {
getGridDimensions,
getImageDimensions,
hasImage,
hasVideoScreenshot,
ImageGrid,
isImage,
isImageAttachment,
isVideo,
} from './ImageGrid';
import { Image } from './Image';
import { Timestamp } from './Timestamp';
import { ContactName } from './ContactName';
import { Quote, QuotedAttachmentType } from './Quote';
@ -28,6 +31,16 @@ interface Trigger {
handleContextClick: (event: React.MouseEvent<HTMLDivElement>) => void;
}
// Same as MIN_WIDTH in ImageGrid.tsx
const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200;
interface LinkPreviewType {
title: string;
domain: string;
url: string;
image?: AttachmentType;
}
export interface Props {
disableMenu?: boolean;
text?: string;
@ -61,11 +74,13 @@ export interface Props {
onClick?: () => void;
referencedMessageNotFound: boolean;
};
previews: Array<LinkPreviewType>;
authorAvatarPath?: string;
isExpired: boolean;
expirationLength?: number;
expirationTimestamp?: number;
onClickAttachment?: (attachment: AttachmentType) => void;
onClickLinkPreview?: (url: string) => void;
onReply?: () => void;
onRetrySend?: () => void;
onDownload?: (isDangerous: boolean) => void;
@ -173,7 +188,6 @@ export class Message extends React.Component<Props, State> {
public renderMetadata() {
const {
attachments,
collapseMetadata,
direction,
expirationLength,
@ -183,20 +197,13 @@ export class Message extends React.Component<Props, State> {
text,
timestamp,
} = this.props;
const { imageBroken } = this.state;
if (collapseMetadata) {
return null;
}
const canDisplayAttachment = canDisplayImage(attachments);
const withImageNoCaption = Boolean(
!text &&
canDisplayAttachment &&
!imageBroken &&
((isImage(attachments) && hasImage(attachments)) ||
(isVideo(attachments) && hasVideoScreenshot(attachments)))
);
const isShowingImage = this.isShowingImage();
const withImageNoCaption = Boolean(!text && isShowingImage);
const showError = status === 'error' && direction === 'outgoing';
return (
@ -409,6 +416,107 @@ export class Message extends React.Component<Props, State> {
}
}
// tslint:disable-next-line cyclomatic-complexity
public renderPreview() {
const {
attachments,
conversationType,
direction,
i18n,
onClickLinkPreview,
previews,
quote,
} = this.props;
// Attachments take precedence over Link Previews
if (attachments && attachments.length) {
return null;
}
if (!previews || previews.length < 1) {
return null;
}
const first = previews[0];
if (!first) {
return null;
}
const withContentAbove =
Boolean(quote) ||
(conversationType === 'group' && direction === 'incoming');
const previewHasImage = first.image && isImageAttachment(first.image);
const width = first.image && first.image.width;
const isFullSizeImage = width && width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH;
return (
<div
role="button"
className={classNames(
'module-message__link-preview',
withContentAbove
? 'module-message__link-preview--with-content-above'
: null
)}
onClick={() => {
if (onClickLinkPreview) {
onClickLinkPreview(first.url);
}
}}
>
{first.image && previewHasImage && isFullSizeImage ? (
<ImageGrid
attachments={[first.image]}
withContentAbove={withContentAbove}
withContentBelow={true}
onError={this.handleImageErrorBound}
i18n={i18n}
/>
) : null}
<div
className={classNames(
'module-message__link-preview__content',
withContentAbove || isFullSizeImage
? 'module-message__link-preview__content--with-content-above'
: null
)}
>
{first.image && previewHasImage && !isFullSizeImage ? (
<div className="module-message__link-preview__icon_container">
<Image
smallCurveTopLeft={!withContentAbove}
softCorners={true}
alt={i18n('previewThumbnail', [first.domain])}
height={72}
width={72}
url={first.image.url}
attachment={first.image}
onError={this.handleImageErrorBound}
i18n={i18n}
/>
</div>
) : null}
<div
className={classNames(
'module-message__link-preview__text',
previewHasImage && !isFullSizeImage
? 'module-message__link-preview__text--with-icon'
: null
)}
>
<div className="module-message__link-preview__title">
{first.title}
</div>
<div className="module-message__link-preview__location">
{first.domain}
</div>
</div>
</div>
</div>
);
}
public renderQuote() {
const {
conversationType,
@ -734,16 +842,80 @@ export class Message extends React.Component<Props, State> {
);
}
public getWidth(): Number | undefined {
const { attachments, previews } = this.props;
if (attachments && attachments.length) {
const dimensions = getGridDimensions(attachments);
if (dimensions) {
return dimensions.width;
}
}
if (previews && previews.length) {
const first = previews[0];
if (!first || !first.image) {
return;
}
const { width } = first.image;
if (
isImageAttachment(first.image) &&
width &&
width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH
) {
const dimensions = getImageDimensions(first.image);
if (dimensions) {
return dimensions.width;
}
}
}
return;
}
public isShowingImage() {
const { attachments, previews } = this.props;
const { imageBroken } = this.state;
if (imageBroken) {
return false;
}
if (attachments && attachments.length) {
const displayImage = canDisplayImage(attachments);
return (
displayImage &&
((isImage(attachments) && hasImage(attachments)) ||
(isVideo(attachments) && hasVideoScreenshot(attachments)))
);
}
if (previews && previews.length) {
const first = previews[0];
const { image } = first;
if (!image) {
return false;
}
return isImageAttachment(image);
}
return false;
}
public render() {
const {
attachments,
authorPhoneNumber,
authorColor,
direction,
id,
timestamp,
} = this.props;
const { expired, expiring, imageBroken } = this.state;
const { expired, expiring } = this.state;
// This id is what connects our triple-dot click with our associated pop-up menu.
// It needs to be unique.
@ -753,15 +925,8 @@ export class Message extends React.Component<Props, State> {
return null;
}
const displayImage = canDisplayImage(attachments);
const showingImage =
displayImage &&
!imageBroken &&
((isImage(attachments) && hasImage(attachments)) ||
(isVideo(attachments) && hasVideoScreenshot(attachments)));
const { width } = getGridDimensions(attachments) || { width: undefined };
const width = this.getWidth();
const isShowingImage = this.isShowingImage();
return (
<div
@ -770,9 +935,6 @@ export class Message extends React.Component<Props, State> {
`module-message--${direction}`,
expiring ? 'module-message--expired' : null
)}
style={{
width: showingImage ? width : undefined,
}}
>
{this.renderError(direction === 'incoming')}
{this.renderMenu(direction === 'outgoing', triggerId)}
@ -784,10 +946,14 @@ export class Message extends React.Component<Props, State> {
? `module-message__container--incoming-${authorColor}`
: null
)}
style={{
width: isShowingImage ? width : undefined,
}}
>
{this.renderAuthor()}
{this.renderQuote()}
{this.renderAttachment()}
{this.renderPreview()}
{this.renderEmbeddedContact()}
{this.renderText()}
{this.renderMetadata()}