Adds an overlay to dim videos when showing displayname.
This commit is contained in:
parent
5cead57723
commit
7acda03024
|
@ -62,7 +62,7 @@
|
|||
.videocontainer__toptoolbar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
box-sizing: border-box; // Includes the padding in the 100% width.
|
||||
}
|
||||
|
@ -81,6 +81,15 @@
|
|||
height: $thumbnailIndicatorSize + $toolbarPadding;
|
||||
}
|
||||
|
||||
.videocontainer__overlay {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
background: rgba(0,0,0,.6);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#remoteVideos .videocontainer.videoContainerFocused,
|
||||
#remoteVideos .videocontainer:hover {
|
||||
cursor: hand;
|
||||
|
|
|
@ -255,6 +255,7 @@
|
|||
<audio id="localAudio" autoplay muted></audio>
|
||||
<div class="videocontainer__toolbar"></div>
|
||||
<div class="videocontainer__toptoolbar"></div>
|
||||
<div class="videocontainer__overlay"></div>
|
||||
</span>
|
||||
<audio id="userJoined" src="sounds/joined.wav" preload="auto"></audio>
|
||||
<audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
|
||||
|
|
|
@ -576,6 +576,10 @@ RemoteVideo.createContainer = function (spanId) {
|
|||
toolbar.className = "videocontainer__toolbar";
|
||||
container.appendChild(toolbar);
|
||||
|
||||
let overlay = document.createElement('div');
|
||||
overlay.className = "videocontainer__overlay";
|
||||
container.appendChild(overlay);
|
||||
|
||||
var remotes = document.getElementById('remoteVideos');
|
||||
return remotes.appendChild(container);
|
||||
};
|
||||
|
|
|
@ -163,9 +163,17 @@ SmallVideo.prototype.bindHoverHandler = function () {
|
|||
var self = this;
|
||||
$(this.container).hover(
|
||||
function () {
|
||||
if (!self.VideoLayout.isCurrentlyOnLarge(self.id)) {
|
||||
$('#' + self.videoSpanId + ' .videocontainer__overlay')
|
||||
.removeClass("hide")
|
||||
.addClass("show-inline");
|
||||
}
|
||||
self.showDisplayName(true);
|
||||
},
|
||||
function () {
|
||||
$('#' + self.videoSpanId + ' .videocontainer__overlay')
|
||||
.removeClass("show-inline")
|
||||
.addClass("hide");
|
||||
// If the video has been "pinned" by the user we want to
|
||||
// keep the display name on place.
|
||||
if (!self.VideoLayout.isLargeVideoVisible() ||
|
||||
|
|
Loading…
Reference in New Issue