// Copyright 2020 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only import * as React from 'react'; import { noop } from 'lodash'; import { storiesOf } from '@storybook/react'; import { boolean, select } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; import { CallMode, CallState, GroupCallConnectionState, GroupCallJoinState, GroupCallRemoteParticipantType, } from '../types/Calling'; import { ConversationType } from '../state/ducks/conversations'; import { Colors } from '../types/Colors'; import { CallScreen, PropsType } from './CallScreen'; import { setup as setupI18n } from '../../js/modules/i18n'; import { missingCaseError } from '../util/missingCaseError'; import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation'; import enMessages from '../../_locales/en/messages.json'; const i18n = setupI18n('en', enMessages); const conversation = { id: '3051234567', avatarPath: undefined, color: Colors[0], title: 'Rick Sanchez', name: 'Rick Sanchez', phoneNumber: '3051234567', profileName: 'Rick Sanchez', markedUnread: false, type: 'direct' as const, lastUpdated: Date.now(), }; interface OverridePropsBase { hasLocalAudio?: boolean; hasLocalVideo?: boolean; } interface DirectCallOverrideProps extends OverridePropsBase { callMode: CallMode.Direct; callState?: CallState; hasRemoteVideo?: boolean; } interface GroupCallOverrideProps extends OverridePropsBase { callMode: CallMode.Group; connectionState?: GroupCallConnectionState; peekedParticipants?: Array; remoteParticipants?: Array; } const createActiveDirectCallProp = ( overrideProps: DirectCallOverrideProps ) => ({ callMode: CallMode.Direct as CallMode.Direct, conversation, callState: select( 'callState', CallState, overrideProps.callState || CallState.Accepted ), peekedParticipants: [] as [], remoteParticipants: [ { hasRemoteVideo: boolean( 'hasRemoteVideo', Boolean(overrideProps.hasRemoteVideo) ), }, ] as [ { hasRemoteVideo: boolean; } ], }); const createActiveGroupCallProp = (overrideProps: GroupCallOverrideProps) => ({ callMode: CallMode.Group as CallMode.Group, connectionState: overrideProps.connectionState || GroupCallConnectionState.Connected, conversationsWithSafetyNumberChanges: [], joinState: GroupCallJoinState.Joined, maxDevices: 5, deviceCount: (overrideProps.remoteParticipants || []).length, // Because remote participants are a superset, we can use them in place of peeked // participants. peekedParticipants: overrideProps.peekedParticipants || overrideProps.remoteParticipants || [], remoteParticipants: overrideProps.remoteParticipants || [], }); const createActiveCallProp = ( overrideProps: DirectCallOverrideProps | GroupCallOverrideProps ) => { const baseResult = { joinedAt: Date.now(), conversation, hasLocalAudio: boolean( 'hasLocalAudio', overrideProps.hasLocalAudio || false ), hasLocalVideo: boolean( 'hasLocalVideo', overrideProps.hasLocalVideo || false ), pip: false, settingsDialogOpen: false, showParticipantsList: false, }; switch (overrideProps.callMode) { case CallMode.Direct: return { ...baseResult, ...createActiveDirectCallProp(overrideProps) }; case CallMode.Group: return { ...baseResult, ...createActiveGroupCallProp(overrideProps) }; default: throw missingCaseError(overrideProps); } }; const createProps = ( overrideProps: DirectCallOverrideProps | GroupCallOverrideProps = { callMode: CallMode.Direct as CallMode.Direct, } ): PropsType => ({ activeCall: createActiveCallProp(overrideProps), // We allow `any` here because this is fake and actually comes from RingRTC, which we // can't import. // eslint-disable-next-line @typescript-eslint/no-explicit-any getGroupCallVideoFrameSource: noop as any, hangUp: action('hang-up'), i18n, me: { color: Colors[1], name: 'Morty Smith', profileName: 'Morty Smith', title: 'Morty Smith', }, setGroupCallVideoRequest: action('set-group-call-video-request'), setLocalAudio: action('set-local-audio'), setLocalPreview: action('set-local-preview'), setLocalVideo: action('set-local-video'), setRendererCanvas: action('set-renderer-canvas'), stickyControls: boolean('stickyControls', false), toggleParticipants: action('toggle-participants'), togglePip: action('toggle-pip'), toggleSettings: action('toggle-settings'), }); const story = storiesOf('Components/CallScreen', module); story.add('Default', () => { return ; }); story.add('Pre-Ring', () => { return ( ); }); story.add('Ringing', () => { return ( ); }); story.add('Reconnecting', () => { return ( ); }); story.add('Ended', () => { return ( ); }); story.add('hasLocalAudio', () => { return ( ); }); story.add('hasLocalVideo', () => { return ( ); }); story.add('hasRemoteVideo', () => { return ( ); }); story.add('Group call - 1', () => ( )); story.add('Group call - Many', () => ( )); story.add('Group call - reconnecting', () => ( )); story.add('Group call - 0', () => ( ));