ref(video-layout): local video does not call video layout directly on stream end

modules/UI/videolayout/LocalVideo.js

@@ -21,9 +21,9 @@ import SmallVideo from './SmallVideo';
 /**
  *
  */
-function LocalVideo(VideoLayout, emitter) {
+function LocalVideo(VideoLayout, emitter, streamEndedCallback) {
     this.videoSpanId = 'localVideoContainer';
-
+    this.streamEndedCallback = streamEndedCallback;
     this.container = this.createContainer();
     this.$container = $(this.container);
     $('#filmstripLocalVideoThumbnail').append(this.container);
@@ -137,17 +137,25 @@ LocalVideo.prototype.changeVideo = function(stream) {
             ReactDOM.unmountComponentAtNode(localVideoContainer);
         }
 
-        // when removing only the video element and we are on stage
-        // update the stage
-        if (this.isCurrentlyOnLargeVideo()) {
-            this.VideoLayout.updateLargeVideo(this.id);
-        }
+        this._notifyOfStreamEnded();
         stream.off(JitsiTrackEvents.LOCAL_TRACK_STOPPED, endedHandler);
     };
 
     stream.on(JitsiTrackEvents.LOCAL_TRACK_STOPPED, endedHandler);
 };
 
+/**
+ * Notify any subscribers of the local video stream ending.
+ *
+ * @private
+ * @returns {void}
+ */
+LocalVideo.prototype._notifyOfStreamEnded = function() {
+    if (this.streamEndedCallback) {
+        this.streamEndedCallback(this.id);
+    }
+};
+
 /**
  * Shows or hides the local video container.
  * @param {boolean} true to make the local video container visible, false

modules/UI/videolayout/VideoLayout.js

@@ -105,7 +105,10 @@ const VideoLayout = {
     init(emitter) {
         eventEmitter = emitter;
 
-        localVideoThumbnail = new LocalVideo(VideoLayout, emitter);
+        localVideoThumbnail = new LocalVideo(
+            VideoLayout,
+            emitter,
+            this._updateLargeVideoIfDisplayed.bind(this));
 
         // sets default video type of local video
         // FIXME container type is totally different thing from the video type
@@ -175,10 +178,7 @@ const VideoLayout = {
 
         localVideoThumbnail.changeVideo(stream);
 
-        /* Update if we're currently being displayed */
-        if (this.isCurrentlyOnLarge(localId)) {
-            this.updateLargeVideo(localId);
-        }
+        this._updateLargeVideoIfDisplayed(localId);
     },
 
     /**
@@ -348,8 +348,8 @@ const VideoLayout = {
             remoteVideo.removeRemoteStreamElement(stream);
         }
 
-        if (stream.isVideoTrack() && this.isCurrentlyOnLarge(id)) {
-            this.updateLargeVideo(id);
+        if (stream.isVideoTrack()) {
+            this._updateLargeVideoIfDisplayed(id);
         }
 
         this.updateMutedForNoTracks(id, stream.getType());
@@ -1147,6 +1147,20 @@ const VideoLayout = {
         Object.values(remoteVideos).forEach(
             remoteVideo => remoteVideo.updateRemoteVideoMenu()
         );
+    },
+
+    /**
+     * Triggers an update of large video if the passed in participant is
+     * currently displayed on large video.
+     *
+     * @param {string} participantId - The participant ID that should trigger an
+     * update of large video if displayed.
+     * @returns {void}
+     */
+    _updateLargeVideoIfDisplayed(participantId) {
+        if (this.isCurrentlyOnLarge(participantId)) {
+            this.updateLargeVideo(participantId);
+        }
     }
 };