mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Group Calling: Improve mute state styling

Browse source
This commit is contained in:
Josh Perez 2020-11-19 13:13:36 -05:00 • committed by Josh Perez
parent c6eafbb8d5
commit 5cc7c9a66a
15 changed files with 203 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

74
ts/components/CallingPip.stories.tsx
View file

@ -9,6 +9,7 @@ import { action } from '@storybook/addon-actions';
import { ColorType } from '../types/Colors';
import { ConversationTypeType } from '../state/ducks/conversations';
import { ActiveCallType } from '../state/ducks/calling';
import { CallingPip, PropsType } from './CallingPip';
import {
CallMode,
@ -43,9 +44,23 @@ const defaultCall = {
hasRemoteVideo: true,
};
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
call: overrideProps.call || defaultCall,
conversation: overrideProps.conversation || conversation,
const createProps = (
overrideProps: Partial<PropsType> = {},
activeCall: Partial<ActiveCallType> = {}
): PropsType => ({
activeCall: {
activeCallState: {
conversationId: '123',
hasLocalAudio: true,
hasLocalVideo: true,
pip: false,
settingsDialogOpen: false,
showParticipantsList: true,
},
call: activeCall.call || defaultCall,
conversation: activeCall.conversation || conversation,
groupCallParticipants: [],
},
// eslint-disable-next-line @typescript-eslint/no-explicit-any
getGroupCallVideoFrameSource: noop as any,
hangUp: action('hang-up'),
@ -59,39 +74,48 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
const story = storiesOf('Components/CallingPip', module);
story.add('Default', () => {
const props = createProps();
const props = createProps({});
return <CallingPip {...props} />;
});
story.add('Contact (with avatar)', () => {
const props = createProps({
conversation: {
...conversation,
avatarPath: 'https://www.fillmurray.com/64/64',
},
});
const props = createProps(
{},
{
conversation: {
...conversation,
avatarPath: 'https://www.fillmurray.com/64/64',
},
}
);
return <CallingPip {...props} />;
});
story.add('Contact (no color)', () => {
const props = createProps({
conversation: {
...conversation,
color: undefined,
},
});
const props = createProps(
{},
{
conversation: {
...conversation,
color: undefined,
},
}
);
return <CallingPip {...props} />;
});
story.add('Group Call', () => {
const props = createProps({
call: {
callMode: CallMode.Group as CallMode.Group,
conversationId: '3051234567',
connectionState: GroupCallConnectionState.Connected,
joinState: GroupCallJoinState.Joined,
remoteParticipants: [],
},
});
const props = createProps(
{},
{
call: {
callMode: CallMode.Group as CallMode.Group,
conversationId: '3051234567',
connectionState: GroupCallConnectionState.Connected,
joinState: GroupCallJoinState.Joined,
remoteParticipants: [],
},
}
);
return <CallingPip {...props} />;
});