// 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', () => ( ));