Calling lobby: show your blurred avatar instead of other person's

ts/components/CallManager.tsx

@@ -130,6 +130,7 @@ export const CallManager = ({
             hasLocalVideo={hasLocalVideo}
             i18n={i18n}
             isGroupCall={false}
+            me={me}
             onCallCanceled={cancelCall}
             onJoinCall={() => {
               startCall({

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> = {}): 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 <CallingLobby {...props} />;
-    <CallingLobby
-      {...props}
-      conversation={{
-        ...conversation,
-        avatarPath: 'https://www.stevensegallery.com/600/600',
-      }}
-    />
-  );
 });
 
-story.add('No Camera', () => {
+story.add('No Camera, no avatar', () => {
   const props = createProps({
     availableCameras: [],
   });
   return <CallingLobby {...props} />;
 });
 
+story.add('No Camera, local avatar', () => {
+  const props = createProps({
+    availableCameras: [],
+    me: {
+      color: 'ultramarine' as ColorType,
+      avatarPath: '/fixtures/kitten-4-112-112.jpg',
+    },
+  });
+  return <CallingLobby {...props} />;
+});
+
 story.add('Local Video', () => {
   const props = createProps({
     hasLocalVideo: true,

ts/components/CallingLobby.tsx

@@ -19,14 +19,16 @@ import { ColorType } from '../types/Colors';
 export type PropsType = {
   availableCameras: Array<MediaDeviceInfo>;
   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 ? (
           <video ref={localVideoRef} autoPlay />
         ) : (
-          <CallBackgroundBlur
+          <CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
-            avatarPath={conversation.avatarPath}
-            color={conversation.color}
-          >
             <div className="module-calling-lobby__video-off--icon" />
             <span className="module-calling-lobby__video-off--text">
               {i18n('calling__your-video-is-off')}

ts/util/lint/exceptions.json

@@ -14418,7 +14418,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CallingLobby.tsx",
     "line": "  const localVideoRef = React.useRef(null);",
-    "lineNumber": 54,
+    "lineNumber": 57,
     "reasonCategory": "usageTrusted",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Used to get the local video element for rendering."
@@ -15160,4 +15160,4 @@
     "reasonCategory": "falseMatch",
     "updated": "2020-09-08T23:07:22.682Z"
   }
-]
+]