Update call lobby UI to match new designs

This commit is contained in:
Evan Hahn 2021-08-17 16:45:18 -05:00 committed by GitHub
parent 50c4fa06cc
commit 763c35e546
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 857 additions and 435 deletions

View file

@ -1,7 +1,8 @@
// Copyright 2020 Signal Messenger, LLC
// Copyright 2020-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import { times } from 'lodash';
import { storiesOf } from '@storybook/react';
import { boolean } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
@ -26,33 +27,53 @@ const camera = {
},
};
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
availableCameras: overrideProps.availableCameras || [camera],
conversation: {
title: 'Rick Sanchez',
},
hasLocalAudio: boolean('hasLocalAudio', overrideProps.hasLocalAudio || false),
hasLocalVideo: boolean('hasLocalVideo', overrideProps.hasLocalVideo || false),
i18n,
isGroupCall: boolean('isGroupCall', overrideProps.isGroupCall || false),
isCallFull: boolean('isCallFull', overrideProps.isCallFull || false),
me: overrideProps.me || {
color: AvatarColors[0],
uuid: generateUuid(),
},
onCallCanceled: action('on-call-canceled'),
onJoinCall: action('on-join-call'),
peekedParticipants: overrideProps.peekedParticipants || [],
setLocalAudio: action('set-local-audio'),
setLocalPreview: action('set-local-preview'),
setLocalVideo: action('set-local-video'),
showParticipantsList: boolean(
'showParticipantsList',
Boolean(overrideProps.showParticipantsList)
),
toggleParticipants: action('toggle-participants'),
toggleSettings: action('toggle-settings'),
});
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => {
const isGroupCall = boolean(
'isGroupCall',
overrideProps.isGroupCall || false
);
const conversation = isGroupCall
? getDefaultConversation({
title: 'Tahoe Trip',
type: 'group',
})
: getDefaultConversation();
return {
availableCameras: overrideProps.availableCameras || [camera],
conversation,
groupMembers: isGroupCall
? times(3, () => getDefaultConversation())
: undefined,
hasLocalAudio: boolean(
'hasLocalAudio',
overrideProps.hasLocalAudio || false
),
hasLocalVideo: boolean(
'hasLocalVideo',
overrideProps.hasLocalVideo || false
),
i18n,
isGroupCall,
isCallFull: boolean('isCallFull', overrideProps.isCallFull || false),
me: overrideProps.me || {
color: AvatarColors[0],
uuid: generateUuid(),
},
onCallCanceled: action('on-call-canceled'),
onJoinCall: action('on-join-call'),
peekedParticipants: overrideProps.peekedParticipants || [],
setLocalAudio: action('set-local-audio'),
setLocalPreview: action('set-local-preview'),
setLocalVideo: action('set-local-video'),
showParticipantsList: boolean(
'showParticipantsList',
Boolean(overrideProps.showParticipantsList)
),
toggleParticipants: action('toggle-participants'),
toggleSettings: action('toggle-settings'),
};
};
const fakePeekedParticipant = (conversationProps: Partial<ConversationType>) =>
getDefaultConversation({
@ -123,26 +144,6 @@ story.add('Group Call - 1 peeked participant (self)', () => {
return <CallingLobby {...props} />;
});
story.add('Group Call - 2 peeked participants', () => {
const props = createProps({
isGroupCall: true,
peekedParticipants: ['Sam', 'Cayce'].map(title =>
fakePeekedParticipant({ title })
),
});
return <CallingLobby {...props} />;
});
story.add('Group Call - 3 peeked participants', () => {
const props = createProps({
isGroupCall: true,
peekedParticipants: ['Sam', 'Cayce', 'April'].map(title =>
fakePeekedParticipant({ title })
),
});
return <CallingLobby {...props} />;
});
story.add('Group Call - 4 peeked participants', () => {
const props = createProps({
isGroupCall: true,