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

Fixes story viewing behavior

Browse source
This commit is contained in:
Josh Perez 2022-07-06 15:06:20 -04:00 • committed by GitHub
parent c4b6eebcd6
commit 3e644f45cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 960 additions and 939 deletions
Download patch file Download diff file Expand all files Collapse all files

244
ts/components/StoryViewer.stories.tsx
View file

@ -1,8 +1,8 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { Meta, Story } from '@storybook/react';
import React from 'react';
import { action } from '@storybook/addon-actions';
import type { PropsType } from './StoryViewer';
import { StoryViewer } from './StoryViewer';
@ -10,184 +10,114 @@ import enMessages from '../../_locales/en/messages.json';
import { setupI18n } from '../util/setupI18n';
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
import { fakeAttachment } from '../test-both/helpers/fakeAttachment';
import { getFakeStoryView } from '../test-both/helpers/getFakeStory';
const i18n = setupI18n('en', enMessages);
export default {
title: 'Components/StoryViewer',
};
component: StoryViewer,
argTypes: {
currentIndex: {
defaultvalue: 0,
},
getPreferredBadge: { action: true },
group: {
defaultValue: undefined,
},
hasAllStoriesMuted: {
defaultValue: false,
},
i18n: {
defaultValue: i18n,
},
loadStoryReplies: { action: true },
markStoryRead: { action: true },
numStories: {
defaultValue: 1,
},
onGoToConversation: { action: true },
onHideStory: { action: true },
onReactToStory: { action: true },
onReplyToStory: { action: true },
onSetSkinTone: { action: true },
onTextTooLong: { action: true },
onUseEmoji: { action: true },
preferredReactionEmoji: {
defaultValue: ['❤️', '👍', '👎', '😂', '😮', '😢'],
},
queueStoryDownload: { action: true },
renderEmojiPicker: { action: true },
skinTone: {
defaultValue: 0,
},
story: {
defaultValue: getFakeStoryView(),
},
toggleHasAllStoriesMuted: { action: true },
viewStory: { action: true },
},
} as Meta;
function getDefaultProps(): PropsType {
const sender = getDefaultConversation();
return {
conversationId: sender.id,
getPreferredBadge: () => undefined,
group: undefined,
hasAllStoriesMuted: false,
i18n,
loadStoryReplies: action('loadStoryReplies'),
markStoryRead: action('markStoryRead'),
onClose: action('onClose'),
onGoToConversation: action('onGoToConversation'),
onHideStory: action('onHideStory'),
onNextUserStories: action('onNextUserStories'),
onPrevUserStories: action('onPrevUserStories'),
onReactToStory: action('onReactToStory'),
onReplyToStory: action('onReplyToStory'),
onSetSkinTone: action('onSetSkinTone'),
onTextTooLong: action('onTextTooLong'),
onUseEmoji: action('onUseEmoji'),
preferredReactionEmoji: ['❤️', '👍', '👎', '😂', '😮', '😢'],
queueStoryDownload: action('queueStoryDownload'),
renderEmojiPicker: () => <div />,
stories: [
{
attachment: fakeAttachment({
path: 'snow.jpg',
url: '/fixtures/snow.jpg',
}),
canReply: true,
messageId: '123',
sender,
timestamp: Date.now(),
},
],
toggleHasAllStoriesMuted: action('toggleHasAllStoriesMuted'),
};
}
export const SomeonesStory = (): JSX.Element => (
<StoryViewer {...getDefaultProps()} />
);
const Template: Story<PropsType> = args => <StoryViewer {...args} />;
export const SomeonesStory = Template.bind({});
SomeonesStory.args = {};
SomeonesStory.story = {
name: "Someone's story",
};
export const WideStory = (): JSX.Element => (
<StoryViewer
{...getDefaultProps()}
stories={[
{
attachment: fakeAttachment({
path: 'file.jpg',
url: '/fixtures/nathan-anderson-316188-unsplash.jpg',
}),
canReply: true,
messageId: '123',
sender: getDefaultConversation(),
timestamp: Date.now(),
},
]}
/>
);
export const WideStory = Template.bind({});
WideStory.args = {
story: getFakeStoryView('/fixtures/nathan-anderson-316188-unsplash.jpg'),
};
WideStory.story = {
name: 'Wide story',
};
export const InAGroup = (): JSX.Element => (
<StoryViewer
{...getDefaultProps()}
group={getDefaultConversation({
avatarPath: '/fixtures/kitten-4-112-112.jpg',
title: 'Family Group',
type: 'group',
})}
/>
);
export const InAGroup = Template.bind({});
InAGroup.args = {
group: getDefaultConversation({
avatarPath: '/fixtures/kitten-4-112-112.jpg',
title: 'Family Group',
type: 'group',
}),
};
InAGroup.story = {
name: 'In a group',
};
export const MultiStory = (): JSX.Element => {
const sender = getDefaultConversation();
return (
<StoryViewer
{...getDefaultProps()}
stories={[
{
attachment: fakeAttachment({
path: 'snow.jpg',
url: '/fixtures/snow.jpg',
}),
messageId: '123',
sender,
timestamp: Date.now(),
},
{
attachment: fakeAttachment({
path: 'file.jpg',
url: '/fixtures/nathan-anderson-316188-unsplash.jpg',
}),
canReply: true,
messageId: '456',
sender,
timestamp: Date.now() - 3600,
},
]}
/>
);
export const MultiStory = Template.bind({});
MultiStory.args = {
currentIndex: 2,
numStories: 7,
story: getFakeStoryView('/fixtures/snow.jpg'),
};
MultiStory.story = {
name: 'Multi story',
};
export const Caption = (): JSX.Element => (
<StoryViewer
{...getDefaultProps()}
group={getDefaultConversation({
avatarPath: '/fixtures/kitten-4-112-112.jpg',
title: 'Broskis',
type: 'group',
})}
replyState={{
messageId: '123',
replies: [
{
...getDefaultConversation(),
body: 'Cool',
id: 'abc',
timestamp: Date.now(),
},
],
}}
stories={[
{
attachment: fakeAttachment({
caption: 'This place looks lovely',
path: 'file.jpg',
url: '/fixtures/nathan-anderson-316188-unsplash.jpg',
}),
canReply: true,
messageId: '123',
sender: getDefaultConversation(),
timestamp: Date.now(),
},
]}
/>
);
export const Caption = Template.bind({});
Caption.args = {
story: {
...getFakeStoryView(),
attachment: fakeAttachment({
caption: 'This place looks lovely',
path: 'file.jpg',
url: '/fixtures/nathan-anderson-316188-unsplash.jpg',
}),
},
};
export const LongCaption = (): JSX.Element => (
<StoryViewer
{...getDefaultProps()}
hasAllStoriesMuted
stories={[
{
attachment: fakeAttachment({
caption:
'Snowycle, snowycle, snowycle\nI want to ride my snowycle, snowycle, snowycle\nI want to ride my snowycle\nI want to ride my snow\nI want to ride my snowycle\nI want to ride it where I like\nSnowycle, snowycle, snowycle\nI want to ride my snowycle, snowycle, snowycle\nI want to ride my snowycle\nI want to ride my snow\nI want to ride my snowycle\nI want to ride it where I like\nSnowycle, snowycle, snowycle\nI want to ride my snowycle, snowycle, snowycle\nI want to ride my snowycle\nI want to ride my snow\nI want to ride my snowycle\nI want to ride it where I like',
path: 'file.jpg',
url: '/fixtures/snow.jpg',
}),
canReply: true,
messageId: '123',
sender: getDefaultConversation(),
timestamp: Date.now(),
},
]}
/>
);
export const LongCaption = Template.bind({});
LongCaption.args = {
story: {
...getFakeStoryView(),
attachment: fakeAttachment({
caption:
'Snowycle, snowycle, snowycle\nI want to ride my snowycle, snowycle, snowycle\nI want to ride my snowycle\nI want to ride my snow\nI want to ride my snowycle\nI want to ride it where I like\nSnowycle, snowycle, snowycle\nI want to ride my snowycle, snowycle, snowycle\nI want to ride my snowycle\nI want to ride my snow\nI want to ride my snowycle\nI want to ride it where I like\nSnowycle, snowycle, snowycle\nI want to ride my snowycle, snowycle, snowycle\nI want to ride my snowycle\nI want to ride my snow\nI want to ride my snowycle\nI want to ride it where I like',
path: 'file.jpg',
url: '/fixtures/snow.jpg',
}),
},
};