Adds an overlay to dim videos when showing displayname.

This commit is contained in:
damencho 2016-10-26 15:47:28 -05:00
parent 5cead57723
commit 7acda03024
4 changed files with 23 additions and 1 deletions

View File

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

View File

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

View File

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

View File

@ -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() ||