Signal-Desktop/ts/components/conversation/Message.stories.tsx

1197 lines
30 KiB
TypeScript
Raw Normal View History

2021-01-27 21:15:43 +00:00
// Copyright 2020-2021 Signal Messenger, LLC
2020-10-30 20:34:04 +00:00
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import { isBoolean } from 'lodash';
import { action } from '@storybook/addon-actions';
2021-05-13 21:49:51 +00:00
import { boolean, number, select, text } from '@storybook/addon-knobs';
2020-08-27 16:57:12 +00:00
import { storiesOf } from '@storybook/react';
2021-04-27 22:11:59 +00:00
import { SignalService } from '../../protobuf';
2021-05-28 16:15:17 +00:00
import { ConversationColors } from '../../types/Colors';
2020-08-27 16:57:12 +00:00
import { EmojiPicker } from '../emoji/EmojiPicker';
import { Message, Props, AudioAttachmentProps } from './Message';
2020-08-27 16:57:12 +00:00
import {
AUDIO_MP3,
IMAGE_JPEG,
IMAGE_PNG,
IMAGE_WEBP,
VIDEO_MP4,
2021-08-09 20:06:21 +00:00
stringToMIMEType,
2020-08-27 16:57:12 +00:00
} from '../../types/MIME';
import { MessageAudio } from './MessageAudio';
import { computePeaks } from '../GlobalAudioContext';
import { setup as setupI18n } from '../../../js/modules/i18n';
import enMessages from '../../../_locales/en/messages.json';
2020-08-27 16:57:12 +00:00
import { pngUrl } from '../../storybook/Fixtures';
2021-05-07 22:21:10 +00:00
import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
2020-09-14 19:51:27 +00:00
2020-08-27 16:57:12 +00:00
const i18n = setupI18n('en', enMessages);
2020-08-27 16:57:12 +00:00
const story = storiesOf('Components/Conversation/Message', module);
const renderEmojiPicker: Props['renderEmojiPicker'] = ({
onClose,
onPickEmoji,
ref,
}) => (
<EmojiPicker
i18n={setupI18n('en', enMessages)}
skinTone={0}
onSetSkinTone={action('EmojiPicker::onSetSkinTone')}
ref={ref}
onClose={onClose}
onPickEmoji={onPickEmoji}
/>
);
const MessageAudioContainer: React.FC<AudioAttachmentProps> = props => {
const [active, setActive] = React.useState<{
id?: string;
context?: string;
}>({});
const audio = React.useMemo(() => new Audio(), []);
return (
<MessageAudio
{...props}
id="storybook"
renderingContext="storybook"
audio={audio}
computePeaks={computePeaks}
setActiveAudioID={(id, context) => setActive({ id, context })}
activeAudioID={active.id}
activeAudioContext={active.context}
/>
);
};
const renderAudioAttachment: Props['renderAudioAttachment'] = props => (
<MessageAudioContainer {...props} />
);
2020-08-27 16:57:12 +00:00
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
attachments: overrideProps.attachments,
2021-05-28 16:15:17 +00:00
author: overrideProps.author || getDefaultConversation(),
2021-04-27 22:11:59 +00:00
reducedMotion: boolean('reducedMotion', false),
2020-09-16 22:42:48 +00:00
bodyRanges: overrideProps.bodyRanges,
canReply: true,
canDownload: true,
canDeleteForEveryone: overrideProps.canDeleteForEveryone || false,
checkForAccount: action('checkForAccount'),
clearSelectedMessage: action('clearSelectedMessage'),
2020-08-27 16:57:12 +00:00
collapseMetadata: overrideProps.collapseMetadata,
2021-05-28 16:15:17 +00:00
conversationColor:
overrideProps.conversationColor ||
select('conversationColor', ConversationColors, ConversationColors[0]),
2020-08-27 16:57:12 +00:00
conversationId: text('conversationId', overrideProps.conversationId || ''),
conversationType: overrideProps.conversationType || 'direct',
deletedForEveryone: overrideProps.deletedForEveryone,
deleteMessage: action('deleteMessage'),
deleteMessageForEveryone: action('deleteMessageForEveryone'),
2020-08-27 16:57:12 +00:00
disableMenu: overrideProps.disableMenu,
disableScroll: overrideProps.disableScroll,
direction: overrideProps.direction || 'incoming',
displayTapToViewMessage: action('displayTapToViewMessage'),
doubleCheckMissingQuoteReference: action('doubleCheckMissingQuoteReference'),
2020-08-27 16:57:12 +00:00
downloadAttachment: action('downloadAttachment'),
expirationLength:
number('expirationLength', overrideProps.expirationLength || 0) ||
undefined,
expirationTimestamp:
number('expirationTimestamp', overrideProps.expirationTimestamp || 0) ||
undefined,
i18n,
id: text('id', overrideProps.id || ''),
renderingContext: 'storybook',
2020-08-27 16:57:12 +00:00
interactionMode: overrideProps.interactionMode || 'keyboard',
isSticker: isBoolean(overrideProps.isSticker)
? overrideProps.isSticker
: false,
isBlocked: isBoolean(overrideProps.isBlocked)
? overrideProps.isBlocked
: false,
isMessageRequestAccepted: isBoolean(overrideProps.isMessageRequestAccepted)
? overrideProps.isMessageRequestAccepted
: true,
2020-08-27 16:57:12 +00:00
isTapToView: overrideProps.isTapToView,
isTapToViewError: overrideProps.isTapToViewError,
isTapToViewExpired: overrideProps.isTapToViewExpired,
2021-01-29 22:58:28 +00:00
kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
markAttachmentAsCorrupted: action('markAttachmentAsCorrupted'),
onHeightChange: action('onHeightChange'),
2020-08-27 16:57:12 +00:00
openConversation: action('openConversation'),
openLink: action('openLink'),
2020-08-27 16:57:12 +00:00
previews: overrideProps.previews || [],
reactions: overrideProps.reactions,
reactToMessage: action('reactToMessage'),
2020-09-14 19:51:27 +00:00
renderEmojiPicker,
renderAudioAttachment,
2020-08-27 16:57:12 +00:00
replyToMessage: action('replyToMessage'),
retrySend: action('retrySend'),
scrollToQuotedMessage: action('scrollToQuotedMessage'),
selectMessage: action('selectMessage'),
2020-08-27 16:57:12 +00:00
showContactDetail: action('showContactDetail'),
showContactModal: action('showContactModal'),
showExpiredIncomingTapToViewToast: action(
'showExpiredIncomingTapToViewToast'
),
showExpiredOutgoingTapToViewToast: action(
'showExpiredOutgoingTapToViewToast'
),
2021-04-27 22:35:35 +00:00
showForwardMessageModal: action('showForwardMessageModal'),
2020-08-27 16:57:12 +00:00
showMessageDetail: action('showMessageDetail'),
showVisualAttachment: action('showVisualAttachment'),
status: overrideProps.status || 'sent',
2021-05-28 16:15:17 +00:00
text: overrideProps.text || text('text', ''),
2020-08-27 16:57:12 +00:00
textPending: boolean('textPending', overrideProps.textPending || false),
timestamp: number('timestamp', overrideProps.timestamp || Date.now()),
});
2020-08-27 16:57:12 +00:00
const renderBothDirections = (props: Props) => (
<>
<Message {...props} />
<br />
<Message {...props} direction="outgoing" />
</>
);
story.add('Plain Message', () => {
const props = createProps({
text:
'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
});
return renderBothDirections(props);
});
story.add('Delivered', () => {
const props = createProps({
direction: 'outgoing',
status: 'delivered',
text:
'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
});
return <Message {...props} />;
});
story.add('Read', () => {
const props = createProps({
direction: 'outgoing',
status: 'read',
text:
'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
});
return <Message {...props} />;
});
story.add('Sending', () => {
const props = createProps({
direction: 'outgoing',
status: 'sending',
text:
'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
});
return <Message {...props} />;
});
2020-08-27 16:57:12 +00:00
story.add('Expiring', () => {
const props = createProps({
expirationLength: 30 * 1000,
expirationTimestamp: Date.now() + 30 * 1000,
text:
'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
});
return renderBothDirections(props);
});
story.add('Pending', () => {
const props = createProps({
text:
'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
textPending: true,
});
return renderBothDirections(props);
});
story.add('Collapsed Metadata', () => {
const props = createProps({
2021-05-07 22:21:10 +00:00
author: getDefaultConversation({ title: 'Fred Willard' }),
2020-08-27 16:57:12 +00:00
collapseMetadata: true,
conversationType: 'group',
text: 'Hello there from a pal!',
});
return renderBothDirections(props);
});
story.add('Recent', () => {
const props = createProps({
text: 'Hello there from a pal!',
timestamp: Date.now() - 30 * 60 * 1000,
});
return renderBothDirections(props);
});
story.add('Older', () => {
const props = createProps({
text: 'Hello there from a pal!',
timestamp: Date.now() - 180 * 24 * 60 * 60 * 1000,
});
return renderBothDirections(props);
});
2021-01-27 21:15:43 +00:00
story.add('Reactions (wider message)', () => {
2020-08-27 16:57:12 +00:00
const props = createProps({
text: 'Hello there from a pal!',
timestamp: Date.now() - 180 * 24 * 60 * 60 * 1000,
reactions: [
{
2020-08-27 16:57:12 +00:00
emoji: '👍',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2020-08-27 16:57:12 +00:00
isMe: true,
id: '+14155552672',
phoneNumber: '+14155552672',
name: 'Me',
title: 'Me',
2021-05-07 22:21:10 +00:00
}),
2020-08-27 16:57:12 +00:00
timestamp: Date.now() - 10,
},
{
2020-08-27 16:57:12 +00:00
emoji: '👍',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2020-08-27 16:57:12 +00:00
id: '+14155552672',
phoneNumber: '+14155552672',
name: 'Amelia Briggs',
title: 'Amelia',
2021-05-07 22:21:10 +00:00
}),
2020-08-27 16:57:12 +00:00
timestamp: Date.now() - 10,
},
{
2020-08-27 16:57:12 +00:00
emoji: '👍',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2020-08-27 16:57:12 +00:00
id: '+14155552673',
phoneNumber: '+14155552673',
name: 'Amelia Briggs',
title: 'Amelia',
2021-05-07 22:21:10 +00:00
}),
2020-08-27 16:57:12 +00:00
timestamp: Date.now() - 10,
},
{
2020-08-27 16:57:12 +00:00
emoji: '😂',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2020-08-27 16:57:12 +00:00
id: '+14155552674',
phoneNumber: '+14155552674',
name: 'Amelia Briggs',
title: 'Amelia',
2021-05-07 22:21:10 +00:00
}),
2020-08-27 16:57:12 +00:00
timestamp: Date.now() - 10,
},
{
2020-08-27 16:57:12 +00:00
emoji: '😂',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2020-08-27 16:57:12 +00:00
id: '+14155552676',
phoneNumber: '+14155552676',
name: 'Amelia Briggs',
title: 'Amelia',
2021-05-07 22:21:10 +00:00
}),
2020-08-27 16:57:12 +00:00
timestamp: Date.now() - 10,
},
{
2020-08-27 16:57:12 +00:00
emoji: '😡',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2020-08-27 16:57:12 +00:00
id: '+14155552677',
phoneNumber: '+14155552677',
name: 'Amelia Briggs',
title: 'Amelia',
2021-05-07 22:21:10 +00:00
}),
2020-08-27 16:57:12 +00:00
timestamp: Date.now() - 10,
},
{
2020-08-27 16:57:12 +00:00
emoji: '👎',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2020-08-27 16:57:12 +00:00
id: '+14155552678',
phoneNumber: '+14155552678',
name: 'Amelia Briggs',
title: 'Amelia',
2021-05-07 22:21:10 +00:00
}),
2020-08-27 16:57:12 +00:00
timestamp: Date.now() - 10,
},
{
2020-08-27 16:57:12 +00:00
emoji: '❤️',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2020-08-27 16:57:12 +00:00
id: '+14155552679',
phoneNumber: '+14155552679',
name: 'Amelia Briggs',
title: 'Amelia',
2021-05-07 22:21:10 +00:00
}),
2020-08-27 16:57:12 +00:00
timestamp: Date.now() - 10,
},
2020-08-27 16:57:12 +00:00
],
});
return renderBothDirections(props);
});
2021-01-27 21:15:43 +00:00
story.add('Reactions (short message)', () => {
const props = createProps({
text: 'h',
timestamp: Date.now(),
reactions: [
{
emoji: '👍',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2021-01-27 21:15:43 +00:00
isMe: true,
id: '+14155552672',
phoneNumber: '+14155552672',
name: 'Me',
title: 'Me',
2021-05-07 22:21:10 +00:00
}),
2021-01-27 21:15:43 +00:00
timestamp: Date.now(),
},
{
emoji: '👍',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2021-01-27 21:15:43 +00:00
id: '+14155552672',
phoneNumber: '+14155552672',
name: 'Amelia Briggs',
title: 'Amelia',
2021-05-07 22:21:10 +00:00
}),
2021-01-27 21:15:43 +00:00
timestamp: Date.now(),
},
{
emoji: '👍',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2021-01-27 21:15:43 +00:00
id: '+14155552673',
phoneNumber: '+14155552673',
name: 'Amelia Briggs',
title: 'Amelia',
2021-05-07 22:21:10 +00:00
}),
2021-01-27 21:15:43 +00:00
timestamp: Date.now(),
},
{
emoji: '😂',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2021-01-27 21:15:43 +00:00
id: '+14155552674',
phoneNumber: '+14155552674',
name: 'Amelia Briggs',
title: 'Amelia',
2021-05-07 22:21:10 +00:00
}),
2021-01-27 21:15:43 +00:00
timestamp: Date.now(),
},
{
emoji: '😂',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2021-01-27 21:15:43 +00:00
id: '+14155552676',
phoneNumber: '+14155552676',
name: 'Amelia Briggs',
title: 'Amelia',
2021-05-07 22:21:10 +00:00
}),
2021-01-27 21:15:43 +00:00
timestamp: Date.now(),
},
{
emoji: '😡',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2021-01-27 21:15:43 +00:00
id: '+14155552677',
phoneNumber: '+14155552677',
name: 'Amelia Briggs',
title: 'Amelia',
2021-05-07 22:21:10 +00:00
}),
2021-01-27 21:15:43 +00:00
timestamp: Date.now(),
},
{
emoji: '👎',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2021-01-27 21:15:43 +00:00
id: '+14155552678',
phoneNumber: '+14155552678',
name: 'Amelia Briggs',
title: 'Amelia',
2021-05-07 22:21:10 +00:00
}),
2021-01-27 21:15:43 +00:00
timestamp: Date.now(),
},
{
emoji: '❤️',
2021-05-07 22:21:10 +00:00
from: getDefaultConversation({
2021-01-27 21:15:43 +00:00
id: '+14155552679',
phoneNumber: '+14155552679',
name: 'Amelia Briggs',
title: 'Amelia',
2021-05-07 22:21:10 +00:00
}),
2021-01-27 21:15:43 +00:00
timestamp: Date.now(),
},
],
});
return renderBothDirections(props);
});
2020-08-27 16:57:12 +00:00
story.add('Avatar in Group', () => {
const props = createProps({
2021-05-07 22:21:10 +00:00
author: getDefaultConversation({ avatarPath: pngUrl }),
2020-08-27 16:57:12 +00:00
conversationType: 'group',
status: 'sent',
text: 'Hello it is me, the saxophone.',
});
return <Message {...props} />;
});
story.add('Sticker', () => {
const props = createProps({
attachments: [
{
2020-08-27 16:57:12 +00:00
url: '/fixtures/512x515-thumbs-up-lincoln.webp',
fileName: '512x515-thumbs-up-lincoln.webp',
contentType: IMAGE_WEBP,
width: 128,
height: 128,
},
],
2020-08-27 16:57:12 +00:00
isSticker: true,
status: 'sent',
});
return renderBothDirections(props);
});
story.add('Deleted', () => {
const props = createProps({
conversationType: 'group',
deletedForEveryone: true,
status: 'sent',
});
return renderBothDirections(props);
});
story.add('Can delete for everyone', () => {
const props = createProps({
status: 'read',
text: 'I hope you get this.',
canDeleteForEveryone: true,
});
return <Message {...props} direction="outgoing" />;
});
2020-08-27 16:57:12 +00:00
story.add('Error', () => {
const props = createProps({
status: 'error',
text: 'I hope you get this.',
});
return renderBothDirections(props);
});
story.add('Paused', () => {
const props = createProps({
status: 'paused',
text: 'I am up to a challenge',
});
return renderBothDirections(props);
});
2020-08-27 16:57:12 +00:00
story.add('Partial Send', () => {
const props = createProps({
status: 'partial-sent',
text: 'I hope you get this.',
});
return renderBothDirections(props);
});
story.add('Link Preview', () => {
const props = createProps({
previews: [
{
domain: 'signal.org',
image: {
contentType: IMAGE_PNG,
fileName: 'the-sax.png',
height: 240,
url: pngUrl,
width: 320,
},
2020-08-27 16:57:12 +00:00
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.',
2020-08-27 16:57:12 +00:00
url: 'https://www.signal.org',
date: new Date(2020, 2, 10).valueOf(),
2020-08-27 16:57:12 +00:00
},
],
status: 'sent',
text: 'Be sure to look at https://www.signal.org',
});
return renderBothDirections(props);
});
story.add('Link Preview with Small Image', () => {
const props = createProps({
previews: [
{
domain: 'signal.org',
image: {
contentType: IMAGE_PNG,
fileName: 'the-sax.png',
height: 50,
url: pngUrl,
width: 50,
},
2020-08-27 16:57:12 +00:00
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.',
2020-08-27 16:57:12 +00:00
url: 'https://www.signal.org',
date: new Date(2020, 2, 10).valueOf(),
2020-08-27 16:57:12 +00:00
},
],
status: 'sent',
text: 'Be sure to look at https://www.signal.org',
});
return renderBothDirections(props);
});
story.add('Link Preview without Image', () => {
const props = createProps({
previews: [
{
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.',
2020-08-27 16:57:12 +00:00
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 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,
2020-08-27 16:57:12 +00:00
},
],
2020-08-27 16:57:12 +00:00
status: 'sent',
text: 'Be sure to look at https://www.signal.org',
});
return renderBothDirections(props);
});
story.add('Image', () => {
const props = createProps({
attachments: [
2020-05-27 21:37:06 +00:00
{
2020-08-27 16:57:12 +00:00
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
2020-05-27 21:37:06 +00:00
},
],
2020-08-27 16:57:12 +00:00
status: 'sent',
});
return renderBothDirections(props);
});
2021-06-24 21:00:11 +00:00
for (let i = 2; i <= 5; i += 1) {
story.add(`Multiple Images x${i}`, () => {
const props = createProps({
attachments: [
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
].slice(0, i),
status: 'sent',
});
return renderBothDirections(props);
});
}
story.add('Image with Caption', () => {
const props = createProps({
attachments: [
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
],
status: 'sent',
2021-06-24 21:00:11 +00:00
text: 'This is my home.',
});
return renderBothDirections(props);
});
2021-06-24 21:00:11 +00:00
story.add('GIF', () => {
2020-08-27 16:57:12 +00:00
const props = createProps({
attachments: [
2020-08-12 22:47:20 +00:00
{
2021-06-24 21:00:11 +00:00
contentType: VIDEO_MP4,
flags: SignalService.AttachmentPointer.Flags.GIF,
fileName: 'cat-gif.mp4',
url: '/fixtures/cat-gif.mp4',
width: 400,
height: 332,
2020-08-12 22:47:20 +00:00
},
2020-08-27 16:57:12 +00:00
],
status: 'sent',
});
return renderBothDirections(props);
});
2021-04-27 22:11:59 +00:00
2021-06-24 21:00:11 +00:00
story.add('GIF in a group', () => {
2021-04-27 22:11:59 +00:00
const props = createProps({
attachments: [
{
contentType: VIDEO_MP4,
flags: SignalService.AttachmentPointer.Flags.GIF,
fileName: 'cat-gif.mp4',
url: '/fixtures/cat-gif.mp4',
width: 400,
height: 332,
},
],
2021-06-24 21:00:11 +00:00
conversationType: 'group',
2021-04-27 22:11:59 +00:00
status: 'sent',
});
return renderBothDirections(props);
});
story.add('Not Downloaded GIF', () => {
const props = createProps({
attachments: [
{
contentType: VIDEO_MP4,
flags: SignalService.AttachmentPointer.Flags.GIF,
fileName: 'cat-gif.mp4',
2021-06-24 19:05:27 +00:00
fileSize: '188.61 KB',
2021-04-27 22:11:59 +00:00
blurHash: 'LDA,FDBnm+I=p{tkIUI;~UkpELV]',
width: 400,
height: 332,
},
],
status: 'sent',
});
return renderBothDirections(props);
});
story.add('Pending GIF', () => {
const props = createProps({
attachments: [
{
pending: true,
contentType: VIDEO_MP4,
flags: SignalService.AttachmentPointer.Flags.GIF,
fileName: 'cat-gif.mp4',
2021-06-24 19:05:27 +00:00
fileSize: '188.61 KB',
2021-04-27 22:11:59 +00:00
blurHash: 'LDA,FDBnm+I=p{tkIUI;~UkpELV]',
width: 400,
height: 332,
},
],
status: 'sent',
});
return renderBothDirections(props);
});
2020-08-27 16:57:12 +00:00
story.add('Audio', () => {
const props = createProps({
attachments: [
2020-08-12 22:47:20 +00:00
{
2020-08-27 16:57:12 +00:00
contentType: AUDIO_MP3,
fileName: 'incompetech-com-Agnus-Dei-X.mp3',
url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
2020-08-12 22:47:20 +00:00
},
],
2020-08-27 16:57:12 +00:00
status: 'sent',
});
2020-08-27 16:57:12 +00:00
return renderBothDirections(props);
});
story.add('Audio (played)', () => {
const props = createProps({
attachments: [
{
contentType: AUDIO_MP3,
fileName: 'incompetech-com-Agnus-Dei-X.mp3',
url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
},
],
status: 'viewed',
});
return renderBothDirections(props);
});
story.add('Long Audio', () => {
const props = createProps({
attachments: [
{
contentType: AUDIO_MP3,
fileName: 'long-audio.mp3',
url: '/fixtures/long-audio.mp3',
},
],
status: 'sent',
});
return renderBothDirections(props);
});
2020-08-27 16:57:12 +00:00
story.add('Audio with Caption', () => {
const props = createProps({
attachments: [
{
contentType: AUDIO_MP3,
fileName: 'incompetech-com-Agnus-Dei-X.mp3',
url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
},
],
status: 'sent',
text: 'This is what I sound like.',
});
return renderBothDirections(props);
});
story.add('Audio with Not Downloaded Attachment', () => {
const props = createProps({
attachments: [
{
contentType: AUDIO_MP3,
fileName: 'incompetech-com-Agnus-Dei-X.mp3',
},
],
status: 'sent',
});
return renderBothDirections(props);
});
story.add('Audio with Pending Attachment', () => {
const props = createProps({
attachments: [
{
contentType: AUDIO_MP3,
fileName: 'incompetech-com-Agnus-Dei-X.mp3',
pending: true,
},
],
status: 'sent',
});
return renderBothDirections(props);
});
2020-08-27 16:57:12 +00:00
story.add('Other File Type', () => {
const props = createProps({
attachments: [
{
2021-08-09 20:06:21 +00:00
contentType: stringToMIMEType('text/plain'),
2020-08-27 16:57:12 +00:00
fileName: 'my-resume.txt',
url: 'my-resume.txt',
},
],
status: 'sent',
});
return renderBothDirections(props);
});
story.add('Other File Type with Caption', () => {
const props = createProps({
attachments: [
{
2021-08-09 20:06:21 +00:00
contentType: stringToMIMEType('text/plain'),
2020-08-27 16:57:12 +00:00
fileName: 'my-resume.txt',
url: 'my-resume.txt',
},
],
status: 'sent',
text: 'This is what I have done.',
});
return renderBothDirections(props);
});
2021-02-26 15:08:59 +00:00
story.add('Other File Type with Long Filename', () => {
const props = createProps({
attachments: [
{
2021-08-09 20:06:21 +00:00
contentType: stringToMIMEType('text/plain'),
2021-02-26 15:08:59 +00:00
fileName:
'INSERT-APP-NAME_INSERT-APP-APPLE-ID_AppStore_AppsGamesWatch.psd.zip',
url: 'a2/a2334324darewer4234',
},
],
status: 'sent',
text: 'This is what I have done.',
});
return renderBothDirections(props);
});
2020-08-27 16:57:12 +00:00
story.add('TapToView Image', () => {
const props = createProps({
attachments: [
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
],
isTapToView: true,
status: 'sent',
});
return renderBothDirections(props);
});
story.add('TapToView Video', () => {
const props = createProps({
attachments: [
{
contentType: VIDEO_MP4,
fileName: 'pixabay-Soap-Bubble-7141.mp4',
height: 128,
url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
width: 128,
},
],
isTapToView: true,
status: 'sent',
});
return renderBothDirections(props);
});
story.add('TapToView Expired', () => {
const props = createProps({
attachments: [
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
],
isTapToView: true,
isTapToViewExpired: true,
status: 'sent',
});
return renderBothDirections(props);
});
story.add('TapToView Error', () => {
const props = createProps({
attachments: [
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
],
isTapToView: true,
isTapToViewError: true,
status: 'sent',
});
return <Message {...props} />;
});
story.add('Dangerous File Type', () => {
const props = createProps({
attachments: [
{
2021-08-09 20:06:21 +00:00
contentType: stringToMIMEType(
'application/vnd.microsoft.portable-executable'
),
2020-08-27 16:57:12 +00:00
fileName: 'terrible.exe',
url: 'terrible.exe',
},
],
status: 'sent',
});
return renderBothDirections(props);
});
story.add('Colors', () => {
return (
<>
2021-05-28 16:15:17 +00:00
{ConversationColors.map(color => (
<div key={color}>
{renderBothDirections(
createProps({
conversationColor: color,
text: `Here is a preview of the chat color: ${color}. The color is visible to only you.`,
})
)}
</div>
2020-08-27 16:57:12 +00:00
))}
</>
);
});
2020-09-16 22:42:48 +00:00
story.add('@Mentions', () => {
const props = createProps({
bodyRanges: [
{
start: 0,
length: 1,
mentionUuid: 'zap',
replacementText: 'Zapp Brannigan',
},
],
text: '\uFFFC This Is It. The Moment We Should Have Trained For.',
});
return renderBothDirections(props);
});
2020-10-21 18:26:35 +00:00
story.add('All the context menus', () => {
const props = createProps({
attachments: [
{
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
fileName: 'tina-rolf-269345-unsplash.jpg',
contentType: IMAGE_JPEG,
width: 128,
height: 128,
},
],
status: 'partial-sent',
canDeleteForEveryone: true,
});
return <Message {...props} direction="outgoing" />;
});
story.add('Not approved, with link preview', () => {
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: new Date(2020, 2, 10).valueOf(),
},
],
status: 'sent',
text: 'Be sure to look at https://www.signal.org',
isMessageRequestAccepted: false,
});
return renderBothDirections(props);
});
2021-05-28 16:15:17 +00:00
story.add('Custom Color', () => (
<>
<Message
{...createProps({ text: 'Solid.' })}
direction="outgoing"
customColor={{
start: { hue: 82, saturation: 35 },
}}
/>
<br style={{ clear: 'both' }} />
<Message
{...createProps({ text: 'Gradient.' })}
direction="outgoing"
customColor={{
deg: 192,
start: { hue: 304, saturation: 85 },
end: { hue: 231, saturation: 76 },
}}
/>
</>
));