// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { setupI18n } from '../../util/setupI18n';
import enMessages from '../../../_locales/en/messages.json';
import { CallMode } from '../../types/Calling';
import { CallingNotification } from './CallingNotification';
import type { CallingNotificationType } from '../../util/callingNotification';
const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/Conversation/CallingNotification', module);
const getCommonProps = () => ({
conversationId: 'fake-conversation-id',
i18n,
messageId: 'fake-message-id',
messageSizeChanged: action('messageSizeChanged'),
nextItem: undefined,
returnToActiveCall: action('returnToActiveCall'),
startCallingLobby: action('startCallingLobby'),
});
[false, true].forEach(wasIncoming => {
[false, true].forEach(wasVideoCall => {
[false, true].forEach(wasDeclined => {
const direction = wasIncoming ? 'incoming' : 'outgoing';
const type = wasVideoCall ? 'video' : 'audio';
const acceptance = wasDeclined ? 'declined' : 'accepted';
const storyName = `Direct call: ${direction} ${type} call, ${acceptance}`;
story.add(storyName, () => (
));
});
});
});
story.add('Two incoming direct calls back-to-back', () => {
const call1: CallingNotificationType = {
callMode: CallMode.Direct,
wasIncoming: true,
wasVideoCall: true,
wasDeclined: false,
acceptedTime: 1618894800000,
endedTime: 1618894800000,
};
const call2: CallingNotificationType = {
callMode: CallMode.Direct,
wasIncoming: true,
wasVideoCall: false,
wasDeclined: false,
endedTime: 1618894800000,
};
return (
<>
>
);
});
story.add('Two outgoing direct calls back-to-back', () => {
const call1: CallingNotificationType = {
callMode: CallMode.Direct,
wasIncoming: false,
wasVideoCall: true,
wasDeclined: false,
acceptedTime: 1618894800000,
endedTime: 1618894800000,
};
const call2: CallingNotificationType = {
callMode: CallMode.Direct,
wasIncoming: false,
wasVideoCall: false,
wasDeclined: false,
endedTime: 1618894800000,
};
return (
<>
>
);
});
[
undefined,
{ isMe: false, title: 'Alice' },
{ isMe: true, title: 'Alicia' },
].forEach(creator => {
let startedBy: string;
if (!creator) {
startedBy = 'with unknown creator';
} else if (creator.isMe) {
startedBy = 'started by you';
} else {
startedBy = 'started by someone else';
}
const storyName = `Group call: active, ${startedBy}`;
story.add(storyName, () => (
));
});
story.add('Group call: started by someone with a long name', () => {
const longName = '😤🪐🦆'.repeat(50);
return (
);
});
story.add('Group call: active, call full', () => (
));
story.add('Group call: ended', () => (
));