ref(video-layout): add thumbnails on participant join action

modules/UI/UI.js

@@ -492,9 +492,6 @@ UI.addUser = function(user) {
         APP.store.dispatch(showParticipantJoinedNotification(displayName));
     }
 
-    // Add Peer's container
-    VideoLayout.addParticipantContainer(user);
-
     // Configure avatar
     UI.setUserEmail(id);
 

modules/UI/shared_video/SharedVideo.js

@@ -16,7 +16,8 @@ import {
 } from '../../../react/features/analytics';
 import {
     participantJoined,
-    participantLeft
+    participantLeft,
+    pinParticipant
 } from '../../../react/features/base/participants';
 import {
     dockToolbox,
@@ -24,8 +25,6 @@ import {
     showToolbox
 } from '../../../react/features/toolbox';
 
-import SharedVideoThumb from './SharedVideoThumb';
-
 export const SHARED_VIDEO_CONTAINER_TYPE = 'sharedvideo';
 
 /**
@@ -281,13 +280,6 @@ export default class SharedVideoManager {
 
             player.playVideo();
 
-            const thumb = new SharedVideoThumb(
-                self.url, SHARED_VIDEO_CONTAINER_TYPE, VideoLayout);
-
-            thumb.setDisplayName('YouTube');
-            VideoLayout.addRemoteVideoContainer(self.url, thumb);
-            VideoLayout.resizeThumbnails(true);
-
             const iframe = player.getIframe();
 
             // eslint-disable-next-line no-use-before-define
@@ -317,7 +309,7 @@ export default class SharedVideoManager {
                 name: 'YouTube'
             }));
 
-            thumb.videoClick();
+            APP.store.dispatch(pinParticipant(self.url));
 
             // If we are sending the command and we are starting the player
             // we need to continuously send the player current time position

modules/UI/shared_video/SharedVideoThumb.js

@@ -6,10 +6,10 @@ const logger = require('jitsi-meet-logger').getLogger(__filename);
 /**
  *
  */
-export default function SharedVideoThumb(url, videoType, VideoLayout) {
-    this.id = url;
+export default function SharedVideoThumb(participant, videoType, VideoLayout) {
+    this.id = participant.id;
 
-    this.url = url;
+    this.url = participant.id;
     this.setVideoType(videoType);
     this.videoSpanId = 'sharedVideoContainer';
     this.container = this.createContainer(this.videoSpanId);
@@ -18,6 +18,7 @@ export default function SharedVideoThumb(url, videoType, VideoLayout) {
     this.bindHoverHandler();
     SmallVideo.call(this, VideoLayout);
     this.isVideoMuted = true;
+    this.setDisplayName(participant.name);
 }
 SharedVideoThumb.prototype = Object.create(SmallVideo.prototype);
 SharedVideoThumb.prototype.constructor = SharedVideoThumb;

modules/UI/videolayout/VideoLayout.js

@@ -9,6 +9,9 @@ import {
     pinParticipant
 } from '../../../react/features/base/participants';
 
+import { SHARED_VIDEO_CONTAINER_TYPE } from '../shared_video/SharedVideo';
+import SharedVideoThumb from '../shared_video/SharedVideoThumb';
+
 import Filmstrip from './Filmstrip';
 import UIEvents from '../../../service/UI/UIEvents';
 import UIUtil from '../util/UIUtil';
@@ -16,6 +19,7 @@ import UIUtil from '../util/UIUtil';
 import RemoteVideo from './RemoteVideo';
 import LargeVideoManager from './LargeVideoManager';
 import { VIDEO_CONTAINER_TYPE } from './VideoContainer';
+
 import LocalVideo from './LocalVideo';
 
 const remoteVideos = {};
@@ -434,15 +438,32 @@ const VideoLayout = {
     },
 
     /**
-     * Creates or adds a participant container for the given id and smallVideo.
+     * Creates a participant container for the given id.
      *
-     * @param {JitsiParticipant} user the participant to add
+     * @param {Object} participant - The redux representation of a remote
+     * participant.
+     * @returns {void}
      */
-    addParticipantContainer(user) {
-        const id = user.getId();
-        const remoteVideo = new RemoteVideo(user, VideoLayout, eventEmitter);
+    addRemoteParticipantContainer(participant) {
+        if (!participant || participant.local) {
+            return;
+        } else if (participant.isBot) {
+            const sharedVideoThumb = new SharedVideoThumb(
+                participant,
+                SHARED_VIDEO_CONTAINER_TYPE,
+                VideoLayout);
+
+            this.addRemoteVideoContainer(participant.id, sharedVideoThumb);
+
+            return;
+        }
+
+        const id = participant.id;
+        const jitsiParticipant = APP.conference.getParticipantById(id);
+        const remoteVideo
+            = new RemoteVideo(jitsiParticipant, VideoLayout, eventEmitter);
 
-        this._setRemoteControlProperties(user, remoteVideo);
+        this._setRemoteControlProperties(jitsiParticipant, remoteVideo);
         this.addRemoteVideoContainer(id, remoteVideo);
 
         this.updateMutedForNoTracks(id, 'audio');

react/features/video-layout/middleware.web.js

@@ -5,9 +5,11 @@ import UIEvents from '../../../service/UI/UIEvents';
 
 import {
     DOMINANT_SPEAKER_CHANGED,
+    PARTICIPANT_JOINED,
     PARTICIPANT_LEFT,
     PARTICIPANT_UPDATED,
-    PIN_PARTICIPANT
+    PIN_PARTICIPANT,
+    getParticipantById
 } from '../base/participants';
 import { MiddlewareRegistry } from '../base/redux';
 
@@ -28,6 +30,13 @@ MiddlewareRegistry.register(store => next => action => {
     const result = next(action);
 
     switch (action.type) {
+    case PARTICIPANT_JOINED:
+        if (!action.participant.local) {
+            VideoLayout.addRemoteParticipantContainer(
+                getParticipantById(store.getState(), action.participant.id));
+        }
+        break;
+
     case PARTICIPANT_LEFT:
         VideoLayout.removeParticipantContainer(action.participant.id);
         break;