Fixes video thumbnail border and large video background color

This commit is contained in:
yanas 2017-01-25 16:53:58 -06:00
parent f13b2462c8
commit 09ba14eb04
3 changed files with 20 additions and 6 deletions

View File

@ -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;

View File

@ -85,9 +85,6 @@ $popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
// Toolbar
$splitterColor: #ccc;
// Thumbnail
$thumbnailBorderColor: rgba(71, 71, 71, .7);
/**
* Forms
*/

View File

@ -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);
}
}