diff --git a/css/videolayout_default.css b/css/videolayout_default.css index 58f86498db..1bfddccf25 100644 --- a/css/videolayout_default.css +++ b/css/videolayout_default.css @@ -286,7 +286,6 @@ position: absolute; color: #FFFFFF; top: 0; - right: 23px; padding: 8px 5px; width: 25px; font-size: 8pt; diff --git a/index.html b/index.html index 185e6b1d98..b00f78eaf7 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,7 @@ - + @@ -58,12 +58,12 @@ - + - + diff --git a/jitsipopover.js b/jitsipopover.js index 5a99b87419..af7b755b8f 100644 --- a/jitsipopover.js +++ b/jitsipopover.js @@ -56,12 +56,18 @@ var JitsiPopover = (function () { JitsiPopover.prototype.hide = function () { if(!this.elementIsHovered && !this.popoverIsHovered && this.popoverShown) { - $(".jitsipopover").remove(); - this.popoverShown = false; - + this.forceHide(); } }; + /** + * Hides the popover + */ + JitsiPopover.prototype.forceHide = function () { + $(".jitsipopover").remove(); + this.popoverShown = false; + }; + /** * Creates the popover html */ diff --git a/videolayout.js b/videolayout.js index 86696f86b1..45cebf7ac2 100644 --- a/videolayout.js +++ b/videolayout.js @@ -797,12 +797,27 @@ var VideoLayout = (function (my) { "top"); videoMutedSpan.appendChild(mutedIndicator); } - var audioMutedSpan = $('#' + videoSpanId + '>span.audioMuted'); - videoMutedSpan = $('#' + videoSpanId + '>span.videoMuted'); - videoMutedSpan.css({right: ((audioMutedSpan.length > 0)?'50px':'30px')}); + + VideoLayout.updateMutePosition(videoSpanId); + } }; + my.updateMutePosition = function (videoSpanId) { + var audioMutedSpan = $('#' + videoSpanId + '>span.audioMuted'); + var connectionIndicator = $('#' + videoSpanId + '>div.connectionindicator'); + var videoMutedSpan = $('#' + videoSpanId + '>span.videoMuted'); + if(connectionIndicator.length > 0 + && connectionIndicator[0].style.display != "none") { + audioMutedSpan.css({right: "23px"}); + videoMutedSpan.css({right: ((audioMutedSpan.length > 0? 23 : 0) + 30) + "px"}); + } + else + { + audioMutedSpan.css({right: "0px"}); + videoMutedSpan.css({right: (audioMutedSpan.length > 0? 30 : 0) + "px"}); + } + } /** * Shows audio muted indicator over small videos. * @param {string} isMuted @@ -817,19 +832,20 @@ var VideoLayout = (function (my) { } } else { - if(audioMutedSpan.length > 0 ) - return; - audioMutedSpan = document.createElement('span'); - audioMutedSpan.className = 'audioMuted'; - Util.setTooltip(audioMutedSpan, - "Participant is muted", - "top"); + if(audioMutedSpan.length == 0 ) { + audioMutedSpan = document.createElement('span'); + audioMutedSpan.className = 'audioMuted'; + Util.setTooltip(audioMutedSpan, + "Participant is muted", + "top"); - $('#' + videoSpanId)[0].appendChild(audioMutedSpan); + $('#' + videoSpanId)[0].appendChild(audioMutedSpan); + var mutedIndicator = document.createElement('i'); + mutedIndicator.className = 'icon-mic-disabled'; + audioMutedSpan.appendChild(mutedIndicator); - var mutedIndicator = document.createElement('i'); - mutedIndicator.className = 'icon-mic-disabled'; - audioMutedSpan.appendChild(mutedIndicator); + } + VideoLayout.updateMutePosition(videoSpanId); } }; @@ -1683,8 +1699,8 @@ var VideoLayout = (function (my) { */ ConnectionIndicator.prototype.remove = function() { - this.popover.hide(); this.connectionIndicatorContainer.remove(); + this.popover.forceHide(); }; @@ -1698,11 +1714,15 @@ var VideoLayout = (function (my) { if(percent === null) { this.connectionIndicatorContainer.style.display = "none"; + this.popover.forceHide(); return; } else { - this.connectionIndicatorContainer.style.display = "block"; + if(this.connectionIndicatorContainer.style.display == "none") { + this.connectionIndicatorContainer.style.display = "block"; + VideoLayout.updateMutePosition(this.videoContainer.id); + } } this.bandwidth = object.bandwidth; this.bitrate = object.bitrate; @@ -1742,7 +1762,7 @@ var VideoLayout = (function (my) { * Hides the popover */ ConnectionIndicator.prototype.hide = function () { - this.popover.hide(); + this.popover.forceHide(); }; /** @@ -1750,6 +1770,8 @@ var VideoLayout = (function (my) { */ ConnectionIndicator.prototype.hideIndicator = function () { this.connectionIndicatorContainer.style.display = "none"; + if(this.popover) + this.popover.forceHide(); }; /**