diff --git a/css/_filmstrip.scss b/css/_filmstrip.scss index 1b6dd089e..21c883619 100644 --- a/css/_filmstrip.scss +++ b/css/_filmstrip.scss @@ -70,7 +70,7 @@ display: none; position: relative; background-size: contain; - border: $thumbnailVideoBorder solid $thumbnailBorderColor; + border: $thumbnailVideoBorder solid transparent; border-radius: $borderRadius; margin: 0 $thumbnailVideoMargin; diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 770c1dfd7..faffcbe74 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -474,6 +474,7 @@ #localConnectionMessage { display: none; position: absolute; + left: 0; width: 100%; top:50%; z-index: 2; diff --git a/css/themes/_light.scss b/css/themes/_light.scss index 8fe4d9569..d49e5d0b8 100644 --- a/css/themes/_light.scss +++ b/css/themes/_light.scss @@ -85,9 +85,6 @@ $popupMenuSelectedItemBackground: rgba(256, 256, 256, .2); // Toolbar $splitterColor: #ccc; -// Thumbnail -$thumbnailBorderColor: rgba(71, 71, 71, .7); - /** * Forms */ diff --git a/modules/UI/videolayout/VideoContainer.js b/modules/UI/videolayout/VideoContainer.js index 62dca6133..84a64def7 100644 --- a/modules/UI/videolayout/VideoContainer.js +++ b/modules/UI/videolayout/VideoContainer.js @@ -361,6 +361,9 @@ export class VideoContainer extends LargeContainer { this.$video.css({ transform: flipX ? 'scaleX(-1)' : 'none' }); + + // Reset the large video background depending on the stream. + this.setLargeVideoBackground(this.avatarDisplayed); } /** @@ -395,8 +398,7 @@ export class VideoContainer extends LargeContainer { // default background set. // In order to fix this code we need to introduce video background or // find a workaround for the video flickering. - $("#largeVideoContainer").css("background", - (show) ? interfaceConfig.DEFAULT_BACKGROUND : "#000"); + this.setLargeVideoBackground(show); this.$avatar.css("visibility", show ? "visible" : "hidden"); this.avatarDisplayed = show; @@ -465,4 +467,19 @@ export class VideoContainer extends LargeContainer { stayOnStage () { return false; } + + /** + * Sets the large video container background depending on the container + * type and the parameter indicating if an avatar is currently shown on + * large. + * + * @param {boolean} isAvatar - Indicates if the avatar is currently shown + * on the large video. + * @returns {void} + */ + setLargeVideoBackground (isAvatar) { + $("#largeVideoContainer").css("background", + (this.videoType === VIDEO_CONTAINER_TYPE && !isAvatar) + ? "#000" : interfaceConfig.DEFAULT_BACKGROUND); + } }