mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Widen the set of link previews which can be received

Browse source
This commit is contained in:
Evan Hahn 2020-08-28 20:27:45 -05:00 • committed by Josh Perez
parent 243ed832ba
commit 2e1e6e847a
10 changed files with 296 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

160
ts/components/conversation/Message.stories.tsx
View file

@ -358,7 +358,10 @@ story.add('Link Preview', () => {
},
isStickerPack: false,
title: 'Signal',
description:
'Say "hello" to a different messaging experience. An unexpected focus on privacy, combined with all of the features you expect.',
url: 'https://www.signal.org',
date: new Date(2020, 2, 10).valueOf(),
},
],
status: 'sent',
@ -382,7 +385,10 @@ story.add('Link Preview with Small Image', () => {
},
isStickerPack: false,
title: 'Signal',
description:
'Say "hello" to a different messaging experience. An unexpected focus on privacy, combined with all of the features you expect.',
url: 'https://www.signal.org',
date: new Date(2020, 2, 10).valueOf(),
},
],
status: 'sent',
@ -399,7 +405,161 @@ story.add('Link Preview without Image', () => {
domain: 'signal.org',
isStickerPack: false,
title: 'Signal',
description:
'Say "hello" to a different messaging experience. An unexpected focus on privacy, combined with all of the features you expect.',
url: 'https://www.signal.org',
date: new Date(2020, 2, 10).valueOf(),
},
],
status: 'sent',
text: 'Be sure to look at https://www.signal.org',
});
return renderBothDirections(props);
});
story.add('Link Preview with no description', () => {
const props = createProps({
previews: [
{
domain: 'signal.org',
isStickerPack: false,
title: 'Signal',
url: 'https://www.signal.org',
date: Date.now(),
},
],
status: 'sent',
text: 'Be sure to look at https://www.signal.org',
});
return renderBothDirections(props);
});
story.add('Link Preview with long description', () => {
const props = createProps({
previews: [
{
domain: 'signal.org',
isStickerPack: false,
title: 'Signal',
description: Array(10)
.fill(
'Say "hello" to a different messaging experience. An unexpected focus on privacy, combined with all of the features you expect.'
)
.join(' '),
url: 'https://www.signal.org',
date: Date.now(),
},
],
status: 'sent',
text: 'Be sure to look at https://www.signal.org',
});
return renderBothDirections(props);
});
story.add('Link Preview with small image, long description', () => {
const props = createProps({
previews: [
{
domain: 'signal.org',
image: {
contentType: IMAGE_PNG,
fileName: 'the-sax.png',
height: 50,
url: pngUrl,
width: 50,
},
isStickerPack: false,
title: 'Signal',
description: Array(10)
.fill(
'Say "hello" to a different messaging experience. An unexpected focus on privacy, combined with all of the features you expect.'
)
.join(' '),
url: 'https://www.signal.org',
date: Date.now(),
},
],
status: 'sent',
text: 'Be sure to look at https://www.signal.org',
});
return renderBothDirections(props);
});
story.add('Link Preview with no date', () => {
const props = createProps({
previews: [
{
domain: 'signal.org',
image: {
contentType: IMAGE_PNG,
fileName: 'the-sax.png',
height: 240,
url: pngUrl,
width: 320,
},
isStickerPack: false,
title: 'Signal',
description:
'Say "hello" to a different messaging experience. An unexpected focus on privacy, combined with all of the features you expect.',
url: 'https://www.signal.org',
},
],
status: 'sent',
text: 'Be sure to look at https://www.signal.org',
});
return renderBothDirections(props);
});
story.add('Link Preview with too old a date', () => {
const props = createProps({
previews: [
{
domain: 'signal.org',
image: {
contentType: IMAGE_PNG,
fileName: 'the-sax.png',
height: 240,
url: pngUrl,
width: 320,
},
isStickerPack: false,
title: 'Signal',
description:
'Say "hello" to a different messaging experience. An unexpected focus on privacy, combined with all of the features you expect.',
url: 'https://www.signal.org',
date: 123,
},
],
status: 'sent',
text: 'Be sure to look at https://www.signal.org',
});
return renderBothDirections(props);
});
story.add('Link Preview with too new a date', () => {
const props = createProps({
previews: [
{
domain: 'signal.org',
image: {
contentType: IMAGE_PNG,
fileName: 'the-sax.png',
height: 240,
url: pngUrl,
width: 320,
},
isStickerPack: false,
title: 'Signal',
description:
'Say "hello" to a different messaging experience. An unexpected focus on privacy, combined with all of the features you expect.',
url: 'https://www.signal.org',
date: Date.now() + 3000000000,
},
],
status: 'sent',

33
ts/components/conversation/Message.tsx
View file

@ -4,6 +4,7 @@ import classNames from 'classnames';
import Measure from 'react-measure';
import { drop, groupBy, orderBy, take } from 'lodash';
import { Manager, Popper, Reference } from 'react-popper';
import moment, { Moment } from 'moment';
import { Avatar } from '../Avatar';
import { Spinner } from '../Spinner';
@ -50,15 +51,19 @@ interface Trigger {
// Same as MIN_WIDTH in ImageGrid.tsx
const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200;
const MINIMUM_LINK_PREVIEW_DATE = new Date(1990, 0, 1).valueOf();
const STICKER_SIZE = 200;
const SELECTED_TIMEOUT = 1000;
const ONE_DAY = 24 * 60 * 60 * 1000;
interface LinkPreviewType {
title: string;
description?: string;
domain: string;
url: string;
isStickerPack: boolean;
image?: AttachmentType;
date?: number;
}
export const MessageStatuses = [
@ -791,6 +796,15 @@ export class Message extends React.PureComponent<Props, State> {
width &&
width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH;
// Don't show old dates or dates too far in the future. This is predicated on the
// idea that showing an invalid dates is worse than hiding valid ones.
const maximumLinkPreviewDate = Date.now() + ONE_DAY;
const isDateValid: boolean =
typeof first.date === 'number' &&
first.date > MINIMUM_LINK_PREVIEW_DATE &&
first.date < maximumLinkPreviewDate;
const dateMoment: Moment | null = isDateValid ? moment(first.date) : null;
return (
<button
className={classNames(
@ -860,8 +874,23 @@ export class Message extends React.PureComponent<Props, State> {
<div className="module-message__link-preview__title">
{first.title}
</div>
<div className="module-message__link-preview__location">
{first.domain}
{first.description && (
<div className="module-message__link-preview__description">
{first.description}
</div>
)}
<div className="module-message__link-preview__footer">
<div className="module-message__link-preview__location">
{first.domain}
</div>
{dateMoment && (
<time
className="module-message__link-preview__date"
dateTime={dateMoment.toISOString()}
>
{dateMoment.format('ll')}
</time>
)}
</div>
</div>
</div>