ref(small-video): use css to set component visibility (#3039)

css/_videolayout_default.scss

@@ -649,3 +649,93 @@
                     1px 0px 1px rgba(0,0,0,0.3),
                     0px 0px 1px rgba(0,0,0,0.3);
 }
+
+.display-avatar-with-name {
+    .avatar-container {
+        visibility: visible;
+    }
+
+    .displayNameContainer {
+        visibility: visible;
+    }
+
+    .videocontainer__hoverOverlay {
+        visibility: visible;
+    }
+
+    video {
+        visibility: hidden;
+    }
+}
+
+.display-name-on-black {
+    .avatar-container {
+        visibility: hidden;
+    }
+
+    .displayNameContainer {
+        visibility: visible;
+    }
+
+    .videocontainer__hoverOverlay {
+        visibility: hidden;
+    }
+
+    video {
+        visibility: hidden;
+    }
+}
+
+.display-video {
+    .avatar-container {
+        visibility: hidden;
+    }
+
+    .displayNameContainer {
+        visibility: hidden;
+    }
+
+    .videocontainer__hoverOverlay {
+        visibility: hidden;
+    }
+
+    video {
+        visibility: visible;
+    }
+}
+
+.display-name-on-video {
+    .avatar-container {
+        visibility: hidden;
+    }
+
+    .displayNameContainer {
+        visibility: visible;
+    }
+
+    .videocontainer__hoverOverlay {
+        visibility: visible;
+    }
+
+    video {
+        visibility: visible;
+    }
+}
+
+.display-avatar-only {
+    .avatar-container {
+        visibility: visible;
+    }
+
+    .displayNameContainer {
+        visibility: hidden;
+    }
+
+    .videocontainer__hoverOverlay {
+        visibility: hidden;
+    }
+
+    video {
+        visibility: hidden;
+    }
+}

modules/UI/videolayout/SmallVideo.js

@@ -85,7 +85,6 @@ function SmallVideo(VideoLayout) {
     this.audioStream = null;
     this.VideoLayout = VideoLayout;
     this.videoIsHovered = false;
-    this.hideDisplayName = false;
 
     // we can stop updating the thumbnail
     this.disableUpdateView = false;
@@ -599,33 +598,30 @@ SmallVideo.prototype.updateView = function() {
         }
     }
 
+    this.$container.removeClass((index, classNames) =>
+        classNames.split(' ').filter(name => name.startsWith('display-')));
+
     // Determine whether video, avatar or blackness should be displayed
     const displayMode = this.selectDisplayMode();
 
-    // Show/hide video.
+    switch (displayMode) {
-
+    case DISPLAY_AVATAR_WITH_NAME:
-    UIUtil.setVisibleBySelector(this.selectVideoElement(),
+        this.$container.addClass('display-avatar-with-name');
-                                displayMode === DISPLAY_VIDEO
+        break;
-                                || displayMode === DISPLAY_VIDEO_WITH_NAME);
+    case DISPLAY_BLACKNESS_WITH_NAME:
-
+        this.$container.addClass('display-name-on-black');
-    // Show/hide the avatar.
+        break;
-    UIUtil.setVisibleBySelector(this.$avatar(),
+    case DISPLAY_VIDEO:
-                                displayMode === DISPLAY_AVATAR
+        this.$container.addClass('display-video');
-                                || displayMode === DISPLAY_AVATAR_WITH_NAME);
+        break;
-
+    case DISPLAY_VIDEO_WITH_NAME:
-    // Show/hide the display name.
+        this.$container.addClass('display-name-on-video');
-    UIUtil.setVisibleBySelector(this.$displayName(),
+        break;
-                                !this.hideDisplayName
+    case DISPLAY_AVATAR:
-                                && (displayMode === DISPLAY_BLACKNESS_WITH_NAME
+    default:
-                                || displayMode === DISPLAY_VIDEO_WITH_NAME
+        this.$container.addClass('display-avatar-only');
-                                || displayMode === DISPLAY_AVATAR_WITH_NAME));
+        break;
-
+    }
-    // show hide overlay when there is a video or avatar under
-    // the display name
-    UIUtil.setVisibleBySelector(this.$container.find(
-                                '.videocontainer__hoverOverlay'),
-                                displayMode === DISPLAY_AVATAR_WITH_NAME
-                                || displayMode === DISPLAY_VIDEO_WITH_NAME);
 };
 
 /**