Link Previews
This commit is contained in:
Scott Nonnenberg
parent
91ef39e482
commit
813924685e
36 changed files with 2298 additions and 134 deletions
|
|
@ -20,6 +20,9 @@ interface Props {
|
|||
curveBottomRight?: boolean;
|
||||
curveTopLeft?: boolean;
|
||||
curveTopRight?: boolean;
|
||||
|
||||
smallCurveTopLeft?: boolean;
|
||||
|
||||
darkOverlay?: boolean;
|
||||
playIconOverlay?: boolean;
|
||||
softCorners?: boolean;
|
||||
|
|
@ -50,6 +53,7 @@ export class Image extends React.Component<Props> {
|
|||
onError,
|
||||
overlayText,
|
||||
playIconOverlay,
|
||||
smallCurveTopLeft,
|
||||
softCorners,
|
||||
url,
|
||||
width,
|
||||
|
|
@ -72,6 +76,7 @@ export class Image extends React.Component<Props> {
|
|||
curveBottomRight ? 'module-image--curved-bottom-right' : null,
|
||||
curveTopLeft ? 'module-image--curved-top-left' : null,
|
||||
curveTopRight ? 'module-image--curved-top-right' : null,
|
||||
smallCurveTopLeft ? 'module-image--small-curved-top-left' : null,
|
||||
softCorners ? 'module-image--soft-corners' : null
|
||||
)}
|
||||
>
|
||||
|
|
@ -97,6 +102,7 @@ export class Image extends React.Component<Props> {
|
|||
curveTopRight ? 'module-image--curved-top-right' : null,
|
||||
curveBottomLeft ? 'module-image--curved-bottom-left' : null,
|
||||
curveBottomRight ? 'module-image--curved-bottom-right' : null,
|
||||
smallCurveTopLeft ? 'module-image--small-curved-top-left' : null,
|
||||
softCorners ? 'module-image--soft-corners' : null,
|
||||
darkOverlay ? 'module-image__border-overlay--dark' : null
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ import { Localizer } from '../../types/Util';
|
|||
|
||||
interface Props {
|
||||
attachments: Array<AttachmentType>;
|
||||
withContentAbove: boolean;
|
||||
withContentBelow: boolean;
|
||||
withContentAbove?: boolean;
|
||||
withContentBelow?: boolean;
|
||||
bottomOverlay?: boolean;
|
||||
|
||||
i18n: Localizer;
|
||||
|
|
@ -370,7 +370,7 @@ type DimensionsType = {
|
|||
width: number;
|
||||
};
|
||||
|
||||
function getImageDimensions(attachment: AttachmentType): DimensionsType {
|
||||
export function getImageDimensions(attachment: AttachmentType): DimensionsType {
|
||||
const { height, width } = attachment;
|
||||
if (!height || !width) {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -202,12 +202,21 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
direction="outgoing"
|
||||
status="error"
|
||||
authorColor="purple"
|
||||
timestamp={Date.now()}
|
||||
timestamp={Date.now() - 56}
|
||||
text="Error!"
|
||||
attachments={[
|
||||
{
|
||||
url: util.gifObjectUrl,
|
||||
contentType: 'image/gif',
|
||||
width: 320,
|
||||
height: 240,
|
||||
},
|
||||
]}
|
||||
i18n={util.i18n}
|
||||
onRetrySend={() => console.log('onRetrySend')}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -261,6 +270,25 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
|
|||
onRetrySend={() => console.log('onRetrySend')}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="outgoing"
|
||||
status="error"
|
||||
authorColor="purple"
|
||||
timestamp={Date.now() - 57}
|
||||
attachments={[
|
||||
{
|
||||
url: util.gifObjectUrl,
|
||||
contentType: 'image/gif',
|
||||
width: 320,
|
||||
height: 240,
|
||||
},
|
||||
]}
|
||||
text="🔥"
|
||||
i18n={util.i18n}
|
||||
onRetrySend={() => console.log('onRetrySend')}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -271,6 +299,24 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
|
|||
i18n={util.i18n}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="error"
|
||||
authorColor="purple"
|
||||
timestamp={Date.now()}
|
||||
text="🔥"
|
||||
attachments={[
|
||||
{
|
||||
url: util.gifObjectUrl,
|
||||
contentType: 'image/gif',
|
||||
width: 320,
|
||||
height: 240,
|
||||
},
|
||||
]}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</li>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
|
|
@ -2533,6 +2579,313 @@ Voice notes are not shown any differently from audio attachments.
|
|||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Link previews, full-size image
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
text="Pretty sweet link: https://instagram.com/something"
|
||||
previews={[
|
||||
{
|
||||
title: 'This is a really sweet post',
|
||||
domain: 'instagram.com',
|
||||
image: {
|
||||
url: util.pngObjectUrl,
|
||||
contentType: 'image/png',
|
||||
width: 800,
|
||||
height: 1200,
|
||||
},
|
||||
},
|
||||
]}
|
||||
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
status="sent"
|
||||
text="Pretty sweet link: https://instagram.com/something"
|
||||
previews={[
|
||||
{
|
||||
title: 'This is a really sweet post',
|
||||
domain: 'instagram.com',
|
||||
image: {
|
||||
url: util.pngObjectUrl,
|
||||
contentType: 'image/png',
|
||||
width: 800,
|
||||
height: 1200,
|
||||
},
|
||||
},
|
||||
]}
|
||||
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
quote={{
|
||||
authorColor: 'purple',
|
||||
text: 'How many ferrets do you have?',
|
||||
authorPhoneNumber: '(202) 555-0011',
|
||||
onClick: () => console.log('onClick'),
|
||||
}}
|
||||
text="Pretty sweet link: https://instagram.com/something"
|
||||
previews={[
|
||||
{
|
||||
title: 'This is a really sweet post',
|
||||
domain: 'instagram.com',
|
||||
image: {
|
||||
url: util.pngObjectUrl,
|
||||
contentType: 'image/png',
|
||||
width: 800,
|
||||
height: 1200,
|
||||
},
|
||||
},
|
||||
]}
|
||||
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
status="sent"
|
||||
quote={{
|
||||
authorColor: 'purple',
|
||||
text: 'How many ferrets do you have?',
|
||||
authorPhoneNumber: '(202) 555-0011',
|
||||
onClick: () => console.log('onClick'),
|
||||
}}
|
||||
text="Pretty sweet link: https://instagram.com/something"
|
||||
previews={[
|
||||
{
|
||||
title: 'This is a really sweet post',
|
||||
domain: 'instagram.com',
|
||||
image: {
|
||||
url: util.pngObjectUrl,
|
||||
contentType: 'image/png',
|
||||
width: 800,
|
||||
height: 1200,
|
||||
},
|
||||
},
|
||||
]}
|
||||
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
|
||||
/>
|
||||
</li>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Link previews, small image
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
text="Pretty sweet link: https://instagram.com/something"
|
||||
previews={[
|
||||
{
|
||||
title: 'This is a really sweet post',
|
||||
domain: 'instagram.com',
|
||||
image: {
|
||||
url: util.pngObjectUrl,
|
||||
contentType: 'image/png',
|
||||
width: 160,
|
||||
height: 120,
|
||||
},
|
||||
},
|
||||
]}
|
||||
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
status="sent"
|
||||
text="Pretty sweet link: https://instagram.com/something"
|
||||
previews={[
|
||||
{
|
||||
title: 'This is a really sweet post',
|
||||
domain: 'instagram.com',
|
||||
image: {
|
||||
url: util.pngObjectUrl,
|
||||
contentType: 'image/png',
|
||||
width: 160,
|
||||
height: 120,
|
||||
},
|
||||
},
|
||||
]}
|
||||
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
quote={{
|
||||
authorColor: 'purple',
|
||||
text: 'How many ferrets do you have?',
|
||||
authorPhoneNumber: '(202) 555-0011',
|
||||
onClick: () => console.log('onClick'),
|
||||
}}
|
||||
text="Pretty sweet link: https://instagram.com/something"
|
||||
previews={[
|
||||
{
|
||||
title:
|
||||
'This is a really sweet post with a really long name. Gotta restrict that to just two lines, you know how that goes...',
|
||||
domain: 'instagram.com',
|
||||
image: {
|
||||
url: util.pngObjectUrl,
|
||||
contentType: 'image/png',
|
||||
width: 160,
|
||||
height: 120,
|
||||
},
|
||||
},
|
||||
]}
|
||||
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
status="sent"
|
||||
quote={{
|
||||
authorColor: 'purple',
|
||||
text: 'How many ferrets do you have?',
|
||||
authorPhoneNumber: '(202) 555-0011',
|
||||
onClick: () => console.log('onClick'),
|
||||
}}
|
||||
text="Pretty sweet link: https://instagram.com/something"
|
||||
previews={[
|
||||
{
|
||||
title:
|
||||
'This is a really sweet post with a really long name. Gotta restrict that to just two lines, you know how that goes...',
|
||||
domain: 'instagram.com',
|
||||
image: {
|
||||
url: util.pngObjectUrl,
|
||||
contentType: 'image/png',
|
||||
width: 160,
|
||||
height: 120,
|
||||
},
|
||||
},
|
||||
]}
|
||||
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
|
||||
/>
|
||||
</li>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Link previews, no image
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
text="Pretty sweet link: https://instagram.com/something"
|
||||
previews={[
|
||||
{
|
||||
title: 'This is a really sweet post',
|
||||
domain: 'instagram.com',
|
||||
},
|
||||
]}
|
||||
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
status="sent"
|
||||
text="Pretty sweet link: https://instagram.com/something"
|
||||
previews={[
|
||||
{
|
||||
title: 'This is a really sweet post',
|
||||
domain: 'instagram.com',
|
||||
},
|
||||
]}
|
||||
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
quote={{
|
||||
authorColor: 'purple',
|
||||
text: 'How many ferrets do you have?',
|
||||
authorPhoneNumber: '(202) 555-0011',
|
||||
onClick: () => console.log('onClick'),
|
||||
}}
|
||||
text="Pretty sweet link: https://instagram.com/something"
|
||||
previews={[
|
||||
{
|
||||
title:
|
||||
'This is a really sweet post with a really long name. Gotta restrict that to just two lines, you know how that goes...',
|
||||
domain: 'instagram.com',
|
||||
},
|
||||
]}
|
||||
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
status="sent"
|
||||
quote={{
|
||||
authorColor: 'purple',
|
||||
text: 'How many ferrets do you have?',
|
||||
authorPhoneNumber: '(202) 555-0011',
|
||||
onClick: () => console.log('onClick'),
|
||||
}}
|
||||
text="Pretty sweet link: https://instagram.com/something"
|
||||
previews={[
|
||||
{
|
||||
title:
|
||||
'This is a really sweet post with a really long name. Gotta restrict that to just two lines, you know how that goes...',
|
||||
domain: 'instagram.com',
|
||||
},
|
||||
]}
|
||||
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
|
||||
/>
|
||||
</li>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
### In a group conversation
|
||||
|
||||
Note that the author avatar goes away if `collapseMetadata` is set.
|
||||
|
|
@ -2713,6 +3066,48 @@ Note that the author avatar goes away if `collapseMetadata` is set.
|
|||
i18n={util.i18n}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
authorName="Mr. Fire"
|
||||
conversationType="group"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
text="Pretty sweet link: https://instagram.com/something"
|
||||
previews={[
|
||||
{
|
||||
title: 'This is a really sweet post',
|
||||
domain: 'instagram.com',
|
||||
image: {
|
||||
url: util.gifObjectUrl,
|
||||
contentType: 'image/gif',
|
||||
width: 320,
|
||||
height: 240,
|
||||
},
|
||||
},
|
||||
]}
|
||||
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
authorName="Mr. Fire"
|
||||
conversationType="group"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
text="Pretty sweet link: https://instagram.com/something"
|
||||
previews={[
|
||||
{
|
||||
title: 'This is a really sweet post',
|
||||
domain: 'instagram.com',
|
||||
},
|
||||
]}
|
||||
onClickLinkPreview={url => console.log('onClickLinkPreview', url)}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="outgoing"
|
||||
|
|
|
|||
|
|
@ -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()}
|
||||
|
|
|
|||
92
ts/components/conversation/StagedLinkPreview.md
Normal file
92
ts/components/conversation/StagedLinkPreview.md
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
#### Still loading
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StagedLinkPreview
|
||||
isLoaded={false}
|
||||
onClose={() => console.log('onClose')}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### No image
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StagedLinkPreview
|
||||
isLoaded={true}
|
||||
title="This is a super-sweet site"
|
||||
domain="instagram.com"
|
||||
onClose={() => console.log('onClose')}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Image
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StagedLinkPreview
|
||||
isLoaded={true}
|
||||
title="This is a super-sweet site"
|
||||
domain="instagram.com"
|
||||
image={{
|
||||
url: util.gifObjectUrl,
|
||||
contentType: 'image/gif',
|
||||
}}
|
||||
onClose={() => console.log('onClose')}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Image, no title
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StagedLinkPreview
|
||||
isLoaded={true}
|
||||
domain="instagram.com"
|
||||
image={{
|
||||
url: util.gifObjectUrl,
|
||||
contentType: 'image/gif',
|
||||
}}
|
||||
onClose={() => console.log('onClose')}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### No image, long title
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StagedLinkPreview
|
||||
isLoaded={true}
|
||||
title="This is a super-sweet site. And it's got some really amazing content in store for you if you just click that link. Can you click that link for me?"
|
||||
domain="instagram.com"
|
||||
onClose={() => console.log('onClose')}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Image, long title
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StagedLinkPreview
|
||||
isLoaded={true}
|
||||
title="This is a super-sweet site. And it's got some really amazing content in store for you if you just click that link. Can you click that link for me?"
|
||||
domain="instagram.com"
|
||||
image={{
|
||||
url: util.gifObjectUrl,
|
||||
contentType: 'image/gif',
|
||||
}}
|
||||
onClose={() => console.log('onClose')}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
65
ts/components/conversation/StagedLinkPreview.tsx
Normal file
65
ts/components/conversation/StagedLinkPreview.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { isImageAttachment } from './ImageGrid';
|
||||
import { Image } from './Image';
|
||||
import { AttachmentType } from './types';
|
||||
|
||||
import { Localizer } from '../../types/Util';
|
||||
|
||||
interface Props {
|
||||
isLoaded: boolean;
|
||||
title: string;
|
||||
domain: string;
|
||||
image?: AttachmentType;
|
||||
|
||||
i18n: Localizer;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export class StagedLinkPreview extends React.Component<Props> {
|
||||
public render() {
|
||||
const { isLoaded, onClose, i18n, title, image, domain } = this.props;
|
||||
|
||||
const isImage = image && isImageAttachment(image);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'module-staged-link-preview',
|
||||
!isLoaded ? 'module-staged-link-preview--is-loading' : null
|
||||
)}
|
||||
>
|
||||
{!isLoaded ? (
|
||||
<div className="module-staged-link-preview__loading">
|
||||
{i18n('loadingPreview')}
|
||||
</div>
|
||||
) : null}
|
||||
{isLoaded && image && isImage ? (
|
||||
<div className="module-staged-link-preview__icon-container">
|
||||
<Image
|
||||
alt={i18n('stagedPreviewThumbnail', [domain])}
|
||||
softCorners={true}
|
||||
height={72}
|
||||
width={72}
|
||||
url={image.url}
|
||||
attachment={image}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{isLoaded ? (
|
||||
<div className="module-staged-link-preview__content">
|
||||
<div className="module-staged-link-preview__title">{title}</div>
|
||||
<div className="module-staged-link-preview__location">{domain}</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div
|
||||
role="button"
|
||||
className="module-staged-link-preview__close-button"
|
||||
onClick={onClose}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -10,6 +10,9 @@ export const VIDEO_MP4 = 'video/mp4' as MIMEType;
|
|||
export const VIDEO_QUICKTIME = 'video/quicktime' as MIMEType;
|
||||
|
||||
export const isJPEG = (value: MIMEType): boolean => value === 'image/jpeg';
|
||||
export const isImage = (value: MIMEType): boolean => value.startsWith('image/');
|
||||
export const isVideo = (value: MIMEType): boolean => value.startsWith('video/');
|
||||
export const isAudio = (value: MIMEType): boolean => value.startsWith('audio/');
|
||||
export const isImage = (value: MIMEType): boolean =>
|
||||
value && value.startsWith('image/');
|
||||
export const isVideo = (value: MIMEType): boolean =>
|
||||
value && value.startsWith('video/');
|
||||
export const isAudio = (value: MIMEType): boolean =>
|
||||
value && value.startsWith('audio/');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue