diff --git a/ts/components/CallManager.tsx b/ts/components/CallManager.tsx index ba317ef872d..616bb9552d5 100644 --- a/ts/components/CallManager.tsx +++ b/ts/components/CallManager.tsx @@ -130,6 +130,7 @@ export const CallManager = ({ hasLocalVideo={hasLocalVideo} i18n={i18n} isGroupCall={false} + me={me} onCallCanceled={cancelCall} onJoinCall={() => { startCall({ diff --git a/ts/components/CallingLobby.stories.tsx b/ts/components/CallingLobby.stories.tsx index 18e12f7be0a..9a6a627280f 100644 --- a/ts/components/CallingLobby.stories.tsx +++ b/ts/components/CallingLobby.stories.tsx @@ -13,16 +13,6 @@ import enMessages from '../../_locales/en/messages.json'; const i18n = setupI18n('en', enMessages); -const conversation = { - id: '3051234567', - avatarPath: undefined, - color: 'ultramarine' as ColorType, - title: 'Rick Sanchez', - name: 'Rick Sanchez', - phoneNumber: '3051234567', - profileName: 'Rick Sanchez', -}; - const camera = { deviceId: 'dfbe6effe70b0611ba0fdc2a9ea3f39f6cb110e6687948f7e5f016c111b7329c', groupId: '63ee218d2446869e40adfc958ff98263e51f74382b0143328ee4826f20a76f47', @@ -35,11 +25,14 @@ const camera = { const createProps = (overrideProps: Partial = {}): PropsType => ({ availableCameras: overrideProps.availableCameras || [camera], - conversation, + conversation: { + title: 'Rick Sanchez', + }, hasLocalAudio: boolean('hasLocalAudio', overrideProps.hasLocalAudio || false), hasLocalVideo: boolean('hasLocalVideo', overrideProps.hasLocalVideo || false), i18n, isGroupCall: boolean('isGroupCall', overrideProps.isGroupCall || false), + me: overrideProps.me || { color: 'ultramarine' as ColorType }, onCallCanceled: action('on-call-canceled'), onJoinCall: action('on-join-call'), setLocalAudio: action('set-local-audio'), @@ -53,24 +46,27 @@ const story = storiesOf('Components/CallingLobby', module); story.add('Default', () => { const props = createProps(); - return ( - - ); + return ; }); -story.add('No Camera', () => { +story.add('No Camera, no avatar', () => { const props = createProps({ availableCameras: [], }); return ; }); +story.add('No Camera, local avatar', () => { + const props = createProps({ + availableCameras: [], + me: { + color: 'ultramarine' as ColorType, + avatarPath: '/fixtures/kitten-4-112-112.jpg', + }, + }); + return ; +}); + story.add('Local Video', () => { const props = createProps({ hasLocalVideo: true, diff --git a/ts/components/CallingLobby.tsx b/ts/components/CallingLobby.tsx index 09108ead019..ac793b37569 100644 --- a/ts/components/CallingLobby.tsx +++ b/ts/components/CallingLobby.tsx @@ -19,14 +19,16 @@ import { ColorType } from '../types/Colors'; export type PropsType = { availableCameras: Array; conversation: { - avatarPath?: string; - color?: ColorType; title: string; }; hasLocalAudio: boolean; hasLocalVideo: boolean; i18n: LocalizerType; isGroupCall: boolean; + me: { + avatarPath?: string; + color?: ColorType; + }; onCallCanceled: () => void; onJoinCall: () => void; setLocalAudio: (_: SetLocalAudioType) => void; @@ -43,6 +45,7 @@ export const CallingLobby = ({ hasLocalVideo, i18n, isGroupCall = false, + me, onCallCanceled, onJoinCall, setLocalAudio, @@ -131,10 +134,7 @@ export const CallingLobby = ({ {hasLocalVideo && availableCameras.length > 0 ? (