web,small-video: don't show screen content on thumbnails

This applies just to large view, not tile view.

modules/UI/videolayout/RemoteVideo.js

@@ -373,6 +373,7 @@ export default class RemoteVideo extends SmallVideo {
 
         if (stream === this.videoStream) {
             this.videoStream = null;
+            this.videoType = undefined;
         }
 
         this.updateView();
@@ -481,7 +482,12 @@ export default class RemoteVideo extends SmallVideo {
 
         const isVideo = stream.isVideoTrack();
 
-        isVideo ? this.videoStream = stream : this.audioStream = stream;
+        if (isVideo) {
+            this.videoStream = stream;
+            this.videoType = stream.videoType;
+        } else {
+            this.audioStream = stream;
+        }
 
         if (!stream.getOriginalStream()) {
             logger.debug('Remote video stream has no original stream');

modules/UI/videolayout/SmallVideo.js

@@ -88,6 +88,7 @@ export default class SmallVideo {
         this.audioStream = null;
         this.VideoLayout = VideoLayout;
         this.videoIsHovered = false;
+        this.videoType = undefined;
 
         /**
          * The current state of the user's bridge connection. The value should be
@@ -243,6 +244,7 @@ export default class SmallVideo {
      */
     setScreenSharing(isScreenSharing) {
         this.isScreenSharing = isScreenSharing;
+        this.updateView();
         this.updateStatusBar();
     }
 
@@ -463,8 +465,10 @@ export default class SmallVideo {
      * or <tt>DISPLAY_BLACKNESS_WITH_NAME</tt>.
      */
     selectDisplayMode(input) {
-        // Display name is always and only displayed when user is on the stage
-        if (input.isCurrentlyOnLargeVideo && !input.tileViewActive) {
+        if (!input.tileViewActive && input.isScreenSharing) {
+            return input.isHovered ? DISPLAY_AVATAR_WITH_NAME : DISPLAY_AVATAR;
+        } else if (input.isCurrentlyOnLargeVideo && !input.tileViewActive) {
+            // Display name is always and only displayed when user is on the stage
             return input.isVideoPlayable && !input.isAudioOnly ? DISPLAY_BLACKNESS_WITH_NAME : DISPLAY_AVATAR_WITH_NAME;
         } else if (input.isVideoPlayable && input.hasVideo && !input.isAudioOnly) {
             // check hovering and change state to video with name
@@ -493,6 +497,7 @@ export default class SmallVideo {
             canPlayEventReceived: this._canPlayEventReceived,
             videoStream: Boolean(this.videoStream),
             isVideoMuted: this.isVideoMuted,
+            isScreenSharing: this.isScreenSharing,
             videoStreamMuted: this.videoStream ? this.videoStream.isMuted() : 'no stream'
         };
     }

modules/UI/videolayout/VideoLayout.js

@@ -177,10 +177,7 @@ const VideoLayout = {
             this.onAudioMute(id, stream.isMuted());
         } else {
             this.onVideoMute(id, stream.isMuted());
-
-            if (stream.videoType === 'desktop') {
-                remoteVideo.setScreenSharing(true);
-            }
+            remoteVideo.setScreenSharing(stream.videoType === 'desktop');
         }
     },
 
@@ -192,10 +189,7 @@ const VideoLayout = {
 
         if (remoteVideo) {
             remoteVideo.removeRemoteStreamElement(stream);
-
-            if (stream.videoType === 'desktop') {
-                remoteVideo.setScreenSharing(false);
-            }
+            remoteVideo.setScreenSharing(false);
         }
 
         this.updateMutedForNoTracks(id, stream.getType());
@@ -493,13 +487,14 @@ const VideoLayout = {
     },
 
     onVideoTypeChanged(id, newVideoType) {
-        if (VideoLayout.getRemoteVideoType(id) === newVideoType) {
+        const remoteVideo = remoteVideos[id];
+
+        if (!remoteVideo || remoteVideo.videoType === newVideoType) {
             return;
         }
 
         logger.info('Peer video type changed: ', id, newVideoType);
-
-        this._updateLargeVideoIfDisplayed(id, true);
+        remoteVideo.setScreenSharing(newVideoType === 'desktop');
     },
 
     /**