fix(VideoLayout): store userID in container

The container needs to store user's ID in order for the 'isOnLargeVideo'
logic to work correctly when user has no stream (previously it was
obtained from stream which can be null/undefined).

modules/UI/videolayout/LargeContainer.js

 
     /**
      * Update video stream.
+     * @param {string} userID
      * @param {JitsiTrack?} stream new stream
      * @param {string} videoType video type
      */
-    setStream (stream, videoType) { // eslint-disable-line no-unused-vars
+    setStream (userID, stream, videoType) {// eslint-disable-line no-unused-vars
     }
 
     /**

modules/UI/videolayout/LargeVideoManager.js

             logger.info("hover in %s", id);
             this.state = videoType;
             const container = this.getContainer(this.state);
-            container.setStream(stream, videoType);
+            container.setStream(id, stream, videoType);
 
             // change the avatar url on large
             this.updateAvatar(Avatar.getAvatarUrl(id));

modules/UI/videolayout/LocalVideo.js

         localVideoContainer.removeChild(localVideo);
         // when removing only the video element and we are on stage
         // update the stage
-        if(this.isCurrentlyOnLargeVideo())
-            this.VideoLayout.updateLargeVideo(this.id);
+        if (this.isCurrentlyOnLargeVideo()) {
+            this.VideoLayout.updateLargeVideo(
+                this.id,
+                true /* force - stream removed for the same user ID */);
+        }
         stream.off(TrackEvents.LOCAL_TRACK_STOPPED, endedHandler);
     };
     stream.on(TrackEvents.LOCAL_TRACK_STOPPED, endedHandler);

modules/UI/videolayout/RemoteVideo.js

 
     // when removing only the video element and we are on stage
     // update the stage
-    if (isVideo && this.isCurrentlyOnLargeVideo())
-        this.VideoLayout.updateLargeVideo(this.id);
-    else
+    if (isVideo && this.isCurrentlyOnLargeVideo()) {
+        this.VideoLayout.updateLargeVideo(
+            this.id,
+            true /* force - same user ID, but removed video stream */);
+    } else {
         // Missing video stream will affect display mode
         this.updateView();
+    }
 };
 
 /**

modules/UI/videolayout/VideoContainer.js

-/* global $, APP, interfaceConfig */
+/* global $, interfaceConfig */
 /* jshint -W101 */
 
 import Filmstrip from './Filmstrip';
 
 const FADE_DURATION_MS = 300;
 
-/**
- * Get stream id.
- * @param {JitsiTrack?} stream
- */
-function getStreamOwnerId(stream) {
-    if (!stream) {
-        return;
-    }
-    // local stream doesn't have method "getParticipantId"
-    if (stream.isLocal()) {
-        return APP.conference.getMyUserId();
-    } else {
-        return stream.getParticipantId();
-    }
-}
-
 /**
  * Returns an array of the video dimensions, so that it keeps it's aspect
  * ratio and fits available area with it's larger dimension. This method
     }
 
     get id () {
-        return getStreamOwnerId(this.stream);
+        return this.userId;
     }
 
     /**
     constructor (resizeContainer, emitter) {
         super();
         this.stream = null;
+        this.userId = null;
         this.videoType = null;
         this.localFlipX = true;
         this.emitter = emitter;
 
     /**
      * Update video stream.
+     * @param {string} userID
      * @param {JitsiTrack?} stream new stream
      * @param {string} videoType video type
      */
-    setStream (stream, videoType) {
+    setStream (userID, stream, videoType) {
+        this.userId = userID;
         if (this.stream === stream) {
             // Handles the use case for the remote participants when the
             // videoType is received with delay after turning on/off the

modules/UI/videolayout/VideoLayout.js

         if (remoteVideo) {
             remoteVideo.updateView();
             if (remoteVideo.isCurrentlyOnLargeVideo()) {
-                this.updateLargeVideo(id);
+                this.updateLargeVideo(id, true);
             }
         }
     },