feat(prejoin): Show avatar image on prejoin screen

react/features/base/premeeting/components/web/PreMeetingScreen.js

@@ -19,6 +19,11 @@ type Props = {
      */
     footer?: React$Node,
 
+    /**
+     * The name of the participant.
+     */
+    name?: string,
+
     /**
      * Title of the screen.
      */
@@ -46,13 +51,14 @@ export default class PreMeetingScreen extends PureComponent<Props> {
      * @inheritdoc
      */
     render() {
-        const { title, videoMuted, videoTrack } = this.props;
+        const { name, title, videoMuted, videoTrack } = this.props;
 
         return (
             <div
                 className = 'premeeting-screen'
                 id = 'lobby-screen'>
                 <Preview
+                    name = { name }
                     videoMuted = { videoMuted }
                     videoTrack = { videoTrack } />
                 <div className = 'content'>

react/features/base/premeeting/components/web/Preview.js

@@ -51,6 +51,7 @@ function Preview(props: Props) {
             <Avatar
                 className = 'preview-avatar'
                 displayName = { name }
+                participantId = 'local'
                 size = { 200 } />
         </div>
     );

react/features/prejoin/components/Prejoin.js

@@ -228,6 +228,7 @@ class Prejoin extends Component<Props, State> {
         return (
             <PreMeetingScreen
                 footer = { this._renderFooter() }
+                name = { name }
                 title = { t('prejoin.joinMeeting') }
                 videoMuted = { !showCameraPreview }
                 videoTrack = { videoTrack }>