signal-desktop/ts/components/CallScreen.stories.tsx

333 lines
8.1 KiB
TypeScript
Raw Normal View History

2020-10-30 15:34:04 -05:00
// Copyright 2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
2020-06-04 11:16:19 -07:00
import * as React from 'react';
2020-11-13 13:57:55 -06:00
import { noop } from 'lodash';
2020-09-11 17:46:52 -07:00
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';
2020-11-17 10:07:53 -05:00
import { Colors } from '../types/Colors';
2020-10-07 21:25:33 -04:00
import { CallScreen, PropsType } from './CallScreen';
2020-06-04 11:16:19 -07:00
import { setup as setupI18n } from '../../js/modules/i18n';
2020-12-02 12:14:03 -06:00
import { missingCaseError } from '../util/missingCaseError';
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
2020-06-04 11:16:19 -07:00
import enMessages from '../../_locales/en/messages.json';
const i18n = setupI18n('en', enMessages);
2020-12-02 12:14:03 -06:00
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;
2020-11-17 10:07:53 -05:00
}
2020-12-02 12:14:03 -06:00
interface DirectCallOverrideProps extends OverridePropsBase {
callMode: CallMode.Direct;
callState?: CallState;
hasRemoteVideo?: boolean;
}
interface GroupCallOverrideProps extends OverridePropsBase {
callMode: CallMode.Group;
connectionState?: GroupCallConnectionState;
peekedParticipants?: Array<ConversationType>;
2020-12-02 12:14:03 -06:00
remoteParticipants?: Array<GroupCallRemoteParticipantType>;
}
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: [],
2020-12-02 12:14:03 -06:00
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
2020-11-13 13:57:55 -06:00
),
2020-12-02 12:14:03 -06:00
hasLocalVideo: boolean(
'hasLocalVideo',
overrideProps.hasLocalVideo || false
2020-11-13 13:57:55 -06:00
),
2020-12-02 12:14:03 -06:00
pip: false,
settingsDialogOpen: false,
showParticipantsList: false,
2020-11-17 10:07:53 -05:00
};
2020-12-02 12:14:03 -06:00
switch (overrideProps.callMode) {
case CallMode.Direct:
return { ...baseResult, ...createActiveDirectCallProp(overrideProps) };
case CallMode.Group:
return { ...baseResult, ...createActiveGroupCallProp(overrideProps) };
default:
throw missingCaseError(overrideProps);
}
};
2020-11-17 10:07:53 -05:00
const createProps = (
2020-12-02 12:14:03 -06:00
overrideProps: DirectCallOverrideProps | GroupCallOverrideProps = {
callMode: CallMode.Direct as CallMode.Direct,
}
2020-11-17 10:07:53 -05:00
): PropsType => ({
2020-12-02 12:14:03 -06:00
activeCall: createActiveCallProp(overrideProps),
2020-11-17 13:49:48 -06:00
// We allow `any` here because this is fake and actually comes from RingRTC, which we
2020-11-13 13:57:55 -06:00
// can't import.
2020-11-17 13:49:48 -06:00
// eslint-disable-next-line @typescript-eslint/no-explicit-any
2020-11-13 13:57:55 -06:00
getGroupCallVideoFrameSource: noop as any,
2020-06-04 11:16:19 -07:00
hangUp: action('hang-up'),
i18n,
me: {
2020-11-17 10:07:53 -05:00
color: Colors[1],
name: 'Morty Smith',
profileName: 'Morty Smith',
title: 'Morty Smith',
},
setGroupCallVideoRequest: action('set-group-call-video-request'),
2020-06-04 11:16:19 -07:00
setLocalAudio: action('set-local-audio'),
2020-08-26 20:03:42 -04:00
setLocalPreview: action('set-local-preview'),
2020-06-04 11:16:19 -07:00
setLocalVideo: action('set-local-video'),
2020-08-26 20:03:42 -04:00
setRendererCanvas: action('set-renderer-canvas'),
2020-11-17 10:07:53 -05:00
stickyControls: boolean('stickyControls', false),
toggleParticipants: action('toggle-participants'),
2020-09-30 20:43:05 -04:00
togglePip: action('toggle-pip'),
2020-08-26 20:03:42 -04:00
toggleSettings: action('toggle-settings'),
2020-10-07 21:25:33 -04:00
});
const story = storiesOf('Components/CallScreen', module);
story.add('Default', () => {
return <CallScreen {...createProps()} />;
});
story.add('Pre-Ring', () => {
2020-11-17 10:07:53 -05:00
return (
<CallScreen
{...createProps({
2020-12-02 12:14:03 -06:00
callMode: CallMode.Direct,
2020-11-17 10:07:53 -05:00
callState: CallState.Prering,
})}
/>
);
2020-10-07 21:25:33 -04:00
});
story.add('Ringing', () => {
2020-11-17 10:07:53 -05:00
return (
<CallScreen
{...createProps({
2020-12-02 12:14:03 -06:00
callMode: CallMode.Direct,
2020-11-17 10:07:53 -05:00
callState: CallState.Ringing,
})}
/>
);
2020-10-07 21:25:33 -04:00
});
story.add('Reconnecting', () => {
2020-11-17 10:07:53 -05:00
return (
<CallScreen
{...createProps({
2020-12-02 12:14:03 -06:00
callMode: CallMode.Direct,
2020-11-17 10:07:53 -05:00
callState: CallState.Reconnecting,
})}
/>
);
2020-10-07 21:25:33 -04:00
});
story.add('Ended', () => {
2020-11-17 10:07:53 -05:00
return (
<CallScreen
{...createProps({
2020-12-02 12:14:03 -06:00
callMode: CallMode.Direct,
2020-11-17 10:07:53 -05:00
callState: CallState.Ended,
})}
/>
);
2020-10-07 21:25:33 -04:00
});
2020-06-04 11:16:19 -07:00
2020-10-07 21:25:33 -04:00
story.add('hasLocalAudio', () => {
2020-12-02 12:14:03 -06:00
return (
<CallScreen
{...createProps({
callMode: CallMode.Direct,
hasLocalAudio: true,
})}
/>
);
2020-10-07 21:25:33 -04:00
});
2020-06-04 11:16:19 -07:00
2020-10-07 21:25:33 -04:00
story.add('hasLocalVideo', () => {
2020-12-02 12:14:03 -06:00
return (
<CallScreen
{...createProps({
callMode: CallMode.Direct,
hasLocalVideo: true,
})}
/>
);
2020-10-07 21:25:33 -04:00
});
2020-06-04 11:16:19 -07:00
2020-10-07 21:25:33 -04:00
story.add('hasRemoteVideo', () => {
2020-12-02 12:14:03 -06:00
return (
<CallScreen
{...createProps({
callMode: CallMode.Direct,
hasRemoteVideo: true,
})}
/>
);
2020-10-07 21:25:33 -04:00
});
2020-11-17 10:07:53 -05:00
story.add('Group call - 1', () => (
<CallScreen
{...createProps({
2020-12-02 12:14:03 -06:00
callMode: CallMode.Group,
remoteParticipants: [
2020-11-17 10:07:53 -05:00
{
demuxId: 0,
hasRemoteAudio: true,
hasRemoteVideo: true,
videoAspectRatio: 1.3,
...getDefaultConversation({
isBlocked: false,
uuid: '72fa60e5-25fb-472d-8a56-e56867c57dda',
title: 'Tyler',
}),
2020-11-17 10:07:53 -05:00
},
],
2020-11-17 10:07:53 -05:00
})}
/>
));
story.add('Group call - Many', () => (
<CallScreen
{...createProps({
2020-12-02 12:14:03 -06:00
callMode: CallMode.Group,
remoteParticipants: [
2020-11-17 10:07:53 -05:00
{
demuxId: 0,
hasRemoteAudio: true,
hasRemoteVideo: true,
videoAspectRatio: 1.3,
...getDefaultConversation({
isBlocked: false,
title: 'Amy',
uuid: '094586f5-8fc2-4ce2-a152-2dfcc99f4630',
}),
2020-11-17 10:07:53 -05:00
},
{
demuxId: 1,
hasRemoteAudio: true,
hasRemoteVideo: true,
videoAspectRatio: 1.3,
...getDefaultConversation({
isBlocked: false,
title: 'Bob',
uuid: 'cb5bdb24-4cbb-4650-8a7a-1a2807051e74',
}),
2020-11-17 10:07:53 -05:00
},
{
demuxId: 2,
hasRemoteAudio: true,
hasRemoteVideo: true,
videoAspectRatio: 1.3,
...getDefaultConversation({
isBlocked: true,
title: 'Alice',
uuid: '2d7d13ae-53dc-4a51-8dc7-976cd85e0b57',
}),
2020-11-17 10:07:53 -05:00
},
],
2020-11-17 10:07:53 -05:00
})}
/>
));
story.add('Group call - reconnecting', () => (
<CallScreen
{...createProps({
2020-12-02 12:14:03 -06:00
callMode: CallMode.Group,
connectionState: GroupCallConnectionState.Reconnecting,
remoteParticipants: [
{
demuxId: 0,
hasRemoteAudio: true,
hasRemoteVideo: true,
videoAspectRatio: 1.3,
...getDefaultConversation({
isBlocked: false,
title: 'Tyler',
uuid: '33871c64-0c22-45ce-8aa4-0ec237ac4a31',
}),
},
],
})}
/>
));
story.add('Group call - 0', () => (
<CallScreen
{...createProps({
callMode: CallMode.Group,
remoteParticipants: [],
})}
/>
));