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