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

@@ -42,10 +42,11 @@ export default class LargeContainer {
 
     /**
      * 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

@@ -178,7 +178,7 @@ export default class LargeVideoManager {
             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

@@ -112,8 +112,11 @@ LocalVideo.prototype.changeVideo = function (stream) {
         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

@@ -431,11 +431,14 @@ RemoteVideo.prototype.removeRemoteStreamElement = function (stream) {
 
     // 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

@@ -1,4 +1,4 @@
-/* global $, APP, interfaceConfig */
+/* global $, interfaceConfig */
 /* jshint -W101 */
 
 import Filmstrip from './Filmstrip';
@@ -11,22 +11,6 @@ export const VIDEO_CONTAINER_TYPE = "camera";
 
 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
@@ -171,7 +155,7 @@ export class VideoContainer extends LargeContainer {
     }
 
     get id () {
-        return getStreamOwnerId(this.stream);
+        return this.userId;
     }
 
     /**
@@ -184,6 +168,7 @@ export class VideoContainer extends LargeContainer {
     constructor (resizeContainer, emitter) {
         super();
         this.stream = null;
+        this.userId = null;
         this.videoType = null;
         this.localFlipX = true;
         this.emitter = emitter;
@@ -410,10 +395,12 @@ export class VideoContainer extends LargeContainer {
 
     /**
      * 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

@@ -761,7 +761,7 @@ var VideoLayout = {
         if (remoteVideo) {
             remoteVideo.updateView();
             if (remoteVideo.isCurrentlyOnLargeVideo()) {
-                this.updateLargeVideo(id);
+                this.updateLargeVideo(id, true);
             }
         }
     },