Update call lobby UI to match new designs
This commit is contained in:
parent
50c4fa06cc
commit
763c35e546
26 changed files with 857 additions and 435 deletions
|
@ -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,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue